@tak-ps/cloudtak 12.54.0

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

@@ -0,0 +1,331 @@
+<template>
+    <MenuTemplate
+        name='Mission Info'
+        :zindex='0'
+        :back='false'
+        :border='false'
+    >
+        <div class='container-fluid px-2 px-sm-3'>
+            <div class='row gy-3 gx-0 gx-lg-3'>
+                <div class='col-12'>
+                    <div class='card h-100 bg-dark text-white border border-light-subtle shadow-sm'>
+                        <div class='card-body d-flex flex-column gap-4'>
+                            <div class='d-flex align-items-center gap-3'>
+                                <div class='rounded-circle bg-primary-subtle text-primary-emphasis p-1 d-flex align-items-center justify-content-center'>
+                                    <IconBroadcast
+                                        :size='32'
+                                        stroke='1'
+                                    />
+                                </div>
+                                <div class='flex-grow-1'>
+                                    <p class='text-uppercase text-white-50 small mb-1'>
+                                        Mission
+                                    </p>
+                                    <h2
+                                        class='h4 mb-0 text-truncate'
+                                        style='max-width: calc(100% - 48px);'
+                                        v-text='props.subscription.name'
+                                    />
+                                </div>
+                            </div>
+
+                            <div class='row gy-3 gx-0 gx-sm-3'>
+                                <div class='col-12 col-lg-6'>
+                                    <small class='text-uppercase text-white-50 d-block'>Created</small>
+                                    <p class='text-white fw-semibold p-0 mb-0'>
+                                        {{ props.subscription.meta.createTime.replace(/T/, " ").replace(/:[0-9]+\..*/, "") + " UTC" }}
+                                    </p>
+                                </div>
+                                <div class='col-12 col-lg-6'>
+                                    <small class='text-uppercase text-white-50 d-block'>Subscribers</small>
+                                    <TablerLoading
+                                        v-if='loading.users'
+                                        :inline='true'
+                                    />
+                                    <p
+                                        v-else
+                                        class='text-white fw-semibold p-0 mb-0'
+                                        v-text='subscriptions.length + " Users"'
+                                    />
+                                </div>
+                                <div class='col-12'>
+                                    <small class='text-uppercase text-white-50 d-block mb-1'>Contents</small>
+                                    <p
+                                        class='text-white fw-semibold mb-0'
+                                        v-text='(Array.isArray(props.subscription.meta.contents) ? props.subscription.meta.contents.length : 0) + " Files"'
+                                    />
+                                </div>
+                                <div class='col-12'>
+                                    <small class='text-uppercase text-white-50 d-block mb-1'>Groups (Channels)</small>
+                                    <div
+                                        v-if='props.subscription.meta.groups && props.subscription.meta.groups.length'
+                                        class='d-flex flex-wrap gap-2'
+                                    >
+                                        <span
+                                            v-for='group of props.subscription.meta.groups'
+                                            :key='group'
+                                            class='badge rounded-pill text-bg-secondary text-uppercase fw-semibold'
+                                            v-text='group'
+                                        />
+                                    </div>
+                                    <p
+                                        v-else
+                                        class='text-white-50 mb-0'
+                                    >
+                                        None
+                                    </p>
+                                </div>
+                                <div class='col-12'>
+                                    <small class='text-uppercase text-white-50 d-block mb-2'>Keywords</small>
+                                    <Keywords :keywords='props.subscription.meta.keywords' />
+                                    <p
+                                        v-if='!props.subscription.meta.keywords.length'
+                                        class='text-white-50 mb-0'
+                                    >
+                                        None
+                                    </p>
+                                </div>
+                                <div class='col-12'>
+                                    <small class='text-uppercase text-white-50 d-block mb-1'>Description</small>
+                                    <CopyField
+                                        :model-value='props.subscription.meta.description'
+                                        :edit='props.subscription.subscribed && props.subscription.role.permissions.includes("MISSION_WRITE")'
+                                        :rows='5'
+                                        @submit='updateDescription($event)'
+                                    >
+                                        <span
+                                            v-if='!props.subscription.meta.description'
+                                            class='text-white-50 fst-italic'
+                                        >No Feed Description</span>
+                                    </CopyField>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class='col-12'>
+                    <div class='card h-100 bg-dark text-white border border-light-subtle shadow-sm'>
+                        <div class='card-body d-flex flex-column gap-3'>
+                            <p class='text-uppercase text-white-50 small mb-1'>
+                                Quick Actions
+                            </p>
+
+                            <TablerLoading
+                                v-if='loading.subscribe'
+                                :inline='true'
+                                desc='Updating Subscription...'
+                            />
+                            <template v-else>
+                                <button
+                                    v-if='props.subscription.subscribed === false'
+                                    class='btn btn-success w-100 d-flex align-items-center justify-content-center gap-2'
+                                    @click='subscribe(true)'
+                                >
+                                    <IconPlus
+                                        :size='20'
+                                        stroke='1'
+                                    />
+                                    <span>Subscribe</span>
+                                </button>
+                                <template v-else>
+                                    <button
+                                        class='btn btn-danger w-100 d-flex align-items-center justify-content-center gap-2'
+                                        @click='subscribe(false)'
+                                    >
+                                        <IconMinus
+                                            :size='20'
+                                            stroke='1'
+                                        />
+                                        <span>Unsubscribe</span>
+                                    </button>
+
+                                    <button
+                                        v-if='!mapStore.mission || mapStore.mission.meta.guid !== props.subscription.meta.guid'
+                                        :disabled='!props.subscription.role.permissions.includes("MISSION_WRITE")'
+                                        class='btn btn-success w-100 d-flex align-items-center justify-content-center gap-2'
+                                        @click='mapStore.makeActiveMission(props.subscription)'
+                                    >
+                                        <IconCheck
+                                            :size='20'
+                                            stroke='1'
+                                        />
+                                        <span>Make Active</span>
+                                    </button>
+                                    <button
+                                        v-else
+                                        class='btn btn-secondary w-100 d-flex align-items-center justify-content-center gap-2'
+                                        :disabled='!props.subscription.role.permissions.includes("MISSION_WRITE")'
+                                        @click='mapStore.makeActiveMission()'
+                                    >
+                                        <IconX
+                                            :size='20'
+                                            stroke='1'
+                                        />
+                                        <span>Deactivate</span>
+                                    </button>
+                                </template>
+                            </template>
+
+                            <button
+                                class='btn btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2'
+                                @click='showQR = true'
+                            >
+                                <IconQrcode
+                                    :size='20'
+                                    stroke='1'
+                                />
+                                <span>Invite QR Code</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </MenuTemplate>
+
+    <TablerModal
+        v-if='showQR'
+        size='lg'
+    >
+        <div class='modal-status bg-red' />
+        <button
+            type='button'
+            class='btn-close'
+            aria-label='Close'
+            @click='showQR = false'
+        />
+        <div class='modal-header text-white'>
+            <div class='d-flex align-items-center'>
+                <IconQrcode
+                    :size='28'
+                    stroke='1'
+                />
+                <span
+                    class='mx-2'
+                    v-text='props.subscription.meta.name + " Invite QR"'
+                />
+            </div>
+        </div>
+        <div class='modal-body'>
+            <div class='col-12'>
+                <img
+                    :src='missionQRURL'
+                    style='
+                        filter: invert(100%);
+                    '
+                >
+            </div>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, computed } from 'vue';
+import type { MissionSubscriptions } from '../../../../types.ts';
+import { useRoute, useRouter } from 'vue-router';
+import { stdurl } from '../../../../std.ts'
+import Subscription from '../../../../base/subscription.ts';
+import Keywords from '../../util/Keywords.vue';
+import CopyField from '../../util/CopyField.vue';
+import {
+    IconQrcode,
+    IconBroadcast,
+    IconPlus,
+    IconMinus,
+    IconCheck,
+    IconX
+} from '@tabler/icons-vue';
+import {
+    TablerLoading,
+    TablerModal,
+} from '@tak-ps/vue-tabler';
+import MenuTemplate from '../../util/MenuTemplate.vue';
+import Overlay from '../../../../base/overlay.ts';
+import { useMapStore } from '../../../../stores/map.ts';
+const mapStore = useMapStore();
+
+const emit = defineEmits(['refresh']);
+
+const props = defineProps<{
+    subscription: Subscription
+}>();
+
+const missionQRURL = computed(() => {
+    return String(stdurl(`/api/marti/missions/${props.subscription.guid}/qr?token=${localStorage.token}`));
+});
+
+const showQR = ref(false);
+const route = useRoute();
+const router = useRouter();
+
+const subscriptions = ref<MissionSubscriptions>([])
+
+onMounted(async () => {
+    loading.value.users = true;
+    await fetchSubscriptions();
+    loading.value.users = false;
+
+    if (route.query.subscribe === 'true') {
+        await subscribe(true);
+        router.replace({
+            query: {
+                ...route.query,
+                subscribe: undefined
+            }
+        });
+    }
+});
+
+const loading = ref({
+    users: false,
+    subscribe: false,
+});
+
+async function fetchSubscriptions() {
+    loading.value.users = true;
+    subscriptions.value = await props.subscription.subscriptions();
+    loading.value.users = false;
+}
+
+async function updateDescription(description: string) {
+    try {
+        await props.subscription.update({ description });
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+async function subscribe(subscribe: boolean) {
+    loading.value.subscribe = true;
+    const overlay = mapStore.getOverlayByMode('mission', props.subscription.guid);
+
+    if (subscribe === true && !overlay) {
+        const missionOverlay = await Overlay.create({
+            name: props.subscription.name,
+            url: `/mission/${encodeURIComponent(props.subscription.guid)}`,
+            type: 'geojson',
+            mode: 'mission',
+            token: props.subscription.missiontoken,
+            mode_id: props.subscription.guid,
+        })
+
+        mapStore.overlays.push(missionOverlay);
+        await mapStore.loadMission(props.subscription.guid);
+
+        emit('refresh');
+    } else if (subscribe === false && overlay) {
+        if (mapStore.mission && mapStore.mission.meta.guid === props.subscription.meta.guid) {
+            mapStore.makeActiveMission();
+        }
+
+        await mapStore.removeOverlay(overlay);
+
+        emit('refresh');
+    }
+
+    await props.subscription.update({ subscribed: subscribe });
+
+    loading.value.subscribe = false;
+}
+</script>

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

@@ -0,0 +1,107 @@
+<template>
+    <TablerModal>
+        <div class='modal-status bg-blue' />
+        <div class='modal-body text-center py-4'>
+            <IconMail
+                :size='68'
+                class='text-blue mb-2'
+                stroke='1'
+            />
+            <h3>Mission Invitation</h3>
+            <div class='text-secondary'>
+                You have been invited to join the mission:
+                <br>
+                <strong class='text-white'>{{ props.mission.name }}</strong>
+            </div>
+        </div>
+        <div class='modal-footer'>
+            <div class='w-100'>
+                <div class='row'>
+                    <div class='col'>
+                        <button
+                            class='btn w-100'
+                            @click='ignore'
+                        >
+                            Ignore
+                        </button>
+                    </div>
+                    <div class='col'>
+                        <button
+                            class='btn btn-danger w-100'
+                            @click='decline'
+                        >
+                            Delete
+                        </button>
+                    </div>
+                    <div class='col'>
+                        <button
+                            class='btn btn-success w-100'
+                            @click='accept'
+                        >
+                            Accept
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup lang="ts">
+import { TablerModal } from '@tak-ps/vue-tabler';
+import { IconMail } from '@tabler/icons-vue';
+import { useRouter } from 'vue-router';
+import { std, stdurl } from '../../../../std.ts';
+import Subscription from '../../../../base/subscription.ts';
+
+const props = defineProps<{
+    mission: {
+        name: string;
+        guid: string;
+        token: string;
+        authorUid: string;
+        tool: string;
+        type: string;
+    }
+}>();
+
+const emit = defineEmits(['close']);
+const router = useRouter();
+
+function ignore() {
+    emit('close');
+}
+
+function accept() {
+    emit('close');
+    router.push({
+        path: `/menu/missions/${props.mission.guid}`,
+        query: {
+            token: props.mission.token,
+            subscribe: 'true'
+        }
+    });
+}
+
+async function decline() {
+    try {
+        // Fetch invites to find the invitee and type
+        const res = await Subscription.list();
+        const invite = res.invites.find(i => i.missionGuid === props.mission.guid);
+
+        if (invite) {
+             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'
+            });
+        }
+    } catch (err) {
+        console.error('Failed to decline invite', err);
+    }
+    emit('close');
+}
+
+</script>

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

@@ -0,0 +1,77 @@
+<template>
+    <div class='col-12 border rounded py-2 px-2'>
+        <TablerAlert
+            v-if='error'
+            :err='error'
+        />
+        <TablerLoading v-else-if='loading.layer' />
+        <template v-else>
+            <div class='modal-body'>
+                <TablerInput
+                    v-model='layer.name'
+                    label='Folder Name'
+                    :autofocus='true'
+                    @keyup.enter='createLayer'
+                />
+
+                <div class='col-12 pt-2 d-flex'>
+                    <button
+                        class='btn btn-secondary'
+                        @click='emit("cancel")'
+                    >
+                        Cancel
+                    </button>
+                    <div class='ms-auto'>
+                        <button
+                            class='btn btn-primary'
+                            @click='createLayer'
+                        >
+                            Create
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue';
+import {
+    TablerAlert,
+    TablerInput,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import Subscription from '../../../../base/subscription.ts';
+import type { MissionLayer_Create } from '../../../../types.ts';
+
+const emit = defineEmits(['layer', 'cancel']);
+
+const props = defineProps<{
+    subscription: Subscription
+}>();
+
+const error = ref<Error | undefined>();
+const loading = ref({
+    layer: false,
+});
+
+const layer = ref<MissionLayer_Create>({
+    name: '',
+    type: 'GROUP'
+});
+
+async function createLayer() {
+    try {
+        loading.value.layer = true;
+
+        const res = await props.subscription.layerCreate(layer.value);
+
+        emit('layer', res);
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value.layer = false;
+}
+</script>

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

@@ -0,0 +1,77 @@
+<template>
+    <div class='col-12 border rounded my-2'>
+        <TablerAlert
+            v-if='error'
+            :err='error'
+        />
+        <TablerLoading v-else-if='loading.layer' />
+        <template v-else>
+            <div class='modal-body mx-2'>
+                <TablerInput
+                    v-model='editing.name'
+                    label='Name'
+                    @keyup.enter='editLayer'
+                />
+
+                <div class='col-12 d-flex py-3'>
+                    <button
+                        class='btn btn-secondary'
+                        @click='emit("cancel")'
+                    >
+                        Cancel
+                    </button>
+                    <div class='ms-auto'>
+                        <button
+                            class='btn btn-primary'
+                            @click='editLayer'
+                        >
+                            Save
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue'
+import {
+    TablerAlert,
+    TablerInput,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import Subscription from '../../../../base/subscription.ts';
+import type { MissionLayer } from '../../../../types.ts';
+
+const emit = defineEmits(['layer', 'cancel']);
+const props = defineProps<{
+    subscription: Subscription,
+    layer: MissionLayer,
+}>();
+
+const error = ref<Error | undefined>();
+const loading = ref({
+    layer: false,
+});
+const editing = ref<MissionLayer>(JSON.parse(JSON.stringify(props.layer)) as MissionLayer)
+
+async function editLayer() {
+    try {
+        loading.value.layer = true;
+
+        await props.subscription.layerUpdate(props.subscription.guid, props.layer.uid, {
+            name: editing.value.name
+        });
+
+        emit('layer', {
+            ...props.layer,
+            name: editing.value.name,
+        });
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value.layer = false;
+}
+</script>