@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/CoTView.vue

@@ -0,0 +1,915 @@
+<template>
+    <TablerNone
+        v-if='!cot'
+        :create='false'
+        label='CoT Marker'
+    />
+    <template v-else>
+        <div
+            :key='String(route.params.uid)'
+            class='col-12 border-light border-bottom d-flex'
+            style='border-radius: 0px;'
+        >
+            <div class='col-12 card-header row my-2 d-flex'>
+                <div class='card-title d-flex'>
+                    <div class='col-auto ms-2 my-1'>
+                        <PropertyBattery
+                            v-if='cot && cot.properties.status && cot.properties.status.battery && !isNaN(parseInt(cot.properties.status.battery))'
+                            :battery='Number(cot.properties.status.battery)'
+                        />
+                        <FeatureIcon
+                            v-else
+                            :key='cot.properties.type'
+                            :size='32'
+                            :feature='cot'
+                        />
+                    </div>
+                    <div
+                        class='col-auto mx-2'
+                        :style='`
+                            width: calc(100% - 50px);
+                        `'
+                    >
+                        <CopyField
+                            :model-value='cot.properties.callsign'
+                            :edit='is_editable'
+                            :minheight='44'
+                            :hover='is_editable'
+                            @submit='updateProperty("callsign", $event)'
+                        />
+                    </div>
+                </div>
+                <div class='col-12 d-flex my-2 mx-2'>
+                    <div class='btn-list'>
+                        <IconStarFilled
+                            v-if='cot.properties.archived'
+                            title='Saved Feature'
+                            :size='32'
+                            stroke='1'
+                        />
+                        <TablerIconButton
+                            v-else-if='cot.is_archivable'
+                            title='Save Feature'
+                            @click='cot.properties.archived = true'
+                        >
+                            <IconStar
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+
+                        <TablerIconButton
+                            title='Zoom To'
+                            @click='cot.flyTo()'
+                        >
+                            <IconZoomPan
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+
+                        <TablerIconButton
+                            v-if='cot.geometry.type === "Point"'
+                            :title='isLocked ? "Unlock" : "Lock On"'
+                            @click='toggleLock'
+                        >
+                            <IconLock
+                                v-if='isLocked'
+                                :size='32'
+                                stroke='1'
+                            />
+                            <IconLockOpen
+                                v-else
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+
+
+                        <TablerIconButton
+                            v-if='cot.properties.video && cot.properties.video.url'
+                            title='View Video Stream'
+                            @click='floatStore.addCOT(String(route.params.uid))'
+                        >
+                            <IconPlayerPlay
+                                size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                        <TablerIconButton
+                            title='Share'
+                            @click='share = true'
+                        >
+                            <IconShare2
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                    </div>
+                    <div class='ms-auto btn-list mx-2'>
+                        <TablerDropdown
+                            v-if='cot.is_skittle'
+                        >
+                            <TablerIconButton
+                                title='Load Breadcrumb'
+                            >
+                                <IconRoute
+                                    size='32'
+                                    stroke='1'
+                                />
+                            </TablerIconButton>
+
+                            <template #dropdown>
+                                <Breadcrumb :uid='cot.id' />
+                            </template>
+                        </TablerDropdown>
+
+                        <TablerDelete
+                            v-if='is_editable'
+                            displaytype='icon'
+                            @delete='deleteCOT'
+                        />
+
+                        <TablerIconButton
+                            v-if='is_editable'
+                            title='Edit'
+                            @click='editGeometry'
+                        >
+                            <IconPencil
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+
+                        <TablerIconButton
+                            v-if='cot.properties.group && !cot.is_self'
+                            title='Chat'
+                            @click='router.push(`/menu/chats/new?callsign=${cot.properties.callsign}&uid=${cot.id}`)'
+                        >
+                            <IconMessage
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+
+                        <TablerDropdown
+                            v-if='is_editable'
+                        >
+                            <TablerIconButton
+                                title='Add Properties'
+                            >
+                                <IconDotsVertical
+                                    :size='32'
+                                    stroke='1'
+                                />
+                            </TablerIconButton>
+
+                            <template #dropdown>
+                                <div class='card'>
+                                    <div class='card-body'>
+                                        <div
+                                            v-if='
+                                                cot.properties.attachments !== undefined
+                                                    && cot.properties.video !== undefined
+                                                    && cot.properties.sensor !== undefined
+                                            '
+                                        >
+                                            No Properties to add
+                                        </div>
+                                        <template v-else>
+                                            <div
+                                                v-if='cot.properties.attachments === undefined'
+                                                role='button'
+                                                class='hover px-2 py-2 d-flex align-items-center rounded'
+                                                @click='updatePropertyAttachment([])'
+                                            >
+                                                <IconPaperclip
+                                                    stroke='1'
+                                                    :size='32'
+                                                /><div class='mx-2'>
+                                                    Add Attachment
+                                                </div>
+                                            </div>
+                                            <div
+                                                v-if='cot.properties.video === undefined'
+                                                role='button'
+                                                class='hover px-2 py-2 d-flex align-items-center rounded'
+                                                @click='updateProperty("video", { url: "" })'
+                                            >
+                                                <IconMovie
+                                                    stroke='1'
+                                                    :size='32'
+                                                /><div class='mx-2'>
+                                                    Add Video
+                                                </div>
+                                            </div>
+                                            <div
+                                                v-if='cot.properties.sensor === undefined'
+                                                role='button'
+                                                class='hover px-2 py-2 d-flex align-items-center rounded'
+                                                @click='updateProperty("sensor", {})'
+                                            >
+                                                <IconCone
+                                                    stroke='1'
+                                                    :size='32'
+                                                /><div class='mx-2'>
+                                                    Add Sensor
+                                                </div>
+                                            </div>
+                                        </template>
+                                    </div>
+                                </div>
+                            </template>
+                        </TablerDropdown>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class='col-12 px-2 py-2'>
+            <div
+                class='btn-group w-100'
+                role='group'
+            >
+                <input
+                    id='btn-mode-info'
+                    type='radio'
+                    class='btn-check'
+                    name='btn-mode'
+                    autocomplete='off'
+                    :checked='mode === "default"'
+                    @click='mode = "default"'
+                >
+                <label
+                    for='btn-mode-info'
+                    type='button'
+                    class='btn'
+                >
+                    <IconInfoCircle
+                        :size='20'
+                        stroke='1'
+                        class='cursor-pointer'
+                        @click='mode = "raw"'
+                    />
+                    <span class='mx-2'>Info</span>
+                </label>
+                <template v-if='cot.is_skittle'>
+                    <input
+                        id='btn-mode-channels'
+                        type='radio'
+                        class='btn-check'
+                        name='btn-mode'
+                        autocomplete='off'
+                        :checked='mode === "channels"'
+                        @click='mode = "channels"'
+                    >
+                    <label
+                        for='btn-mode-channels'
+                        type='button'
+                        class='btn'
+                    >
+                        <IconAffiliate
+                            :size='20'
+                            stroke='1'
+                            class='cursor-pointer'
+                        />
+                        <span class='mx-2'>Channels</span>
+                    </label>
+                </template>
+                <input
+                    id='btn-mode-raw'
+                    type='radio'
+                    class='btn-check'
+                    name='btn-mode'
+                    autocomplete='off'
+                    :checked='mode === "raw"'
+                    @click='mode = "raw"'
+                >
+                <label
+                    for='btn-mode-raw'
+                    type='button'
+                    class='btn'
+                >
+                    <IconCode
+                        :size='20'
+                        stroke='1'
+                        class='cursor-pointer'
+                    />
+                    <span class='mx-2'>Raw</span>
+                </label>
+            </div>
+        </div>
+
+        <div
+            v-if='mode === "default"'
+            class='overflow-auto overflow-x-hidden'
+            style='height: calc(100vh - 225px)'
+        >
+            <div class='row g-0'>
+                <div
+                    v-if='subscription'
+                    class='col-12'
+                >
+                    <div class='d-flex align-items-center py-2 px-2 my-2 mx-2 rounded bg-accent'>
+                        <IconAmbulance
+                            :size='32'
+                            stroke='1'
+                        />
+                        <span class='ms-2'>From:</span>
+                        <a
+                            class='mx-2 cursor-pointer'
+                            @click='router.push(`/menu/missions/${subscription.meta.guid}`)'
+                            v-text='subscription.meta.name'
+                        />
+                    </div>
+                </div>
+
+                <div class='pt-2 col-12 px-2'>
+                    <PropertyType
+                        v-if='cot.properties.type.startsWith("a-") || cot.properties.type.startsWith("u-")'
+                        :key='cot.properties.type'
+                        :edit='is_editable'
+                        :model-value='cot.properties.type'
+                        @update:model-value='updatePropertyType($event)'
+                    />
+                </div>
+
+                <div
+                    class='pt-2'
+                    :class='{
+                        "col-md-8": center.length > 2,
+                        "col-12": center.length <= 2,
+                    }'
+                >
+                    <Coordinate
+                        :key='String(route.params.uid)'
+                        :label='cot.geometry.type === "Point" ? "Location" : "Center"'
+                        :edit='is_editable'
+                        :hover='is_editable'
+                        :model-value='center'
+                        @update:model-value='updateCoordinates($event)'
+                    />
+                </div>
+                <div
+                    v-if='center.length > 2'
+                    class='col-md-4 pt-2'
+                >
+                    <PropertyElevation
+                        :key='String(route.params.uid)'
+                        label='Elevation'
+                        :unit='units.display_elevation'
+                        :elevation='center[2]'
+                    />
+                </div>
+
+                <div
+                    v-if='cot && cot.geometry.type === "LineString"'
+                    class='col-12 pt-2'
+                >
+                    <LineLength
+                        :key='String(route.params.uid)'
+                        :cot='cot'
+                        :unit='units.display_distance'
+                    />
+                </div>
+
+                <div
+                    v-if='cot && cot.geometry.type === "Polygon"'
+                    class='col-12 pt-2'
+                >
+                    <PolygonArea
+                        :key='String(route.params.uid)'
+                        :cot='cot'
+                    />
+                </div>
+
+                <div
+                    v-if='cot && cot.properties.shape && cot.properties.shape.ellipse && cot.properties.shape.ellipse.major === cot.properties.shape.ellipse.minor'
+                    class='col-12 pt-2'
+                >
+                    <PropertyDistance
+                        :key='cot.properties.id'
+                        label='Radius'
+                        :unit='units.display_distance'
+                        :model-value='cot.properties.shape.ellipse.major * 0.001'
+                    />
+                </div>
+
+                <div
+                    v-if='cot.properties.speed !== undefined && !isNaN(cot.properties.speed)'
+                    class='pt-2'
+                    :class='{
+                        "col-md-6": cot.properties.course,
+                        "col-12": !cot.properties.course,
+                    }'
+                >
+                    <PropertySpeed
+                        :key='cot.properties.id'
+                        :unit='units.display_speed'
+                        :speed='cot.properties.speed'
+                    />
+                </div>
+
+                <div
+                    v-if='cot.properties.course !== undefined && !isNaN(cot.properties.course)'
+                    class='pt-2'
+                    :class='{
+                        "col-md-6": cot.properties.course,
+                        "col-12": !cot.properties.course,
+                    }'
+                >
+                    <PropertyBearing
+                        :key='cot.properties.id'
+                        label='Course'
+                        :model-value='cot.properties.course'
+                    />
+                </div>
+
+                <div
+                    v-if='cot.properties.contact && cot.properties.contact.phone'
+                    class='pt-2'
+                >
+                    <PropertyPhone
+                        :key='cot.properties.id'
+                        :phone='cot.properties.contact.phone'
+                    />
+                </div>
+            </div>
+
+            <div
+                v-if='username'
+                class='col-12 pt-2'
+            >
+                <PropertyEmail
+                    :key='cot.properties.id'
+                    :email='username'
+                />
+            </div>
+
+
+
+            <div
+                v-if='cot.properties.remarks !== undefined'
+                class='col-12 pt-2'
+            >
+                <div
+                    class='d-flex align-items-center cursor-pointer user-select-none py-2 px-2 rounded transition-all mx-2'
+                    :class='{ "bg-accent": remarksExpanded, "hover": !remarksExpanded }'
+                    @click='remarksExpanded = !remarksExpanded'
+                >
+                    <IconBlockquote
+                        :size='18'
+                        stroke='1'
+                        color='#6b7990'
+                        class='ms-2 me-1'
+                    />
+                    <label class='subheader cursor-pointer m-0'>Remarks</label>
+                    <div class='ms-auto d-flex align-items-center'>
+                        <IconChevronDown
+                            class='transition-transform'
+                            :class='{ "rotate-180": !remarksExpanded }'
+                            :size='18'
+                        />
+                    </div>
+                </div>
+
+                <div
+                    class='grid-transition'
+                    :class='{ expanded: remarksExpanded }'
+                >
+                    <div class='overflow-hidden'>
+                        <div class='px-2 pt-2'>
+                            <CopyField
+                                :model-value='cot.properties.remarks'
+                                :rows='10'
+                                :edit='is_editable'
+                                :hover='is_editable'
+                                @submit='updateProperty("remarks", $event)'
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <template
+                v-if='!cot.properties.contact'
+            >
+                <PropertyAttachments
+                    :key='cot.properties.id'
+                    :model-value='cot.properties.attachments || []'
+                    @update:model-value='updatePropertyAttachment($event)'
+                />
+            </template>
+
+            <div
+                v-if='cot.properties.geofence'
+                class='col-12 py-2'
+            >
+                <div class='col-12'>
+                    <IconFence
+                        :size='18'
+                        stroke='1'
+                        color='#6b7990'
+                        class='ms-2 me-1'
+                    />
+                    <label class='subheader user-select-none'>Geofence</label>
+                </div>
+
+                <div class='mx-2 bg-accent row user-select-none'>
+                    <TablerToggle
+                        label='Elevation Monitored'
+                        :model-value='cot.properties.geofence.elevationMonitored'
+                        :disabled='true'
+                    />
+
+                    <div
+                        v-if='cot.properties.geofence.trigger === "Both" || cot.properties.geofence.trigger === "Enter"'
+                        class='col-6 py-2'
+                    >
+                        <IconDoorEnter
+                            :size='32'
+                            stroke='1'
+                            class='mx-2'
+                        />
+                        <span>Alarm on Enter</span>
+                    </div>
+                    <div
+                        v-if='cot.properties.geofence.trigger === "Both" || cot.properties.geofence.trigger === "Exit"'
+                        class='col-6 py-2'
+                    >
+                        <IconDoorExit
+                            :size='32'
+                            stroke='1'
+                            class='mx-2'
+                        />
+
+                        <span>Alarm on Exit</span>
+                    </div>
+                </div>
+            </div>
+
+            <PropertyLinks
+                v-if='cot.properties.links'
+                :links='cot.properties.links'
+            />
+
+            <PropertyTimes
+                v-if='!cot.properties.archived'
+                :cot='cot'
+            />
+
+            <PropertySensor
+                v-if='cot.properties.sensor !== undefined'
+                :key='cot.properties.id'
+                :model-value='cot.properties.sensor'
+                @update:model-value='updateProperty("sensor", $event)'
+            />
+
+            <PropertyMilSym
+                v-if='cot.properties.milsym'
+                :key='cot.properties.id'
+                label='Unit Information'
+                :model-value='cot.properties.milsym.id'
+            />
+
+            <PropertyStyle
+                v-if='is_editable && !cot.is_self'
+                :cot='cot'
+            />
+
+            <PropertyCreator
+                v-if='cot.properties.creator'
+                :key='cot.properties.id'
+                :creator='cot.properties.creator'
+            />
+
+            <PropertyMetadata
+                v-if='
+                    cot.properties.takv
+                        && cot.properties.takv
+                        && Object.keys(cot.properties.takv).length
+                '
+                :cot='cot'
+            />
+        </div>
+        <template v-else-if='mode === "channels"'>
+            <div
+                style='height: calc(100vh - 225px)'
+                class='overflow-auto overflow-x-hidden'
+            >
+                <Subscriptions :cot='cot' />
+            </div>
+        </template>
+        <template v-else-if='mode === "raw"'>
+            <div
+                style='height: calc(100vh - 225px)'
+                class='overflow-auto col-12'
+            >
+                <CopyField
+                    mode='pre'
+                    style='
+                        width: calc(100% - 100px);
+                        height: calc(100vh - 225px);
+                    '
+                    :model-value='JSON.stringify(cot.as_feature(), null, 4)'
+                />
+            </div>
+        </template>
+    </template>
+
+    <Share
+        v-if='share && cot'
+        :feats='[cot.as_feature()]'
+        @done='share = false'
+        @close='share = false'
+    />
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router'
+import FeatureIcon from './util/FeatureIcon.vue';
+import type COT from '../../base/cot.ts';
+import type { COTType } from '../../types.ts';
+import { OriginMode } from '../../base/cot.ts'
+import Subscription from '../../base/subscription.ts'
+import {
+    TablerNone,
+    TablerDelete,
+    TablerToggle,
+    TablerDropdown,
+    TablerIconButton,
+} from '@tak-ps/vue-tabler';
+
+import CopyField from './util/CopyField.vue';
+import Share from './util/Share.vue';
+import LineLength from './util/LineLength.vue';
+import PolygonArea from './util/PolygonArea.vue';
+import Coordinate from './util/Coordinate.vue';
+import PropertyType from './util/PropertyType.vue';
+import PropertyBattery from './util/PropertyBattery.vue';
+import PropertyDistance from './util/PropertyDistance.vue';
+import PropertyBearing from './util/PropertyBearing.vue';
+import PropertyMilSym from './util/PropertyMilSym.vue';
+import PropertySensor from './util/PropertySensor.vue';
+import PropertyPhone from './util/PropertyPhone.vue';
+import PropertyCreator from './util/PropertyCreator.vue';
+import PropertyEmail from './util/PropertyEmail.vue';
+import PropertySpeed from './util/PropertySpeed.vue';
+import Breadcrumb from './util/Breadcrumb.vue';
+import PropertyElevation from './util/PropertyElevation.vue';
+import PropertyAttachments from './util/PropertyAttachments.vue';
+import PropertyLinks from './util/PropertyLinks.vue';
+import PropertyTimes from './util/PropertyTimes.vue';
+import PropertyMetadata from './util/PropertyMetadata.vue';
+import PropertyStyle from './util/PropertyStyle.vue';
+import {
+    IconPencil,
+    IconFence,
+    IconMovie,
+    IconRoute,
+    IconCone,
+    IconStar,
+    IconDoorEnter,
+    IconDoorExit,
+    IconStarFilled,
+    IconMessage,
+    IconBlockquote,
+    IconDotsVertical,
+    IconChevronDown,
+    IconAmbulance,
+    IconPlayerPlay,
+    IconShare2,
+    IconZoomPan,
+    IconCode,
+    IconAffiliate,
+    IconInfoCircle,
+    IconPaperclip,
+    IconLock,
+    IconLockOpen,
+} from '@tabler/icons-vue';
+import Subscriptions from './util/Subscriptions.vue';
+import { std } from '../../std.ts';
+import { useMapStore } from '../../stores/map.ts';
+import { useFloatStore } from '../../stores/float.ts';
+
+const mapStore = useMapStore();
+
+const floatStore = useFloatStore();
+const route = useRoute();
+const router = useRouter();
+
+const cot = ref<COT | undefined>(undefined);
+
+const subscription = ref<Subscription | undefined>();
+
+const share = ref(false);
+const units = ref({
+    display_speed: 'mi/h',
+    display_elevation: 'feet',
+    display_distance: 'mile'
+});
+
+const username = ref<string | undefined>();
+const type = ref<COTType | undefined>();
+const mode = ref('default');
+const remarksExpanded = ref(true);
+
+const currentTime = ref(new Date());
+const interval = ref<ReturnType<typeof setInterval> | undefined>();
+
+watch(cot, async () => {
+    if (cot.value) {
+        if (cot.value.origin.mode === OriginMode.MISSION && cot.value.origin.mode_id) {
+            subscription.value = await Subscription.from(cot.value.origin.mode_id, localStorage.token);
+        } else {
+            subscription.value = undefined;
+        }
+    }
+});
+
+watch(route, async () => {
+    mode.value = 'default'
+    await load_cot();
+});
+
+onMounted(async () => {
+    await load_cot();
+
+    const profile = await mapStore.worker.profile.load();
+    if (profile) {
+        units.value.display_speed = profile.display_speed;
+        units.value.display_elevation = profile.display_elevation;
+        units.value.display_distance = profile.display_distance;
+    }
+
+    interval.value = setInterval(async () => {
+        currentTime.value = new Date();
+
+        if (!cot.value) {
+            await load_cot();
+        }
+    }, 1000)
+});
+
+const is_editable = computed(() => {
+    if (!cot.value || !cot.value.is_editable) return false;
+
+    if (!subscription.value) {
+        return true
+    } else {
+        return subscription.value.role && subscription.value.role.permissions.includes("MISSION_WRITE");
+    }
+});
+
+const center = computed(() => {
+    if (!cot.value) return [0,0];
+
+    const arr = [
+        Math.round(cot.value.properties.center[0] * 1000000) / 1000000,
+        Math.round(cot.value.properties.center[1] * 1000000) / 1000000,
+    ]
+
+    if (cot.value.properties.center.length > 2) {
+        arr.push(Math.round(cot.value.properties.center[2] * 100) / 100)
+    }
+
+    return arr;
+})
+
+const isLocked = computed(() => {
+    if (!cot.value) return false;
+    const id = cot.value.properties.id || cot.value.id;
+    return mapStore.locked.length > 0 && mapStore.locked[mapStore.locked.length - 1] === id;
+});
+
+function toggleLock() {
+    if (!cot.value) return;
+    const id = cot.value.properties.id || cot.value.id;
+
+    if (isLocked.value) {
+        mapStore.locked = mapStore.locked.filter(l => l !== id);
+    } else {
+        mapStore.locked.push(id);
+    }
+}
+
+async function load_cot() {
+    username.value = undefined;
+
+    const baseCOT = (await mapStore.worker.db.get(String(route.params.uid), {
+        mission: true
+    }))
+
+    if (baseCOT && baseCOT.origin.mode === OriginMode.MISSION && baseCOT.origin.mode_id) {
+        subscription.value = await Subscription.from(baseCOT.origin.mode_id, localStorage.token);
+    }
+
+    if (baseCOT) {
+        cot.value = baseCOT
+
+        cot.value.reactivity();
+
+        if (cot.value.is_skittle) {
+            username.value = await cot.value.username()
+        } else {
+            username.value = undefined;
+        }
+
+        await fetchType();
+    }
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function updateProperty(key: string, event: any) {
+    if (!cot.value) return;
+
+    if (typeof event === 'string' || typeof event === 'number') {
+        if (cot.value.properties[key] !== event) {
+            cot.value.properties[key] = event;
+            cot.value.update({})
+        }
+    } else {
+        cot.value.properties[key] = event;
+        cot.value.update({})
+    }
+}
+
+function updatePropertyType(type: string): void {
+    if (!cot.value) return;
+
+    if (type.startsWith('a-') && cot.value.properties.type.startsWith('u-')) {
+        cot.value.properties["marker-color"] = '#FFFFFF';
+    }
+
+    cot.value.properties.type = type;
+
+    if (!cot.value.properties.icon || !cot.value.properties.icon.includes(':')) {
+        cot.value.properties.icon = type;
+    }
+
+    cot.value.update({});
+}
+
+function updateCoordinates(center: number[]): void {
+    if (!cot.value) return;
+
+    cot.value.properties.center = center;
+
+    if (cot.value.geometry.type === 'Point') {
+        cot.value.geometry.coordinates = center;
+    }
+
+    cot.value.update({});
+}
+
+async function editGeometry() {
+    if (!cot.value) return;
+    mapStore.draw.edit(cot.value);
+}
+
+async function fetchType() {
+    if (!cot.value) return;
+    type.value = await std(`/api/type/cot/${cot.value.properties.type}`) as COTType
+}
+
+function updatePropertyAttachment(hashes: string[]) {
+    if (!cot.value) return;
+
+    if (!cot.value.properties.attachments) {
+        cot.value.properties.attachments = [];
+    }
+
+    cot.value.properties.attachments = hashes
+
+    cot.value.update({});
+}
+
+async function deleteCOT() {
+    if (!cot.value) return;
+    await mapStore.worker.db.remove(cot.value.id, {
+        mission: !!subscription.value
+    });
+    router.push('/');
+}
+</script>
+
+<style scoped>
+.grid-transition {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.3s ease-out;
+}
+
+.grid-transition.expanded {
+    grid-template-rows: 1fr;
+}
+
+.rotate-180 {
+    transform: rotate(-90deg);
+}
+
+.transition-transform {
+    transition: transform 0.3s ease-out;
+}
+</style>