@tak-ps/cloudtak 12.54.0

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

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

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

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

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

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

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

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

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