@tak-ps/cloudtak 12.54.0

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

@@ -0,0 +1,151 @@
+<template>
+    <div class='col-12'>
+        <div
+            v-if='!loading'
+            class='col-12 px-2 pb-2 pt-2'
+        >
+            <TablerInput
+                v-model='paging.filter'
+                icon='search'
+                placeholder='Filter'
+            />
+        </div>
+
+        <TablerLoading v-if='loading' />
+        <TablerAlert
+            v-else-if='error'
+            :err='error'
+        />
+        <TablerNone
+            v-else-if='!Object.keys(processChannels).length'
+            :create='false'
+        />
+        <template v-else>
+            <div
+                v-for='ch in processChannels'
+                :key='ch.name'
+                class='col-lg-12 hover'
+            >
+                <div class='hover'>
+                    <div class='px-2'>
+                        <div class='col-12 py-2 px-2 d-flex align-items-center'>
+                            <IconEye
+                                v-if='ch.active'
+                                v-tooltip='"User has Channel Enabled"'
+                                :size='32'
+                                stroke='1'
+                            />
+                            <IconEyeOff
+                                v-else
+                                v-tooltip='"User has Channel Disabled"'
+                                :size='32'
+                                stroke='1'
+                            />
+                            <span
+                                v-tooltip='"Show Details"'
+                                class='mx-2 cursor-pointer'
+                                @click='shown[ch.name] = !shown[ch.name]'
+                                v-text='ch.name'
+                            />
+
+                            <div class='ms-auto'>
+                                <IconLocation
+                                    v-if='ch.direction.length === 2'
+                                    v-tooltip='"Bi-Directional"'
+                                    :size='32'
+                                    stroke='1'
+                                />
+                                <IconLocation
+                                    v-else-if='ch.direction.includes("IN")'
+                                    v-tooltip='"Location Sharing"'
+                                    :size='32'
+                                    stroke='1'
+                                />
+                                <IconLocationOff
+                                    v-else-if='ch.direction.includes("OUT")'
+                                    v-tooltip='"No Location Sharing"'
+                                    :size='32'
+                                    stroke='1'
+                                />
+                            </div>
+                        </div>
+                        <div
+                            v-if='shown[ch.name]'
+                            class='col-12 pb-2 user-select-none'
+                            style='margin-left: 40px;'
+                        >
+                            <span v-text='ch.description || "No Description"' />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, onMounted } from 'vue';
+import type { Group } from '../../../types.ts';
+import type COT from '../../../base/cot.ts';
+import {
+    TablerNone,
+    TablerAlert,
+    TablerInput,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import {
+    IconLocation,
+    IconLocationOff,
+    IconEye,
+    IconEyeOff,
+} from '@tabler/icons-vue';
+
+const props = defineProps<{
+    cot: COT
+}>();
+
+const error = ref<Error | undefined>();
+const loading = ref(true)
+const shown = ref<Record<string, boolean>>({});
+const channels = ref<Group[]>([]);
+const paging = ref({
+    filter: ''
+});
+
+onMounted(async () => {
+    try {
+        const sub = await props.cot.subscription();
+        channels.value = sub.groups.sort((a, b) => {
+            return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0);
+        });
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value = false;
+});
+
+const processChannels = computed(() => {
+    const channelsFiltered: Record<string, Group> = {};
+
+    channels.value
+        .forEach((channel: Group) => {
+            if (channelsFiltered[channel.name]) {
+                // @ts-expect-error Change to string eventually
+                channelsFiltered[channel.name].direction.push(channel.direction);
+            } else {
+                // @ts-expect-error Change to string eventually
+                channel.direction = [channel.direction];
+                channelsFiltered[channel.name] = channel;
+            }
+        })
+
+    for (const key of Object.keys(channelsFiltered)) {
+        if (!key.toLowerCase().includes(paging.value.filter.toLowerCase())) {
+            delete channelsFiltered[key];
+        }
+    }
+
+    return channelsFiltered;
+});
+</script>

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

@@ -0,0 +1,301 @@
+<template>
+    <div>
+        <div
+            ref='tagEntryEl'
+            :class='{
+                "tag-entry--focus": isInputActive,
+                "is-invalid": error
+            }'
+            class='form-control tag-entry my-2 py-1 px-1'
+            @click='focusNewTag()'
+        >
+            <div class='tag-entry-content'>
+                <span
+                    v-for='(tag, index) in innerTags'
+                    :key='index'
+                    class='mx-1 my-1 d-flex badge badge-outline bg-blue-lt'
+                    style='height: 24px;'
+                >
+                    <slot
+                        v-if='$slots.item'
+                        name='item'
+                        v-bind='{ name: tag, index }'
+                    />
+                    <span v-else> {{ tag }} </span>
+
+                    <TablerIconButton
+                        v-if='!disabled'
+                        title='Remove Tag'
+                        @click.prevent.stop='innerTags.splice(index, 1);'
+                    ><IconX
+                        :size='16'
+                        stroke='2'
+                    />
+                    </TablerIconButton>
+                </span>
+                <input
+                    v-model='newTag'
+                    :placeholder='placeholder'
+                    :disabled='disabled'
+                    class='tag-entry-new-tag'
+                    @keydown.delete.stop='removeLastTag'
+                    @keydown='addNew'
+                    @blur='handleInputBlur'
+                    @focus='handleInputFocus'
+                    @input='handleInput'
+                >
+            </div>
+        </div>
+        <div
+            v-if='error'
+            class='invalid-feedback'
+            v-text='error'
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, computed } from 'vue';
+import {
+    TablerIconButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconX
+} from '@tabler/icons-vue';
+
+// Props
+const props = defineProps({
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    validate: {
+        type: [String, Function, Object],
+        default: ""
+    },
+    addTagOnKeys: {
+        type: Array,
+        default: () => [
+            13, // Enter
+            188, // Comma ','
+            32, // Space
+        ]
+    },
+    placeholder: {
+        type: String,
+        default: ''
+    },
+    tags: {
+        type: Array,
+        default: () => []
+    },
+    limit: {
+        type: Number,
+        default: -1
+    },
+    tagLength: {
+        type: Number,
+        default: -1
+    },
+    allowDuplicates: {
+        type: Boolean,
+        default: false
+    },
+    addTagOnBlur: {
+        type: Boolean,
+        default: false
+    },
+});
+
+// Emits
+const emit = defineEmits(['update:modelValue', 'on-limit', 'tags', 'on-error', 'on-focus', 'on-blur']);
+
+// State
+const isInputActive = ref(false);
+const error = ref(false);
+const newTag = ref('');
+const innerTags = ref([]);
+const tagEntryEl = ref(null); // Template ref
+
+// Computed
+const isLimit = computed(() => {
+    const limitReached = props.limit > 0 && Number(props.limit) === innerTags.value.length;
+    if (limitReached) {
+        emit('on-limit');
+    }
+    return limitReached;
+});
+
+// Watchers
+watch(() => props.modelValue, (value) => {
+    newTag.value = value;
+}, { immediate: true });
+
+watch(() => props.tags, (tags) => {
+    innerTags.value = [...tags];
+    emit('tags', innerTags.value);
+}, { deep: true, immediate: true });
+
+
+// Methods
+function focusNewTag() {
+    if (tagEntryEl.value) {
+        const input = tagEntryEl.value.querySelector(".tag-entry-new-tag");
+        if (input) {
+            input.focus();
+        }
+    }
+}
+
+function handleInputFocus(event) {
+    isInputActive.value = true;
+    emit('on-focus', event);
+}
+
+function handleInputBlur(e) {
+    isInputActive.value = false;
+    if (props.addTagOnBlur) {
+        addNew(e);
+    }
+    emit('on-blur', e);
+}
+
+function addNew(e) {
+    const keyShouldAddTag = e ? props.addTagOnKeys.indexOf(e.keyCode) !== -1 : true;
+    const typeIsNotBlur = e && e.type !== "blur";
+
+    if (isLimit.value) {
+        makeItError('Exceeds max number of tags');
+        return;
+    } else if (!keyShouldAddTag && (typeIsNotBlur || !props.addTagOnBlur)) {
+        makeItError(false);
+        return;
+    }
+
+    // Clear previous error before validation
+    makeItError(false);
+
+    const validationError = validateIfNeeded(newTag.value);
+    if (validationError) {
+        makeItError(validationError);
+        if (e) e.preventDefault();
+        return;
+    }
+
+    if (newTag.value && (props.tagLength !== -1 && newTag.value.length > props.tagLength)) {
+        makeItError(`Exceeds ${props.tagLength} characters`);
+        if (e) e.preventDefault();
+        return;
+    }
+
+    if (!props.allowDuplicates && innerTags.value.includes(newTag.value)) {
+        makeItError(`Duplicate Tag: "${newTag.value}"`);
+        if (e) e.preventDefault();
+        return;
+    }
+
+    if (newTag.value.trim() !== '') {
+        innerTags.value.push(newTag.value.trim());
+        newTag.value = '';
+        emit('update:modelValue', '');
+    }
+
+    if (e) {
+        e.preventDefault();
+    }
+}
+
+function handleInput(event) {
+    emit("update:modelValue", event.target.value);
+}
+
+function makeItError(errorMessage) {
+    if (errorMessage) {
+        error.value = errorMessage;
+        emit('on-error', new Error(errorMessage));
+    } else {
+        error.value = false;
+    }
+}
+
+function validateIfNeeded(tagValue) {
+    if (!props.validate) {
+        return false;
+    }
+
+    if (typeof props.validate === "function") {
+        return props.validate(tagValue);
+    }
+
+    if (typeof props.validate === "object" && props.validate.test !== undefined) {
+        // Assuming it's a RegExp object. If test fails, return an error message.
+        return !props.validate.test(tagValue) ? `Validation failed for "${tagValue}"` : false;
+    }
+
+    // For string validation (assuming it's a regex pattern)
+    if (typeof props.validate === 'string') {
+        const regex = new RegExp(props.validate);
+         return !regex.test(tagValue) ? `Validation failed for "${tagValue}"` : false;
+    }
+
+    return false;
+}
+
+function removeLastTag() {
+    if (newTag.value) {
+        return;
+    }
+
+    innerTags.value.pop();
+}
+</script>
+
+<style lang="scss">
+.tag-entry {
+    border: var(--tblr-border-width) solid var(--tblr-border-color);
+    min-height: 32px;
+    line-height: 1.4 !important;
+    overflow: hidden;
+    cursor: text;
+    text-align: left;
+    -webkit-appearance: textfield;
+    display: flex;
+    flex-wrap: wrap;
+
+    &.is-invalid {
+        border-color: var(--tblr-danger);
+    }
+
+    &--focus {
+        color: var(--tblr-body-color);
+        background-color: var(--tblr-bg-forms);
+        border-color: #83b7e8;
+        outline: 0;
+        box-shadow: var(--tblr-box-shadow-input),0 0 0 .25rem rgba(var(--tblr-primary-rgb),.25);
+    }
+
+    .tag-entry-content {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+    }
+
+    .tag-entry-new-tag {
+        background: transparent;
+        border: 0;
+        font-weight: 400;
+        margin: 3px;
+        outline: none;
+        padding:0 4px;
+        flex: 1;
+        min-width: 80px;
+        height: 27px;
+    }
+}
+</style>
+

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

@@ -0,0 +1,195 @@
+<template>
+    <div>
+        <div
+            class='row g-0'
+            :class='{ "d-none": progress !== 0 }'
+        >
+            <div class='col-12 d-flex justify-content-center mb-3 subheader'>
+                Select a file to import
+            </div>
+            <div
+                ref='dragger'
+                class='custom-drop row g-0 d-flex col-12 justify-content-center py-2'
+                @dragenter='dragEnter'
+                @dragleave='dragLeave'
+                @drop='dragDrop'
+            >
+                <div style='pointer-events: none;'>
+                    <div class='col-12 my-3 d-flex justify-content-center'>
+                        <div>Drag &amp; Drop Files Here</div>
+                    </div>
+                </div>
+            </div>
+            <div class='col-12 d-flex justify-content-center'>
+                <div class='btn-list my-3'>
+                    <button
+                        v-if='cancelButton'
+                        class='btn btn-secondary'
+                        @click='$emit("cancel")'
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        class='btn btn-primary'
+                        @click='fileInput.click()'
+                    >
+                        Manually Select Files
+                    </button>
+                </div>
+            </div>
+            <form>
+                <input
+                    id='file'
+                    ref='fileInput'
+                    class='d-none'
+                    type='file'
+                    name='file'
+                    @change='manualUpload'
+                >
+            </form>
+        </div>
+        <div
+            v-if='progress && progress < 101'
+            class='row'
+        >
+            <TablerLoading :desc='`Uploading ${name}`' />
+            <TablerProgress :percent='progress / 100' />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { std, stdurl } from '/src/std.ts';
+import {
+    TablerLoading,
+    TablerProgress
+} from '@tak-ps/vue-tabler';
+
+const props = defineProps({
+    mode: {
+        type: String,
+        default: 'Unknown'
+    },
+    modeid: {
+        type: String,
+        default: undefined
+    },
+    dragging: {
+        type: Boolean,
+        default: false
+    },
+    cancelButton: {
+        type: Boolean,
+        default: true
+    },
+    config: {
+        type: Object,
+        default: function() {
+            return {};
+        }
+    }
+});
+
+const emit = defineEmits([
+    'cancel',
+    'done'
+]);
+
+const dragger = ref(null);
+const fileInput = ref(null);
+const name = ref('');
+const progress = ref(0);
+
+function refresh() {
+    name.value = '';
+    progress.value = 0;
+    const input = fileInput.value;
+    input.type = 'text';
+    input.type = 'file';
+}
+
+function dragEnter(event) {
+    event.preventDefault()
+    dragger.value.classList.add('custom-drop-drag')
+}
+
+function dragLeave(event) {
+    event.preventDefault()
+    dragger.value.classList.remove('custom-drop-drag')
+}
+
+async function dragDrop(event) {
+    event.preventDefault();
+    const dt = event.dataTransfer
+    const file = dt.files[0];
+
+    await upload(file);
+}
+
+async function manualUpload(event) {
+    const file = event.target.files[0];
+    await upload(file);
+}
+
+async function upload(file) {
+    name.value = file.name;
+
+    const imported = await std('/api/import', {
+        method: 'POST',
+        body: {
+            name: name.value,
+            mode: props.mode,
+            mode_id: props.modeid,
+            config: props.config
+        }
+    });
+
+    return new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest()
+        const formData = new FormData()
+
+        xhr.open('PUT', stdurl(`/api/import/${imported.id}`), true)
+        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
+
+        xhr.setRequestHeader('Authorization', `Bearer ${localStorage.token}`);
+
+        xhr.upload.addEventListener('progress', (e) => {
+            progress.value = (e.loaded * 100.0 / e.total) || 100
+        });
+
+        xhr.addEventListener('readystatechange', () => {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                progress.value = 100;
+            } else if (xhr.readyState == 4 && xhr.status != 200) {
+                const err = new Error('Failed to upload file');
+                emit('cancel')
+                return reject(err);
+            }
+
+            if (xhr.readyState === 4) {
+                progress.value = 101;
+                emit('done', xhr.response);
+            }
+        });
+
+        formData.append('file', file)
+        xhr.send(formData)
+    });
+}
+
+defineExpose({ refresh });
+</script>
+
+<style>
+.custom-drop {
+    border-radius: 10px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: white;
+}
+
+.custom-drop-drag {
+    border-color: blue;
+}
+</style>

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

@@ -0,0 +1,66 @@
+<template>
+    <IconCar
+        v-if='props.sourceType === "vehicle"'
+        title='Vehicle'
+        :size='32'
+        stroke='1'
+    />
+    <IconWalk
+        v-else-if='props.sourceType === "personal"'
+        title='Body Camera'
+        :size='32'
+        stroke='1'
+    />
+    <IconDrone
+        v-else-if='props.sourceType === "uas-rotor"'
+        title='UAS Rotorcraft'
+        :size='32'
+        stroke='1'
+    />
+    <IconHelicopter
+        v-else-if='props.sourceType === "rotor"'
+        title='Manned Rotorcraft'
+        :size='32'
+        stroke='1'
+    />
+    <IconPlane
+        v-else-if='props.sourceType === "fixedwing"'
+        title='Fixed Wing'
+        :size='32'
+        stroke='1'
+    />
+    <IconPlane
+        v-else-if='props.sourceType === "uas-fixedwing"'
+        title='UAS Fixed Wing'
+        :size='32'
+        stroke='1'
+    />
+    <IconDeviceDesktop
+        v-else-if='props.sourceType === "screenshare"'
+        title='Screenshare'
+        :size='32'
+        stroke='1'
+    />
+    <IconVideo
+        v-else
+        title='Unknown Source'
+        :size='32'
+        stroke='1'
+    />
+</template>
+
+<script setup lang='ts'>
+import {
+    IconVideo,
+    IconCar,
+    IconWalk,
+    IconDrone,
+    IconPlane,
+    IconHelicopter,
+    IconDeviceDesktop,
+} from '@tabler/icons-vue';
+
+const props = defineProps<{
+    sourceType: string
+}>();
+</script>