@tak-ps/cloudtak 12.54.0

package/src/components/Admin/AdminPaletteFeature.vue

@@ -0,0 +1,208 @@
+<template>
+    <div>
+        <div
+            v-if='palette'
+            class='card-header'
+        >
+            <h1 class='card-title d-flex align-items-center'>
+                <TablerIconButton
+                    title='Back to Palette'
+                    @click='router.push(`/admin/palette/${route.params.palette}`)'
+                >
+                    <IconCircleArrowLeft
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+
+                <span
+                    class='ms-2'
+                    v-text='palette.name + "&nbsp;-&nbsp;"'
+                />
+                <span v-text='route.params.feature === "new" ? "New Feature": paletteFeature.name' />
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <TablerDelete
+                    v-if='route.params.feature !== "new"'
+                    displaytype='icon'
+                    @delete='deletePaletteFeature'
+                />
+                <TablerIconButton
+                    v-if='disabled'
+                    title='Edit Palette'
+                    @click='disabled = false'
+                >
+                    <IconPencil
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+        </div>
+        <div class='card-body'>
+            <TablerLoading
+                v-if='loading || !palette'
+                desc='Loading Palette'
+            />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <template v-else>
+                <div class='row g-2'>
+                    <div class='col-12'>
+                        <TablerInput
+                            v-model='paletteFeature.name'
+                            label='Name'
+                            :disabled='disabled'
+                        />
+                    </div>
+                    <div class='col-12'>
+                        <TablerEnum
+                            v-model='paletteFeature.type'
+                            label='Type'
+                            :disabled='disabled'
+                            :options='[
+                                "Point",
+                                "LineString",
+                                "Polygon"
+                            ]'
+                        />
+                    </div>
+                    <div class='col-12'>
+                        <CopyField
+                            :rows='20'
+                            :edit='true'
+                            :hover='true'
+                            :validate='validateJSON'
+                            :model-value='JSON.stringify(paletteFeature.style, null, 4)'
+                            @update:model-value='paletteFeature.style = JSON.parse($event)'
+                        />
+                    </div>
+                </div>
+
+                <div class='col-12 d-flex pt-4'>
+                    <div class='ms-auto'>
+                        <button
+                            class='btn btn-primary'
+                            @click='savePaletteFeature'
+                        >
+                            Save
+                        </button>
+                    </div>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { v4 as randomUUID } from 'uuid';
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import CopyField from '../CloudTAK/util/CopyField.vue';
+import { std } from '../../../src/std.ts';
+import type { Palette, PaletteFeature } from '../../types.ts';
+import { validateJSON } from '../../base/validators.ts';
+import {
+    TablerInput,
+    TablerEnum,
+    TablerAlert,
+    TablerDelete,
+    TablerIconButton,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import {
+    IconPencil,
+    IconCircleArrowLeft,
+} from '@tabler/icons-vue'
+
+const route = useRoute();
+const router = useRouter();
+
+const error = ref<Error | undefined>();
+const disabled = ref(true);
+const loading = ref(true);
+
+const palette = ref<Palette | undefined>();
+const paletteFeature = ref<PaletteFeature>({
+    uuid: randomUUID(),
+    type: 'Point',
+    name: '',
+    created: new Date().toISOString(),
+    updated: new Date().toISOString(),
+    palette: String(route.params.palette),
+    style: {}
+});
+
+onMounted(async () => {
+    await fetchPalette();
+
+    if (route.params.feature !== "new") {
+        await fetchPaletteFeature();
+        loading.value = false;
+    } else {
+        disabled.value = false
+        loading.value = false;
+    }
+});
+
+async function savePaletteFeature() {
+    loading.value = true;
+
+    try {
+        if (route.params.feature === "new") {
+            paletteFeature.value = await std(`/api/palette/${route.params.palette}/feature`, {
+                method: 'POST',
+                body: paletteFeature.value
+            }) as PaletteFeature
+
+            disabled.value = true;
+
+            router.push(`/admin/palette/${route.params.palette}`);
+        } else {
+            paletteFeature.value = await std(`/api/palette/${route.params.palette}/feature/${route.params.feature}`, {
+                method: 'PATCH',
+                body: paletteFeature.value
+            }) as PaletteFeature
+
+            router.push(`/admin/palette/${route.params.palette}`);
+        }
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+
+async function deletePaletteFeature() {
+    loading.value = true;
+
+    try {
+        await std(`/api/palette/${route.params.palette}/feature/${route.params.feature}`, {
+            method: 'DELETE'
+        })
+
+        router.push(`/admin/palette/${route.params.palette}`);
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+
+async function fetchPalette() {
+    try {
+        palette.value = await std(`/api/palette/${route.params.palette}`) as Palette;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+}
+
+async function fetchPaletteFeature() {
+    try {
+        paletteFeature.value = await std(`/api/palette/${route.params.palette}/feature/${route.params.feature}`) as PaletteFeature;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+}
+</script>

package/src/components/Admin/AdminPalettes.vue

@@ -0,0 +1,189 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h1 class='card-title'>
+                Draw Palettes
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    title='Create Overlay'
+                    @click='router.push("/admin/palette/new")'
+                >
+                    <IconPlus
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+                <TablerIconButton
+                    title='Refresh'
+                    @click='fetchList'
+                >
+                    <IconRefresh
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+        </div>
+        <div style='min-height: 20vh; margin-bottom: 61px'>
+            <div class='row col-12 mx-1 my-2'>
+                <div class='col-md-12'>
+                    <TablerInput
+                        v-model='paging.filter'
+                        icon='search'
+                        label='Name Filter'
+                        placeholder='Filter...'
+                    />
+                </div>
+            </div>
+
+            <TablerLoading
+                v-if='loading'
+                desc='Loading Palettes'
+            />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <TablerNone
+                v-else-if='!list.items.length'
+                label='No Palettes'
+                :create='false'
+            />
+            <div
+                v-else
+                class='table-responsive'
+            >
+                <table class='table card-table table-hover table-vcenter datatable'>
+                    <TableHeader
+                        v-model:sort='paging.sort'
+                        v-model:order='paging.order'
+                        v-model:header='header'
+                    />
+                    <tbody>
+                        <tr
+                            v-for='p in list.items'
+                            :key='p.uuid'
+                            tabindex='0'
+                            class='cursor-pointer'
+                            @keyup.enter='stdclick(router, $event, `/admin/palette/${p.uuid}`)'
+                            @click='stdclick(router, $event, `/admin/palette/${p.uuid}`)'
+                        >
+                            <template v-for='h in header'>
+                                <template v-if='h.display'>
+                                    <td>
+                                        <div class='d-flex align-items-center'>
+                                            <span v-text='p[h.name]' />
+                                        </div>
+                                    </td>
+                                </template>
+                            </template>
+                        </tr>
+                    </tbody>
+                </table>
+            </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>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { std, stdurl, stdclick } from '../../../src/std.ts';
+import type { PaletteList, Palette } from '../../../src/types.ts';
+import TableHeader from '../util/TableHeader.vue'
+import TableFooter from '../util/TableFooter.vue'
+import {
+    TablerNone,
+    TablerInput,
+    TablerAlert,
+    TablerIconButton,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import {
+    IconPlus,
+    IconRefresh,
+} from '@tabler/icons-vue'
+
+type Header = { name: keyof Palette, display: boolean };
+
+const router = useRouter();
+
+const error = ref<Error | undefined>();
+const loading = ref(true);
+const header = ref<Array<Header>>([]);
+
+const paging = ref({
+    filter: '',
+    sort: 'name',
+    order: 'asc',
+    limit: 100,
+    page: 0
+});
+
+const list = ref<PaletteList>({
+    total: 0,
+    items: []
+});
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await listPaletteSchema();
+    await fetchList();
+});
+
+async function listPaletteSchema() {
+    const schema = await std('/api/schema?method=GET&url=/palette');
+
+    const defaults: Array<keyof Palette> = ['name'];
+    header.value = defaults.map((h) => {
+        return { name: h, display: true };
+    });
+
+    // @ts-expect-error Worth trying to type at some point maybe but not now
+    header.value.push(...schema.query.properties.sort.enum.map((h) => {
+        return {
+            name: h,
+            display: false
+        } as Header
+    }).filter((h: Header) => {
+        for (const hknown of header.value) {
+            if (hknown.name === h.name) return false;
+        }
+        return true;
+    }));
+}
+
+async function fetchList() {
+    loading.value = true;
+    error.value = undefined;
+
+    try {
+        const url = stdurl('/api/palette');
+
+        url.searchParams.append('filter', paging.value.filter);
+        url.searchParams.append('limit', String(paging.value.limit));
+        url.searchParams.append('page', String(paging.value.page));
+        url.searchParams.append('sort', paging.value.sort);
+        list.value = await std(url) as PaletteList;
+     } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+     } finally {
+        loading.value = false;
+     }
+}
+</script>

package/src/components/Admin/AdminServer.vue

@@ -0,0 +1,143 @@
+<template>
+    <div
+        style='height: 100%;'
+        class='col-lg-12'
+    >
+        <div
+            style='height: 100%;'
+            class='row g-0'
+        >
+            <div
+                style='height: 100%;'
+                class='border-end col-12 col-md-3'
+            >
+                <div class='card-body'>
+                    <h4 class='subheader user-select-none'>
+                        TAK Server
+                    </h4>
+                    <div
+                        role='menu'
+                        class='list-group list-group-transparent'
+                    >
+                        <span
+                            tabindex='0'
+                            role='menuitem'
+                            class='list-group-item list-group-item-action d-flex align-items-center user-select-none'
+                            :class='{
+                                "active": String(route.name) === "admin-server-connection",
+                                "cursor-pointer": String(route.name) !== "admin-server-connection"
+                            }'
+                            @click='router.push(`/admin/server/connection`)'
+                        >
+                            <IconServer
+                                :size='32'
+                                stroke='1'
+                            />
+                            <span
+                                class='mx-3'
+                            >Connection</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": String(route.name) === "admin-server-injector",
+                                "cursor-pointer": String(route.name) !== "admin-server-injector"
+                            }'
+                            @click='router.push(`/admin/server/injector`)'
+                        >
+                            <IconVaccine
+                                :size='32'
+                                stroke='1'
+                            />
+                            <span
+                                class='mx-3'
+                            >Injectors</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": String(route.name) === "admin-server-repeater",
+                                "cursor-pointer": String(route.name) !== "admin-server-repeater"
+                            }'
+                            @click='router.push(`/admin/server/repeater`)'
+                        >
+                            <IconBuildingLighthouse
+                                :size='32'
+                                stroke='1'
+                            />
+                            <span
+                                class='mx-3'
+                            >Repeaters</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": String(route.name) === "admin-server-packages",
+                                "cursor-pointer": String(route.name) !== "admin-server-packages"
+                            }'
+                            @click='router.push(`/admin/server/packages`)'
+                        >
+                            <IconPackages
+                                :size='32'
+                                stroke='1'
+                            />
+                            <span
+                                class='mx-3'
+                            >Packages</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": String(route.name) === "admin-server-videos",
+                                "cursor-pointer": String(route.name) !== "admin-server-videos"
+                            }'
+                            @click='router.push(`/admin/server/videos`)'
+                        >
+                            <IconVideo
+                                :size='32'
+                                stroke='1'
+                            />
+                            <span
+                                class='mx-3'
+                            >Videos</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class='col-12 col-md-9 position-relative'>
+                <Suspense>
+                    <router-view />
+
+                    <template #fallback>
+                        <TablerLoading />
+                    </template>
+                </Suspense>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { useRoute, useRouter } from 'vue-router'
+import {
+    TablerLoading,
+} from '@tak-ps/vue-tabler'
+import {
+    IconBuildingLighthouse,
+    IconPackages,
+    IconVaccine,
+    IconServer,
+    IconVideo,
+} from '@tabler/icons-vue'
+
+const route = useRoute()
+const router = useRouter()
+</script>

package/src/components/Admin/AdminTasks.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class='card-header'>
+        <h1 class='card-title'>
+            ETL Task Runner Management
+        </h1>
+    </div>
+    <div
+        class='px-2 py-2 round btn-group w-100'
+        role='group'
+    >
+        <input
+            id='registered'
+            type='radio'
+            class='btn-check'
+            autocomplete='off'
+            :checked='route.name === "admin-tasks-registered"'
+            @click='router.push({ name: `admin-tasks-registered` })'
+        >
+        <label
+            for='registered'
+            type='button'
+            class='btn btn-sm'
+        ><IconBuildingBroadcastTower
+            v-tooltip='"Video Service"'
+            :size='32'
+            stroke='1'
+        /><span class='mx-2'>Registered Tasks</span></label>
+
+        <input
+            id='raw'
+            type='radio'
+            class='btn-check'
+            autocomplete='off'
+            :checked='route.name === "admin-tasks-raw"'
+            @click='router.push({ name: `admin-tasks-raw` })'
+        >
+        <label
+            for='raw'
+            type='button'
+            class='btn btn-sm'
+        ><IconBrandDocker
+            v-tooltip='"Video Leases"'
+            :size='32'
+            stroke='1'
+        /><span class='mx-2'>ECR Task Images</span></label>
+    </div>
+
+    <router-view />
+</template>
+
+<script setup lang='ts'>
+import { useRouter, useRoute } from 'vue-router';
+import {
+    IconBrandDocker,
+    IconBuildingBroadcastTower
+} from '@tabler/icons-vue'
+
+const router = useRouter();
+const route = useRoute();
+</script>