@tak-ps/cloudtak 12.54.0

package/src/components/ETL/Data.vue

@@ -0,0 +1,259 @@
+<template>
+    <div style='overflow: auto;'>
+        <div class='page-wrapper'>
+            <div class='page-header d-print-none'>
+                <div class='container-xl'>
+                    <div class='row g-2 align-items-center'>
+                        <div class='col d-flex text-white'>
+                            <TablerBreadCrumb />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <TablerLoading
+            v-if='!data || !connection'
+            class='text-white'
+            desc='Loading Data'
+        />
+        <div
+            v-else
+            class='page-body'
+        >
+            <div class='container-xl'>
+                <div class='row row-deck row-cards'>
+                    <div class='col-lg-12'>
+                        <div class='card'>
+                            <div class='card-header'>
+                                <ConnectionStatus :connection='connection' />
+
+                                <a
+                                    class='card-title cursor-pointer mx-2'
+                                    @click='router.push(`/connection/${connection.id}`)'
+                                    v-text='connection.name'
+                                />
+
+                                <span class='mx-1'>-</span>
+
+                                <div
+                                    class='card-title mx-1'
+                                    v-text='data.name'
+                                />
+
+                                <div class='ms-auto'>
+                                    <div class='btn-list'>
+                                        <IconAccessPoint
+                                            v-if='data.mission_sync'
+                                            v-tooltip='"Mission Sync On"'
+                                            :size='32'
+                                            stroke='1'
+                                            class='text-green'
+                                        />
+                                        <IconAccessPointOff
+                                            v-else
+                                            v-tooltip='"Mission Sync Off"'
+                                            :size='32'
+                                            stroke='1'
+                                            class='text-red'
+                                        />
+
+                                        <TablerIconButton
+                                            title='Edit'
+                                            @click='router.push(`/connection/${route.params.connectionid}/data/${data.id}/edit`)'
+                                        >
+                                            <IconSettings
+                                                :size='32'
+                                                stroke='1'
+                                            />
+                                        </TablerIconButton>
+                                    </div>
+                                </div>
+                            </div>
+                            <TablerMarkdown
+                                class='card-body'
+                                :markdown='data.description'
+                            />
+
+                            <div
+                                v-if='mission_error'
+                                class='card-body bg-red-lt'
+                            >
+                                <div class='header'>
+                                    TAK Server Sync Error
+                                </div>
+
+                                <div class='datagrid'>
+                                    <div class='datagrid-item'>
+                                        <div class='datagrid-title'>
+                                            Status
+                                        </div>
+                                        <div
+                                            class='datagrid-content'
+                                            v-text='mission_error.status'
+                                        />
+                                    </div>
+                                    <div class='datagrid-item'>
+                                        <div class='datagrid-title'>
+                                            Code
+                                        </div>
+                                        <div
+                                            class='datagrid-content'
+                                            v-text='mission_error.code'
+                                        />
+                                    </div>
+                                    <div class='datagrid-item'>
+                                        <div class='datagrid-title'>
+                                            Message
+                                        </div>
+                                        <div
+                                            class='datagrid-content'
+                                            v-text='mission_error.message'
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+
+                            <div class='card-footer d-flex align-items-center'>
+                                <div>
+                                    Last updated <span v-text='timeDiff(data.updated)' />
+                                </div>
+                                <div class='ms-auto'> 
+                                    <InitialAuthor :email='data.username || "Unknown"' />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class='col-lg-12'>
+                        <div class='card'>
+                            <div class='row g-0'>
+                                <div class='col-12 col-md-3 border-end'>
+                                    <div class='card-body'>
+                                        <h4 class='subheader'>
+                                            Data Sections
+                                        </h4>
+                                        <div
+                                            role='menu'
+                                            class='list-group list-group-transparent'
+                                        >
+                                            <span
+                                                tabindex='0'
+                                                role='menuitem'
+                                                class='list-group-item list-group-item-action d-flex align-items-center user-select-none'
+                                                :class='{
+                                                    "active": route.name === "data-groups",
+                                                    "cursor-pointer": route.name !== "data-groups"
+                                                }'
+                                                @click='router.push(`/connection/${route.params.connectionid}/data/${route.params.dataid}/groups`)'
+                                            ><IconAffiliate
+                                                :size='32'
+                                                stroke='1'
+                                            /><span class='mx-3'>Channels</span></span>
+                                            <span
+                                                tabindex='0'
+                                                role='menuitem'
+                                                class='list-group-item list-group-item-action d-flex align-items-center user-select-none'
+                                                :class='{
+                                                    "active": route.name === "data-files",
+                                                    "cursor-pointer": route.name !== "data-files"
+                                                }'
+                                                @click='router.push(`/connection/${route.params.connectionid}/data/${route.params.dataid}/files`)'
+                                            ><IconFiles
+                                                :size='32'
+                                                stroke='1'
+                                            /><span class='mx-3'>Files</span></span>
+                                            <span
+                                                tabindex='0'
+                                                role='menuitem'
+                                                class='list-group-item list-group-item-action d-flex align-items-center user-select-none'
+                                                :class='{
+                                                    "active": route.name === "data-layer",
+                                                    "cursor-pointer": route.name !== "data-layer"
+                                                }'
+                                                @click='router.push(`/connection/${route.params.connectionid}/data/${route.params.dataid}/layer`)'
+                                            ><IconBuildingBroadcastTower
+                                                :size='32'
+                                                stroke='1'
+                                            /><span class='mx-3'>Layers</span></span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class='col-12 col-md-9 position-relative'>
+                                    <router-view
+                                        :data='data'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <PageFooter />
+    </div>
+</template>
+
+<script setup lang='ts'>
+import type { ETLData, ETLConnection } from '../../types.ts';
+import { ref, onMounted, computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { std } from '../../std.ts';
+import PageFooter from '../PageFooter.vue';
+import timeDiff from '../../timediff.ts';
+import InitialAuthor from '../util/InitialAuthor.vue';
+import {
+    TablerLoading,
+    TablerIconButton,
+    TablerMarkdown,
+    TablerBreadCrumb,
+} from '@tak-ps/vue-tabler'
+import {
+    IconFiles,
+    IconAffiliate,
+    IconBuildingBroadcastTower,
+    IconSettings,
+    IconAccessPoint,
+    IconAccessPointOff,
+} from '@tabler/icons-vue'
+import ConnectionStatus from './Connection/StatusDot.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const connection = ref<ETLConnection | undefined >();
+const data = ref<ETLData | undefined>();
+
+const mission_error = computed<{
+    code: string
+    status: string;
+    message: string
+} | undefined>(() => {
+    if (!data.value || !data.value.mission_error) return;
+
+    try {
+        return JSON.parse(data.value.mission_error)
+    } catch (err) {
+        console.error(err)
+        return {
+            code: 'Unknown',
+            status: 'Unknown',
+            message: data.value.mission_error
+        }
+    }
+});
+
+onMounted(async () => {
+    await fetchConnection();
+    await fetch();
+});
+
+
+async function fetchConnection() {
+    connection.value = await std(`/api/connection/${route.params.connectionid}`) as ETLConnection;
+}
+
+async function fetch() {
+    data.value = await std(`/api/connection/${route.params.connectionid}/data/${route.params.dataid}`) as ETLData;
+}
+</script>

package/src/components/ETL/DataEdit.vue

@@ -0,0 +1,212 @@
+<template>
+    <div style='overflow: auto;'>
+        <div class='page-wrapper'>
+            <div class='page-header d-print-none'>
+                <div class='container-xl'>
+                    <div class='row g-2 align-items-center'>
+                        <div class='col d-flex text-white'>
+                            <TablerBreadCrumb />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <TablerLoading
+            v-if='loading.data'
+            class='text-white'
+            desc='Loading Data'
+        />
+        <div
+            v-else
+            class='page-body'
+        >
+            <div class='container-xl'>
+                <div class='row row-deck row-cards'>
+                    <div class='col-lg-12'>
+                        <div class='card'>
+                            <div class='card-header'>
+                                <h3 class='card-title'>
+                                    Data <span v-text='data.id' />
+                                </h3>
+                            </div>
+                            <div class='card-body'>
+                                <div class='row row-cards'>
+                                    <div class='col-md-12'>
+                                        <TablerInput
+                                            v-model='data.name'
+                                            label='Data Name'
+                                            description='The human readable name of the Data Layer'
+                                            :disabled='route.params.dataid'
+                                            :error='errors.name'
+                                        />
+                                    </div>
+                                    <div class='col-md-12'>
+                                        <GroupSelect
+                                            v-model='data.mission_groups'
+                                            :connection='route.params.connectionid'
+                                        />
+                                    </div>
+                                    <div class='col-md-12'>
+                                        <TablerEnum
+                                            v-model='data.mission_role'
+                                            label='Mission Default Role'
+                                            :disabled='route.params.dataid || data.mission_diff'
+                                            description='The Default role assigned to subscribers to the mission'
+                                            :options='["MISSION_OWNER", "MISSION_SUBSCRIBER", "MISSION_READONLY_SUBSCRIBER"]'
+                                        />
+                                    </div>
+                                    <div class='col-md-12'>
+                                        <TablerToggle
+                                            v-model='data.mission_sync'
+                                            label='Mission Sync'
+                                            description='If Enabled, Assets will be uploaded to the Mission'
+                                        />
+                                    </div>
+                                    <div class='col-md-12'>
+                                        <TablerToggle
+                                            v-model='data.mission_diff'
+                                            label='Mission Layer Diff'
+                                            description='
+                                                If Enabled only a single layer will be allowed to be associated with the data sync
+                                                and CoTs submitted will be diff against existing CoTs, with CoTs not in each new
+                                                FeatureSet being removed from the Mission Sync
+                                            '
+                                        />
+                                    </div>
+                                    <div class='col-md-12'>
+                                        <TablerInput
+                                            v-model='data.description'
+                                            label='Data Description'
+                                            description='The human readable description of the Data Layer'
+                                            :rows='6'
+                                            :error='errors.description'
+                                        />
+                                    </div>
+                                    <div class='d-flex'>
+                                        <div v-if='route.params.dataid'>
+                                            <TablerDelete
+                                                label='Delete Data'
+                                                @delete='deleteData'
+                                            />
+                                        </div>
+                                        <div class='ms-auto'>
+                                            <a
+                                                v-if='route.params.dataid'
+                                                class='cursor-pointer btn btn-primary'
+                                                @click='create'
+                                            >Update Data</a>
+                                            <a
+                                                v-else
+                                                class='cursor-pointer btn btn-primary'
+                                                @click='create'
+                                            >Create Data</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <PageFooter />
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import { std, stdurl } from '../../std.ts';
+import PageFooter from '../PageFooter.vue';
+import {
+    TablerBreadCrumb,
+    TablerInput,
+    TablerToggle,
+    TablerDelete,
+    TablerEnum,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import GroupSelect from '../util/GroupSelect.vue';
+
+const route = useRoute();
+const router = useRouter();
+const loading = ref({
+    data: true,
+});
+
+const errors = ref({
+    name: '',
+    description: '',
+});
+
+const data = ref({
+    name: '',
+    mission_sync: true,
+    mission_groups: [],
+    mission_role: 'MISSION_READONLY_SUBSCRIBER',
+    mission_diff: true,
+    description: '',
+});
+
+watch(data.value, () => {
+    if (!data.value.id && data.value.mission_diff) {
+        data.value.mission_role = 'MISSION_READONLY_SUBSCRIBER';
+    }
+});
+
+onMounted(async () => {
+    if (route.params.dataid) {
+        await fetch();
+    } else {
+        loading.value.data = false;
+    }
+});
+
+async function fetch() {
+    loading.value.data = true;
+    data.value = await std(`/api/connection/${route.params.connectionid}/data/${route.params.dataid}`);
+    loading.value.data = false;
+}
+
+async function deleteData() {
+    await std(`/api/connection/${route.params.connectionid}/data/${route.params.dataid}`, {
+        method: 'DELETE'
+    });
+
+    router.push(`/connection/${route.params.connectionid}/data`);
+}
+
+async function create() {
+    for (const field of ['name', 'description']) {
+        errors.value[field] = !data.value[field] ? 'Cannot be empty' : '';
+    }
+    for (const e in errors.value) if (errors.value[e]) return;
+
+    loading.value.data = true;
+
+    try {
+        let url, method;
+        const body = JSON.parse(JSON.stringify(data.value));
+
+        if (route.params.dataid) {
+            url = stdurl(`/api/connection/${route.params.connectionid}/data/${route.params.dataid}`);
+            method = 'PATCH'
+        } else {
+            url = stdurl(`/api/connection/${route.params.connectionid}/data`);
+            method = 'POST'
+            body.connection = parseInt(route.params.connectionid);
+        }
+
+        const create = await std(url, { method, body });
+
+        loading.value.data = false;
+
+        router.push(`/connection/${route.params.connectionid}/data/${create.id}`);
+    } catch (err) {
+        loading.value.data = false;
+        throw err;
+    }
+}
+</script>