@tak-ps/cloudtak 12.54.0

package/src/components/Admin/AdminUser.vue

@@ -0,0 +1,263 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <TablerIconButton
+                title='Back'
+                @click='router.push("/admin/user")'
+            >
+                <IconCircleArrowLeft
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+
+            <div class='card-title d-flex align-items-center'>
+                <StatusDot
+                    :dark='true'
+                    :status='user.active ? "Success" : "Unknown"'
+                />
+                <span
+                    class='mx-2'
+                    v-text='route.params.user'
+                />
+            </div>
+
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    v-if='!edit'
+                    title='Edit User'
+                    @click='edit = true'
+                >
+                    <IconSettings
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+                <TablerRefreshButton
+                    :loading='loading'
+                    @click='fetchUserLoading'
+                />
+            </div>
+        </div>
+        <div class='card-body'>
+            <TablerLoading v-if='loading' />
+            <template v-else-if='edit'>
+                <div class='col-12 pb-4'>
+                    <TablerToggle
+                        v-model='user.system_admin'
+                        label='System Administrator'
+                    />
+                </div>
+
+                <div class='col-12 d-flex align-items-center'>
+                    <button
+                        class='btn btn-secondary'
+                        @click='fetchUserLoading'
+                    >
+                        Cancel
+                    </button>
+
+                    <div class='ms-auto'>
+                        <button
+                            class='btn btn-primary'
+                            @click='saveUser'
+                        >
+                            Save
+                        </button>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <div class='datagrid'>
+                    <template v-for='ele in getRemainingKeys(user)'>
+                        <div
+                            v-if='user[ele]'
+                            class='datagrid-item'
+                        >
+                            <div
+                                class='datagrid-title'
+                                v-text='ele'
+                            />
+
+                            <template v-if='ele === "agency_admin"'>
+                                <div
+                                    class='datagrid-content'
+                                    v-text='user.agency_admin.length ? user.agency_admin : "None"'
+                                />
+                            </template>
+                            <template v-else-if='ele === "username"'>
+                                <CopyField
+                                    :model-value='user.username'
+                                />
+                            </template>
+                            <template v-else>
+                                <div
+                                    class='datagrid-content'
+                                    v-text='user[ele]'
+                                />
+                            </template>
+                        </div>
+                    </template>
+                </div>
+
+                <div
+                    class='col-lg-12 hover py-2 mt-2 cursor-pointer'
+                    @click='opened.has("tak") ? opened.delete("tak") : opened.add("tak")'
+                >
+                    <IconChevronDown v-if='opened.has("tak")' />
+                    <IconChevronRight v-else />
+
+                    <span class='mx-2 user-select-none'>TAK Broadcast</span>
+                </div>
+
+                <div
+                    v-if='opened.has("tak")'
+                    class='col-lg-12 card-body border rounded'
+                >
+                    <div class='datagrid'>
+                        <template v-for='ele in getTAKKeys(user)'>
+                            <div
+                                v-if='user[ele]'
+                                class='datagrid-item'
+                            >
+                                <div
+                                    class='datagrid-title'
+                                    v-text='ele'
+                                />
+
+                                <template v-if='ele === "tak_loc"'>
+                                    <CopyField
+                                        :model-value='user.tak_loc ? user.tak_loc.coordinates.map(c => Math.round(c * 1000000) / 1000000).join(",") : "Unset"'
+                                    />
+                                </template>
+                                <template v-else>
+                                    <div
+                                        class='datagrid-content'
+                                        v-text='user[ele]'
+                                    />
+                                </template>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+
+                <div
+                    class='col-lg-12 hover py-2 mt-2 cursor-pointer'
+                    @click='opened.has("display") ? opened.delete("display") : opened.add("display")'
+                >
+                    <IconChevronDown v-if='opened.has("display")' />
+                    <IconChevronRight v-else />
+
+                    <span class='mx-2 user-select-none'>Display Settings</span>
+                </div>
+                <div
+                    v-if='opened.has("display")'
+                    class='col-lg-12 card-body border rounded'
+                >
+                    <div class='datagrid'>
+                        <template v-for='ele in getDisplayKeys(user)'>
+                            <div
+                                v-if='user[ele]'
+                                class='datagrid-item'
+                            >
+                                <div
+                                    class='datagrid-title'
+                                    v-text='ele'
+                                />
+                                <div
+                                    class='datagrid-content'
+                                    v-text='user[ele]'
+                                />
+                            </div>
+                        </template>
+                    </div>
+                </div>
+
+                <div
+                    class='col-lg-12 hover py-2 mt-2 cursor-pointer'
+                    @click='opened.has("fusion") ? opened.delete("fusion") : opened.add("fusion")'
+                >
+                    <IconChevronDown v-if='opened.has("fusion")' />
+                    <IconChevronRight v-else />
+
+                    <span class='mx-2 user-select-none'>Fused Sensors</span>
+                </div>
+                <div
+                    v-if='opened.has("fusion")'
+                    class='col-lg-12 card-body border rounded'
+                >
+                    Fused Sensors
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { std, stdurl } from '../../std.ts';
+import type { User } from '../../types.ts';
+import CopyField from '../CloudTAK/util/CopyField.vue';
+import StatusDot from '../util/StatusDot.vue';
+import {
+    TablerLoading,
+    TablerToggle,
+    TablerIconButton,
+    TablerRefreshButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconSettings,
+    IconChevronDown,
+    IconChevronRight,
+    IconCircleArrowLeft,
+} from '@tabler/icons-vue'
+
+import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+async function fetchUser(): Promise<User> {
+    const url = stdurl(`/api/user/${route.params.user}`);
+    return await std(url) as User;
+}
+
+const opened = ref<Set<string>>(new Set());
+
+const loading = ref(false);
+const edit = ref(false);
+const user = ref<User>(await fetchUser());
+
+const getRemainingKeys = <T extends object>(obj: T) => Object.keys(obj).filter((key) => {
+    return !key.startsWith('display') && !key.startsWith('tak');
+}) as Array<keyof T>
+
+const getDisplayKeys = <T extends object>(obj: T) => Object.keys(obj).filter((key) => {
+    return key.startsWith('display');
+}) as Array<keyof T>
+
+const getTAKKeys = <T extends object>(obj: T) => Object.keys(obj).filter((key) => {
+    return key.startsWith('tak');
+}) as Array<keyof T>
+
+async function saveUser(): Promise<void> {
+    edit.value = false;
+    loading.value = true;
+    const url = stdurl(`/api/user/${route.params.user}`);
+    user.value = await std(url, {
+        method: 'PATCH',
+        body: {
+            system_admin: user.value.system_admin
+        }
+    }) as User;
+    loading.value = false;
+}
+
+async function fetchUserLoading(): Promise<void> {
+    edit.value = false;
+    loading.value = true;
+    const url = stdurl(`/api/user/${route.params.user}`);
+    user.value = await std(url) as User;
+    loading.value = false;
+}
+</script>

package/src/components/Admin/AdminUsers.vue

@@ -0,0 +1,183 @@
+<template>
+    <div>
+        <div class='card-header'>
+            <h1 class='card-title'>
+                Users
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <TablerRefreshButton
+                    :loading='loading'
+                    @click='fetchList'
+                />
+            </div>
+        </div>
+        <div style='min-height: 20vh; margin-bottom: 61px'>
+            <TablerInput
+                v-model='paging.filter'
+                icon='search'
+                placeholder='Filter...'
+                class='mx-1 my-2'
+            />
+
+            <TablerAlert
+                v-if='error'
+                :err='error'
+            />
+            <TablerLoading v-else-if='loading' />
+            <TablerNone
+                v-else-if='!list.items.length'
+                label='No Users'
+                :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
+                        role='menu'
+                    >
+                        <tr
+                            v-for='user in list.items'
+                            :key='user.username'
+                            class='cursor-pointer'
+                            role='menuitem'
+                            tabindex='0'
+                            @keyup.enter='router.push(`/admin/user/${user.username}`)'
+                            @click='router.push(`/admin/user/${user.username}`)'
+                        >
+                            <template v-for='h in header'>
+                                <template v-if='h.display'>
+                                    <td>
+                                        <div
+                                            v-if='h.name === "username"'
+                                            class='d-flex align-items-center'
+                                        >
+                                            <StatusDot
+                                                :dark='true'
+                                                :status='user.active ? "Success" : "Unknown"'
+                                            />
+                                            <span
+                                                class='mx-2'
+                                                v-text='user[h.name]'
+                                            />
+                                        </div>
+                                        <div
+                                            v-else-if='h.name === "last_login"'
+                                        >
+                                            <div v-text='timeDiff(user[h.name])' />
+                                            <div
+                                                class='subheader'
+                                                v-text='user[h.name]'
+                                            />
+                                        </div>
+                                        <span
+                                            v-else
+                                            v-text='user[h.name]'
+                                        />
+                                    </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 } from '../../std.ts';
+import timeDiff from '../../timediff.ts';
+import type { User, UserList } from '../../types.ts';
+import TableHeader from '../util/TableHeader.vue'
+import TableFooter from '../util/TableFooter.vue'
+import StatusDot from '../util/StatusDot.vue';
+import {
+    TablerNone,
+    TablerAlert,
+    TablerInput,
+    TablerLoading,
+    TablerRefreshButton
+} from '@tak-ps/vue-tabler';
+
+const router = useRouter();
+const error = ref<Error | undefined>(undefined);
+const loading = ref(true);
+
+type Header = { name: keyof User, display: boolean };
+const header = ref<Array<Header>>([])
+const list = ref<UserList>({ total: 0, items: [] });
+const paging = ref({
+    filter: '',
+    sort: 'last_login',
+    order: 'desc',
+    limit: 100,
+    page: 0
+});
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await listLayerSchema();
+    await fetchList();
+});
+
+async function listLayerSchema() {
+    const schema = await std('/api/schema?method=GET&url=/user');
+
+    header.value = ['username', 'last_login', 'phone'].map((h) => {
+        return { name: h, display: true } as Header;
+    });
+
+    // @ts-expect-error No strong types on Schema objects
+    header.value.push(...schema.query.properties.sort.enum.map((h: string) => {
+        return {
+            name: h,
+            display: false
+        }
+    }).filter((h: { name: string, display: boolean }) => {
+        for (const hknown of header.value) {
+            if (hknown.name === h.name) return false;
+        }
+        return true;
+    }));
+}
+
+async function fetchList() {
+    try {
+        loading.value = true;
+        const url = stdurl('/api/user');
+        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);
+        url.searchParams.append('order', paging.value.order);
+        list.value = await std(url) as UserList;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value = false;
+}
+</script>

package/src/components/Admin/AdminVideos.vue

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