@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/RadialMenu/RadialMenu.vue

@@ -0,0 +1,257 @@
+<template>
+    <svg
+        id='icons'
+        ref='icons'
+        class='d-none'
+    >
+        <symbol
+            id='radial-lock'
+            viewBox='0 0 24 24'
+            fill='none'
+            width='24'
+            height='24'
+            stroke='#fff'
+            stroke-width='2'
+            stroke-linejoin='round'
+            stroke-linecap='round'
+        >
+            <path d='M12.5 21h-5.5a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h10c.24 0 .47 .042 .683 .12' />
+            <path d='M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0' />
+            <path d='M8 11v-4a4 4 0 1 1 8 0v4' />
+            <path d='M21.121 20.121a3 3 0 1 0 -4.242 0c.418 .419 1.125 1.045 2.121 1.879c1.051 -.89 1.759 -1.516 2.121 -1.879z' />
+            <path d='M19 18v.01' />
+        </symbol>
+        <symbol
+            id='radial-question'
+            viewBox='0 0 24 24'
+            stroke-width='2'
+            stroke='#fff'
+            fill='none'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+        ><path
+            stroke='none'
+            d='M0 0h24v24H0z'
+            fill='none'
+        /><path d='M8 8a3.5 3 0 0 1 3.5 -3h1a3.5 3 0 0 1 3.5 3a3 3 0 0 1 -2 3a3 4 0 0 0 -2 4' /><path d='M12 19l0 .01' /></symbol>
+        <symbol
+            id='radial-play'
+            viewBox='0 0 24 24'
+            stroke-width='2'
+            stroke='#fff'
+            fill='none'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+        ><path
+            stroke='none'
+            d='M0 0h24v24H0z'
+            fill='none'
+        /><path d='M7 4v16l13 -8z' /></symbol>
+        <symbol
+            id='radial-trash'
+            viewBox='0 0 24 24'
+            stroke-width='2'
+            stroke='#fff'
+            fill='none'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+        ><path
+            stroke='none'
+            d='M0 0h24v24H0z'
+            fill='none'
+        /><path d='M4 7l16 0' /><path d='M10 11l0 6' /><path d='M14 11l0 6' /><path d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12' /><path d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3' /></symbol>
+        <symbol
+            id='radial-view'
+            viewBox='0 0 24 24'
+            stroke-width='2'
+            stroke='#fff'
+            fill='none'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+        ><path
+            stroke='none'
+            d='M0 0h24v24H0z'
+            fill='none'
+        /><path d='M13 5h8' /><path d='M13 9h5' /><path d='M13 15h8' /><path d='M13 19h5' /><path d='M3 4m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z' /><path d='M3 14m0 1a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v4a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z' /></symbol>
+        <symbol
+            id='radial-pencil'
+            viewBox='0 0 24 24'
+            stroke-width='2'
+            stroke='#fff'
+            fill='none'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+        ><path
+            stroke='none'
+            d='M0 0h24v24H0z'
+            fill='none'
+        /><path d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4' /><path d='M13.5 6.5l4 4' /></symbol>
+        <symbol
+            id='radial-pencil-plus'
+            viewBox='0 0 24 24'
+            stroke-width='2'
+            stroke='#fff'
+            fill='none'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+        ><path
+            stroke='none'
+            d='M0 0h24v24H0z'
+            fill='none'
+        /><path d='M4 20h4l10.5 -10.5a2.828 2.828 0 1 0 -4 -4l-10.5 10.5v4' /><path d='M13.5 6.5l4 4' /><path d='M16 19h6' /><path d='M19 16v6' /></symbol>
+        <symbol
+            id='radial-save'
+            viewBox='0 0 24 24'
+            fill='none'
+            stroke='#fff'
+            stroke-width='2'
+            stroke-linecap='round'
+            stroke-linejoin='round'
+        >
+            <path d='M6 4h10l4 4v10a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2' />
+            <path d='M12 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0' />
+            <path d='M14 4l0 4l-6 0l0 -4' />
+        </symbol>
+    </svg>
+</template>
+
+<script setup>
+import { ref, shallowRef, onMounted, onUnmounted, nextTick, useTemplateRef, watch } from 'vue';
+import { OriginMode } from '../../../base/cot.ts';
+import Subscription from '../../../base/subscription.ts';
+import RadialMenu from './RadialMenu.js';
+import './RadialMenu.css';
+import { useMapStore } from '../../../stores/map.ts';
+import mapgl from 'maplibre-gl';
+
+const mapStore = useMapStore();
+
+const props = defineProps({
+    size: {
+        type: Number,
+        default: 200
+    }
+});
+
+const emit = defineEmits(['close', 'click']);
+
+const iconsRef = useTemplateRef('icons');
+const menuItems = ref([]);
+const menu = shallowRef();
+const popup = shallowRef();
+const cot = shallowRef();
+
+watch(() => cot.value?.geometry, (newGeometry) => {
+    if (popup.value && newGeometry && newGeometry.type === 'Point') {
+        popup.value.setLngLat(newGeometry.coordinates);
+    }
+});
+
+let timer;
+onUnmounted(() => {
+    if (timer) clearInterval(timer);
+    if (menu.value) {
+        menu.value.close();
+    }
+    if (popup.value) {
+        popup.value.remove();
+    }
+});
+
+onMounted(async () => {
+    await genMenuItems();
+
+    nextTick(() => {
+        const container = document.createElement('div');
+        container.style.width = `${props.size}px`;
+        container.style.height = `${props.size}px`;
+
+        if (iconsRef.value) {
+            container.appendChild(iconsRef.value.cloneNode(true));
+        }
+
+        menu.value = new RadialMenu({
+            parent: container,
+            size: props.size,
+            closeOnClick: true,
+            menuItems: menuItems.value,
+            onClick: (item) => {
+                emit('click', `${mapStore.radial.mode}:${item.id}`);
+            },
+            onClose: () => {
+                emit('close');
+            }
+        });
+        menu.value.open();
+
+        if (mapStore.radial.lngLat) {
+             popup.value = new mapgl.Popup({
+                closeButton: false,
+                closeOnClick: true,
+                maxWidth: 'none',
+                anchor: 'center',
+                className: 'radial-menu-popup'
+            })
+            .setLngLat(mapStore.radial.lngLat)
+            .setDOMContent(container)
+            .addTo(mapStore.map);
+
+            popup.value.on('close', () => {
+                emit('close');
+            });
+        } else {
+            emit('close');
+        }
+
+        timer = setInterval(async () => {
+            if (cot.value) {
+                const updated = await mapStore.worker.db.get(cot.value.properties.id || cot.value.id, {
+                    mission: true
+                });
+                if (updated) cot.value = updated;
+            }
+        }, 500);
+    })
+});
+
+async function genMenuItems() {
+    menuItems.value.splice(0, menuItems.value.length);
+    if (mapStore.radial.mode === 'cot') {
+        if (mapStore.radial.cot && mapStore.radial.cot.properties) {
+            cot.value = await mapStore.worker.db.get(mapStore.radial.cot.properties.id, {
+                mission: true
+            });
+
+            if (!cot.value) throw new Error('Could not find marker');
+
+            if (cot.value.origin.mode === OriginMode.CONNECTION) {
+                menuItems.value.push({ id: 'edit', icon: '#radial-pencil' })
+                menuItems.value.push({ id: 'delete', icon: '#radial-trash' })
+
+                if (cot.value.geometry.type === 'Point') {
+                    menuItems.value.push({ id: 'lock', icon: '#radial-lock' })
+                }
+            } else if (cot.value.origin.mode === OriginMode.MISSION && cot.value.origin.mode_id) {
+
+                const sub = await Subscription.from(cot.value.origin.mode_id, localStorage.token);
+
+                if (sub.role && sub.role.permissions.includes("MISSION_WRITE")) {
+                    menuItems.value.push({ id: 'edit', icon: '#radial-pencil' })
+                    menuItems.value.push({ id: 'delete', icon: '#radial-trash' })
+                }
+            }
+
+            if (cot.value.properties.video) {
+                menuItems.value.push({ id: 'play', icon: '#radial-play' })
+            }
+        }
+
+        menuItems.value.push({ id: 'view', icon: '#radial-view' })
+    } else if (mapStore.radial.mode === 'feat') {
+        menuItems.value.push({ id: 'view', icon: '#radial-view' })
+    } else if (mapStore.radial.mode === 'context') {
+        menuItems.value.push({ id: 'new', icon: '#radial-pencil-plus' })
+        menuItems.value.push({ id: 'info', icon: '#radial-question' })
+    }
+}
+</script>

package/src/components/CloudTAK/RangeInput.vue

@@ -0,0 +1,155 @@
+<template>
+    <div
+        class='position-absolute end-0 text-white bg-dark card rounded'
+        style='
+            top: 56px;
+            z-index: 1;
+            width: 400px;
+            border-radius: 0px 6px 0px 0px;
+        '
+    >
+        <div class='card-header d-flex align-items-center'>
+            <div class='card-title'>
+                <IconCompass
+                    :size='25'
+                    stroke='1'
+                />
+
+                <span class='ms-2'>Range &amp; Bearing</span>
+            </div>
+            <div class='ms-auto'>
+                <TablerIconButton
+                    title='Close'
+                    @click='emit("close")'
+                >
+                    <IconX
+                        :size='20'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+        </div>
+        <div class='mx-2 my-2 row g-2'>
+            <div class='col-12'>
+                <TablerInput
+                    v-model='config.name'
+                    label='Name'
+                    @submit='submitPoint'
+                />
+            </div>
+            <div class='col-12'>
+                <Coordinate
+                    v-model='config.coordinates'
+                    :edit='true'
+                    :hover='true'
+                    :modes='["dd"]'
+                    @submit='submitPoint'
+                />
+            </div>
+            <div class='col-12'>
+                <PropertyBearing
+                    v-model='config.bearing'
+                    :edit='true'
+                    :hover='true'
+                />
+            </div>
+            <div class='col-12'>
+                <PropertyDistance
+                    v-model='config.range'
+                    :unit='mapStore.distanceUnit'
+                    :edit='true'
+                    :hover='true'
+                />
+            </div>
+            <div class='col-12'>
+                <button
+                    class='btn btn-primary w-100 mt-3'
+                    @click='submitPoint'
+                >
+                    Save
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { v4 as randomUUID } from 'uuid';
+import { ref, toRaw } from 'vue'
+import { destination } from '@turf/destination'
+import Coordinate from './util/Coordinate.vue';
+import PropertyBearing from './util/PropertyBearing.vue';
+import PropertyDistance from './util/PropertyDistance.vue';
+import {
+    TablerInput,
+    TablerIconButton
+} from '@tak-ps/vue-tabler';
+
+import {
+    IconX,
+    IconCompass
+} from '@tabler/icons-vue';
+
+import type { LngLatLike } from 'maplibre-gl'
+import { useMapStore } from '../../stores/map.ts';
+const mapStore = useMapStore();
+
+const emit = defineEmits([ 'close' ]);
+
+const center = mapStore.map.getCenter();
+
+const config = ref({
+    name: '',
+    range: 1,
+    bearing: 0,
+    coordinates: [
+        Math.round(center.lng * 1000000) / 1000000,
+        Math.round(center.lat * 1000000) / 1000000,
+    ]
+});
+
+async function submitPoint() {
+    const id = randomUUID();
+
+    const end = destination(
+        config.value.coordinates,
+        config.value.range,
+        config.value.bearing
+    )
+
+    await mapStore.worker.db.add({
+        id,
+        type: 'Feature',
+        path: '/',
+        properties: {
+            id,
+            type: 'u-rb-a',
+            how: 'h-g-i-g-o',
+            color: '#00FF00',
+            archived: true,
+            time: new Date().toISOString(),
+            start: new Date().toISOString(),
+            stale: new Date().toISOString(),
+            center: toRaw(config.value.coordinates),
+            bearing: config.value.bearing,
+            range: config.value.range,
+            callsign: toRaw(config.value.name || 'New Feature'),
+        },
+        geometry: {
+            type: 'LineString',
+            coordinates: [toRaw(config.value.coordinates), end.geometry.coordinates]
+        }
+    }, {
+        authored: true
+    });
+
+    if (mapStore.map) {
+        mapStore.map.flyTo({
+            center: config.value.coordinates as LngLatLike,
+            zoom: 14
+        });
+    }
+
+    emit('close');
+}
+</script>

package/src/components/CloudTAK/RangeRingsInput.vue

@@ -0,0 +1,269 @@
+<template>
+    <TablerModal size='md'>
+        <div class='modal-status bg-blue' />
+        <button
+            type='button'
+            class='btn-close'
+            aria-label='Close'
+            @click='emit("close")'
+        />
+        <div class='modal-header text-white'>
+            <div class='modal-title d-flex align-items-center'>
+                <IconTarget
+                    :size='32'
+                    stroke='1'
+                />
+                <span class='mx-2'>Range Rings</span>
+            </div>
+        </div>
+        <div class='modal-body text-white'>
+            <div class='mx-2 my-2'>
+                <TablerInput
+                    v-model='config.name'
+                    label='Name'
+                    @submit='submitRings'
+                />
+            </div>
+
+            <Coordinate
+                v-model='config.coordinates'
+                label='Origin'
+                :edit='true'
+                :hover='true'
+                :modes='["dd"]'
+                @submit='submitRings'
+            />
+
+            <div class='mx-2 border my-2'>
+                <template v-for='ring of config.rings'>
+                    <div class='position-relative'>
+                        <div
+                            v-if='config.rings.length > 1'
+                            class='position-absolute cursor-pointer'
+                            style='
+                                top: 4px;
+                                right: 4px;
+                            '
+                            @click='config.rings.splice(config.rings.indexOf(ring), 1)'
+                        >
+                            <IconTrash
+                                :size='18'
+                                stroke='1'
+                            />
+                        </div>
+
+                        <PropertyDistance
+                            v-model='ring.distance'
+                            class='py-2'
+                            label='Ring Diameter'
+                            :edit='true'
+                            :hover='true'
+                        />
+                    </div>
+                </template>
+
+                <div class='col-12 px-2 py-2'>
+                    <button
+                        class='btn btn-secondary btn-sm w-100'
+                        @click='config.rings.push({ distance: 1 })'
+                    >
+                        <IconPlus
+                            :size='18'
+                            stroke='1'
+                        />
+                        <span class='ms-2'>Add Ring</span>
+                    </button>
+                </div>
+            </div>
+
+            <div class='mx-2 my-2'>
+                <TablerSlidedown
+                    :arrow='true'
+                    :click-anywhere-expand='true'
+                >
+                    <div class='d-flex align-items-center w-100'>
+                        <span>Style Options</span>
+                        <div :style='previewStyle' />
+                    </div>
+                    <template #expanded>
+                        <TablerColour
+                            v-model='config.color'
+                            label='Color'
+                        />
+                        <TablerEnum
+                            v-model='config.style'
+                            label='Style'
+                            :options='["solid", "dashed", "dotted", "outlined"]'
+                        />
+                        <TablerRange
+                            v-model='config.width'
+                            label='Width'
+                            :min='1'
+                            :max='10'
+                            :step='1'
+                        />
+                        <TablerRange
+                            v-model='config.opacity'
+                            label='Opacity'
+                            :min='0'
+                            :max='1'
+                            :step='0.1'
+                        />
+                    </template>
+                </TablerSlidedown>
+            </div>
+
+            <button
+                class='btn btn-primary w-100 mt-3'
+                @click='submitRings'
+            >
+                Save
+            </button>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup lang='ts'>
+import { v4 as randomUUID } from 'uuid';
+import { ref, toRaw, computed } from 'vue'
+import Coordinate from './util/Coordinate.vue';
+import PropertyDistance from './util/PropertyDistance.vue';
+import Ellipse from '@turf/ellipse'
+import {
+    IconPlus,
+    IconTarget,
+    IconTrash
+} from '@tabler/icons-vue';
+import {
+    TablerInput,
+    TablerModal,
+    TablerColour,
+    TablerEnum,
+    TablerRange,
+    TablerSlidedown
+} from '@tak-ps/vue-tabler';
+import type { LngLatLike } from 'maplibre-gl'
+import { useMapStore } from '../../stores/map.ts';
+const mapStore = useMapStore();
+
+const emit = defineEmits([ 'close' ]);
+
+const center = mapStore.map.getCenter();
+
+const config = ref({
+    name: '',
+    type: 'u-d-p',
+    rings: [{
+        distance: 1
+    }],
+    coordinates: [
+        Math.round(center.lng * 1000000) / 1000000,
+        Math.round(center.lat * 1000000) / 1000000,
+    ],
+    color: '#d63939',
+    style: 'solid',
+    width: 3,
+    opacity: 1
+});
+
+const previewStyle = computed(() => {
+    const style = config.value.style === 'outlined' ? 'solid' : config.value.style;
+
+    return {
+        width: '100px',
+        borderTopWidth: `${config.value.width}px`,
+        borderTopStyle: style as 'solid' | 'dashed' | 'dotted',
+        borderTopColor: config.value.color,
+        opacity: config.value.opacity,
+        marginLeft: 'auto',
+        marginRight: '1rem'
+    };
+});
+
+async function submitRings() {
+    const id = randomUUID();
+
+    await mapStore.worker.db.add({
+        id,
+        type: 'Feature',
+        path: '/',
+        properties: {
+            id,
+            type: toRaw(config.value.type),
+            how: 'h-g-i-g-o',
+            color: toRaw(config.value.color),
+            archived: true,
+            'marker-color': toRaw(config.value.color),
+            'marker-opacity': toRaw(config.value.opacity),
+            time: new Date().toISOString(),
+            start: new Date().toISOString(),
+            stale: new Date().toISOString(),
+            center: toRaw(config.value.coordinates),
+            callsign: toRaw((config.value.name || '') + " Origin"),
+        },
+        geometry: {
+            type: 'Point',
+            coordinates: toRaw(config.value.coordinates)
+        }
+    }, {
+        authored: true
+    });
+
+    for (let i = 0; i < config.value.rings.length; i++) {
+        const ring = config.value.rings[i];
+
+        if (ring.distance === 0) continue;
+
+        const ringid = randomUUID();
+
+        await mapStore.worker.db.add({
+            id: ringid,
+            type: 'Feature',
+            path: '/',
+            properties: {
+                id: ringid,
+                type: 'u-d-c-c',
+                how: 'h-g-i-g-o',
+                color: toRaw(config.value.color),
+                stroke: toRaw(config.value.color),
+                'stroke-width': toRaw(config.value.width),
+                'stroke-style': toRaw(config.value.style),
+                'stroke-opacity': toRaw(config.value.opacity),
+                archived: true,
+                shape: {
+                    ellipse: {
+                        major: ring.distance * 1000,
+                        minor: ring.distance * 1000,
+                        angle: 360
+                    }
+                },
+                'fill-opacity': 0,
+                time: new Date().toISOString(),
+                start: new Date().toISOString(),
+                stale: new Date().toISOString(),
+                center: toRaw(config.value.coordinates),
+                callsign: toRaw((config.value.name || '') + " Ring #" + (i + 1)),
+            },
+            geometry: Ellipse(
+                config.value.coordinates,
+                ring.distance,
+                ring.distance,
+                {
+                    angle: 360
+                }
+            ).geometry
+        }, {
+            authored: true
+        });
+    }
+
+    if (mapStore.map) {
+        mapStore.map.flyTo({
+            center: config.value.coordinates as LngLatLike,
+            zoom: 14
+        });
+    }
+
+    emit('close');
+}
+</script>