@tak-ps/cloudtak 12.54.0

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

@@ -0,0 +1,125 @@
+<template>
+    <div class='col-12 d-flex flex-column gap-2'>
+        <template v-if='props.disabled'>
+            <div
+                v-for='item in props.items'
+                :key='item.id'
+            >
+                <slot
+                    name='item'
+                    :item='item'
+                />
+            </div>
+        </template>
+        <template v-else>
+            <div
+                class='col-12 d-flex py-2 btn-list border-bottom'
+            >
+                <TablerIconButton
+                    v-if='selected.size < props.items.length'
+                    title='Select All'
+                    @click='props.items.forEach(item => selected.add(item.id))'
+                >
+                    <IconSelectAll
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+
+                <TablerIconButton
+                    v-if='selected.size > 0'
+                    title='Deselect All'
+                    @click='selected.clear()'
+                >
+                    <IconDeselect
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+
+                <div
+                    class='ms-auto me-2'
+                >
+                    <slot
+                        name='buttons'
+                        :disabled='selected.size === 0'
+                    />
+                </div>
+            </div>
+
+            <template
+                v-for='item in props.items'
+                :key='item.id'
+            >
+                <div
+                    class='d-flex align-items-center rounded cursor-pointer'
+                    :class='{
+                        "hover": props.hover
+                    }'
+                    @click='selected.has(item.id) ? selected.delete(item.id) : selected.add(item.id)'
+                >
+                    <div
+                        class='mx-2'
+                    >
+                        <IconCircleFilled
+                            v-if='selected.has(item.id)'
+                            :size='24'
+                            stroke='1'
+                        />
+                        <IconCircle
+                            v-else
+                            :size='24'
+                            stroke='1'
+                        />
+                    </div>
+
+                    <slot
+                        name='item'
+                        :item='item'
+                    />
+                </div>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts' generic='T extends SelectableItem'>
+import { ref } from 'vue';
+import {
+    TablerIconButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconCircleFilled,
+    IconSelectAll,
+    IconDeselect,
+    IconCircle
+} from '@tabler/icons-vue';
+
+export interface SelectableItem {
+    id: number | string;
+}
+
+defineSlots<{
+    item: { item: T };
+    buttons: { disabled: boolean };
+}>();
+
+const props = withDefaults(defineProps<{
+    disabled?: boolean
+    hover?: boolean
+    items: T[]
+}>(), {
+    disabled: false,
+    hover: true
+})
+
+const selected = ref<Set<string | number>>(new Set());
+
+interface GenericSelectExpose {
+  selected: Set<string | number>;
+}
+
+defineExpose<GenericSelectExpose>({
+    selected: selected.value
+});
+</script>

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

@@ -0,0 +1,129 @@
+<template>
+    <div>
+        <div class='sticky-top py-2 bg-dark'>
+            <TablerInput
+                v-model='filter'
+                icon='search'
+                placeholder='Filter Channels...'
+            />
+        </div>
+
+        <div
+            v-if='props.limit'
+            class='alert alert-info mt-2'
+            role='alert'
+        >
+            <div class='d-flex align-items-center'>
+                <IconInfoCircle /><span class='mx-1'>Select up to&nbsp;<span v-text='props.limit' />&nbsp;Channel<span v-text='props.limit > 1 ? "s" : ""' /></span>
+            </div>
+        </div>
+
+        <EmptyInfo v-if='mapStore.hasNoChannels' />
+
+        <TablerLoading
+            v-if='loading'
+            desc='Loading Channels'
+        />
+        <TablerNone
+            v-else-if='!filtered.length'
+            :compact='true'
+            label='Groups'
+            :create='false'
+        />
+        <template v-else>
+            <div
+                style='max-height: 20vh;'
+                class='my-2 mx-2 overflow-auto'
+            >
+                <div
+                    v-for='group in filtered'
+                    :key='`${group.name}-${group.direction}`'
+                    class='col-12 cursor-pointer'
+                    @click='updateGroup(group)'
+                >
+                    <IconCircleFilled
+                        v-if='selected.has(group.name)'
+                        :size='32'
+                        stroke='1'
+                        class='cursor-pointer'
+                    />
+                    <IconCircle
+                        v-else
+                        :size='32'
+                        troke='1'
+                        class='cursor-pointer'
+                    />
+                    <span
+                        class='mx-2'
+                        v-text='group.name'
+                    />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, onMounted } from 'vue';
+import EmptyInfo from '../util/EmptyInfo.vue';
+import { useMapStore } from '../../../stores/map.ts';
+import type { Group } from '../../../types.ts';
+import {
+    TablerLoading,
+    TablerInput,
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+import {
+    IconCircle,
+    IconInfoCircle,
+    IconCircleFilled
+} from '@tabler/icons-vue';
+
+const mapStore = useMapStore();
+
+const props = defineProps<{
+    connection?: number,
+    limit?: number,
+    active?: boolean,
+    direction?: string,
+    modelValue: Array<string>
+}>();
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const filter = ref('');
+const loading = ref(true);
+const selected = ref<Set<string>>(new Set(props.modelValue))
+const groups = ref<Array<Group>>([])
+
+const filtered = computed(() => {
+    return groups.value.filter((g) => {
+        return g.name.toLowerCase().includes(filter.value.toLowerCase());
+    });
+})
+
+onMounted(async () => {
+    groups.value = (await mapStore.worker.profile.loadChannels()).filter((group) => {
+        return props.active ? group.active : true;
+    }).filter((group) => {
+        return props.direction ? group.direction === props.direction : true;
+    });
+    loading.value = false;
+});
+
+function updateGroup(group: Group) {
+    if (selected.value.has(group.name)) {
+        selected.value.delete(group.name)
+    } else {
+        if (props.limit && selected.value.size >= props.limit) {
+            throw new Error(`Cannot select more than ${props.limit} Channels`);
+        }
+
+        selected.value.add(group.name)
+    }
+
+    emit('update:modelValue', Array.from(selected.value));
+}
+</script>

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

@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <div class='card-body'>
+            <div class='col-12 px-2 pt-2'>
+                <TablerInput
+                    v-model='paging.filter'
+                    placeholder='Filter'
+                />
+            </div>
+
+            <TablerLoading
+                v-if='loading'
+                desc='Loading Icons'
+            />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <TablerNone
+                v-else-if='!list.items.length'
+                label='Icons'
+                :create='false'
+            />
+            <template v-else>
+                <div class='row g-1 pt-2'>
+                    <div
+                        v-for='icon in list.items'
+                        :key='icon.name'
+                        class='col-sm-2'
+                        @click='router.push(`/menu/iconset/${icon.iconset}/${icon.id}`)'
+                    >
+                        <div class='card card-sm hover cursor-pointer'>
+                            <div class='col-12'>
+                                <div
+                                    class='d-flex justify-content-center mt-3'
+                                    :class='{
+                                        "mt-3": labels,
+                                        "my-3": !labels
+                                    }'
+                                >
+                                    <img
+                                        :src='icon.data'
+                                        height='32'
+                                        width='32'
+                                    >
+                                </div>
+                            </div>
+                            <div
+                                v-if='labels'
+                                class='card-body'
+                            >
+                                <div class='row'>
+                                    <div
+                                        class='d-inline-block text-truncate'
+                                        v-text='icon.name'
+                                    />
+                                    <div
+                                        class='d-inline-block text-truncate text-muted'
+                                        v-text='icon.type2525b || "None"'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class='col-lg-12 d-flex my-4'>
+                        <div class='ms-auto'>
+                            <TablerPager
+                                v-if='list.total > paging.limit'
+                                :page='paging.page'
+                                :total='list.total'
+                                :limit='paging.limit'
+                                @page='paging.page = $event'
+                            />
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { std, stdurl } from '../../../std.ts';
+import {
+    TablerNone,
+    TablerPager,
+    TablerInput,
+    TablerAlert,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import {
+} from '@tabler/icons-vue'
+
+const props = defineProps({
+    iconset: {
+        type: String,
+        default: undefined
+    },
+    labels: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const router = useRouter();
+const error = ref();
+const loading = ref(true);
+
+const paging = ref({
+    filter: '',
+    limit: 100 - 4, // keeps the icon in an even grid
+    page: 0
+});
+
+const list = ref({
+    total: 0,
+    items: []
+});
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await fetchList();
+});
+
+async function fetchList() {
+    loading.value = true;
+
+    try {
+        const url = stdurl('/api/icon');
+        url.searchParams.append('filter', paging.value.filter);
+        url.searchParams.append('limit', paging.value.limit);
+        url.searchParams.append('page', paging.value.page);
+        if (props.iconset) url.searchParams.append('iconset', props.iconset);
+        list.value = await std(url);
+        loading.value = false;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+        loading.value = false;
+    }
+}
+</script>

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

@@ -0,0 +1,57 @@
+<template>
+    <TablerModal size='lg'>
+        <div class='modal-status bg-green' />
+        <button
+            type='button'
+            class='btn-close'
+            aria-label='Close'
+            @click='emit("close")'
+        />
+        <div class='modal-header text-white'>
+            <div
+                class='modal-title'
+                v-text='title'
+            />
+        </div>
+        <div class='modal-body overflow-auto'>
+            <CopyField
+                v-model='json'
+                :rows='10'
+                :pre='true'
+            />
+        </div>
+        <div class='modal-footer'>
+            <TablerButton @click='emit("close")'>
+                Done
+            </TablerButton>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue';
+import CopyField from './CopyField.vue';
+import {
+    TablerModal,
+    TablerButton
+} from '@tak-ps/vue-tabler';
+
+const props = defineProps({
+    title: {
+        type: String,
+        default: 'JSON Object'
+    },
+    object: {
+        type: Object,
+        required: true
+    }
+});
+
+const json = ref(JSON.stringify(props.object, null, 4));
+
+watch(props.object, () => {
+    json.value =  JSON.stringify(props.object, null, 4)
+})
+
+const emit = defineEmits(['close']);
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+    <div
+        v-if='keywords && keywords.length'
+        class='d-flex flex-wrap gap-2 mt-1'
+    >
+        <span
+            v-for='keyword in filteredKeywords'
+            :key='keyword'
+            class='badge text-bg-secondary text-uppercase rounded-pill px-3 py-1 small'
+            v-text='keyword'
+        />
+    </div>
+</template>
+
+<script setup lang="ts">
+import  { computed } from 'vue';
+
+const filtered = [
+    'template:'
+]
+
+const filteredKeywords = computed(() => {
+    return props.keywords.filter((keyword) => {
+        return filtered.some((filter) => keyword.startsWith(filter)) === false
+    });
+});
+
+const props = defineProps<{
+    keywords: string[];
+}>();
+</script>

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

@@ -0,0 +1,121 @@
+<template>
+    <div class='col-12'>
+        <label class='subheader mx-2'>Line Length</label>
+        <div class='mx-2'>
+            <CopyField
+                v-model='inMode'
+                :size='24'
+            />
+            <div
+                class='mx-2'
+                role='menu'
+            >
+                <span
+                    v-tooltip='"Feet"'
+                    class='my-1 px-2 user-select-none'
+                    :class='{
+                        "bg-accent rounded-bottom text-blue": mode === "feet",
+                        "cursor-pointer": mode !== "feet",
+                    }'
+                    role='menuitem'
+                    tabindex='0'
+                    @keyup.enter='mode = "feet"'
+                    @click='mode = "feet"'
+                >Feet</span>
+                <span
+                    v-tooltip='"Yards"'
+                    class='my-1 px-2 user-select-none'
+                    :class='{
+                        "bg-accent rounded-bottom text-blue": mode === "yard",
+                        "cursor-pointer": mode !== "yard",
+                    }'
+                    role='menuitem'
+                    tabindex='0'
+                    @keyup.enter='mode = "yard"'
+                    @click='mode = "yard"'
+                >Yards</span>
+                <span
+                    v-tooltip='"Meters"'
+                    class='my-1 px-2 user-select-none'
+                    :class='{
+                        "bg-accent rounded-bottom text-blue": mode === "meter",
+                        "cursor-pointer": mode !== "meter",
+                    }'
+                    role='menuitem'
+                    tabindex='0'
+                    @keyup.enter='mode = "meter"'
+                    @click='mode = "meter"'
+                >Meters</span>
+                <span
+                    v-tooltip='"Kilometers"'
+                    class='my-1 px-2 user-select-none'
+                    :class='{
+                        "bg-accent rounded-bottom text-blue": mode === "kilometer",
+                        "cursor-pointer": mode !== "kilometer",
+                    }'
+                    role='menuitem'
+                    tabindex='0'
+                    @keyup.enter='mode = "kilometer"'
+                    @click='mode = "kilometer"'
+                >Kilometers</span>
+                <span
+                    v-tooltip='"Miles"'
+                    class='my-1 px-2 user-select-none'
+                    :class='{
+                        "bg-accent rounded-bottom text-blue": mode === "mile",
+                        "cursor-pointer": mode !== "mile",
+                    }'
+                    role='menuitem'
+                    tabindex='0'
+                    @keyup.enter='mode = "mile"'
+                    @click='mode = "mile"'
+                >Miles</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, watch } from 'vue';
+import { length } from '@turf/length';
+import CopyField from './CopyField.vue';
+import COT from '../../../base/cot.ts';
+
+const props = defineProps({
+    cot: {
+        type: COT,
+        required: true
+    },
+    unit: {
+        type: String,
+        default: 'mile'
+    }
+})
+
+const mode = ref(props.unit === 'kilometer' ? 'kilometer' : props.unit === 'meter' ? 'meter' : 'mile');
+
+// Watch for prop changes and update mode accordingly
+watch(() => props.unit, (newUnit) => {
+    mode.value = newUnit === 'kilometer' ? 'kilometer' : newUnit === 'meter' ? 'meter' : 'mile';
+});
+
+const inMode = computed(() => {
+    if (props.cot.geometry.type !== 'LineString') return 'Not a Line!';
+
+    const cotLength = length(props.cot.as_feature());
+
+    if (mode.value === 'meter') {
+        return Number((cotLength * 1000).toFixed(2));
+    } else if (mode.value === 'feet') {
+        return Number((cotLength * 3280.84).toFixed(2));
+    } else if (mode.value === 'yard') {
+        return Number((cotLength * 1093.61).toFixed(2));
+    } else if (mode.value === 'kilometer') {
+        return Number(cotLength.toFixed(2));
+    } else if (mode.value === 'mile') {
+        return Number((cotLength * 0.621371).toFixed(2));
+    } else {
+        return 'UNKNOWN';
+    }
+})
+</script>

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

@@ -0,0 +1,21 @@
+<template>
+    <div
+        tabindex='0'
+        role='menuitem'
+        class='cursor-pointer col-12 py-2 px-3 hover'
+        :class='{
+            "d-flex align-items-center": props.flex
+        }'
+    >
+        <slot />
+    </div>
+</template>
+
+<script setup lang='ts'>
+const props = defineProps({
+    flex: {
+        type: Boolean,
+        default: true
+    }
+});
+</script>