@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,314 +0,0 @@
-<template>
-    <div
-        class='text-white bg-dark rounded position-relative'
-    >
-        <TablerInput
-            ref='searchBoxRef'
-            v-model='query.filter'
-            :label='props.label'
-            :autofocus='props.autofocus'
-            class='mt-0'
-            :placeholder='props.placeholder'
-            icon='search'
-            @focus='selected = false'
-        />
-
-        <div
-            class='dropdown-menu w-100 mt-2 p-2'
-            :class='{
-                "show": shown,
-            }'
-        >
-            <TablerNone
-                v-if='!partialLoading && !cots.size && !results.length'
-                :create='false'
-            />
-            <template v-else>
-                <Feature
-                    v-for='cot of cots'
-                    :key='cot.id'
-                    :delete-button='false'
-                    :feature='cot'
-                    @click='selectFeature(cot)'
-                />
-                <StandardItem
-                    v-for='item of results'
-                    :key='item.magicKey'
-                    class='d-flex flex-row gap-3 mb-2 align-items-center'
-                    @click='fetchSearch(item.text, item.magicKey)'
-                >
-                    <div class='icon-wrapper ms-2 d-flex align-items-center justify-content-center rounded-circle'>
-                        <IconMapPin
-                            :size='24'
-                            stroke='1'
-                        />
-                    </div>
-
-                    <div
-                        class='flex-grow-1 d-flex flex-column gap-1 py-2'
-                        style='min-width: 0'
-                    >
-                        <div class='d-flex align-items-center gap-2'>
-                            <span
-                                class='fw-semibold text-truncate'
-                                v-text='item.text'
-                            />
-                        </div>
-                    </div>
-                </StandardItem>
-
-                <TablerLoading
-                    v-if='partialLoading'
-                    :compact='true'
-                />
-            </template>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import type { SearchForward, SearchSuggest } from '../../../types.ts';
-import { convert } from 'geo-coordinates-parser'
-import { v4 as randomUUID } from 'uuid';
-import Feature from './FeatureRow.vue';
-import StandardItem from './StandardItem.vue';
-import { std, stdurl } from '../../../std.ts'
-import { useMapStore } from '../../../stores/map.ts';
-import COT from '../../../base/cot.ts';
-import {
-    TablerNone,
-    TablerInput,
-    TablerLoading
-} from '@tak-ps/vue-tabler';
-import {
-    IconMapPin
-} from '@tabler/icons-vue';
-import { ref, watch, computed } from 'vue';
-
-const props = defineProps({
-    label: {
-        type: String,
-        default: ''
-    },
-    autofocus: {
-        type: Boolean,
-        default: false
-    },
-    placeholder: {
-        type: String,
-        default: 'Search...'
-    }
-});
-
-const mapStore = useMapStore();
-
-const emit = defineEmits(['select']);
-
-const selected = ref(false);
-const partialLoading = ref(false);
-
-const shown = computed(() => {
-    if (query.value.filter.length > 0 && !selected.value) {
-        return true;
-    } else {
-        return false;
-    }
-});
-
-const query = ref<{
-    filter: string,
-}>({
-    filter: '',
-});
-
-const cots = ref<Set<COT>>(new Set())
-
-const results = ref<Array<{
-    text: string
-    magicKey?: string
-}>>([]);
-
-watch(query.value, async () => {
-    await fetchSearch();
-});
-
-async function selectFeature(cot: COT) {
-    selected.value = true;
-
-    query.value.filter = cot.properties.callsign;
-
-    emit('select', {
-        name: cot.properties.callsign,
-        coordinates: cot.properties.center
-    });
-}
-
-async function fetchSearch(
-    queryText?: string,
-    magicKey?: string
-) {
-    if (!queryText) {
-        results.value = [];
-    }
-
-    if (!magicKey) {
-        try {
-            const c = convert(query.value.filter);
-
-            results.value = [{
-                text: `${c.decimalLatitude.toFixed(5)}, ${c.decimalLongitude.toFixed(5)}`,
-                magicKey: 'coordinate'
-            }]
-
-            return;
-        } catch (e) {
-            if (e instanceof Error && !e.message.includes('coordinate')) {
-                console.error('Error parsing coordinates:', e);
-            }
-        }
-    }
-
-    if (!magicKey || !queryText) {
-        partialLoading.value = true;
-
-        cots.value = await mapStore.worker.db
-            .filter(`$contains($lowercase(properties.callsign), "${query.value.filter.toLowerCase()}")`, {
-                mission: true,
-                limit: 5
-            })
-
-        const url = stdurl('/api/search/suggest');
-        url.searchParams.append('query', query.value.filter);
-        url.searchParams.append('limit', '5');
-        const center = mapStore.map.getCenter();
-        url.searchParams.append('longitude', String(center.lng));
-        url.searchParams.append('latitude', String(center.lat));
-
-        results.value = [];
-        results.value.push(...((await std(url)) as SearchSuggest).items)
-        partialLoading.value = false;
-   } else {
-        selected.value = true;
-
-        if (magicKey === 'coordinate') {
-            const parts = queryText.split(',');
-            const lat = parseFloat(parts[0].trim());
-            const lon = parseFloat(parts[1].trim());
-
-            mapStore.map.flyTo({
-                center: [lon, lat],
-                zoom: 15
-            });
-
-            // Create a draw point on the map
-            const now = new Date().toISOString();
-            const featureId = randomUUID();
-            const feature = {
-                id: featureId,
-                type: 'Feature' as const,
-                path: '/',
-                properties: {
-                    id: featureId,
-                    callsign: 'Search Feature',
-                    type: 'u-d-p',
-                    how: 'h-g-i-g-o',
-                    archived: true,
-                    time: now,
-                    start: now,
-                    stale: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
-                    center: [lon, lat],
-                    "marker-opacity": 1,
-                    "marker-color": "#FF0000",
-                    creator: await mapStore.worker.profile.creator(),
-                    remarks: 'Created from search result'
-                },
-                geometry: {
-                    type: 'Point' as const,
-                    coordinates: [lon, lat]
-                }
-            };
-
-            await mapStore.worker.db.add(feature);
-
-            emit('select', {
-                name: `${lat.toFixed(5)}, ${lon.toFixed(5)}`,
-                coordinates: [ lon, lat ]
-            });
-        } else {
-            const url = stdurl('/api/search/forward');
-            url.searchParams.append('query', queryText);
-            url.searchParams.append('magicKey', magicKey);
-            const center = mapStore.map.getCenter();
-            url.searchParams.append('longitude', String(center.lng));
-            url.searchParams.append('latitude', String(center.lat));
-            const items = ((await std(url)) as SearchForward).items;
-
-            if (!items.length) return;
-
-            results.value = [];
-
-            query.value.filter = items[0].address;
-
-            mapStore.map.fitBounds([
-                [items[0].extent.xmin, items[0].extent.ymin],
-                [items[0].extent.xmax, items[0].extent.ymax],
-            ], {
-                duration: 0,
-                padding: {
-                    top: 25,
-                    bottom: 25,
-                    left: 25,
-                    right: 25
-                }
-            });
-
-            // Create a draw point on the map
-            const pointName = items[0].address.split(',')[0].trim();
-            const now = new Date().toISOString();
-            const featureId = randomUUID();
-            const feature = {
-                id: featureId,
-                type: 'Feature' as const,
-                path: '/',
-                properties: {
-                    id: featureId,
-                    callsign: pointName,
-                    type: 'u-d-p',
-                    how: 'h-g-i-g-o',
-                    archived: true,
-                    time: now,
-                    start: now,
-                    stale: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
-                    center: [items[0].location.x, items[0].location.y],
-                    "marker-opacity": 1,
-                    "marker-color": "#FF0000",
-                    creator: await mapStore.worker.profile.creator(),
-                    remarks: 'Created from search result'
-                },
-                geometry: {
-                    type: 'Point' as const,
-                    coordinates: [items[0].location.x, items[0].location.y]
-                }
-            };
-
-            await mapStore.worker.db.add(feature);
-
-            emit('select', {
-                name: items[0].address,
-                coordinates: [ items[0].location.x, items[0].location.y ]
-            });
-        }
-    }
-}
-
-</script>
-
-<style scoped>
-.icon-wrapper {
-    width: 3rem;
-    height: 3rem;
-    min-width: 3rem;
-    min-height: 3rem;
-    flex-shrink: 0;
-}
-</style>

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

@@ -1,190 +0,0 @@
-<template>
-    <div
-        class='col-12'
-        style='max-height: 400px'
-    >
-        <TablerLoading v-if='loading' />
-        <template v-else-if='share === ShareType.NONE'>
-            <div class='sticky-top col-12 d-flex align-items-center user-select-none'>
-                <div class='subheader mx-2 my-2'>
-                    Selected Features
-                </div>
-                <div class='ms-auto px-2'>
-                    <TablerIconButton
-                        title='Close'
-                        @click='selected.clear()'
-                    >
-                        <IconX
-                            :size='20'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </div>
-            </div>
-            <div
-                class='overflow-auto'
-                style='
-                    max-height: calc(400px - 36px);
-                    margin-bottom: 36px;
-                '
-            >
-                <div
-                    v-for='select in selected.values()'
-                    class='col-12 px-1'
-                >
-                    <DisplayFeature
-                        :feature='select'
-                        delete-action='emit'
-                        @delete='selected.delete(select.id)'
-                    />
-                </div>
-            </div>
-            <div
-                style='height: 36px; z-index: 2000;'
-                class='position-absolute bottom-0 start-0 end-0 px-2 bg-dark'
-            >
-                <div class='d-flex align-items-center'>
-                    <TablerButton
-                        style='height: 30px; width: 200px;'
-                        class='me-1 btn-sm'
-                        @click='share = ShareType.USERS'
-                    >
-                        <IconPackageExport
-                            :size='20'
-                            stroke='1'
-                        />
-                        <span class='mx-2'>Share</span>
-                    </TablerButton>
-                    <TablerDropdown
-                        position='top'
-                    >
-                        <TablerButton
-                            title='More Options'
-                            class='btn-sm'
-                            style='height: 30px'
-                        >
-                            <IconDotsVertical
-                                :size='20'
-                                stroke='1'
-                            />
-                        </TablerButton>
-
-                        <template #dropdown>
-                            <div class='card'>
-                                <div class='card-body'>
-                                    <div
-                                        class='cursor-pointer col-12 hover rounded d-flex align-items-center px-2'
-                                        @click='share = ShareType.PACKAGE'
-                                    >
-                                        <IconPackages
-                                            :size='32'
-                                            stroke='1'
-                                            class='me-2'
-                                        />
-                                        New Data Package
-                                    </div>
-                                    <div
-                                        class='cursor-pointer col-12 hover rounded d-flex align-items-center px-2'
-                                        @click='share = ShareType.MISSION'
-                                    >
-                                        <IconAmbulance
-                                            :size='32'
-                                            stroke='1'
-                                            class='me-2'
-                                        />
-                                        Move to Data Sync
-                                    </div>
-                                    <div
-                                        class='cursor-pointer col-12 hover rounded d-flex align-items-center px-2'
-                                        @click='deleteFeatures'
-                                    >
-                                        <IconTrash
-                                            :size='32'
-                                            stroke='1'
-                                            class='me-2'
-                                        />
-                                        Delete Features
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                    </TablerDropdown>
-                </div>
-            </div>
-        </template>
-        <template v-else-if='share === ShareType.USERS'>
-            <Share
-                :feats='Array.from(selected.values()).map((c) => c.as_feature())'
-                @done='selected.clear()'
-                @close='share = ShareType.NONE'
-            />
-        </template>
-        <template v-else-if='share === ShareType.MISSION'>
-            <ShareToMission
-                action='move'
-                :feats='Array.from(selected.values()).map((c) => c.as_feature())'
-                @done='selected.clear()'
-                @close='share = ShareType.NONE'
-            />
-        </template>
-        <template v-else-if='share === ShareType.PACKAGE'>
-            <ShareToPackage
-                :feats='Array.from(selected.values()).map((c) => c.as_feature())'
-                @done='selected.clear()'
-                @close='share = ShareType.NONE'
-            />
-        </template>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref } from 'vue';
-import DisplayFeature from './FeatureRow.vue';
-import COT from '../../../base/cot.ts';
-import { useMapStore } from '../../../stores/map.ts';
-import {
-    IconPackageExport,
-    IconDotsVertical,
-    IconAmbulance,
-    IconPackages,
-    IconTrash,
-    IconX,
-} from '@tabler/icons-vue';
-import {
-    TablerButton,
-    TablerLoading,
-    TablerDropdown,
-    TablerIconButton
-} from '@tak-ps/vue-tabler';
-import Share from './Share.vue';
-import ShareToMission from './ShareToMission.vue';
-import ShareToPackage from './ShareToPackage.vue';
-
-const mapStore = useMapStore();
-
-const props = defineProps<{
-    selected: Map<string, COT>
-}>();
-
-enum ShareType {
-    NONE = 'none',
-    MISSION = 'mission',
-    PACKAGE = 'package',
-    USERS = 'users'
-}
-
-const loading = ref(false);
-const share = ref<ShareType>(ShareType.NONE);
-
-async function deleteFeatures() {
-    loading.value = true;
-
-    for (const id of props.selected.keys()) {
-        await mapStore.worker.db.remove(id);
-    }
-
-    props.selected.clear()
-
-    loading.value = false;
-}
-</script>

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

@@ -1,151 +0,0 @@
-<template>
-    <TablerLoading v-if='loading || !profile' />
-    <template v-else>
-        <div class='col-12'>
-            <TablerInput
-                v-model='profile.tak_callsign'
-                :error='validateTextNotEmpty(profile.tak_callsign)'
-                :required='true'
-                label='User Callsign'
-            />
-        </div>
-        <div class='col-12'>
-            <TablerEnum
-                v-model='profile.tak_group'
-                label='User Group'
-                :options='tak_groups'
-            />
-        </div>
-        <div class='col-12'>
-            <TablerEnum
-                v-model='profile.tak_role'
-                label='User Role'
-                :options='config.roles'
-            />
-        </div>
-        <div
-            v-if='mode === "router"'
-            class='col-12'
-        >
-            <TablerInput
-                v-model='profile.tak_loc_freq'
-                label='Location Reporting Frequency (ms)'
-            />
-        </div>
-        <div
-            v-if='mode === "router"'
-            class='col-12 py-2'
-        >
-            <PropertyType
-                v-model='profile.tak_type'
-                :edit='true'
-                :hover='true'
-            />
-        </div>
-        <div class='col-12 d-flex py-3'>
-            <div class='ms-auto'>
-                <button
-                    class='btn btn-primary'
-                    :disabled='!!validateTextNotEmpty(profile.tak_callsign)'
-                    @click='updateProfile'
-                >
-                    Update
-                </button>
-            </div>
-        </div>
-    </template>
-</template>
-
-<script setup lang='ts'>
-import { ref, computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
-import PropertyType from './PropertyType.vue';
-import type { Profile, ConfigGroups } from '../../../../src/types.ts';
-import { std } from '../../../../src/std.ts';
-import {
-    TablerInput,
-    TablerEnum,
-    TablerLoading
-} from '@tak-ps/vue-tabler';
-import { validateTextNotEmpty } from '../../../base/validators.ts';
-import { useMapStore } from '../../../stores/map.ts';
-const mapStore = useMapStore();
-
-const props = defineProps({
-    mode: {
-        type: String,
-        default: 'router'
-    },
-    forceCallsign: {
-        type: Boolean,
-        default: false
-    }
-})
-
-const emit = defineEmits([ 'update' ]);
-
-const loading = ref(true);
-const profile = ref<Profile | undefined>();
-const config = ref<ConfigGroups>({
-    groups: {},
-    roles: []
-});
-
-const router = useRouter();
-
-const tak_groups = computed(() => {
-    const groups = [];
-    for (const g in config.value.groups) {
-        if (config.value.groups[g]) {
-            groups.push(`${g} - ${config.value.groups[g]}`);
-        } else {
-            groups.push(g);
-        }
-    }
-
-    return groups;
-});
-
-onMounted(async () => {
-    loading.value = true;
-    await fetchConfig();
-
-    const p = await mapStore.worker.profile.load();
-
-    if (config.value.groups[p.tak_group]) {
-        // @ts-expect-error We expect an enum of Colors
-        p.tak_group = `${p.tak_group} - ${config.value.groups[p.tak_group]}`;
-    }
-
-    if (props.forceCallsign) {
-        p.tak_callsign = '';
-    }
-
-    profile.value = p;
-    loading.value = false;
-});
-
-async function fetchConfig() {
-    config.value = await std('/api/config/group') as ConfigGroups;
-}
-
-async function updateProfile() {
-    const p = JSON.parse(JSON.stringify(profile.value)) as Profile;
-
-    p.tak_group = p.tak_group.replace(/\s-\s.*$/, '') as Profile["tak_group"];
-
-    await mapStore.worker.profile.update({
-        tak_callsign: p.tak_callsign,
-        tak_type: p.tak_type,
-        tak_role: p.tak_role,
-        tak_group: p.tak_group.replace(/\s-\s.*$/, '') as Profile["tak_group"],
-        tak_loc_freq: p.tak_loc_freq
-    });
-
-    if (props.mode === 'router') {
-        router.push("/menu/settings");
-    } else {
-        emit('update');
-    }
-}
-</script>