@tak-ps/cloudtak 12.54.0

package/src/components/ETL/Data/DataFiles.vue

@@ -0,0 +1,245 @@
+<template>
+    <div>
+        <div class='card-header d-flex'>
+            <h3 class='card-title'>
+                Data Assets
+            </h3>
+
+            <div class='ms-auto btn-list'>
+                <IconPlus
+                    v-tooltip='"Upload"'
+                    :size='32'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='upload = true'
+                />
+                <IconRefresh
+                    v-tooltip='"Refresh"'
+                    :size='32'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='fetchList'
+                />
+            </div>
+        </div>
+
+        <div
+            v-if='!err && !upload && !loading.list && list.assets.length'
+            class='table-responsive'
+        >
+            <table class='table table-hover table-vcenter card-table'>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Size</th>
+                        <th>Updated</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for='asset in list.assets'
+                        :key='asset.name'
+                    >
+                        <td>
+                            <div class='d-flex align-items-center'>
+                                <div class='btn-list'>
+                                    <IconMap
+                                        v-if='asset.visualized'
+                                        v-tooltip='"Visualizable"'
+                                        :size='32'
+                                        stroke='1'
+                                    />
+                                    <IconMapOff
+                                        v-else
+                                        v-tooltip='"Not Cloud Optimized"'
+                                        size='32'
+                                        stroke='1'
+                                    />
+                                </div>
+
+                                <span
+                                    class='mx-2'
+                                    v-text='asset.name'
+                                />
+
+                                <IconRefreshDot
+                                    v-if='data.mission_sync && asset.sync'
+                                    v-tooltip='"Syncing"'
+                                    :size='32'
+                                    stroke='1'
+                                    class='text-green'
+                                />
+                                <IconRefreshOff
+                                    v-else-if='data.mission_sync && !asset.sync'
+                                    :size='32'
+                                    stroke='1'
+                                />
+                            </div>
+                        </td>
+                        <td>
+                            <TablerBytes :bytes='asset.size' />
+                        </td>
+                        <td class='d-flex align-items-center'>
+                            <TablerEpoch :date='asset.updated' />
+                            <div class='ms-auto btn-list'>
+                                <TablerDelete
+                                    v-tooltip='"Delete Asset"'
+                                    displaytype='icon'
+                                    @delete='deleteAsset(asset)'
+                                />
+                                <IconDownload
+                                    v-tooltip='"Download Asset"'
+                                    :size='32'
+                                    stroke='1'
+                                    class='cursor-pointer'
+                                    @click='downloadAsset(asset)'
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div
+            v-else
+            class='card-body'
+        >
+            <template v-if='err'>
+                <TablerAlert
+                    title='Asset Error'
+                    :err='err'
+                    :compact='true'
+                />
+            </template>
+            <TablerLoading v-else-if='loading.list' />
+            <Upload
+                v-else-if='upload'
+                :url='uploadURL()'
+                :headers='uploadHeaders()'
+                @cancel='upload = false'
+                @done='fetchList'
+            />
+            <TablerNone
+                v-else-if='!list.assets.length'
+                :create='false'
+                :compact='true'
+            />
+        </div>
+    </div>
+</template>
+
+<script>
+import { std, stdurl } from '../../../std.ts';
+import {
+    IconRefreshDot,
+    IconRefreshOff,
+    IconPlus,
+    IconMap,
+    IconMapOff,
+    IconRefresh,
+    IconDownload,
+} from '@tabler/icons-vue'
+import Upload from '../../util/Upload.vue';
+import {
+    TablerAlert,
+    TablerNone,
+    TablerDelete,
+    TablerLoading,
+    TablerBytes,
+    TablerEpoch
+} from '@tak-ps/vue-tabler';
+
+export default {
+    name: 'DataFiles',
+    components: {
+        TablerNone,
+        Upload,
+        TablerAlert,
+        IconPlus,
+        IconMap,
+        IconMapOff,
+        IconRefresh,
+        IconRefreshDot,
+        IconRefreshOff,
+        IconDownload,
+        TablerDelete,
+        TablerLoading,
+        TablerBytes,
+        TablerEpoch,
+    },
+    props: {
+        data: {
+            type: Object,
+            required: true
+        }
+    },
+    emits: [
+        'assets'
+    ],
+    data: function() {
+        return {
+            err: null,
+            upload: false,
+            loading: {
+                list: true
+            },
+            transform: {
+                shown: false,
+                asset: {}
+            },
+            list: {
+                total: 0,
+                assets: []
+            }
+        };
+    },
+    mounted: async function() {
+        await this.fetchList();
+    },
+    methods: {
+        uploadHeaders: function() {
+            return {
+                Authorization: `Bearer ${localStorage.token}`
+            };
+        },
+        uploadURL: function() {
+            return stdurl(`/api/connection/${this.$route.params.connectionid}/data/${this.$route.params.dataid}/asset`);
+        },
+        downloadAsset: async function(asset) {
+            const url = stdurl(`/api/connection/${this.$route.params.connectionid}/data/${this.$route.params.dataid}/asset/${asset.name}`);
+            url.searchParams.append('token', localStorage.token);
+            window.open(url, "_blank")
+        },
+        initTransform: function(asset) {
+            if (!asset) {
+                this.transform.asset = {};
+                this.transform.shown = false;
+            } else {
+                this.transform.asset = asset;
+                this.transform.shown = true;
+            }
+        },
+        deleteAsset: async function(asset) {
+            this.loading.list = true;
+            await std(`/api/connection/${this.$route.params.connectionid}/data/${this.$route.params.dataid}/asset/${asset.name}`, {
+                method: 'DELETE'
+            });
+
+            await this.fetchList();
+        },
+        fetchList: async function() {
+            this.upload = false;
+
+            try {
+                this.loading.list = true;
+                this.err = false;
+                this.list = await std(`/api/connection/${this.$route.params.connectionid}/data/${this.$route.params.dataid}/asset`);
+                this.loading.list = false;
+                this.$emit('assets', this.list);
+            } catch (err) {
+                this.err = err;
+            }
+        }
+    }
+}
+</script>

package/src/components/ETL/Data/DataGroups.vue

@@ -0,0 +1,45 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h2 class='card-title'>
+                Data Groups
+            </h2>
+        </div>
+        <TablerNone
+            v-if='!data.mission_groups.length'
+            label='Channels'
+            :create='false'
+        />
+        <div
+            v-else
+            class='table-responsive'
+        >
+            <table class='table card-table table-hover table-vcenter'>
+                <thead>
+                    <tr><th>Group Name</th></tr>
+                </thead>
+                <tbody>
+                    <tr
+                        v-for='group in data.mission_groups'
+                        :key='group'
+                    >
+                        <td v-text='group' />
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import {
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+
+defineProps({
+    data: {
+        type: Object,
+        required: true
+    }
+});
+</script>

package/src/components/ETL/Data/DataLayer.vue

@@ -0,0 +1,144 @@
+<template>
+    <div>
+        <div class='card-header d-flex'>
+            <h2 class='card-title'>
+                Layers
+            </h2>
+
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    title='Create Layer'
+                    @click='router.push(
+                        `/connection/${route.params.connectionid}/data/${route.params.dataid}/layer/new`
+                    )'
+                >
+                    <IconPlus
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+                <TablerRefreshButton
+                    :loading='loading'
+                    @click='listLayers'
+                />
+            </div>
+        </div>
+
+        <div style='min-height: 20vh; margin-bottom: 61px'>
+            <TablerAlert
+                v-if='err'
+                title='ETL Server Error'
+                :err='err'
+            />
+            <TablerLoading v-else-if='loading' />
+            <TablerNone
+                v-else-if='!list.items.length'
+                :create='false'
+                label='Layers'
+            />
+            <div
+                v-else
+                class='table-resposive'
+            >
+                <table class='table card-table table-vcenter datatable table-hover'>
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                        </tr>
+                    </thead>
+                    <tbody class='table-tbody'>
+                        <tr
+                            v-for='layer of list.items'
+                            :key='layer.id'
+                            class='cursor-pointer'
+                            @click='router.push(`/connection/${route.params.connectionid}/layer/${layer.id}`)'
+                        >
+                            <td>
+                                <div class='d-flex align-items-center'>
+                                    <LayerStatus :layer='layer' /><div
+                                        class='mx-2'
+                                        v-text='layer.name'
+                                    />
+                                </div>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </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>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { std, stdurl } from '../../../std.ts';
+import TableFooter from '../../util/TableFooter.vue';
+import {
+    IconPlus,
+} from '@tabler/icons-vue';
+import {
+    TablerAlert,
+    TablerNone,
+    TablerIconButton,
+    TablerRefreshButton,
+    TablerLoading
+} from '@tak-ps/vue-tabler'
+import LayerStatus from '../Layer/utils/StatusDot.vue';
+
+defineProps({
+    connection: {
+        type: Object,
+        required: true
+    }
+});
+
+const route = useRoute();
+const router = useRouter();
+
+const loading = ref(true);
+const error = ref();
+const paging = ref({
+    filter: '',
+    limit: 10,
+    page: 0
+});
+
+const list = ref({
+    total: 0,
+    items: []
+});
+
+onMounted(async () => {
+    await listLayers();
+});
+
+watch(paging.value, async () => {
+   await listLayers();
+});
+
+async function listLayers() {
+    loading.value = true;
+    try {
+        const url = stdurl('/api/layer');
+        url.searchParams.append('data', route.params.dataid);
+        url.searchParams.append('limit', paging.value.limit);
+        url.searchParams.append('page', paging.value.page);
+        url.searchParams.append('filter', paging.value.filter);
+        list.value = await std(url);
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+    loading.value = false
+}
+</script>

package/src/components/ETL/Data/Location.vue

@@ -0,0 +1,238 @@
+<template>
+    <div
+        v-if='pmtiles.length'
+        class='card'
+    >
+        <TablerLoading v-if='loading' />
+        <div
+            v-else
+            class='card-body'
+        >
+            <div class='row'>
+                <div
+                    id='map'
+                    style='height: 350px;'
+                />
+            </div>
+
+            <div
+                v-if='geocode.loading'
+                class='row'
+            >
+                <TablerLoading desc='Geocoding Feature...' />
+            </div>
+            <div
+                v-else-if='geocode.result'
+                class='row py-2'
+            >
+                <pre v-text='geocode.result' />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { std, stdurl } from '/src/std.ts';
+import * as pmtiles from 'pmtiles';
+import mapgl from 'maplibre-gl'
+import 'maplibre-gl/dist/maplibre-gl.css';
+import {
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+
+let map;
+
+export default {
+    name: 'DataLocationCard',
+    components: {
+        TablerLoading
+    },
+    props: {
+        assets: {
+            type: Object,
+            required: true
+        },
+    },
+    data: function() {
+        return {
+            loading: false,
+            pmtiles: [],
+            asset: null,
+            geocode: {
+                loading: false,
+                url: null,
+                result: null
+            },
+            style: {
+                version: 8,
+                sources: { },
+                layers: []
+            }
+        }
+    },
+    watch: {
+        'geocode.url': async function() {
+            this.geocode.loading = true;
+            this.geocode.result = await std(this.geocode.url);
+            this.geocode.loading = false;
+        },
+        assets: function() {
+            this.pmtiles = this.assets.assets.filter((asset) => {
+                return asset.name.endsWith('.pmtiles');
+            });
+
+            if (!this.asset) this.asset = this.pmtiles[0];
+        },
+        asset: function() {
+            this.mountMap();
+        }
+    },
+    beforeUnmount: function() {
+        if (map) {
+            map.remove();
+            map = null;
+        }
+    },
+    methods: {
+        basemap: async function() {
+            const list = await std('/api/basemap?limit=1&order=asc&sort=created');
+            if (list.basemaps.length) {
+                const url = String(stdurl(`/api/basemap/${list.basemaps[0].id}/tiles/`)) + `{z}/{x}/{y}?token=${localStorage.token}`;
+                this.style.sources = {
+                    basemap: {
+                        type: 'raster',
+                        tileSize: 256,
+                        tiles: [ url ]
+                    }
+                }
+
+                this.style.layers = [{
+                    id: 'background',
+                    type: 'background',
+                    paint: {
+                        'background-color': 'rgb(4,7,14)'
+                    }
+                },{
+                    'id': 'basemap',
+                    'type': 'raster',
+                    'source': 'basemap'
+                }]
+            }
+        },
+        mountMap: async function() {
+            if (!map) {
+                await this.basemap();
+
+                this.$nextTick(() => {
+                    const protocol = new pmtiles.Protocol();
+                    mapgl.addProtocol('pmtiles', protocol.tile);
+
+                    const tmpmap = new mapgl.Map({
+                        container: 'map',
+                        hash: "map",
+                        zoom: 0,
+                        center: [0, 0],
+                        style: this.style
+                    });
+
+                    tmpmap.addControl(new mapgl.NavigationControl({}), "bottom-left");
+
+                    tmpmap.once('load', () => {
+                        map = tmpmap;
+
+                        map.on('click', (e) => {
+                            const url = new URL(this.assets.tiles.url + this.asset.name.replace(/.pmtiles$/, ''))
+                            url.searchParams.append('query', `${e.lngLat.lng},${e.lngLat.lat}`);
+                            url.searchParams.append('token', localStorage.token);
+                            this.geocode.url = url;
+                        });
+
+                        this.mountPMTiles();
+                    });
+                });
+            } else {
+                this.mountPMTiles();
+            }
+        },
+        mountPMTiles: async function() {
+            if (!this.asset || !map) return;
+
+            const url = stdurl(`/api/connection/${this.$route.params.connectionid}/data/${this.$route.params.dataid}/asset/${this.asset.name}/tile`);
+            url.searchParams.append('token', localStorage.token);
+
+            map.addSource('vector', {
+                type: 'vector',
+                url: String(url)
+            });
+
+            map.addLayer({
+                id: 'polygons',
+                type: 'fill',
+                source: 'vector',
+                'source-layer': 'out',
+                filter: ["==", "$type", "Polygon"],
+                layout: {},
+                paint: {
+                    'fill-opacity': 0.1,
+                    'fill-color': '#FF0000',
+                }
+            });
+
+            map.addLayer({
+                id: 'polygons-outline',
+                type: 'line',
+                source: 'vector',
+                'source-layer': 'out',
+                filter: ["==", "$type", "Polygon"],
+                layout: {
+                    'line-join': 'round',
+                    'line-cap': 'round'
+                },
+                paint: {
+                    'line-color': '#FF0000',
+                    'line-width': 1,
+                    'line-opacity': 0.75
+                }
+            });
+
+            map.addLayer({
+                'id': 'lines',
+                'type': 'line',
+                'source': 'vector',
+                'source-layer': 'out',
+                'filter': ["==", "$type", "LineString"],
+                'layout': {
+                    'line-join': 'round',
+                    'line-cap': 'round'
+                },
+                'paint': {
+                    'line-color': '#FF0000',
+                    'line-width': 1,
+                    'line-opacity': 0.75
+                }
+            });
+
+            map.addLayer({
+                'id': 'pts',
+                'type': 'circle',
+                'source': 'vector',
+                'source-layer': 'out',
+                'filter': ["==", "$type", "Point"],
+                'paint': {
+                    'circle-color': '#FF0000',
+                    'circle-radius': 2.5,
+                    'circle-opacity': 0.75
+                }
+            });
+
+            map.once('idle', () => {
+                const source = map.getSource('vector');
+
+                map.fitBounds(source.bounds, {
+                    padding: 20
+                });
+            })
+        }
+    }
+}
+</script>