35 lines
991 B
Vue
35 lines
991 B
Vue
<template>
|
|
<div class="flex h-[calc(100vh-5rem)] w-full flex-col md:flex-row">
|
|
<div class="relative h-2/3 w-full md:h-full md:flex-1">
|
|
<ClientOnly>
|
|
<KestrelMap
|
|
:devices="devices ?? []"
|
|
:pois="pois ?? []"
|
|
:live-sessions="liveSessions ?? []"
|
|
:can-edit-pois="canEditPois"
|
|
@select="selectedCamera = $event"
|
|
@select-live="onSelectLive($event)"
|
|
@refresh-pois="refreshPois"
|
|
/>
|
|
</ClientOnly>
|
|
</div>
|
|
<CameraViewer
|
|
v-if="selectedCamera"
|
|
:camera="selectedCamera"
|
|
@close="selectedCamera = null"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const { devices, liveSessions } = useCameras()
|
|
const { data: pois, refresh: refreshPois } = usePois()
|
|
const { canEditPois } = useUser()
|
|
const selectedCamera = ref(null)
|
|
|
|
function onSelectLive(session) {
|
|
const latest = (liveSessions.value || []).find(s => s.id === session?.id)
|
|
selectedCamera.value = latest ?? session
|
|
}
|
|
</script>
|