@tak-ps/cloudtak 12.54.0

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

@@ -0,0 +1,202 @@
+<template>
+    <div
+        class='col-12'
+        :style='{ zIndex: expanded ? 10 : "auto", position: "relative" }'
+    >
+        <SlideDownHeader
+            v-model='expanded'
+            label='Style'
+        >
+            <template #icon>
+                <IconPaint
+                    :size='18'
+                    stroke='1'
+                    color='#6b7990'
+                    class='ms-2 me-1'
+                />
+            </template>
+
+            <div class='mx-2 py-2'>
+                <div class='rounded bg-accent px-2 py-2'>
+                    <div class='row g-2'>
+                        <template v-if='cot.geometry.type === "Point"'>
+                            <div class='col-12'>
+                                <IconSelect
+                                    :model-value='cot.properties.icon'
+                                    label='Point Icon'
+                                    :size='32'
+                                    stroke='1'
+                                    @update:model-value='updatePropertyIcon($event)'
+                                />
+                            </div>
+                            <div class='col-12'>
+                                <label class='subheader user-select-none'>Point Color</label>
+                                <TablerInput
+                                    :model-value='cot.properties["marker-color"]'
+                                    label=''
+                                    default='#FFFFFF'
+                                    type='color'
+                                    class='pb-2'
+                                    @update:model-value='updateProperty("marker-color", $event)'
+                                />
+                            </div>
+                            <div class='col-12'>
+                                <label class='subheader user-select-none'>Point Opacity</label>
+                                <TablerRange
+                                    :model-value='cot.properties["marker-opacity"]'
+                                    label=''
+                                    :default='1'
+                                    :min='0'
+                                    :max='1'
+                                    :step='0.01'
+                                    @update:model-value='updateProperty("marker-opacity", $event)'
+                                />
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class='col-12'>
+                                <label class='subheader user-select-none'>Line Colour</label>
+                                <TablerInput
+                                    :model-value='cot.properties["stroke"]'
+                                    label=''
+                                    type='color'
+                                    @update:model-value='updateProperty("stroke", $event)'
+                                />
+                            </div>
+
+                            <div class='col-12'>
+                                <label class='subheader user-select-none'>Line Style</label>
+                                <TablerEnum
+                                    :model-value='cot.properties["stroke-style"]'
+                                    label=''
+                                    :options='["solid", "dashed", "dotted", "outlined"]'
+                                    default='solid'
+                                    @update:model-value='updateProperty("stroke-style", $event)'
+                                />
+                            </div>
+                            <div class='col-12'>
+                                <label class='subheader user-select-none'>Line Thickness</label>
+                                <TablerRange
+                                    :model-value='cot.properties["stroke-width"]'
+                                    label=''
+                                    :default='1'
+                                    :min='1'
+                                    :max='6'
+                                    :step='1'
+                                    @update:model-value='updateProperty("stroke-width", $event)'
+                                />
+                            </div>
+                            <div class='col-12'>
+                                <label class='subheader user-select-none'>Line Opacity</label>
+                                <TablerRange
+                                    :model-value='cot.properties["stroke-opacity"]'
+                                    label=''
+                                    :default='1'
+                                    :min='0'
+                                    :max='1'
+                                    :step='0.01'
+                                    @update:model-value='updateProperty("stroke-opacity", $event)'
+                                />
+                            </div>
+                        </template>
+                        <template v-if='cot.geometry.type === "Polygon" || cot.geometry.type === "MultiPolygon"'>
+                            <div class='col-12'>
+                                <label class='subheader user-select-none'>Fill Colour</label>
+                                <TablerInput
+                                    :model-value='cot.properties["fill"]'
+                                    label=''
+                                    type='color'
+                                    @update:model-value='updateProperty("fill", $event)'
+                                />
+                            </div>
+                            <div class='col-12 round'>
+                                <label class='subheader user-select-none'>Fill Opacity</label>
+                                <TablerRange
+                                    :model-value='cot.properties["fill-opacity"]'
+                                    label=''
+                                    :default='1'
+                                    :min='0'
+                                    :max='1'
+                                    :step='0.01'
+                                    @update:model-value='updateProperty("fill-opacity", $event)'
+                                />
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </SlideDownHeader>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref } from 'vue';
+import SlideDownHeader from './SlideDownHeader.vue';
+import { IconPaint } from '@tabler/icons-vue';
+import {
+    TablerInput,
+    TablerRange,
+    TablerEnum,
+} from '@tak-ps/vue-tabler';
+import IconSelect from '../../util/IconSelect.vue';
+import type COT from '../../../base/cot';
+
+const props = defineProps<{
+    cot: COT
+}>();
+
+const expanded = ref(false);
+
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function updateProperty(key: string, event: any) {
+    if (!props.cot) return;
+
+    const properties = { ...props.cot.properties };
+
+    if (typeof event === 'string' || typeof event === 'number') {
+        if (properties[key] !== event) {
+            properties[key] = event;
+            props.cot.update({ properties });
+        }
+    } else {
+        properties[key] = event;
+        props.cot.update({ properties });
+    }
+}
+
+function updatePropertyIcon(event: string | null) {
+    if (!props.cot) return;
+
+    if (event) {
+        event = event.replace(/\.png$/g, '').replace(':', '/');
+    }
+
+    const properties = { ...props.cot.properties };
+
+    if (
+        event
+        && (
+            !properties.icon
+            || (
+                properties.icon
+                && event !== properties.icon
+            )
+        )
+    ) {
+        properties.icon = event;
+        properties["marker-color"] = '#FFFFFF';
+        props.cot.update({ properties });
+    } else if (properties.icon && !event) {
+        if (properties.type !== 'u-d-p') {
+            properties.icon = properties.type;
+        } else {
+            properties.icon = undefined;
+        }
+
+        props.cot.update({ properties });
+    }
+}
+</script>
+
+

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

@@ -0,0 +1,95 @@
+<template>
+    <div class='col-12 pt-2'>
+        <SlideDownHeader
+            v-model='expanded'
+            label='Times'
+        >
+            <template #icon>
+                <IconClock
+                    :size='18'
+                    stroke='1'
+                    color='#6b7990'
+                    class='ms-2 me-1'
+                />
+            </template>
+            <template #right>
+                <span
+                    v-if='props.cot.properties.start'
+                    class='cursor-pointer me-2 text-muted small'
+                    @click.stop='mode = mode === "relative" ? "absolute" : "relative"'
+                    v-text='`Start: ${startProp}`'
+                />
+            </template>
+            <div class='d-flex mx-3 pt-2 pb-2'>
+                <div class='ms-auto cursor-pointer text-blue subheader'>
+                    <span
+                        v-if='mode === "relative"'
+                        @click='mode = "absolute"'
+                    >Absolute</span>
+                    <span
+                        v-if='mode === "absolute"'
+                        @click='mode = "relative"'
+                    >Relative</span>
+                </div>
+            </div>
+            <div class='list-group list-group-flush bg-accent rounded mx-2 mb-2'>
+                <div class='list-group-item bg-transparent d-flex justify-content-between align-items-center border-0'>
+                    <span class='text-muted'>Time</span>
+                    <span class='font-weight-medium'>{{ timeProp }}</span>
+                </div>
+                <div class='list-group-item bg-transparent d-flex justify-content-between align-items-center border-0'>
+                    <span class='text-muted'>Start</span>
+                    <span class='font-weight-medium'>{{ startProp }}</span>
+                </div>
+                <div class='list-group-item bg-transparent d-flex justify-content-between align-items-center border-0'>
+                    <span class='text-muted'>Stale</span>
+                    <span class='font-weight-medium'>{{ staleProp }}</span>
+                </div>
+            </div>
+        </SlideDownHeader>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import SlideDownHeader from './SlideDownHeader.vue';
+import { IconClock } from '@tabler/icons-vue';
+import timediff from '../../../timediff';
+import type COT from '../../../base/cot';
+
+const props = defineProps<{
+    cot: COT
+}>();
+
+const expanded = ref(false);
+const mode = ref('relative');
+const currentTime = ref(new Date());
+const interval = ref<ReturnType<typeof setInterval> | undefined>();
+
+const staleProp = computed(() => {
+    if (!props.cot) return '';
+    return (currentTime.value && mode.value === 'relative') ? timediff(props.cot.properties.stale) : props.cot.properties.stale;
+});
+
+const startProp = computed(() => {
+    if (!props.cot) return '';
+    return (currentTime.value && mode.value === 'relative') ? timediff(props.cot.properties.start) : props.cot.properties.start;
+});
+
+const timeProp = computed(() => {
+    if (!props.cot) return '';
+    return (currentTime.value && mode.value === 'relative') ? timediff(props.cot.properties.time) : props.cot.properties.time;
+});
+
+onMounted(() => {
+    interval.value = setInterval(() => {
+        currentTime.value = new Date();
+    }, 1000);
+});
+
+onUnmounted(() => {
+    if (interval.value) clearInterval(interval.value);
+});
+</script>
+
+

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

@@ -0,0 +1,274 @@
+<template>
+    <div v-if='config.type'>
+        <template v-if='!props.edit'>
+            <div
+                class='rounded py-2 px-2 text-truncate d-flex align-items-center user-select-none'
+                :class='background'
+            >
+                <FeatureIcon
+                    :key='config.type'
+                    :feature='{ properties: { icon: config.type } }'
+                />
+
+                <div
+                    class='mx-2 text-truncate'
+                    v-text='meta ? meta.full : config.type'
+                />
+            </div>
+        </template>
+        <TablerSlidedown
+            v-else
+            :click-anywhere-expand='true'
+        >
+            <IconChartGridDots
+                :size='18'
+                stroke='1'
+                color='#6b7990'
+                class='ms-2 me-1'
+            />
+            <label class='subheader user-select-none'>Type</label>
+            <div class='mx-2 mt-1'>
+                <div
+                    class='rounded py-2 px-2 text-truncate d-flex align-items-center user-select-none'
+                    :class='background'
+                >
+                    <FeatureIcon
+                        :key='config.type'
+                        :feature='{ properties: { icon: config.type } }'
+                    />
+
+                    <div
+                        class='mx-2 text-truncate'
+                        v-text='meta ? meta.full : config.type'
+                    />
+                </div>
+            </div>
+
+            <template #expanded>
+                <template v-if='config.type.startsWith("u-") && config.type !== "u-d-p"'>
+                    <div class='mb-2'>
+                        <TablerInlineAlert
+                            title='User Drawn Feature'
+                            description='Cannot be changed'
+                        />
+                    </div>
+                </template>
+                <template v-else>
+                    <div class='row g-2'>
+                        <div
+                            :class='{
+                                "col-12": !config.type.startsWith("a-"),
+                                "col-8": config.type.startsWith("a-")
+                            }'
+                        >
+                            <TablerInput
+                                v-model='paging.filter'
+                                icon='search'
+                                placeholder='Filter'
+                                :autofocus='true'
+                            />
+                        </div>
+                        <div
+                            v-if='config.type.startsWith("a-")'
+                            class='col-4'
+                        >
+                            <TablerEnum
+                                :model-value='StandardAffiliationInverse[config.affiliation]'
+                                :default='StandardAffiliation.Friendly'
+                                :options='Object.keys(StandardAffiliation)'
+                                @update:model-value='updateAffiliation($event)'
+                            />
+                        </div>
+                    </div>
+
+                    <TablerLoading
+                        v-if='loading'
+                    />
+                    <TablerNone
+                        v-else-if='list.total === 0'
+                        label='Types Found'
+                        :create='false'
+                    />
+                    <template v-else>
+                        <template
+                            v-for='item of list.items'
+                        >
+                            <div
+                                class='d-flex align-items-center px-2 py-2 hover cursor-pointer rounded'
+                                @click='updateType(item)'
+                            >
+                                <FeatureIcon
+                                    :key='item.cot'
+                                    :feature='{ properties: { icon: item.cot } }'
+                                />
+
+                                <div
+                                    class='mx-2'
+                                    v-text='item.full'
+                                />
+                            </div>
+                        </template>
+                    </template>
+                </template>
+            </template>
+        </TablerSlidedown>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, computed, onMounted } from 'vue';
+import { std, stdurl } from '../../../std.ts';
+import type { COTType, COTTypeList } from '../../../types.ts';
+import FeatureIcon from './FeatureIcon.vue';
+import {
+    IconChartGridDots
+} from '@tabler/icons-vue';
+import {
+    TablerNone,
+    TablerEnum,
+    TablerInput,
+    TablerLoading,
+    TablerSlidedown,
+    TablerInlineAlert,
+} from '@tak-ps/vue-tabler';
+
+const StandardAffiliation: Record<string, string> = {
+    'Pending': 'p',
+    'Assumed Friendly': 'a',
+    'Friendly': 'f',
+    'Neutral': 'n',
+    'Suspect': 's',
+    'Hostile': 'h',
+    'Joker': 'j',
+    'Faker': 'k',
+    'Unknown': 'u',
+    'None': 'o'
+}
+
+const StandardAffiliationInverse = Object.fromEntries(
+    Object.entries(StandardAffiliation).map(([key, value]) => [value, key])
+);
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        required: true
+    },
+    edit: {
+        type: Boolean,
+        default: true
+    }
+})
+
+const emit = defineEmits(['update:modelValue']);
+
+const meta = ref<COTType | undefined>();
+
+const config = ref({
+    affiliation: 'u',
+    type: props.modelValue
+})
+
+if (config.value.type.startsWith('a-') && StandardAffiliationInverse[config.value.type.split('-')[1]]) {
+    config.value.affiliation = config.value.type.split('-')[1];
+}
+
+const loading = ref(true);
+
+const paging = ref({
+    filter: '',
+});
+
+const list = ref<COTTypeList>({
+    total: 0,
+    items: []
+});
+
+watch(props, async () => {
+    if (!props.modelValue) return;
+
+    if (props.modelValue !== config.value.type) {
+        if (
+            props.modelValue.startsWith('a-')
+            && StandardAffiliationInverse[props.modelValue.split('-')[1]]
+            && config.value.affiliation !== props.modelValue.split('-')[1]
+        ) {
+            config.value.affiliation = config.value.type.split('-')[1];
+            await fetchList();
+        } else if (props.modelValue.startsWith('u-')) {
+            config.value.affiliation = 'u';
+        }
+
+        config.value.type = props.modelValue;
+
+        await fetchType();
+    }
+});
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await fetchType();
+    await fetchList();
+});
+
+const background = computed(() => {
+    if (config.value.affiliation === 'f' || config.value.affiliation === 'a') {
+        return 'border border-blue bg-blue-lt text-blue-fg';
+    } else if (config.value.affiliation === 'n') {
+        return 'border border-green bg-green-lt text-green-fg';
+    } else if (config.value.affiliation === 'h' || config.value.affiliation === 's' || config.value.affiliation === 'j' || config.value.affiliation === 'k') {
+        return 'border border-red bg-red-lt text-red-fg';
+    } else if (config.value.affiliation === 'p') {
+        return 'border border-yellow bg-yellow-lt text-yellow-fg';
+    } else {
+        return 'bg-accent';
+    }
+});
+
+function updateType(item: COTType) {
+    meta.value = item;
+
+    const type = item.cot.split('-');
+    if (type[0] === 'a') {
+        type[1] = config.value.affiliation;
+    }
+
+    config.value.type = type.join('-');
+
+    emit('update:modelValue', item.cot);
+}
+
+async function updateAffiliation(affil: string) {
+    if (StandardAffiliation[affil] === undefined) return;
+
+    config.value.affiliation = StandardAffiliation[affil]
+    config.value.type = config.value.type.replace(/^a-.-/, `a-${config.value.affiliation}-`);
+
+    emit('update:modelValue', config.value.type);
+
+    await fetchList();
+}
+
+async function fetchType() {
+    const url = stdurl(`/api/type/cot/${config.value.type}`);
+    meta.value = await std(url) as COTType;
+}
+
+async function fetchList() {
+    loading.value = true;
+
+    const url = stdurl('/api/type/cot');
+    url.searchParams.append('filter', paging.value.filter);
+
+    url.searchParams.append('identity', config.value.affiliation);
+    url.searchParams.append('domain', 'a');
+
+    list.value = await std(url) as COTTypeList;
+
+    loading.value = false;
+}
+
+</script>