@tak-ps/cloudtak 12.54.0 → 12.94.0

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

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

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

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

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

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