@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,84 +0,0 @@
-<template>
-    <div class='col-12'>
-        <IconMountain
-            :size='18'
-            stroke='1'
-            color='#6b7990'
-            class='ms-2 me-1'
-        />
-        <label
-            class='subheader user-select-none'
-            v-text='props.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='"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>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, computed } from 'vue';
-import CopyField from './CopyField.vue';
-import {
-    IconMountain
-} from '@tabler/icons-vue';
-
-const props = defineProps({
-    label: {
-        type: String,
-        default: 'Elevation'
-    },
-    elevation: {
-        type: Number,
-        required: true
-    },
-    unit: {
-        type: String,
-        default: 'feet'
-    }
-})
-
-const mode = ref(props.unit);
-
-const inMode = computed(() => {
-    if (mode.value === 'feet') {
-        return Math.round(props.elevation * 3.28084 * 100) / 100;
-    } else if (mode.value === 'meter') {
-        return Math.round(props.elevation * 100) / 100;
-    } else {
-        return 'UNKNOWN';
-    }
-})
-</script>

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

@@ -1,44 +0,0 @@
-<template>
-    <div class='col-12'>
-        <IconMail
-            :size='18'
-            stroke='1'
-            color='#6b7990'
-            class='ms-2 me-1'
-        />
-        <label class='subheader user-select-none'>Email</label>
-        <div class='mx-2'>
-            <CopyField
-                v-model='email'
-                :size='24'
-            >
-                <a
-                    :href='`mailto:${email}`'
-                    class='cursor-pointer pe-2'
-                >
-                    <IconMail
-                        :size='24'
-                        stroke='1'
-                    />
-                </a>
-            </CopyField>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref } from 'vue';
-import CopyField from './CopyField.vue';
-import {
-    IconMail
-} from '@tabler/icons-vue';
-
-const props = defineProps({
-    email: {
-        type: String,
-        required: true
-    },
-});
-
-const email = ref(props.email);
-</script>

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

@@ -1,148 +0,0 @@
-<template>
-    <div
-        v-if='url_links.length || responder_links.length'
-        class='col-12'
-    >
-        <div
-            v-if='url_links.length'
-            class='col-12'
-        >
-            <SlideDownHeader
-                v-model='expandedLinks'
-                label='Links'
-            >
-                <template #icon>
-                    <IconLink
-                        :size='18'
-                        stroke='1'
-                        color='#6b7990'
-                        class='ms-2 me-1'
-                    />
-                </template>
-                <template #right>
-                    <span class='badge bg-blue-lt me-2'>{{ url_links.length }}</span>
-                </template>
-
-                <div class='overflow-hidden mb-2'>
-                    <div class='list-group list-group-flush bg-accent rounded mx-2 mt-2'>
-                        <a
-                            v-for='(link, link_it) of url_links'
-                            :key='link_it'
-                            :href='link.url'
-                            target='_blank'
-                            class='list-group-item list-group-item-action d-flex align-items-center bg-transparent border-0'
-                        >
-                            <IconExternalLink
-                                :size='18'
-                                stroke='1'
-                                class='me-2'
-                            />
-                            <span class='text-truncate'>{{ link.remarks || link.url }}</span>
-                        </a>
-                    </div>
-                </div>
-            </SlideDownHeader>
-        </div>
-
-        <div
-            v-if='responder_links.length'
-            class='col-12'
-        >
-            <SlideDownHeader
-                v-model='expandedResponders'
-                label='Tasked Personnel'
-            >
-                <template #icon>
-                    <IconUsers
-                        :size='18'
-                        stroke='1'
-                        color='#6b7990'
-                        class='ms-2 me-1'
-                    />
-                </template>
-                <template #right>
-                    <span class='badge bg-blue-lt me-2'>{{ responder_links.length }}</span>
-                </template>
-
-                <div class='overflow-hidden'>
-                    <div class='row row-cards mx-2 pt-2'>
-                        <div
-                            v-for='(link, link_it) of responder_links'
-                            :key='link_it'
-                            class='col-12 mb-2'
-                        >
-                            <div class='card bg-accent border-0'>
-                                <div class='card-body p-2'>
-                                    <div class='d-flex align-items-center'>
-                                        <span class='avatar me-2 rounded-circle bg-blue-lt'>
-                                            {{ (link.callsign || link.uid || '?').substring(0, 2).toUpperCase() }}
-                                        </span>
-                                        <div class='flex-fill overflow-hidden'>
-                                            <div class='d-flex justify-content-between align-items-center'>
-                                                <h4
-                                                    class='m-0 text-truncate'
-                                                    :title='link.callsign || link.uid'
-                                                >
-                                                    {{ link.callsign || link.uid }}
-                                                </h4>
-                                                <small class='text-muted ms-2 text-nowrap'>{{ link.production_time ? timediff(link.production_time) : "" }}</small>
-                                            </div>
-                                            <div
-                                                class='text-muted small mt-1 text-truncate'
-                                                :title='link.remarks'
-                                            >
-                                                {{ link.remarks }}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </SlideDownHeader>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { computed, ref } from 'vue';
-import SlideDownHeader from './SlideDownHeader.vue';
-import { IconUsers, IconLink, IconExternalLink } from '@tabler/icons-vue';
-import timediff from '../../../timediff';
-
-const expandedResponders = ref(false);
-const expandedLinks = ref(false);
-
-const props = defineProps<{
-    links: Array<{
-        remarks?: string;
-        url?: string;
-        relation?: string;
-        type?: string;
-        uid?: string;
-        callsign?: string;
-        production_time?: string;
-    }>
-}>();
-
-const url_links = computed(() => {
-    return props.links.filter((link) => {
-        return link.url;
-    });
-});
-
-const responder_links = computed(() => {
-    return props.links.filter((link) => {
-        return link.relation === 't-s';
-    });
-});
-</script>
-
-<style scoped>
-
-
-.list-group-item-action:hover {
-    background-color: rgba(255, 255, 255, 0.05) !important;
-}
-</style>

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

@@ -1,53 +0,0 @@
-<template>
-    <div class='col-12 pt-2'>
-        <SlideDownHeader
-            v-model='expanded'
-            label='Metadata'
-        >
-            <template #icon>
-                <IconDatabase
-                    :size='18'
-                    stroke='1'
-                    color='#6b7990'
-                    class='ms-2 me-1'
-                />
-            </template>
-
-            <div class='table-responsive rounded mx-2 py-2 px-2'>
-                <table class='table card-table table-hover table-vcenter datatable'>
-                    <thead>
-                        <tr>
-                            <th>Key</th>
-                            <th>Value</th>
-                        </tr>
-                    </thead>
-                    <tbody class='bg-accent'>
-                        <tr
-                            v-for='prop of Object.keys(cot.properties.takv || {})'
-                            :key='prop'
-                        >
-                            <td v-text='prop' />
-                            <!-- @vue-expect-error Not a KeyOf -->
-                            <td v-text='cot.properties.takv[prop]' />
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </SlideDownHeader>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref } from 'vue';
-import { IconDatabase } from '@tabler/icons-vue';
-import SlideDownHeader from './SlideDownHeader.vue';
-import type COT from '../../../base/cot';
-
-defineProps<{
-    cot: COT
-}>();
-
-const expanded = ref(false);
-</script>
-
-

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

@@ -1,62 +0,0 @@
-<template>
-    <div class='col-12 py-2'>
-        <div class='col-12'>
-            <IconBadges
-                :size='18'
-                stroke='1'
-                color='#6b7990'
-                class='ms-2 me-1'
-            />
-            <label
-                class='subheader user-select-none'
-                v-text='props.label'
-            />
-        </div>
-        <div class='px-2'>
-            <div class='col-12 bg-accent rounded-bottom px-1 py-1'>
-                <label class='subheader mx-2 user-select-none'>Status</label>
-                <TablerEnum
-                    v-model='breakdown.status'
-                    :disabled='true'
-                    :options='status'
-                />
-            </div>
-        </div>
-    </div>
-    <div class='pb-2 col-12' />
-</template>
-
-<script setup lang='ts'>
-import { ref } from 'vue';
-import {
-    IconBadges
-} from '@tabler/icons-vue';
-import {
-    TablerEnum
-} from '@tak-ps/vue-tabler';
-
-/*
-const emit = defineEmits([
-    'update:modelValue'
-]);
-*/
-
-const props = defineProps({
-    label: {
-        type: String,
-        default: 'Unit Information'
-    },
-    modelValue: {
-        type: String,
-        required: true,
-        description: 'SIDC'
-    },
-});
-
-const status = ['Present', 'Planned', 'Fully Capable', 'Damaged', 'Destroyed', 'Full to Capacity'];
-
-const breakdown = ref({
-    status: status[Number(props.modelValue[6])]
-})
-
-</script>

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

@@ -1,61 +0,0 @@
-<template>
-    <div class='col-12'>
-        <IconPhone
-            :size='18'
-            stroke='1'
-            color='#6b7990'
-            class='ms-2 me-1'
-        />
-        <label class='subheader user-select-none'>Phone</label>
-        <div class='mx-2'>
-            <CopyField
-                v-model='phone'
-                :size='24'
-            >
-                <a
-                    :href='`tel:${phone}`'
-                    class='cursor-pointer pe-2'
-                >
-                    <IconPhone
-                        :size='24'
-                        stroke='1'
-                    />
-                </a>
-            </CopyField>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, watch } from 'vue';
-import CopyField from './CopyField.vue';
-import phoneFormat from 'phone';
-import {
-    IconPhone
-} from '@tabler/icons-vue';
-
-const props = defineProps({
-    phone: {
-        type: String,
-        required: true
-    },
-});
-
-const phone = ref(format(props.phone));
-
-watch(props, () => {
-    phone.value = format(props.phone);
-})
-
-function format(number: string): string {
-    const p = phoneFormat(number);
-
-    if (!p.isValid) return number;
-
-    if (p.countryCode === '+1') {
-        return `${p.phoneNumber.slice(0, 2)} (${p.phoneNumber.slice(2, 5)}) ${p.phoneNumber.slice(5, 8)}-${p.phoneNumber.slice(8, 12)}`;
-    } else {
-        return p.phoneNumber;
-    }
-}
-</script>

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

@@ -1,129 +0,0 @@
-<template>
-    <div class='col-12'>
-        <SlideDownHeader
-            v-model='expanded'
-            label='Sensor'
-        >
-            <template #icon>
-                <IconCone
-                    :size='18'
-                    stroke='1'
-                    color='#6b7990'
-                    class='ms-2 me-1'
-                />
-            </template>
-
-            <div class='mx-2 py-2 mt-2'>
-                <div class='rounded px-2 bg-accent pb-2'>
-                    <div class='row g-2'>
-                        <div class='col-6'>
-                            <label class='subheader user-select-none'>Type</label>
-
-                            <div v-text='sensor.type || "Unknown"' />
-                        </div>
-                        <div class='col-6'>
-                            <label class='subheader user-select-none'>Model</label>
-                            <div v-text='sensor.model || "Unknown"' />
-                        </div>
-
-                        <TablerRange
-                            v-if='sensor.range !== undefined'
-                            v-model='sensor.range'
-                            label='Sensor Range Length'
-                            :min='0'
-                            :max='60000'
-                        >
-                            <div class='d-flex align-items-center'>
-                                <TablerInput
-                                    v-model='sensor.range'
-                                    style='width: 82px'
-                                />
-                                <div class='ms-1'>
-                                    m
-                                </div>
-                            </div>
-                        </TablerRange>
-
-                        <TablerRange
-                            v-if='sensor.azimuth !== undefined'
-                            v-model='sensor.azimuth'
-                            label='Sensor Direction'
-                            :min='0'
-                            :max='360'
-                        >
-                            <div class='d-flex align-items-center'>
-                                <TablerInput
-                                    v-model='sensor.azimuth'
-                                    style='width: 82px'
-                                />
-                                <div class='ms-1'>
-                                    deg
-                                </div>
-                            </div>
-                        </TablerRange>
-
-                        <TablerRange
-                            v-if='sensor.fov !== undefined'
-                            v-model='sensor.fov'
-                            label='Sensor FOV'
-                            :min='0'
-                            :max='360'
-                        >
-                            <div class='d-flex align-items-center'>
-                                <TablerInput
-                                    v-model='sensor.fov'
-                                    style='width: 82px'
-                                />
-                                <div class='ms-1'>
-                                    deg
-                                </div>
-                            </div>
-                        </TablerRange>
-                    </div>
-                </div>
-            </div>
-        </SlideDownHeader>
-    </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-import SlideDownHeader from './SlideDownHeader.vue';
-import {
-    IconCone
-} from '@tabler/icons-vue';
-import {
-    TablerRange,
-    TablerInput
-} from '@tak-ps/vue-tabler';
-
-const props = defineProps({
-    modelValue: {
-        type: Object,
-        required: true
-    }
-});
-
-const emit = defineEmits([
-    'update:modelValue'
-]);
-
-const expanded = ref(false);
-const sensor = ref(JSON.parse(JSON.stringify(props.modelValue)));
-if (!sensor.value.fov) sensor.value.fov = 0;
-if (!sensor.value.azimuth) sensor.value.azimuth = 0;
-if (!sensor.value.range) sensor.value.range = 0;
-
-watch(sensor.value, () => {
-    emit('update:modelValue', sensor.value);
-})
-
-watch(() => props.modelValue, () => {
-    sensor.value = props.modelValue;
-    if (!sensor.value.fov) sensor.value.fov = 0;
-    if (!sensor.value.azimuth) sensor.value.azimuth = 0;
-    if (!sensor.value.range) sensor.value.range = 0;
-});
-</script>
-
-

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

@@ -1,91 +0,0 @@
-<template>
-    <div class='col-12'>
-        <IconBrandSpeedtest
-            :size='18'
-            stroke='1'
-            color='#6b7990'
-            class='ms-2 me-1'
-        />
-        <label class='subheader user-select-none'>Speed</label>
-        <div class='mx-2'>
-            <CopyField
-                v-model='inMode'
-                :size='24'
-            />
-            <div
-                class='mx-2'
-                role='menu'
-            >
-                <span
-                    v-tooltip='"Meters Per Second"'
-                    class='my-1 px-2 user-select-none'
-                    :class='{
-                        "bg-accent rounded-bottom text-blue": mode === "m/s",
-                        "cursor-pointer": mode !== "m/s",
-                    }'
-                    role='menuitem'
-                    tabindex='0'
-                    @keyup.enter='mode = "m/s"'
-                    @click='mode = "m/s"'
-                >M/S</span>
-                <span
-                    v-tooltip='"Miles Per Hour"'
-                    class='my-1 px-2 user-select-none'
-                    :class='{
-                        "bg-accent rounded-bottom text-blue": mode === "mi/h",
-                        "cursor-pointer": mode !== "mi/h",
-                    }'
-                    role='menuitem'
-                    tabindex='0'
-                    @keyup.enter='mode = "mi/h"'
-                    @click='mode = "mi/h"'
-                >MPH</span>
-                <span
-                    v-tooltip='"Kilometers Per Hour"'
-                    class='my-1 px-2 user-select-none'
-                    :class='{
-                        "bg-accent rounded-bottom text-blue": mode === "km/h",
-                        "cursor-pointer": mode !== "km/h",
-                    }'
-                    role='menuitem'
-                    tabindex='0'
-                    @keyup.enter='mode = "km/h"'
-                    @click='mode = "km/h"'
-                >KM/H</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, computed, watchEffect } from 'vue';
-import CopyField from './CopyField.vue';
-import {
-    IconBrandSpeedtest
-} from '@tabler/icons-vue';
-
-const props = defineProps({
-    speed: {
-        type: Number,
-        required: true
-    },
-    unit: {
-        type: String,
-        default: 'mi/h'
-    }
-});
-
-const mode = ref(props.unit);
-
-// Keep mode in sync with unit prop changes
-watchEffect(() => {
-    mode.value = props.unit;
-});
-
-const inMode = computed(() => {
-    if (mode.value === 'm/s') return Math.round(props.speed * 1000) / 1000;
-    else if (mode.value === 'mi/h') return Math.round(props.speed * 2.23694 * 100) / 100;
-    else if (mode.value === 'km/h') return Math.round(props.speed * 3.6 * 100) / 100;
-    return 'UNKNOWN';
-});
-</script>