@tak-ps/cloudtak 12.54.0 → 12.94.0

package/src/components/CloudTAK/CoordInput.vue

@@ -1,110 +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'>
-                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

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

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