@tak-ps/cloudtak 12.54.0

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

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

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

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