@tak-ps/cloudtak 12.54.0 → 12.94.0

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

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

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