@tak-ps/cloudtak 12.54.0

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

@@ -0,0 +1,224 @@
+<template>
+    <div class='col-12 pt-2'>
+        <SlideDownHeader
+            v-model='expanded'
+            label='Attachments'
+        >
+            <template #icon>
+                <IconPaperclip
+                    :size='18'
+                    stroke='1'
+                    color='#6b7990'
+                    class='ms-2 me-1'
+                />
+            </template>
+            <template #right>
+                <IconFileUpload
+                    v-if='!upload'
+                    v-tooltip='"Add Attachment"'
+                    :size='20'
+                    stroke='1'
+                    class='cursor-pointer me-2'
+                    @click.stop='upload = true; expanded = true'
+                />
+                <span class='badge bg-blue-lt me-2'>{{ files.length }}</span>
+            </template>
+            <div class='col-12'>
+                <div class='mx-2 py-2'>
+                    <div class='rounded bg-accent px-2 py-2'>
+                        <TablerLoading
+                            v-if='loading'
+                            :inline='true'
+                            class='my-2'
+                        />
+                        <div
+                            v-else-if='upload'
+                            class='py-2 px-4'
+                        >
+                            <Upload
+                                :url='uploadURL()'
+                                :headers='uploadHeaders()'
+                                method='PUT'
+                                @cancel='upload = false'
+                                @done='uploadComplete($event)'
+                            />
+                        </div>
+
+                        <TablerNone
+                            v-else-if='!files.length'
+                            :compact='true'
+                            :create='false'
+                        />
+                        <template v-else>
+                            <div class='w-100 d-flex flex-wrap align-items-center justify-content-center'>
+                                <template v-for='file of files'>
+                                    <div
+                                        class='px-2 py-2 hover rounded'
+                                    >
+                                        <div
+                                            class='d-flex align-items-center justify-content-center'
+                                            style='
+                                                height: 200px;
+                                                width: 200px;
+                                            '
+                                        >
+                                            <img
+                                                v-if='[".png", ".jpg", ".jpeg", ".webp"].includes(file.ext.toLowerCase())'
+                                                class='cursor-pointer'
+                                                :style='{
+                                                    "max-height": "180px",
+                                                    "object-fit": "contain"
+                                                }'
+                                                :src='downloadAssetUrl(file)'
+                                                @click='attachmentPane(file)'
+                                            >
+                                            <IconFile
+                                                v-else
+                                                :size='60'
+                                                stroke='1'
+                                            />
+                                        </div>
+
+                                        <div
+                                            class='d-flex align-items-center pt-2'
+                                            style='
+                                                height: 30px;
+                                            '
+                                        >
+                                            <span
+                                                class='mx-2 text-truncate'
+                                                style='max-width: 160px;'
+                                                v-text='file.name'
+                                            />
+
+                                            <div class='ms-auto'>
+                                                <TablerIconButton
+                                                    title='Download Asset'
+                                                    @click='downloadAsset(file)'
+                                                >
+                                                    <IconDownload
+                                                        :size='24'
+                                                        stroke='1'
+                                                    />
+                                                </TablerIconButton>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </SlideDownHeader>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { std, stdurl } from '../../../std.ts';
+import { useFloatStore } from '../../../stores/float.ts';
+import Upload from '../../util/Upload.vue';
+import SlideDownHeader from './SlideDownHeader.vue';
+import {
+    IconFile,
+    IconDownload,
+    IconPaperclip,
+    IconFileUpload,
+} from '@tabler/icons-vue';
+
+import {
+    TablerIconButton,
+    TablerLoading,
+    TablerNone
+} from '@tak-ps/vue-tabler'
+
+const props = defineProps({
+    modelValue: {
+        type: Array,
+        required: true
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const floatStore = useFloatStore();
+
+const expanded = ref(false);
+const upload = ref(false);
+const loading = ref(true);
+const files = ref([]);
+
+watch(props.modelValue, async () => {
+    await refresh();
+});
+
+watch(files, () => {
+    emit("update:modelValue", files.value.map(f => f.hash));
+}, {
+    deep: true
+});
+
+onMounted(async () => {
+    await refresh();
+})
+
+function attachmentPane(file) {
+    floatStore.addAttachment(file);
+}
+
+async function refresh() {
+    loading.value = true;
+    if (props.modelValue.length) {
+        await fetchMetadata();
+    } else {
+        files.value = [];
+    }
+
+    loading.value = false;
+}
+
+function uploadHeaders() {
+    return {
+        Authorization: `Bearer ${localStorage.token}`
+    };
+}
+
+async function uploadComplete(event) {
+    loading.value = true;
+    upload.value = false;
+
+    const url = stdurl(`/api/attachment`);
+    url.searchParams.append('hash', event.hash);
+    files.value.push(...(await std(url)).items);
+
+    loading.value = false;
+}
+
+function uploadURL() {
+    return stdurl(`/api/attachment`);
+}
+
+function downloadAssetUrl(file) {
+    const url = stdurl(`/api/attachment/${file.hash}`);
+    url.searchParams.append('token', localStorage.token);
+    return url;
+}
+
+async function downloadAsset(file) {
+    window.open(downloadAssetUrl(file), "_blank")
+}
+
+async function fetchMetadata() {
+    const url = stdurl(`/api/attachment`);
+    for (const a of props.modelValue) {
+        url.searchParams.append('hash', a);
+    }
+
+    files.value = (await std(url)).items;
+}
+</script>
+
+

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

@@ -0,0 +1,44 @@
+<template>
+    <span
+        v-tooltip='battery + "% Battery"'
+        class='d-flex'
+        style='margin-right: 10px;'
+    >
+        <IconBattery1
+            v-if='battery <= 25'
+            :size='32'
+            stroke='1'
+        />
+        <IconBattery2
+            v-else-if='battery <= 50'
+            :size='32'
+            stroke='1'
+        />
+        <IconBattery3
+            v-else-if='battery <= 75'
+            :size='32'
+            stroke='1'
+        />
+        <IconBattery4
+            v-else-if='battery <= 100'
+            :size='32'
+            stroke='1'
+        />
+    </span>
+</template>
+
+<script setup lang='ts'>
+import {
+    IconBattery1,
+    IconBattery2,
+    IconBattery3,
+    IconBattery4,
+} from '@tabler/icons-vue';
+
+defineProps({
+    battery: {
+        type: Number,
+        required: true
+    }
+})
+</script>

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

@@ -0,0 +1,148 @@
+<template>
+    <div class='col-12'>
+        <IconCompass
+            :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='config.bearing'
+                :edit='props.edit'
+                :hover='props.hover'
+                :size='24'
+            />
+            <div
+                class='mx-2'
+                role='menu'
+            >
+                <span
+                    v-tooltip='"Degrees"'
+                    class='my-1 px-2 user-select-none'
+                    :class='{
+                        "bg-accent rounded-bottom text-blue": mode === "deg",
+                        "cursor-pointer": mode !== "deg",
+                    }'
+                    role='menuitem'
+                    tabindex='0'
+                    @keyup.enter='changeMode("deg")'
+                    @click='changeMode("deg")'
+                >Deg</span>
+                <span
+                    v-tooltip='"Radians"'
+                    class='my-1 px-2 user-select-none'
+                    :class='{
+                        "bg-accent rounded-bottom text-blue": mode === "rad",
+                        "cursor-pointer": mode !== "rad",
+                    }'
+                    role='menuitem'
+                    tabindex='0'
+                    @keyup.enter='changeMode("rad")'
+                    @click='changeMode("rad")'
+                >Rads</span>
+                <span
+                    v-tooltip='"Mil-Radians"'
+                    class='my-1 px-2 user-select-none'
+                    :class='{
+                        "bg-accent rounded-bottom text-blue": mode === "mil",
+                        "cursor-pointer": mode !== "mil",
+                    }'
+                    role='menuitem'
+                    tabindex='0'
+                    @keyup.enter='changeMode("mil")'
+                    @click='changeMode("mil")'
+                >Mils</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue';
+import CopyField from './CopyField.vue';
+import {
+    IconCompass
+} from '@tabler/icons-vue';
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const props = defineProps({
+    label: {
+        type: String,
+        default: 'Bearing'
+    },
+    modelValue: {
+        type: Number,
+        required: true,
+        description: 'Initial Degrees'
+    },
+    unit: {
+        type: String,
+        default: 'deg',
+        description: 'Desired default unit'
+    },
+    hover: {
+        type: Boolean,
+        default: false
+    },
+    edit: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const mode = ref(props.unit);
+
+const config = ref({
+    // Units coming into props should always be Deg
+    bearing: toCustom(mode.value, props.modelValue)
+});
+
+watch(config.value, () => {
+    emit(
+        'update:modelValue',
+        toDegrees(mode.value, config.value.bearing)
+    );
+});
+
+function toDegrees(mode: string, bearing: number): number {
+    if (mode === 'rad') {
+        return bearing * 57.295779513;
+    } else if (mode === 'mil') {
+        return bearing * 0.05625;
+    } else if (mode === 'deg') {
+        return bearing;
+    } else {
+        throw new Error(`Invalid Bearing Unit: ${mode}`);
+    }
+}
+
+function toCustom(mode: string, degrees: number): number {
+    if (mode === 'deg') {
+        return Math.round(degrees * 1000) / 1000;
+    } else if (mode === 'rad') {
+        return Math.round((degrees * 0.0174533) * 1000) / 1000;
+    } else if (mode === 'mil') {
+        return Math.round((degrees * 17.777778) * 1000) / 1000;
+    } else {
+        throw new Error(`Invalid Bearing Unit: ${mode}`);
+    }
+}
+
+function changeMode(newMode: string): void {
+    if (mode.value === newMode) return;
+
+    const degrees = toDegrees(mode.value, config.value.bearing);
+
+    config.value.bearing = toCustom(newMode, degrees);
+
+    mode.value = newMode;
+}
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+    <div class='col-12 pb-2'>
+        <SlideDownHeader
+            v-model='expanded'
+            label='Author'
+        >
+            <template #icon>
+                <IconUser
+                    :size='18'
+                    stroke='1'
+                    color='#6b7990'
+                    class='ms-2 me-1'
+                />
+            </template>
+            <template #right>
+                <span
+                    v-if='props.creator.time'
+                    class='cursor-pointer me-2 text-muted small'
+                    @click.stop='relative = !relative'
+                    v-text='relative ? timediff(props.creator.time) : props.creator.time'
+                />
+            </template>
+            <div class='mx-2 pt-2'>
+                <ContactRow
+                    :contact='contact || props.creator'
+                    @chat='router.push(`/menu/chats/new?callsign=${$event.callsign}&uid=${$event.uid}`)'
+                />
+            </div>
+        </SlideDownHeader>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue';
+import timediff from '../../../timediff.ts';
+import ContactRow from './Contact.vue';
+import { useMapStore } from '../../../stores/map.ts';
+import type { Contact, FeaturePropertyCreator } from '../../../types.ts';
+import { useRouter } from 'vue-router';
+import SlideDownHeader from './SlideDownHeader.vue';
+import {
+    IconUser
+} from '@tabler/icons-vue';
+
+const mapStore = useMapStore();
+
+const props = defineProps<{
+    creator: FeaturePropertyCreator
+}>();
+
+const router = useRouter();
+const relative = ref(true);
+const expanded = ref(false);
+const contact = ref<Contact | undefined>();
+
+onMounted(async () => {
+    contact.value = await mapStore.worker.team.get(props.creator.uid);
+});
+</script>
+
+

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

@@ -0,0 +1,182 @@
+<template>
+    <div class='col-12'>
+        <IconLine
+            :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='config.distance'
+                :edit='props.edit'
+                :hover='props.hover'
+                :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='changeMode("feet")'
+                    @click='changeMode("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='changeMode("yard")'
+                    @click='changeMode("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='changeMode("meter")'
+                    @click='changeMode("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='changeMode("kilometer")'
+                    @click='changeMode("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='changeMode("mile")'
+                    @click='changeMode("mile")'
+                >Miles</span>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch } from 'vue';
+import CopyField from './CopyField.vue';
+import {
+    IconLine
+} from '@tabler/icons-vue';
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const props = defineProps({
+    label: {
+        type: String,
+        default: 'Distance'
+    },
+    modelValue: {
+        type: Number,
+        required: true
+    },
+    unit: {
+        type: String,
+        default: 'mile'
+    },
+    hover: {
+        type: Boolean,
+        default: false
+    },
+    edit: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const mode = ref(props.unit);
+
+const config = ref({
+    // Units coming into props should always be kilometers
+    distance: toCustom(mode.value, props.modelValue)
+});
+
+watch(config.value, () => {
+    emit(
+        'update:modelValue',
+        toKilometers(mode.value, config.value.distance)
+    );
+});
+
+/**
+ * Convert any distance unit to kilometers
+ */
+function toKilometers(mode: string, distance: number): number {
+    if (mode === 'mile') {
+        return distance * 1.60934;
+    } else if (mode === 'feet') {
+        return distance * 0.0003048;
+    } else if (mode === 'yard') {
+        return distance * 0.0009144;
+    } else if (mode === 'meter') {
+        return distance * 0.001;
+    } else if (mode === 'kilometer') {
+        return distance;
+    } else {
+        throw new Error(`Invalid Distance Unit: ${mode}`);
+    }
+}
+
+function toCustom(mode: string, kilometers: number): number {
+    if (mode === 'kilometer') {
+        return kilometers
+    } else if (mode === 'feet') {
+        return Math.round((kilometers * 3280.84) * 1000) / 1000;
+    } else if (mode === 'yard') {
+        return Math.round((kilometers * 1093.61) * 1000) / 1000;
+    } else if (mode === 'mile') {
+        return Math.round((kilometers * 0.621371) * 1000) / 1000;
+    } else if (mode === 'meter') {
+        return kilometers * 1000;
+    } else {
+        throw new Error(`Invalid Bearing Unit: ${mode}`);
+    }
+}
+
+function changeMode(newMode: string): void {
+    if (mode.value === newMode) return;
+
+    const degrees = toKilometers(mode.value, config.value.distance);
+
+    config.value.distance = toCustom(newMode, degrees);
+
+    mode.value = newMode;
+}
+
+</script>