@tak-ps/cloudtak 12.54.0 → 12.94.0

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

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

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

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

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

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