@tak-ps/cloudtak 12.54.0 → 12.94.0

package/src/components/CloudTAK/GeoJSONInput.vue

@@ -1,226 +0,0 @@
-<template>
-    <TablerModal size='lg'>
-        <div class='modal-status bg-red' />
-        <button
-            type='button'
-            class='btn-close'
-            aria-label='Close'
-            @click='emit("close")'
-        />
-        <div class='modal-header text-white'>
-            <div class='d-flex align-items-center'>
-                <IconFileImport
-                    :size='28'
-                    stroke='1'
-                />
-                <span class='mx-2'>Import GeoJSON to Editable Features</span>
-            </div>
-        </div>
-        <div class='modal-body text-white'>
-            <TablerLoading v-if='loading' />
-            <div
-                v-else-if='!feats.length'
-                class='row mx-2'
-            >
-                <div class='col-12'>
-                    <TablerFileInput
-                        type='file'
-                        accept='.json, .geojson'
-                        label='File'
-                        @change='processUpload($event)'
-                    />
-                </div>
-
-                <div class='col-12 pt-3'>
-                    <TablerInlineAlert
-                        v-if='error'
-                        title='An Error Occurred'
-                        :description='error.message'
-                    />
-                </div>
-
-                <div class='col-12 pt-3'>
-                    <TablerInlineAlert
-                        title='FYI'
-                        description='Large GeoJSON files should be uploaded via the Imports menu'
-                    />
-                </div>
-
-                <div class='col-12 pt-3'>
-                    <TablerButton
-                        class='btn-primary w-100'
-                        :disabled='!file'
-                        @click='uploadGeoJSON'
-                    >
-                        Upload
-                    </TablerButton>
-                </div>
-            </div>
-            <div
-                v-else-if='feats.length'
-                class='row mx-2'
-            >
-                <div class='col-12 pt-3'>
-                    <label class='mx-2 user-select-none'>Features To Import:</label>
-
-                    <div
-                        v-if='feats.length !== 0'
-                        class='col-12 overflow-auto'
-                        style='
-                            max-height: 40vh;
-                        '
-                    >
-                        <FeatureRow
-                            v-for='feat of feats'
-                            :key='feat.id'
-                            :feature='feat'
-                            :hover='false'
-                            :delete-button='false'
-                        />
-                    </div>
-                    <TablerNone
-                        v-else
-                        :compact='true'
-                        :create='false'
-                        label='Features'
-                    />
-                </div>
-
-                <div class='col-12 pt-3'>
-                    <TablerButton
-                        class='btn-primary w-100'
-                        @click='saveToMap'
-                    >
-                        Save To Map
-                    </TablerButton>
-                </div>
-            </div>
-        </div>
-    </TablerModal>
-</template>
-
-<script setup lang='ts'>
-import { ref } from 'vue';
-import {
-    TablerNone,
-    TablerModal,
-    TablerLoading,
-    TablerButton,
-    TablerInlineAlert,
-    TablerFileInput,
-} from '@tak-ps/vue-tabler';
-import type CoT from '../../base/cot.ts';
-import { useMapStore } from '../../stores/map.ts';
-import { normalize_geojson } from '@tak-ps/node-cot/normalize_geojson';
-import {
-    IconFileImport,
-} from '@tabler/icons-vue';
-import type { LngLatBoundsLike } from 'maplibre-gl';
-import FeatureRow from './util/FeatureRow.vue';
-import { bbox } from '@turf/bbox';
-import type { InputFeature } from '../../types.ts';
-
-const mapStore = useMapStore();
-
-const props = defineProps({
-    features: {
-        type: Array as () => InputFeature[],
-        required: false,
-        default: () => []
-    }
-});
-
-const error = ref<Error | undefined>();
-const file = ref<File | undefined>();
-
-const feats = ref<InputFeature[]>(props.features || []);
-
-const emit = defineEmits(['close', 'done']);
-
-const loading = ref(false);
-
-async function processUpload(event: Event) {
-    if (!event.target || !(event.target instanceof HTMLInputElement) || !event.target.files) return;
-    if (event.target.files.length === 0) return;
-
-    file.value = event.target.files[0];
-}
-
-async function uploadGeoJSON() {
-    if (!file.value) return;
-
-    loading.value = true;
-    feats.value = [];
-
-    const reader = new FileReader();
-    reader.readAsText(file.value);
-
-    reader.onload = async (e) => {
-        try {
-            if (!e.target || !e.target.result) throw new Error('File read error: No content');
-
-            const fc = JSON.parse(String(e.target.result));
-
-            if (!fc || !fc.features || !Array.isArray(fc.features)) {
-                throw new Error('Invalid GeoJSON format');
-            }
-
-            // TODO Ideally CloudTAK in the future will use CoTs natively so we will
-            // Remove this To_GeoJSON conversion
-
-            const name = file.value?.name ? file.value.name.replace(/\..*$/, '') : new Date().toISOString().replace(/T.*/, '') + ' Import';
-
-            for (const feat of fc.features) {
-                try {
-                    const norm = await normalize_geojson(feat);
-
-                    norm.path = `/${name}/`
-
-                    // TODO Remote once we support the metadata property throughout
-                    // @ts-expect-error The "metadata" property is jamming us up - Once we swithc to node-cot this will be solved
-                    feats.value.push(norm)
-                } catch (err) {
-                    console.error('Error normalizing GeoJSON feature:', feat, err);
-                }
-            }
-
-            loading.value = false;
-        } catch (err) {
-            loading.value = false;
-            error.value = err instanceof Error ? err : new Error(String(err));
-        }
-    };
-}
-
-async function saveToMap() {
-    loading.value = true;
-
-    const bounds = bbox({
-        type: 'FeatureCollection',
-        features: feats.value
-    });
-
-    mapStore.map.fitBounds(bounds as LngLatBoundsLike, {
-        duration: 0,
-        padding: {
-            top: 25,
-            bottom: 25,
-            left: 25,
-            right: 25
-        }
-    });
-
-    const adding: Array<Promise<CoT>> = feats.value.map(feat =>
-        mapStore.worker.db.add(JSON.parse(JSON.stringify(feat)), {
-            authored: true
-        })
-    );
-
-    await Promise.all(adding);
-
-    loading.value = false;
-
-    emit('done');
-    emit('close');
-}
-</script>

package/src/components/CloudTAK/MainMenu.vue

@@ -1,190 +0,0 @@
-<template>
-    <TablerModal
-        v-if='mapStore.isMobileDetected'
-        size='xl'
-    >
-        <div
-            ref='menu'
-            class='position-relative w-100 h-100 px-0'
-        >
-            <MainMenuContents
-                :compact='false'
-                :modal='true'
-                @close='router.push("/")'
-            />
-        </div>
-    </TablerModal>
-    <template v-else>
-        <div
-            ref='container'
-            class='position-absolute end-0 bottom-0 start-0'
-            :class='{
-                "start-0 end-0 top-0 bottom-0": resizing
-            }'
-        />
-        <div
-            class='position-absolute end-0 bottom-0 text-white d-flex'
-            role='menubar'
-            :class='{
-                "bg-dark": !compact,
-            }'
-            style='z-index: 1; top: 56px;'
-            :style='`
-            width: ${compact ? "60px" : `${menuWidth}px`};
-            min-width: ${compact ? "60px" : `400px`};
-            ${compact ? "background-color: rgb(0, 0, 0, 0.5)" : ""}
-        `'
-        >
-            <div
-                v-if='!compact'
-                ref='resize'
-                class='resize hover cursor-drag'
-            />
-            <div
-                ref='menu'
-                class='position-relative w-100 h-100 px-0'
-            >
-                <MainMenuContents :compact='compact' />
-            </div>
-        </div>
-    </template>
-</template>
-
-<script setup lang='ts'>
-import { ref, watch, useTemplateRef, onMounted } from 'vue';
-import {
-    TablerModal,
-} from '@tak-ps/vue-tabler';
-import { useMapStore } from '../../stores/map.ts';
-import { useRouter } from 'vue-router';
-import MainMenuContents from './MainMenuContents.vue';
-
-const router = useRouter();
-
-const mapStore = useMapStore();
-
-const resizing = ref(false);
-
-const menu = useTemplateRef('menu');
-const resize = useTemplateRef('resize');
-const container = useTemplateRef('container');
-
-const menuWidth = ref<number>(400);
-
-const props = defineProps({
-    compact: Boolean,
-})
-
-watch(props, () => {
-    if (props.compact && mapStore.toastOffset.x !== 70) {
-        mapStore.toastOffset.x = 70;
-    } else if (!props.compact && mapStore.toastOffset.x !== menuWidth.value + 10) {
-        mapStore.toastOffset.x = menuWidth.value + 10;
-    }
-});
-
-watch(menuWidth, () => {
-    mapStore.toastOffset.x = menuWidth.value + 10;
-});
-
-watch(resize, (newVal, oldVal, onCleanup) => {
-    if (resize.value && container.value && menu.value) {
-        resizing.value = false;
-
-        let beginWidth = menuWidth.value;
-        let beginX = resize.value.getBoundingClientRect().x;
-        let deltaX = 0;
-
-        const onStart = () => {
-            if (!resize.value) return;
-            beginWidth = menuWidth.value;
-            beginX = resize.value.getBoundingClientRect().x;
-            deltaX = 0;
-            resizing.value = true;
-        };
-
-        const onMove = (clientX: number, e: Event) => {
-            deltaX = beginX - clientX;
-
-            if (resizing.value) {
-                menuWidth.value = beginWidth + deltaX;
-                e.preventDefault();
-            }
-        };
-
-        const onEnd = () => {
-            resizing.value = false;
-        };
-
-        const onMouseDown = () => onStart();
-        const onMouseMove = (e: MouseEvent) => onMove(e.clientX, e);
-        const onMouseUp = () => onEnd();
-
-        const onTouchStart = () => onStart();
-        const onTouchMove = (e: TouchEvent) => onMove(e.touches[0].clientX, e);
-        const onTouchEnd = () => onEnd();
-
-        const resizeEl = resize.value;
-        const menuEl = menu.value;
-        const containerEl = container.value;
-
-        resizeEl.addEventListener("mousedown", onMouseDown);
-        resizeEl.addEventListener("touchstart", onTouchStart);
-        resizeEl.addEventListener("mouseup", onMouseUp);
-        resizeEl.addEventListener("touchend", onTouchEnd);
-
-        menuEl.addEventListener("mousemove", onMouseMove);
-        menuEl.addEventListener("touchmove", onTouchMove);
-        menuEl.addEventListener("mouseup", onMouseUp);
-        menuEl.addEventListener("touchend", onTouchEnd);
-
-        containerEl.addEventListener("mousemove", onMouseMove);
-        containerEl.addEventListener("touchmove", onTouchMove);
-        containerEl.addEventListener("mouseup", onMouseUp);
-        containerEl.addEventListener("touchend", onTouchEnd);
-
-        onCleanup(() => {
-            resizeEl.removeEventListener("mousedown", onMouseDown);
-            resizeEl.removeEventListener("touchstart", onTouchStart);
-            resizeEl.removeEventListener("mouseup", onMouseUp);
-            resizeEl.removeEventListener("touchend", onTouchEnd);
-
-            menuEl.removeEventListener("mousemove", onMouseMove);
-            menuEl.removeEventListener("touchmove", onTouchMove);
-            menuEl.removeEventListener("mouseup", onMouseUp);
-            menuEl.removeEventListener("touchend", onTouchEnd);
-
-            containerEl.removeEventListener("mousemove", onMouseMove);
-            containerEl.removeEventListener("touchmove", onTouchMove);
-            containerEl.removeEventListener("mouseup", onMouseUp);
-            containerEl.removeEventListener("touchend", onTouchEnd);
-        });
-    }
-})
-
-onMounted(async () => {
-    mapStore.toastOffset.x = props.compact ? 70 : menuWidth.value + 10;
-})
-</script>
-
-<style scoped>
-.resize {
-   height: 100%;
-   width: 14px;
-   cursor: col-resize;
-   flex-shrink: 0;
-   position: relative;
-   z-index: 10;
-   user-select: none;
-}
-.resize::before {
-   content: "";
-   position: absolute;
-   top: 50%;
-   left: 50%;
-   transform: translate(-50%, -50%);
-   width: 3px;
-   height: 15px;
-   border-inline: 1px solid #fff;
-}
-</style>