@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/Menu/MenuRoutes.vue

@@ -0,0 +1,186 @@
+<template>
+    <MenuTemplate
+        name='Routes'
+        :loading='!mapStore.isLoaded'
+    >
+        <template #buttons>
+            <TablerIconButton
+                v-if='routeCreation'
+                title='New Route'
+                @click='router.push("/menu/routes/new")'
+            >
+                <IconPlus
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+            <TablerRefreshButton
+                :loading='loading'
+                @click='refresh(true)'
+            />
+        </template>
+        <template #default>
+            <div class='mx-2 my-2'>
+                <TablerInput
+                    v-model='query.filter'
+                    icon='search'
+                    placeholder='Search'
+                />
+            </div>
+            <TablerLoading
+                v-if='loading'
+                v-model='query.filter'
+                desc='Loading Features'
+            />
+            <TablerNone
+                v-else-if='routes.size === 0'
+                :create='false'
+                label='Routes'
+            />
+            <template v-else>
+                <div class='col-12 d-flex flex-column gap-2 p-3'>
+                    <StandardItem
+                        v-for='cot of routes.values()'
+                        :key='cot.id'
+                        class='d-flex align-items-center gap-3 p-2'
+                        @click='clickRoute(cot)'
+                    >
+                        <div
+                            class='d-flex align-items-center justify-content-center rounded-circle bg-black bg-opacity-25'
+                            style='width: 3rem; height: 3rem; min-width: 3rem;'
+                        >
+                            <IconRoute
+                                :size='24'
+                                :color='cot.properties["stroke"] || "#ffffff"'
+                                stroke='1'
+                            />
+                        </div>
+
+                        <div class='d-flex flex-column'>
+                            <div class='fw-bold'>
+                                {{ cot.properties.callsign }}
+                            </div>
+                            <div
+                                v-if='cot.geometry.type === "LineString"'
+                                class='text-secondary small'
+                            >
+                                {{ Math.round(cot.length() * 1000) / 1000 + " km" }}
+                            </div>
+                        </div>
+
+                        <div class='d-flex btn-list ms-auto'>
+                            <TablerDelete
+                                displaytype='icon'
+                                @delete='deleteRoute(cot.id)'
+                            />
+                        </div>
+                    </StandardItem>
+                </div>
+            </template>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+import { useRouter } from 'vue-router';
+import COT from '../../../base/cot.ts';
+import { server } from '../../../std.ts';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import StandardItem from '../util/StandardItem.vue';
+import {
+    TablerNone,
+    TablerInput,
+    TablerDelete,
+    TablerLoading,
+    TablerIconButton,
+    TablerRefreshButton
+} from '@tak-ps/vue-tabler';
+import type { WorkerMessage } from '../../../base/events.ts';
+import { WorkerMessageType } from '../../../base/events.ts';
+import {
+    IconPlus,
+    IconRoute,
+} from '@tabler/icons-vue';
+import { useMapStore } from '../../../stores/map.ts';
+
+const router = useRouter();
+const mapStore = useMapStore();
+
+const channel = new BroadcastChannel("cloudtak");
+
+channel.onmessage = async (event: MessageEvent<WorkerMessage>) => {
+    const msg = event.data;
+    if (!msg || !msg.type) return;
+
+    if (msg.type === WorkerMessageType.Feature_Archived_Added) {
+        await refresh();
+    } else if (msg.type === WorkerMessageType.Feature_Archived_Removed) {
+        await refresh();
+    }
+}
+
+const routes = ref<Set<COT>>(new Set());
+const query = ref({
+    filter: ''
+})
+
+const routeCreation = ref(false);
+
+const loading = ref(true);
+
+watch(query.value, async () => {
+    await refresh();
+})
+
+onMounted(async () => {
+    await refresh();
+    await settings();
+});
+
+onBeforeUnmount(() => {
+    if (channel) {
+        channel.close();
+    }
+})
+
+async function settings() {
+    try {
+        const { data, error } = await server.GET('/api/search');
+        if (error) throw new Error(error.message);
+
+        if (data.route.enabled && data.route.providers) {
+            routeCreation.value = true;
+        }
+    } catch (err) {
+        console.error(err);
+    }
+}
+
+async function deleteRoute(id: string): Promise<void> {
+    await mapStore.worker.db.remove(id);
+    await refresh();
+}
+
+async function clickRoute(cot: COT): Promise<void> {
+    cot.flyTo();
+
+    router.push(`/cot/${cot.id}`);
+}
+
+async function refresh(load = false): Promise<void> {
+    if (load) loading.value = true;
+
+    routes.value = new Set(Array.from(await mapStore.worker.db
+        .filter(`
+            properties.archived
+            and properties.type = "b-m-r"
+            and $contains($lowercase(properties.callsign), "${query.value.filter.toLowerCase()}")
+        `, {
+            mission: true
+        })))
+
+    loading.value = false
+}
+
+</script>

package/src/components/CloudTAK/Menu/MenuRoutesNew.vue

@@ -0,0 +1,193 @@
+<template>
+    <MenuTemplate
+        name='New Route'
+        :loading='!mapStore.isLoaded'
+    >
+        <template #default>
+            <TablerLoading
+                v-if='loading || !config'
+                desc='Loading'
+            />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <template v-else>
+                <div class='mx-2 my-2'>
+                    <TablerEnum
+                        v-if='config.providers.length'
+                        v-model='routePlan.provider'
+                        label='Routing Provider'
+                        :options='config.providers.map(p => p.name)'
+                    />
+                </div>
+                <div class='mx-2 my-2'>
+                    <SearchBox
+                        label='Start Location'
+                        placeholder='Start Location'
+                        :autofocus='true'
+                        @select='routePlan.start = $event || null'
+                    />
+                </div>
+                <div class='mx-2 my-2'>
+                    <SearchBox
+                        label='End Location'
+                        placeholder='End Location'
+                        :autofocus='false'
+                        @select='routePlan.end = $event || null'
+                    />
+                </div>
+
+                <div class='mx-2 my-2'>
+                    <TablerEnum
+                        v-if='modes.length > 0'
+                        v-model='routePlan.travelMode'
+                        label='Travel Mode'
+                        :options='modes.map(m => m.name)'
+                    />
+                </div>
+                <div class='mx-2 my-3'>
+                    <button
+                        :disabled='!routePlan.start || !routePlan.end'
+                        class='btn btn-primary w-100'
+                        @click='generateRoute'
+                    >
+                        Generate Route
+                    </button>
+                </div>
+            </template>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import SearchBox from '../util/SearchBox.vue';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import {
+    TablerEnum,
+    TablerAlert,
+    TablerLoading,
+} from '@tak-ps/vue-tabler';
+import { std, stdurl, server } from '../../../std.ts';
+import { useMapStore } from '../../../stores/map.ts';
+import type { Search, FeatureCollection } from '../../../types.ts';
+
+const router = useRouter();
+const mapStore = useMapStore();
+
+const loading = ref(true);
+
+const routePlan = ref<{
+    provider: string;
+    start: null | {
+        name: string;
+        coordinates: [number, number]
+    };
+    end: null | {
+        name: string;
+        coordinates: [number, number]
+    }
+    travelMode: string;
+}>({
+    provider: '',
+    start: null,
+    end: null,
+    travelMode: ''
+});
+
+const error = ref<Error | undefined>();
+const config = ref<Search["route"]>();
+
+const modes = computed(() => {
+    if (!config.value) return [];
+
+    for (const p of config.value.providers) {
+        if (p.name === routePlan.value.provider) {
+            return p.modes;
+        }
+    }
+
+    return [];
+});
+
+onMounted(async () => {
+    await settings();
+});
+
+async function settings() {
+    const res = await server.GET('/api/search');
+
+    try  {
+        if (res.error) throw new Error(res.error.message);
+        config.value = res.data.route;
+
+        routePlan.value.provider = config.value.providers[0].name;
+
+        if (config.value.providers[0].modes.length > 0) {
+            routePlan.value.travelMode = config.value.providers[0].modes[0].name;
+        }
+
+        loading.value = false;
+    } catch (err) {
+        loading.value = false;
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+}
+
+async function generateRoute(): Promise<void> {
+    if (!routePlan.value.start || !routePlan.value.end) {
+        return;
+    }
+
+    loading.value = true;
+
+    try {
+        const url = stdurl('/api/search/route');
+        url.searchParams.set('start', routePlan.value.start.coordinates.join(','));
+        url.searchParams.set('end', routePlan.value.end.coordinates.join(','));
+        url.searchParams.set('callsign', routePlan.value.start.name + ' to ' + routePlan.value.end.name);
+        
+        // Convert Human Name => ID
+        if (config.value) {
+            for (const p of config.value.providers) {
+                if (p.name === routePlan.value.provider) {
+                    url.searchParams.set('provider', p.id);
+                    break;
+                }
+            }
+        }
+
+        // Convert Human Name => ID
+        if (routePlan.value.travelMode) {
+            for (const m of modes.value) {
+                if (m.name === routePlan.value.travelMode) {
+                    url.searchParams.set('travelMode', m.id);
+                    break;
+                }
+            }
+        }
+
+        const route = await std(url) as FeatureCollection;
+
+        if (route.features.length > 0) {
+            const cot = await mapStore.worker.db.add(route.features[0], {
+                authored: true
+            });
+
+            cot.flyTo();
+
+            router.push(`/cot/${cot.id}`);
+        } else {
+            throw new Error('No Route Found');
+        }
+
+        loading.value = false;
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+
+</script>

package/src/components/CloudTAK/Menu/MenuSettings.vue

@@ -0,0 +1,95 @@
+<template>
+    <MenuTemplate name='Settings'>
+        <div class='col-12 d-flex flex-column gap-2 p-3'>
+            <StandardItem
+                @click='router.push("/menu/settings/callsign")'
+            >
+                <div class='d-flex align-items-center px-2 py-2'>
+                    <IconUserCog
+                        :size='32'
+                        stroke='1'
+                    />
+                    <div class='ms-2 flex-grow-1 font-weight-bold'>
+                        Callsign & Device Preferences
+                    </div>
+                </div>
+            </StandardItem>
+            <StandardItem
+                @click='router.push("/menu/settings/display")'
+            >
+                <div class='d-flex align-items-center px-2 py-2'>
+                    <IconAdjustments
+                        :size='32'
+                        stroke='1'
+                    />
+                    <div class='ms-2 flex-grow-1 font-weight-bold'>
+                        Display Preferences
+                    </div>
+                </div>
+            </StandardItem>
+            <StandardItem
+                @click='router.push("/menu/settings/tokens")'
+            >
+                <div class='d-flex align-items-center px-2 py-2'>
+                    <IconRobot
+                        :size='32'
+                        stroke='1'
+                    />
+                    <div class='ms-2 flex-grow-1 font-weight-bold'>
+                        API Tokens
+                    </div>
+                </div>
+            </StandardItem>
+            <StandardItem
+                @click='refreshApp()'
+            >
+                <div class='d-flex align-items-center px-2 py-2'>
+                    <IconRefresh
+                        :size='32'
+                        stroke='1'
+                    />
+                    <div class='ms-2 flex-grow-1 font-weight-bold'>
+                        Refresh App
+                    </div>
+                </div>
+            </StandardItem>
+        </div>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { useRouter } from 'vue-router';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import StandardItem from '../util/StandardItem.vue';
+import {
+    IconRefresh,
+    IconRobot,
+    IconUserCog,
+    IconAdjustments,
+} from '@tabler/icons-vue';
+
+const router = useRouter();
+
+async function refreshApp() {
+    if (!navigator.onLine) {
+        throw new Error('Cannot refresh app while offline.');
+    }
+
+    if ('serviceWorker' in navigator) {
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        for (const registration of registrations) {
+            await registration.unregister();
+        }
+    }
+
+    if ('caches' in window) {
+        const keys = await caches.keys();
+        for (const key of keys) {
+            await caches.delete(key);
+        }
+    }
+
+    window.location.reload();
+}
+</script>
+

package/src/components/CloudTAK/Menu/MenuSettingsCallsign.vue

@@ -0,0 +1,12 @@
+<template>
+    <MenuTemplate name='Callsign &amp; Device'>
+        <div class='mx-2'>
+            <SettingsCallsign />
+        </div>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import MenuTemplate from '../util/MenuTemplate.vue';
+import SettingsCallsign from '../util/SettingsCallsign.vue';
+</script>

package/src/components/CloudTAK/Menu/MenuSettingsDisplay.vue

@@ -0,0 +1,144 @@
+<template>
+    <MenuTemplate
+        name='Display Preferences'
+        :loading='loading || !profile'
+    >
+        <template v-if='profile'>
+            <div class='mx-2'>
+                <div class='col-12'>
+                    <TablerEnum
+                        v-model='profile.display_stale'
+                        label='Remove Stale Elements'
+                        :options='[
+                            "Immediate",
+                            "10 Minutes",
+                            "30 Minutes",
+                            "1 Hour",
+                            "Never"
+                        ]'
+                    />
+                </div>
+                <div class='col-12'>
+                    <TablerEnum
+                        v-model='profile.display_text'
+                        label='Text Size'
+                        :options='[
+                            "Small",
+                            "Medium",
+                            "Large"
+                        ]'
+                    />
+                </div>
+                <div class='col-12'>
+                    <TablerEnum
+                        v-model='profile.display_distance'
+                        label='Distance Unit'
+                        :options='[
+                            "meter",
+                            "kilometer",
+                            "mile"
+                        ]'
+                    />
+                </div>
+                <div class='col-12'>
+                    <TablerEnum
+                        v-model='profile.display_elevation'
+                        label='Elevation Unit'
+                        :options='[
+                            "meter",
+                            "feet"
+                        ]'
+                    />
+                </div>
+                <div class='col-12'>
+                    <TablerEnum
+                        v-model='profile.display_speed'
+                        label='Speed Unit'
+                        :options='[
+                            "m/s",
+                            "km/h",
+                            "mi/h"
+                        ]'
+                    />
+                </div>
+                <div class='col-12'>
+                    <TablerEnum
+                        v-model='profile.display_projection'
+                        label='Display Projection'
+                        :options='[
+                            "globe",
+                            "mercator"
+                        ]'
+                    />
+                </div>
+                <div class='col-12'>
+                    <TablerEnum
+                        v-model='profile.display_zoom'
+                        label='Display Zoom Controls'
+                        :options='[
+                            "always",
+                            "conditional",
+                            "never"
+                        ]'
+                    />
+                </div>
+                <div class='col-12'>
+                    <TablerEnum
+                        v-model='profile.display_icon_rotation'
+                        label='Rotate Icons with Course'
+                        :options='[true, false]'
+                    />
+                </div>
+                <div class='col-12 d-flex py-3'>
+                    <div class='ms-auto'>
+                        <button
+                            class='btn btn-primary'
+                            @click='updateProfile'
+                        >
+                            Update
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { useRouter } from 'vue-router';
+import { ref, toRaw, onMounted } from 'vue';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import type { Profile } from '../../../types.ts';
+import {
+    TablerEnum,
+} from '@tak-ps/vue-tabler';
+import { useMapStore } from '../../../stores/map.ts';
+const mapStore = useMapStore();
+
+const router = useRouter();
+const loading = ref(false);
+const profile = ref<Profile | undefined>();
+
+onMounted(async () => {
+    loading.value = true;
+    profile.value = await mapStore.worker.profile.load();
+    loading.value = false;
+});
+
+async function updateProfile() {
+    if (!profile.value) return;
+
+    await mapStore.worker.profile.update(toRaw(profile.value));
+
+    // Update distance unit
+    mapStore.updateDistanceUnit(profile.value.display_distance);
+
+    // Immediately update icon rotation to avoid requiring page reload
+    mapStore.updateIconRotation(profile.value.display_icon_rotation as unknown as boolean);
+
+    // Refresh profile data to reflect persisted changes
+    profile.value = await mapStore.worker.profile.load();
+
+    router.push("/menu/settings");
+}
+</script>