-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
28 changed files
with
2,441 additions
and
198 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| <script lang="ts" setup> | ||
| import { useClientsStore } from '../../stores/ClientsStore'; | ||
| import { ConnectorType } from '../../type/common'; | ||
| defineOptions({ | ||
| name: 'ClientInfoDialog', | ||
| }); | ||
| const clientsStore = useClientsStore(); | ||
| const visible = defineModel<boolean>('visible'); | ||
| const props = defineProps<{ | ||
| clientId: string; | ||
| connectorType: string; | ||
| }>(); | ||
| const state = reactive({ | ||
| inputClientName: '', | ||
| }); | ||
| const connectorTypeStr = computed(() => { | ||
| switch (props.connectorType) { | ||
| case ConnectorType.DGLAB: | ||
| return 'DGLab'; | ||
| case ConnectorType.COYOTE_BLE_V2: | ||
| case ConnectorType.COYOTE_BLE_V3: | ||
| return '蓝牙直连'; | ||
| } | ||
| }); | ||
| const setClientName = async (name: string) => { | ||
| clientsStore.updateClientName(props.clientId, name); | ||
| }; | ||
| watch(() => visible.value, (value) => { | ||
| if (value) { | ||
| const clientInfo = clientsStore.getClientInfo(props.clientId); | ||
| console.log(clientInfo); | ||
| if (clientInfo) { | ||
| state.inputClientName = clientInfo.name; | ||
| } | ||
| } | ||
| }); | ||
| watch(() => state.inputClientName, (value) => { | ||
| setClientName(value); | ||
| }); | ||
| </script> | ||
|
|
||
| <template> | ||
| <Dialog v-model:visible="visible" modal header="连接信息" class="mx-4 w-full md:w-[40rem]"> | ||
| <div class="flex flex-col gap-2 mb-4"> | ||
| <div class="flex items-center gap-2"> | ||
| <label class="font-semibold w-30">客户端备注名</label> | ||
| <InputText v-model="state.inputClientName" class="w-full" /> | ||
| </div> | ||
| <span class="text-gray-500 ml-28">客户端备注名会在每次打开页面的恢复连接窗口中显示</span> | ||
| </div> | ||
| <div class="flex items-center gap-2 mb-4"> | ||
| <label class="font-semibold w-30">客户端ID</label> | ||
| <InputText :value="props.clientId" class="w-full" readonly /> | ||
| </div> | ||
| <div class="flex items-center gap-2"> | ||
| <label class="font-semibold w-30">连接方式</label> | ||
| <InputText :value="connectorTypeStr" class="w-full" readonly /> | ||
| </div> | ||
| </Dialog> | ||
| </template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
41 changes: 41 additions & 0 deletions
41
frontend/src/components/dialogs/ConnectToSavedClientsDialog.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <script lang="ts" setup> | ||
| import ConnectToSavedClientsList from '../partials/ConnectToSavedClientsList.vue'; | ||
| defineOptions({ | ||
| name: 'ConnectToSavedClientsDialog', | ||
| }); | ||
| const visible = defineModel<boolean>('visible'); | ||
| const emit = defineEmits<{ | ||
| cancel: []; | ||
| confirm: [clientId: string]; | ||
| }>(); | ||
| const onCancel = () => { | ||
| visible.value = false; | ||
| }; | ||
| const onConnectToClient = (clientId: string) => { | ||
| emit('confirm', clientId); | ||
| visible.value = false; | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <Dialog v-model:visible="visible" modal header="恢复连接" class="connectedToSavedClients-dialog mx-4 w-full md:w-[40rem]"> | ||
| <div class="flex flex-col gap-4"> | ||
| <ConnectToSavedClientsList @connect-to-client="onConnectToClient" /> | ||
|
|
||
| <div class="flex justify-end mt-4 gap-4"> | ||
| <Button label="连接新设备" @click="onCancel"></Button> | ||
| </div> | ||
| </div> | ||
| </Dialog> | ||
| </template> | ||
|
|
||
| <style lang="scss"> | ||
| .connectedToSavedClients-dialog { | ||
| --p-dialog-background: var(--p-surface-50); | ||
| } | ||
| </style> |
82 changes: 82 additions & 0 deletions
82
frontend/src/components/partials/ConnectToSavedClientsList.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| <script lang="ts" setup> | ||
| import { useClientsStore } from '../../stores/ClientsStore'; | ||
| defineOptions({ | ||
| name: 'ConnectToSavedClientsList', | ||
| }); | ||
| const clientsStore = useClientsStore(); | ||
| const emit = defineEmits<{ | ||
| connectToClient: [clientId: string]; | ||
| }>(); | ||
| const sortedClientList = computed(() => { | ||
| return clientsStore.clientList.sort((a, b) => b.lastConnectTime - a.lastConnectTime); | ||
| }); | ||
| const connectToClient = (clientId: string) => { | ||
| emit('connectToClient', clientId); | ||
| }; | ||
| </script> | ||
|
|
||
| <template> | ||
| <DataView class="clientsList-container" :value="sortedClientList"> | ||
| <template #list="slotProps"> | ||
| <div class="flex flex-col"> | ||
| <div v-for="(item, index) in slotProps.items" :key="index"> | ||
| <Card class="clientCard m-1"> | ||
| <template #content> | ||
| <div class="flex flex-col sm:flex-row sm:items-center gap-4"> | ||
| <div | ||
| class="bg-primary text-primary-contrast rounded-full w-10 h-10 flex-shrink-0 flex items-center justify-center"> | ||
| <i class="pi pi-history"></i> | ||
| </div> | ||
| <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6"> | ||
| <div class="flex flex-row md:flex-col justify-between items-start gap-2"> | ||
| <div> | ||
| <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">ID: {{ item.id }}</span> | ||
| <div class="text-lg font-medium">{{ item.name }}</div> | ||
| </div> | ||
| </div> | ||
| <div class="flex flex-col md:items-end gap-8"> | ||
| <div class="flex flex-row-reverse md:flex-row gap-2"> | ||
| <Button icon="pi pi-play" label="连接" class="flex-auto md:flex-initial whitespace-nowrap mr-2" | ||
| @click="connectToClient(item.id)"></Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </Card> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| </DataView> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .clientsList-container { | ||
| --p-dataview-content-background: var(--p-surface-50); | ||
| height: 50vh; | ||
| overflow-y: auto; | ||
| scrollbar-width: thin; | ||
| &::-webkit-scrollbar { | ||
| width: 6px; | ||
| } | ||
| } | ||
| .clientCard { | ||
| --p-card-body-padding: 1rem; | ||
| } | ||
| .bg-primary { | ||
| background-color: var(--p-primary-color); | ||
| } | ||
| .text-primary-contrast { | ||
| color: var(--p-primary-contrast-color); | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.