@tak-ps/cloudtak 12.54.0

package/src/components/ETL/LayerEdit.vue

@@ -0,0 +1,276 @@
+<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.layer'
+            class='text-white'
+            desc='Loading Layer'
+        />
+        <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'>
+                                    Layer <span v-text='layer.id' />
+                                </h3>
+
+                                <div class='ms-auto'>
+                                    <div class='d-flex'>
+                                        <div class='btn-list'>
+                                            <div class='d-flex'>
+                                                <span class='px-2'>Logging</span>
+                                                <label class='form-check form-switch'>
+                                                    <input
+                                                        v-model='layer.logging'
+                                                        class='form-check-input'
+                                                        type='checkbox'
+                                                    >
+                                                </label>
+                                            </div>
+                                            <div class='d-flex'>
+                                                <span class='px-2'>Enabled</span>
+                                                <label class='form-check form-switch'>
+                                                    <input
+                                                        v-model='layer.enabled'
+                                                        class='form-check-input'
+                                                        type='checkbox'
+                                                    >
+                                                </label>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class='card-body'>
+                                <div class='row row-cards'>
+                                    <div class='col-md-12'>
+                                        <TablerInput
+                                            v-model='layer.name'
+                                            label='Layer Name'
+                                            :error='errors.name'
+                                        />
+                                    </div>
+                                    <div class='col-md-12'>
+                                        <TablerInput
+                                            v-model='layer.description'
+                                            label='Layer Description'
+                                            :rows='6'
+                                            :error='errors.description'
+                                        />
+                                    </div>
+                                    <template v-if='!route.params.layerid'>
+                                        <div class='col-12'>
+                                            <div
+                                                class='btn-group w-100'
+                                                role='group'
+                                            >
+                                                <input
+                                                    id='template'
+                                                    type='radio'
+                                                    class='btn-check'
+                                                    name='creation-type'
+                                                    autocomplete='off'
+                                                    :checked='type === "template"'
+                                                    @click='type = "template"'
+                                                >
+                                                <label
+                                                    for='template'
+                                                    type='button'
+                                                    class='btn'
+                                                ><IconTemplate
+                                                    class='me-2'
+                                                    :size='20'
+                                                    :stoke='1'
+                                                /> Templated Creation</label>
+
+                                                <input
+                                                    id='manual'
+                                                    type='radio'
+                                                    class='btn-check'
+                                                    name='creation-type'
+                                                    autocomplete='off'
+                                                    :checked='type === "manual"'
+                                                    @click='type = "manual"'
+                                                >
+                                                <label
+                                                    for='manual'
+                                                    type='button'
+                                                    class='btn'
+                                                ><IconPencil
+                                                    class='me-2'
+                                                    :size='20'
+                                                    :stoke='1'
+                                                /> Manual Creation</label>
+                                            </div>
+                                        </div>
+
+                                        <template v-if='type === "template"'>
+                                            <LayerTemplateSelect v-model='template' />
+                                        </template>
+                                        <template v-else-if='type === "manual"'>
+                                            <LayerTaskSelect v-model='layer.task' />
+                                        </template>
+                                    </template>
+                                    <div class='col-lg-12 d-flex'>
+                                        <div v-if='route.params.layerid'>
+                                            <TablerDelete
+                                                label='Delete Layer'
+                                                @delete='deleteLayer'
+                                            />
+                                        </div>
+                                        <div class='ms-auto'>
+                                            <a
+                                                v-if='route.params.layerid'
+                                                class='cursor-pointer btn btn-primary'
+                                                @click='create'
+                                            >Update Layer</a>
+                                            <a
+                                                v-else
+                                                class='cursor-pointer btn btn-primary'
+                                                @click='create'
+                                            >Create Layer</a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <PageFooter />
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { std, stdurl } from '../../std.ts';
+import PageFooter from '../PageFooter.vue';
+import LayerTemplateSelect from '../util/LayerTemplateSelect.vue';
+import LayerTaskSelect from '../util/LayerTaskSelect.vue';
+import {
+    TablerBreadCrumb,
+    TablerDelete,
+    TablerInput,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import {
+    IconTemplate,
+    IconPencil,
+} from '@tabler/icons-vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const type = ref('template');
+const loading = ref({
+    layer: true
+});
+
+const errors = ref({
+    name: '',
+    task: '',
+    description: '',
+})
+
+const template = ref(null);
+
+const layer = ref({
+    name: '',
+    description: '',
+    task: '',
+    enabled: true,
+    logging: false,
+})
+
+onMounted(async () => {
+    if (route.params.layerid) {
+        await fetch();
+    } else {
+        loading.value.layer = false;
+    }
+});
+
+async function fetch() {
+    loading.value.layer = true;
+    layer.value = await std(`/api/connection/${route.params.connectionid}/layer/${route.params.layerid}`);
+    loading.value.layer = false;
+}
+
+async function deleteLayer() {
+    await std(`/api/connection/${route.params.connectionid}/layer/${route.params.layerid}`, {
+        method: 'DELETE'
+    });
+
+    router.push(`/connection/${route.params.connectionid}/layer`);
+}
+
+async function create() {
+    let fields =  ['name', 'description']
+
+    if (type.value === "manual") fields.push('task');
+
+    for (const field of fields) {
+        errors.value[field] = !layer.value[field] ? 'Cannot be empty' : '';
+    }
+    for (const e in errors.value) if (errors.value[e]) return;
+
+    loading.value.layer = true;
+
+    let savedLayer;
+
+    try {
+        let url;
+        if (route.params.layerid) {
+            url = stdurl(`/api/connection/${route.params.connectionid}/layer/${route.params.layerid}`);
+            savedLayer = await std(url, {
+                method: 'PATCH',
+                body: {
+                    name: layer.value.name,
+                    description: layer.value.description,
+                    enabled: layer.value.enabled,
+                    logging: layer.value.logging,
+                }
+            });
+        } else {
+            url = stdurl(`/api/connection/${route.params.connectionid}/layer`);
+
+            savedLayer = JSON.parse(JSON.stringify(layer.value));
+
+            let body = JSON.parse(JSON.stringify(layer.value));
+            if (type.value === "template" && template.value) {
+                // These should be overwritten
+                delete body.task;
+                body = { ...template.value, ...body };
+            }
+
+            savedLayer = await std(url, { method: 'POST', body });
+        }
+
+        loading.value.layer = false;
+
+        router.push(`/connection/${route.params.connectionid}/layer/${savedLayer.id}`);
+    } catch (err) {
+        loading.value.layer = false;
+        throw err;
+    }
+}
+</script>

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

@@ -0,0 +1,311 @@
+<template>
+    <div class='ps-3'>
+        <div
+            v-if='advanced || l.filter'
+            class='col-lg-12'
+        >
+            <label class='subheader'>Filter</label>
+            <div class='12'>
+                <CopyField
+                    :model-value='JSON.stringify(l.filter)'
+                    :edit='!disabled'
+                    :hover='!disabled'
+                    :validate='validateFilter'
+                    @update:model-value='l.filter = $event ? JSON.parse($event) : undefined'
+                />
+            </div>
+        </div>
+        <div
+            v-if='advanced || l["minzoom"] || l["maxzoom"]'
+            class='col-12 row g-0'
+        >
+            <label class='subheader'>Zoom Limits</label>
+
+            <div class='col-12 col-md-6 pe-md-1'>
+                <CopyField
+                    :model-value='!isNaN(l.minzoom) ? l.minzoom : "Not Set"'
+                    :edit='!disabled'
+                    :hover='!disabled'
+                    @update:model-value='l.minzoom = !isNaN(parseInt($event)) ? parseInt($event) : undefined'
+                />
+            </div>
+            <div class='col-12 col-md-6 ps-md-1'>
+                <CopyField
+                    :model-value='!isNaN(l.maxzoom) ? l.maxzoom : "Not Set"'
+                    :edit='!disabled'
+                    :hover='!disabled'
+                    @update:model-value='l.maxzoom = !isNaN(parseInt($event)) ? parseInt($event) : undefined'
+                />
+            </div>
+        </div>
+        <div
+            v-if='advanced || l["source-layer"]'
+            class='col-12'
+        >
+            <label class='subheader'>Source Layer</label>
+            <CopyField
+                :model-value='l["source-layer"] || None'
+                :edit='!disabled'
+                :hover='!disabled'
+                @update:model-value='l["source-layer"] = $event ? $event : undefined'
+            />
+        </div>
+        <div class='col-12'>
+            <label class='subheader'>Layout</label>
+            <div
+                v-if='!l.layout || Object.keys(l.layout).length === 0'
+                class='col-12 d-flex py-1'
+            >
+                <TablerNone
+                    :compact='true'
+                    label='Layout Properties'
+                    :create='false'
+                />
+            </div>
+            <template v-else>
+                <div
+                    v-for='p of Object.keys(l.layout)'
+                    :key='p'
+                    class='col-12 py-1'
+                >
+                    <template v-if='p === "visibility"'>
+                        <TablerToggle
+                            v-model='l.layout[p]'
+                            :label='p'
+                        />
+                    </template>
+                    <template v-else>
+                        <span v-text='p' />
+
+                        <span
+                            class='ms-auto'
+                            v-text='l.layout[p]'
+                        />
+                    </template>
+                </div>
+            </template>
+        </div>
+        <div class='col-lg'>
+            <label class='subheader'>Paint</label>
+            <div
+                v-if='Object.keys(l.paint).length === 0'
+                class='col-12 px-2 py-1'
+            >
+                <TablerNone
+                    :compact='true'
+                    label='Paint Properties'
+                    :create='false'
+                />
+            </div>
+            <div
+                v-for='p of Object.keys(l.paint)'
+                :key='p'
+                class='col-12'
+            >
+                <template
+                    v-if='[
+                        "fill-opacity",
+                        "line-opacity",
+                        "marker-opacity",
+                    ].includes(p)'
+                >
+                    <template v-if='Array.isArray(l.paint[p]) && l.paint[p][0] === "number"'>
+                        <TablerRange
+                            v-model='l.paint[p][l.paint[p].length -1]'
+                            class='w-100'
+                            label='Opacity'
+                            :min='0'
+                            :max='1'
+                            :step='0.1'
+                        >
+                            <span
+                                class='float-right'
+                                v-text='Math.round(l.paint[p][l.paint[p].length -1] * 100) + "%"'
+                            />
+                        </TablerRange>
+                    </template>
+                    <template v-else-if='!isNaN(Number(l.paint[p]))'>
+                        <TablerRange
+                            v-model='l.paint[p]'
+                            class='w-100'
+                            label='Opacity'
+                            :min='0'
+                            :max='1'
+                            :step='0.1'
+                        >
+                            <span
+                                class='float-right'
+                                v-text='Math.round(l.paint[p] * 100) + "%"'
+                            />
+                        </TablerRange>
+                    </template>
+                    <template v-else>
+                        <span v-text='p' />
+                        <pre v-text='l.paint[p]' />
+                    </template>
+                </template>
+                <template
+                    v-else-if='[
+                        "line-width",
+                        "circle-radius"
+                    ].includes(p)'
+                >
+                    <template v-if='Array.isArray(l.paint[p]) && l.paint[p][0] === "number"'>
+                        <TablerRange
+                            v-model='l.paint[p][l.paint[p].length -1]'
+                            class='w-100'
+                            label='Width'
+                            :min='1'
+                            :max='10'
+                            :step='1'
+                        >
+                            <span
+                                class='float-right'
+                                v-text='l.paint[p][l.paint[p].length -1]'
+                            />
+                        </TablerRange>
+                    </template>
+                    <template v-else-if='!isNaN(Number(l.paint[p]))'>
+                        <TablerRange
+                            v-model='l.paint[p]'
+                            class='w-100'
+                            label='Width'
+                            :min='1'
+                            :max='10'
+                            :step='1'
+                        >
+                            <span
+                                class='float-right'
+                                v-text='l.paint[p]'
+                            />
+                        </TablerRange>
+                    </template>
+                    <template v-else>
+                        <span v-text='p' />
+                        <pre v-text='l.paint[p]' />
+                    </template>
+                </template>
+                <template
+                    v-else-if='[
+                        "fill-color",
+                        "line-color",
+                        "circle-color",
+                        "text-color",
+                        "text-halo-color",
+                        "fill-outline-color"
+                    ].includes(p)'
+                >
+                    <template v-if='Array.isArray(l.paint[p]) && l.paint[p][0] === "string"'>
+                        <TablerInput
+                            v-model='l.paint[p][l.paint[p].length -1]'
+                            class='w-100'
+                            type='color'
+                            :label='p'
+                        >
+                            <span
+                                class='float-right'
+                                v-text='l.paint[p][l.paint[p].length -1]'
+                            />
+                        </TablerInput>
+                    </template>
+                    <template v-else-if='typeof l.paint[p] === "string"'>
+                        <TablerInput
+                            v-model='l.paint[p]'
+                            class='w-100'
+                            type='color'
+                            :label='p'
+                        >
+                            <span
+                                class='float-right'
+                                v-text='l.paint[p]'
+                            />
+                        </TablerInput>
+                    </template>
+                    <template v-else>
+                        <span v-text='p' />
+                        <CopyField
+                            :model-value='JSON.stringify(l.paint[p], null, 4)'
+                            :edit='!disabled'
+                            :hover='!disabled'
+                            :rows='JSON.stringify(l.paint[p], null, 4).split("\n").length'
+                            @update:model-value='l.paint[p] = $event ? JSON.parse($event) : undefined'
+                        />
+                    </template>
+                </template>
+                <template v-else>
+                    <div v-text='p' />
+                    <CopyField
+                        v-model='l.paint[p]'
+                        :model-value='JSON.stringify(l.paint[p], null, 4)'
+                        :rows='JSON.stringify(l.paint[p], null, 4).split("\n").length'
+                        :edit='!disabled'
+                        :hover='!disabled'
+                        @update:model-value='l.paint[p] = $event ? JSON.parse($event) : undefined'
+                    />
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import {
+    TablerNone,
+    TablerInput,
+    TablerToggle,
+    TablerRange
+} from '@tak-ps/vue-tabler';
+import CopyField from '../../CloudTAK/util/CopyField.vue';
+import { useMapStore } from '../../../stores/map.ts';
+const mapStore = useMapStore();
+
+const props = defineProps({
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    advanced: {
+        type: Boolean,
+        default: false
+    },
+    layer: {
+        type: Object,
+        required: true
+    },
+    updateMap: {
+        type: Boolean,
+        default: true
+    }
+});
+
+const l = ref(props.layer);
+
+function validateFilter(text) {
+    try {
+        JSON.parse(text) 
+    } catch (err) {
+        return err.message;
+    }
+
+    return true;
+}
+
+watch(l.value, () => {
+    if (!props.updateMap) return;
+
+    for (const paint of [
+        'fill-opacity',
+        'fill-color',
+        'line-opacity',
+        'line-color',
+        'line-width',
+        'text-halo-width',
+        'text-halo-blur'
+    ]) {
+        if (l.value.paint[paint]) {
+            mapStore.map.setPaintProperty(String(l.value.id), paint, l.value.paint[paint]);
+        }
+    }
+});
+</script>

package/src/components/ETL/Styling/ObjectInput.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class='col-12 py-2'>
+        <TablerInput
+            v-model='current'
+            :rows='32'
+            :error='error'
+        />
+    </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import {
+    TablerInput
+} from '@tak-ps/vue-tabler'
+import deepEqual from 'deep-equal';
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        required: true
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const error = ref('');
+const current = ref(props.modelValue ? JSON.stringify(props.modelValue, null, 4) : '');
+
+watch(() => props.modelValue, () => {
+    if (!deepEqual(props.modelValue, JSON.parse(current.value))) {
+        current.value = JSON.stringify(props.modelValue, null, 4)
+    }
+}, { deep: true });
+
+watch(current, () => {
+    try {
+        emit('update:modelValue', JSON.parse(current.value));
+        error.value = '';
+    } catch (err) {
+        error.value = `Invalid JSON: ${err.message}`;
+    }
+});
+</script>