@tak-ps/cloudtak 12.54.0

package/src/components/ETL/Layer/LayerIncomingStyles.vue

@@ -0,0 +1,349 @@
+<template>
+    <div>
+        <div class='card-header sticky-top bg-dark'>
+            <h3 class='card-title'>
+                Style Overrides
+            </h3>
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    v-if='disabled'
+                    title='Edit Style'
+                    @click='disabled = false'
+                >
+                    <IconPencil
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+                <template v-else-if='!loading.save'>
+                    <div class='btn-list d-flex align-items-center'>
+                        <TablerToggle
+                            v-model='enabled'
+                            label='Styling Enabled'
+                        />
+
+                        <button
+                            class='btn btn-primary btn-icon px-2'
+                            @click='saveLayer'
+                        >
+                            <IconDeviceFloppy
+                                v-tooltip='"Save Style"'
+                                :size='32'
+                                stroke='1'
+                            />
+                        </button>
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <TablerInlineAlert
+            v-if='!props.capabilities || !props.capabilities.incoming.schema.output'
+            severity='danger'
+            class='px-2 my-2'
+            title='Data Schema Error'
+            :description='`
+                    This Layer did not return a Data Schema for incoming data,
+                    it is either not properly configured or there is an issue with the data source.
+                    Styles can be edited, but available fields will not be shown in the style editor.
+            `'
+            :err='new Error("Layer failed to return an incoming input schema on the Capabilities object")'
+        />
+
+        <TablerLoading
+            v-if='loading.save'
+            desc='Saving Styles'
+        />
+        <TablerLoading
+            v-else-if='loading.init'
+            desc='Loading Styles'
+        />
+        <TablerNone
+            v-else-if='!enabled'
+            label='Style Overrides'
+            :create='false'
+        />
+        <template v-else>
+            <div class='card-body'>
+                <StyleSingle
+                    v-model='style'
+                    :schema='capabilities.incoming.schema.output || { properties: {} }'
+                    :disabled='disabled'
+                />
+            </div>
+
+            <div class='col-12 d-flex align-items-center card-header'>
+                <h3 class='card-title'>
+                    Query Mode
+                </h3>
+                <div class='ms-auto btn-list'>
+                    <button
+                        class='btn'
+                        @click='help("query")'
+                    >
+                        <IconHelp
+                            v-tooltip='"JSONata Help"'
+                            :size='32'
+                            stroke='1'
+                        />
+                    </button>
+                    <button
+                        v-if='query !== null'
+                        class='btn'
+                        @click='query = null'
+                    >
+                        <IconX
+                            v-tooltip='"Return to list"'
+                            :size='32'
+                            stroke='1'
+                        />
+                    </button>
+                    <template v-if='!disabled'>
+                        <button
+                            v-if='query === null'
+                            class='btn'
+                            @click='newQuery'
+                        >
+                            <IconPlus
+                                v-tooltip='"New Query"'
+                                :size='32'
+                                stroke='1'
+                            />
+                        </button>
+                    </template>
+                </div>
+            </div>
+            <template v-if='query === null && !queries.length'>
+                <TablerNone
+                    label='Queries'
+                    :create='false'
+                    @create='newQuery'
+                />
+            </template>
+            <template v-if='query === null && queries'>
+                <div
+                    role='menu'
+                    class='list-group list-group-flush px-2 py-2'
+                >
+                    <div
+                        v-for='(q, q_idx) in queries'
+                        :key='q_idx'
+                        class='my-1'
+                    >
+                        <div
+                            tabindex='0'
+                            role='menuitem'
+                            class='cursor-pointer hover list-group-item list-group-item-action'
+                            @click='query = q_idx'
+                        >
+                            <div class='d-flex'>
+                                <div
+                                    class='align-self-center'
+                                    v-text='q.query'
+                                />
+                                <div class='ms-auto'>
+                                    <IconTrash
+                                        v-if='!disabled'
+                                        :size='32'
+                                        stroke='1'
+                                        @click.stop='queries.splice(q_idx, 1)'
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template v-else-if='query !== null'>
+                <div class='card-body'>
+                    <div class='col-md-12 hover rounded px-2 py-2'>
+                        <QueryInput
+                            v-model='queries[query].query'
+                            :disabled='disabled'
+                            placeholder='JSONata Query'
+                            label='JSONata Query'
+                        />
+                    </div>
+
+                    <div
+                        class='px-2 py-2 round btn-group w-100'
+                        role='group'
+                    >
+                        <input
+                            id='query-style'
+                            type='radio'
+                            class='btn-check'
+                            autocomplete='off'
+                            :checked='!queries[query].delete'
+                            :disabled='disabled'
+                            @click='queries[query].delete = false'
+                        >
+                        <label
+                            for='query-style'
+                            type='button'
+                            class='btn btn-sm'
+                        >
+                            <IconBrush
+                                :size='32'
+                                stroke='1'
+                            />
+                            <span class='mx-2'>Style Query</span>
+                        </label>
+
+                        <input
+                            id='query-delete'
+                            type='radio'
+                            class='btn-check'
+                            autocomplete='off'
+                            :disabled='disabled'
+                            :checked='queries[query].delete'
+                            @click='queries[query].delete = true'
+                        >
+                        <label
+                            for='query-delete'
+                            type='button'
+                            class='btn btn-sm'
+                        >
+                            <IconTrash
+                                :size='32'
+                                stroke='1'
+                            />
+                            <span class='mx-2'>Delete Features</span>
+                        </label>
+                    </div>
+
+                    <template v-if='queries[query].delete'>
+                        <div class='border rounded mx-2 d-flex justify-content-center'>
+                            <div class='mx-2 my-2'>
+                                <IconTrash
+                                    size='24'
+                                    :stroke='1'
+                                />
+                                All features matching this query will not be submitted to the TAK Server
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <StyleSingle
+                            v-model='queries[query].styles'
+                            :schema='capabilities.incoming.schema.output'
+                            :disabled='disabled'
+                        />
+                    </template>
+                </div>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router'
+import { std } from '../../../std.ts';
+import {
+    IconX,
+    IconPlus,
+    IconHelp,
+    IconTrash,
+    IconPencil,
+    IconBrush,
+    IconDeviceFloppy
+} from '@tabler/icons-vue'
+import {
+    TablerInlineAlert,
+    TablerToggle,
+    TablerNone,
+    TablerLoading,
+    TablerIconButton
+} from '@tak-ps/vue-tabler';
+import StyleSingle from './utils/StyleSingle.vue';
+import QueryInput from './utils/QueryInput.vue';
+
+const props = defineProps({
+    layer: {
+        type: Object,
+        required: true
+    },
+    capabilities: {
+        type: Object,
+        required: true
+    }
+});
+
+const emit = defineEmits(['refresh']);
+
+const route = useRoute();
+
+const disabled = ref(true);
+const loading = ref({
+    init: true,
+    save: false
+});
+
+const enabled = ref(props.layer.incoming.enabled_styles);
+
+const style = ref({
+    callsign: '',
+    remarks: '',
+    links: [],
+});
+
+const queries = ref([]);
+const query = ref(null);
+
+onMounted(() => {
+    reload();
+    loading.value.init = false;
+});
+
+function reload() {
+    const clone = JSON.parse(JSON.stringify(props.layer.incoming.styles));
+    queries.value = clone.queries || [];
+    delete clone.queries;
+
+    style.value = Object.assign(style.value, JSON.parse(JSON.stringify(props.layer.incoming.styles)));
+
+    disabled.value = true;
+}
+
+function help(topic) {
+    if (topic === "query") {
+        window.open('http://docs.jsonata.org/simple', '_blank');
+    }
+}
+
+function newQuery() {
+    queries.value.push({
+        query: '',
+        styles: {}
+    })
+
+    query.value = queries.value.length - 1;
+}
+
+async function saveLayer() {
+    loading.value.save = true;
+
+    try {
+        await std(`/api/connection/${route.params.connectionid}/layer/${route.params.layerid}/incoming`, {
+            method: 'PATCH',
+            body: {
+                enabled_styles: enabled.value,
+                styles: {
+                    ...style.value,
+                    queries: queries.value
+                }
+            }
+        });
+
+        disabled.value = true;
+        loading.value.save = false;
+        query.value = null;
+
+        emit('refresh');
+    } catch (err) {
+        loading.value.save = false;
+        throw err;
+    }
+}
+</script>

package/src/components/ETL/Layer/LayerOutgoingConfig.vue

@@ -0,0 +1,204 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h3 class='card-title'>
+                Layer Config
+            </h3>
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    v-if='disabled'
+                    title='Edit Layer Config'
+                    @click='disabled = false'
+                >
+                    <IconPencil
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+        </div>
+
+        <TablerLoading
+            v-if='loading.save'
+            desc='Saving Config'
+        />
+        <TablerLoading
+            v-else-if='loading.init'
+            desc='Loading Config'
+        />
+        <div
+            v-else
+            class='card-body'
+        >
+            <div class='row g-2'>
+                <div class='col-12 d-flex align-items-center'>
+                    <label class='subheader'>Exclusion Filters</label>
+                    <div class='ms-auto'>
+                        <TablerIconButton
+                            v-if='!disabled'
+                            title='Add Filter'
+                            @click='addFilter'
+                        >
+                            <IconPlus
+                                :size='24'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                    </div>
+                </div>
+                <div class='col-12 border rounded'>
+                    <TablerNone
+                        v-if='!outgoing.filters || !outgoing.filters.queries || outgoing.filters.queries.length === 0'
+                        label='Exclusion Filters'
+                        :compact='true'
+                        :create='false'
+                    />
+                    <template v-else>
+                        <template
+                            v-for='(filter, filter_idx) of outgoing.filters.queries'
+                            :key='outgoing.filters.queries.length + "-" + filter_idx'
+                        >
+                            <div class='row mx-2 my-2 border-bottom pb-2'>
+                                <div
+                                    v-if='!disabled'
+                                    class='col-md-4 col-12'
+                                >
+                                    <TablerInput
+                                        v-model='filter.name'
+                                        label='Name'
+                                        placeholder='Optional Name'
+                                        :disabled='disabled'
+                                    />
+                                </div>
+                                <div
+                                    class='col-12'
+                                    :class='{ "col-md-8": !disabled }'
+                                >
+                                    <QueryInput
+                                        v-model='filter.query'
+                                        :label='disabled && filter.name ? filter.name : "Filter"'
+                                        :disabled='disabled'
+                                    >
+                                        <TablerDelete
+                                            v-if='!disabled'
+                                            title='Delete Filter'
+                                            :size='24'
+                                            displaytype='icon'
+                                            @delete='outgoing.filters.queries.splice(filter_idx, 1)'
+                                        />
+                                    </QueryInput>
+                                </div>
+                            </div>
+                        </template>
+                    </template>
+                </div>
+
+                <div
+                    v-if='!disabled'
+                    class='col-12 pt-3 d-flex'
+                >
+                    <button
+                        class='btn'
+                        @click='reload'
+                    >
+                        Cancel
+                    </button>
+                    <div class='ms-auto'>
+                        <button
+                            class='btn btn-primary'
+                            @click='saveOutgoing'
+                        >
+                            Save
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { std } from '../../../std.ts';
+import type { ETLLayerOutgoing } from '../../../types.ts';
+import {
+    TablerIconButton,
+    TablerLoading,
+    TablerInput,
+    TablerDelete,
+    TablerNone
+} from '@tak-ps/vue-tabler';
+import QueryInput from './utils/QueryInput.vue';
+import {
+    IconPlus,
+    IconPencil,
+} from '@tabler/icons-vue'
+
+const props = defineProps({
+    layer: {
+        type: Object,
+        required: true
+    },
+    capabilities: {
+        type: Object,
+        required: true
+    }
+})
+
+const route = useRoute();
+const emit = defineEmits([
+    'refresh',
+    'stack'
+]);
+
+const disabled = ref(true);
+
+const loading = ref({
+    init: true,
+    save: false
+});
+
+const outgoing = ref<ETLLayerOutgoing>(props.layer.outgoing);
+
+onMounted(() => {
+    reload();
+    loading.value.init = false;
+})
+
+function reload() {
+    outgoing.value = props.layer.outgoing;
+    disabled.value = true;
+}
+
+function addFilter() {
+    if (!outgoing.value.filters) outgoing.value.filters = {};
+    if (!outgoing.value.filters.queries) outgoing.value.filters.queries = [];
+
+    outgoing.value.filters.queries.push({
+        name: '',
+        query: ''
+    })
+}
+
+async function saveOutgoing() {
+    loading.value.save = true;
+
+    try {
+        outgoing.value = await std(`/api/connection/${route.params.connectionid}/layer/${route.params.layerid}/outgoing`, {
+            method: 'PATCH',
+            body: outgoing.value
+        }) as ETLLayerOutgoing;
+
+        disabled.value = true;
+
+        loading.value.save = false;
+
+        emit('refresh');
+        emit('stack');
+    } catch (err) {
+        loading.value.save = false;
+        throw err;
+    }
+}
+</script>