@tak-ps/cloudtak 12.54.0 → 12.94.0

package/src/components/CloudTAK/Menu/MenuOverlays.vue

@@ -1,560 +0,0 @@
-<template>
-    <MenuTemplate name='Overlays'>
-        <template #buttons>
-            <TablerIconButton
-                :class='{
-                    "pe-none": !isDraggable && !canEditOrder,
-                    "opacity-50": !isDraggable && !canEditOrder
-                }'
-                :title='reorderButtonTitle'
-                @click='handleReorderToggle'
-            >
-                <IconPencil
-                    v-if='!isDraggable'
-                    :size='32'
-                    stroke='1'
-                />
-                <IconPencilCheck
-                    v-else
-                    :size='32'
-                    stroke='1'
-                />
-            </TablerIconButton>
-
-            <TablerIconButton
-                v-if='!isDraggable'
-                title='Add Overlay'
-                @click='router.push("/menu/datas")'
-            >
-                <IconPlus
-                    :size='32'
-                    stroke='1'
-                />
-            </TablerIconButton>
-        </template>
-
-        <template #default>
-            <div class='menu-overlays d-flex flex-column gap-3'>
-                <div class='menu-overlays__controls mt-2 d-flex mx-2 align-items-center gap-3 flex-wrap'>
-                    <TablerInput
-                        v-model='overlayFilter'
-                        placeholder='Search overlays...'
-                        icon='search'
-                        class='flex-grow-1'
-                    />
-                </div>
-
-                <p
-                    v-if='showDragHint'
-                    class='small mb-0 text-white-50'
-                >
-                    {{ dragHintCopy }}
-                </p>
-
-                <TablerLoading v-if='loading || !isLoaded' />
-
-                <template v-else>
-                    <div
-                        v-if='overlayCards.length'
-                        ref='sortableRef'
-                        class='menu-overlays__list d-flex flex-column gap-3 mx-2'
-                    >
-                        <StandardItem
-                            v-for='card in overlayCards'
-                            :id='String(card.overlay.id)'
-                            :key='card.overlay.id'
-                            class='menu-overlays__card p-3'
-                            :class='{
-                                "menu-overlays__card--dragging": isDraggable
-                            }'
-                            :hover='!isDraggable && card.overlay.id !== 0'
-                            @click='handleCardClick(card.overlay.id)'
-                        >
-                            <div
-                                class='d-flex justify-content-between gap-3'
-                            >
-                                <div
-                                    class='d-flex align-items-center gap-2 flex-grow-1 w-100 overflow-hidden'
-                                    :aria-disabled='isDraggable || card.overlay.id === 0'
-                                >
-                                    <IconGripVertical
-                                        v-if='isDraggable'
-                                        v-tooltip='"Drag to reorder"'
-                                        class='drag-handle cursor-move text-white-50'
-                                        role='button'
-                                        tabindex='0'
-                                        :size='20'
-                                        stroke='1'
-                                    />
-                                    <IconMap
-                                        v-if='card.overlay.type === "raster"'
-                                        v-tooltip='"Raster"'
-                                        :size='20'
-                                        stroke='1'
-                                        class='flex-shrink-0 text-white-50'
-                                    />
-                                    <IconAmbulance
-                                        v-else-if='card.overlay.type === "geojson" && card.overlay.mode === "mission"'
-                                        v-tooltip='"Data Sync"'
-                                        :size='20'
-                                        stroke='1'
-                                        class='flex-shrink-0 text-white-50'
-                                    />
-                                    <IconVector
-                                        v-else
-                                        v-tooltip='"Vector"'
-                                        :size='20'
-                                        stroke='1'
-                                        class='flex-shrink-0 text-white-50'
-                                    />
-
-                                    <div class='flex-grow-1 w-100 overflow-hidden'>
-                                        <div class='menu-overlays__title-row d-flex align-items-center gap-2 w-100'>
-                                            <div class='d-flex align-items-center flex-grow-1 w-100'>
-                                                <a
-                                                    v-if='card.overlay.mode === "mission"'
-                                                    class='menu-overlays__name menu-overlays__name--link fw-semibold text-decoration-underline d-inline-flex align-items-center text-break'
-                                                    @click.stop='router.push(`/menu/missions/${card.overlay.mode_id}`)'
-                                                    v-text='card.overlay.name'
-                                                />
-                                                <span
-                                                    v-else
-                                                    class='menu-overlays__name fw-semibold d-inline-flex align-items-center flex-grow-1 text-break'
-                                                    v-text='card.overlay.name'
-                                                />
-                                            </div>
-                                        </div>
-                                        <div
-                                            v-if='card.badges.length'
-                                            class='menu-overlays__badges d-flex flex-wrap gap-2 mt-2'
-                                        >
-                                            <span
-                                                v-for='badge in card.badges'
-                                                :key='`${card.overlay.id}-${badge.label}`'
-                                                class='badge rounded-pill small'
-                                                :class='badgeToneClasses[badge.tone]'
-                                            >
-                                                {{ badge.label }}
-                                            </span>
-                                        </div>
-                                    </div>
-                                </div>
-
-                                <div
-                                    style='min-width: 100px;'
-                                    class='d-flex flex-column align-items-end gap-2'
-                                >
-                                    <span
-                                        class='badge rounded-pill small d-inline-flex align-items-center gap-1 px-2 py-1'
-                                        :class='statusToneClasses[card.status.tone]'
-                                        :title='card.status.tooltip || ""'
-                                    >
-                                        {{ card.status.label }}
-                                    </span>
-
-                                    <div class='d-flex align-items-center gap-2 flex-wrap justify-content-end w-100'>
-                                        <TablerIconButton
-                                            v-if='card.overlay.hasBounds()'
-                                            title='Zoom To Overlay'
-                                            @click.stop.prevent='card.overlay.zoomTo()'
-                                        >
-                                            <IconMaximize
-                                                :size='20'
-                                                stroke='1'
-                                            />
-                                        </TablerIconButton>
-
-                                        <TablerIconButton
-                                            v-if='card.overlay.visible'
-                                            title='Hide Layer'
-                                            @click.stop.prevent='card.overlay.update({ visible: !card.overlay.visible })'
-                                        >
-                                            <IconEye
-                                                :size='20'
-                                                stroke='1'
-                                            />
-                                        </TablerIconButton>
-
-                                        <TablerIconButton
-                                            v-else
-                                            title='Show Layer'
-                                            @click.stop.prevent='card.overlay.update({ visible: !card.overlay.visible })'
-                                        >
-                                            <IconEyeOff
-                                                :size='20'
-                                                stroke='1'
-                                            />
-                                        </TablerIconButton>
-
-                                        <TablerDelete
-                                            v-if='["mission", "data", "profile", "overlay"].includes(card.overlay.mode)'
-                                            :key='card.overlay.id'
-                                            v-tooltip='"Delete Overlay"'
-                                            :size='20'
-                                            role='button'
-                                            tabindex='0'
-                                            displaytype='icon'
-                                            @delete='removeOverlay(card.overlay.id)'
-                                        />
-                                    </div>
-                                </div>
-                            </div>
-
-                            <transition name='menu-overlays-fade'>
-                                <div
-                                    v-if='!isDraggable && opened.has(card.overlay.id)'
-                                    class='mt-3 p-3 rounded-3 border border-white border-opacity-10 bg-black bg-opacity-25'
-                                    @click.stop
-                                >
-                                    <div
-                                        v-if='card.overlay.type === "raster"'
-                                        class='mb-3'
-                                    >
-                                        <TablerRange
-                                            v-model='card.overlay.opacity'
-                                            label='Opacity'
-                                            :min='0'
-                                            :max='1'
-                                            :step='0.1'
-                                            @change='card.overlay.update({
-                                                opacity: card.overlay.opacity
-                                            })'
-                                        />
-                                    </div>
-                                    <div
-                                        v-if='card.overlay.type === "geojson" && card.overlay.id === -1'
-                                        class='mb-3'
-                                    >
-                                        <TreeCots
-                                            :element='card.overlay'
-                                        />
-                                    </div>
-                                    <div
-                                        v-if='card.overlay.mode === "mission"'
-                                        class='mb-3'
-                                    >
-                                        <TreeMission
-                                            :overlay='card.overlay'
-                                        />
-                                    </div>
-                                    <TreeVector
-                                        v-if='card.overlay.type === "vector"'
-                                        :overlay='card.overlay'
-                                    />
-                                </div>
-                            </transition>
-                        </StandardItem>
-                    </div>
-
-                    <TablerNone
-                        v-else
-                        label='overlays match your search'
-                        :create='false'
-                        class='px-2'
-                    />
-                </template>
-            </div>
-        </template>
-    </MenuTemplate>
-</template>
-
-<script setup lang='ts'>
-import { ref, watch, useTemplateRef, computed, onBeforeUnmount } from 'vue';
-import { useRouter } from 'vue-router';
-import MenuTemplate from '../util/MenuTemplate.vue';
-import {
-    TablerDelete,
-    TablerIconButton,
-    TablerInput,
-    TablerLoading,
-    TablerNone,
-    TablerRange
-} from '@tak-ps/vue-tabler';
-import TreeCots from './Overlays/TreeCots.vue';
-import TreeVector from './Overlays/TreeVector.vue';
-import TreeMission from './Overlays/TreeMission.vue';
-import {
-    IconGripVertical,
-    IconAmbulance,
-    IconMaximize,
-    IconVector,
-    IconEyeOff,
-    IconPencil,
-    IconPencilCheck,
-    IconPlus,
-    IconEye,
-    IconMap
-} from '@tabler/icons-vue';
-import StandardItem from '../util/StandardItem.vue';
-import Sortable from 'sortablejs';
-import type { SortableEvent } from 'sortablejs';
-import { useMapStore } from '../../../../src/stores/map.ts';
-import type Overlay from '../../../../src/base/overlay.ts';
-
-type OverlayBadgeTone = 'primary' | 'neutral' | 'mission' | 'warning' | 'muted';
-type OverlayBadge = { label: string; tone: OverlayBadgeTone };
-type OverlayStatusTone = 'success' | 'warning' | 'danger';
-type OverlayStatus = { label: string; tone: OverlayStatusTone; tooltip?: string };
-type OverlayCard = { overlay: Overlay; status: OverlayStatus; badges: OverlayBadge[] };
-
-const mapStore = useMapStore();
-const router = useRouter();
-
-const statusToneClasses: Record<OverlayStatusTone, string> = {
-    success: 'bg-success-subtle text-success-emphasis border border-success border-opacity-50',
-    warning: 'bg-warning-subtle text-warning-emphasis border border-warning border-opacity-50',
-    danger: 'bg-danger-subtle text-danger-emphasis border border-danger border-opacity-50'
-};
-
-const badgeToneClasses: Record<OverlayBadgeTone, string> = {
-    mission: 'bg-primary text-white border border-primary border-opacity-50',
-    primary: 'bg-info-subtle text-info-emphasis border border-info border-opacity-50',
-    neutral: 'bg-light bg-opacity-10 text-light border border-light border-opacity-25',
-    warning: 'bg-warning-subtle text-warning-emphasis border border-warning border-opacity-50',
-    muted: 'bg-secondary-subtle text-secondary-emphasis border border-secondary border-opacity-50'
-};
-
-let sortable: Sortable | undefined;
-
-const isDraggable = ref(false);
-const loading = ref(false);
-const opened = ref<Set<number>>(new Set());
-const overlayFilter = ref('');
-
-const isLoaded = mapStore.isLoaded;
-const overlays = (mapStore as unknown as { overlays: Overlay[] }).overlays;
-
-const sortableRef = useTemplateRef<HTMLElement>('sortableRef');
-
-const hasSearchTerm = computed(() => overlayFilter.value.trim().length > 0);
-
-const filteredOverlays = computed<Overlay[]>(() => {
-    const term = overlayFilter.value.trim().toLowerCase();
-    if (!term) return overlays;
-
-    return overlays.filter((overlay) => {
-        const name = (overlay.name ?? '').toLowerCase();
-        const type = (overlay.type ?? '').toLowerCase();
-        const mode = (overlay.mode ?? '').toLowerCase();
-
-        return (
-            name.includes(term)
-            || type.includes(term)
-            || mode.includes(term)
-        );
-    });
-});
-
-const overlayCards = computed<OverlayCard[]>(() => filteredOverlays.value.map((overlay) => ({
-    overlay,
-    status: resolveOverlayStatus(overlay),
-    badges: getOverlayBadges(overlay)
-})));
-
-const canEditOrder = computed(() => !hasSearchTerm.value && overlays.length > 1);
-
-const showDragHint = computed(() => overlays.length > 1 && !isDraggable.value && !canEditOrder.value);
-
-const dragHintCopy = computed(() => {
-    if (!showDragHint.value) return '';
-    return 'Reordering available once you clear the search.';
-});
-
-const reorderButtonTitle = computed(() => {
-    if (isDraggable.value) return 'Save Order';
-    if (!canEditOrder.value) {
-        if (overlays.length <= 1) return 'Add another overlay to reorder';
-        return 'Clear the search to reorder overlays';
-    }
-    return 'Edit Order';
-});
-
-watch(overlayFilter, () => {
-    if (isDraggable.value && !canEditOrder.value) {
-        isDraggable.value = false;
-    }
-});
-
-watch(
-    () => ({
-        container: sortableRef.value,
-        draggable: isDraggable.value,
-        hasSearch: hasSearchTerm.value
-    }),
-    ({ container, draggable, hasSearch }) => {
-        const canSort = !!container && draggable && !hasSearch;
-        if (canSort && container) {
-            if (sortable && sortable.el === container) return;
-            if (sortable) sortable.destroy();
-            sortable = new Sortable(container, {
-                sort: true,
-                handle: '.drag-handle',
-                dataIdAttr: 'id',
-                onEnd: saveOrder
-            });
-        } else if (sortable) {
-            sortable.destroy();
-            sortable = undefined;
-        }
-    },
-    { immediate: true }
-);
-
-onBeforeUnmount(() => {
-    if (sortable) {
-        sortable.destroy();
-        sortable = undefined;
-    }
-});
-
-function handleReorderToggle() {
-    if (isDraggable.value) {
-        isDraggable.value = false;
-        return;
-    }
-
-    if (!canEditOrder.value) return;
-
-    isDraggable.value = true;
-}
-
-function toggleOverlay(id: number) {
-    if (opened.value.has(id)) {
-        opened.value.delete(id);
-    } else {
-        opened.value.add(id);
-    }
-}
-
-function handleCardClick(id: number) {
-    if (isDraggable.value) return;
-    if (id === 0) return;
-    toggleOverlay(id);
-}
-
-function resolveOverlayStatus(overlay: Overlay): OverlayStatus {
-    if (!overlay.healthy()) {
-        return {
-            label: 'Issue',
-            tone: 'danger',
-            tooltip: overlay._error?.message ?? 'Unknown error'
-        };
-    }
-
-    if (!overlay.styles?.length) {
-        return {
-            label: 'Pending',
-            tone: 'warning',
-            tooltip: 'Overlay does not contain any styles yet.'
-        };
-    }
-
-    return {
-        label: 'Ready',
-        tone: 'success'
-    };
-}
-
-function getOverlayBadges(overlay: Overlay): OverlayBadge[] {
-    const badges: OverlayBadge[] = [];
-    const seen = new Set<string>();
-
-    const addBadge = (badge: OverlayBadge) => {
-        if (seen.has(badge.label)) return;
-        seen.add(badge.label);
-        badges.push(badge);
-    };
-
-    if (overlay.mode === 'mission') {
-        addBadge({ label: 'Mission', tone: 'mission' });
-    } else if (overlay.mode === 'data') {
-        addBadge({ label: 'Data', tone: 'primary' });
-    } else if (overlay.mode === 'profile') {
-        addBadge({ label: 'Profile', tone: 'primary' });
-    }
-
-    if (overlay.type === 'raster') {
-        addBadge({ label: 'Raster', tone: 'neutral' });
-    } else if (overlay.type === 'vector') {
-        addBadge({ label: 'Vector', tone: 'neutral' });
-    } else if (overlay.type === 'geojson') {
-        addBadge({ label: 'GeoJSON', tone: 'neutral' });
-    }
-
-    if (!overlay.visible) {
-        addBadge({ label: 'Hidden', tone: 'muted' });
-    }
-
-    return badges;
-}
-
-async function saveOrder(sortableEv: SortableEvent) {
-    if (!sortable) return;
-    if (sortableEv.newIndex === undefined || isNaN(parseInt(String(sortableEv.newIndex)))) return;
-
-    const id = sortableEv.item.getAttribute('id');
-    if (!id) return;
-
-    const overlay_ids = sortable.toArray().map((i) => parseInt(i));
-
-    const overlay = mapStore.getOverlayById(parseInt(id));
-    if (!overlay) throw new Error('Could not find Overlay');
-
-    const post = mapStore.getOverlayById(overlay_ids[sortableEv.newIndex + 1]);
-
-    for (const l of overlay.styles) {
-        if (post) {
-            mapStore.map.moveLayer(l.id, post.styles[0].id);
-        } else {
-            mapStore.map.moveLayer(l.id);
-        }
-    }
-
-    for (const current of overlays) {
-        await current.update({
-            pos: overlay_ids.indexOf(current.id)
-        });
-    }
-}
-
-async function removeOverlay(id: number) {
-    loading.value = true;
-    for (const overlay of overlays) {
-        if (overlay.id === id) {
-            await mapStore.removeOverlay(overlay);
-        }
-    }
-    loading.value = false;
-}
-</script>
-
-<style scoped>
-.menu-overlays__card {
-    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
-}
-
-.menu-overlays__card--dragging {
-    border-color: rgba(99, 137, 255, 0.6) !important;
-    box-shadow: 0 0 0 1px rgba(99, 137, 255, 0.5);
-}
-
-.menu-overlays__name {
-    min-width: 0;
-    display: inline-flex;
-    align-items: center;
-}
-
-.menu-overlays__name--link {
-    width: fit-content;
-}
-
-.menu-overlays-fade-enter-active,
-.menu-overlays-fade-leave-active {
-    transition: opacity 0.15s ease;
-}
-
-.menu-overlays-fade-enter-from,
-.menu-overlays-fade-leave-to {
-    opacity: 0;
-}
-</style>