@tak-ps/cloudtak 12.54.0

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

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

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

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

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