From 3ae68b0725d1c386e8fcf3adc81becfc2604bc6a Mon Sep 17 00:00:00 2001
From: ingalls <nick@ingalls.ca>
Date: Sun, 3 Nov 2024 11:09:35 -0700
Subject: [PATCH] Migrate Mission List to TS

---
 .../src/components/CloudTAK/Menu/Channels.vue |   6 +-
 .../src/components/CloudTAK/Menu/Contacts.vue |   6 +-
 .../src/components/CloudTAK/Menu/Missions.vue | 212 ++++++++----------
 .../src/components/CloudTAK/Menu/Packages.vue |   6 +-
 .../components/CloudTAK/util/EmptyInfo.vue    |  37 +++
 .../CloudTAK/util/NoChannelsInfo.vue          |  26 ---
 .../components/CloudTAK/util/SelectFeats.vue  |  28 ++-
 .../CloudTAK/util/ShareToMission.vue          | 109 +++++++++
 api/web/src/stores/base/mission.ts            |  20 ++
 api/web/src/stores/cots.ts                    |   4 +-
 api/web/src/stores/map.ts                     |  35 ++-
 api/web/src/types.ts                          |   1 +
 12 files changed, 310 insertions(+), 180 deletions(-)
 create mode 100644 api/web/src/components/CloudTAK/util/EmptyInfo.vue
 delete mode 100644 api/web/src/components/CloudTAK/util/NoChannelsInfo.vue
 create mode 100644 api/web/src/components/CloudTAK/util/ShareToMission.vue

diff --git a/api/web/src/components/CloudTAK/Menu/Channels.vue b/api/web/src/components/CloudTAK/Menu/Channels.vue
index 9bd1cdff4..2aa8593ca 100644
--- a/api/web/src/components/CloudTAK/Menu/Channels.vue
+++ b/api/web/src/components/CloudTAK/Menu/Channels.vue
@@ -22,7 +22,7 @@
                 />
             </div>
 
-            <NoChannelsInfo v-if='hasNoChannels' />
+            <EmptyInfo v-if='hasNoChannels' />
 
             <TablerLoading v-if='loading' />
             <TablerNone
@@ -105,7 +105,7 @@ import {
     TablerLoading
 } from '@tak-ps/vue-tabler';
 import MenuTemplate from '../util/MenuTemplate.vue';
-import NoChannelsInfo from '../util/NoChannelsInfo.vue';
+import EmptyInfo from '../util/EmptyInfo.vue';
 import {
     IconLocation,
     IconLocationOff,
@@ -191,7 +191,7 @@ export default {
         IconEyeOff,
         IconLocation,
         IconLocationOff,
-        NoChannelsInfo,
+        EmptyInfo,
         IconRefresh,
         TablerNone,
         TablerInput,
diff --git a/api/web/src/components/CloudTAK/Menu/Contacts.vue b/api/web/src/components/CloudTAK/Menu/Contacts.vue
index 7354c6ba5..4684c13a7 100644
--- a/api/web/src/components/CloudTAK/Menu/Contacts.vue
+++ b/api/web/src/components/CloudTAK/Menu/Contacts.vue
@@ -25,7 +25,7 @@
                 />
             </div>
 
-            <NoChannelsInfo v-if='hasNoChannels' />
+            <EmptyInfo v-if='hasNoChannels' />
 
             <TablerLoading v-if='loading' />
             <TablerNone
@@ -77,14 +77,14 @@ import {
     TablerIconButton
 } from '@tak-ps/vue-tabler';
 import Contact from '../util/Contact.vue';
-import NoChannelsInfo from '../util/NoChannelsInfo.vue';
+import EmptyInfo from '../util/EmptyInfo.vue';
 
 export default {
     name: 'CloudTAKContacts',
     components: {
         Contact,
         TablerNone,
-        NoChannelsInfo,
+        EmptyInfo,
         TablerInput,
         TablerLoading,
         TablerIconButton,
diff --git a/api/web/src/components/CloudTAK/Menu/Missions.vue b/api/web/src/components/CloudTAK/Menu/Missions.vue
index 82731bb2d..19a43ca17 100644
--- a/api/web/src/components/CloudTAK/Menu/Missions.vue
+++ b/api/web/src/components/CloudTAK/Menu/Missions.vue
@@ -4,20 +4,14 @@
         :loading='loading'
     >
         <template #buttons>
-            <IconPlus
-                v-tooltip='"Create Sync"'
-                :size='32'
-                :stroke='1'
-                class='cursor-pointer'
+            <TablerIconButton
+                title='Create Sync'
                 @click='create = true'
-            />
-            <IconRefresh
-                v-tooltip='"Refresh"'
-                :size='32'
-                :stroke='1'
-                class='cursor-pointer'
+            ><IconPlus :size='32' :stroke='1'/></TablerIconButton>
+            <TablerIconButton
+                title='Refresh'
                 @click='fetchMissions'
-            />
+            > <IconRefresh :size='32' :stroke='1' /></TablerIconButton>
         </template>
         <template #default>
             <div class='col-12 px-2 py-2'>
@@ -30,7 +24,7 @@
 
             <ChannelInfo />
 
-            <NoChannelsInfo v-if='hasNoChannels' />
+            <EmptyInfo v-if='hasNoChannels' />
 
             <TablerNone
                 v-if='!list.data.length'
@@ -38,8 +32,8 @@
                 label='Data Sync'
             />
             <TablerAlert
-                v-else-if='err'
-                :err='err'
+                v-else-if='error'
+                :err='error'
             />
             <template v-else>
                 <div
@@ -125,22 +119,26 @@
             @click='create = false'
         />
         <MissionCreate
-            @mission='$router.push(`/menu/missions/${$event.guid}`)'
+            @mission='router.push(`/menu/missions/${$event.guid}`)'
             @close='create = false'
         />
     </TablerModal>
 </template>
 
-<script>
+<script setup lang='ts'>
+import { ref, onMounted, computed } from 'vue';
 import MissionCreate from './Mission/MissionCreate.vue';
 import MenuTemplate from '../util/MenuTemplate.vue';
+import { useRouter } from 'vue-router';
 import {
+    TablerIconButton,
     TablerInput,
     TablerNone,
     TablerAlert,
     TablerModal
 } from '@tak-ps/vue-tabler';
-import { std, stdurl } from '/src/std.ts';
+import type { MissionList } from '../../../../src/types.ts';
+import { std, stdurl } from '../../../../src/std.ts';
 import {
     IconPlus,
     IconLock,
@@ -149,115 +147,93 @@ import {
     IconRefresh,
 } from '@tabler/icons-vue';
 import ChannelInfo from '../util/ChannelInfo.vue';
-import { mapGetters } from 'pinia'
-import { useProfileStore } from '/src/stores/profile.ts';
-import NoChannelsInfo from '../util/NoChannelsInfo.vue';
-import { useMapStore } from '/src/stores/map.ts';
+import { useProfileStore } from '../../../../src/stores/profile.ts';
+import EmptyInfo from '../util/EmptyInfo.vue';
+import { useMapStore } from '../../../../src/stores/map.ts';
+import Mission from '../../../../src/stores/base/mission.ts';
 const mapStore = useMapStore();
 
-export default {
-    name: 'CloudTAKMissions',
-    components: {
-        NoChannelsInfo,
-        ChannelInfo,
-        MenuTemplate,
-        TablerNone,
-        TablerAlert,
-        TablerInput,
-        TablerModal,
-        MissionCreate,
-        IconPlus,
-        IconLock,
-        IconLockOpen,
-        IconAccessPoint,
-        IconRefresh,
-    },
-    data: function() {
-        return {
-            err: false,
-            create: false,
-            loading: true,
-            subscribed: new Set(),
-            errors: {},
-            paging: {
-                filter: ''
-            },
-            list: {
-                data: [],
+const error = ref<Error | undefined>();
+const create = ref(false)
+const loading = ref(true)
+const subscribed = ref(new Set());
+const errors = ref<Record<string, string | undefined>>({})
+const router = useRouter();
+
+const paging = ref({ filter: '' });
+const list = ref<MissionList>({ data: [], });
+
+onMounted(async () => {
+    await fetchMissions();
+});
+
+const hasNoChannels = computed(() => useProfileStore.hasNoChannels);
+const filteredList = computed(() => {
+    return list.value.data.filter((mission) => {
+        return mission.name.toLowerCase()
+            .includes(paging.value.filter.toLowerCase());
+    })
+});
+
+const filteredListRemainder = computed(() => {
+    return filteredList.filter((mission) => {
+        return !subscribed.value.has(mission.guid)
+    })
+});
+
+const filteredListSubscribed = computed(() => {
+    return filteredList.filter((mission) => {
+        return subscribed.value.has(mission.guid)
+    })
+});
+
+async function openMission(mission, usePassword) {
+    if (mission.passwordProtected && subscribed.value.has(mission.guid)) {
+        const o = mapStore.getOverlayByMode('mission', mission.guid);
+        router.push(`/menu/missions/${mission.guid}?token=${encodeURIComponent(o.token)}`);
+    } else if (mission.passwordProtected && usePassword) {
+        try {
+            const getMission = await fetchMission(mission, mission.password);
+            router.push(`/menu/missions/${mission.guid}?token=${encodeURIComponent(getMission.token)}`);
+        } catch (err) {
+            if (err.message.includes('Illegal attempt to access mission')) {
+                errors.value[mission.guid] = 'Invalid Password';
+            } else {
+                errors.value[mission.guid] = err.message;
             }
-        };
-    },
-    mounted: async function() {
-        await this.fetchMissions();
-    },
-    computed: {
-        ...mapGetters(useProfileStore, ['hasNoChannels']),
-        filteredList: function() {
-            return this.list.data.filter((mission) => {
-                return mission.name.toLowerCase()
-                    .includes(this.paging.filter.toLowerCase());
-            })
-        },
-        filteredListRemainder: function() {
-            return this.filteredList.filter((mission) => {
-                return !this.subscribed.has(mission.guid)
-            })
-        },
-        filteredListSubscribed: function() {
-            return this.filteredList.filter((mission) => {
-                return this.subscribed.has(mission.guid)
-            })
         }
-    },
-    methods: {
-        openMission: async function(mission, usePassword) {
-            if (mission.passwordProtected && this.subscribed.has(mission.guid)) {
-                const o = mapStore.getOverlayByMode('mission', mission.guid);
-                this.$router.push(`/menu/missions/${mission.guid}?token=${encodeURIComponent(o.token)}`);
-            } else if (mission.passwordProtected && usePassword) {
-                try {
-                    const getMission = await this.fetchMission(mission, mission.password);
-                    this.$router.push(`/menu/missions/${mission.guid}?token=${encodeURIComponent(getMission.token)}`);
-                } catch (err) {
-                    if (err.message.includes('Illegal attempt to access mission')) {
-                        this.errors[mission.guid] = 'Invalid Password';
-                    } else {
-                        this.errors[mission.guid] = err.message;
-                    }
-                }
-            } else if (mission.passwordProtected && mission.password === undefined) {
-                mission.password = '';
-            } else if (!mission.passwordProtected) {
-                this.$router.push(`/menu/missions/${mission.guid}?password=${encodeURIComponent(mission.password)}`);
-            }
-        },
-        fetchMission: async function(mission, password) {
-            const url = stdurl(`/api/marti/missions/${mission.guid}`);
-            if (password) url.searchParams.append('password', password);
+    } else if (mission.passwordProtected && mission.password === undefined) {
+        mission.password = '';
+    } else if (!mission.passwordProtected) {
+        router.push(`/menu/missions/${mission.guid}?password=${encodeURIComponent(mission.password)}`);
+    }
+}
+
+async function fetchMission(mission, password) {
+    const url = stdurl(`/api/marti/missions/${mission.guid}`);
+    if (password) url.searchParams.append('password', password);
 
-            const m = await std(url);
-            return m;
-        },
-        fetchMissions: async function() {
-            this.err = false;
+    const m = await std(url);
+    return m;
+}
+
+async function fetchMissions() {
+    error.value = undefined;
 
-            try {
-                this.loading = true;
-                const url = stdurl('/api/marti/mission');
-                url.searchParams.append('passwordProtected', 'true');
-                url.searchParams.append('defaultRole', 'true');
-                this.list = await std(url);
+    try {
+        loading.value = true;
 
-                for (const item of this.list.data) {
-                    if (mapStore.getOverlayByMode('mission', item.guid)) {
-                        this.subscribed.add(item.guid);
-                    }
-                }
-            } catch (err) {
-                this.err = err;
+        list.value = await Mission.list();
+
+        for (const item of list.value.data) {
+            if (mapStore.getOverlayByMode('mission', item.guid)) {
+                subscribed.value.add(item.guid);
             }
-            this.loading = false;
         }
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
     }
+
+    loading.value = false;
 }
 </script>
diff --git a/api/web/src/components/CloudTAK/Menu/Packages.vue b/api/web/src/components/CloudTAK/Menu/Packages.vue
index 50d72b531..c08b38fb4 100644
--- a/api/web/src/components/CloudTAK/Menu/Packages.vue
+++ b/api/web/src/components/CloudTAK/Menu/Packages.vue
@@ -48,7 +48,7 @@
                 </div>
 
                 <ChannelInfo label='Data Packages' />
-                <NoChannelsInfo v-if='hasNoChannels' />
+                <EmptyInfo v-if='hasNoChannels' />
 
                 <TablerAlert
                     v-if='err'
@@ -104,7 +104,7 @@ import {
 } from '@tabler/icons-vue';
 import timeDiff from '../../../timediff.ts';
 import ChannelInfo from '../util/ChannelInfo.vue';
-import NoChannelsInfo from '../util/NoChannelsInfo.vue';
+import EmptyInfo from '../util/EmptyInfo.vue';
 import Upload from '../../util/Upload.vue';
 import { useProfileStore } from '/src/stores/profile.ts';
 import { mapGetters } from 'pinia'
@@ -115,7 +115,7 @@ export default {
         Upload,
         IconPlus,
         IconRefresh,
-        NoChannelsInfo,
+        EmptyInfo,
         ChannelInfo,
         TablerInput,
         TablerAlert,
diff --git a/api/web/src/components/CloudTAK/util/EmptyInfo.vue b/api/web/src/components/CloudTAK/util/EmptyInfo.vue
new file mode 100644
index 000000000..d9d1d134c
--- /dev/null
+++ b/api/web/src/components/CloudTAK/util/EmptyInfo.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class='col-12 d-flex py-2 px-2 text-red justify-content-center'>
+        <div class='d-flex align-items-center'>
+            <IconAlertCircle
+                :size='32'
+                stroke='2'
+                class='mx-2'
+            />
+            <div>
+                <span v-if='type === InfoType.CHANNELS'>
+                    No Channels are selected
+                </span>
+                <span v-else-if='type === InfoType.MISSIONS'>
+                    No Data Syncs have been subscribed to
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import {
+    IconAlertCircle
+} from '@tabler/icons-vue';
+
+enum InfoType {
+    CHANNELS = 'Channels',
+    MISSIONS = 'missions'
+};
+
+const props = defineProps({
+    type: {
+        type: String,
+        default: InfoType.CHANNELS
+    }
+})
+</script>
diff --git a/api/web/src/components/CloudTAK/util/NoChannelsInfo.vue b/api/web/src/components/CloudTAK/util/NoChannelsInfo.vue
deleted file mode 100644
index e7fe08129..000000000
--- a/api/web/src/components/CloudTAK/util/NoChannelsInfo.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-    <div class='col-12 d-flex py-2 px-2 text-red justify-content-center'>
-        <div class='d-flex align-items-center'>
-            <IconAlertCircle
-                :size='32'
-                :stroke='2'
-                class='mx-2'
-            />
-            <div>
-                No Channels are selected
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-import {
-    IconAlertCircle
-} from '@tabler/icons-vue';
-
-export default {
-    name: 'NoChannelsInfo',
-    components: {
-        IconAlertCircle
-    },
-}
-</script>
diff --git a/api/web/src/components/CloudTAK/util/SelectFeats.vue b/api/web/src/components/CloudTAK/util/SelectFeats.vue
index 466322bea..f26508c9a 100644
--- a/api/web/src/components/CloudTAK/util/SelectFeats.vue
+++ b/api/web/src/components/CloudTAK/util/SelectFeats.vue
@@ -4,7 +4,7 @@
         style='max-height: 400px'
     >
         <TablerLoading v-if='loading' />
-        <template v-else-if='!share'>
+        <template v-else-if='share === ShareType.NONE'>
             <div class='sticky-top col-12 d-flex align-items-center user-select-none'>
                 <div class='subheader mx-2 my-2'>
                     Selected Features
@@ -47,7 +47,7 @@
                     <TablerButton
                         style='height: 30px; width: 200px;'
                         class='me-1'
-                        @click='share = true'
+                        @click='share = ShareType.USERS'
                     >
                         <IconPackageExport
                             :size='20'
@@ -69,8 +69,8 @@
                         <template #dropdown>
                             <div clas='col-12'>
                                 <div
-                                    v-if='false'
                                     class='cursor-pointer col-12 hover-dark d-flex align-items-center px-2'
+                                    @click='share = ShareType.MISSION'
                                 >
                                     <IconAmbulance
                                         :size='32'
@@ -94,13 +94,22 @@
                 </div>
             </div>
         </template>
-        <template v-else>
+        <template v-else-if='share === ShareType.USERS'>
             <Share
                 style='height: 400px;'
                 :feats='Array.from(selected.values())'
                 :compact='true'
                 @done='selected.clear()'
-                @cancel='share = false'
+                @cancel='share = ShareType.NONE'
+            />
+        </template>
+        <template v-else-if='share === ShareType.MISSION'>
+            <ShareToMission
+                style='height: 400px;'
+                :feats='Array.from(selected.values())'
+                :compact='true'
+                @done='selected.clear()'
+                @cancel='share = ShareType.NONE'
             />
         </template>
     </div>
@@ -124,6 +133,7 @@ import {
     TablerIconButton
 } from '@tak-ps/vue-tabler';
 import Share from './Share.vue';
+import ShareToMission from './ShareToMission.vue';
 
 const cotStore = useCOTStore();
 
@@ -134,8 +144,14 @@ const props = defineProps({
     }
 });
 
+enum ShareType {
+    NONE = 'none',
+    MISSION = 'mission',
+    USERS = 'users'
+}
+
 const loading = ref(false);
-const share = ref(false);
+const share = ref<ShareType>(ShareType.NONE);
 
 async function deleteFeatures() {
     loading.value = true;
diff --git a/api/web/src/components/CloudTAK/util/ShareToMission.vue b/api/web/src/components/CloudTAK/util/ShareToMission.vue
new file mode 100644
index 000000000..5b52b03eb
--- /dev/null
+++ b/api/web/src/components/CloudTAK/util/ShareToMission.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class='mb-2'>
+        <div class='sticky-top col-12 d-flex align-items-center user-select-none'>
+            <span class='subheader mx-2'>Add to Mission</span>
+            <div
+                v-if='compact'
+                class='ms-auto'
+            >
+                <TablerIconButton
+                    title='Cancel Share'
+                    class='mx-2 my-2'
+                    @click='emit("cancel")'
+                >
+                    <IconX
+                        :size='20'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+        </div>
+
+
+        <TablerLoading v-if='loading' />
+        <EmptyInfo
+            v-else-if='!missions.length'
+            type='missions'
+        />
+        <template v-else>
+            <div
+                class='overflow-auto position-absolute'
+                :style='`
+                    height: calc(100% - 36px - ${compact ? "40px" : "100px"});
+                    margin-bottom: ${compact ? "30px" : "100px"};
+                    width: 100%;
+                `'
+            >
+                <div v-for='mission in missions'>
+                    <span v-text='mission'/>
+                </div>
+            </div>
+            <div class='position-absolute row g-0 bottom-0 start-0 end-0 bg-dark'>
+                <div class='col-6 px-1 py-1'>
+                    <TablerButton
+                        v-tooltip='"Share to Selected"'
+                        class='w-100 btn-primary'
+                        :style='compact ? "height: 30px" : ""'
+                    >
+                        <IconShare2
+                            v-if='compact'
+                            :size='20'
+                            stroke='1'
+                        />
+                        <span v-else>Add to Mission</span>
+                    </TablerButton>
+                </div>
+                <div class='col-6 px-1 py-1'>
+                    <TablerButton
+                        v-tooltip='"Cancel Share"'
+                        class='w-100 btn-secondary'
+                        :style='compact ? "height: 30px" : ""'
+                        @click='emit("cancel")'
+                    >
+                        Cancel
+                    </TablerButton>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed } from 'vue';
+import { std, stdurl } from '../../../../src/std.ts';
+import EmptyInfo from './EmptyInfo.vue';
+import {
+    TablerNone,
+    TablerLoading,
+    TablerButton,
+    TablerIconButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconX,
+    IconBroadcast,
+    IconShare2
+} from '@tabler/icons-vue';
+import { useConnectionStore } from '../../../../src/stores/connection.ts';
+import { useCOTStore } from '../../../../src/stores/cots.ts';
+
+const cotStore = useCOTStore();
+const connectionStore = useConnectionStore();
+
+const missions = computed(() => Array.from(cotStore.subscriptions.values()) );
+
+const props = defineProps({
+    compact: {
+        type: Boolean,
+        default: false
+    },
+    maxheight: {
+        type: String,
+        default: '100%'
+    }
+});
+
+const emit = defineEmits(['cancel', 'done']);
+
+const loading = ref(false);
+const selected = ref(new Set());
+</script>
diff --git a/api/web/src/stores/base/mission.ts b/api/web/src/stores/base/mission.ts
index 47aa886a6..98eef50a0 100644
--- a/api/web/src/stores/base/mission.ts
+++ b/api/web/src/stores/base/mission.ts
@@ -3,6 +3,7 @@ import { std, stdurl } from '../../std.ts';
 import type {
     Mission,
     MissionLog,
+    MissionList,
     MissionLogList,
     MissionSubscriptions
 } from '../../types.ts';
@@ -43,6 +44,25 @@ export default class Subscription {
         return new Subscription(mission, logs);
     }
 
+    static async list(opts: {
+        passwordProtected?: boolean;
+        defaultRole?: boolean;
+    } = {}): Promise<MissionList> {
+        if (opts.passwordProtected === undefined) opts.passwordProtected = true;
+        if (opts.defaultRole === undefined) opts.defaultRole = true;
+
+        const url = stdurl('/api/marti/mission');
+        url.searchParams.append('passwordProtected', String(opts.passwordProtected));
+        url.searchParams.append('defaultRole', String(opts.defaultRole));
+        this.list = await std(url);
+
+        const list = await std(url, {
+            method: 'GET',
+        }) as MissionList;
+
+        return list;
+    }
+
     static headers(token?: string): Record<string, string> {
         const headers: Record<string, string> = {};
         if (token) headers.MissionAuthorization = token;
diff --git a/api/web/src/stores/cots.ts b/api/web/src/stores/cots.ts
index 0b947bd9c..118f5c1ab 100644
--- a/api/web/src/stores/cots.ts
+++ b/api/web/src/stores/cots.ts
@@ -139,7 +139,9 @@ export const useCOTStore = defineStore('cots', {
                 headers: Subscription.headers(token)
             }) as FeatureCollection;
 
-            for (const feat of fc.features) this.add(feat as Feature, guid);
+            for (const feat of fc.features) {
+                this.add(feat as Feature, guid);
+            }
 
             return this.collection(sub.cots)
         },
diff --git a/api/web/src/stores/map.ts b/api/web/src/stores/map.ts
index 56338ecb1..c478dd099 100644
--- a/api/web/src/stores/map.ts
+++ b/api/web/src/stores/map.ts
@@ -371,29 +371,24 @@ export const useMapStore = defineStore('cloudtak', {
             }));
 
             // Data Syncs are specially loaded as they are dynamic
-            const promises = [];
             for (const overlay of this.overlays) {
-                promises.push(async () => {
-                    if (overlay.mode === 'mission' && overlay.mode_id) {
-                        const cotStore = useCOTStore();
-                        const source = map.getSource(String(overlay.id));
-                        if (!source) return;
-
-                        try {
-                            // @ts-expect-error Source.setData is not defined
-                            source.setData(await cotStore.loadMission(overlay.mode_id, overlay.token));
-                        } catch (err) {
-                            // TODO: Handle this gracefully
-                            // The Mission Sync is either:
-                            // - Deleted
-                            // - Part of a channel that is no longer active
-                            overlay._error = err instanceof Error ? err : new Error(String(err));
-                        }
+                if (overlay.mode === 'mission' && overlay.mode_id) {
+                    const cotStore = useCOTStore();
+                    const source = map.getSource(String(overlay.id));
+
+                    if (!source) continue;
+
+                    try {
+                        await this.updateMissionData(overlay.mode_id);
+                    } catch (err) {
+                        // TODO: Handle this gracefully
+                        // The Mission Sync is either:
+                        // - Deleted
+                        // - Part of a channel that is no longer active
+                        overlay._error = err instanceof Error ? err : new Error(String(err));
                     }
-                });
+                }
             }
-
-            await Promise.allSettled(promises);
         },
         /**
          * Determine if the feature is from the CoT store or a clicked VT feature
diff --git a/api/web/src/types.ts b/api/web/src/types.ts
index c6cec5597..2e9f6e107 100644
--- a/api/web/src/types.ts
+++ b/api/web/src/types.ts
@@ -26,6 +26,7 @@ export type User = paths["/user/{:username}"]["get"]["responses"]["200"]["conten
 export type UserList = paths["/user"]["get"]["responses"]["200"]["content"]["application/json"];
 
 export type Mission = paths["/marti/missions/{:name}"]["get"]["responses"]["200"]["content"]["application/json"];
+export type MissionList = paths["/marti/missions"]["get"]["responses"]["200"]["content"]["application/json"];
 export type MissionLog = paths["/marti/missions/{:name}/log/{:logid}"]["patch"]["responses"]["200"]["content"]["application/json"]["data"];
 export type MissionLogList = paths["/marti/missions/{:name}/log"]["get"]["responses"]["200"]["content"]["application/json"];
 export type MissionSubscriptions = paths["/marti/missions/{:name}/subscriptions/roles"]["get"]["responses"]["200"]["content"]["application/json"]["data"];