Realtime Values

dfpc-coe · Oct 15, 2024 · bcc94d7 · bcc94d7
1 parent 93f1212
commit bcc94d7
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 48 deletions.
diff --git a/api/web/src/components/CloudTAK/Menu/Mission/MissionLogs.vue b/api/web/src/components/CloudTAK/Menu/Mission/MissionLogs.vue
@@ -27,49 +27,57 @@
                 :key='log.id'
                 class='col-12 pb-2'
             >
-                <div class='d-flex'>
-                    <label
-                        class='subheader'
-                        v-text='log.creatorUid'
-                    />
-                    <label
-                        class='subheader ms-auto'
-                        v-text='log.created'
-                    />
-                </div>
-                <div class='col-12 position-relative'>
-                    <IconTrash
-                        v-if='role.permissions.includes("MISSION_WRITE")'
-                        :size='32'
-                        stroke='1'
-                        class='position-absolute cursor-pointer end-0 mx-2 my-2'
-                        @click='deleteLog(logidx)'
-                    />
-                    <pre
-                        class='rounded mb-1'
-                        v-text='log.content || "None"'
-                    />
-                </div>
+                <TablerLoading v-if='loading.ids.has(logidx)' desc='Deleting Log'/>
+                <template v-else>
+                    <div class='d-flex'>
+                        <label
+                            class='subheader'
+                            v-text='log.creatorUid'
+                        />
+                        <label
+                            class='subheader ms-auto'
+                            v-text='log.created'
+                        />
+                    </div>
+                    <div class='col-12 position-relative'>
+                        <IconTrash
+                            v-if='role.permissions.includes("MISSION_WRITE")'
+                            :size='32'
+                            stroke='1'
+                            class='position-absolute cursor-pointer end-0 mx-2 my-2'
+                            @click='deleteLog(logidx)'
+                        />
+                        <pre
+                            class='rounded mb-1'
+                            v-text='log.content || "None"'
+                        />
+                    </div>
 
-                <div class='col-12'>
-                    <span
-                        v-for='keyword in log.keywords'
-                        :key='keyword'
-                        class='me-1 badge badge-outline bg-blue-lt'
-                        v-text='keyword'
-                    />
-                </div>
+                    <div class='col-12'>
+                        <span
+                            v-for='keyword in log.keywords'
+                            :key='keyword'
+                            class='me-1 badge badge-outline bg-blue-lt'
+                            v-text='keyword'
+                        />
+                    </div>
+                </template>
             </div>
         </div>
 
+        <TablerLoading v-if='loading.create' desc='Creating Log' :compact='true'/>
+
         <template v-if='role.permissions.includes("MISSION_WRITE")'>
             <div class='mx-2'>
                 <TablerInput
                     v-model='createLog'
                     label='Create Log'
+                    @keyup.enter='submitOnEnter ? submitLog() : undefined'
                     :rows='4'
                 />
 
+                <TablerToggle label='Submit on Enter' v-model='submitOnEnter'/>
+
                 <div class='d-flex my-2'>
                     <div class='ms-auto'>
                         <button
@@ -94,6 +102,8 @@ import {
 } from '@tabler/icons-vue';
 import {
     TablerInput,
+    TablerToggle,
+    TablerLoading,
     TablerNone
 } from '@tak-ps/vue-tabler';
 import MenuTemplate from '../../util/MenuTemplate.vue';
@@ -113,18 +123,28 @@ const props = defineProps({
     }
 })
 
+const submitOnEnter = ref(true);
+const sub = ref<Subscription | undefined>();
 const paging = ref({ filter: '' });
 const createLog = ref('');
 const logs = ref<MissionLog[]>([]);
-const loading = ref({ logs: false });
+const loading = ref<{
+    logs: boolean,
+    create: boolean,
+    ids: Set<string>
+}> ({
+    logs: false,
+    create: false,
+    ids: new Set()
+});
 
 onMounted(async () => {
-    const sub = cotStore.subscriptions.get(props.mission.guid);
+    sub.value = cotStore.subscriptions.get(props.mission.guid);
 
-    if (!sub) {
+    if (!sub.value) {
         await fetchLogs()
     } else {
-        logs.value = sub.logs;
+        logs.value = sub.value.logs;
     }
 });
 
@@ -146,20 +166,36 @@ async function fetchLogs() {
 }
 
 async function deleteLog(logidx: number): Promise<void> {
-    loading.value.logs = true;
-    await Subscription.logDelete(props.mission.guid, props.token, logs.value[logidx].id);
-    await fetchLogs();
+    if (sub.value) {
+        loading.value.ids.add(logidx);
+        await Subscription.logDelete(props.mission.guid, props.token, logs.value[logidx].id);
+        sub.value.logs.splice(logidx, 1);
+        loading.value.ids.delete(logidx);
+    } else {
+        loading.value.logs = true;
+        await Subscription.logDelete(props.mission.guid, props.token, logs.value[logidx].id);
+        await fetchLogs();
+    }
 }
 
 async function submitLog() {
-    loading.value.logs = true;
+    if (sub.value) {
+        loading.value.create = true;
+        const log = await Subscription.logCreate(props.mission.guid, props.token, {
+            content: createLog.value
+        });
 
-    await Subscription.logCreate(props.mission.guid, props.token, {
-        content: createLog.value
-    });
+        sub.value.logs.push(log);
 
-    createLog.value = '';
+        loading.value.create = false;
+    } else {
+        loading.value.logs = true;
+        await Subscription.logCreate(props.mission.guid, props.token, {
+            content: createLog.value
+        });
+        await fetchLogs();
+    }
 
-    await fetchLogs();
+    createLog.value = '';
 }
 </script>
diff --git a/api/web/src/stores/base/mission.ts b/api/web/src/stores/base/mission.ts
@@ -39,16 +39,18 @@ export default class Subscription {
         return headers;
     }
 
-    static async logCreate(guid: string, token: string | undefined, body: object): Promise<void> {
+    static async logCreate(guid: string, token: string | undefined, body: object): Promise<MissionLog> {
         const url = stdurl('/api/marti/missions/' + encodeURIComponent(guid) + '/log');
 
-        await std(url, {
+        const log = await std(url, {
             method: 'POST',
             body: body,
             headers: Subscription.headers(token)
-        });
+        }) as {
+            data: MissionLog
+        };
 
-        return;
+        return log.data;
     }
 
     static async logDelete(guid: string, token: string | undefined, logid: string): Promise<void> {