@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/Menu/Videos/VideosRemoteFeed.vue

@@ -0,0 +1,75 @@
+<template>
+    <div
+        class='rounded mx-2 my-2'
+        style='
+            border-style: solid;
+            border-color: #3E5E84;
+            border-width: 1px;
+        '
+    >
+        <div class='d-flex mt-2 mx-2'>
+            <div>
+                <IconCast
+                    :size='24'
+                    stroke='1'
+                />
+                <label class='mx-2'>Video Feed</label>
+            </div>
+            <div class='ms-auto btn-list'>
+                <TablerDelete
+                    size='24'
+                    title='Delete Feed'
+                    displaytype='icon'
+                    @delete='emit("delete")'
+                />
+            </div>
+        </div>
+
+        <div class='row g-2 rounded mx-2 my-2 pb-2 px-2'>
+            <div class='col-12'>
+                <TablerInput
+                    v-model='feed.alias'
+                    label='Feed Name'
+                >
+                    <TablerToggle
+                        v-model='feed.active'
+                        label='Active'
+                    />
+                </TablerInput>
+            </div>
+
+            <div class='col-12'>
+                <TablerInput
+                    v-model='feed.url'
+                    label='Feed URL'
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue';
+import type { VideoConnectionFeed } from '../../../../types.ts';
+import {
+    TablerInput,
+    TablerDelete,
+    TablerToggle
+} from '@tak-ps/vue-tabler'
+import {
+    IconCast
+} from '@tabler/icons-vue';
+
+const props = defineProps<{
+    modelValue: VideoConnectionFeed
+}>();
+
+const feed = ref(props.modelValue);
+
+const emit = defineEmits(['update:modelValue', 'delete']);
+
+watch(feed.value, () => {
+    emit('update:modelValue', feed.value);
+})
+
+</script>

package/src/components/CloudTAK/Notifications.vue

@@ -0,0 +1,195 @@
+<template>
+    <div
+        class='card'
+        style='
+            min-width: 400px;
+            max-height: 50vh;
+        '
+    >
+        <div class='card-header d-flex align-items-center'>
+            <h3 class='card-title'>
+                Notifications
+            </h3>
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    v-if='list && list.length'
+                    title='Search'
+                    @click.stop.prevent='paging.shown = !paging.shown'
+                >
+                    <IconSearch
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+                <TablerIconButton
+                    v-if='list && list.length'
+                    title='Delete All'
+                    @click='TAKNotification.clear()'
+                >
+                    <IconTrash
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+        </div>
+        <div
+            v-if='availableTypes.length > 1'
+            class='d-flex flex-wrap justify-content-center gap-2 p-2 border-bottom'
+        >
+            <div
+                v-for='type in availableTypes'
+                :key='type'
+                class='d-flex flex-column align-items-center justify-content-center p-2 rounded cursor-pointer border'
+                :class='selectedTypes.includes(type) ? "border-primary" : "border-transparent"'
+                style='width: 60px; height: 60px;'
+                @click.stop.prevent='toggleType(type)'
+            >
+                <NotificationIcon
+                    :type='type'
+                    :size='24'
+                />
+                <div
+                    style='font-size: 0.65rem;'
+                    class='mt-1'
+                >
+                    {{ type }}
+                </div>
+            </div>
+        </div>
+        <div
+            v-if='paging.shown'
+            class='col-12 px-2'
+        >
+            <TablerInput
+                v-model='paging.filter'
+                icon='search'
+                :autofocus='true'
+            />
+        </div>
+        <TablerNone
+            v-if='!filteredList || filteredList.length === 0'
+            label='Notifications'
+            :create='false'
+        />
+        <div
+            v-else
+            class='overflow-auto list-group list-group-flush list-group-hoverable'
+        >
+            <div
+                v-for='n in filteredList'
+                :key='n.id'
+                class='list-group-item cursor-pointer'
+                data-toggle='collapse'
+                @click='router.push(n.url)'
+            >
+                <div class='d-flex align-items-center'>
+                    <div class='me-2'>
+                        <NotificationIcon
+                            :type='n.type'
+                        />
+                    </div>
+                    <div class='text-truncate'>
+                        <div
+                            class='text-body d-block'
+                            v-text='n.name'
+                        />
+                        <div
+                            v-if='n.body'
+                            class='d-block text-secondary text-truncate mt-n1'
+                            v-text='n.body'
+                        />
+                        <div
+                            class='d-block text-secondary text-truncate mt-n1'
+                            v-text='timeDiff(n.created)'
+                        />
+                    </div>
+                    <div class='ms-auto'>
+                        <TablerIconButton
+                            title='Delete'
+                            @click.stop.prevent='TAKNotification.delete(n.id)'
+                        >
+                            <IconTrash
+                                :size='20'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <NotificationToast
+        v-for='n in filteredListToast'
+        :id='n.id'
+        :key='n.id'
+        @close='TAKNotification.update(n.id, { toast: false })'
+    />
+</template>
+
+<script setup lang='ts'>
+import { from } from 'rxjs';
+import { ref, computed } from 'vue';
+import { liveQuery } from 'dexie';
+import { useRouter } from 'vue-router';
+import { useObservable } from '@vueuse/rxjs';
+import TAKNotification, { NotificationType } from '../../base/notification.ts';
+import NotificationToast from './util/NotificationToast.vue';
+import NotificationIcon from './util/NotificationIcon.vue';
+import timeDiff from '../../timediff.ts';
+import {
+    TablerNone,
+    TablerInput,
+    TablerIconButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconTrash,
+    IconSearch,
+} from '@tabler/icons-vue';
+
+const router = useRouter();
+
+const selectedTypes = ref<NotificationType[]>(Object.values(NotificationType));
+
+const availableTypes = computed(() => {
+    if (!list.value) return [];
+    const present = new Set(list.value.map(n => n.type));
+    return Object.values(NotificationType).filter(t => present.has(t));
+});
+
+const toggleType = (type: NotificationType) => {
+    if (selectedTypes.value.includes(type)) {
+        selectedTypes.value = selectedTypes.value.filter(t => t !== type);
+    } else {
+        selectedTypes.value.push(type);
+    }
+}
+
+const paging = ref({
+    shown: false,
+    filter: ''
+})
+
+const filteredList = computed(() => {
+    if (!list.value) return [];
+    return list.value.filter((n) => {
+        if (!selectedTypes.value.includes(n.type)) return false;
+        return n.name.toLowerCase().includes(paging.value.filter.toLowerCase())
+            || n.body.toLowerCase().includes(paging.value.filter.toLowerCase());
+    })
+});
+
+const filteredListToast = computed(() => {
+    if (!list.value) return [];
+    return list.value.filter((n) => {
+        return n.toast && !n.read;
+    })
+});
+
+const list = useObservable(
+    from(liveQuery(async () => {
+        return await TAKNotification.list();
+    }))
+);
+</script>

package/src/components/CloudTAK/Query/Magnetic.vue

@@ -0,0 +1,80 @@
+<template>
+    <div class='col-12 row g-0'>
+        <div class='col-12'>
+            <label class='subheader mx-2'>Magnetic Declination</label>
+        </div>
+        <div
+            class='col-12 px-2 py-2 rounded'
+            style='border: 1px solid var(--tblr-border-color);'
+        >
+            <div class='d-flex align-items-center justify-content-center py-3'>
+                <div
+                    class='position-relative d-flex justify-content-center align-items-center'
+                    style='width: 100px; height: 100px;'
+                >
+                    <!-- True North -->
+                    <div
+                        class='position-absolute d-flex flex-column align-items-center'
+                        style='height: 100%; top: 0;'
+                    >
+                        <div class='small font-weight-bold mb-1'>
+                            TN
+                        </div>
+                        <div
+                            style='width: 2px; height: 40px; background-color: currentColor;'
+                            class='bg-dark'
+                        />
+                        <div
+                            style='width: 8px; height: 8px; border-radius: 50%;'
+                            class='bg-dark mt-auto mb-auto'
+                        />
+                        <div
+                            style='width: 2px; height: 40px; background-color: currentColor;'
+                            class='bg-dark'
+                        />
+                    </div>
+
+                    <!-- Magnetic North -->
+                    <div
+                        class='position-absolute d-flex flex-column align-items-center'
+                        style='height: 100%; top: 0; transition: transform 0.3s ease;'
+                        :style='{ transform: `rotate(${props.magnetic.declination}deg)` }'
+                    >
+                        <div class='small font-weight-bold text-red mb-1'>
+                            MN
+                        </div>
+                        <div
+                            style='width: 2px; height: 40px;'
+                            class='bg-red'
+                        />
+                        <div
+                            style='width: 8px; height: 8px; border-radius: 50%;'
+                            class='bg-red mt-auto mb-auto'
+                        />
+                        <div
+                            style='width: 2px; height: 40px;'
+                            class='bg-red'
+                        />
+                    </div>
+                </div>
+
+                <div class='ms-4'>
+                    <div class='h2 mb-0'>
+                        {{ Math.abs(props.magnetic.declination).toFixed(1) }}° {{ props.magnetic.declination > 0 ? 'E' : 'W' }}
+                    </div>
+                    <div class='text-muted small'>
+                        Inclination: {{ props.magnetic.inclination.toFixed(1) }}°
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import type { SearchReverse } from '../../../types.ts';
+
+const props = defineProps<{
+    magnetic: SearchReverse["magnetic"]
+}>();
+</script>

package/src/components/CloudTAK/Query/Reverse.vue

@@ -0,0 +1,65 @@
+<template>
+    <div class='col-12 row g-0'>
+        <div class='col-12'>
+            <label class='subheader mx-2'>Location</label>
+        </div>
+        <div
+            v-if='props.reverse'
+            class='col-12 d-flex align-items-center py-2 px-2 rounded'
+            style='border: 1px solid var(--tblr-border-color);'
+        >
+            <IconMapPin
+                size='32'
+                stroke='1'
+            />
+
+            <div class='mx-2'>
+                <div
+                    class='h3 mb-0'
+                    v-text='props.reverse.ShortLabel'
+                />
+                <div
+                    class='text-muted small'
+                    v-text='props.reverse.LongLabel.replace(new RegExp(`^.*${props.reverse.ShortLabel}, `), "")'
+                />
+            </div>
+            <div
+                v-if='props.elevation'
+                class='ms-auto text-end'
+            >
+                <div class='d-flex align-items-center text-muted'>
+                    <IconMountain
+                        size='16'
+                        stroke='1'
+                        class='me-1'
+                    />
+                    <span class='small'>{{ props.elevation }}m</span>
+                </div>
+            </div>
+        </div>
+        <div
+            v-else
+            class='col-12 d-flex py-2 px-2'
+        >
+            <div
+                class='mx-2'
+                style='font-size: 20px;'
+            >
+                No Features Found
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import type { SearchReverse } from '../../../types.ts';
+import {
+    IconMapPin,
+    IconMountain
+} from '@tabler/icons-vue';
+
+const props = defineProps<{
+    reverse: SearchReverse["reverse"],
+    elevation?: SearchReverse["elevation"]
+}>()
+</script>

package/src/components/CloudTAK/Query/Sun.vue

@@ -0,0 +1,178 @@
+<template>
+    <div class='col-12 row g-0'>
+        <div class='col-12'>
+            <label class='subheader mx-2'>Sun Phase</label>
+        </div>
+        <div
+            class='col-12 px-2 py-2 rounded'
+            style='border: 1px solid var(--tblr-border-color);'
+        >
+            <template
+                v-for='event in timeline'
+                :key='event.time'
+            >
+                <div
+                    v-if='event.name === "Nadir"'
+                    class='d-flex align-items-center mb-2'
+                >
+                    <div
+                        class='text-muted small text-end'
+                        style='width: 60px;'
+                    >
+                        Prev Night
+                    </div>
+                    <div class='mx-3 d-flex flex-column align-items-center'>
+                        <IconMoonStars
+                            :size='24'
+                            stroke='1'
+                            class='text-muted'
+                        />
+                    </div>
+                    <div>
+                        <div v-text='prevMoon.phase' />
+                        <div
+                            class='small text-muted'
+                            v-text='prevMoon.illumination + "% Illuminated"'
+                        />
+                    </div>
+                </div>
+
+                <div class='d-flex align-items-center mb-2'>
+                    <template v-if='event.type === "now"'>
+                        <div class='w-100 d-flex align-items-center text-red'>
+                            <div class='flex-grow-1 border-top border-red' />
+                            <span class='mx-2 small font-weight-bold'>Current Time</span>
+                            <div class='flex-grow-1 border-top border-red' />
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div
+                            class='text-muted small text-end'
+                            style='width: 60px;'
+                            v-text='formatTime(event.time)'
+                        />
+                        <div class='mx-3 d-flex flex-column align-items-center'>
+                            <component
+                                :is='event.icon'
+                                :size='24'
+                                stroke='1'
+                                :class='event.color'
+                            />
+                        </div>
+                        <div>
+                            <div v-text='event.name' />
+                            <div
+                                class='small text-muted'
+                                v-text='fromNow(event.time)'
+                            />
+                        </div>
+                    </template>
+                </div>
+            </template>
+
+            <div class='d-flex align-items-center border-top pt-2 mt-2'>
+                <div
+                    class='text-muted small text-end'
+                    style='width: 60px;'
+                >
+                    Moon
+                </div>
+                <div class='mx-3 d-flex flex-column align-items-center'>
+                    <IconMoonStars
+                        :size='24'
+                        stroke='1'
+                        class='text-muted'
+                    />
+                </div>
+                <div>
+                    <div v-text='moon.phase' />
+                    <div
+                        class='small text-muted'
+                        v-text='moon.illumination + "% Illuminated"'
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { computed } from 'vue';
+import type { SearchReverse } from '../../../types.ts';
+import moment from 'moment';
+import {
+    IconSunrise,
+    IconSunset,
+    IconSunHigh,
+    IconSun,
+    IconMoon,
+    IconMoonStars
+} from '@tabler/icons-vue';
+
+const props = defineProps<{
+    sun: SearchReverse["sun"]
+}>();
+
+const timeline = computed(() => {
+    const events = [
+        { name: 'Sunrise', time: props.sun.sunrise, icon: IconSunrise, color: 'text-orange', type: 'event' },
+        { name: 'Sunset', time: props.sun.sunset, icon: IconSunset, color: 'text-orange', type: 'event' },
+        { name: 'Dawn', time: props.sun.dawn, icon: IconSun, color: 'text-yellow', type: 'event' },
+        { name: 'Dusk', time: props.sun.dusk, icon: IconMoon, color: 'text-blue', type: 'event' },
+        { name: 'Solar Noon', time: props.sun.solarNoon, icon: IconSunHigh, color: 'text-yellow', type: 'event' },
+        { name: 'Nadir', time: props.sun.nadir, icon: IconMoonStars, color: 'text-blue', type: 'event' },
+    ];
+
+    events.push({
+        name: 'Current Time',
+        time: new Date().toISOString(),
+        // @ts-expect-error Icon is not needed for now
+        icon: null,
+        color: 'text-red',
+        type: 'now'
+    });
+
+    return events.sort((a, b) => {
+        return new Date(a.time).getTime() - new Date(b.time).getTime();
+    });
+});
+
+function getMoonPhase(date: Date) {
+    const cycles = 29.5305882;
+    const knownNewMoon = new Date('2000-01-06T18:14:00Z').getTime();
+    const diff = date.getTime() - knownNewMoon;
+    const days = diff / (1000 * 60 * 60 * 24);
+    const lunations = days / cycles;
+    const currentLunation = lunations - Math.floor(lunations);
+
+    const phase = currentLunation * 8;
+    const index = Math.round(phase) % 8;
+
+    const phases = [
+        'New Moon',
+        'Waxing Crescent',
+        'First Quarter',
+        'Waxing Gibbous',
+        'Full Moon',
+        'Waning Gibbous',
+        'Last Quarter',
+        'Waning Crescent'
+    ];
+
+    return {
+        phase: phases[index],
+        illumination: Math.round((1 - Math.cos(currentLunation * 2 * Math.PI)) / 2 * 100)
+    };
+}
+
+const moon = computed(() => getMoonPhase(new Date()));
+const prevMoon = computed(() => getMoonPhase(new Date(Date.now() - 86400000)));
+
+function formatTime(time: string) {
+    return moment(time).format('HH:mm');
+}
+
+function fromNow(time: string) {
+    return moment(time).fromNow();
+}
+</script>