@tak-ps/cloudtak 12.54.0

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

@@ -0,0 +1,324 @@
+<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

@@ -0,0 +1,334 @@
+<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>