@tak-ps/cloudtak 12.54.0 → 12.94.0

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

@@ -1,151 +0,0 @@
-<template>
-    <div>
-        <div class='card-header'>
-            <h3 class='card-title'>
-                Video
-            </h3>
-
-            <div class='ms-auto btn-list'>
-                <TablerDelete
-                    displaytype='icon'
-                    @delete='deleteAll'
-                />
-                <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' />
-            <TablerAlert
-                v-else-if='error'
-                :err='error'
-            />
-            <TablerNone
-                v-else-if='list.total === 0'
-                :create='false'
-                label='Videos'
-            />
-            <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='lease in list.items'
-                            :key='lease.id'
-                        >
-                            <td v-text='lease.name' />
-                            <td><TablerEpoch :date='+new Date(lease.created)' /></td>
-                            <td><TablerEpoch :date='+new Date(lease.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>
-    </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 { ETLConnectionVideoLeaseList } from '../../../types.ts';
-import TableFooter from '../../util/TableFooter.vue';
-import {
-    TablerInput,
-    TablerEpoch,
-    TablerAlert,
-    TablerDelete,
-    TablerLoading,
-    TablerRefreshButton,
-    TablerNone,
-} from '@tak-ps/vue-tabler';
-
-const route = useRoute();
-
-const loading = ref(true);
-const error = ref<Error | undefined>();
-const paging = ref({
-    filter: '',
-    limit: 10,
-    page: 0
-});
-
-const list = ref<ETLConnectionVideoLeaseList>({
-    total: 0,
-    items: []
-});
-
-watch(paging.value, async () => {
-    await fetch();
-});
-
-onMounted(async () => {
-    await fetch();
-});
-
-async function deleteAll() {
-    loading.value = true;
-    error.value = undefined;
-
-    try {
-        const url = stdurl(`/api/connection/${route.params.connectionid}/video/lease`);
-        await std(url, {
-            method: 'DELETE',
-        });
-
-        await fetch();
-    } catch (err) {
-        error.value = err instanceof Error ? err : new Error(String(err));
-    } finally {
-        loading.value = false;
-    }
-}
-
-async function fetch() {
-    loading.value = true;
-    error.value = undefined;
-
-    try {
-        const url = stdurl(`/api/connection/${route.params.connectionid}/video/lease`);
-        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 ETLConnectionVideoLeaseList;
-    } catch (err) {
-        error.value = err instanceof Error ? err : new Error(String(err));
-    } finally {
-        loading.value = false;
-    }
-}
-</script>

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

@@ -1,88 +0,0 @@
-<template>
-    <div>
-        <div class='card-header'>
-            <h3 class='card-title'>
-                Connection Events
-            </h3>
-
-            <div class='ms-auto'>
-                <div class='btn-list'>
-                    <IconTrash
-                        v-tooltip='"Clear Events"'
-                        :size='32'
-                        stroke='1'
-                        class='cursor-pointer'
-                        @click='events = []'
-                    />
-
-                    <IconPlayerPlay
-                        v-if='paused'
-                        v-tooltip='"Play Events"'
-                        :size='32'
-                        stroke='1'
-                        class='cursor-pointer'
-                        @click='paused = false'
-                    />
-                    <IconPlayerPause
-                        v-else
-                        v-tooltip='"Pause Events"'
-                        :size='32'
-                        stroke='1'
-                        class='cursor-pointer'
-                        @click='paused = true'
-                    />
-                </div>
-            </div>
-        </div>
-        <pre v-text='eventStr' />
-    </div>
-</template>
-<script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useRoute } from 'vue-router';
-import { stdurl } from '/src/std.ts';
-import {
-    IconTrash,
-    IconPlayerPlay,
-    IconPlayerPause
-} from '@tabler/icons-vue';
-
-const emit = defineEmits(['err']);
-
-const route = useRoute();
-
-const ws = ref(null);
-const paused = ref(false);
-const events = ref([]);
-
-const eventStr = computed(() => {
-    return events.value.join('\n');
-});
-
-onUnmounted(() => {
-    if (ws.value) ws.value.close();
-});
-
-onMounted(() => {
-    const url = stdurl('/api');
-    url.searchParams.append('connection', route.params.connectionid);
-    url.searchParams.append('token', localStorage.token);
-    if (window.location.hostname === 'localhost') {
-        url.protocol = 'ws:';
-    } else {
-        url.protocol = 'wss:';
-    }
-
-    ws.value = new WebSocket(url);
-    ws.value.addEventListener('error', (err) => { emit('err', err) });
-
-    ws.value.addEventListener('message', (msg) => {
-        msg = JSON.parse(msg.data);
-        if (paused.value) return;
-        if (msg.type !== 'cot' || msg.connection !== parseInt(route.params.connectionid)) return;
-
-        if (events.value.length > 200) events.value.pop();
-        events.value.unshift(JSON.stringify(msg.data));
-    });
-});
-</script>

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

@@ -1,48 +0,0 @@
-<template>
-    <div
-        class='d-flex justify-content-center align-items-center'
-        style='width: 36px;'
-    >
-        <template v-if='props.connection.readonly'>
-            <IconNetwork
-                :size='32'
-                stroke='1'
-            />
-        </template>
-        <template v-else-if='!props.connection.enabled'>
-            <IconPlayerPause
-                :size='32'
-                stroke='1'
-            />
-        </template>
-        <template v-else>
-            <span
-                class='status-indicator status-indicator-animated'
-                :class='{
-                    "status-green": props.connection.status === "live",
-                    "status-red": props.connection.status === "dead",
-                    "status-dark": props.connection.status === "unknown",
-                }'
-            >
-                <span class='status-indicator-circle' />
-                <span class='status-indicator-circle' />
-                <span class='status-indicator-circle' />
-            </span>
-        </template>
-    </div>
-</template>
-
-
-<script setup lang='ts'>
-import {
-    IconNetwork,
-    IconPlayerPause
-} from '@tabler/icons-vue';
-
-const props = defineProps({
-    connection: {
-        type: Object,
-        required: true
-    }
-});
-</script>

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

@@ -1,136 +0,0 @@
-<template>
-    <TablerModal>
-        <div class='modal-status bg-yellow' />
-        <button
-            type='button'
-            class='btn-close'
-            aria-label='Close'
-            @click='$emit("close")'
-        />
-        <div class='modal-header'>
-            <div
-                class='modal-title'
-                v-text='token && typeof token === "object" && token.id ? "Edit Token" : "New Token"'
-            />
-
-            <div class='ms-auto btn-list'>
-                <TablerDelete
-                    v-if='editToken.id'
-                    displaytype='icon'
-                    @delete='deleteToken'
-                />
-            </div>
-        </div>
-
-        <div class='modal-body row'>
-            <div
-                v-if='!code'
-                class='col-12'
-            >
-                <TablerInput
-                    v-model='editToken.name'
-                    label='Token Name'
-                />
-            </div>
-            <div
-                v-else
-                class='col-12'
-            >
-                <pre v-text='code' />
-            </div>
-        </div>
-        <div class='modal-footer'>
-            <button
-                v-if='!code'
-                class='btn btn-primary'
-                @click='saveToken'
-            >
-                Save
-            </button>
-            <button
-                v-else
-                class='btn btn-primary'
-                @click='$emit("refresh")'
-            >
-                Close
-            </button>
-        </div>
-    </TablerModal>
-</template>
-
-<script setup lang="ts">
-import { reactive, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { server } from '../../../std.ts';
-import {
-    TablerModal,
-    TablerInput,
-    TablerDelete
-} from '@tak-ps/vue-tabler';
-
-type Token = { id: number; name: string; } | boolean;
-
-const props = defineProps<{
-    token: Token
-}>();
-
-const emit = defineEmits(['close', 'refresh']);
-
-const route = useRoute();
-
-const code = ref<string | boolean>(false);
-
-const editToken = reactive(
-    props.token === true
-        ? { name: '' }
-        : JSON.parse(JSON.stringify(props.token))
-);
-
-const deleteToken = async () => {
-    if (typeof props.token === 'object' && props.token.id) {
-        const res = await server.DELETE(`/api/connection/{:connectionid}/token/{:id}`, {
-            params: {
-                path: {
-                    ':connectionid': Number(route.params.connectionid),
-                    ':id': Number(props.token.id)
-                }
-            }
-        });
-
-        if (res.error) throw new Error(res.error.message);
-
-        emit('refresh');
-    }
-};
-
-const saveToken = async () => {
-    if (typeof props.token === 'object' && props.token.id) {
-        const res = await server.PATCH(`/api/connection/{:connectionid}/token/{:id}`, {
-            params: {
-                path: {
-                    ':connectionid': Number(route.params.connectionid),
-                    ':id': Number(props.token.id)
-                }
-            },
-            body: editToken
-        });
-
-        if (res.error) throw new Error(res.error.message);
-
-        emit('refresh');
-    } else {
-        const res = await server.POST(`/api/connection/{:connectionid}/token`, {
-            params: {
-                path: {
-                    ':connectionid': Number(route.params.connectionid)
-                }
-            },
-            body: editToken
-        });
-
-        if (res.error) throw new Error(res.error.message);
-
-        code.value = res.data.token;
-    }
-};
-</script>

package/src/components/ETL/Connection.vue

@@ -1,194 +0,0 @@
-<template>
-    <div style='overflow: auto;'>
-        <div class='page-wrapper'>
-            <div class='page-header d-print-none'>
-                <div class='container-xl'>
-                    <div class='row g-2 align-items-center'>
-                        <div class='col d-flex text-white'>
-                            <TablerBreadCrumb />
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class='page-body'>
-            <div class='container-xl'>
-                <div class='row row-deck row-cards'>
-                    <div class='col-lg-12'>
-                        <div class='card'>
-                            <TablerLoading
-                                v-if='!connection'
-                                class='text-white'
-                            />
-                            <template v-else>
-                                <ConnectionCard
-                                    :connection='connection'
-                                    :clickable='false'
-                                    :expanded='true'
-                                    @update:connection='connection = $event'
-                                />
-                            </template>
-                        </div>
-                    </div>
-
-                    <div
-                        v-if='connection'
-                        class='col-lg-12'
-                    >
-                        <div class='card'>
-                            <div class='row g-0'>
-                                <div class='col-12 col-md-3 border-end'>
-                                    <div class='card-body'>
-                                        <h4 class='subheader'>
-                                            Connection Sections
-                                        </h4>
-                                        <div
-                                            role='menu'
-                                            class='list-group list-group-transparent'
-                                        >
-                                            <span
-                                                v-if='!connection.readonly'
-                                                tabindex='0'
-                                                role='menuitem'
-                                                class='list-group-item list-group-item-action d-flex align-items-center user-select-none'
-                                                :class='{
-                                                    "active": route.name === "connection-layers",
-                                                    "cursor-pointer": route.name !== "connection-layers"
-                                                }'
-                                                @click='router.push(`/connection/${route.params.connectionid}/layer`)'
-                                            ><IconBuildingBroadcastTower
-                                                :size='32'
-                                                stroke='1'
-                                            /><span class='mx-3'>Layers</span></span>
-                                            <span
-                                                tabindex='0'
-                                                role='menuitem'
-                                                class='list-group-item list-group-item-action d-flex align-items-center user-select-none'
-                                                :class='{
-                                                    "active": route.name === "connection-groups",
-                                                    "cursor-pointer": route.name !== "connection-groups"
-                                                }'
-                                                @click='router.push(`/connection/${route.params.connectionid}/groups`)'
-                                            ><IconAffiliate
-                                                :size='32'
-                                                stroke='1'
-                                            /><span class='mx-3'>Channels</span></span>
-                                            <span
-                                                v-if='!connection.readonly'
-                                                tabindex='0'
-                                                role='menuitem'
-                                                class='list-group-item list-group-item-action d-flex align-items-center user-select-none'
-                                                :class='{
-                                                    "active": route.name === "connection-files",
-                                                    "cursor-pointer": route.name !== "connection-files"
-                                                }'
-                                                @click='router.push(`/connection/${route.params.connectionid}/files`)'
-                                            ><IconFiles
-                                                :size='32'
-                                                stroke='1'
-                                            /><span class='mx-3'>Files</span></span>
-                                            <span
-                                                v-if='!connection.readonly'
-                                                tabindex='0'
-                                                role='menuitem'
-                                                class='list-group-item list-group-item-action d-flex align-items-center user-select-none'
-                                                :class='{
-                                                    "active": route.name === "connection-datas",
-                                                    "cursor-pointer": route.name !== "connection-datas"
-                                                }'
-                                                @click='router.push(`/connection/${route.params.connectionid}/data`)'
-                                            ><IconDatabase
-                                                :size='32'
-                                                stroke='1'
-                                            /><span class='mx-3'>Data Syncs</span></span>
-                                            <span
-                                                v-if='!connection.readonly'
-                                                tabindex='0'
-                                                role='menuitem'
-                                                class='list-group-item list-group-item-action d-flex align-items-center user-select-none'
-                                                :class='{
-                                                    "active": route.name === "connection-videos",
-                                                    "cursor-pointer": route.name !== "connection-videos"
-                                                }'
-                                                @click='router.push(`/connection/${route.params.connectionid}/video`)'
-                                            ><IconVideo
-                                                :size='32'
-                                                stroke='1'
-                                            /><span class='mx-3'>Videos</span></span>
-                                            <span
-                                                v-if='!connection.readonly'
-                                                tabindex='0'
-                                                role='menuitem'
-                                                class='list-group-item list-group-item-action d-flex align-items-center user-select-none'
-                                                :class='{
-                                                    "active": route.name === "connection-tokens",
-                                                    "cursor-pointer": route.name !== "connection-tokens"
-                                                }'
-                                                @click='router.push(`/connection/${route.params.connectionid}/tokens`)'
-                                            ><IconRobot
-                                                :size='32'
-                                                stroke='1'
-                                            /><span class='mx-3'>API Tokens</span></span>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class='col-12 col-md-9 position-relative'>
-                                    <router-view
-                                        :connection='connection'
-                                    />
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <PageFooter />
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref, onMounted } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import type { ETLConnection } from '../../types.ts';
-import { std } from '../../std.ts';
-import PageFooter from '../PageFooter.vue';
-import ConnectionCard from './ConnectionCard.vue';
-import {
-    IconFiles,
-    IconRobot,
-    IconVideo,
-    IconDatabase,
-    IconAffiliate,
-    IconBuildingBroadcastTower,
-} from '@tabler/icons-vue'
-import {
-    TablerBreadCrumb,
-    TablerLoading,
-} from '@tak-ps/vue-tabler';
-
-const route = useRoute();
-const router = useRouter();
-
-const connection = ref<ETLConnection | undefined>();
-
-onMounted(async () => {
-    if (route.params.connectionid === 'template') {
-        router.push('/connection');
-        return;
-    }
-
-    await fetch();
-
-    if (connection.value && connection.value.readonly) {
-        router.push(`/connection/${connection.value.id}/groups`);
-    }
-});
-
-async function fetch() {
-    connection.value = undefined;
-    connection.value = await std(`/api/connection/${route.params.connectionid}`) as ETLConnection;
-}
-</script>