@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/CoordInput.vue

@@ -0,0 +1,110 @@
+<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'>
+                Coordinate Entry
+            </div>
+        </div>
+        <div class='modal-body text-white'>
+            <div class='mx-2 my-2'>
+                <TablerInput
+                    v-model='config.name'
+                    label='Name'
+                    @submit='submitPoint'
+                />
+            </div>
+
+            <Coordinate
+                v-model='config.coordinates'
+                :edit='true'
+                :hover='true'
+                :modes='["dd"]'
+                @submit='submitPoint'
+            />
+            <Div class='d-flex justify-content-center'>
+                <CoordinateType
+                    v-model='config.type'
+                    class='pt-3'
+                    :size='24'
+                />
+            </div>
+            <button
+                class='btn btn-primary w-100 mt-3'
+                @click='submitPoint'
+            >
+                Save
+            </button>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup lang='ts'>
+import { v4 as randomUUID } from 'uuid';
+import { ref, toRaw } from 'vue'
+import Coordinate from './util/Coordinate.vue';
+import CoordinateType from './util/CoordinateType.vue';
+import {
+    TablerInput,
+    TablerModal,
+} 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',
+    coordinates: [
+        Math.round(center.lng * 1000000) / 1000000,
+        Math.round(center.lat * 1000000) / 1000000,
+    ]
+});
+
+async function submitPoint() {
+    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: '#00FF00',
+            archived: true,
+            time: new Date().toISOString(),
+            start: new Date().toISOString(),
+            stale: new Date().toISOString(),
+            center: toRaw(config.value.coordinates),
+            callsign: toRaw(config.value.name || 'New Feature'),
+        },
+        geometry: {
+            type: 'Point',
+            coordinates: toRaw(config.value.coordinates)
+        }
+    }, {
+        authored: true
+    });
+
+    if (mapStore.map) {
+        mapStore.map.flyTo({
+            center: config.value.coordinates as LngLatLike,
+            zoom: 14
+        });
+    }
+
+    emit('close');
+}
+</script>

package/src/components/CloudTAK/DrawTools.vue

@@ -0,0 +1,200 @@
+<template>
+    <TablerDropdown>
+        <template #default>
+            <TablerIconButton
+                title='Geometry Editing'
+                class='mx-2 hover-button'
+                :hover='false'
+            >
+                <IconPencil
+                    :size='40'
+                    stroke='1'
+                />
+            </TablerIconButton>
+        </template>
+        <template #dropdown>
+            <div
+                class='card py-1'
+                style='min-width: 300px;'
+            >
+                <div class='card-body'>
+                    <div class='card-title'>
+                        Drawing Tools
+                    </div>
+                </div>
+                <div class='card-body'>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='modal = ModalInputType.POINT'
+                    >
+                        <IconCursorText
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>Coordinate Input</span>
+                    </div>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='modal = ModalInputType.RANGE'
+                    >
+                        <IconCompass
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>Range &amp; Bearing</span>
+                    </div>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='modal = ModalInputType.RANGE_RINGS'
+                    >
+                        <IconTarget
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>Range Rings</span>
+                    </div>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='mapStore.draw.start(DrawToolMode.POINT)'
+                    >
+                        <IconPoint
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>Draw Point</span>
+                    </div>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='mapStore.draw.start(DrawToolMode.LINESTRING)'
+                    >
+                        <IconLine
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>Draw Line</span>
+                    </div>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='mapStore.draw.start(DrawToolMode.POLYGON)'
+                    >
+                        <IconPolygon
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>Draw Polygon</span>
+                    </div>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='mapStore.draw.start(DrawToolMode.RECTANGLE)'
+                    >
+                        <IconVector
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>Draw Rectangle</span>
+                    </div>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='mapStore.draw.start(DrawToolMode.CIRCLE)'
+                    >
+                        <IconCircle
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>Draw Circle</span>
+                    </div>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='mapStore.draw.start(DrawToolMode.SECTOR)'
+                    >
+                        <IconCone
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>Draw Sector</span>
+                    </div>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='mapStore.draw.start(DrawToolMode.FREEHAND)'
+                    >
+                        <IconLasso
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>Lasso Select</span>
+                    </div>
+                    <div
+                        class='col-12 py-1 px-2 hover-button cursor-pointer user-select-none'
+                        @click='modal = ModalInputType.IMPORT'
+                    >
+                        <IconFileImport
+                            :size='25'
+                            stroke='1'
+                        />
+                        <span class='ps-2'>GeoJSON Import</span>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </TablerDropdown>
+
+    <CoordInput
+        v-if='modal === ModalInputType.POINT'
+        @close='modal = ModalInputType.NONE'
+    />
+
+    <RangeRingsInput
+        v-if='modal === ModalInputType.RANGE_RINGS'
+        @close='modal = ModalInputType.NONE'
+    />
+
+    <RangeInput
+        v-if='modal === ModalInputType.RANGE'
+        @close='modal = ModalInputType.NONE'
+    />
+
+    <GeoJSONInput
+        v-if='modal === ModalInputType.IMPORT'
+        @close='modal = ModalInputType.NONE'
+    />
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue';
+import { DrawToolMode } from '../../stores/modules/draw.ts';
+import CoordInput from './CoordInput.vue';
+import RangeRingsInput from './RangeRingsInput.vue';
+import RangeInput from './RangeInput.vue';
+import GeoJSONInput from './GeoJSONInput.vue';
+import {
+    IconTarget,
+    IconLasso,
+    IconFileImport,
+    IconCone,
+    IconCircle,
+    IconVector,
+    IconPolygon,
+    IconLine,
+    IconPoint,
+    IconCompass,
+    IconCursorText,
+    IconPencil,
+} from '@tabler/icons-vue';
+import { useMapStore } from '../../stores/map';
+import {
+    TablerIconButton,
+    TablerDropdown,
+} from '@tak-ps/vue-tabler';
+
+enum ModalInputType {
+    NONE = 'none',
+    RANGE = 'range',
+    POINT = 'point',
+    IMPORT = 'import',
+    RANGE_RINGS = 'range_rings',
+}
+
+const modal = ref<ModalInputType>(ModalInputType.NONE);
+
+const mapStore = useMapStore();
+</script>

package/src/components/CloudTAK/FeatView.vue

@@ -0,0 +1,242 @@
+<template>
+    <div
+        class='position-absolute end-0 bottom-0 text-white bg-dark'
+        style='
+            z-index: 1;
+            width: 400px;
+            top: 56px;
+        '
+    >
+        <div
+            class='col-12 border-light border-bottom sticky-top'
+            style='
+                height: 90px;
+                border-radius: 0px;
+            '
+        >
+            <div class='col-12 card-header px-1 py-2'>
+                <div
+                    class='card-title mx-2 text-truncate'
+                    style='width: 280px'
+                    v-text='feat.properties?.name || "No Name"'
+                />
+            </div>
+            <div class='col-12 btn-list my-2 d-flex align-items-center mx-2'>
+                <TablerIconButton
+                    title='Zoom To'
+                    @click='zoomTo'
+                >
+                    <IconZoomPan
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+
+                <TablerIconButton
+                    v-if='overlay && ["basemap", "overlay"].includes(overlay.mode) && overlay.actions.feature.includes("fetch")'
+                    title='Cut to Marker'
+                    @click='cutFeature'
+                >
+                    <IconScissors
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+                <div
+                    class='ms-auto'
+                    style='margin-right: 14px;'
+                >
+                    <TablerIconButton
+                        v-if='mode === "default"'
+                        title='Raw View'
+                        @click='mode = "raw"'
+                    >
+                        <IconCode
+                            :size='32'
+                            stroke='1'
+                        />
+                    </TablerIconButton>
+
+                    <TablerIconButton
+                        v-if='mode === "raw"'
+                        title='Default View'
+                        @click='mode = "default"'
+                    >
+                        <IconX
+                            :size='32'
+                            stroke='1'
+                        />
+                    </TablerIconButton>
+                </div>
+            </div>
+        </div>
+
+        <div
+            class='col-12 overflow-auto'
+            style='height: calc(100vh - 90px)'
+        >
+            <template v-if='mode === "default"'>
+                <div class='col-12 px-2 py-2'>
+                    <Coordinate v-model='center' />
+                </div>
+
+                <div class='col-12 px-2 pb-2'>
+                    <div class='col-12'>
+                        <IconBlockquote
+                            :size='18'
+                            stroke='1'
+                            color='#6b7990'
+                            class='ms-2 me-1'
+                        />
+                        <label class='subheader user-select-none'>Remarks</label>
+                    </div>
+                    <div
+                        v-if='htmlDescription'
+                        class='mx-2'
+                    >
+                        <CopyField
+                            :model-value='htmlDescription'
+                            :rows='2'
+                            mode='text'
+                        />
+                    </div>
+                    <div
+                        v-else
+                        class='table-responsive rounded mx-2'
+                    >
+                        <table class='table card-table table-hover table-vcenter datatable'>
+                            <thead>
+                                <tr>
+                                    <th>Key</th>
+                                    <th>Value</th>
+                                </tr>
+                            </thead>
+                            <tbody class='bg-accent'>
+                                <template v-if='feat.properties'>
+                                    <tr
+                                        v-for='prop of Object.keys(feat.properties)'
+                                        :key='prop'
+                                    >
+                                        <td v-text='prop' />
+                                        <td>
+                                            <a
+                                                v-if='typeof feat.properties[prop] === "string" && feat.properties[prop].startsWith("http")'
+                                                :href='feat.properties[prop]'
+                                                target='_blank'
+                                                v-text='feat.properties[prop]'
+                                            />
+                                            <span
+                                                v-else
+                                                v-text='feat.properties[prop]'
+                                            />
+                                        </td>
+                                    </tr>
+                                </template>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </template>
+            <template v-else-if='mode === "raw"'>
+                <pre v-text='feat' />
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { v4 as randomUUID } from 'uuid';
+import { ref, computed } from 'vue';
+import { useMapStore } from '../../stores/map.ts';
+import { std } from '../../std.ts';
+import Overlay from '../../base/overlay.ts';
+import type { LngLatLike, MapGeoJSONFeature } from 'maplibre-gl';
+import type { Feature } from 'geojson';
+import pointOnFeature from '@turf/point-on-feature';
+import Coordinate from './util/Coordinate.vue';
+import CopyField from './util/CopyField.vue';
+import {
+    TablerIconButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconX,
+    IconScissors,
+    IconZoomPan,
+    IconBlockquote,
+    IconCode
+} from '@tabler/icons-vue';
+
+const mapStore = useMapStore();
+
+const props = defineProps<{
+    feat: Feature | MapGeoJSONFeature
+}>();
+
+const mode = ref('default');
+
+const overlay = computed<Overlay | null>(() => {
+    // @ts-expect-error Doesn't exist in typedef
+    const source: number | undefined = Number(props.feat.source);
+    if (!source || isNaN(source)) return null
+    const ov = mapStore.getOverlayById(source);
+    return ov;
+})
+
+const center = computed(() => {
+    return pointOnFeature(props.feat).geometry.coordinates;
+});
+
+const htmlDescription = computed(() => {
+    if (!props.feat.properties?.description) return null;
+    try {
+        const desc = JSON.parse(props.feat.properties.description);
+        if (desc['@type'] === 'html' && desc.value) {
+            return desc.value;
+        }
+    } catch {
+        return null;
+    }
+    return null;
+});
+
+async function cutFeature() {
+    if (!overlay.value) throw new Error("Could not determine Overlay");
+
+    const rawFeature = await std(`/api/basemap/${overlay.value.mode_id}/feature/${props.feat.id}`) as Feature;
+    const id = randomUUID();
+
+    if (
+        rawFeature.geometry.type !== "Point"
+        && rawFeature.geometry.type !== "LineString"
+        && rawFeature.geometry.type !== "Polygon"
+    ) {
+        throw new Error(`${rawFeature.geometry.type} geometry type is not currently supported`);
+    }
+
+    mapStore.toImport.push({
+        id,
+        type: 'Feature',
+        path: '/',
+        properties: {
+            id,
+            type: 'u-d-p',
+            how: 'h-g-i-g-o',
+            color: '#00FF00',
+            archived: true,
+            time: new Date().toISOString(),
+            start: new Date().toISOString(),
+            stale: new Date().toISOString(),
+            center: pointOnFeature(rawFeature).geometry.coordinates,
+            callsign: 'New Feature'
+        },
+        geometry: rawFeature.geometry
+    });
+}
+
+function zoomTo() {
+    mapStore.map.flyTo({
+        center: center.value as LngLatLike,
+        zoom: 14
+    })
+}
+</script>