36 lines
990 B
Vue
36 lines
990 B
Vue
<template>
|
|
<div class="flex h-full w-full flex-col md:flex-row">
|
|
<div class="relative min-h-0 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) {
|
|
selectedCamera.value = (liveSessions.value ?? []).find(s => s.id === session?.id) ?? session
|
|
}
|
|
|
|
useAutoCloseLiveSession(selectedCamera, liveSessions)
|
|
</script>
|