@tak-ps/cloudtak 12.54.0 → 12.94.0

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

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

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

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

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