@tak-ps/cloudtak 12.54.0 → 12.55.0

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

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

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

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