@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,410 +0,0 @@
-<template>
-    <MenuTemplate name='Basemaps'>
-        <template #buttons>
-            <TablerIconButton
-                title='Create Basemap'
-                @click='editModal = {}'
-            >
-                <IconPlus
-                    :size='32'
-                    stroke='1'
-                />
-            </TablerIconButton>
-            <TablerRefreshButton
-                :loading='loading'
-                @click='fetchList'
-            />
-        </template>
-
-        <template #default>
-            <div
-                v-if='!share'
-                class='col-12 px-2 py-2 d-flex flex-column gap-2'
-            >
-                <div
-                    v-if='paging.collection'
-                    class='d-flex align-items-center gap-2'
-                >
-                    <div
-                        class='d-flex align-items-center gap-2 cursor-pointer hover-opacity'
-                    >
-                        <TablerIconButton
-                            title='Home'
-                            @click='paging.collection = ""'
-                        >
-                            <IconFolder
-                                :size='20'
-                                stroke='1'
-                            />
-                        </TablerIconButton>
-                    </div>
-
-                    <IconChevronRight
-                        :size='20'
-                        stroke='1'
-                        class='text-white-50'
-                    />
-
-                    <div class='d-flex align-items-center gap-2'>
-                        <span class='h3 mb-0'>{{ paging.collection }}</span>
-                    </div>
-                </div>
-
-                <TablerInput
-                    v-model='paging.filter'
-                    class='w-100'
-                    icon='search'
-                    placeholder='Filter'
-                />
-            </div>
-
-            <TablerLoading v-if='loading' />
-            <TablerAlert
-                v-else-if='error'
-                :err='error'
-            />
-            <Share
-                v-else-if='share'
-                style='height: 70vh'
-                :basemaps='share'
-                @done='share = undefined'
-                @close='share = undefined'
-            />
-            <TablerNone
-                v-else-if='!list.items.length && !list.collections.length'
-                label='Basemaps'
-                @create='editModal = {}'
-            />
-            <template v-else>
-                <div class='col-12 d-flex flex-column gap-2 p-3'>
-                    <StandardItem
-                        v-for='collection in list.collections'
-                        :key='collection.name'
-                        class='d-flex align-items-center'
-                        @click='setCollection(collection.name)'
-                    >
-                        <div class='icon-wrapper d-flex align-items-center justify-content-center rounded-circle bg-black bg-opacity-25 ms-2 my-2'>
-                            <IconFolder
-                                :size='24'
-                                stroke='1'
-                            />
-                        </div>
-                        <span class='fw-semibold ms-3'>{{ collection.name }}</span>
-                    </StandardItem>
-
-                    <StandardItem
-                        v-for='basemap in list.items'
-                        :key='basemap.id'
-                        class='d-flex align-items-center'
-                        :class='{ "bg-blue text-white": isCurrentBasemap(basemap.id) }'
-                        @click='setBasemap(basemap)'
-                    >
-                        <div class='icon-wrapper d-flex align-items-center justify-content-center rounded-circle bg-black bg-opacity-25 ms-2 my-2'>
-                            <IconMap
-                                :size='24'
-                                stroke='1'
-                            />
-                        </div>
-                        <span class='fw-semibold ms-3 flex-grow-1'>{{ basemap.name }}</span>
-
-                        <div class='d-flex align-items-center me-2'>
-                            <span
-                                v-if='!basemap.username'
-                                class='mx-3 badge border'
-                                :class='isCurrentBasemap(basemap.id) ? "bg-white text-blue" : "bg-blue text-white"'
-                            >Public</span>
-                            <span
-                                v-else
-                                class='mx-3 badge border bg-red text-white'
-                            >Private</span>
-
-                            <TablerDropdown>
-                                <TablerIconButton
-                                    title='More Options'
-                                >
-                                    <IconDotsVertical
-                                        :size='20'
-                                        stroke='1'
-                                    />
-                                </TablerIconButton>
-
-                                <template #dropdown>
-                                    <div clas='col-12'>
-                                        <div
-                                            v-if='(!basemap.username && isSystemAdmin) || basemap.username'
-                                            class='cursor-pointer col-12 hover d-flex align-items-center px-2 py-2'
-                                            @click.stop.prevent='editModal = basemap'
-                                        >
-                                            <IconSettings
-                                                v-tooltip='"Edit Basemap"'
-                                                :size='32'
-                                                stroke='1'
-                                            />
-                                            <span class='mx-2'>Edit Basemap</span>
-                                        </div>
-                                        <div
-                                            class='cursor-pointer col-12 hover d-flex align-items-center px-2 py-2'
-                                            @click.stop.prevent='addOverlay(basemap)'
-                                        >
-                                            <IconBoxMultiple
-                                                v-tooltip='"Add Overlay"'
-                                                :size='32'
-                                                stroke='1'
-                                            />
-                                            <span class='mx-2'>Add as Overlay</span>
-                                        </div>
-                                        <div
-                                            v-if='basemap.sharing_enabled'
-                                            class='cursor-pointer col-12 hover d-flex align-items-center px-2 py-2'
-                                            @click.stop.prevent='download(basemap)'
-                                        >
-                                            <IconDownload
-                                                :size='32'
-                                                stroke='1'
-                                            />
-                                            <span class='mx-2'>Download XML</span>
-                                        </div>
-                                        <div
-                                            v-if='basemap.sharing_enabled'
-                                            class='cursor-pointer col-12 hover d-flex align-items-center px-2 py-2'
-                                            @click.stop.prevent='basemap.sharing_enabled ? share = [basemap.id] : null'
-                                        >
-                                            <IconShare2
-                                                :size='32'
-                                                stroke='1'
-                                            />
-                                            <span class='mx-2'>Share</span>
-                                        </div>
-                                    </div>
-                                </template>
-                            </TablerDropdown>
-                        </div>
-                    </StandardItem>
-                </div>
-
-                <div class='col-lg-12 d-flex'>
-                    <div class='ms-auto'>
-                        <TablerPager
-                            v-if='list.total > paging.limit'
-                            :page='paging.page'
-                            :total='list.total'
-                            :limit='paging.limit'
-                            @page='paging.page = $event'
-                        />
-                    </div>
-                </div>
-            </template>
-        </template>
-    </MenuTemplate>
-
-    <BasemapEditModal
-        v-if='editModal'
-        size='xl'
-        :basemap='editModal'
-        @close='editModal = false'
-    />
-</template>
-
-<script setup lang='ts'>
-import { onMounted, ref, watch } from 'vue';
-import StandardItem from '../util/StandardItem.vue';
-import type { BasemapList, Basemap } from '../../../types.ts';
-import { server, stdurl } from '../../../std.ts';
-import Overlay from '../../../base/overlay.ts';
-import BasemapEditModal from './Basemaps/EditModal.vue';
-import MenuTemplate from '../util/MenuTemplate.vue';
-import Share from '../util/Share.vue';
-import {
-    TablerNone,
-    TablerInput,
-    TablerPager,
-    TablerAlert,
-    TablerLoading,
-    TablerIconButton,
-    TablerRefreshButton,
-    TablerDropdown
-} from '@tak-ps/vue-tabler';
-import {
-    IconMap,
-    IconPlus,
-    IconFolder,
-    IconShare2,
-    IconDownload,
-    IconSettings,
-    IconBoxMultiple,
-    IconDotsVertical,
-    IconChevronRight
-} from '@tabler/icons-vue'
-import type { LayerSpecification } from 'maplibre-gl'
-import { useRouter } from 'vue-router';
-import { useMapStore } from '../../../stores/map.ts';
-const mapStore = useMapStore();
-
-const router = useRouter();
-const isSystemAdmin = ref<boolean>(false);
-
-const error = ref<Error | undefined>();
-const loading = ref(true);
-const editModal = ref();
-const share = ref<Array<number> | undefined>();
-const paging = ref({
-    filter: '',
-    collection: '',
-    limit: 30,
-    page: 0
-});
-
-const list = ref<BasemapList>({
-    total: 0,
-    collections: [],
-    items: []
-});
-
-onMounted(async () => {
-    await fetchList();
-    isSystemAdmin.value = await mapStore.worker.profile.isSystemAdmin();
-});
-
-watch(editModal, async () => {
-    await fetchList();
-});
-
-watch(paging.value, async () => {
-    await fetchList();
-});
-
-async function setBasemap(basemap: Basemap) {
-    const hasBasemap = mapStore.overlays.some((overlay) => {
-        return overlay.mode === 'basemap';
-    });
-
-    if (hasBasemap) {
-        for (let i = 0; i < mapStore.overlays.length; i++) {
-            const overlay = mapStore.overlays[i];
-
-            if (overlay.mode === 'basemap') {
-                if (mapStore.overlays[i + 1]) {
-                    await overlay.replace({
-                        name: basemap.name,
-                        type: basemap.type,
-                        url: `/api/basemap/${basemap.id}/tiles`,
-                        mode: 'basemap',
-                        mode_id: String(basemap.id),
-                        styles: basemap.styles as Array<LayerSpecification>
-                    }, {
-                        before: mapStore.overlays[i + 1].styles[0].id
-                    });
-                } else {
-                    await overlay.replace({
-                        name: basemap.name,
-                        type: basemap.type,
-                        url: `/api/basemap/${basemap.id}/tiles`,
-                        mode: 'basemap',
-                        mode_id: String(basemap.id),
-                        styles: basemap.styles as Array<LayerSpecification>
-                    });
-                }
-                break;
-            }
-        }
-    } else {
-        const before = String(mapStore.overlays[0].styles[0].id);
-
-        mapStore.overlays.unshift(await Overlay.create({
-            name: basemap.name,
-            pos: -1,
-            type: basemap.type,
-            frequency: basemap.frequency,
-            url: `/api/basemap/${basemap.id}/tiles`,
-            mode: 'basemap',
-            mode_id: String(basemap.id),
-            styles: basemap.styles
-        }, { before }));
-    }
-}
-
-function download(basemap: Basemap) {
-    window.open(stdurl(`/api/basemap/${basemap.id}?format=xml&download=true&token=${localStorage.token}`), '_blank');
-}
-
-function setCollection(name: string) {
-    paging.value.collection = name;
-    paging.value.filter = '';
-}
-
-function isCurrentBasemap(basemapId: number): boolean {
-    const currentBasemap = mapStore.overlays.find(overlay =>
-        overlay.mode === 'basemap' && overlay.mode_id === String(basemapId)
-    );
-    return !!currentBasemap;
-}
-
-async function addOverlay(basemap: Basemap) {
-    try {
-        // Insert in 1st position after basemap where mapStore.overlays[0] is the basemap
-        mapStore.overlays.splice(1, 0, await Overlay.create({
-            url: String(stdurl(`/api/basemap/${basemap.id}/tiles`)),
-            name: basemap.name,
-            mode: 'overlay',
-            mode_id: String(basemap.id),
-            frequency: basemap.frequency,
-            type: basemap.type,
-            styles: basemap.styles
-        }, {
-            before: String(mapStore.overlays[1].styles[0].id)
-        }));
-
-        loading.value = false;
-
-        router.push('/menu/overlays');
-    } catch (err) {
-        loading.value = false;
-        throw err;
-    }
-}
-
-async function fetchList() {
-    error.value = undefined;
-
-    try {
-        loading.value = true;
-
-        const res = await server.GET('/api/basemap', {
-            params: {
-                query: {
-                    overlay: false,
-                    filter: paging.value.filter,
-                    collection: paging.value.collection ? paging.value.collection : undefined,
-                    limit: paging.value.limit,
-                    order: 'asc',
-                    sort: 'name',
-                    page: paging.value.page,
-                    type: ['vector', 'raster']
-                }
-            }
-        })
-
-        if (res.error) throw new Error(res.error.message);
-
-        list.value = res.data;
-    } catch (err) {
-        error.value = err instanceof Error ? err : new Error(String(err));
-    }
-
-    loading.value = false;
-}
-</script>
-
-<style scoped>
-.icon-wrapper {
-    width: 3rem;
-    height: 3rem;
-    min-width: 3rem;
-    min-height: 3rem;
-    flex-shrink: 0;
-}
-
-.text-decoration-underline-hover:hover {
-    text-decoration: underline;
-}
-</style>

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

@@ -1,206 +0,0 @@
-<template>
-    <MenuTemplate name='Channels'>
-        <template #buttons>
-            <TablerIconButton
-                v-if='!loading && mapStore.hasNoChannels'
-                title='All Channels On'
-                @click='setAllStatus(true)'
-            >
-                <IconEyePlus
-                    :size='32'
-                    stroke='1'
-                />
-            </TablerIconButton>
-            <TablerIconButton
-                v-if='!loading && !mapStore.hasNoChannels'
-                title='All Channels Off'
-                @click='setAllStatus(false)'
-            >
-                <IconEyeX
-                    :size='32'
-                    stroke='1'
-                />
-            </TablerIconButton>
-
-            <TablerRefreshButton
-                :loading='loading'
-                @click='refresh'
-            />
-        </template>
-        <template #default>
-            <div
-                v-if='!loading'
-                class='col-12 px-2 pb-2 pt-2'
-            >
-                <TablerInput
-                    v-model='paging.filter'
-                    icon='search'
-                    placeholder='Filter'
-                />
-            </div>
-
-            <EmptyInfo
-                v-if='mapStore.hasNoChannels'
-                :button='false'
-            />
-
-            <TablerLoading v-if='loading' />
-            <TablerAlert
-                v-else-if='error'
-                :err='error'
-            />
-            <TablerNone
-                v-else-if='!Object.keys(processChannels).length'
-                :create='false'
-            />
-            <div
-                v-else
-                class='col-12 d-flex flex-column gap-2 p-3'
-            >
-                <StandardItem
-                    v-for='ch in processChannels'
-                    :key='ch.name'
-                    class='d-flex align-items-center gap-3 p-2'
-                    @click='setStatus(ch, !ch.active)'
-                >
-                    <div
-                        class='d-flex align-items-center justify-content-center rounded-circle bg-black bg-opacity-25'
-                        style='width: 3rem; height: 3rem; min-width: 3rem;'
-                    >
-                        <component
-                            :is='ch.active ? IconEye : IconEyeOff'
-                            :size='24'
-                            stroke='1'
-                        />
-                    </div>
-
-                    <div class='d-flex flex-column'>
-                        <div class='fw-bold'>
-                            {{ ch.name }}
-                        </div>
-                        <div class='text-secondary small'>
-                            {{ ch.description || "No Description" }}
-                        </div>
-                    </div>
-
-                    <div class='ms-auto'>
-                        <IconLocation
-                            v-if='ch.direction.length === 2'
-                            v-tooltip='"Bi-Directional"'
-                            :size='32'
-                            stroke='1'
-                        />
-                        <IconLocation
-                            v-else-if='ch.direction.includes("IN")'
-                            v-tooltip='"Location Sharing"'
-                            :size='32'
-                            stroke='1'
-                        />
-                        <IconLocationOff
-                            v-else-if='ch.direction.includes("OUT")'
-                            v-tooltip='"No Location Sharing"'
-                            :size='32'
-                            stroke='1'
-                        />
-                    </div>
-                </StandardItem>
-            </div>
-        </template>
-    </MenuTemplate>
-</template>
-
-<script setup lang='ts'>
-import { ref, computed, onMounted } from 'vue';
-import type { Group } from '../../../../src/types.ts';
-import {
-    TablerNone,
-    TablerIconButton,
-    TablerRefreshButton,
-    TablerInput,
-    TablerAlert,
-    TablerLoading
-} from '@tak-ps/vue-tabler';
-import MenuTemplate from '../util/MenuTemplate.vue';
-import StandardItem from '../util/StandardItem.vue';
-import EmptyInfo from '../util/EmptyInfo.vue';
-import {
-    IconLocation,
-    IconLocationOff,
-    IconEye,
-    IconEyeX,
-    IconEyePlus,
-    IconEyeOff,
-} from '@tabler/icons-vue';
-import { useMapStore } from '../../../stores/map.ts';
-const mapStore = useMapStore();
-
-const error = ref<Error | undefined>();
-const loading = ref(true);
-const paging = ref({
-    filter: ''
-});
-
-const channels = ref<Array<Group>>([]);
-
-onMounted(async () => {
-    await refresh();
-});
-
-const processChannels = computed<Record<string, Group>>(() => {
-    const filteredChannels: Record<string, Group> = {};
-
-    JSON.parse(JSON.stringify(channels.value))
-        .sort((a: Group, b: Group) => {
-            return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0);
-        }).forEach((channel: Group) => {
-            if (filteredChannels[channel.name]) {
-                // @ts-expect-error Type as an array eventually
-                filteredChannels[channel.name].direction.push(channel.direction);
-            } else {
-                // @ts-expect-error Type as an array eventually
-                channel.direction = [channel.direction];
-                filteredChannels[channel.name] = channel;
-            }
-        })
-
-    for (const key of Object.keys(filteredChannels)) {
-        if (!key.toLowerCase().includes(paging.value.filter.toLowerCase())) {
-            delete filteredChannels[key];
-        }
-    }
-
-    return filteredChannels;
-});
-
-async function refresh() {
-    loading.value = true;
-
-    try {
-        channels.value = await mapStore.worker.profile.loadChannels();
-    } catch (err) {
-        error.value = err instanceof Error ? err : new Error(String(err));
-    }
-
-    loading.value = false;
-}
-
-async function setAllStatus(active=true) {
-    // Updating the API takes a perceptable amount of time so
-    // we update the UI state to provide immediate feedback
-    channels.value.forEach((ch) => {
-        ch.active = active;
-    })
-
-    channels.value = await mapStore.worker.profile.setAllChannels(active);
-}
-
-async function setStatus(channel: Group, active=false) {
-    channels.value.forEach((ch) => {
-        if (ch.name === channel.name) {
-            ch.active = active;
-        }
-    })
-
-    channels.value = await mapStore.worker.profile.setChannel(channel.name, active);
-}
-</script>