@tak-ps/cloudtak 12.54.0

package/src/components/util/EsriServer.vue

@@ -0,0 +1,368 @@
+<template>
+    <div class='border py-2 mx-2'>
+        <div class='d-flex'>
+            <h1
+                class='subheader px-3 col-9 text-truncate'
+                v-text='server'
+            />
+
+            <div class='ms-auto btn-list mx-3'>
+                <IconRefresh
+                    v-if='!disabled && !err && !loading'
+                    v-tooltip='"Refresh"'
+                    :size='32'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='getList'
+                />
+
+                <IconArrowBack
+                    v-if='!disabled && !err && !loading'
+                    v-tooltip='"Back"'
+                    :size='32'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='back'
+                />
+                <IconX
+                    v-if='!disabled'
+                    v-tooltip='"Close Explorer"'
+                    :size='32'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='$emit("close")'
+                />
+            </div>
+        </div>
+
+        <template v-if='err'>
+            <TablerAlert
+                title='ESRI Connection Error'
+                :err='err'
+                :compact='true'
+            />
+        </template>
+        <template v-else-if='loading'>
+            <TablerLoading desc='Connecting to ESRI Server' />
+        </template>
+        <template v-else-if='!container'>
+            <template v-if='list.length === 0'>
+                <TablerNone
+                    :compact='true'
+                    :create='false'
+                    label='Services'
+                />
+            </template>
+            <template v-else>
+                <div class='table-responsive'>
+                    <table class='table table-hover card-table table-vcenter cursor-pointer'>
+                        <thead><tr><th>Name</th></tr></thead>
+                        <tbody>
+                            <tr
+                                v-for='l in list'
+                                :key='l.id'
+                                @click='listpath.push(l)'
+                            >
+                                <td>
+                                    <div class='d-flex align-items-center'>
+                                        <template v-if='l.type === "folder"'>
+                                            <IconFolder
+                                                :size='32'
+                                                stroke='1'
+                                            />
+                                            <span
+                                                class='mx-3'
+                                                v-text='l.name'
+                                            />
+                                        </template>
+                                        <template v-else>
+                                            <IconMap
+                                                :size='32'
+                                                stroke='1'
+                                            />
+                                            <span
+                                                class='mx-3'
+                                                v-text='l.name'
+                                            />
+                                            <span
+                                                class='ms-auto badge'
+                                                v-text='l.type'
+                                            />
+                                        </template>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </template>
+        </template>
+        <template v-else>
+            <div class='datagrid mx-4'>
+                <template v-for='ele in ["description", "currentVersion", "spatialReference"]'>
+                    <div class='datagrid-item'>
+                        <div
+                            class='datagrid-title'
+                            v-text='ele'
+                        />
+                        <template v-if='ele === "spatialReference"'>
+                            <div
+                                class='datagrid-content'
+                                v-text='`${container[ele].wkid} ${container[ele].latestWkid ? "(" + container[ele].latestWkid + ")" : ""}`'
+                            />
+                        </template>
+                        <template v-else>
+                            <div
+                                class='datagrid-content'
+                                v-text='container[ele] || "Unknown"'
+                            />
+                        </template>
+                    </div>
+                </template>
+            </div>
+
+            <template v-if='container.layers.length === 0'>
+                <TablerNone
+                    :compact='true'
+                    :create='!disabled'
+                    label='Layers'
+                    @create='createLayer'
+                />
+            </template>
+            <template v-else>
+                <div class='table-responsive'>
+                    <table
+                        class='table card-table table-vcenter'
+                        :class='{
+                            "table-hover cursor-pointer": !disabled
+                        }'
+                    >
+                        <thead><tr><th>Name</th></tr></thead>
+                        <tbody>
+                            <tr
+                                v-for='lyr in container.layers'
+                                :key='lyr.id'
+                                @click='!disabled && (layer && layer.id === lyr.id) ? layer = nulll : layer = lyr'
+                            >
+                                <td>
+                                    <div class='d-flex align-items-center'>
+                                        <IconMap
+                                            :size='32'
+                                            stroke='1'
+                                        /><span
+                                            class='mx-3'
+                                            v-text='lyr.name'
+                                        />
+                                        <div class='ms-auto btn-list'>
+                                            <IconCheck
+                                                v-if='layer && Number(layer.id) === lyr.id'
+                                                :size='32'
+                                                stroke='1'
+                                            />
+                                            <TablerDelete
+                                                v-if='!readonly && !disabled'
+                                                displaytype='icon'
+                                                label='Delete Layer'
+                                                @delete='deleteLayer(lyr)'
+                                            />
+                                        </div>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </template>
+        </template>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { std, stdurl } from '/src/std.ts';
+import {
+    TablerAlert,
+    TablerNone,
+    TablerLoading,
+    TablerDelete,
+} from '@tak-ps/vue-tabler';
+import {
+    IconX,
+    IconMap,
+    IconFolder,
+    IconRefresh,
+    IconCheck,
+    IconArrowBack,
+} from '@tabler/icons-vue';
+
+const props = defineProps({
+    disabled: {
+        type: Boolean,
+        required: false,
+        default: false
+    },
+    readonly: {
+        type: Boolean,
+        default: false
+    },
+    portal: {
+        type: String,
+        default: undefined
+    },
+    token: {
+        type: Object,
+        default: undefined
+    },
+    server: {
+        type: String,
+        required: true
+    },
+});
+
+const emit = defineEmits([
+    'close',
+    'layer'
+]);
+
+const base = ref(props.server);
+const loading = ref(true);
+const err = ref(null);
+const listpath = ref([]);
+const container = ref(null);
+const list = ref([]);
+const layer = ref(null);
+
+watch(layer, () => {
+    if (!layer.value) return emit('layer', '');
+    emit('layer', stdurl_local(true));
+});
+
+watch(listpath, async () => {
+    await getList();
+}, { deep: true });
+
+onMounted(async () => {
+    base.value = base.value.replace(/\/rest\/services.*/, '');
+
+    let postfix = props.server.replace(/^.*\/services\//, '');
+
+    if (postfix.length && !postfix.startsWith('http')) {
+        postfix = postfix.split('/');
+
+        const last = postfix.pop();
+
+        if (!isNaN(parseInt(last))) {
+            const type = postfix.pop()
+            listpath.value = [{ name: postfix.join('/'), type }]
+            layer.value = { id: last };
+        } else {
+            listpath.value = [{ name: postfix.join('/'), type: last }]
+        }
+    } else {
+        await getList();
+    }
+});
+
+function back() {
+    if (container.value) {
+        layer.value = null;
+        container.value = null;
+        listpath.value.pop();
+    } else if (listpath.value.length) {
+        listpath.value.pop();
+    } else {
+        emit('close');
+    }
+}
+
+function stdurl_local(use_layer=true) {
+    if (listpath.value.length) {
+        const path = listpath.value.map((pth) => {
+            if (pth.type === 'folder') return pth.name;
+            return pth.name + '/' + pth.type;
+        }).join('/');
+
+        if (!use_layer || !layer.value) {
+            return base.value + '/rest/services/' + path;
+        } else if (use_layer && layer.value) {
+            return base.value + '/rest/services/' + path + '/' + layer.value.id;
+        }
+    } else {
+        return base.value + '/rest/services';
+    }
+
+}
+
+async function createLayer() {
+    if (!props.token) throw new Error('Auth Token is required to create a service');
+
+    loading.value = true;
+    try {
+        const url = stdurl('/api/esri/server/layer');
+        url.searchParams.append('token', props.token.token);
+        url.searchParams.append('expires', props.token.expires);
+        if (props.portal) url.searchParams.append('portal', props.portal);
+        url.searchParams.append('server', stdurl_local(false));
+
+        await std(url, { method: 'POST' });
+
+        await getList();
+    } catch (error) {
+        err.value = error;
+    }
+}
+
+async function deleteLayer(l) {
+    if (!props.token) throw new Error('Auth Token is required to create a service');
+
+    loading.value = true;
+    try {
+        const url = stdurl('/api/esri/server/layer');
+        if (props.token) url.searchParams.append('token', props.token.token);
+        if (props.token) url.searchParams.append('expires', props.token.expires);
+        if (props.portal) url.searchParams.append('portal', props.portal);
+        url.searchParams.append('server', stdurl_local(false) + '/' + l.id);
+
+        await std(url, { method: 'DELETE' });
+
+        layer.value = null;
+
+        await getList();
+    } catch (error) {
+        loading.value = false;
+        throw error;
+    }
+}
+
+async function getList() {
+    loading.value = true;
+    try {
+        const url = stdurl('/api/esri/server');
+
+        if (props.token) {
+            url.searchParams.append('token', props.token.token);
+            url.searchParams.append('expires', props.token.expires);
+        }
+
+        url.searchParams.append('server', stdurl_local(false));
+
+        const res = await std(url);
+
+        if (Array.isArray(res.layers)) {
+            container.value = res;
+        } else {
+            list.value = [].concat(res.folders.map((folder) => {
+                return { name: folder, type: 'folder' };
+            }), res.services.map((service) => {
+                return { name: service.name.split('/')[service.name.split('/').length -1], type: service.type };
+            })).map((e) => {
+                e.id = `${e.type}-${e.name}`;
+                return e;
+            });
+        }
+    } catch (error) {
+        err.value = error;
+    }
+    loading.value = false;
+}
+</script>

package/src/components/util/GroupSelect.vue

@@ -0,0 +1,166 @@
+<template>
+    <div>
+        <div
+            class='sticky-top py-2 border-bottom'
+            style='background-color: var(--tblr-bg-surface, #fff)'
+        >
+            <TablerInput
+                v-model='filter'
+                icon='search'
+                placeholder='Filter Channels...'
+            />
+        </div>
+
+        <div
+            v-if='props.limit'
+            class='alert alert-info mt-2'
+            role='alert'
+        >
+            <div class='d-flex align-items-center'>
+                <IconInfoCircle /><span class='mx-1'>Select up to&nbsp;<span v-text='props.limit' />&nbsp;Channel<span v-text='props.limit > 1 ? "s" : ""' /></span>
+            </div>
+        </div>
+
+        <TablerLoading
+            v-if='loading'
+            desc='Loading Channels'
+        />
+        <TablerNone
+            v-else-if='!filtered.length'
+            label='Groups'
+            :create='false'
+        />
+        <template v-else>
+            <div
+                class='my-2 mx-2 overflow-auto'
+            >
+                <div
+                    v-for='group in filtered'
+                    :key='group'
+                    class='col-12'
+                    :style='{
+                        "color": props.disabled ? "var(--tblr-gray-500)" : "var(--tblr-body-color)",
+                    }'
+                    :class='{
+                        "cursor-pointer": !props.disabled,
+
+                    }'
+                    @click='props.disabled ? null : updateGroup(group)'
+                >
+                    <IconCircleFilled
+                        v-if='selected.has(group)'
+                        :size='32'
+                        stroke='1'
+                    />
+                    <IconCircle
+                        v-else
+                        :size='32'
+                        troke='1'
+                    />
+                    <span
+                        class='mx-2 user-select-none'
+                        v-text='group'
+                    />
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, onMounted } from 'vue';
+import { std, stdurl } from '../../../src/std.ts';
+import type { Group } from '../../../src/types.ts';
+import {
+    TablerLoading,
+    TablerInput,
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+import {
+    IconCircle,
+    IconInfoCircle,
+    IconCircleFilled
+} from '@tabler/icons-vue';
+
+const props = defineProps<{
+    disabled?: boolean,
+    connection?: number,
+    limit?: number,
+    active?: boolean,
+    modelValue: Array<string>
+}>();
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const filter = ref('');
+const loading = ref(true);
+const selected = ref<Set<string>>(new Set(props.modelValue))
+const groups = ref<Record<string, Group>>({});
+
+const filtered = computed(() => {
+    return Object.keys(groups.value).filter((g) => {
+        return g.toLowerCase().includes(filter.value.toLowerCase());
+    });
+})
+
+onMounted(async () => {
+    await fetch();
+});
+
+function updateGroup(group: string) {
+    if (selected.value.has(group)) {
+        selected.value.delete(group)
+    } else {
+        if (props.limit && selected.value.size >= props.limit) {
+            throw new Error(`Cannot select more than ${props.limit} Channels`);
+        }
+
+        selected.value.add(group)
+    }
+
+    emit('update:modelValue', Array.from(selected.value));
+}
+
+async function fetch() {
+    loading.value = true;
+
+    let list: Group[];
+    if (props.connection) {
+        const url = stdurl(`/api/connection/${props.connection}/channel`);
+        list = (await std(url) as {
+            data: Group[]
+        }).data;
+    } else {
+        const url = stdurl('/api/marti/group');
+        url.searchParams.append('useCache', 'true');
+        list = ((await std(url)) as {
+            data: Group[]
+        }).data
+    }
+
+    const channels: Record<string, Group> = {};
+
+    JSON.parse(JSON.stringify(list)).sort((a: Group, b: Group) => {
+        return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0);
+    }).forEach((channel: Group) => {
+        if (props.active && !channel.active) {
+            return;
+        }
+
+        if (channels[channel.name]) {
+            // @ts-expect-error Need to make these human readable strings instead of array to sync with type
+            channels[channel.name].direction.push(channel.direction);
+        } else {
+            // @ts-expect-error Need to make these human readable strings instead of array to sync with type
+            channel.direction = [channel.direction];
+            channels[channel.name] = channel;
+        }
+    });
+
+    groups.value = channels;
+
+    loading.value = false;
+}
+</script>