@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/Menu/Mission/MissionLayerTree.vue

@@ -0,0 +1,194 @@
+<template>
+    <TablerLoading v-if='loading' />
+    <template v-else>
+        <template
+            v-for='layer in layers'
+            :key='layer.uid'
+        >
+            <div class='col-12 hover d-flex align-items-center px-3 py-2'>
+                <IconChevronRight
+                    v-if='layer.type === "GROUP" && !opened.has(layer.uid)'
+                    :size='20'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='opened.add(layer.uid)'
+                />
+                <IconChevronDown
+                    v-else-if='layer.type === "GROUP" && opened.has(layer.uid)'
+                    :size='20'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='opened.delete(layer.uid)'
+                />
+
+                <IconFiles
+                    v-if='layer.type === "CONTENTS"'
+                    :size='20'
+                    stroke='1'
+                />
+                <IconMapPins
+                    v-else-if='layer.type === "UID"'
+                    :size='20'
+                    stroke='1'
+                />
+                <IconFolder
+                    v-else-if='layer.type === "GROUP"'
+                    :size='20'
+                    stroke='1'
+                />
+                <IconMap
+                    v-else-if='layer.type === "MAPLAYER"'
+                    :size='20'
+                    stroke='1'
+                />
+                <IconPin
+                    v-else-if='layer.type === "ITEM"'
+                    :size='20'
+                    stroke='1'
+                />
+
+                <span
+                    class='mx-2'
+                    v-text='layer.name'
+                />
+
+                <div class='ms-auto btn-list d-flex align-items-center'>
+                    <span
+                        v-if='layer.type === "UID"'
+                        class='mx-3 ms-auto badge border text-white'
+                        :class='{
+                            "bg-blue": layer.uids && layer.uids.length > 0,
+                            "bg-gray": !layer.uids || layer.uids.length === 0
+                        }'
+                        v-text='`${layer.uids ? layer.uids.length : 0} Features`'
+                    />
+
+                    <TablerIconButton
+                        v-if='props.subscription.role.permissions.includes("MISSION_WRITE")'
+                        title='Edit Name'
+                        :size='24'
+                        @click='edit.add(layer.uid)'
+                    >
+                        <IconPencil stroke='1' />
+                    </TablerIconButton>
+
+                    <TablerDelete
+                        v-if='props.subscription.role.permissions.includes("MISSION_WRITE")'
+                        displaytype='icon'
+                        :size='24'
+                        @delete='deleteLayer(layer)'
+                    />
+                </div>
+            </div>
+
+            <MissionLayerEdit
+                v-if='edit.has(layer.uid)'
+                :subscription='props.subscription'
+                :layer='layer'
+                @cancel='edit.delete(layer.uid)'
+                @layer='emit("refresh")'
+            />
+
+            <div
+                v-else-if='opened.has(layer.uid) && layer.type === "UID"'
+                class='mx-2'
+            >
+                <FeatureRow
+                    v-for='cot of cots(layer)'
+                    :key='cot.id'
+                    :delete-button='false'
+                    :feature='cot'
+                />
+                <MissionLayerTree
+                    v-if='layer.mission_layers && layer.mission_layers.length'
+                    :layers='layer.mission_layers as Array<MissionLayer>'
+                    :feats='feats'
+                    :subscription='subscription'
+                    @refresh='emit("refresh")'
+                />
+                <TablerNone
+                    v-if='!layer.uids || !layer.uids.length'
+                    :create='false'
+                    :compact='true'
+                    class='py-2'
+                />
+            </div>
+        </template>
+
+        <FeatureRow
+            v-for='feat of orphanedFeats'
+            :key='feat.id'
+            :delete-button='false'
+            :feature='feat'
+        />
+    </template>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed } from 'vue';
+import type { MissionLayer, Feature } from '../../../../types.ts';
+import Subscription from '../../../../base/subscription.ts';
+import MissionLayerTree from './MissionLayerTree.vue';
+import {
+    IconChevronRight,
+    IconChevronDown,
+    IconFiles,
+    IconMapPins,
+    IconFolder,
+    IconPencil,
+    IconMap,
+    IconPin,
+} from '@tabler/icons-vue';
+import {
+    TablerNone,
+    TablerDelete,
+    TablerLoading,
+    TablerIconButton,
+} from '@tak-ps/vue-tabler';
+import FeatureRow from '../../util/FeatureRow.vue';
+import MissionLayerEdit from './MissionLayerEdit.vue';
+
+const emit = defineEmits([
+    'refresh'
+])
+
+const props = defineProps<{
+    layers: Array<MissionLayer>,
+    feats: Map<string, Feature>,
+    subscription: Subscription,
+    orphaned?: Set<string>,
+}>();
+
+const opened = ref<Set<string>>(new Set());
+const edit = ref<Set<string>>(new Set());
+const loading = ref(false);
+
+const orphanedFeats = computed<Feature[]>(() => {
+    const feats = [];
+    for (const uid of props.orphaned || []) {
+        const feat = props.feats.get(uid);
+        if (feat) feats.push(feat);
+    }
+
+    return feats;
+})
+
+function cots(layer: MissionLayer): Array<Feature> {
+    const cots = [];
+    for (const cot of (layer.uids || [])) {
+        const feat = props.feats.get(cot.data)
+        if (feat) cots.push(feat);
+    }
+    return cots;
+}
+
+async function deleteLayer(layer: MissionLayer) {
+    loading.value = true;
+
+    await props.subscription.layerDelete(layer.uid);
+
+    emit('refresh')
+
+    loading.value = false;
+}
+</script>

package/src/components/CloudTAK/Menu/Mission/MissionLayers.vue

@@ -0,0 +1,157 @@
+<template>
+    <MenuTemplate
+        v-if='props.menu !== false'
+        name='Mission Layers'
+        :zindex='0'
+        :back='false'
+        :border='false'
+    >
+        <template #buttons>
+            <TablerIconButton
+                v-if='!createLayer && !loading && subscription.role && subscription.role.permissions.includes("MISSION_WRITE")'
+                title='New Mission Layer'
+                :size='24'
+                @click='createLayer = true'
+            >
+                <IconFolderPlus
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+            <TablerRefreshButton
+                :loading='loading'
+                @click='refresh'
+            />
+        </template>
+
+        <div
+            v-if='createLayer'
+            class='col-12 px-2 pb-4'
+        >
+            <MissionLayerCreate
+                :subscription='props.subscription'
+                @layer='refresh'
+                @cancel='createLayer = false'
+            />
+        </div>
+
+        <div class='col-12'>
+            <TablerLoading
+                v-if='loading'
+                class='mx-2'
+                desc='Loading Layers...'
+            />
+            <TablerNone
+                v-else-if='!layers.length && !orphaned.size'
+                :create='false'
+                :compact='true'
+                label='Layers'
+            />
+            <template v-else>
+                <MissionLayerTree
+                    :orphaned='orphaned'
+                    :layers='layers'
+                    :feats='feats'
+                    :subscription='props.subscription'
+                    @refresh='refresh'
+                />
+            </template>
+        </div>
+    </MenuTemplate>
+    <template v-else>
+        <TablerLoading
+            v-if='loading'
+            class='mx-2'
+            desc='Loading Layers...'
+        />
+        <TablerNone
+            v-else-if='!layers.length && !orphaned.size'
+            :create='false'
+            :compact='true'
+            label='Layers'
+        />
+        <MissionLayerTree
+            v-else
+            :orphaned='orphaned'
+            :layers='layers'
+            :feats='feats'
+            :subscription='subscription'
+            @refresh='refresh'
+        />
+    </template>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue';
+import {
+    IconFolderPlus,
+} from '@tabler/icons-vue';
+import {
+    TablerNone,
+    TablerLoading,
+    TablerIconButton,
+    TablerRefreshButton,
+} from '@tak-ps/vue-tabler';
+import type {
+    MissionLayer
+} from '../../../../types.ts';
+import Subscription from '../../../../base/subscription.ts';
+import MenuTemplate from '../../util/MenuTemplate.vue';
+import MissionLayerTree from './MissionLayerTree.vue';
+import MissionLayerCreate from './MissionLayerCreate.vue';
+
+const props = defineProps<{
+    menu: boolean,
+    subscription: Subscription
+}>()
+
+const createLayer = ref(false)
+const loading = ref(true);
+const feats = ref(new Map());
+const orphaned = ref<Set<string>>(new Set());
+const layers = ref<Array<MissionLayer>>([]);
+
+onMounted(async () => {
+    await refresh();
+});
+
+async function refresh() {
+    createLayer.value = false;
+    loading.value = true;
+    await fetchFeats();
+    await fetchLayers();
+    loading.value = false;
+}
+
+async function fetchFeats() {
+    const features = await props.subscription.feature.list();
+
+    for (const feat of features) {
+        feats.value.set(feat.id, feat);
+        orphaned.value.add(String(feat.id));
+    }
+}
+
+function removeFeatures(mlayers: MissionLayer[]): void {
+    for (const layer of mlayers) {
+        if (layer.type === 'UID' && layer.uids && layer.uids.length) {
+            for (const cot of layer.uids) {
+                orphaned.value.delete(cot.data);
+            }
+        }
+
+        if (layer.mission_layers) {
+            // @ts-expect-error Due to recursive type limits this is unknown
+            removeFeatures(layer.mission_layers);
+        }
+    }
+}
+
+async function fetchLayers(): Promise<void> {
+    layers.value = (await props.subscription.layerList()).data;
+
+    if (layers.value) {
+        removeFeatures(layers.value);
+    }
+}
+</script>

package/src/components/CloudTAK/Menu/Mission/MissionLog.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class='col-12'>
+        <TablerLoading
+            v-if='loading'
+            desc='Updating Log'
+        />
+        <template v-else>
+            <div
+                class='card bg-dark bg-opacity-50 border border-white border-opacity-25 rounded text-white w-100 p-2 d-flex gap-3 align-items-start flex-row shadow-sm'
+                role='menuitem'
+                tabindex='0'
+            >
+                <div class='d-flex flex-column w-100'>
+                    <div class='d-flex align-items-center flex-wrap w-100 gap-2'>
+                        <div class='fw-semibold'>
+                            {{ log.creatorUid || 'Unknown Author' }}
+                        </div>
+                        <TablerDropdown
+                            v-if='canWrite'
+                            class='ms-auto'
+                        >
+                            <template #default>
+                                <span class='text-white-50 small text-nowrap cursor-pointer'>{{ formatDtg(log.dtg) }}</span>
+                            </template>
+                            <template #dropdown>
+                                <div
+                                    class='p-2'
+                                    style='min-width: 300px;'
+                                >
+                                    <TablerInput
+                                        label='Log Time'
+                                        type='datetime-local'
+                                        :model-value='dtgEdit ?? toDatetimeLocal(log.dtg)'
+                                        @update:model-value='dtgEdit = $event'
+                                    />
+                                    <div class='d-flex justify-content-end gap-2 mt-2'>
+                                        <button
+                                            class='btn btn-sm btn-secondary'
+                                            @click='cancelEdit'
+                                        >
+                                            Cancel
+                                        </button>
+                                        <button
+                                            class='btn btn-sm btn-primary'
+                                            @click='saveDtg'
+                                        >
+                                            Save
+                                        </button>
+                                    </div>
+                                </div>
+                            </template>
+                        </TablerDropdown>
+                        <span
+                            v-else
+                            class='text-white-50 small text-nowrap'
+                        >{{ formatDtg(log.dtg) }}</span>
+                    </div>
+                    <CopyField
+                        class='w-100'
+                        mode='text'
+                        :edit='canWrite'
+                        :deletable='canWrite'
+                        :hover='canWrite'
+                        :rows='Math.max(4, log.content.split("\n").length)'
+                        :model-value='log.content || ""'
+                        @submit='updateLog({ content: $event })'
+                        @delete='deleteLog()'
+                    />
+
+                    <Keywords :keywords='log.keywords' />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+import type { MissionLog } from '../../../../types.ts';
+import Subscription from '../../../../base/subscription.ts';
+import CopyField from '../../util/CopyField.vue';
+import Keywords from '../../util/Keywords.vue';
+import {
+    TablerLoading,
+    TablerDropdown,
+    TablerInput
+} from '@tak-ps/vue-tabler';
+
+const props = defineProps<{
+    log: MissionLog;
+    subscription: Subscription;
+}>();
+
+const loading = ref(false);
+const dtgEdit = ref<string | null>(null);
+
+const canWrite = computed(() => {
+    return props.subscription.role.permissions.includes("MISSION_WRITE");
+});
+
+function toDatetimeLocal(iso?: string) {
+    if (!iso) return '';
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return '';
+    const offset = d.getTimezoneOffset() * 60000;
+    return (new Date(d.getTime() - offset)).toISOString().slice(0, 16);
+}
+
+function fromDatetimeLocal(local: string) {
+    if (!local) return '';
+    const d = new Date(local);
+    return d.toISOString();
+}
+
+function formatDtg(dtg?: string) {
+    if (!dtg) return 'No DTG';
+
+    const parsed = new Date(dtg);
+
+    if (Number.isNaN(parsed.getTime())) {
+        return dtg;
+    }
+
+    return parsed.toLocaleString(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short'
+    });
+}
+
+function cancelEdit() {
+    dtgEdit.value = null;
+    document.body.click();
+}
+
+async function saveDtg() {
+    if (dtgEdit.value) {
+        const iso = fromDatetimeLocal(dtgEdit.value);
+        if (iso !== props.log.dtg) {
+            await updateLog({ dtg: iso });
+        }
+    }
+
+    cancelEdit();
+}
+
+async function updateLog(body: { content?: string; dtg?: string; keywords?: string[] }) {
+    loading.value = true;
+    try {
+        await props.subscription.log.update(
+            props.log.id,
+            {
+                content: body.content ?? props.log.content,
+                dtg: body.dtg ?? props.log.dtg,
+                keywords: body.keywords ?? props.log.keywords
+            }
+        );
+    } finally {
+        loading.value = false;
+    }
+}
+
+async function deleteLog() {
+    loading.value = true;
+    try {
+        await props.subscription.log.delete(props.log.id);
+    } finally {
+        loading.value = false;
+    }
+}
+</script>