@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/util/ShareToMission.vue

@@ -0,0 +1,223 @@
+<template>
+    <TablerModal size='lg'>
+        <div class='modal-status bg-red' />
+        <button
+            type='button'
+            class='btn-close'
+            aria-label='Close'
+            @click='emit("close")'
+        />
+        <div class='modal-header text-white'>
+            <div class='d-flex align-items-center'>
+                <IconAmbulance
+                    :size='28'
+                    stroke='1'
+                />
+                <span
+                    v-if='props.action === "add"'
+                    class='mx-2'
+                >Add to Data Sync</span>
+                <span
+                    v-if='props.action === "move"'
+                    class='mx-2'
+                >Move to Data Sync</span>
+            </div>
+        </div>
+
+        <div class='modal-body text-white'>
+            <TablerLoading v-if='loading' />
+            <EmptyInfo
+                v-else-if='!missions.length'
+                type='Missions'
+            />
+            <template v-else>
+                <div
+                    class='col-12 overflow-auto'
+                    style='
+                        max-height: 20vh;
+                    '
+                >
+                    <div v-for='mission in missions'>
+                        <div
+                            class='col-12 cursor-pointer hover py-2 rounded'
+                            @click='selected.has(mission) ? selected.delete(mission) : selected.add(mission)'
+                        >
+                            <div class='d-flex align-items-center'>
+                                <div class='col-auto'>
+                                    <IconCheck
+                                        v-if='selected.has(mission)'
+                                        :size='32'
+                                        stroke='1'
+                                        style='margin-left: 16px;'
+                                    />
+                                    <IconAmbulance
+                                        v-else
+                                        :size='32'
+                                        stroke='1'
+                                        style='margin-left: 16px;'
+                                    />
+                                </div>
+                                <span
+                                    class='mx-2'
+                                    v-text='mission.name'
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+        <div class='modal-footer'>
+            <TablerButton
+                v-tooltip='"Cancel Share"'
+                @click='emit("close")'
+            >
+                Cancel
+            </TablerButton>
+
+            <div class='ms-auto'>
+                <TablerButton
+                    v-tooltip='"Share to Selected"'
+                    class='btn-primary'
+                    :disabled='selected.size === 0'
+                    @click='share'
+                >
+                    <IconShare2
+                        :size='20'
+                        stroke='1'
+                        class='me-2'
+                    />
+
+                    <span v-if='props.action === "add"'>Add to Data Sync</span>
+                    <span v-else-if='props.action === "move"'>Move to Data Sync</span>
+                </TablerButton>
+            </div>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue';
+import { OriginMode } from '../../../base/cot.ts';
+import type { PropType } from 'vue';
+import EmptyInfo from './EmptyInfo.vue';
+import { v4 as randomUUID } from 'uuid';
+import {
+    TablerModal,
+    TablerLoading,
+    TablerButton,
+} from '@tak-ps/vue-tabler';
+import {
+    IconCheck,
+    IconAmbulance,
+    IconShare2
+} from '@tabler/icons-vue';
+import type { Feature } from '../../../types.ts';
+import Subscription from '../../../base/subscription.ts';
+import { server } from '../../../std.ts';
+import { useMapStore } from '../../../stores/map.ts';
+
+const mapStore = useMapStore();
+
+const props = defineProps({
+    action: {
+        type: String,
+        default: 'add' // or "move"
+    },
+    feats: {
+        type: Array as PropType<Array<Feature>>,
+        default: () => []
+    },
+    assets: {
+        type: Array as PropType<Array<{
+            type: 'profile';
+            id: string;
+            name: string;
+        }>>,
+        default: () => []
+    },
+});
+
+const emit = defineEmits(['close', 'done']);
+
+const loading = ref(true);
+const selected = ref<Set<{
+    guid: string;
+    name: string;
+}>>(new Set());
+
+const missions = ref<Array<{
+    guid: string;
+    name: string;   
+}>>([]);
+
+onMounted(async () => {
+    missions.value = Array.from(await Subscription.localList({                                                                                                                                                                   
+        role: 'MISSION_SUBSCRIBER'                                                                                                                                                                                    
+    }))
+
+    loading.value = false;
+});
+
+async function share(): Promise<void> {
+    loading.value = true;
+
+    const feats = [];
+    for (const f of props.feats || []) {
+        if (f.properties.type === 'b-f-t-r') {
+            // FileShare is manually generated and won't exist in CoT Store
+            feats.push(f);
+        } else {
+            const feat = await mapStore.worker.db.get(f.id);
+            if (feat) feats.push(feat.as_feature());
+        }
+    }
+
+    for (let feat of feats) {
+        feat = JSON.parse(JSON.stringify(feat));
+
+        for (const mission of selected.value) {
+            await mapStore.worker.db.remove(feat.properties.id);
+
+            // Missions should never share IDs
+            const id = randomUUID();
+            feat.id = id;
+            feat.properties.uid = id;
+
+            feat.origin = {
+                mode: OriginMode.MISSION,
+                mode_id: mission.guid
+            }
+
+            await mapStore.worker.db.add(feat, {
+                authored: true
+            });
+        }
+    }
+
+    if (props.assets.length) {
+        for (const mission of selected.value) {
+            const res = await server.PUT('/api/marti/missions/{:name}/upload', {
+                params: {
+                    path: {
+                        ':name': mission.name
+                    }
+                },
+                body: {
+                    assets: props.assets
+                }
+            });
+
+            if (res.error) {
+                loading.value = false;
+                throw new Error(res.error.message);
+            }
+        }
+    }
+
+    loading.value = false;
+
+    emit('done');
+    emit('close');
+}
+</script>

package/src/components/CloudTAK/util/ShareToPackage.vue

@@ -0,0 +1,250 @@
+<template>
+    <TablerModal size='lg'>
+        <div class='modal-status bg-red' />
+        <button
+            type='button'
+            class='btn-close'
+            aria-label='Close'
+            @click='emit("close")'
+        />
+        <div class='modal-header text-white'>
+            <div class='d-flex align-items-center'>
+                <IconPackage
+                    :size='28'
+                    stroke='1'
+                />
+                <span class='mx-2'>Create Data Package</span>
+            </div>
+        </div>
+        <div class='modal-body text-white'>
+            <TablerLoading v-if='loading' />
+            <div
+                v-else
+                class='row mx-2'
+            >
+                <div class='col-12'>
+                    <TablerInput
+                        v-model='body.name'
+                        label='Name'
+                    />
+                </div>
+                <div class='col-12 pt-3'>
+                    <label class='mx-2 user-select-none'>Contents:</label>
+
+                    <div
+                        v-if='props.upload'
+                        class='mb-2'
+                    >
+                        <Upload
+                            ref='upload'
+                            :cancel='false'
+                            :url='uploadUrl'
+                            :headers='uploadHeaders()'
+                            :autoupload='false'
+                            @staged='stageUpload($event)'
+                        />
+                    </div>
+                    <div
+                        v-else-if='props.feats.length !== 0 || props.assets.length !== 0'
+                        class='col-12 overflow-auto'
+                        style='
+                            max-height: 20vh;
+                        '
+                    >
+                        <div
+                            v-for='asset of props.assets'
+                            class='d-flex align-items-center px-3 py-2'
+                        >
+                            <IconFile
+                                :size='24'
+                                stroke='1'
+                            />
+                            <span
+                                class='mx-2 user-select-none'
+                                v-text='asset.name'
+                            />
+                        </div>
+                        <FeatureRow
+                            v-for='feat of props.feats'
+                            :key='feat.id'
+                            :feature='feat'
+                            :hover='false'
+                            :delete-button='false'
+                        />
+                    </div>
+                    <TablerNone
+                        v-else
+                        :compact='true'
+                        :create='false'
+                        label='Contents'
+                    />
+                </div>
+
+                <GroupSelect
+                    v-model='body.groups'
+                    :active='true'
+                    direction='IN'
+                />
+
+                <TagEntry
+                    placeholder='Hashtags'
+                    @tags='body.keywords = $event'
+                />
+
+                <div class='col-12 pt-3'>
+                    <TablerButton
+                        class='w-100 btn-primary'
+                        :disabled='!body.groups.length && (!props.upload || uploaded)'
+                        @click='share'
+                    >
+                        Create
+                    </TablerButton>
+                </div>
+            </div>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, useTemplateRef } from 'vue';
+import type { PropType } from 'vue';
+import TagEntry from './TagEntry.vue';
+import Upload from '../../util/Upload.vue';
+import {
+    TablerNone,
+    TablerModal,
+    TablerLoading,
+    TablerButton,
+    TablerInput,
+} from '@tak-ps/vue-tabler';
+import { server, stdurl } from '../../../std.ts';
+import { useMapStore } from '../../../stores/map.ts';
+import {
+    IconFile,
+    IconPackage,
+} from '@tabler/icons-vue';
+import { useRouter } from 'vue-router';
+import FeatureRow from './FeatureRow.vue';
+import type { Feature, Content } from '../../../types.ts';
+import GroupSelect from './GroupSelect.vue';
+
+const mapStore = useMapStore();
+const router = useRouter();
+
+const props = defineProps({
+    name: {
+        type: String,
+        default: ''
+    },
+    upload: {
+        type: Boolean,
+        default: false
+    },
+    assets: {
+        type: Array as PropType<Array<{
+            type: 'profile';
+            id: number | string;
+            name: string;
+        }>>,
+        default: () => []
+    },
+    feats: {
+        type: Array as PropType<Array<Feature>>,
+        default: () => []
+    },
+});
+
+const emit = defineEmits(['close', 'done']);
+
+const loading = ref(false);
+
+const uploaded = ref<boolean>(false);
+
+const uploadRef = useTemplateRef<typeof Upload>('upload');
+
+const body = ref({
+    name: props.name,
+    keywords: [],
+    groups: []
+})
+
+const uploadUrl = computed(() => {
+    const url = stdurl('/api/marti/package');
+    url.searchParams.set('name', body.value.name);
+    for (const g of body.value.groups) {
+        url.searchParams.append('groups', g);
+    }
+
+    for (const k of body.value.keywords) {
+        url.searchParams.append('keywords', k);
+    }
+
+    return url;
+});
+
+function stageUpload(file: { name: string }) {
+    body.value.name = body.value.name || file.name;
+    uploaded.value = true;
+}
+
+function uploadHeaders() {
+    return {
+        Authorization: `Bearer ${localStorage.token}`
+    };
+}
+
+async function share() {
+    const feats = [];
+
+    for (const f of props.feats || []) {
+        if (f.properties.type === 'b-f-t-r') {
+            // FileShare is manually generated and won't exist in CoT Store
+            return f;
+        } else {
+            const feat = await mapStore.worker.db.get(f.properties.id || f.id, {
+                mission: true
+            });
+            console.error(feat);
+            if (feat) feats.push(feat.as_feature());
+        }
+    }
+
+    loading.value = true;
+
+    if (props.upload && uploadRef.value) {
+        const res = await uploadRef.value.upload() as Content;
+
+        router.push(`/menu/packages/${res.UID}`);
+
+        emit('done');
+    } else {
+        try {
+            const res = await server.PUT('/api/marti/package', {
+                body: {
+                    type: 'FeatureCollection',
+                    name: body.value.name,
+                    public: true,
+                    groups: body.value.groups,
+                    keywords: body.value.keywords,
+                    assets: props.assets.map((a) => ({ type: a.type, id: String(a.id) })),
+                    basemaps: [],
+                    destinations: [],
+                    features: feats.map((f) => {
+                        f = JSON.parse(JSON.stringify(f));
+                        return { id: f.properties.id || f.id, type: f.type, properties: f.properties, geometry: f.geometry }
+                    })
+                }
+            });
+
+            if (res.error) throw new Error(res.error.message);
+
+            emit('done');
+
+            router.push(`/menu/packages/${res.data.UID}`);
+        } catch (err) {
+            loading.value = false;
+            throw err;
+        }
+    }
+}
+</script>

package/src/components/CloudTAK/util/SlideDownHeader.vue

@@ -0,0 +1,92 @@
+<template>
+    <div
+        class='d-flex align-items-center cursor-pointer user-select-none py-2 px-2 rounded transition-all mx-2'
+        :class='{ "bg-accent": expanded, "hover": !expanded }'
+        @click='toggle'
+    >
+        <slot name='icon' />
+        <label class='subheader cursor-pointer m-0'>{{ label }}</label>
+
+        <div class='ms-auto d-flex align-items-center'>
+            <slot name='right' />
+            <IconChevronDown
+                class='transition-transform'
+                :class='{ "rotate-180": !expanded }'
+                :size='18'
+            />
+        </div>
+    </div>
+
+    <div
+        class='grid-transition'
+        :class='{ expanded: expanded }'
+    >
+        <div :style='{ overflow: overflow }'>
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue';
+import { IconChevronDown } from '@tabler/icons-vue';
+
+const props = defineProps({
+    modelValue: {
+        type: Boolean,
+        default: false
+    },
+    label: {
+        type: String,
+        required: true
+    }
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const expanded = ref(props.modelValue);
+
+watch(() => props.modelValue, (val) => {
+    expanded.value = val;
+});
+
+const overflow = ref('hidden');
+let timeout: ReturnType<typeof setTimeout> | undefined;
+
+watch(expanded, (val) => {
+    if (timeout) clearTimeout(timeout);
+
+    if (val) {
+        timeout = setTimeout(() => {
+            overflow.value = 'visible';
+        }, 300);
+    } else {
+        overflow.value = 'hidden';
+    }
+});
+
+function toggle() {
+    expanded.value = !expanded.value;
+    emit('update:modelValue', expanded.value);
+}
+</script>
+
+<style scoped>
+.grid-transition {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.3s ease-out;
+}
+
+.grid-transition.expanded {
+    grid-template-rows: 1fr;
+}
+
+.rotate-180 {
+    transform: rotate(-90deg);
+}
+
+.transition-transform {
+    transition: transform 0.3s ease-out;
+}
+</style>

package/src/components/CloudTAK/util/StandardItem.vue

@@ -0,0 +1,42 @@
+<template>
+    <div
+        class='standard-item text-white position-relative'
+        :class='{ "standard-item--hover": hover }'
+        :tabindex='hover ? 0 : undefined'
+        :role='hover ? "menuitem" : undefined'
+        @keydown.enter.prevent='hover ? $el.click() : undefined'
+        @keydown.space.prevent='hover ? $el.click() : undefined'
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+    hover?: boolean;
+}>(), {
+    hover: true,
+});
+</script>
+
+<style scoped>
+.standard-item {
+    border: 1px solid rgba(255, 255, 255, 0.18);
+    border-radius: 14px;
+    background-color: rgba(0, 0, 0, 0.35);
+    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.standard-item--hover:hover,
+.standard-item--hover:focus-within {
+    transform: translateY(-1px);
+    border-color: rgba(255, 255, 255, 0.4);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+    cursor: pointer;
+    z-index: 1;
+}
+
+.standard-item--hover:focus-within {
+    z-index: 2;
+}
+</style>