@tak-ps/cloudtak 12.54.0 → 12.94.0

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

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

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

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

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

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