@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,217 +0,0 @@
-<template>
-    <MenuTemplate
-        name='Deleted 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'
-            />
-        </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 Deleted Features'
-            />
-            <TablerNone
-                v-else-if='filteredList.length === 0'
-                :create='false'
-                label='Archived Features'
-            />
-            <template v-else>
-                <GenericSelect
-                    ref='select'
-                    role='menu'
-                    :disabled='false'
-                    :hover='false'
-                    :items='filteredList'
-                >
-                    <template #buttons='{disabled}'>
-                        <TablerIconButton
-                            :disabled='disabled'
-                            @click='restoreFeatures'
-                        >
-                            <IconRestore
-                                :size='32'
-                                stroke='1'
-                            />
-                        </TablerIconButton>
-                    </template>
-                    <template #item='{ item }'>
-                        <FeatureRow
-                            :id='item.id'
-                            :select='false'
-                            :grip-handle='false'
-                            :delete-button='false'
-                            :info-button='false'
-                            :feature='item'
-                        />
-                    </template>
-                </GenericSelect>
-            </template>
-        </template>
-    </MenuTemplate>
-</template>
-
-<script setup lang='ts'>
-import { ref, onMounted, computed, useTemplateRef } from 'vue';
-import MenuTemplate from '../util/MenuTemplate.vue';
-import FeatureRow from '../util/FeatureRow.vue';
-import GenericSelect from '../util/GenericSelect.vue';
-import {
-    TablerNone,
-    TablerInput,
-    TablerLoading,
-    TablerDropdown,
-    TablerIconButton,
-    TablerRefreshButton
-} from '@tak-ps/vue-tabler';
-import { std, server } from '../../../std.ts';
-import type { ComponentExposed } from 'vue-component-type-helpers'
-import type { FeatureCollection } from '../../../types.ts';
-import {
-    IconFile,
-    IconRestore,
-    IconDownload,
-} from '@tabler/icons-vue';
-import { useMapStore } from '../../../stores/map.ts';
-
-const mapStore = useMapStore();
-
-const list = ref<FeatureCollection>({
-    type: 'FeatureCollection',
-    features: []
-});
-
-const query = ref({
-    filter: '',
-    page: 0,
-    deleted: true,
-    download: false,
-    limit: 100
-})
-
-const loading = ref(true);
-const select = useTemplateRef<ComponentExposed<typeof GenericSelect>>('select');
-
-const filteredList = computed(() => {
-    if (query.value.filter === '') return list.value.features;
-
-    return list.value.features.filter((feature) => {
-        return feature.properties.callsign.toLowerCase().includes(query.value.filter.toLowerCase())
-    });
-});
-
-onMounted(async () => {
-    await refresh();
-});
-
-async function refresh() {
-    loading.value = true;
-
-    try {
-        const res = await server.GET('/api/profile/feature', {
-            params: {
-                query: {
-                    sort: 'id',
-                    order: 'desc',
-                    page: query.value.page,
-                    download: query.value.download,
-                    deleted: query.value.deleted,
-                    format: 'geojson',
-                    limit: query.value.limit
-                }
-            }
-        });
-
-        if (res.error) throw new Error(res.error.message);
-
-        list.value.features = res.data.items.map((feat) => {
-            return {
-                id: feat.id,
-                type: feat.type,
-                path: feat.path,
-                properties: {
-                    id: feat.id,
-                    ...feat.properties
-                },
-                geometry: feat.geometry
-            }
-        });
-
-        loading.value = false;
-    } catch (err) {
-        loading.value = false;
-        throw err;
-    }
-}
-
-async function restoreFeatures(): Promise<void> {
-    if (!select.value) return;
-    const selected = select.value.selected;
-
-    loading.value = true;
-
-    for (const feature of list.value.features) {
-        if (selected.has(feature.id)) {
-            await mapStore.worker.db.add(JSON.parse(JSON.stringify(feature)), {
-                authored: true
-            });
-        }
-    }
-
-    // TODO: Improve this to not be a timeout, the API operations can occasionally return the feature
-    setTimeout(async () => {
-        await refresh();
-    }, 500);
-}
-
-async function download(format: string): Promise<void> {
-    await std(`/api/profile/feature?format=${format}&download=true&token=${localStorage.token}&deleted=true`, {
-        download: true
-    });
-}
-</script>

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

@@ -1,433 +0,0 @@
-<template>
-    <MenuTemplate name='User Files'>
-        <template #buttons>
-            <TablerIconButton
-                v-if='!loading && !upload'
-                title='File Upload'
-                @click='upload = true'
-            >
-                <IconUpload
-                    :size='32'
-                    stroke='1'
-                />
-            </TablerIconButton>
-
-            <TablerRefreshButton
-                :loading='loading'
-                @click='fetchList'
-            />
-        </template>
-        <template #default>
-            <div
-                v-if='upload'
-                class='py-2 px-4'
-            >
-                <Upload
-                    :url='stdurl(`/api/import`)'
-                    :headers='uploadHeaders()'
-                    method='PUT'
-                    @cancel='upload = false'
-                    @done='uploadComplete($event)'
-                />
-            </div>
-
-            <div class='col-12 pe-2 pt-2'>
-                <TablerInput
-                    v-model='paging.filter'
-                    icon='search'
-                    placeholder='Filter'
-                />
-            </div>
-
-            <TablerLoading
-                v-if='loading'
-            />
-            <TablerAlert
-                v-else-if='error'
-                :err='error'
-            />
-            <TablerNone
-                v-else-if='!list.items.length'
-                label='Uploaded Files'
-                :create='false'
-            />
-            <template v-else>
-                <div
-                    v-for='asset in list.items'
-                    :key='asset.id'
-                    role='menu'
-                >
-                    <TablerSlidedown
-                        :click-anywhere-expand='true'
-                        :arrow='false'
-                        class='my-2 me-2'
-                    >
-                        <template #default>
-                            <div
-                                class='d-flex align-items-center'
-                                role='menuitem'
-                                tabindex='0'
-                            >
-                                <div class='col-auto'>
-                                    <IconMapPlus
-                                        v-if='asset.artifacts.map(a => a.ext).includes(".pmtiles")'
-                                        :size='32'
-                                        stroke='1'
-                                    />
-                                    <IconMapOff
-                                        v-else
-                                        v-tooltip='"Not Cloud Optimized"'
-                                        :size='32'
-                                        stroke='1'
-                                    />
-                                </div>
-                                <div class='col-auto'>
-                                    <div
-                                        class='col-12 text-truncate px-2 user-select-none'
-                                        style='max-width: 250px;'
-                                        v-text='asset.name'
-                                    />
-                                    <div class='col-12 subheader'>
-                                        <span class='mx-2 user-select-none'>
-                                            <TablerBytes :bytes='asset.size' /> - <TablerEpoch :date='asset.updated' />
-                                        </span>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                        <template #expanded>
-                            <div
-                                v-if='asset.artifacts.map(a => a.ext).includes(".pmtiles")'
-                                class='cursor-pointer rounded col-12 hover d-flex align-items-center px-2 py-2 user-select-none'
-                                role='menuitem'
-                                tabindex='0'
-                                @click.stop.prevent='createOverlay(asset)'
-                                @keyup.enter='createOverlay(asset)'
-                            >
-                                <IconMapPlus
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <span class='mx-2'>Add to Map as Overlay</span>
-                            </div>
-                            <div
-                                v-else
-                                role='menuitem'
-                                class='rounded col-12 hover d-flex align-items-center px-2 py-2 user-select-none'
-                            >
-                                <IconMapOff
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <span class='mx-2'>Cannot Add to Map - Unsupported Format</span>
-                            </div>
-
-                            <div
-                                class='cursor-pointer rounded col-12 hover d-flex align-items-center px-2 py-2 user-select-none'
-                                @click.stop.prevent='downloadAsset(asset)'
-                            >
-                                <IconDownload
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <span class='mx-2'>Download Original</span>
-                            </div>
-                            <div
-                                class='cursor-pointer rounded col-12 hover d-flex align-items-center px-2 py-2 user-select-none'
-                                role='menuitem'
-                                tabindex='0'
-                                @click.stop.prevent='shareToMission = asset'
-                                @keyup.enter='shareToMission = asset'
-                            >
-                                <IconAmbulance
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <span class='mx-2'>Add to Data Sync</span>
-                            </div>
-                            <div
-                                class='cursor-pointer rounded col-12 hover d-flex align-items-center px-2 py-2 user-select-none'
-                                role='menuitem'
-                                tabindex='0'
-                                @click.stop.prevent='shareToPackage = asset'
-                                @keyup.enter='shareToPackage = asset'
-                            >
-                                <IconPackage
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <span class='mx-2'>Create Data Package</span>
-                            </div>
-                            <div
-                                class='cursor-pointer rounded col-12 hover d-flex align-items-center px-2 py-2 user-select-none'
-                                role='menuitem'
-                                tabindex='0'
-                                @click.stop.prevent='rename = { id: asset.id, name: asset.name, loading: false }'
-                                @keyup.enter='rename = { id: asset.id, name: asset.name, loading: false }'
-                            >
-                                <IconCursorText
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <span class='mx-2'>Rename File</span>
-                            </div>
-
-                            <div v-if='rename && rename.id === asset.id'>
-                                <TablerInput
-                                    v-model='rename.name'
-                                    class='m-2'
-                                    :placeholder='asset.name'
-                                    :autofocus='true'
-                                    @blur='rename = undefined'
-                                    @keyup.enter='renameAsset'
-                                />
-                            </div>
-
-                            <TablerDelete
-                                displaytype='menu'
-                                class='hover rounded'
-                                label='Delete File'
-                                @delete='deleteAsset(asset)'
-                            />
-                        </template>
-                    </TablerSlidedown>
-                </div>
-
-                <div class='col-12 d-flex justify-content-center pt-3'>
-                    <TablerPager
-                        v-if='list.total > paging.limit'
-                        :page='paging.page'
-                        :total='list.total'
-                        :limit='paging.limit'
-                        @page='paging.page = $event'
-                    />
-                </div>
-            </template>
-        </template>
-    </MenuTemplate>
-
-    <ShareToMission
-        v-if='shareToMission'
-        :assets='[{
-            type: "profile",
-            id: shareToMission.id,
-            name: shareToMission.name
-        }]'
-        @close='shareToMission = undefined'
-    />
-
-    <ShareToPackage
-        v-if='shareToPackage'
-        :name='shareToPackage.name'
-        :assets='[{
-            type: "profile",
-            id: shareToPackage.id,
-            name: shareToPackage.name
-        }]'
-        @close='shareToPackage = undefined'
-    />
-</template>
-
-<script setup lang='ts'>
-import { useRouter } from 'vue-router';
-import { ref, watch, onMounted } from 'vue';
-import type { ProfileFile, ProfileFileList } from '../../../types.ts';
-import { std, stdurl, server } from '../../../std.ts';
-import {
-    TablerDelete,
-    TablerIconButton,
-    TablerRefreshButton,
-    TablerSlidedown,
-    TablerInput,
-    TablerPager,
-    TablerAlert,
-    TablerNone,
-    TablerLoading,
-    TablerBytes,
-    TablerEpoch
-} from '@tak-ps/vue-tabler';
-import {
-    IconAmbulance,
-    IconPackage,
-    IconUpload,
-    IconMapOff,
-    IconMapPlus,
-    IconDownload,
-    IconCursorText
-} from '@tabler/icons-vue';
-import ShareToPackage from '../util/ShareToPackage.vue';
-import ShareToMission from '../util/ShareToMission.vue';
-import MenuTemplate from '../util/MenuTemplate.vue';
-import { useMapStore } from '../../../stores/map.ts';
-import Overlay from '../../../base/overlay.ts';
-import Upload from '../../util/Upload.vue';
-
-const mapStore = useMapStore();
-
-const router = useRouter();
-const upload = ref(false)
-const shareToPackage = ref<ProfileFile | undefined>();
-const shareToMission = ref<ProfileFile | undefined>();
-const rename = ref<{
-    id: string;
-    loading: boolean;
-    name: string;
-} | undefined>();
-const error = ref<Error | undefined>(undefined);
-const loading = ref(true);
-
-const list = ref<ProfileFileList>({
-    total: 0,
-    tiles: { url: '' },
-    items: [],
-});
-
-const paging = ref({
-    page: 0,
-    filter: '',
-    limit: 20
-})
-
-onMounted(async () => {
-    await fetchList();
-});
-
-watch(paging.value, async () => {
-    await fetchList();
-});
-
-async function createOverlay(asset: ProfileFile) {
-    if (!asset.artifacts.map(a => a.ext).includes(".pmtiles")) throw new Error('Cannot add an Overlay for an asset that is not Cloud Optimized');
-
-    const url = stdurl(`/api/profile/asset/${encodeURIComponent(asset.id)}.pmtiles/tile`);
-
-    loading.value = true;
-
-    // TODO type PMTiles endpoints
-    const res = await std(url) as {
-        tiles: [ string ];
-    };
-
-    if (new URL(res.tiles[0]).pathname.endsWith('.mvt')) {
-        await mapStore.overlays.push(await Overlay.create({
-            url: String(url),
-            name: asset.name,
-            mode: 'profile',
-            mode_id: asset.name,
-            iconset: asset.iconset,
-            type: 'vector',
-        }));
-    } else {
-        await mapStore.overlays.push(await Overlay.create({
-            url: String(url),
-            name: asset.name,
-            mode: 'profile',
-            mode_id: asset.name,
-            iconset: asset.iconset,
-            type: 'raster',
-        }));
-    }
-
-    loading.value = false;
-
-    router.push('/menu/overlays');
-}
-
-function uploadHeaders() {
-    return {
-        Authorization: `Bearer ${localStorage.token}`
-    };
-}
-
-function uploadComplete(event: unknown) {
-    upload.value = false;
-    const imp = event as { imports: Array<{ uid: string }> };
-    router.push(`/menu/imports/${imp.imports[0].uid}`)
-}
-
-async function downloadAsset(asset: ProfileFile) {
-    const url = stdurl(`/api/profile/asset/${asset.id}.${asset.name.split('.').pop()}`);
-    url.searchParams.append('token', localStorage.token);
-    window.open(url, "_blank")
-}
-
-async function renameAsset() {
-    if (!rename.value) return;
-
-    rename.value.loading = true;
-
-    try {
-        const res = await server.PATCH('/api/profile/asset/{:asset}', {
-            params: {
-                path: {
-                    ':asset': rename.value.id
-                },
-            },
-            body: {
-                name: rename.value.name
-            }
-        });
-
-        if (res.error) throw new Error(res.error.message);
-
-        for (const item of list.value.items) {
-            if (item.id === rename.value.id) {
-                item.name = rename.value.name;
-                break;
-            }
-        }
-
-        rename.value = undefined;
-    } catch (err) {
-        if (rename.value) rename.value.loading = false;
-        throw err;
-    }
-}
-
-async function fetchList() {
-    try {
-        loading.value = true;
-        error.value = undefined;
-
-        const res = await server.GET(`/api/profile/asset`, {
-            params: {
-                query: {
-                    filter: paging.value.filter,
-                    order: 'desc',
-                    sort: 'created',
-                    limit: paging.value.limit,
-                    page: paging.value.page
-                }
-            }
-        });
-
-        if (res.error) throw new Error(res.error.message);
-
-        list.value = res.data;
-        loading.value = false;
-    } catch (err) {
-        error.value = err instanceof Error ? err : new Error(String(err));
-    }
-}
-
-async function deleteAsset(asset: ProfileFile) {
-    loading.value = true;
-
-    try {
-        const res = await server.DELETE('/api/profile/asset/{:asset}', {
-            params: {
-                path: {
-                    ':asset': asset.id
-                }
-            }
-        });
-
-        if (res.error) throw new Error(res.error.message);
-    } catch (err) {
-        loading.value = false
-        throw err;
-    }
-
-    await fetchList();
-}
-</script>