@tak-ps/cloudtak 12.54.0 → 12.94.0

package/src/components/CloudTAK/util/DrawOverlay.vue

@@ -1,254 +0,0 @@
-<template>
-    <div
-        class='position-absolute bottom-0 text-white bg-dark rounded-top'
-        style='
-            z-index: 1;
-            left: calc(50% - 250px);
-            width: 500px;
-        '
-    >
-        <div
-            v-if='mapStore.draw.mode === DrawToolMode.POINT'
-            class='card user-select-none'
-        >
-            <div class='card-header'>
-                <CoordinateType
-                    v-model='mapStore.draw.point.type'
-                />
-
-                <div class='ms-auto btn-list'>
-                    <TablerIconButton
-                        title='Cancel Editing'
-                        @click='mapStore.draw.stop()'
-                    >
-                        <IconX
-                            :size='24'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </div>
-            </div>
-        </div>
-        <div
-            v-else-if='mapStore.draw.mode === DrawToolMode.CIRCLE'
-            class='card user-select-none'
-        >
-            <div class='card-header'>
-                <IconCircle
-                    :size='24'
-                    stroke='1'
-                />
-                <span class='mx-2'>Circle Editing</span>
-
-                <div class='ms-auto btn-list'>
-                    <TablerIconButton
-                        title='Cancel Editing'
-                        @click='mapStore.draw.stop()'
-                    >
-                        <IconX
-                            :size='24'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </div>
-            </div>
-        </div>
-        <div
-            v-else-if='mapStore.draw.mode === DrawToolMode.RECTANGLE'
-            class='card user-select-none'
-        >
-            <div class='card-header'>
-                <IconVector
-                    :size='24'
-                    stroke='1'
-                /><span class='mx-2'>Rectangle Editing</span>
-
-                <div class='ms-auto btn-list'>
-                    <TablerIconButton
-                        title='Cancel Editing'
-                        @click='mapStore.draw.stop()'
-                    >
-                        <IconX
-                            :size='24'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </div>
-            </div>
-        </div>
-        <div
-            v-else-if='mapStore.draw.mode === DrawToolMode.LINESTRING'
-            class='card user-select-none'
-        >
-            <div class='card-header'>
-                <IconLine
-                    :size='24'
-                    stroke='1'
-                /><span class='mx-2'>Line Editing</span>
-
-                <div class='ms-auto btn-list'>
-                    <TablerIconButton
-                        title='Cancel Editing'
-                        @click='mapStore.draw.stop()'
-                    >
-                        <IconX
-                            :size='24'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </div>
-            </div>
-        </div>
-        <div
-            v-else-if='mapStore.draw.mode === DrawToolMode.POLYGON'
-            class='card user-select-none'
-        >
-            <div class='card-header'>
-                <IconPolygon
-                    :size='24'
-                    stroke='1'
-                /><span class='mx-2'>Polygon Editing</span>
-
-                <div class='ms-auto btn-list'>
-                    <TablerIconButton
-                        title='Cancel Editing'
-                        @click='mapStore.draw.stop()'
-                    >
-                        <IconX
-                            :size='24'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </div>
-            </div>
-        </div>
-        <div
-            v-else-if='mapStore.draw.mode === DrawToolMode.SECTOR'
-            class='card user-select-none'
-        >
-            <div class='card-header'>
-                <IconCone
-                    :size='24'
-                    stroke='1'
-                /><span class='mx-2'>Sector Editing</span>
-
-                <div class='ms-auto btn-list'>
-                    <TablerIconButton
-                        title='Cancel Editing'
-                        @click='mapStore.draw.stop()'
-                    >
-                        <IconX
-                            :size='24'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </div>
-            </div>
-        </div>
-        <div
-            v-else-if='mapStore.draw.mode === DrawToolMode.FREEHAND'
-            class='card user-select-none'
-        >
-            <div class='card-header'>
-                <IconLasso
-                    :size='24'
-                    stroke='1'
-                /><span class='mx-2'>Lasso Select</span>
-
-                <div class='ms-auto btn-list'>
-                    <TablerIconButton
-                        :title='opened ? "Open Settings" : "Close Settings"'
-                        @click='opened = !opened'
-                    >
-                        <IconChevronDown
-                            v-if='opened'
-                            :size='24'
-                            stroke='1'
-                        />
-                        <IconChevronUp
-                            v-else
-                            :size='24'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-
-                    <TablerIconButton
-                        title='Cancel Editing'
-                        @click='mapStore.draw.stop()'
-                    >
-                        <IconX
-                            :size='24'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </div>
-            </div>
-            <div
-                v-if='opened'
-                class='card-body'
-            >
-                <TablerEnum
-                    v-model='mapStore.draw.lasso.overlay'
-                    label='Layer Selection'
-                    description='Features will be selected from the chosen layer.'
-                    default='CoT Icons'
-                    :options='
-                        mapStore.overlays
-                            .filter(overlay => overlay.actions.feature.includes("query") || overlay.id === -1)
-                            .map(overlay => overlay.name)
-                    '
-                />
-            </div>
-        </div>
-        <div
-            v-else-if='mapStore.draw.mode === DrawToolMode.SELECT'
-            class='card user-select-none'
-        >
-            <div class='card-header'>
-                <IconPencil
-                    :size='24'
-                    stroke='1'
-                /><span class='mx-2'>Editing Existing Feature</span>
-
-                <div class='ms-auto btn-list'>
-                    <TablerIconButton
-                        title='Cancel Editing'
-                        @click='mapStore.draw.stop()'
-                    >
-                        <IconX
-                            :size='24'
-                            stroke='1'
-                        />
-                    </TablerIconButton>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref } from 'vue';
-import CoordinateType from '../util/CoordinateType.vue';
-import { DrawToolMode } from '../../../stores/modules/draw.ts';
-import { useMapStore } from '../../../stores/map.ts';
-import {
-    TablerEnum,
-    TablerIconButton
-} from '@tak-ps/vue-tabler'
-import {
-    IconX,
-    IconLine,
-    IconPencil,
-    IconChevronUp,
-    IconChevronDown,
-    IconCircle,
-    IconLasso,
-    IconCone,
-    IconVector,
-    IconPolygon,
-} from '@tabler/icons-vue';
-
-const mapStore = useMapStore();
-
-const opened = ref(false);
-</script>

package/src/components/CloudTAK/util/EmptyInfo.vue

@@ -1,71 +0,0 @@
-<template>
-    <div
-        class='col-12 d-flex py-2 px-2 align-items-center user-select-none'
-        :class='{
-            "justify-content-center": !props.button
-        }'
-    >
-        <template v-if='props.type === "Channels"'>
-            <IconAlertCircle
-                :size='32'
-                stroke='2'
-                color='red'
-                class='mx-2'
-            />
-
-            <div class='text-red'>
-                No Channels are active
-            </div>
-
-            <div
-                v-if='props.button'
-                class='ms-auto'
-            >
-                <TablerIconButton
-                    title='Channel Selection'
-                    @click='router.push("/menu/channels")'
-                >
-                    <IconAffiliate
-                        :size='32'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-            </div>
-        </template>
-        <template v-else-if='props.type === "Missions"'>
-            <IconAlertCircle
-                :size='32'
-                stroke='2'
-                class='mx-2'
-            />
-
-            <div class='text-red'>
-                No Data Syncs have been subscribed to that have Write Access
-            </div>
-        </template>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { useRouter } from 'vue-router';
-import {
-    IconAffiliate,
-    IconAlertCircle
-} from '@tabler/icons-vue';
-import {
-    TablerIconButton
-} from '@tak-ps/vue-tabler';
-
-const router = useRouter();
-
-const props = defineProps({
-    type: {
-        type: String,
-        default: 'Channels'
-    },
-    button: {
-        type: Boolean,
-        default: true
-    }
-})
-</script>

package/src/components/CloudTAK/util/FeatureIcon.vue

@@ -1,134 +0,0 @@
-<template>
-    <canvas
-        v-if='supportedIcon'
-        ref='imgCanvas'
-        :width='props.size'
-        :height='props.size'
-    />
-    <!-- Icons are in order of most preferred display => Least-->
-    <IconPointFilled
-        v-else-if='feature.properties && feature.properties.type === "u-d-p"'
-        :size='props.size'
-        :color='feature.properties["marker-color"]'
-    />
-    <IconCircle
-        v-else-if='feature.properties && feature.properties.type === "u-d-c-c"'
-        :size='props.size'
-        :color='feature.properties.stroke || "white"'
-        stroke='1'
-    />
-    <IconVideo
-        v-else-if='feature.properties && feature.properties.type === "b-m-p-s-p-loc"'
-        :size='props.size'
-        :color='feature.properties.stroke || "white"'
-        stroke='1'
-    />
-    <IconRoute
-        v-else-if='feature.properties && feature.properties.type === "b-m-r"'
-        :size='props.size'
-        :color='feature.properties.stroke || "white"'
-        stroke='1'
-    />
-    <IconLine
-        v-else-if='feature.geometry && feature.geometry.type === "LineString"'
-        :size='props.size'
-        :color='feature.properties.stroke || "white"'
-        stroke='1'
-    />
-    <IconCone
-        v-else-if='feature.properties && feature.properties.sensor'
-        :size='props.size'
-        :color='feature.properties.stroke || "white"'
-        stroke='1'
-    />
-    <IconPolygon
-        v-else-if='feature.geometry && feature.geometry.type === "Polygon"'
-        :size='props.size'
-        :color='feature.properties.fill || "white"'
-        stroke='1'
-    />
-    <ContactPuck
-        v-else-if='feature.properties && feature.properties.group'
-        :size='props.size'
-        :team='feature.properties.group.name'
-    />
-    <IconMapPin
-        v-else
-        :size='props.size'
-        stroke='1'
-    />
-</template>
-
-<script setup lang='ts'>
-import { useTemplateRef, watch, computed } from 'vue';
-import ContactPuck from './ContactPuck.vue'
-import {
-    IconVideo,
-    IconCircle,
-    IconRoute,
-    IconPointFilled,
-    IconMapPin,
-    IconLine,
-    IconCone,
-    IconPolygon,
-} from '@tabler/icons-vue';
-import { useMapStore } from '../../../stores/map.ts';
-const mapStore = useMapStore();
-
-const props = defineProps({
-    feature: {
-        type: Object,
-        required: true
-    },
-    size: {
-        type: Number,
-        default: 20
-    }
-});
-
-const canvas = useTemplateRef<HTMLCanvasElement>('imgCanvas');
-
-const supportedIcon = computed<string | null>(() => {
-    if (!props.feature.properties.icon) return null;
-
-    if (props.feature.properties.icon.startsWith('COT_MAPPING_2525C')) {
-        return props.feature.properties.type;
-    } else {
-        const icon = mapStore.map.getImage(props.feature.properties.icon)
-        if (icon) {
-            return props.feature.properties.icon;
-        } else {
-            return null;
-        }
-    }
-});
-
-watch(canvas, async () => {
-    if (!canvas.value) return;
-
-    if (!supportedIcon.value) return;
-    const icon = mapStore.map.getImage(supportedIcon.value)
-    if (!icon) return;
-
-    const context = canvas.value.getContext('2d');
-
-    canvas.value.height = props.size;
-    canvas.value.width = props.size;
-
-    if (!context) return;
-
-    context.drawImage(
-        await createImageBitmap(new ImageData(
-            // @ts-expect-error icon.data.data issue
-            new Uint8ClampedArray(icon.data.data, icon.data.width, icon.data.height),
-            icon.data.width,
-            icon.data.height,
-        )),
-        0, 0,
-        icon.data.width,
-        icon.data.height,
-        0,0,
-        props.size,props.size
-    );
-})
-</script>

package/src/components/CloudTAK/util/FeatureRow.vue

@@ -1,206 +0,0 @@
-<template>
-    <div
-        v-if='!isDeleted'
-        class='w-100'
-    >
-        <Contact
-            v-if='feature.properties.group'
-            class='px-2 py-2 w-100'
-            :button-chat='false'
-            :compact='compact'
-            :contact='{
-                "uid": feature.properties.id,
-                "callsign": feature.properties.callsign,
-                "team": feature.properties.group.name,
-                "notes": ""
-            }'
-        />
-        <StandardItem
-            v-else
-            class='w-100 d-flex flex-row gap-3 mb-2 align-items-center'
-            :class='{
-                "cursor-pointer": isZoomable && props.hover,
-                "cursor-default": !isZoomable || props.hover === false,
-                "hover": hover
-            }'
-            :hover='hover'
-            @click.exact='flyToClick'
-            @click.ctrl='selectClick'
-        >
-            <div
-                v-if='props.gripHandle'
-                :id='feature.id'
-                class='d-flex drag-handle cursor-grab ms-2 align-items-center'
-            >
-                <IconGripVertical
-                    :size='18'
-                    stroke='1'
-                />
-            </div>
-
-            <div
-                class='icon-wrapper d-flex align-items-center justify-content-center rounded-circle'
-                :class='{
-                    "ms-2": !props.gripHandle
-                }'
-            >
-                <FeatureIcon
-                    :feature='feature'
-                />
-            </div>
-
-            <div
-                class='flex-grow-1 d-flex flex-column gap-1 py-2'
-                style='min-width: 0;'
-            >
-                <div class='d-flex align-items-center gap-2'>
-                    <span
-                        class='fw-semibold text-break'
-                        v-text='feature.properties.callsign || feature.properties.name || "Unnamed"'
-                    />
-                </div>
-            </div>
-
-            <div class='align-self-center me-2 btn-list hover-button-hidden'>
-                <TablerIconButton
-                    v-if='infoButton'
-                    title='View Info'
-                    @click.stop.prevent='router.push(`/cot/${feature.id}`)'
-                >
-                    <IconListDetails
-                        :size='20'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-
-                <TablerDelete
-                    v-if='deleteButton && deleteAction === "delete"'
-                    :size='20'
-                    displaytype='icon'
-                    @delete='deleteCOT'
-                />
-                <TablerIconButton
-                    v-else-if='deleteButton'
-                    title='Remove'
-                    @click.stop.prevent='deleteCOT'
-                >
-                    <IconTrash
-                        :size='20'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-            </div>
-        </StandardItem>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { useRouter } from 'vue-router';
-import { ref, onMounted } from 'vue';
-import COT from '../../../base/cot.ts';
-import FeatureIcon from './FeatureIcon.vue';
-import Contact from './Contact.vue';
-import StandardItem from './StandardItem.vue';
-import {
-    TablerDelete,
-    TablerIconButton
-} from '@tak-ps/vue-tabler';
-import {
-    IconListDetails,
-    IconGripVertical,
-    IconTrash,
-} from '@tabler/icons-vue';
-import { useMapStore } from '../../../stores/map.ts';
-const mapStore = useMapStore();
-
-const props = defineProps({
-    feature: {
-        type: Object,
-        required: true
-    },
-    select: {
-        type: Boolean,
-        default: false
-    },
-    deleteButton: {
-        type: Boolean,
-        default: true
-    },
-    deleteAction: {
-        type: String,
-        default: 'delete' //emit or delete
-    },
-    gripHandle: {
-        type: Boolean,
-        default: false
-    },
-    infoButton: {
-        type: Boolean,
-        default: false
-    },
-    hover: {
-        type: Boolean,
-        default: true
-    },
-    compact: {
-        type: Boolean,
-        default: true
-    }
-});
-
-const router = useRouter();
-const emit = defineEmits(['delete']);
-
-const isDeleted = ref(false);
-const isDeleting = ref(false);
-const isZoomable = ref(false);
-
-onMounted(async () => {
-    const cot = await mapStore.worker.db.get(props.feature.id, {
-        mission: true
-    })
-
-    isZoomable.value = cot ? true : false;
-})
-
-async function deleteCOT() {
-    if (props.deleteAction === 'delete') {
-        isDeleting.value = true;
-
-        await mapStore.worker.db.remove(props.feature.id);
-
-        isDeleting.value = false;
-        isDeleted.value = true;
-    } else {
-        emit('delete');
-    }
-}
-
-async function selectClick() {
-    if (!props.select && !(props.feature instanceof COT)) return;
-
-    mapStore.selected.set(props.feature.id, props.feature as COT);
-}
-
-async function flyToClick() {
-    if (!props.hover || !isZoomable.value || isDeleting.value || isDeleted.value) return;
-
-    const cot = await mapStore.worker.db.get(props.feature.id, {
-        mission: true
-    });
-
-    if (!cot) throw new Error('Could not find marker');
-
-    cot.flyTo();
-}
-</script>
-
-<style scoped>
-.icon-wrapper {
-    width: 3rem;
-    height: 3rem;
-    min-width: 3rem;
-    min-height: 3rem;
-    flex-shrink: 0;
-}
-</style>