@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,137 +0,0 @@
-<template>
-    <div
-        class='w-100 px-0 d-flex flex-column'
-        style='height: calc(100vh - 64px)'
-    >
-        <div
-            class='col-12 bg-dark flex-shrink-0'
-            :style='`z-index: ${zindex};`'
-            style='
-                border-radius: 0px;
-            '
-            :class='{
-                "border-bottom border-light": border
-            }'
-        >
-            <div class='card-header d-flex align-items-center py-2 px-0 mx-2 flex-wrap row-gap-2'>
-                <div
-                    class='d-flex align-items-center flex-grow-1'
-                    style='min-width: 0'
-                >
-                    <TablerIconButton
-                        v-if='backType === "close"'
-                        title='Close Menu'
-                        @click='router.push("/")'
-                    >
-                        <IconCircleX
-                            :size='32'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                    <TablerIconButton
-                        v-if='backType === "back"'
-                        title='Close Menu'
-                        icon='IconCircleArrowLeft'
-                        @click='routerBack'
-                    >
-                        <IconCircleArrowLeft
-                            :size='32'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                    <div v-else />
-
-                    <div
-                        class='strong user-select-none text-break px-2'
-                        v-text='name'
-                    />
-                </div>
-                <div class='col-auto btn-list align-items-center'>
-                    <slot name='buttons' />
-                </div>
-            </div>
-        </div>
-
-        <div
-            class='row mx-0 d-flex flex-row overflow-y-auto overflow-x-hidden align-content-start flex-grow-1'
-        >
-            <TablerLoading
-                v-if='loading'
-                :desc='`Loading ${name}`'
-            />
-            <TablerNone
-                v-else-if='none'
-                :label='name'
-                :create='false'
-            />
-            <slot v-else />
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-
-import {
-    TablerNone,
-    TablerLoading,
-    TablerIconButton,
-} from '@tak-ps/vue-tabler';
-
-import {
-    IconCircleX,
-    IconCircleArrowLeft
-} from '@tabler/icons-vue';
-
-import { useRouter } from 'vue-router'
-import { computed } from 'vue';
-
-const router = useRouter()
-
-const props = defineProps({
-    name: {
-        type: String,
-        required: true
-    },
-    zindex: {
-        type: Number,
-        default: 1020
-    },
-    border: {
-        type: Boolean,
-        default: true
-    },
-    back: {
-        type: Boolean,
-        default: true
-    },
-    loading: {
-        type: Boolean,
-        default: false,
-    },
-    none: {
-        type: Boolean,
-        default: false,
-    }
-});
-
-function routerBack() {
-    if (!router.options.history.state.back || String(router.options.history.state.back).startsWith('/login')) {
-        router.push("/")
-    } else {
-        router.back();
-    }
-}
-
-const backType = computed(() => {
-    if (!props.back) return "none";
-
-    if (
-        !router.options.history.state.back
-        || router.options.history.state.back === '/'
-    ) {
-        return 'close'
-    } else {
-        return 'back'
-    }
-});
-</script>

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

@@ -1,103 +0,0 @@
-<template>
-    <div
-        ref='selectMenu'
-        class='bg-dark rounded p-2'
-        style='
-            width: 200px;
-        '
-    >
-        <div
-            v-for='feat in mapStore.select.feats'
-            :key='feat.properties.id'
-            role='menuitem'
-            tabindex='0'
-            class='col-12 text-white'
-            @click='emit("selected", feat)'
-        >
-            <Feature
-                :feature='feat'
-                :compact='true'
-                :delete-button='false'
-            />
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, onMounted, onUnmounted, watch, markRaw } from 'vue';
-import Feature from './FeatureRow.vue'
-import { useMapStore } from '../../../stores/map.ts';
-import mapgl from 'maplibre-gl';
-
-const emit = defineEmits([ 'selected' ]);
-
-const mapStore = useMapStore();
-const selectMenu = ref<HTMLElement | null>(null);
-
-onMounted(() => {
-    if (!selectMenu.value) return;
-
-    if (!mapStore.select.popup) {
-        mapStore.select.popup = markRaw(new mapgl.Popup({
-            closeButton: false,
-            closeOnClick: false,
-            maxWidth: 'none',
-            className: 'multiple-select-popup'
-        }));
-
-        mapStore.select.popup.on('close', () => {
-            if (mapStore.select.feats.length) {
-                mapStore.select.feats = [];
-            }
-        });
-    }
-
-    const lngLat = mapStore.map.unproject([mapStore.select.x, mapStore.select.y]);
-
-    mapStore.select.popup
-        .setLngLat(lngLat)
-        .setDOMContent(selectMenu.value)
-        .addTo(mapStore.map);
-});
-
-watch(() => [mapStore.select.x, mapStore.select.y], ([x, y]) => {
-    if (mapStore.select.popup) {
-        const lngLat = mapStore.map.unproject([x, y]);
-        mapStore.select.popup.setLngLat(lngLat);
-    }
-});
-
-onUnmounted(() => {
-    if (mapStore.select.popup) {
-        mapStore.select.popup.remove();
-    }
-});
-</script>
-
-<style>
-.multiple-select-popup {
-    pointer-events: none;
-}
-
-.multiple-select-popup .maplibregl-popup-content {
-    background: transparent;
-    padding: 0;
-    pointer-events: auto;
-}
-
-.multiple-select-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip {
-    border-bottom-color: #1f2937;
-}
-
-.multiple-select-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
-    border-top-color: #1f2937;
-}
-
-.multiple-select-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
-    border-right-color: #1f2937;
-}
-
-.multiple-select-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
-    border-left-color: #1f2937;
-}
-</style>

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

@@ -1,50 +0,0 @@
-<template>
-    <IconAlertTriangle
-        v-if='type === NotificationType.Alert'
-        :size='props.size'
-        stroke='1'
-    />
-    <IconHeartbeat
-        v-else-if='type === NotificationType.Medical'
-        :size='props.size'
-        stroke='1'
-    />
-    <IconMessage
-        v-else-if='type === NotificationType.Chat'
-        :size='props.size'
-        stroke='1'
-    />
-    <IconUser
-        v-else-if='type === NotificationType.Contact'
-        :size='props.size'
-        stroke='1'
-    />
-    <IconAmbulance
-        v-else-if='type === NotificationType.Mission'
-        :size='props.size'
-        stroke='1'
-    />
-    <IconCircleDot
-        v-else
-        :size='props.size'
-        stroke='1'
-    />
-</template>
-<script setup lang='ts'>
-import { NotificationType } from '../../../base/notification.ts';
-import {
-    IconUser,
-    IconMessage,
-    IconAlertTriangle,
-    IconHeartbeat,
-    IconAmbulance,
-    IconCircleDot,
-} from '@tabler/icons-vue';
-
-const props = withDefaults(defineProps<{
-    type: NotificationType;
-    size?: number;
-}>(), {
-    size: 32,
-});
-</script>

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

@@ -1,125 +0,0 @@
-<template>
-    <teleport to='body'>
-        <div
-            v-if='notification'
-            class='toast-container position-fixed cursor-pointer'
-            :style='`
-                bottom: ${mapStore.toastOffset.y}px;
-                right: ${mapStore.toastOffset.x}px;
-            `'
-            @click='navigateTo'
-        >
-            <div
-                class='toast show'
-                role='alert'
-                aria-live='assertive'
-                aria-atomic='true'
-                data-bs-autohide='false'
-            >
-                <div class='toast-header'>
-                    <span class='me-2'>
-                        <NotificationIcon
-                            :type='notification.type'
-                            :size='24'
-                        />
-                    </span>
-                    <strong
-                        class='me-auto'
-                        v-text='notification.name'
-                    />
-                    <small
-                        v-text='timediff(notification.created)'
-                    />
-                    <button
-                        type='button'
-                        class='ms-2 btn-close'
-                        title='close'
-                        @click.stop='emit("close")'
-                    />
-                </div>
-                <div class='toast-body'>
-                    <span v-text='notification.body' />
-                </div>
-                <div class='loading-bar' />
-            </div>
-        </div>
-    </teleport>
-</template>
-
-<script setup lang='ts'>
-import { ref, onMounted, onUnmounted } from 'vue';
-import { useRouter } from 'vue-router';
-import TAKNotification from '../../../base/notification.ts';
-import NotificationIcon from './NotificationIcon.vue';
-import { useMapStore } from '../../../stores/map.ts';
-import timediff from '../../../timediff.ts';
-
-const router = useRouter();
-const timer = ref<ReturnType<typeof setTimeout> | null>(null);
-
-const emit = defineEmits<{
-    (e: 'close'): void;
-}>();
-
-const props = withDefaults(defineProps<{
-    id: string;
-    timeout?: number;
-}>(), {
-    timeout: 5000,
-});
-
-const notification = ref<TAKNotification | null>(null);
-const mapStore = useMapStore();
-
-onMounted(async () => {
-    notification.value = await TAKNotification.from(props.id);
-
-    timer.value = setTimeout(() => {
-        if (timer.value) {
-            clearTimeout(timer.value);
-        }
-        emit('close');
-    }, props.timeout);
-});
-
-onUnmounted(() => {
-    if (timer.value) {
-        clearTimeout(timer.value);
-    }
-});
-
-function navigateTo() {
-    if (notification.value?.url) {
-        router.push(notification.value.url);
-        emit('close');
-    }
-}
-</script>
-
-<style scoped>
-.toast {
-    position: relative;
-    overflow: hidden;
-}
-
-.loading-bar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 4px;
-    width: 100%;
-
-    background-color: var(--bs-primary, #0d6efd);
-    animation: shrink 5s linear forwards;
-}
-
-@keyframes shrink {
-    from {
-        width: 100%;
-    }
-    to {
-        width: 0%;
-    }
-}
-</style>
-

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

@@ -1,109 +0,0 @@
-<template>
-    <div class='col-12'>
-        <IconPolygon
-            :size='18'
-            stroke='1'
-            color='#6b7990'
-            class='ms-2 me-1'
-        />
-        <label class='subheader user-select-none'>Polygon Area</label>
-        <div class='mx-2'>
-            <CopyField
-                v-model='inMode'
-                :size='24'
-            />
-            <div
-                class='mx-2'
-                role='menu'
-            >
-                <span
-                    v-tooltip='"Square Feet"'
-                    class='my-1 px-2 user-select-none'
-                    :class='{
-                        "bg-accent rounded-bottom text-blue": mode === "sqfeet",
-                        "cursor-pointer": mode !== "sqfeet",
-                    }'
-                    role='menuitem'
-                    tabindex='0'
-                    @keyup.enter='mode = "sqfeet"'
-                    @click='mode = "sqfeet"'
-                >Feet<sup>2</sup></span>
-                <span
-                    v-tooltip='"Square Meters"'
-                    class='my-1 px-2 user-select-none'
-                    :class='{
-                        "bg-accent rounded-bottom text-blue": mode === "sqmeter",
-                        "cursor-pointer": mode !== "sqmeter",
-                    }'
-                    role='menuitem'
-                    tabindex='0'
-                    @keyup.enter='mode = "sqmeter"'
-                    @click='mode = "sqmeter"'
-                >Meters<sup>2</sup></span>
-                <span
-                    v-tooltip='"Acres"'
-                    class='my-1 px-2 user-select-none'
-                    :class='{
-                        "bg-accent rounded-bottom": mode === "acre",
-                        "cursor-pointer": mode !== "acre",
-                    }'
-                    role='menuitem'
-                    tabindex='0'
-                    @keyup.enter='mode = "acre"'
-                    @click='mode = "acre"'
-                >Acres</span>
-                <span
-                    v-tooltip='"Hectare"'
-                    class='my-1 px-2 user-select-none'
-                    :class='{
-                        "bg-accent rounded-bottom": mode === "ha",
-                        "cursor-pointer": mode !== "ha",
-                    }'
-                    role='menuitem'
-                    tabindex='0'
-                    @keyup.enter='mode = "ha"'
-                    @click='mode = "ha"'
-                >Ha</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, computed } from 'vue';
-import { area } from '@turf/area';
-import CopyField from './CopyField.vue';
-import COT from '../../../base/cot.ts';
-import {
-    IconPolygon
-} from '@tabler/icons-vue';
-
-const props = defineProps({
-    cot: {
-        type: COT,
-        required: true
-    },
-    unit: {
-        type: String,
-        default: 'sqfeet'
-    }
-})
-
-const mode = ref(props.unit || 'sqfeet');
-
-const inMode = computed(() => {
-    const cotArea = area(props.cot.geometry);
-
-    if (mode.value === 'sqfeet') {
-        return Math.round((cotArea * 10.7639) * 1000) / 1000;
-    } else if (mode.value === 'sqmeter') {
-        return Math.round(cotArea * 1000) / 1000;
-    } else if (mode.value === 'acre') {
-        return Math.round((cotArea * 0.000247105) * 1000) / 1000;
-    } else if (mode.value === 'ha') {
-        return Math.round((cotArea * 0.0001) * 1000) / 1000;
-    } else {
-        return 'UNKNOWN';
-    }
-})
-</script>