510 lines
20 KiB
Vue
510 lines
20 KiB
Vue
<script setup lang="ts">
|
|
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
import { Label } from '@/components/ui/label'
|
|
import { Switch } from '@/components/ui/switch'
|
|
import AssignDevice from '@/customcompometns/AssignDevice.vue'
|
|
import Navbar from '@/customcompometns/Navbar.vue'
|
|
import { useColorMode } from '@vueuse/core'
|
|
import { defineProps, reactive, watch, ref, computed, type PropType } from 'vue'
|
|
import { v4 as uuidv4 } from 'uuid'
|
|
import { useRouter } from 'vue-router'
|
|
import { api } from '@/lib/api'
|
|
|
|
// shadcn-vue number field parts
|
|
import {
|
|
NumberField,
|
|
NumberFieldContent,
|
|
NumberFieldDecrement,
|
|
NumberFieldIncrement,
|
|
NumberFieldInput,
|
|
} from '@/components/ui/number-field'
|
|
|
|
const mode = useColorMode()
|
|
const router = useRouter()
|
|
|
|
type CreateDevicePayload = {
|
|
guid: string
|
|
name: string
|
|
userIds: number[]
|
|
}
|
|
type CreateUserPayload = {
|
|
username: string
|
|
password: string
|
|
role: string // 'admin' | 'user'
|
|
}
|
|
type CreateDeviceConfigDto = {
|
|
m_recordingDuration: number
|
|
m_baseUrl: string
|
|
m_polling: number
|
|
m_jitter: number
|
|
}
|
|
|
|
type CreateTrackerConfigDto = {
|
|
m_baseUrl: string
|
|
m_polling: number
|
|
m_jitter: number
|
|
}
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: Boolean as PropType<boolean>, required: true },
|
|
})
|
|
|
|
// ------------------------ Local form state ------------------------
|
|
const device_form = reactive({
|
|
guid: uuidv4(),
|
|
name: '',
|
|
// config fields
|
|
baseUrl: '',
|
|
duration: 240,
|
|
polling: 60,
|
|
jitter: 10,
|
|
})
|
|
|
|
const user_form = reactive({
|
|
username: '',
|
|
password: '',
|
|
isAdmin: false,
|
|
})
|
|
|
|
const tracker_form = reactive({
|
|
guid: uuidv4(),
|
|
name: '',
|
|
// config fields
|
|
baseUrl: '',
|
|
polling: 60,
|
|
jitter: 10,
|
|
})
|
|
|
|
// Selected user IDs for both forms (split if you want separate sets)
|
|
const selectedUserIds = ref<string[]>([])
|
|
|
|
watch(
|
|
() => props.modelValue,
|
|
(val) => {
|
|
if (val) {
|
|
// reset device
|
|
device_form.guid = uuidv4()
|
|
device_form.name = ''
|
|
device_form.baseUrl = ''
|
|
device_form.duration = 240
|
|
device_form.polling = 60
|
|
device_form.jitter = 10
|
|
|
|
// reset tracker
|
|
tracker_form.guid = uuidv4()
|
|
tracker_form.name = ''
|
|
tracker_form.baseUrl = ''
|
|
tracker_form.polling = 60
|
|
tracker_form.jitter = 10
|
|
|
|
// reset users + user form
|
|
selectedUserIds.value = []
|
|
user_form.username = ''
|
|
user_form.password = ''
|
|
user_form.isAdmin = false
|
|
|
|
userError.value = null
|
|
userSubmitting.value = false
|
|
userSuccess.value = null
|
|
errorMsg.value = null
|
|
submitting.value = false
|
|
}
|
|
}
|
|
)
|
|
|
|
// ------------------------ Validation / helpers ------------------------
|
|
const uuidV4Re = /^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i
|
|
const submitting = ref(false)
|
|
const errorMsg = ref<string | null>(null)
|
|
|
|
const userSubmitting = ref(false)
|
|
const userError = ref<string | null>(null)
|
|
const userSuccess = ref<string | null>(null)
|
|
const userRole = computed<string>(() => (user_form.isAdmin ? 'admin' : 'user'))
|
|
|
|
const canSubmitDevice = computed(() =>
|
|
!!device_form.guid &&
|
|
uuidV4Re.test(device_form.guid) &&
|
|
!!device_form.name.trim() &&
|
|
!!device_form.baseUrl.trim() &&
|
|
Number.isFinite(device_form.duration) &&
|
|
Number.isFinite(device_form.polling) &&
|
|
Number.isFinite(device_form.jitter) &&
|
|
!submitting.value
|
|
)
|
|
|
|
const canSubmitTracker = computed(() =>
|
|
!!tracker_form.guid &&
|
|
uuidV4Re.test(tracker_form.guid) &&
|
|
!!tracker_form.name.trim() &&
|
|
!!tracker_form.baseUrl.trim() &&
|
|
Number.isFinite(tracker_form.polling) &&
|
|
Number.isFinite(tracker_form.jitter) &&
|
|
!submitting.value
|
|
)
|
|
|
|
const canSubmitUser = computed(() =>
|
|
user_form.username.trim().length >= 3 &&
|
|
user_form.password.length >= 8 &&
|
|
!userSubmitting.value
|
|
)
|
|
|
|
const canDownloadDeviceConfig = computed(() =>
|
|
!!device_form.guid && uuidV4Re.test(device_form.guid) && !!device_form.baseUrl.trim()
|
|
)
|
|
const canDownloadTrackerConfig = computed(() =>
|
|
!!tracker_form.guid && uuidV4Re.test(tracker_form.guid) && !!tracker_form.baseUrl.trim()
|
|
)
|
|
|
|
// Save a config.json file to the browser
|
|
function downloadConfig(filename: string, data: unknown) {
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = filename
|
|
document.body.appendChild(a)
|
|
a.click()
|
|
a.remove()
|
|
URL.revokeObjectURL(url)
|
|
}
|
|
|
|
// ------------------------ Submit handlers ------------------------
|
|
async function submitDevice() {
|
|
errorMsg.value = null
|
|
if (!canSubmitDevice.value) {
|
|
errorMsg.value = 'Please provide a valid GUID, name and config fields.'
|
|
return
|
|
}
|
|
|
|
const userIds: number[] = selectedUserIds.value
|
|
.map((s) => Number(s))
|
|
.filter((n) => Number.isFinite(n) && n >= 0)
|
|
|
|
const payload: CreateDevicePayload = {
|
|
guid: device_form.guid,
|
|
name: device_form.name.trim(),
|
|
userIds,
|
|
}
|
|
|
|
const config: CreateDeviceConfigDto = {
|
|
m_recordingDuration: Number(device_form.duration),
|
|
m_baseUrl: device_form.baseUrl.trim(),
|
|
m_polling: Number(device_form.polling),
|
|
m_jitter: Number(device_form.jitter),
|
|
}
|
|
|
|
submitting.value = true
|
|
try {
|
|
// 1) create device
|
|
await api.post('/devices/create', payload)
|
|
|
|
// 2) send config to device
|
|
await api.post(`/device/${encodeURIComponent(device_form.guid)}/config`, config)
|
|
|
|
// 3) download config.json example
|
|
// downloadConfig(
|
|
// 'config.json',
|
|
// {
|
|
// m_guid: device_form.guid,
|
|
// m_recordingDuration: config.m_recordingDuration,
|
|
// m_baseUrl: config.m_baseUrl,
|
|
// m_polling: config.m_polling,
|
|
// m_jitter: config.m_jitter,
|
|
// }
|
|
// )
|
|
|
|
router.replace('/admin')
|
|
} catch (e: any) {
|
|
errorMsg.value = e?.response?.status === 403 ? 'Access denied.' : 'Failed to create device or send config.'
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
|
|
async function submitTracker() {
|
|
errorMsg.value = null
|
|
if (!canSubmitTracker.value) {
|
|
errorMsg.value = 'Please provide a valid GUID, name and config fields.'
|
|
return
|
|
}
|
|
|
|
const userIds: number[] = selectedUserIds.value
|
|
.map((s) => Number(s))
|
|
.filter((n) => Number.isFinite(n) && n >= 0)
|
|
|
|
const payload: CreateDevicePayload = {
|
|
guid: tracker_form.guid,
|
|
name: tracker_form.name.trim(),
|
|
userIds,
|
|
}
|
|
|
|
const config: CreateTrackerConfigDto = {
|
|
m_baseUrl: tracker_form.baseUrl.trim(),
|
|
m_polling: Number(tracker_form.polling),
|
|
m_jitter: Number(tracker_form.jitter),
|
|
}
|
|
|
|
submitting.value = true
|
|
try {
|
|
// 1) create tracker (your API already uses /trackers/create)
|
|
await api.post('/trackers/create', payload)
|
|
|
|
// 2) send config; assuming symmetrical tracker endpoint:
|
|
// await api.post(`/trackers/${encodeURIComponent(tracker_form.guid)}/config`, config)
|
|
|
|
// 3) download config.json
|
|
// downloadConfig(
|
|
// 'config.json',
|
|
// {
|
|
// m_guid: tracker_form.guid,
|
|
// m_baseUrl: config.m_baseUrl,
|
|
// m_polling: config.m_polling,
|
|
// m_jitter: config.m_jitter,
|
|
// }
|
|
// )
|
|
|
|
router.replace('/admin')
|
|
} catch (e: any) {
|
|
errorMsg.value = e?.response?.status === 403 ? 'Access denied.' : 'Failed to create tracker or send config.'
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
|
|
async function submitUser() {
|
|
userError.value = null
|
|
userSuccess.value = null
|
|
|
|
if (!canSubmitUser.value) {
|
|
userError.value = 'Username must be at least 3 chars; password at least 8.'
|
|
return
|
|
}
|
|
|
|
const payload: CreateUserPayload = {
|
|
username: user_form.username.trim(),
|
|
password: user_form.password,
|
|
role: userRole.value,
|
|
}
|
|
|
|
userSubmitting.value = true
|
|
try {
|
|
await api.post('/users/create', payload)
|
|
userSuccess.value = 'User created.'
|
|
router.replace('/admin')
|
|
} catch (e: any) {
|
|
userError.value = e?.response?.status === 403 ? 'Access denied.' : 'Failed to create user.'
|
|
} finally {
|
|
userSubmitting.value = false
|
|
}
|
|
}
|
|
|
|
function downloadDeviceConfig() {
|
|
const payload = {
|
|
m_guid: device_form.guid,
|
|
m_recordingDuration: Number(device_form.duration),
|
|
m_baseUrl: device_form.baseUrl.trim(),
|
|
m_polling: Number(device_form.polling),
|
|
m_jitter: Number(device_form.jitter),
|
|
}
|
|
downloadConfig(`config-${device_form.guid}.json`, payload)
|
|
}
|
|
|
|
function downloadTrackerConfig() {
|
|
const payload = {
|
|
m_guid: tracker_form.guid,
|
|
m_baseUrl: tracker_form.baseUrl.trim(),
|
|
m_polling: Number(tracker_form.polling),
|
|
m_jitter: Number(tracker_form.jitter),
|
|
}
|
|
downloadConfig(`config-${tracker_form.guid}.json`, payload)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Navbar>
|
|
<div class="w-full py-8">
|
|
<div class="mx-auto">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-stretch">
|
|
|
|
<!-- Create device -->
|
|
<Card class="h-full flex flex-col">
|
|
<CardHeader>
|
|
<CardTitle>Create device</CardTitle>
|
|
</CardHeader>
|
|
<CardContent class="flex-1">
|
|
<div class="grid gap-5">
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="d-guid" class="text-right">GUID</Label>
|
|
<Input id="d-guid" class="col-span-3 w-full" v-model="device_form.guid" />
|
|
</div>
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="d-name" class="text-right">Name</Label>
|
|
<Input id="d-name" class="col-span-3 w-full" v-model="device_form.name" />
|
|
</div>
|
|
|
|
<!-- Config -->
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="d-baseurl" class="text-right">Base URL</Label>
|
|
<Input id="d-baseurl" class="col-span-3 w-full" placeholder="https://host"
|
|
v-model="device_form.baseUrl" />
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<NumberField id="d-duration" v-model="device_form.duration" :min="30" :step="1">
|
|
<Label for="d-duration">Record duration (sec)</Label>
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement />
|
|
<NumberFieldInput />
|
|
<NumberFieldIncrement />
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
|
|
<NumberField id="d-polling" v-model="device_form.polling" :min="30" :step="1">
|
|
<Label for="d-polling">Timeout interval (sec)</Label>
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement />
|
|
<NumberFieldInput />
|
|
<NumberFieldIncrement />
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
|
|
<NumberField id="d-jitter" v-model="device_form.jitter" :min="5" :step="1">
|
|
<Label for="d-jitter">Jitter (sec)</Label>
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement />
|
|
<NumberFieldInput />
|
|
<NumberFieldIncrement />
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="d-users" class="text-right">Allowed users</Label>
|
|
<AssignDevice id="d-users" class="col-span-3 w-full" v-model="selectedUserIds" />
|
|
</div>
|
|
|
|
<p v-if="errorMsg" class="text-sm text-red-600">{{ errorMsg }}</p>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter class="flex gap-2">
|
|
<Button variant="outline" @click="downloadDeviceConfig"
|
|
:disabled="!canDownloadDeviceConfig">
|
|
Download config
|
|
</Button>
|
|
<Button :disabled="!canSubmitDevice" @click="submitDevice">
|
|
{{ submitting ? 'Saving…' : 'Save' }}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<!-- Create user -->
|
|
<Card class="h-full flex flex-col">
|
|
<CardHeader>
|
|
<CardTitle>Create user</CardTitle>
|
|
</CardHeader>
|
|
<CardContent class="flex-1">
|
|
<div class="grid gap-5">
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="u-user" class="text-right">Username</Label>
|
|
<Input id="u-user" class="col-span-3 w-full" v-model="user_form.username" />
|
|
</div>
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="u-pass" class="text-right">Password</Label>
|
|
<Input id="u-pass" type="password" class="col-span-3 w-full"
|
|
v-model="user_form.password" />
|
|
</div>
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="u-admin" class="text-right">Make admin</Label>
|
|
<div class="col-span-3">
|
|
<Switch id="u-admin" v-model:checked="user_form.isAdmin"
|
|
v-model="user_form.isAdmin"
|
|
@update:checked="(v: any) => user_form.isAdmin = !!v"
|
|
@update:modelValue="(v: any) => user_form.isAdmin = !!v"/>
|
|
</div>
|
|
</div>
|
|
<p v-if="userError" class="text-sm text-red-600">{{ userError }}</p>
|
|
<p v-if="userSuccess" class="text-sm text-green-600">{{ userSuccess }}</p>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button :disabled="!canSubmitUser" @click="submitUser">
|
|
{{ userSubmitting ? 'Saving…' : 'Save changes' }}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
<!-- Create tracker -->
|
|
<Card class="h-full flex flex-col">
|
|
<CardHeader>
|
|
<CardTitle>Create tracker</CardTitle>
|
|
</CardHeader>
|
|
<CardContent class="flex-1">
|
|
<div class="grid gap-5">
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="t-guid" class="text-right">GUID</Label>
|
|
<Input id="t-guid" class="col-span-3 w-full" v-model="tracker_form.guid" />
|
|
</div>
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="t-name" class="text-right">Name</Label>
|
|
<Input id="t-name" class="col-span-3 w-full" v-model="tracker_form.name" />
|
|
</div>
|
|
|
|
<!-- Config -->
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="t-baseurl" class="text-right">Base URL</Label>
|
|
<Input id="t-baseurl" class="col-span-3 w-full" placeholder="https://host"
|
|
v-model="tracker_form.baseUrl" />
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<NumberField id="t-polling" v-model="tracker_form.polling" :min="30">
|
|
<Label for="t-polling">Timeout interval (sec)</Label>
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement />
|
|
<NumberFieldInput />
|
|
<NumberFieldIncrement />
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<NumberField id="t-jitter" v-model="tracker_form.jitter" :min="5">
|
|
<Label for="t-jitter">Jitter (sec)</Label>
|
|
<NumberFieldContent>
|
|
<NumberFieldDecrement />
|
|
<NumberFieldInput />
|
|
<NumberFieldIncrement />
|
|
</NumberFieldContent>
|
|
</NumberField>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-4 items-center gap-4">
|
|
<Label for="t-users" class="text-right">Allowed users</Label>
|
|
<AssignDevice id="t-users" class="col-span-3 w-full" v-model="selectedUserIds" />
|
|
</div>
|
|
|
|
<p v-if="errorMsg" class="text-sm text-red-600">{{ errorMsg }}</p>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter class="flex gap-2">
|
|
<Button variant="outline" @click="downloadTrackerConfig"
|
|
:disabled="!canDownloadTrackerConfig">
|
|
Download config
|
|
</Button>
|
|
<Button :disabled="!canSubmitTracker" @click="submitTracker">
|
|
{{ submitting ? 'Saving…' : 'Save' }}
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Navbar>
|
|
</template>
|