@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,223 +0,0 @@
-<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

@@ -1,250 +0,0 @@
-<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

@@ -1,92 +0,0 @@
-<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

@@ -1,42 +0,0 @@
-<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>