@tak-ps/cloudtak 12.54.0 → 12.94.0

package/src/components/ETL/Connection/ConnectionFiles.vue

@@ -1,182 +0,0 @@
-<template>
-    <div>
-        <div class='card-header d-flex'>
-            <h3 class='card-title'>
-                Connection Assets
-            </h3>
-
-            <div class='ms-auto btn-list'>
-                <TablerIconButton
-                    title='Upload'
-                    @click='upload = true'
-                >
-                    <IconPlus
-                        :size='32'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-                <TablerRefreshButton
-                    title='Refresh'
-                    :loading='loading'
-                    @click='fetchList'
-                />
-            </div>
-        </div>
-
-        <div
-            v-if='!error && !upload && !loading && list.items.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.items'
-                        :key='asset.name'
-                    >
-                        <td>
-                            <div class='d-flex align-items-center'>
-                                <IconFile
-                                    :size='32'
-                                    stroke='1'
-                                />
-
-                                <span
-                                    class='mx-2'
-                                    v-text='asset.name'
-                                />
-                            </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='error'>
-                <TablerAlert
-                    title='Asset Error'
-                    :err='error'
-                    :compact='true'
-                />
-            </template>
-            <TablerLoading v-else-if='loading' />
-            <Upload
-                v-else-if='upload'
-                :url='uploadURL()'
-                :headers='uploadHeaders()'
-                @cancel='upload = false'
-                @done='fetchList'
-            />
-            <TablerNone
-                v-else-if='!list.items.length'
-                :create='false'
-                :compact='true'
-            />
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import  { useRoute } from 'vue-router'
-import { ref, onMounted } from 'vue';
-import { std, stdurl } from '../../../std.ts';
-import type { ETLConnectionAssetList } from '../../../types.ts';
-import {
-    IconPlus,
-    IconFile,
-    IconDownload,
-} from '@tabler/icons-vue'
-import Upload from '../../util/Upload.vue';
-import {
-    TablerIconButton,
-    TablerRefreshButton,
-    TablerAlert,
-    TablerNone,
-    TablerDelete,
-    TablerLoading,
-    TablerBytes,
-    TablerEpoch
-} from '@tak-ps/vue-tabler';
-
-const route = useRoute();
-const error = ref<Error | undefined>(undefined);
-const upload = ref(false);
-const loading = ref(true);
-const list = ref<ETLConnectionAssetList>({
-    total: 0,
-    items: []
-});
-
-onMounted(async () => {
-    await fetchList();
-});
-
-function uploadHeaders() {
-    return {
-        Authorization: `Bearer ${localStorage.token}`
-    };
-}
-
-function uploadURL() {
-    return stdurl(`/api/connection/${route.params.connectionid}/asset`);
-}
-
-async function downloadAsset(asset: ETLConnectionAssetList["items"][0]) {
-    const url = stdurl(`/api/connection/${route.params.connectionid}/asset/${asset.name}`);
-    url.searchParams.append('token', localStorage.token);
-    url.searchParams.append('download', String(true));
-    window.open(url, "_blank")
-}
-
-async function deleteAsset(asset: ETLConnectionAssetList["items"][0]) {
-    loading.value = true;
-    await std(`/api/connection/${route.params.connectionid}/asset/${asset.name}`, {
-        method: 'DELETE'
-    });
-
-    await fetchList();
-}
-
-async function fetchList() {
-    upload.value = false;
-
-    try {
-        loading.value = true;
-        error.value = undefined;
-        list.value = await std(`/api/connection/${route.params.connectionid}/asset`) as ETLConnectionAssetList;
-        loading.value = false;
-    } catch (err) {
-        error.value = err instanceof Error ? err : new Error(String(err));
-        loading.value = false;
-    }
-}
-</script>

package/src/components/ETL/Connection/ConnectionGroups.vue

@@ -1,181 +0,0 @@
-<template>
-    <div>
-        <div class='card-header'>
-            <h3 class='card-title'>
-                User Groups
-            </h3>
-
-            <div class='ms-auto btn-list'>
-                <TablerRefreshButton
-                    :loading='loading'
-                    @click='fetch'
-                />
-            </div>
-        </div>
-        <div style='min-height: 20vh; margin-bottom: 60px'>
-            <div class='col-12 px-2 py-2'>
-                <TablerInput
-                    v-model='paging.filter'
-                    icon='search'
-                    placeholder='Filter'
-                />
-            </div>
-
-            <TablerLoading v-if='loading' />
-            <TablerAlert
-                v-else-if='error'
-                :err='error'
-            />
-            <TablerNone
-                v-else-if='!Object.keys(processChannels).length'
-                :create='false'
-                label='Channels'
-            />
-            <div
-                v-else
-                class='table-responsive'
-            >
-                <table class='table card-table table-hover table-vcenter'>
-                    <thead>
-                        <tr>
-                            <th>Group Name</th>
-                            <th>Description</th>
-                            <th>Attributes</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr
-                            v-for='group in processChannels'
-                            :key='group.name'
-                        >
-                            <td>
-                                <div class='d-flex align-items-center'>
-                                    <IconEye
-                                        v-if='group.active'
-                                        v-tooltip='"Disable"'
-                                        :size='32'
-                                        stroke='1'
-                                        class='cursor-pointer'
-                                        @click='setStatus(group, false)'
-                                    />
-                                    <IconEyeOff
-                                        v-else
-                                        v-tooltip='"Enable"'
-                                        :size='32'
-                                        stroke='1'
-                                        class='cursor-pointer'
-                                        @click='setStatus(group, true)'
-                                    />
-                                    <span
-                                        class='mx-2'
-                                        v-text='group.name'
-                                    />
-                                </div>
-                            </td>
-                            <td v-text='group.description' />
-                            <td>
-                                <IconLocation
-                                    v-if='group.direction.length === 2'
-                                    v-tooltip='"Bi-Directional"'
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <IconLocation
-                                    v-else-if='group.direction.includes("IN")'
-                                    v-tooltip='"Location Sharing"'
-                                    :size='32'
-                                    stroke='1'
-                                />
-                                <IconLocationOff
-                                    v-else-if='group.direction.includes("OUT")'
-                                    v-tooltip='"No Location Sharing"'
-                                    :size='32'
-                                    stroke='1'
-                                />
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, computed } from 'vue'
-import { useRoute } from 'vue-router';
-import { std, stdurl } from '../../../std.ts';
-import {
-    IconEye,
-    IconEyeOff,
-    IconLocation,
-    IconLocationOff,
-} from '@tabler/icons-vue';
-import {
-    TablerNone,
-    TablerInput,
-    TablerAlert,
-    TablerLoading,
-    TablerRefreshButton,
-} from '@tak-ps/vue-tabler';
-
-const route = useRoute();
-
-const error = ref();
-const loading = ref(true);
-const rawChannels = ref([]);
-
-const paging = ref({
-    filter: ''
-})
-
-const processChannels = computed(() => {
-    const channels = {};
-
-    JSON.parse(JSON.stringify(rawChannels.value)).sort((a, b) => {
-        return (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0);
-    }).forEach((channel) => {
-        if (channel.name.toLowerCase().includes(paging.value.filter.toLowerCase())) {
-            if (channels[channel.name]) {
-                channels[channel.name].direction.push(channel.direction);
-            } else {
-                channel.direction = [channel.direction];
-                channels[channel.name] = channel;
-            }
-        }
-    });
-
-    return channels;
-});
-
-onMounted(async () => {
-    await fetch();
-});
-
-async function fetch() {
-    loading.value = true;
-    error.value = undefined;
-
-    try {
-        rawChannels.value = (await std(`/api/connection/${route.params.connectionid}/channel`)).data;
-        loading.value = false;
-    } catch (err) {
-        error.value = err instanceof Error ? err : new Error(String(err));
-        loading.value = false;
-    }
-}
-
-async function setStatus(channel, active=false) {
-    rawChannels.value = rawChannels.value.map((ch) => {
-        if (ch.name === channel.name) ch.active = active;
-        return ch;
-    });
-
-    const url = stdurl('/api/marti/group');
-    url.searchParams.append('connection', route.params.connectionid);
-    await std(url, {
-        method: 'PUT',
-        body: rawChannels.value
-    });
-}
-</script>

package/src/components/ETL/Connection/ConnectionLayer.vue

@@ -1,180 +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}/layer/new`)'
-                >
-                    <IconPlus
-                        :size='32'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-
-                <TablerRefreshButton
-                    :loading='loading'
-                    @click='listLayers'
-                />
-            </div>
-        </div>
-
-        <div style='min-height: 20vh; margin-bottom: 60px'>
-            <div class='col-12 px-2 py-2'>
-                <TablerInput
-                    v-model='paging.filter'
-                    icon='search'
-                    placeholder='Filter'
-                />
-            </div>
-
-            <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 class='ms-auto btn-list'>
-                                        <IconDatabase
-                                            v-if='layer.incoming && layer.incoming.data'
-                                            v-tooltip='`Pushing to Data Sync`'
-                                            :size='32'
-                                            stroke='1'
-                                            @click.stop.prevent='router.push(`/connection/${route.params.connectionid}/data/${layer.incoming.data}`)'
-                                        />
-
-                                        <IconExchange
-                                            v-if='layer.incoming && layer.outgoing'
-                                            title='Outgoing/Incoming'
-                                            size='32'
-                                            :stroke='1'
-                                        />
-                                        <IconStackPop
-                                            v-else-if='layer.outgoing'
-                                            title='Outgoing'
-                                            size='32'
-                                            :stroke='1'
-                                        />
-                                        <IconStackPush
-                                            v-else-if='layer.incoming'
-                                            title='Incoming'
-                                            size='32'
-                                            :stroke='1'
-                                        />
-                                    </div>
-                                </div>
-                            </td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <div
-            class='position-absolute bottom-0 w-100'
-            style='height: 60px;'
-        >
-            <TableFooter
-                :limit='paging.limit'
-                :total='list.total'
-                @page='paging.page = $event'
-            />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, onMounted, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router'
-import { std, stdurl } from '../../../std.ts';
-import TableFooter from '../../util/TableFooter.vue';
-import {
-    IconPlus,
-    IconExchange,
-    IconStackPop,
-    IconStackPush,
-    IconDatabase
-} from '@tabler/icons-vue';
-import {
-    TablerNone,
-    TablerAlert,
-    TablerInput,
-    TablerLoading,
-    TablerIconButton,
-    TablerRefreshButton,
-} from '@tak-ps/vue-tabler'
-import LayerStatus from '../Layer/utils/StatusDot.vue';
-
-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: []
-});
-
-watch(paging.value, async () => {
-    await listLayers();
-});
-
-onMounted(async () => {
-    await listLayers();
-});
-
-async function listLayers() {
-    loading.value = true;
-    try {
-        const url = stdurl(`/api/connection/${route.params.connectionid}/layer`);
-        url.searchParams.append('alarms', String(true));
-        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/Connection/ConnectionTokens.vue

@@ -1,147 +0,0 @@
-<template>
-    <div>
-        <div class='card-header'>
-            <h3 class='card-title'>
-                API Tokens
-            </h3>
-
-            <div class='ms-auto btn-list'>
-                <TablerIconButton
-                    title='New Token'
-                    @click='token = true'
-                >
-                    <IconPlus
-                        :size='32'
-                        stroke='1'
-                    />
-                </TablerIconButton>
-                <TablerRefreshButton
-                    title='Refresh'
-                    :loading='loading'
-                    @click='fetch'
-                />
-            </div>
-        </div>
-
-        <div style='min-height: 20vh; margin-bottom: 60px'>
-            <div class='col-12 px-2 py-2'>
-                <TablerInput
-                    v-model='paging.filter'
-                    icon='search'
-                    placeholder='Filter'
-                />
-            </div>
-
-            <TablerLoading v-if='loading' />
-            <TablerNone
-                v-else-if='!list.items.length'
-                :create='false'
-                label='Tokens'
-            />
-            <div
-                v-else
-                class='table-responsive'
-            >
-                <table class='table table-hover card-table table-vcenter cursor-pointer'>
-                    <thead>
-                        <tr>
-                            <th>Token Name</th>
-                            <th>Created</th>
-                            <th>Updated</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr
-                            v-for='t in list.items'
-                            :key='t.id'
-                            @click='token = t'
-                        >
-                            <td v-text='t.name' />
-                            <td><TablerEpoch :date='+new Date(t.created)' /></td>
-                            <td><TablerEpoch :date='+new Date(t.updated)' /></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        </div>
-        <div
-            class='position-absolute bottom-0 w-100'
-            style='height: 60px;'
-        >
-            <TableFooter
-                :limit='paging.limit'
-                :total='list.total'
-                @page='paging.page = $event'
-            />
-        </div>
-
-        <TokenModal
-            v-if='token'
-            :token='token'
-            @close='token = undefined'
-            @refresh='fetch'
-        />
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, watch, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { std, stdurl } from '../../../std.ts';
-import type { ETLConnectionTokenList, ETLConnectionToken } from '../../../types.ts';
-import TokenModal from './TokenModal.vue';
-import TableFooter from '../../util/TableFooter.vue';
-import {
-    IconPlus,
-} from '@tabler/icons-vue';
-import {
-    TablerInput,
-    TablerEpoch,
-    TablerLoading,
-    TablerIconButton,
-    TablerRefreshButton,
-    TablerNone,
-} from '@tak-ps/vue-tabler';
-
-const route = useRoute();
-
-const loading = ref(true);
-const token = ref<ETLConnectionToken | true | undefined>();
-const error = ref<Error | undefined>();
-const paging = ref({
-    filter: '',
-    limit: 10,
-    page: 0
-});
-
-const list = ref<ETLConnectionTokenList> ({
-    total: 0,
-    items: []
-});
-
-watch(paging.value, async () => {
-    await fetch();
-});
-
-onMounted(async () => {
-    await fetch();
-});
-
-async function fetch() {
-    token.value = undefined;
-    error.value = undefined;
-    loading.value = true;
-
-    try {
-        const url = stdurl(`/api/connection/${route.params.connectionid}/token`);
-        url.searchParams.append('limit', String(paging.value.limit));
-        url.searchParams.append('page', String(paging.value.page));
-        url.searchParams.append('filter', paging.value.filter);
-        list.value = await std(url) as ETLConnectionTokenList;
-    } catch (err) {
-        error.value = err instanceof Error ? err : new Error(String(err));
-    } finally {
-        loading.value = false;
-    }
-}
-</script>