@tak-ps/cloudtak 12.54.0 → 12.94.0

package/src/components/ETL/LayerEdit.vue

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

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

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