@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/Menu/Mission/MissionLogs.vue

@@ -0,0 +1,194 @@
+<template>
+    <MenuTemplate
+        name='Mission Logs'
+        :zindex='0'
+        :back='false'
+        :border='false'
+        :loading='!logs'
+    >
+        <template #buttons>
+            <TablerIconButton>
+                <IconDownload
+                    :size='24'
+                    stroke='1'
+                    @click='exportLogs("csv")'
+                />
+            </TablerIconButton>
+        </template>
+        <template #default>
+            <div class='col-12 pb-2 px-2'>
+                <TablerInput
+                    v-model='paging.filter'
+                    icon='search'
+                    placeholder='Filter'
+                />
+            </div>
+
+            <TablerNone
+                v-if='!filteredLogs.length'
+                :create='false'
+                label='Logs'
+            />
+            <div
+                v-else
+                class='rows px-2 d-flex flex-column gap-3'
+            >
+                <MissionLogItem
+                    v-for='log in filteredLogs'
+                    :key='log.id'
+                    :log='log'
+                    :subscription='props.subscription'
+                />
+            </div>
+            <template v-if='props.subscription.role.permissions.includes("MISSION_WRITE")'>
+                <div
+                    class='px-2 position-relative'
+                    :aria-busy='loading.create'
+                >
+                    <div
+                        v-if='loading.create'
+                        class='position-absolute top-0 start-0 w-100 h-100 d-flex align-items-center justify-content-center bg-dark bg-opacity-75 rounded-4 z-3'
+                    >
+                        <TablerLoading
+                            desc='Creating Log'
+                            :compact='true'
+                        />
+                    </div>
+                    <TablerInput
+                        v-model='createLog.content'
+                        label='Create Log'
+                        :rows='4'
+                        @keyup.enter='submitOnEnter ? submitLog() : undefined'
+                    >
+                        <TablerDropdown>
+                            <template #default>
+                                <TablerIconButton
+                                    title='Options'
+                                >
+                                    <IconSettings
+                                        :size='24'
+                                        stroke='1'
+                                    />
+                                </TablerIconButton>
+                            </template>
+                            <template #dropdown>
+                                <TablerToggle
+                                    v-model='submitOnEnter'
+                                    label='Submit on Enter'
+                                />
+                            </template>
+                        </TablerDropdown>
+                    </TablerInput>
+
+                    <TagEntry
+                        placeholder='Keyword Entry'
+                        @tags='createLog.keywords = $event'
+                    />
+
+                    <div class='d-flex my-2'>
+                        <div class='ms-auto'>
+                            <button
+                                class='btn btn-primary'
+                                :disabled='loading.create'
+                                @click='submitLog'
+                            >
+                                Save Log
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed } from 'vue'
+import { from } from 'rxjs';
+import type { Ref, ComputedRef } from 'vue';
+import type { MissionLog } from '../../../../types.ts';
+import { std } from '../../../../std.ts';
+import TagEntry from '../../util/TagEntry.vue';
+import MissionLogItem from './MissionLog.vue';
+import {
+    TablerNone,
+    TablerInput,
+    TablerToggle,
+    TablerLoading,
+    TablerDropdown,
+    TablerIconButton,
+} from '@tak-ps/vue-tabler';
+import {
+    IconSettings,
+    IconDownload,
+} from '@tabler/icons-vue';
+import { liveQuery } from "dexie";
+import MenuTemplate from '../../util/MenuTemplate.vue';
+import Subscription from '../../../../base/subscription.ts';
+import { useObservable } from "@vueuse/rxjs";
+
+const props = defineProps<{
+    subscription: Subscription
+}>();
+
+const logs: Ref<Array<MissionLog>> = useObservable(
+    from(liveQuery(async () => {
+        return await props.subscription.log.list()
+    }))
+)
+
+const submitOnEnter = ref(true);
+const paging = ref({ filter: '' });
+
+const createLog = ref({
+    content: '',
+    keywords: []
+});
+
+const loading = ref<{
+    logs: boolean,
+    create: boolean,
+}> ({
+    logs: false,
+    create: false,
+});
+
+const filteredLogs: ComputedRef<Array<MissionLog>> = computed(() => {
+    const allLogs = logs.value || [];
+
+    if (paging.value.filter.trim() === '') {
+        return allLogs;
+    } else {
+        const filter = paging.value.filter.toLowerCase();
+
+        return allLogs.filter((log: MissionLog) => {
+            return log.content.toLowerCase().includes(filter);
+        })
+    }
+});
+
+async function exportLogs(format: string): Promise<void> {
+    await std(`/api/marti/missions/${encodeURIComponent(props.subscription.guid)}/log?download=true&format=${format}`, {
+        download: true
+    })
+}
+
+async function submitLog() {
+    if (loading.value.create || !createLog.value.content.trim()) return;
+
+    loading.value.logs = true;
+    loading.value.create = true;
+
+    try {
+        await props.subscription.log.create(
+            createLog.value
+        );
+
+        createLog.value.content = '';
+        createLog.value.keywords = [];
+    } finally {
+        loading.value.create = false;
+        loading.value.logs = false;
+    }
+}
+</script>

package/src/components/CloudTAK/Menu/Mission/MissionTimeline.vue

@@ -0,0 +1,142 @@
+<template>
+    <MenuTemplate
+        name='Mission Timeline'
+        :zindex='0'
+        :back='false'
+        :border='false'
+        :loading='loading'
+    >
+        <TablerAlert
+            v-if='error'
+            :error='error'
+        />
+        <TablerNone
+            v-else-if='!changes.length'
+            :create='false'
+        />
+        <div
+            v-else
+            class='rows'
+        >
+            <div
+                v-for='change in changes'
+                :key='change.contentUid'
+                class='col-12 hover px-2 py-1'
+            >
+                <template v-if='change.type === "CREATE_MISSION"'>
+                    <IconSquarePlus
+                        :size='24'
+                        stroke='1'
+                    />
+                    <span
+                        class='mx-2'
+                        v-text='`Mission Created: ${change.missionName}`'
+                    />
+                </template>
+                <template v-else-if='change.type === "ADD_CONTENT" && change.contentResource'>
+                    <IconFile
+                        :size='24'
+                        stroke='1'
+                    />
+                    <span
+                        class='mx-2'
+                        v-text='change.contentResource.name'
+                    />
+                </template>
+                <template v-else-if='change.type === "ADD_CONTENT" && change.details'>
+                    <IconPolygon
+                        :size='24'
+                        stroke='1'
+                    />
+                    <span
+                        class='mx-2'
+                        v-text='`${change.details.callsign} (${change.details.type})`'
+                    />
+                </template>
+                <template v-else-if='change.type === "ADD_CONTENT"'>
+                    <IconSquarePlus
+                        :size='24'
+                        stroke='1'
+                    />
+                    <span
+                        v-tooltip='change.contentUid'
+                        class='mx-2'
+                    >Content Added</span>
+                </template>
+                <template v-else-if='change.type === "REMOVE_CONTENT" && change.contentResource'>
+                    <IconFileX
+                        :size='24'
+                        stroke='1'
+                    />
+                    <span
+                        class='mx-2'
+                        v-text='change.contentResource.name'
+                    />
+                </template>
+                <template v-else-if='change.type === "REMOVE_CONTENT"'>
+                    <IconSquareX
+                        :size='24'
+                        stroke='1'
+                    />
+                    <span
+                        v-tooltip='change.contentUid'
+                        class='mx-2'
+                    >Content Removed</span>
+                </template>
+                <template v-else>
+                    <span v-text='change' />
+                </template>
+                <div class='col-12 d-flex'>
+                    <label
+                        class='subheader'
+                        v-text='change.type'
+                    />
+                    <label
+                        class='subheader ms-auto'
+                        v-text='change.timestamp'
+                    />
+                </div>
+            </div>
+        </div>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue';
+import Subscription from '../../../../base/subscription.ts';
+import type { MissionChanges } from '../../../../types.ts';
+import {
+    IconSquarePlus,
+    IconSquareX,
+    IconFileX,
+    IconFile,
+    IconPolygon,
+} from '@tabler/icons-vue';
+import {
+    TablerAlert,
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+import MenuTemplate from '../../util/MenuTemplate.vue';
+
+const props = defineProps<{
+    subscription: Subscription
+}>();
+
+const error = ref<Error | undefined>();
+const loading = ref(true);
+const changes = ref<MissionChanges["data"]>([]);
+
+onMounted(async () => {
+    await fetchChanges();
+});
+
+async function fetchChanges() {
+    loading.value = true;
+    try {
+        changes.value = (await props.subscription.changes()).data;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+    loading.value = false;
+}
+</script>

package/src/components/CloudTAK/Menu/Mission/MissionUsers.vue

@@ -0,0 +1,74 @@
+<template>
+    <MenuTemplate
+        name='Mission Subscribers'
+        :zindex='0'
+        :back='false'
+        :border='false'
+        :none='!subscriptions.length'
+        :loading='loading'
+    >
+        <div
+            v-for='sub of subscriptions'
+        >
+            <div class='col-12 py-2 px-2 d-flex hover'>
+                <div class='col-12 d-flex align-items-center'>
+                    <IconUserBolt
+                        v-if='sub.role.type === "MISSION_OWNER"'
+                        v-tooltip='sub.role.type'
+                        :size='32'
+                        stroke='1'
+                    />
+                    <IconUserEdit
+                        v-else-if='sub.role.type === "MISSION_SUBSCRIBER"'
+                        v-tooltip='sub.role.type'
+                        :size='32'
+                        stroke='1'
+                    />
+                    <IconUser
+                        v-else-if='sub.role.type === "MISSION_READONLY_SUBSCRIBER"'
+                        v-tooltip='sub.role.type'
+                        :size='32'
+                        stroke='1'
+                    />
+                    <div class='col-auto mx-2'>
+                        <div v-text='sub.username' />
+                        <div
+                            class='subheader'
+                            v-text='sub.username'
+                        />
+                    </div>
+                    <div class='col-auto ms-auto btn-list' />
+                </div>
+            </div>
+        </div>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue';
+import type { MissionSubscriptions } from '../../../../types.ts';
+import Subscription from '../../../../base/subscription.ts';
+import {
+    IconUserBolt,
+    IconUserEdit,
+    IconUser
+} from '@tabler/icons-vue';
+import MenuTemplate from '../../util/MenuTemplate.vue';
+
+const props = defineProps<{
+    subscription: Subscription
+}>();
+
+const loading = ref(false);
+const subscriptions = ref<MissionSubscriptions>([])
+
+onMounted(async () => {
+    await fetchSubscriptions();
+});
+
+async function fetchSubscriptions() {
+    loading.value = true;
+    subscriptions.value = await props.subscription.subscriptions();
+    loading.value = false;
+}
+</script>

package/src/components/CloudTAK/Menu/Mission/PendingInvites.vue

@@ -0,0 +1,130 @@
+<template>
+    <StandardItem
+        v-if='invites.length'
+        class='d-flex flex-column px-2 py-2'
+        @click='showInvites = !showInvites'
+    >
+        <div class='d-flex align-items-center gap-2'>
+            <IconMail
+                :size='24'
+                stroke='1'
+            />
+            <span class='fw-bold'>Pending Invites</span>
+            <span class='badge rounded-pill small bg-danger text-white ms-auto'>{{ invites.length }}</span>
+            <IconChevronDown
+                v-if='!showInvites'
+                :size='20'
+                stroke='1'
+                class='ms-2'
+            />
+            <IconChevronUp
+                v-else
+                :size='20'
+                stroke='1'
+                class='ms-2'
+            />
+        </div>
+
+        <transition name='menu-overlays-fade'>
+            <div
+                v-if='showInvites'
+                class='mt-2 pt-2 px-3 rounded-3 border border-white border-opacity-10 bg-black bg-opacity-25'
+                @click.stop
+            >
+                <div
+                    v-for='invite in invites'
+                    :key='invite.token'
+                    class='d-flex align-items-center justify-content-between mb-2'
+                >
+                    <span
+                        class='text-break me-2'
+                        v-text='invite.missionName'
+                    />
+                    <div class='d-flex align-items-center gap-1'>
+                        <TablerIconButton
+                            title='Delete Invite'
+                            @click='deleteInvite(invite)'
+                        >
+                            <IconTrash
+                                :size='20'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                        <button
+                            class='btn btn-success btn-sm'
+                            @click='acceptInvite(invite)'
+                        >
+                            Accept
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </transition>
+    </StandardItem>
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue';
+import {
+    IconMail,
+    IconChevronDown,
+    IconChevronUp,
+    IconTrash
+} from '@tabler/icons-vue';
+import { useRouter } from 'vue-router';
+import { TablerIconButton } from '@tak-ps/vue-tabler';
+import StandardItem from '../../util/StandardItem.vue';
+import { std, stdurl } from '../../../../std.ts';
+import type { MissionInvite } from '../../../../types.ts';
+
+const props = defineProps<{
+    invites: MissionInvite[]
+}>();
+
+const emit = defineEmits(['update:invites']);
+
+const router = useRouter();
+const showInvites = ref(false);
+
+async function acceptInvite(invite: MissionInvite) {
+    router.push({
+        path: `/menu/missions/${invite.missionGuid}`,
+        query: {
+            token: invite.token,
+            subscribe: 'true'
+        }
+    });
+}
+
+async function deleteInvite(invite: MissionInvite) {
+    const url = stdurl(`/api/marti/missions/${invite.missionGuid}/invite`);
+    url.searchParams.append('type', String(invite.type));
+    url.searchParams.append('invitee', String(invite.invitee));
+
+    await std(url, {
+        method: 'DELETE'
+    });
+
+    const newInvites = props.invites.filter(i => i !== invite);
+    emit('update:invites', newInvites);
+}
+</script>
+
+<style scoped>
+.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>

package/src/components/CloudTAK/Menu/Overlays/DeleteModal.vue

@@ -0,0 +1,57 @@
+<template>
+    <TablerModal>
+        <button
+            type='button'
+            class='btn-close'
+            aria-label='Close'
+            @click='modal = false'
+        />
+        <div class='modal-status bg-red' />
+        <div class='modal-header text-center py-4'>
+            Deletion Confirmation
+        </div>
+        <div class='modal-body text-center py-4'>
+            Are you sure you wish to perform this deletion?
+        </div>
+        <div class='modal-footer'>
+            <div
+                class='btn btn-danger'
+                @click='$emit("delete")'
+            >
+                <IconTrash
+                    :size='32'
+                    stroke='1'
+                /><span
+                    class='mx-2'
+                    v-text='label'
+                />
+            </div>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup>
+import {
+    TablerModal
+} from '@tak-ps/vue-tabler'
+import {
+    IconTrash
+} from '@tabler/icons-vue';
+
+defineProps({
+    label: {
+        type: String,
+        default: 'Delete'
+    },
+    size: {
+        type: Number,
+        default: 32
+    },
+    displaytype: {
+        type: String,
+        default: 'button'
+    }
+});
+
+defineEmits(['delete']);
+</script>