@tak-ps/cloudtak 12.54.0

package/src/components/Admin/AdminDatas.vue

@@ -0,0 +1,165 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h1 class='card-title'>
+                Data Sync Admin
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <IconRefresh
+                    v-tooltip='"Refresh"'
+                    :size='32'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='fetchList'
+                />
+            </div>
+        </div>
+        <div style='min-height: 20vh; margin-bottom: 61px'>
+            <TablerInput
+                v-model='paging.filter'
+                icon='search'
+                placeholder='Filter...'
+                class='mx-1 my-2'
+            />
+
+            <TablerLoading
+                v-if='loading'
+                desc='Loading Data Syncs'
+            />
+            <TablerNone
+                v-else-if='!list.items.length'
+                label='No Layers'
+                :create='false'
+            />
+            <div
+                v-else
+                class='table-responsive'
+            >
+                <table class='table card-table table-hover table-vcenter datatable'>
+                    <TableHeader
+                        v-model:sort='paging.sort'
+                        v-model:order='paging.order'
+                        v-model:header='header'
+                    />
+                    <tbody>
+                        <tr
+                            v-for='data in list.items'
+                            :key='data.id'
+                            class='cursor-pointer'
+                            @click='external(`/connection/${data.connection}/data/${data.id}`)'
+                        >
+                            <template v-for='h in header'>
+                                <template v-if='h.display'>
+                                    <td>
+                                        <span v-text='data[h.name]' />
+                                    </td>
+                                </template>
+                            </template>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div
+                class='position-absolute bottom-0 w-100'
+                style='height: 61px;'
+            >
+                <TableFooter
+                    :limit='paging.limit'
+                    :total='list.total'
+                    @page='paging.page = $event'
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { std, stdurl, stdclick } from '/src/std.ts';
+import TableHeader from '../util/TableHeader.vue'
+import TableFooter from '../util/TableFooter.vue'
+import {
+    TablerNone,
+    TablerInput,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import {
+    IconRefresh,
+} from '@tabler/icons-vue'
+
+export default {
+    name: 'DataSyncAdmin',
+    components: {
+        TablerNone,
+        TablerInput,
+        TablerLoading,
+        IconRefresh,
+        TableHeader,
+        TableFooter,
+    },
+    data: function() {
+        return {
+            err: false,
+            loading: true,
+            header: [],
+            paging: {
+                filter: '',
+                sort: 'name',
+                order: 'asc',
+                limit: 100,
+                page: 0
+            },
+            list: {
+                total: 0,
+                items: []
+            }
+        }
+    },
+    watch: {
+       paging: {
+            deep: true,
+            handler: async function() {
+                await this.fetchList();
+            }
+        }
+    },
+    mounted: async function() {
+        await this.listDataSchema();
+        await this.fetchList();
+    },
+    methods: {
+        stdclick,
+        listDataSchema: async function() {
+            const schema = await std('/api/schema?method=GET&url=/data');
+
+            this.header = ['id', 'name'].map((h) => {
+                return { name: h, display: true };
+            });
+
+            this.header.push(...schema.query.properties.sort.enum.map((h) => {
+                return {
+                    name: h,
+                    display: false
+                }
+            }).filter((h) => {
+                for (const hknown of this.header) {
+                    if (hknown.name === h.name) return false;
+                }
+                return true;
+            }));
+        },
+        fetchList: async function() {
+            this.loading = true;
+            const url = stdurl('/api/data');
+            url.searchParams.append('filter', this.paging.filter);
+            url.searchParams.append('limit', this.paging.limit);
+            url.searchParams.append('page', this.paging.page);
+            this.list = await std(url);
+            this.loading = false;
+        },
+        external(url) {
+            window.location.href = url;
+        }
+    }
+}
+</script>

package/src/components/Admin/AdminExport.vue

@@ -0,0 +1,121 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h3 class='card-title'>
+                Data Export
+            </h3>
+        </div>
+        <TablerLoading v-if='loading' />
+        <div
+            v-else
+            class='card-body row g-2'
+        >
+            <div class='col-6'>
+                <TablerInput
+                    v-model='data.startTime'
+                    label='Start Time'
+                    type='datetime-local'
+                />
+            </div>
+            <div class='col-6'>
+                <TablerInput
+                    v-model='data.endTime'
+                    label='End Time'
+                    type='datetime-local'
+                />
+            </div>
+            <GroupSelect v-model='data.groups' />
+            <div class='col-12'>
+                <TablerEnum
+                    v-model='data.format'
+                    label='Export Format'
+                    :options='["kmz", "kml"]'
+                />
+            </div>
+            <div class='col-12'>
+                <TablerToggle
+                    v-model='data.extendedData'
+                    label='Extended Data (Disabled)'
+                    disabled
+                />
+            </div>
+            <div class='col-12'>
+                <TablerToggle
+                    v-model='data.optimizeExport'
+                    label='Optimize Export'
+                />
+            </div>
+            <div class='col-12 d-flex py-2'>
+                <div class='ms-auto'>
+                    <button
+                        class='btn btn-primary'
+                        @click='postExport'
+                    >
+                        Export
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { std, stdurl } from '/src/std.ts';
+import GroupSelect from '../util/GroupSelect.vue';
+import {
+    TablerLoading,
+    TablerToggle,
+    TablerEnum,
+    TablerInput
+} from '@tak-ps/vue-tabler';
+
+export default {
+    name: 'AdminExport',
+    components: {
+        GroupSelect,
+        TablerLoading,
+        TablerToggle,
+        TablerEnum,
+        TablerInput,
+    },
+    data: function() {
+        let today = new Date();
+        today.setMinutes(today.getMinutes() - today.getTimezoneOffset());
+        return {
+            loading: false,
+            data: {
+                startTime: today.toISOString().slice(0, -1).replace(/\.\d+$/, ''),
+                endTime: today.toISOString().slice(0, -1).replace(/\.\d+$/, ''),
+                groups: [],
+                format: 'kmz',
+                optimizeExport: true,
+                extendedData: false
+            }
+        }
+    },
+    methods: {
+        postExport: async function() {
+            this.loading = true;
+            try {
+                const url = stdurl('/api/marti/export');
+                url.searchParams.append('download', 'true');
+                await std(url, {
+                    method: 'POST',
+                    download: `export.${this.data.format}`,
+                    body: {
+                        ...this.data,
+                        startTime: (new Date(this.data.startTime)).toISOString(),
+                        endTime: (new Date(this.data.endTime)).toISOString(),
+                    }
+                });
+
+                this.loading = false;
+            } catch (err) {
+                this.loading = false;
+                throw err;
+            }
+
+        }
+    }
+}
+</script>

package/src/components/Admin/AdminImports.vue

@@ -0,0 +1,222 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h1 class='card-title'>
+                User Imports
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <TablerRefreshButton
+                    :loading='loading'
+                    @click='fetchList'
+                />
+            </div>
+        </div>
+        <div style='min-height: 20vh; margin-bottom: 61px'>
+            <div class='row col-12 mx-1 my-2'>
+                <div class='col-md-12'>
+                    <TablerInput
+                        v-model='paging.filter'
+                        icon='search'
+                        label='Name Filter'
+                        placeholder='Filter...'
+                    />
+                </div>
+            </div>
+
+            <TablerLoading
+                v-if='loading'
+                desc='Loading Imports'
+            />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <TablerNone
+                v-else-if='!list.items.length'
+                label='No Imports'
+                :create='false'
+            />
+            <div
+                v-else
+                class='table-responsive'
+            >
+                <table class='table card-table table-hover table-vcenter datatable'>
+                    <TableHeader
+                        v-model:sort='paging.sort'
+                        v-model:order='paging.order'
+                        v-model:header='header'
+                    />
+                    <tbody>
+                        <tr
+                            v-for='imp in list.items'
+                            :key='imp.id'
+                            tabindex='0'
+                        >
+                            <template v-for='h in header'>
+                                <template v-if='h.display'>
+                                    <td>
+                                        <div class='d-flex align-items-center'>
+                                            <template v-if='h.name === "username"'>
+                                                <StatusDot
+                                                    :status='imp.status'
+                                                />
+
+                                                <div>
+                                                    <div v-text='imp[h.name]' />
+                                                    <div
+                                                        class='subheader'
+                                                        v-text='imp.updated'
+                                                    />
+                                                </div>
+                                            </template>
+                                            <template v-else-if='h.name == "name"'>
+                                                <div class='col-10'>
+                                                    <div v-text='imp[h.name]' />
+                                                    <div
+                                                        class='subheader'
+                                                        v-text='imp.id'
+                                                    />
+                                                </div>
+                                                <div class='col-2 d-flex'>
+                                                    <div class='ms-auto btn-list'>
+                                                        <TablerIconButton
+                                                            title='Download File'
+                                                            @click='downloadImport(imp.id)'
+                                                        >
+                                                            <IconDownload
+                                                                :size='32'
+                                                                stroke='1'
+                                                            />
+                                                        </TablerIconButton>
+                                                    </div>
+                                                </div>
+                                            </template>
+                                            <template v-else>
+                                                <span v-text='imp[h.name]' />
+                                            </template>
+                                        </div>
+                                    </td>
+                                </template>
+                            </template>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            <div
+                class='position-absolute bottom-0 w-100'
+                style='height: 61px;'
+            >
+                <TableFooter
+                    :limit='paging.limit'
+                    :total='list.total'
+                    @page='paging.page = $event'
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, onMounted } from 'vue';
+import { std, stdurl, server } from '../../std.ts';
+import type { Import, ImportList } from '../../types.ts';
+import StatusDot from '../util/StatusDot.vue';
+import TableHeader from '../util/TableHeader.vue'
+import TableFooter from '../util/TableFooter.vue'
+import {
+    TablerNone,
+    TablerInput,
+    TablerAlert,
+    TablerIconButton,
+    TablerRefreshButton,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import {
+    IconDownload
+} from '@tabler/icons-vue';
+
+type Header = { name: keyof Import, display: boolean };
+
+const error = ref<Error | undefined>();
+const loading = ref(true);
+const header = ref<Array<Header>>([]);
+
+const paging = ref({
+    filter: '',
+    sort: 'created',
+    order: 'desc',
+    limit: 100,
+    page: 0
+});
+
+const list = ref<ImportList>({
+    total: 0,
+    items: []
+});
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await listImportSchema();
+    await fetchList();
+});
+
+async function listImportSchema() {
+    const schema = await std('/api/schema?method=GET&url=/import');
+
+    const defaults: Array<keyof Import> = ['username', 'name'];
+    header.value = defaults.map((h) => {
+        return { name: h, display: true };
+    });
+
+    // @ts-expect-error Worth trying to type at some point maybe but not now
+    header.value.push(...schema.query.properties.sort.enum.map((h) => {
+        return {
+            name: h,
+            display: false
+        } as Header
+    }).filter((h: Header) => {
+        for (const hknown of header.value) {
+            if (hknown.name === h.name) return false;
+        }
+        return true;
+    }));
+}
+
+async function downloadImport(id: string) {
+    const url = stdurl(`/api/import/${id}/raw`)
+    url.searchParams.append('token', localStorage.token);
+    url.searchParams.append('download', String(true));
+    await std(url, {
+        download: true
+    })
+}
+
+async function fetchList() {
+    loading.value = true;
+
+    const res = await server.GET('/api/import', {
+        params: {
+            query: {
+                impersonate: true,
+                filter: paging.value.filter,
+                // @ts-expect-error - Sort should be string list, not string
+                sort: paging.value.sort,
+                // @ts-expect-error - Order should be string list, not string
+                order: paging.value.order,
+                limit: paging.value.limit,
+                page: paging.value.page,
+            }
+        }
+    });
+
+    if (res.error) throw new Error(res.error.message);
+
+    list.value = res.data;
+
+    loading.value = false;
+}
+</script>

package/src/components/Admin/AdminLayerTemplate.vue

@@ -0,0 +1,91 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <IconCircleArrowLeft
+                :size='32'
+                stroke='1'
+                class='cursor-pointer'
+                @click='$router.push("/admin/layer")'
+            />
+            <h1 class='mx-2 card-title d-flex align-items-center'>
+                <div class='mx-2'>
+                    Create Template Layer
+                </div>
+            </h1>
+        </div>
+        <div>
+            <TablerLoading v-if='loading' />
+            <div
+                v-else
+                class='card-body row g-2'
+            >
+                <div class='col-12'>
+                    <TablerInput
+                        v-model='template.name'
+                        label='Name'
+                    />
+                </div>
+                <div class='col-12'>
+                    <TablerInput
+                        v-model='template.description'
+                        label='Description'
+                        :rows='3'
+                    />
+                </div>
+                <div class='col-12'>
+                    <LayerSelect v-model='template.id' />
+                </div>
+
+                <div class='col-12 mt-2 d-flex align-items-center'>
+                    <div class='ms-auto'>
+                        <button
+                            :disabled='!template.id'
+                            class='btn btn-primary'
+                            @click='createTemplate'
+                        >
+                            Submit
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router';
+import { std } from '/src/std.ts';
+import LayerSelect from '../util/LayerSelect.vue';
+import {
+    TablerInput,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import {
+    IconCircleArrowLeft,
+} from '@tabler/icons-vue'
+
+const router = useRouter();
+const loading = ref(false);
+const template = ref({
+    id: null,
+    name: '',
+    description: ''
+});
+
+async function createTemplate() {
+    loading.value = true;
+
+    try {
+        const layer = await std('/api/template', {
+            method: 'POST',
+            body: template.value
+        });
+
+        router.push(`/admin/layer/${layer.id}`);
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+</script>