@tak-ps/cloudtak 12.54.0 → 12.55.0

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

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

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

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