@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,718 +0,0 @@
-<template>
-    <MenuTemplate
-        name='Saved Features'
-        :loading='!mapStore.isLoaded'
-    >
-        <template #buttons>
-            <TablerDropdown>
-                <TablerIconButton
-                    title='Export'
-                >
-                    <IconDownload
-                        :size='32'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-
-                <template #dropdown>
-                    <div
-                        class='cursor-pointer col-12 hover d-flex align-items-center px-2 py-2'
-                        @click.stop.prevent='download("geojson")'
-                    >
-                        <IconFile
-                            :size='32'
-                            stroke='1'
-                        />
-                        <span class='mx-2'>GeoJSON</span>
-                    </div>
-                    <div
-                        class='cursor-pointer col-12 hover d-flex align-items-center px-2 py-2'
-                        @click.stop.prevent='download("kml")'
-                    >
-                        <IconFile
-                            :size='32'
-                            stroke='1'
-                        />
-                        <span class='mx-2'>KML</span>
-                    </div>
-                </template>
-            </TablerDropdown>
-
-            <TablerRefreshButton
-                :loading='loading'
-                @click='refresh(true)'
-            />
-
-            <TablerIconButton
-                title='Create Folder'
-                @click='folderModal.shown = true'
-            >
-                <IconFolderPlus
-                    :size='32'
-                    stroke='1'
-                />
-            </TablerIconButton>
-
-            <TablerDropdown>
-                <TablerIconButton
-                    title='More Options'
-                >
-                    <IconDotsVertical
-                        :size='32'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-
-                <template #dropdown>
-                    <div
-                        style='min-width: 200px;'
-                    >
-                        <TablerDelete
-                            displaytype='menu'
-                            class='hover'
-                            label='Delete All Features'
-                            @delete='deleteFeatures'
-                        />
-                    </div>
-                </template>
-            </TablerDropdown>
-        </template>
-        <template #default>
-            <div class='mx-2 my-2'>
-                <TablerInput
-                    v-model='query.filter'
-                    icon='search'
-                    placeholder='Search'
-                />
-            </div>
-            <TablerLoading
-                v-if='loading'
-                v-model='query.filter'
-                desc='Loading Features'
-            />
-            <TablerNone
-                v-else-if='cots.size === 0 && paths.length === 0'
-                :create='false'
-                label='Archived Features'
-            />
-            <template v-else>
-                <div class='px-2 pb-2'>
-                    <StandardItem
-                        class='d-flex align-items-center px-3 py-3 user-select-none'
-                        @click='router.push("/menu/features/deleted")'
-                    >
-                        <IconTrash
-                            :size='20'
-                            stroke='1'
-                            class='me-2'
-                        /> Recently Deleted
-                    </StandardItem>
-                </div>
-
-                <div class='d-flex flex-column gap-2 px-2'>
-                    <template
-                        v-for='path of paths'
-                        :key='path.id'
-                    >
-                        <StandardItem
-                            :id='`foldertarget-${path.id}`'
-                            class='px-3 py-3 user-select-none'
-                            :style='hover === path ? "background-color: rgba(255, 255, 255, 0.1);" : ""'
-                            @drop.stop.prevent='onFolderDrop(path)'
-                            @dragover.prevent='dragOverFolder(path)'
-                            @dragleave='dragLeaveFolder()'
-                            @click='path.opened ? closePath(path) : openPath(path)'
-                        >
-                            <div class='d-flex align-items-center justify-content-between'>
-                                <div class='d-flex align-items-center'>
-                                    <IconChevronRight
-                                        v-if='!path.opened'
-                                        :size='20'
-                                        stroke='1'
-                                    />
-                                    <IconChevronDown
-                                        v-else
-                                        :size='20'
-                                        stroke='1'
-                                    />
-                                    <IconFolder
-                                        class='mx-2'
-                                        :size='20'
-                                        stroke='2'
-                                    />
-                                    <span
-                                        class='fw-bold'
-                                        v-text='path.name.replace(/(^\/|\/$)/g, "")'
-                                    />
-                                </div>
-
-                                <div class='ms-auto d-flex align-items-center gap-2'>
-                                    <span class='badge rounded-pill bg-secondary bg-opacity-25 text-white-50'>{{ path.count }}</span>
-                                    <TablerIconButton
-                                        title='Rename Folder'
-                                        @click.stop='openEditModal(path)'
-                                    >
-                                        <IconPencil
-                                            :size='20'
-                                            stroke='1'
-                                        />
-                                    </TablerIconButton>
-                                    <TablerDelete
-                                        displaytype='Icon'
-                                        :size='20'
-                                        @delete='deletePath(path)'
-                                    />
-                                </div>
-                            </div>
-                            
-                            <div
-                                v-if='path.opened'
-                                class='mt-3'
-                                @click.stop
-                            >
-                                <div
-                                    :id='`folder-${path.id}`'
-                                    class='folder w-100'
-                                    style='min-height: 40px;'
-                                >
-                                    <TablerLoading v-if='path.loading' />
-                                    <template v-else>
-                                        <div
-                                            v-if='path.cots.size === 0'
-                                            class='text-center text-muted fst-italic py-2 small user-select-none opacity-50 pe-none position-absolute w-100'
-                                            style='margin-top: -8px;'
-                                        >
-                                            Folder is empty
-                                        </div>
-                                        <Feature
-                                            v-for='cot of path.cots.values()'
-                                            :id='cot.id'
-                                            :key='cot.id'
-                                            :select='true'
-                                            :grip-handle='true'
-                                            :delete-button='true'
-                                            :info-button='true'
-                                            :feature='cot'
-                                        />
-                                    </template>
-                                </div>
-                            </div>
-                        </StandardItem>
-                    </template>
-                </div>
-
-                <div
-                    id='general'
-                    ref='sortableFilesRef'
-                    class='px-2 mt-2'
-                >
-                    <Feature
-                        v-for='cot of cots.values()'
-                        :id='cot.id'
-                        :key='cot.id'
-                        :select='true'
-                        :grip-handle='true'
-                        :delete-button='true'
-                        :info-button='true'
-                        :feature='cot'
-                    />
-                </div>
-            </template>
-        </template>
-    </MenuTemplate>
-    <TablerModal
-        v-if='folderModal.shown'
-    >
-        <div class='modal-status bg-white' />
-        <button
-            type='button'
-            class='btn-close'
-            aria-label='Close'
-            @click='folderModal.shown = false'
-        />
-        <div class='modal-header text-white'>
-            <div class='modal-title'>
-                {{ folderModal.editingPath ? 'Rename Folder' : 'Create Folder' }}
-            </div>
-        </div>
-        <div class='modal-body'>
-            <TablerInput
-                v-model='folderModal.name'
-                label='Folder Name'
-                placeholder='Operations'
-                @submit='submitFolder'
-            />
-        </div>
-        <div class='modal-footer'>
-            <TablerButton
-                class='w-100'
-                variant='primary'
-                @click='submitFolder'
-            >
-                {{ folderModal.editingPath ? 'Save' : 'Create' }}
-            </TablerButton>
-        </div>
-    </TablerModal>
-</template>
-
-<script setup lang='ts'>
-import { v4 as randomUUID } from 'uuid';
-import { ref, watch, nextTick, onMounted, onBeforeUnmount, useTemplateRef } from 'vue';
-import COT from '../../../base/cot.ts';
-import { useRouter } from 'vue-router';
-import MenuTemplate from '../util/MenuTemplate.vue';
-import Feature from '../util/FeatureRow.vue';
-import StandardItem from '../util/StandardItem.vue';
-import {
-    TablerNone,
-    TablerInput,
-    TablerLoading,
-    TablerDelete,
-    TablerDropdown,
-    TablerIconButton,
-    TablerRefreshButton,
-    TablerModal,
-    TablerButton
-} from '@tak-ps/vue-tabler';
-import { std } from '../../../std.ts';
-import type { WorkerMessage } from '../../../base/events.ts';
-import { WorkerMessageType } from '../../../base/events.ts';
-import {
-    IconFile,
-    IconFolder,
-    IconFolderPlus,
-    IconTrash,
-    IconPencil,
-    IconDownload,
-    IconDotsVertical,
-    IconChevronRight,
-    IconChevronDown
-} from '@tabler/icons-vue';
-import Sortable from 'sortablejs';
-import type { SortableEvent } from 'sortablejs'
-import { useMapStore } from '../../../stores/map.ts';
-
-const router = useRouter();
-const mapStore = useMapStore();
-
-type Path = {
-    id: string;
-    name: string;
-    count: number;
-    opened: boolean;
-    loading: boolean;
-    sortable?: Sortable;
-    cots: Set<COT>;
-};
-
-const sortableFilesRef = useTemplateRef<HTMLElement>('sortableFilesRef');
-
-const channel = new BroadcastChannel("cloudtak");
-
-channel.onmessage = async (event: MessageEvent<WorkerMessage>) => {
-    const msg = event.data;
-    if (!msg || !msg.type) return;
-
-    if (msg.type === WorkerMessageType.Feature_Archived_Added) {
-        await refresh();
-    } else if (msg.type === WorkerMessageType.Feature_Archived_Removed) {
-        await refresh();
-    }
-}
-
-const cots = ref<Set<COT>>(new Set());
-const paths = ref<Array<Path>>([]);
-const query = ref({
-    filter: ''
-})
-
-const folderModal = ref<{
-    shown: boolean;
-    name: string;
-    editingPath?: Path;
-}>({
-    shown: false,
-    name: ''
-});
-
-const dragging = ref(false);
-const draggedId = ref<string | undefined>();
-const loading = ref(true);
-
-const hover = ref<Path | undefined>();
-const hoverTimer = ref<ReturnType<typeof setTimeout> | undefined>();
-
-watch(query.value, async () => {
-    await refresh();
-})
-
-onMounted(async () => {
-    await refresh();
-});
-
-onBeforeUnmount(() => {
-    if (channel) {
-        channel.close();
-    }
-})
-
-function openEditModal(path: Path) {
-    folderModal.value.name = path.name;
-    folderModal.value.editingPath = path;
-    folderModal.value.shown = true;
-}
-
-async function submitFolder() {
-    if (folderModal.value.editingPath) {
-        await renameFolder();
-    } else {
-        createFolder();
-    }
-}
-
-async function renameFolder() {
-    if (!folderModal.value.name || !folderModal.value.editingPath) return;
-
-    let newName = folderModal.value.name;
-    if (!newName.startsWith('/')) newName = '/' + newName;
-    const path = folderModal.value.editingPath;
-
-    if (path.name === newName) {
-        folderModal.value.shown = false;
-        folderModal.value.editingPath = undefined;
-        folderModal.value.name = '';
-        return;
-    }
-
-    if (paths.value.some(p => p.name === newName)) {
-        folderModal.value.shown = false;
-        folderModal.value.editingPath = undefined;
-        folderModal.value.name = '';
-        return;
-    }
-
-    const cotsToUpdate = await mapStore.worker.db.pathFeatures(path.name);
-
-    for (const cot of cotsToUpdate) {
-        cot.path = newName;
-    }
-
-    path.name = newName;
-    paths.value.sort((a, b) => a.name.localeCompare(b.name));
-
-    folderModal.value.shown = false;
-    folderModal.value.editingPath = undefined;
-    folderModal.value.name = '';
-
-    await refresh();
-}
-
-function createFolder() {
-    if (!folderModal.value.name) return;
-    
-    let name = folderModal.value.name;
-    if (!name.startsWith('/')) name = '/' + name;
-    
-    if (paths.value.some(p => p.name === name)) {
-        folderModal.value.shown = false;
-        folderModal.value.name = '';
-        return;
-    }
-
-    const newPath: Path = {
-        id: randomUUID(),
-        name: name,
-        count: 0,
-        opened: true,
-        loading: false,
-        cots: new Set()
-    };
-
-    paths.value.push(newPath);
-    paths.value.sort((a, b) => a.name.localeCompare(b.name));
-
-    nextTick(() => {
-        const folderDiv = document.getElementById(`folder-${newPath.id}`);
-        if (folderDiv) {
-             newPath.sortable = new Sortable(folderDiv, {
-                sort: true,
-                group: 'features',
-                handle: '.drag-handle',
-                dataIdAttr: 'id',
-                onAdd: onFeatureAdd,
-                onStart: (evt) => {
-                    dragging.value = true;
-                    draggedId.value = evt.item.id;
-                },
-                onEnd: () => {
-                    dragging.value = false;
-                    draggedId.value = undefined;
-                }
-            })
-        }
-
-        if (!sortableFilesRef.value) throw new Error('Could not load sortable');
-
-        // Re-init global sortable to include new folder
-        const sortable = Sortable.get(sortableFilesRef.value);
-        if (sortable) sortable.destroy();
-
-        new Sortable(sortableFilesRef.value, {
-            sort: true,
-            group: 'features',
-            handle: '.drag-handle',
-            dataIdAttr: 'id',
-            onAdd: onFeatureAdd,
-            onStart: (evt) => {
-                dragging.value = true;
-                draggedId.value = evt.item.id;
-            },
-            onEnd: () => {
-                dragging.value = false;
-                draggedId.value = undefined;
-            }
-        });
-    });
-
-    folderModal.value.shown = false;
-    folderModal.value.name = '';
-}
-
-function deleteFromSet(set: Set<COT>, id: string) {
-    for (const item of set) {
-        if (String(item.id) === String(id)) {
-            set.delete(item);
-            return true;
-        }
-    }
-    return false;
-}
-
-async function onFeatureAdd(ev: SortableEvent): Promise<void> {
-    const id = ev.item.id;
-    if (!id) return;
-
-    const cot = await mapStore.worker.db.get(id);
-    if (!cot) throw new Error("Marker Not Found");
-
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    let target = (ev as any).to.id
-    if (!target) throw new Error("Sorting Error");
-
-    if (target === 'general') {
-        const ps = paths.value.filter((p) => { return p.name === cot.path; });
-        if (ps.length) {
-            deleteFromSet(ps[0].cots, cot.id);
-            ps[0].count--;
-        }
-
-        cot.path = '/';
-        cots.value.add(cot);
-    } else {
-        target = target.replace('foldertarget-', '').replace('folder-', '');
-        const ps = paths.value.filter((p) => {
-            return p.id === target;
-        });
-
-        if (ps.length !== 1) return;
-        const p = ps[0];
-
-        if (cot.path === '/') {
-            cot.path = p.name;
-            deleteFromSet(cots.value, cot.id);
-            p.cots.add(cot);
-            p.count++;
-        } else {
-            const ps = paths.value.filter((p) => { return p.name === cot.path; });
-            if (ps.length !== 1) return;
-            deleteFromSet(ps[0].cots, cot.id);
-            ps[0].count--;
-
-            cot.path = p.name;
-            p.cots.add(cot);
-            p.count++;
-        }
-    }
-}
-
-async function dragOverFolder(path: Path): Promise<void> {
-    if (!dragging.value || path.opened) return;
-
-    if (!path.opened) {
-        hover.value = path;
-        hoverTimer.value = setTimeout(async () => {
-            await openPath(path);
-
-            clearTimeout(hoverTimer.value);
-            hoverTimer.value = undefined;
-        }, 500);
-    }
-}
-
-async function dragLeaveFolder(): Promise<void> {
-    hover.value = undefined;
-
-    if (hoverTimer.value) {
-        clearTimeout(hoverTimer.value);
-        hoverTimer.value = undefined;
-    }
-}
-
-async function onFolderDrop(path: Path) {
-    // If we dropped inside the actual sortable list, let Sortable handle it
-    if (path.opened) return;
-
-    if (!draggedId.value) return;
-    const id = draggedId.value;
-
-    const cot = await mapStore.worker.db.get(id);
-    if (!cot) return;
-
-    if (cot.path === path.name) return;
-
-    if (cot.path === '/') {
-         deleteFromSet(cots.value, cot.id);
-    } else {
-         const sourcePath = paths.value.find(p => p.name === cot.path);
-         if (sourcePath) {
-             deleteFromSet(sourcePath.cots, cot.id);
-             sourcePath.count--;
-         }
-    }
-
-    path.cots.add(cot);
-    path.count++;
-
-    cot.path = path.name;
-}
-
-async function refresh(load = false): Promise<void> {
-    if (load) loading.value = true;
-
-    cots.value = new Set(Array.from(await mapStore.worker.db
-        .filter(`
-            properties.archived
-            and path = "/"
-            and $contains($lowercase(properties.callsign), "${query.value.filter.toLowerCase()}")
-        `)))
-
-    paths.value = (await mapStore.worker.db.paths())
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        .sort((a: any, b: any) => {
-            if (a.path < b.path) {
-                return -1;
-            } else if (a.path > b.path) {
-                return 1;
-            } else {
-              return 0;
-            }
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        }).filter((path: any) => {
-            return path.path !== '/'
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        }).map((path: any) => {
-            return {
-                id: randomUUID(),
-                name: path.path,
-                count: path.count,
-                opened: false,
-                loading: false,
-                cots: new Set()
-            }
-        });
-
-    loading.value = false
-
-    nextTick(() => {
-        // Sortable will throw an error if there are no sortable objects
-        if (cots.value.size === 0) return;
-
-        if (!sortableFilesRef.value) throw new Error('Could not load sortable');
-
-        new Sortable(sortableFilesRef.value, {
-            sort: true,
-            group: 'features',
-            handle: '.drag-handle',
-            dataIdAttr: 'id',
-            onAdd: onFeatureAdd,
-            onStart: (evt) => {
-                dragging.value = true;
-                draggedId.value = evt.item.id;
-            },
-            onEnd: () => {
-                dragging.value = false;
-                draggedId.value = undefined;
-            }
-        })
-    })
-}
-
-async function download(format: string): Promise<void> {
-    await std(`/api/profile/feature?format=${format}&download=true&token=${localStorage.token}`, {
-        download: true
-    });
-}
-
-async function closePath(path: Path): Promise<void> {
-    path.opened = false;
-    path.cots.clear();
-}
-
-async function deleteFeatures(): Promise<void> {
-    try {
-        loading.value = true;
-
-        await mapStore.worker.db.filterRemove(`properties.archived`, {
-            skipNetwork: true
-        });
-
-        await std('/api/profile/feature', {
-            method: 'DELETE'
-        });
-
-        loading.value = false;
-    } catch (err) {
-        loading.value = false;
-        throw err;
-    }
-}
-
-async function deletePath(path: Path): Promise<void> {
-    if (path.sortable) {
-        path.sortable.destroy();
-        path.sortable = undefined;
-    }
-
-    await mapStore.worker.db.filterRemove(`path = "${path.name}" and properties.archived`);
-    await refresh();
-}
-
-async function openPath(path: Path): Promise<void> {
-    path.opened = true;
-    path.loading = true;
-    path.cots = await mapStore.worker.db.pathFeatures(path.name);
-    path.loading = false;
-
-    nextTick(() => {
-        const folderDiv = document.getElementById(`folder-${path.id}`);
-        if (!folderDiv) throw new Error('Could not load sortable');
-
-        path.sortable = new Sortable(folderDiv, {
-            sort: true,
-            group: 'features',
-            handle: '.drag-handle',
-            dataIdAttr: 'id',
-            onAdd: onFeatureAdd,
-            onStart: (evt) => {
-                dragging.value = true;
-                draggedId.value = evt.item.id;
-            },
-            onEnd: () => {
-                dragging.value = false;
-                draggedId.value = undefined;
-            }
-        })
-    });
-}
-
-</script>