@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,324 +0,0 @@
-<template>
-    <MenuTemplate
-        :name='subscription ? subscription.meta.name : "Data Sync"'
-        :error='error'
-        :loading='(!subscription && !error) || loading'
-    >
-        <template #buttons>
-            <TablerDelete
-                v-if='!loading && subscription && subscription.role.permissions.includes("MISSION_WRITE")'
-                v-tooltip='"Delete"'
-                :label='"Delete " + (subscription.meta.name || "Data Sync")'
-                displaytype='icon'
-                match='Delete Data Sync'
-                @delete='deleteMission'
-            />
-            <TablerDropdown
-                v-if='subscription && subscription.subscribed'
-            >
-                <TablerIconButton
-                    title='More Options'
-                >
-                    <IconDotsVertical
-                        :size='20'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-
-                <template #dropdown>
-                    <div clas='col-12'>
-                        <div
-                            class='cursor-pointer col-12 hover d-flex align-items-center px-2 py-2'
-                            @click='shareToPackageSetup'
-                        >
-                            <IconPackages
-                                :size='32'
-                                stroke='1'
-                            />
-                            <span class='mx-2'>Export Data Package</span>
-                        </div>
-                        <div
-                            class='cursor-pointer col-12 hover d-flex align-items-center px-2 py-2'
-                            @click='exportToPackage("geojson")'
-                        >
-                            <IconFile
-                                :size='32'
-                                stroke='1'
-                            />
-                            <span class='mx-2'>Export GeoJSON</span>
-                        </div>
-                        <div
-                            class='cursor-pointer col-12 hover d-flex align-items-center px-2 py-2'
-                            @click='exportToPackage("kml")'
-                        >
-                            <IconFile
-                                :size='32'
-                                stroke='1'
-                            />
-                            <span class='mx-2'>Export KML</span>
-                        </div>
-                        <div
-                            class='cursor-pointer col-12 hover d-flex align-items-center px-2 py-2'
-                            @click='exportToPackage("zip")'
-                        >
-                            <IconFileZip
-                                :size='32'
-                                stroke='1'
-                            />
-                            <span class='mx-2'>Download Archive</span>
-                        </div>
-                    </div>
-                </template>
-            </TablerDropdown>
-            <TablerRefreshButton
-                :loading='(!subscription && !error) || loading'
-                @click='fetchMission'
-            />
-        </template>
-        <template #default>
-            <TablerLoading
-                v-if='loadingInline'
-                :desc='loadingInline'
-                :compact='true'
-            />
-            <TablerAlert
-                v-else-if='error'
-                :err='error'
-            />
-            <template v-else>
-                <div
-                    v-if='subscription && subscription.subscribed'
-                    class='px-2 py-2 round btn-group w-100'
-                    role='group'
-                >
-                    <input
-                        id='info'
-                        type='radio'
-                        class='btn-check'
-                        autocomplete='off'
-                        :checked='route.name === "home-menu-mission-info"'
-                        @click='router.replace(`/menu/missions/${route.params.mission}/info`)'
-                    >
-                    <label
-                        for='info'
-                        type='button'
-                        class='btn btn-sm'
-                    ><IconInfoSquare
-                        v-tooltip='"Metadata"'
-                        :size='32'
-                        stroke='1'
-                    /></label>
-
-                    <input
-                        id='layer'
-                        type='radio'
-                        class='btn-check'
-                        autocomplete='off'
-                        :checked='route.name === "home-menu-mission-layers"'
-                        @click='router.replace(`/menu/missions/${route.params.mission}/layers`)'
-                    >
-                    <label
-                        for='layer'
-                        type='button'
-                        class='btn btn-sm'
-                    ><IconBoxMultiple
-                        v-tooltip='"Layers"'
-                        :size='32'
-                        stroke='1'
-                    /></label>
-
-                    <input
-                        id='users'
-                        type='radio'
-                        class='btn-check'
-                        autocomplete='off'
-                        :checked='route.name === "home-menu-mission-users"'
-                        @click='router.replace(`/menu/missions/${route.params.mission}/users`)'
-                    >
-                    <label
-                        for='users'
-                        type='button'
-                        class='btn btn-sm'
-                    ><IconUsers
-                        v-tooltip='"Users"'
-                        :size='32'
-                        stroke='1'
-                    /></label>
-
-                    <input
-                        id='timeline'
-                        type='radio'
-                        class='btn-check'
-                        autocomplete='off'
-                        :checked='route.name === "home-menu-mission-timeline"'
-                        @click='router.replace(`/menu/missions/${route.params.mission}/timeline`)'
-                    >
-                    <label
-                        for='timeline'
-                        type='button'
-                        class='btn btn-sm'
-                    ><IconTimeline
-                        v-tooltip='"Timeline"'
-                        :size='32'
-                        stroke='1'
-                    /></label>
-
-                    <input
-                        id='logs'
-                        type='radio'
-                        class='btn-check'
-                        autocomplete='off'
-                        :checked='route.name === "home-menu-mission-logs"'
-                        @click='router.replace(`/menu/missions/${route.params.mission}/logs`)'
-                    >
-                    <label
-                        for='logs'
-                        type='button'
-                        class='btn btn-sm'
-                    ><IconArticle
-                        v-tooltip='"Logs"'
-                        :size='32'
-                        stroke='1'
-                    /></label>
-
-                    <input
-                        id='contents'
-                        type='radio'
-                        class='btn-check'
-                        autocomplete='off'
-                        :checked='route.name === "home-menu-mission-contents"'
-                        @click='router.replace(`/menu/missions/${route.params.mission}/contents`)'
-                    >
-                    <label
-                        for='contents'
-                        type='button'
-                        class='btn btn-sm'
-                    ><IconFiles
-                        v-tooltip='"Files"'
-                        :size='32'
-                        stroke='1'
-                    /></label>
-                </div>
-
-                <Suspense>
-                    <router-view
-                        v-if='subscription'
-                        :subscription='subscription'
-                        @refresh='fetchMission(true)'
-                    />
-
-                    <template #fallback>
-                        <TablerLoading />
-                    </template>
-                </Suspense>
-            </template>
-        </template>
-    </MenuTemplate>
-
-    <ShareToPackage
-        v-if='shareToPackage.shown && subscription'
-        :name='`${new Date().toISOString().replace(/T.*/, "")} ${subscription ? subscription.meta.name : "Mission"}`'
-        :feats='shareToPackage.features'
-        @close='shareToPackage.shown = false'
-    />
-</template>
-
-<script setup lang='ts'>
-import { ref, onMounted } from 'vue';
-import { std } from '../../../std.ts';
-import type { Feature } from '../../../types.ts';
-import Subscription from '../../../base/subscription.ts';
-import {
-    IconFile,
-    IconPackages,
-    IconFileZip,
-    IconBoxMultiple,
-    IconDotsVertical,
-    IconArticle,
-    IconTimeline,
-    IconFiles,
-    IconInfoSquare,
-    IconUsers,
-} from '@tabler/icons-vue';
-import {
-    TablerAlert,
-    TablerLoading,
-    TablerDropdown,
-    TablerDelete,
-    TablerIconButton,
-    TablerRefreshButton
-} from '@tak-ps/vue-tabler';
-import MenuTemplate from '../util/MenuTemplate.vue';
-import ShareToPackage from '../util/ShareToPackage.vue';
-import { useRoute, useRouter } from 'vue-router';
-import { useMapStore } from '../../../stores/map.ts';
-
-const mapStore = useMapStore();
-const route = useRoute();
-const router = useRouter();
-
-const error = ref<Error | undefined>(undefined);
-const token = ref<string | undefined>(route.query.token ? String(route.query.token) : undefined)
-const loading = ref(false);
-
-const shareToPackage = ref<{
-    shown: boolean,
-    features: Feature[]
-}>({
-    shown: false,
-    features: []
-});
-
-const loadingInline = ref<string | undefined>(undefined);
-const subscription = ref<Subscription | undefined>(undefined)
-
-onMounted(async () => {
-    await fetchMission();
-})
-
-async function shareToPackageSetup(): Promise<void> {
-    if (!subscription.value) return;
-    shareToPackage.value.features = (await subscription.value.feature.collection(true)).features as Feature[];
-    shareToPackage.value.shown = true;
-}
-
-async function deleteMission() {
-    loading.value = true;
-
-    if (!subscription.value) return;
-
-    await subscription.value.delete();
-
-    const overlay = mapStore.getOverlayByMode('mission', String(route.params.mission));
-    if (overlay) await mapStore.removeOverlay(overlay);
-
-    router.replace('/menu/missions');
-}
-
-async function exportToPackage(format: string): Promise<void> {
-    if (!subscription.value) return;
-
-    loadingInline.value = 'Generating Archive'
-    await std(`/api/marti/missions/${encodeURIComponent(subscription.value.guid)}/archive?download=true&format=${format}`, {
-        download: true
-    })
-    loadingInline.value = undefined;
-}
-
-async function fetchMission(reload = false): Promise<void> {
-    loading.value = true;
-
-    try {
-        subscription.value = await Subscription.load(String(route.params.mission), {
-            reload,
-            token: String(localStorage.token),
-            missiontoken: token.value,
-        });
-
-        loading.value = false;
-    } catch (err) {
-        error.value = err instanceof Error ? err : new Error(String(err));
-        loading.value = false;
-    }
-}
-</script>

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

@@ -1,334 +0,0 @@
-<template>
-    <MenuTemplate
-        name='Data Syncs'
-    >
-        <template #buttons>
-            <TablerIconButton
-                title='Create Sync'
-                @click='create = true'
-            >
-                <IconPlus
-                    :size='32'
-                    stroke='1'
-                />
-            </TablerIconButton>
-            <TablerRefreshButton
-                :loading='loading'
-                @click='fetchMissions'
-            />
-        </template>
-        <template #default>
-            <div class='d-flex flex-column'>
-                <div class='d-flex mx-2 pt-2 flex-row align-items-sm-center gap-2'>
-                    <TablerInput
-                        v-model='paging.filter'
-                        :autofocus='true'
-                        icon='search'
-                        placeholder='Filter data syncs'
-                        class='flex-grow-1'
-                    />
-                </div>
-
-                <ChannelInfo />
-
-                <EmptyInfo v-if='mapStore.hasNoChannels' />
-
-                <TablerLoading v-if='loading' />
-                <template v-else>
-                    <TablerAlert
-                        v-if='error'
-                        :err='error'
-                    />
-                    <template v-else>
-                        <TablerNone
-                            v-if='!filteredList.length'
-                            :create='false'
-                            label='No data syncs match your filter'
-                            class='px-2'
-                        />
-                        <div
-                            v-else
-                            class='d-flex flex-column gap-3 mx-2'
-                        >
-                            <PendingInvites
-                                v-model:invites='invites'
-                                @open-mission='openMission($event, false)'
-                                @error='error = $event'
-                            />
-
-                            <StandardItem
-                                v-for='(mission, mission_it) in filteredList'
-                                :key='mission_it'
-                                class='d-flex flex-row gap-3 position-relative'
-                                @click='openMission(mission, false)'
-                            >
-                                <div class='icon-wrapper d-flex align-items-center justify-content-center rounded-circle bg-black bg-opacity-25 ms-2 mt-2'>
-                                    <IconLock
-                                        v-if='mission.passwordProtected'
-                                        :size='24'
-                                        stroke='1'
-                                    />
-                                    <IconLockOpen
-                                        v-else
-                                        :size='24'
-                                        stroke='1'
-                                    />
-                                </div>
-
-                                <div class='flex-grow-1 d-flex flex-column gap-2 py-2'>
-                                    <div class='d-flex flex-wrap align-items-center gap-2'>
-                                        <span
-                                            class='fw-semibold text-break'
-                                            v-text='mission.name'
-                                        />
-                                    </div>
-
-                                    <Keywords :keywords='missionKeywords(mission)' />
-                                    <div
-                                        v-if='!missionKeywords(mission).length'
-                                        class='text-secondary small'
-                                    >
-                                        No keywords
-                                    </div>
-
-                                    <div
-                                        v-if='typeof missionPasswords[mission.guid] === "string"'
-                                        class='d-flex flex-column mx-2 flex-lg-row align-items-start gap-2'
-                                    >
-                                        <TablerInput
-                                            v-model='missionPasswords[mission.guid]'
-                                            type='password'
-                                            placeholder='Password'
-                                            :error='errors[mission.guid]'
-                                            class='flex-grow-1 w-100'
-                                            @keyup.enter='openMission(mission, true)'
-                                        />
-
-                                        <button
-                                            class='btn btn-primary px-3'
-                                            type='button'
-                                            @click.stop='openMission(mission, true)'
-                                        >
-                                            Unlock
-                                        </button>
-                                    </div>
-                                    <div
-                                        v-else
-                                        class='text-secondary small d-flex flex-wrap align-items-center gap-2'
-                                    >
-                                        <span
-                                            v-text='mission.createTime.replace(/T.*/, "")'
-                                        />
-                                        <span class='text-white-50'>•</span>
-                                        <span
-                                            v-text='mission.contents.length + " Items"'
-                                        />
-                                    </div>
-                                </div>
-
-                                <div class='d-flex align-items-center gap-2 pe-2'>
-                                    <IconAccessPoint
-                                        v-if='subscribed.has(mission.guid)'
-                                        v-tooltip='"Subscribed"'
-                                        class='text-success'
-                                        :size='32'
-                                        stroke='1'
-                                    />
-                                </div>
-                            </StandardItem>
-                        </div>
-                    </template>
-                </template>
-            </div>
-        </template>
-    </MenuTemplate>
-
-    <TablerModal
-        v-if='create'
-        size='xl'
-        @keyup.esc='create = false'
-    >
-        <div class='modal-status bg-red' />
-        <button
-            type='button'
-            class='btn-close'
-            aria-label='Close'
-            @click='create = false'
-        />
-        <MissionCreate
-            @mission='router.push(`/menu/missions/${$event.guid}`)'
-            @close='create = false'
-        />
-    </TablerModal>
-</template>
-
-<script setup lang='ts'>
-import { ref, onMounted, watch } from 'vue';
-import MissionCreate from './Mission/MissionCreate.vue';
-import PendingInvites from './Mission/PendingInvites.vue';
-import MenuTemplate from '../util/MenuTemplate.vue';
-import StandardItem from '../util/StandardItem.vue';
-import Keywords from '../util/Keywords.vue';
-import { useRouter } from 'vue-router';
-import {
-    TablerIconButton,
-    TablerRefreshButton,
-    TablerInput,
-    TablerNone,
-    TablerAlert,
-    TablerModal,
-    TablerLoading
-} from '@tak-ps/vue-tabler';
-import type { Mission, MissionInvite } from '../../../types.ts';
-import { std, stdurl } from '../../../std.ts';
-import {
-    IconPlus,
-    IconLock,
-    IconLockOpen,
-    IconAccessPoint
-} from '@tabler/icons-vue';
-import ChannelInfo from '../util/ChannelInfo.vue';
-import { useMapStore } from '../../../stores/map.ts';
-import EmptyInfo from '../util/EmptyInfo.vue';
-import Subscription from '../../../base/subscription.ts';
-
-const mapStore = useMapStore();
-
-const error = ref<Error | undefined>();
-const create = ref(false)
-const loading = ref(true)
-const missionPasswords = ref<Record<string, string>>({});
-const errors = ref<Record<string, string | undefined>>({})
-const router = useRouter();
-
-const paging = ref({ filter: '' });
-const list = ref<Array<Mission>>([]);
-const invites = ref<MissionInvite[]>([]);
-
-onMounted(async () => {
-    await fetchMissions();
-    await generateFilteredList()
-});
-
-const subscribed = ref<Set<string>>(new Set())
-const filteredList = ref<Array<Mission>>([]);
-
-watch(paging.value, async () => {
-    generateFilteredList();
-});
-
-async function generateFilteredList() {
-    const filtered = [];
-
-    const subs = await Subscription.localList({
-        subscribed: true
-    });
-
-    for (const sub of subs) {
-        subscribed.value.add(sub.guid);
-    }
-
-    for (const mission of list.value) {
-        if (!mission.name.toLowerCase().includes(paging.value.filter.toLowerCase())) {
-            continue;
-        }
-        filtered.push(mission);
-    }
-
-    filtered.sort((a) => {
-        return !subscribed.value.has(a.guid) ? 1 : -1;
-    })
-
-    filteredList.value = filtered;
-}
-
-async function openMission(mission: Mission, usePassword: boolean) {
-    if (mission.passwordProtected && subscribed.value.has(mission.guid)) {
-        const o = mapStore.getOverlayByMode('mission', mission.guid);
-
-        let fragment = `/menu/missions/${mission.guid}`;
-        if (o && o.token) fragment = `${fragment}?token=${encodeURIComponent(o.token)}`;
-        router.push(fragment);
-    } else if (mission.passwordProtected && usePassword) {
-        try {
-            const getMission = await fetchMission(mission, missionPasswords.value[mission.guid]);
-
-            let fragment = `/menu/missions/${mission.guid}`;
-            if (getMission && getMission.token) fragment = `${fragment}?token=${encodeURIComponent(getMission.token)}`;
-            router.push(fragment);
-        } catch (err) {
-            if (err instanceof Error && err.message.includes('Illegal attempt to access mission')) {
-                errors.value[mission.guid] = 'Invalid Password';
-            } else {
-                errors.value[mission.guid] = err instanceof Error ? err.message : String(err);
-            }
-        }
-    } else if (mission.passwordProtected && missionPasswords.value[mission.guid] === undefined) {
-        missionPasswords.value[mission.guid] = '';
-    } else if (!mission.passwordProtected) {
-        router.push(`/menu/missions/${mission.guid}?password=${encodeURIComponent(missionPasswords.value[mission.guid])}`);
-    }
-}
-
-async function fetchMission(mission: Mission, password?: string): Promise<Mission> {
-    const url = stdurl(`/api/marti/missions/${mission.guid}`);
-    if (password) url.searchParams.append('password', password);
-
-    const m = await std(url) as Mission;
-    return m;
-}
-
-function missionKeywords(mission: Mission): string[] {
-    if (!Array.isArray(mission.keywords)) return [];
-    return mission.keywords
-        .map((keyword) => typeof keyword === 'string' ? keyword.trim() : '')
-        .filter((keyword): keyword is string => keyword.length > 0)
-        .filter((keyword) => !keyword.startsWith('template:'));
-}
-
-async function fetchMissions() {
-    error.value = undefined;
-
-    try {
-        loading.value = true;
-
-        const res = await Subscription.list();
-        list.value = res.items;
-        invites.value = res.invites;
-    } catch (err) {
-        loading.value = false;
-        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;
-}
-
-.menu-overlays-fade-enter-active,
-.menu-overlays-fade-leave-active {
-    transition: all 0.2s ease-out;
-    max-height: 500px;
-    opacity: 1;
-    overflow: hidden;
-}
-
-.menu-overlays-fade-enter-from,
-.menu-overlays-fade-leave-to {
-    max-height: 0;
-    opacity: 0;
-    margin-top: 0 !important;
-    padding-top: 0 !important;
-    padding-bottom: 0 !important;
-}
-</style>