@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,496 +0,0 @@
-<template>
-    <TablerModal
-        size='lg'
-    >
-        <div class='modal-status bg-yellow' />
-        <div class='modal-header'>
-            <span class='modal-title'>Share Features</span>
-            <div class='ms-auto btn-list'>
-                <div class='d-flex align-items-center'>
-                    <IconUsers
-                        :size='20'
-                        stroke='1'
-                    /><span class='mx-2'>{{ selectedUsers.size }}</span>
-                </div>
-                <div class='d-flex align-items-center'>
-                    <IconAffiliate
-                        :size='20'
-                        stroke='1'
-                    /><span class='mx-2'>{{ selectedGroups.size }}</span>
-                </div>
-                <div class='d-flex align-items-center'>
-                    <IconAmbulance
-                        :size='20'
-                        stroke='1'
-                    /><span class='mx-2'>{{ selectedMissions.size }}</span>
-                </div>
-            </div>
-
-            <button
-                type='button'
-                class='btn-close'
-                aria-label='Close'
-                @click='emit("close")'
-            />
-        </div>
-        <div
-            class='modal-body'
-        >
-            <div class='mx-2'>
-                <TablerInput
-                    v-model='filter'
-                    icon='search'
-                    label=''
-                    placeholder='Filter...'
-                />
-            </div>
-            <div
-                class='px-2 py-2 round btn-group w-100'
-                role='group'
-            >
-                <input
-                    id='mode-users'
-                    type='radio'
-                    class='btn-check'
-                    autocomplete='off'
-                    :checked='mode === "users"'
-                    :disabled='loading'
-                    @click='mode = "users"'
-                >
-                <label
-                    for='mode-users'
-                    type='button'
-                    class='btn btn-sm'
-                ><IconUsers
-                    v-tooltip='"Users"'
-                    :size='24'
-                    stroke='1'
-                /> <span class='ms-2'>Users</span></label>
-
-                <input
-                    id='mode-groups'
-                    type='radio'
-                    class='btn-check'
-                    autocomplete='off'
-                    :checked='mode === "groups"'
-                    :disabled='loading'
-                    @click='mode = "groups"'
-                >
-                <label
-                    for='mode-groups'
-                    type='button'
-                    class='btn btn-sm'
-                ><IconAffiliate
-                    v-tooltip='"Channels"'
-                    :size='24'
-                    stroke='1'
-                /> <span class='ms-2'>Channels</span></label>
-                <input
-                    id='mode-missions'
-                    type='radio'
-                    class='btn-check'
-                    autocomplete='off'
-                    :checked='mode === "missions"'
-                    :disabled='loading'
-                    @click='mode = "missions"'
-                >
-                <label
-                    for='mode-missions'
-                    type='button'
-                    class='btn btn-sm'
-                ><IconAmbulance
-                    v-tooltip='"Data Syncs"'
-                    :size='24'
-                    stroke='1'
-                /> <span class='ms-2'>Data Syncs</span></label>
-            </div>
-
-            <div
-                class='col-12 overflow-auto'
-                style='height: 50vh;'
-            >
-                <template v-if='mode === "users"'>
-                    <TablerLoading
-                        v-if='loading'
-                    />
-                    <TablerNone
-                        v-else-if='!visibleContacts.length'
-                        :create='false'
-                    />
-                    <template v-else>
-                        <COTContact
-                            v-for='a of visibleContacts'
-                            :key='a.uid'
-                            :contact='a'
-                            :button-chat='false'
-                            :button-zoom='false'
-                            :selected='selectedUsers.has(a)'
-                            class='rounded'
-                            @click='selectedUsers.has(a) ? selectedUsers.delete(a) : selectedUsers.add(a)'
-                        />
-                    </template>
-                </template>
-                <template v-else-if='mode === "groups"'>
-                    <TablerLoading
-                        v-if='loading'
-                    />
-                    <TablerNone
-                        v-else-if='!Object.keys(visibleChannels).length'
-                        :create='false'
-                    />
-                    <template v-else>
-                        <div
-                            v-for='ch in visibleChannels'
-                            :key='ch.name'
-                            class='col-lg-12 py-2 px-2 hover rounded cursor-pointer user-select-none'
-                            @click='selectedGroups.has(ch) ? selectedGroups.delete(ch) : selectedGroups.add(ch)'
-                        >
-                            <IconAffiliate
-                                v-if='!selectedGroups.has(ch)'
-                                :size='24'
-                                stroke='1'
-                            />
-                            <IconCheck
-                                v-else
-                                :size='24'
-                                stroke='1'
-                            />
-                            <span
-                                class='mx-2'
-                                v-text='ch.name'
-                            />
-                        </div>
-                    </template>
-                </template>
-                <template v-else-if='mode === "missions"'>
-                    <TablerLoading
-                        v-if='loading'
-                    />
-                    <TablerNone
-                        v-else-if='!Object.keys(visibleChannels).length'
-                        :create='false'
-                    />
-                    <template v-else>
-                        <div
-                            v-for='m in visibleMissions'
-                            :key='m.name'
-                            class='col-lg-12 py-2 px-2 hover rounded cursor-pointer user-select-none'
-                            @click='selectedMissions.has(m) ? selectedMissions.delete(m) : selectedMissions.add(m)'
-                        >
-                            <IconAmbulance
-                                v-if='!selectedMissions.has(m)'
-                                :size='24'
-                                stroke='1'
-                            />
-                            <IconCheck
-                                v-else
-                                :size='24'
-                                stroke='1'
-                            />
-                            <span
-                                class='mx-2'
-                                v-text='m.name'
-                            />
-                        </div>
-                    </template>
-                </template>
-            </div>
-        </div>
-        <div class='modal-footer'>
-            <div class='row g-2 w-100'>
-                <div
-                    class='col-6'
-                >
-                    <TablerButton
-                        v-tooltip='"Share to Selected"'
-                        :disabled='(selectedUsers.size === 0 && selectedGroups.size === 0 && selectedMissions.size === 0) || loading'
-                        class='w-100 btn-primary'
-                        @click='share'
-                    >
-                        <IconShare2
-                            :size='20'
-                            stroke='1'
-                            class='me-1'
-                        />
-                        <span>Share</span>
-                    </TablerButton>
-                </div>
-                <div class='col-6'>
-                    <TablerButton
-                        v-tooltip='"Broadcast to All Users"'
-                        :disabled='loading'
-                        class='w-100 btn-secondary'
-                        @click='broadcast'
-                    >
-                        <IconBroadcast
-                            :size='20'
-                            stroke='1'
-                            class='me-1'
-                        />
-                        <span>Broadcast To All Users</span>
-                    </TablerButton>
-                </div>
-            </div>
-        </div>
-    </TablerModal>
-</template>
-
-<script setup lang='ts'>
-import { ref, computed, watch, onMounted, onBeforeUnmount } from 'vue';
-import { OriginMode } from '../../../base/cot.ts';
-import { v4 as randomUUID } from 'uuid';
-import { std, stdurl } from '../../../std.ts';
-import {
-    TablerNone,
-    TablerInput,
-    TablerModal,
-    TablerLoading,
-    TablerButton,
-} from '@tak-ps/vue-tabler';
-import {
-    IconUsers,
-    IconCheck,
-    IconBroadcast,
-    IconAffiliate,
-    IconAmbulance,
-    IconShare2
-} from '@tabler/icons-vue';
-import Subscription from '../../../base/subscription.ts';
-import type { Contact, ContactList, Feature, Group } from '../../../types.ts'
-import type { WorkerMessage } from '../../../base/events.ts';
-import COTContact from '../util/Contact.vue';
-import { useMapStore } from '../../../stores/map.ts';
-import { WorkerMessageType } from '../../../base/events.ts';
-
-const mapStore = useMapStore();
-
-const props = defineProps<{
-    feats?: Feature[]
-    basemaps?: number[],
-}>();
-
-const emit = defineEmits([
-    'close',
-    'done'
-]);
-
-const loading = ref(true);
-const filter = ref('');
-const mode = ref('users');
-
-const selectedGroups = ref<Set<Group>>(new Set())
-const selectedMissions = ref<Set<{
-    name: string
-    guid: string
-}>>(new Set())
-const selectedUsers = ref<Set<Contact>>(new Set())
-
-const contacts = ref<ContactList>([]);
-const channels = ref<Array<Group>>([]);
-const missions = ref<Array<{
-    name: string
-    guid: string
-}>>([]);
-
-const visibleChannels = computed<Array<Group>>(() => {
-    return channels.value.filter((channel) => {
-        return channel.name.toLowerCase().includes(filter.value.toLowerCase());
-    });
-});
-
-const visibleMissions = computed<Array<{
-    name: string
-    guid: string
-}>>(() => {
-    return missions.value.filter((mission) => {
-        return mission.name.toLowerCase().includes(filter.value.toLowerCase());
-    });
-});
-
-const visibleContacts = computed<ContactList>(() => {
-    return contacts.value.filter((contact) => {
-        return contact.callsign;
-    }).filter((contact) => {
-        return contact.callsign.toLowerCase().includes(filter.value.toLowerCase());
-    })
-});
-
-const channel = new BroadcastChannel("cloudtak");
-
-channel.onmessage = async (event: MessageEvent<WorkerMessage>) => {
-    const msg = event.data;
-    if (!msg || !msg.type) return;
-
-    if (msg.type === WorkerMessageType.Contact_Change) {
-        await fetchUserList();
-    }
-}
-
-onMounted(async () => {
-    await fetchUserList();
-    await fetchChannelList();
-    await fetchMissions();
-});
-
-onBeforeUnmount(() => {
-    if (channel) {
-        channel.close();
-    }
-});
-
-watch(mode, () => {
-    filter.value = '';
-});
-
-/** Feats often come from Vector Tiles which don't contain the full feature */
-async function currentFeats(): Promise<Feature[]> {
-    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 cot = await mapStore.worker.db.get(f.properties.id || f.id)
-            if (cot) feats.push(cot.as_feature());
-        }
-    }
-
-    return feats;
-}
-
-async function share() {
-    const feats = await currentFeats();
-
-    loading.value = true;
-
-    // CoTs with Attachments must always be send via a DataPackage
-    if (
-        feats.length === 1
-        && !props.basemaps
-        && (!feats[0].properties.attachments || feats[0].properties.attachments.length === 0)
-    ) {
-        if (selectedUsers.value.size > 0 || selectedGroups.value.size > 0) {
-            const feat = JSON.parse(JSON.stringify(feats[0]));
-            feat.properties.dest = [];
-
-            for (const contact of selectedUsers.value) {
-                feat.properties.dest.push({ uid: contact.uid });
-            }
-
-            for (const group of selectedGroups.value) {
-                feat.properties.dest.push({ group: group.name });
-            }
-
-            if (feat.properties.dest.length > 0) {
-                await mapStore.worker.conn.sendCOT(feat);
-            }
-        }
-
-        if (selectedMissions.value.size > 0) {
-            for (const mission of selectedMissions.value) {
-                const feat = JSON.parse(JSON.stringify(feats[0]));
-
-                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
-                });
-            }
-        }
-    } else {
-        const destinations: Array<{ uid?: string, group?: string, mission?: string }> = [
-            ...Array.from(selectedUsers.value).map((contact): { uid: string } => ({ uid: contact.uid })),
-            ...Array.from(selectedGroups.value).map((group): { group: string } => ({ group: group.name })),
-            ...Array.from(selectedMissions.value).map((mission): { mission: string } => ({ mission: mission.guid })),
-        ];
-
-        await std('/api/marti/package', {
-            method: 'PUT',
-            body: {
-                type: 'FeatureCollection',
-                destinations,
-                basemaps: props.basemaps || [],
-                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 }
-                })
-            }
-        });
-    }
-
-    loading.value = false;
-
-    emit('done');
-}
-
-async function broadcast() {
-    const feats = await currentFeats();
-
-    if (
-        feats.length === 1
-        && !props.basemaps
-        && (!feats[0].properties.attachments || feats[0].properties.attachments.length === 0)
-    ) {
-        await mapStore.worker.conn.sendCOT(JSON.parse(JSON.stringify(feats[0])));
-        emit('done');
-    } else {
-        await std('/api/marti/package', {
-            method: 'PUT',
-            body: {
-                type: 'FeatureCollection',
-                basemaps: props.basemaps || [],
-                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
-                    }
-                })
-            }
-        });
-    }
-}
-
-async function fetchChannelList() {
-    loading.value = true;
-
-    channels.value = (await mapStore.worker.profile.loadChannels()).filter((channel) => {
-        if (!channel.active) return false;
-        if (channel.direction !== 'IN') return false;
-        return true;
-    });
-
-    loading.value = false;
-}
-
-async function fetchMissions() {
-    loading.value = true;
-
-    missions.value = Array.from(await Subscription.localList({
-        role: 'MISSION_SUBSCRIBER'
-    }))
-
-    loading.value = false;
-}
-
-async function fetchUserList() {
-    loading.value = true;
-    const url = stdurl('/api/marti/api/contacts/all');
-    contacts.value = await std(url) as ContactList;
-    loading.value = false;
-}
-</script>