@tak-ps/cloudtak 12.54.0

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

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

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

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

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

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