@tak-ps/cloudtak 12.54.0

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

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

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

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

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

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