@tak-ps/cloudtak 12.54.0 → 12.94.0

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

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

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

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

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