137 lines
3.6 KiB
Vue
137 lines
3.6 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import type { StoreData } from '@/models/storeData'
|
|
import logoVNC from '@images/misc/remote_128.png'
|
|
|
|
const props = defineProps<Props>()
|
|
const drive = ['M:', 'N:', 'O:', 'P:', 'Q:', 'R:', 'S:', 'T:']
|
|
|
|
const selectedProtocol = ref('hdpos')
|
|
|
|
interface Props {
|
|
storeData: StoreData
|
|
}
|
|
|
|
const localStoreData = ref()
|
|
|
|
onMounted(() => {
|
|
// use copy a store data to prevent changes of ip field
|
|
localStoreData.value = JSON.parse(JSON.stringify(props.storeData))
|
|
localStoreData.value.store.caisses = localStoreData.value.store.caisses.map((caisse: any) => ({
|
|
...caisse,
|
|
drive: null, // replace null with the initial value you want to use
|
|
}))
|
|
})
|
|
|
|
const openVnc = (ip: string) => {
|
|
let url = ''
|
|
|
|
if (selectedProtocol.value === 'hdpos')
|
|
url = `hdpos://tightvnc?ip=${ip}`
|
|
else
|
|
url = `${selectedProtocol.value}://${ip}`
|
|
|
|
window.open(url, '_blank')
|
|
}
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-shadow
|
|
const mountDrive = (ip: string, drive: string) => {
|
|
const url = `hdpos://monter?lettre=${drive}&ip=${ip}`
|
|
|
|
window.open(url, '_blank')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<VRow>
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
>
|
|
<VCard
|
|
flat
|
|
border
|
|
>
|
|
<VCardText>
|
|
<VCardText class="text-center d-flex align-center justify-left">
|
|
<img
|
|
:src="logoVNC"
|
|
size="128"
|
|
>
|
|
<AppSelect
|
|
v-model="selectedProtocol"
|
|
:items="['hdpos', 'vnc']"
|
|
class="me-3"
|
|
style="max-inline-size: 130px"
|
|
/>
|
|
</VCardText>
|
|
<div v-if="localStoreData && localStoreData.store.caisses">
|
|
<div
|
|
v-for="(caisse, index) in localStoreData.store.caisses"
|
|
:key="index"
|
|
class="d-flex align-items-center mb-5"
|
|
>
|
|
<VRow>
|
|
<VCol
|
|
cols="6"
|
|
md="6"
|
|
class="d-flex align-items-center"
|
|
>
|
|
<VTextField
|
|
v-model.lazy="caisse.ip"
|
|
label="IP"
|
|
class="me-3"
|
|
/>
|
|
<VBtn
|
|
v-if="caisse.ip"
|
|
color="primary"
|
|
@click="openVnc(caisse.ip)"
|
|
>
|
|
Pos {{ caisse.id_caisse }}
|
|
</VBtn>
|
|
<VBtn
|
|
v-else
|
|
disabled
|
|
color="primary"
|
|
>
|
|
Pos {{ caisse.id_caisse }}
|
|
</VBtn>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="6"
|
|
class="d-flex align-items-center"
|
|
>
|
|
<AppSelect
|
|
v-model="caisse.drive"
|
|
:items="drive"
|
|
label=""
|
|
density="compact"
|
|
placeholder="Select"
|
|
class="me-3"
|
|
/>
|
|
<VBtn
|
|
v-if="caisse.drive"
|
|
color="primary"
|
|
@click="mountDrive(caisse.ip, caisse.drive)"
|
|
>
|
|
Mount drive {{ caisse.drive }}
|
|
</VBtn>
|
|
<VBtn
|
|
v-else
|
|
disabled
|
|
color="primary"
|
|
>
|
|
Mount drive
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</div>
|
|
</div>
|
|
</VCardText>
|
|
</VCard>
|
|
</VCol>
|
|
</VRow>
|
|
</template>
|