@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/Menu/MenuVideosRemote.vue

@@ -0,0 +1,203 @@
+<template>
+    <MenuTemplate
+        name='Remote Video Connection'
+        :loading='loading'
+        :err='err'
+    >
+        <template #buttons>
+            <TablerDelete
+                v-if='route.params.connectionid !== "new"'
+                displaytype='icon'
+                @delete='deleteConnection'
+            />
+        </template>
+        <template #default>
+            <div class='row g-2 px-2'>
+                <div class='col-12'>
+                    <TablerInput
+                        v-model='connection.alias'
+                        label='Alias'
+                    >
+                        <TablerToggle
+                            v-model='connection.active'
+                            label='Active'
+                        />
+                    </TablerInput>
+                </div>
+                <div
+                    v-if='route.params.connectionid === "new"'
+                    class='col-12'
+                >
+                    <label class='px-2 w-100'>Channels</label>
+
+                    <div style='max-height: 20vh; min-height: 200px; overflow-y: auto;'>
+                        <GroupSelect
+                            v-model='groups'
+                            :active='true'
+                            direction='IN'
+                        />
+                    </div>
+                </div>
+                <div class='col-12 d-flex'>
+                    <label>Feeds</label>
+
+                    <div class='ms-auto'>
+                        <TablerIconButton
+                            title='Add Feed'
+                            @click='newFeed'
+                        >
+                            <IconPlus
+                                :size='24'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                    </div>
+                </div>
+                <div class='col-12'>
+                    <TablerNone
+                        v-if='connection.feeds.length === 0'
+                        :create='false'
+                        :compact='true'
+                        label='Feeds'
+                    />
+                    <template v-else>
+                        <template
+                            v-for='(feed, fit) of connection.feeds'
+                            :key='feed.uuid'
+                        >
+                            <VideosRemoteFeed
+                                v-model='connection.feeds[fit]'
+                                @delete='connection.feeds.splice(fit, 1)'
+                            />
+                        </template>
+                    </template>
+                </div>
+                <div class='col-12 d-flex pt-3'>
+                    <div class='ms-auto'>
+                        <button
+                            class='btn btn-primary'
+                            @click='saveConnection'
+                        >
+                            Save Connection
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { v4 as randomUUID } from 'uuid';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import type { VideoConnection, VideoConnectionFeed } from '../../../types.ts';
+import VideosRemoteFeed from './Videos/VideosRemoteFeed.vue';
+import { std } from '../../../std.ts';
+import { useRoute, useRouter } from 'vue-router';
+import GroupSelect from '../../util/GroupSelect.vue';
+import {
+    TablerInput,
+    TablerDelete,
+    TablerIconButton,
+    TablerNone,
+    TablerToggle,
+} from '@tak-ps/vue-tabler';
+
+import {
+    IconPlus
+} from '@tabler/icons-vue';
+
+import { ref, onMounted } from 'vue'
+
+const route = useRoute();
+const router = useRouter();
+const loading = ref(String(route.params.connectionid) !== "new");
+const err = ref<Error | undefined>(undefined);
+
+const groups = ref<string[]>([]);
+
+const connection = ref<VideoConnection>({
+    uuid: randomUUID(),
+    active: true,
+    classification: '',
+    thumbnail: '',
+    alias: '',
+    feeds: []
+})
+
+onMounted(async () => {
+    if (String(route.params.connectionid) !== "new") {
+        await fetchConnection()
+    } else {
+        newFeed();
+    }
+});
+
+function newFeed() {
+    connection.value.feeds.push({
+        uuid: randomUUID(),
+        alias: "",
+        url: "",
+        active: true
+    } as VideoConnectionFeed)
+}
+
+async function fetchConnection() {
+    loading.value = true;
+
+    try {
+        connection.value = await std(`/api/marti/video/${route.params.connectionid}`, {
+            method: 'GET'
+        }) as VideoConnection;
+
+        loading.value = false;
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+
+async function saveConnection() {
+    loading.value = true;
+
+    try {
+        if (String(route.params.connectionid) !== 'new') {
+            await std(`/api/marti/video/${connection.value.uuid}`, {
+                method: 'PUT',
+                body: connection.value
+            });
+        } else {
+            await std('/api/marti/video', {
+                method: 'POST',
+                body: {
+                    groups: groups.value,
+                    ...connection.value
+                }
+            });
+        }
+
+        router.push(`/menu/videos`)
+
+        loading.value = false;
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+
+async function deleteConnection(): Promise<void> {
+    loading.value = true;
+
+    try {
+        await std(`/api/marti/video/${route.params.connectionid}`, {
+            method: 'DELETE'
+        });
+
+        router.push(`/menu/videos`)
+    } catch (err) {
+        loading.value = false;
+
+        throw err;
+    }
+}
+</script>

package/src/components/CloudTAK/Menu/Mission/MissionContents.vue

@@ -0,0 +1,211 @@
+<template>
+    <MenuTemplate
+        name='Mission Files'
+        :zindex='0'
+        :back='false'
+        :border='false'
+    >
+        <template #buttons>
+            <TablerIconButton
+                v-if='!upload && props.subscription.role && props.subscription.role.permissions.includes("MISSION_WRITE")'
+                title='Upload File'
+                @click='upload = true'
+            >
+                <IconPlus
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+        </template>
+
+        <TablerLoading
+            v-if='loading'
+        />
+        <TablerAlert
+            v-else-if='error'
+            :err='error'
+        />
+        <div
+            v-else-if='upload'
+            class='mx-2'
+        >
+            <Upload
+                ref='upload'
+                :url='stdurl(`/api/marti/missions/${props.subscription.guid}/upload`)'
+                :headers='uploadHeaders'
+                :autoupload='false'
+                format='raw'
+                method='POST'
+                @staged='uploadStaged($event)'
+                @error='error = $event'
+                @cancel='upload = false'
+                @done='doneUpload'
+            />
+        </div>
+
+        <TablerNone
+            v-else-if='!props.subscription.meta.contents.length'
+            label='Files'
+            :create='false'
+        />
+        <template v-else>
+            <div
+                v-for='content in props.subscription.meta.contents'
+                :key='content.data.uid'
+                class='col-12 d-flex px-2 py-2 hover rounded'
+            >
+                <div
+                    style='width: calc(100% - 120px)'
+                >
+                    <div class='col-12'>
+                        <div
+                            class='text-truncate'
+                            v-text='content.data.name'
+                        />
+                        <div>
+                            <span
+                                class='subheader'
+                                v-text='content.data.submitter'
+                            /> - <span
+                                class='subheader'
+                                v-text='content.data.submissionTime'
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div class='col-auto'>
+                    <div class='d-flex ms-auto'>
+                        <TablerDelete
+                            v-if='props.subscription.role && props.subscription.role.permissions.includes("MISSION_WRITE")'
+                            displaytype='icon'
+                            @delete='deleteFile(content.data.hash)'
+                        />
+                        <TablerIconButton
+                            title='Import File'
+                            @click='importFile(content.data.name, content.data.hash)'
+                        >
+                            <IconFileImport
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                        <TablerIconButton
+                            title='Download Asset'
+                            @click='downloadFile(content.data.name, content.data.hash)'
+                        >
+                            <IconDownload
+                                :size='32'
+                                stroke='1'
+                                color='white'
+                                class='cursor-pointer'
+                            />
+                        </TablerIconButton>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, useTemplateRef } from 'vue';
+import { useRouter } from 'vue-router';
+import { std, stdurl } from '../../../../std.ts';
+import Subscription from '../../../../base/subscription.ts';
+import type { Import } from '../../../../types.ts';
+import {
+    IconPlus,
+    IconFileImport,
+    IconDownload,
+} from '@tabler/icons-vue';
+import Upload from '../../../util/Upload.vue';
+import {
+    TablerIconButton,
+    TablerLoading,
+    TablerAlert,
+    TablerNone,
+    TablerDelete,
+} from '@tak-ps/vue-tabler';
+
+import MenuTemplate from '../../util/MenuTemplate.vue';
+
+const props = defineProps<{
+    subscription: Subscription
+}>();
+
+const emit = defineEmits([ 'refresh' ]);
+
+const router = useRouter();
+
+const error = ref<Error | undefined>();
+
+const uploadRef = useTemplateRef<typeof Upload>('upload');
+const upload = ref(false);
+
+const loading = ref(false)
+
+async function deleteFile(hash: string) {
+    await std(`/api/marti/missions/${props.subscription.guid}/upload/${hash}`, {
+        method: 'DELETE'
+    });
+
+    emit("refresh");
+}
+
+const uploadHeaders = computed(() => {
+    const headers: Record<string, string> = {
+        Authorization: `Bearer ${localStorage.token}`,
+    }
+
+    if (props.subscription.token) {
+        headers.MissionAuthorization = props.subscription.token;
+    };
+
+    return headers;
+});
+
+async function doneUpload() {
+    upload.value = false;
+    emit("refresh");
+}
+
+async function uploadStaged(ev: { name: string }) {
+
+    if (uploadRef.value) {
+        await uploadRef.value.upload({
+            query: {
+                name: ev.name
+            }
+        });
+    } else {
+        throw new Error("Upload Not Found");
+    }
+
+    emit("refresh");
+}
+
+async function downloadFile(name: string, hash: string): Promise<void> {
+    const url = stdurl(`/api/marti/api/files/${hash}`)
+    url.searchParams.append('token', localStorage.token);
+    url.searchParams.append('name', name);
+
+    await std(url, {
+        download: true
+    })
+}
+
+async function importFile(name: string, hash: string) {
+    loading.value = true;
+
+    const imp = await std('/api/import', {
+        method: 'POST',
+        body: {
+            name: name,
+            source: 'Mission',
+            source_id: hash
+        }
+    }) as Import;
+
+    router.push(`/menu/imports/${imp.id}`)
+}
+</script>