@tak-ps/cloudtak 12.54.0

package/src/components/Admin/AdminConfig.vue

@@ -0,0 +1,487 @@
+<template>
+    <div>
+        <TablerLoading v-if='loading' />
+        <template v-else>
+            <div class='card-header'>
+                <h3 class='card-title'>
+                    CloudTAK Settings
+                </h3>
+                <div class='ms-auto'>
+                    <div class='btn-list'>
+                        <TablerIconButton
+                            v-if='!edit'
+                            title='Edit'
+                            @click='edit = true'
+                        >
+                            <IconPencil
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                    </div>
+                </div>
+            </div>
+            <div class='card-body row'>
+                <div
+                    class='col-lg-12 hover py-2 cursor-pointer'
+                    @click='opened.has("login") ? opened.delete("login") : opened.add("login")'
+                >
+                    <IconChevronDown v-if='opened.has("login")' />
+                    <IconChevronRight v-else />
+
+                    <span class='mx-2 user-select-none'>Login Page</span>
+                </div>
+
+                <div
+                    v-if='opened.has("login")'
+                    class='col-lg-12 py-2 border rounded'
+                >
+                    <div class='row'>
+                        <div class='col-lg-12'>
+                            <TablerInput
+                                v-model='config["login::signup"]'
+                                :disabled='!edit'
+                                :error='validateURL(config["login::signup"])'
+                                label='TAK Server Signup Link'
+                            />
+                            <TablerInput
+                                v-model='config["login::forgot"]'
+                                :disabled='!edit'
+                                :error='validateURL(config["login::forgot"])'
+                                label='TAK Server Password Reset Link'
+                            />
+
+                            <UploadLogo
+                                v-model='config["login::logo"]'
+                                label='Login Logo'
+                                :disabled='!edit'
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    class='col-lg-12 hover py-2 cursor-pointer'
+                    @click='opened.has("agol") ? opened.delete("agol") : opened.add("agol")'
+                >
+                    <IconChevronDown v-if='opened.has("agol")' />
+                    <IconChevronRight v-else />
+
+                    <span class='mx-2 user-select-none'>ArcGIS Online</span>
+                </div>
+
+                <div
+                    v-if='opened.has("agol")'
+                    class='col-lg-12 py-2 border rounded'
+                >
+                    <div class='row'>
+                        <div class='col-lg-12'>
+                            <TablerToggle
+                                v-model='config["agol::enabled"]'
+                                :disabled='!edit'
+                                label='ArcGIS Online Enabled'
+                            />
+
+                            <template v-if='config["agol::enabled"]'>
+                                <div
+                                    class='px-2 py-2 round btn-group w-100'
+                                    role='group'
+                                >
+                                    <input
+                                        id='agol-oauth2'
+                                        type='radio'
+                                        class='btn-check'
+                                        autocomplete='off'
+                                        :checked='config["agol::auth_method"] === "oauth2"'
+                                        :disabled='config["agol::enabled"] === false || !edit'
+                                        @click='config["agol::auth_method"] = "oauth2"'
+                                    >
+                                    <label
+                                        for='agol-oauth2'
+                                        type='button'
+                                        class='btn'
+                                    >OAuth2</label>
+
+                                    <input
+                                        id='agol-legacy'
+                                        type='radio'
+                                        class='btn-check'
+                                        autocomplete='off'
+                                        :checked='config["agol::auth_method"] === "legacy"'
+                                        @click='config["agol::auth_method"] = "legacy"'
+                                    >
+                                    <label
+                                        for='agol-legacy'
+                                        type='button'
+                                        class='btn'
+                                    >Legacy</label>
+                                </div>
+
+                                <template v-if='config["agol::auth_method"] === "oauth2"'>
+                                    <TablerInput
+                                        v-model='config["agol::client_id"]'
+                                        :disabled='!edit'
+                                        label='OAuth2 Client ID'
+                                        description='Client ID from your ArcGIS Location Platform or ArcGIS Enterprise account'
+                                    />
+                                    <TablerInput
+                                        v-model='config["agol::client_secret"]'
+                                        type='password'
+                                        :disabled='!edit'
+                                        label='OAuth2 Client Secret'
+                                        description='Client Secret from your ArcGIS Location Platform or ArcGIS Enterprise account'
+                                    />
+                                </template>
+                                <template v-else>
+                                    <TablerInput
+                                        v-model='config["agol::token"]'
+                                        type='password'
+                                        :disabled='!edit'
+                                        label='Legacy Token'
+                                        description='ArcGIS Online access token'
+                                    />
+                                </template>
+                            </template>
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    class='col-lg-12 hover py-2 cursor-pointer'
+                    @click='opened.has("media") ? opened.delete("media") : opened.add("media")'
+                >
+                    <IconChevronDown v-if='opened.has("media")' />
+                    <IconChevronRight v-else />
+
+                    <span class='mx-2 user-select-none'>Media Server</span>
+                </div>
+
+                <div
+                    v-if='opened.has("media")'
+                    class='col-lg-12 py-2 border rounded'
+                >
+                    <div class='row'>
+                        <div class='col-lg-12'>
+                            <TablerInput
+                                v-model='config["media::url"]'
+                                :disabled='!edit'
+                                :error='validateURL(config["media::url"])'
+                                label='CloudTAK Hosted MediaMTX Service URL'
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    class='col-lg-12 hover py-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 Defaults</span>
+                </div>
+
+                <div
+                    v-if='opened.has("display")'
+                    class='col-lg-12 py-2 border rounded'
+                >
+                    <div class='row'>
+                        <TablerInlineAlert
+                            title='Application Behavior'
+                            description='These are the default display settings for new users. Existing users will not be affected.'
+                        />
+
+                        <div
+                            v-for='display in Object.keys(config).filter(key => key.startsWith("display::"))'
+                            :key='display'
+                            class='col-lg-12'
+                        >
+                            <TablerEnum
+                                v-model='config[display]'
+                                :label='display.replace("display::", "") === "icon_rotation" ? "Rotate Icons with Course" : display.replace("display::", "").replace(/_/g, " ").replace(/\b\w/g, c => c.toUpperCase())'
+                                :options='displayUnits[display.replace("display::", "")] || []'
+                                :disabled='!edit'
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    class='col-lg-12 hover py-2 cursor-pointer'
+                    @click='opened.has("groups") ? opened.delete("groups") : opened.add("groups")'
+                >
+                    <IconChevronDown v-if='opened.has("groups")' />
+                    <IconChevronRight v-else />
+
+                    <span class='mx-2 user-select-none'>TAK User Groups</span>
+                </div>
+
+                <div
+                    v-if='opened.has("groups")'
+                    class='col-lg-12 py-2 border rounded'
+                >
+                    <div class='row'>
+                        <div
+                            v-for='group in groups'
+                            :key='group'
+                            class='col-lg-12'
+                        >
+                            <TablerInput
+                                v-model='config[`group::${group}`]'
+                                :label='group'
+                                :disabled='!edit'
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    class='col-lg-12 hover py-2 cursor-pointer'
+                    @click='opened.has("map") ? opened.delete("map") : opened.add("map")'
+                >
+                    <IconChevronDown v-if='opened.has("map")' />
+                    <IconChevronRight v-else />
+
+                    <span class='mx-2 user-select-none'>Map Settings</span>
+                </div>
+
+                <div
+                    v-if='opened.has("map")'
+                    class='col-lg-12 py-2 border rounded'
+                >
+                    <div class='row'>
+                        <div class='col-lg-12'>
+                            <TablerInput
+                                v-model='config[`map::center`]'
+                                label='Initial Map Center (<lat>,<lng>)'
+                                placeholder='Latitude, Longitude'
+                                :error='validateLatLng(config[`map::center`])'
+                                :disabled='!edit'
+                            />
+                        </div>
+                        <div class='col-lg-12'>
+                            <TablerInput
+                                v-model='config[`map::zoom`]'
+                                label='Initial Map Zoom'
+                                :disabled='!edit'
+                            />
+                        </div>
+                        <div class='col-lg-12'>
+                            <TablerInput
+                                v-model='config[`map::pitch`]'
+                                label='Initial Map Pitch'
+                                :disabled='!edit'
+                            />
+                        </div>
+                        <div class='col-lg-12'>
+                            <TablerInput
+                                v-model='config[`map::bearing`]'
+                                label='Initial Map Bearing'
+                                :disabled='!edit'
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    class='col-lg-12 hover py-2 cursor-pointer'
+                    @click='opened.has("provider") ? opened.delete("provider") : opened.add("provider")'
+                >
+                    <IconChevronDown v-if='opened.has("provider")' />
+                    <IconChevronRight v-else />
+
+                    <span class='mx-2 user-select-none'>COTAK OAuth Provider</span>
+                </div>
+
+                <div
+                    v-if='opened.has("provider")'
+                    class='col-lg-12 py-2 border rounded'
+                >
+                    <div class='row'>
+                        <div class='col-lg-12'>
+                            <TablerInput
+                                v-model='config[`provider::url`]'
+                                label='Provider URL'
+                                :disabled='!edit'
+                            />
+                        </div>
+                        <div class='col-lg-12'>
+                            <TablerInput
+                                v-model='config[`provider::secret`]'
+                                label='Provider Secret'
+                                :disabled='!edit'
+                            />
+                        </div>
+                        <div class='col-lg-12'>
+                            <TablerInput
+                                v-model='config[`provider::client`]'
+                                label='Provider Client'
+                                :disabled='!edit'
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div
+                    v-if='edit'
+                    class='col-lg-12 d-flex py-2'
+                >
+                    <div
+                        class='btn'
+                        @click='fetch'
+                    >
+                        Cancel
+                    </div>
+                    <div class='ms-auto'>
+                        <div
+                            class='btn btn-primary'
+                            @click='postConfig'
+                        >
+                            Save Settings
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { std, stdurl } from '../../std.ts';
+import { validateURL, validateLatLng } from '../../base/validators.ts';
+import {
+    TablerLoading,
+    TablerInlineAlert,
+    TablerIconButton,
+    TablerEnum,
+    TablerToggle,
+    TablerInput
+} from '@tak-ps/vue-tabler';
+import UploadLogo from '../util/UploadLogo.vue';
+import {
+    IconPencil,
+    IconChevronRight,
+    IconChevronDown,
+} from '@tabler/icons-vue';
+
+const groups = ref([
+    "Yellow",
+    "Cyan",
+    "Green",
+    "Red",
+    "Purple",
+    "Orange",
+    "Blue",
+    "Magenta",
+    "White",
+    "Maroon",
+    "Dark Blue",
+    "Teal",
+    "Dark Green",
+    "Brown",
+]);
+
+const config = ref({
+    'agol::enabled': false,
+
+    'agol::auth_method': 'oauth2',
+    'agol::token': '',
+    'agol::client_id': '',
+    'agol::client_secret': '',
+
+    'media::url': '',
+
+    'map::center': '40,-100',
+    'map::zoom': 4,
+    'map::bearing': 0,
+    'map::pitch': 0,
+
+    'provider::url': '',
+    'provider::secret': '',
+    'provider::client': '',
+
+    'login::logo': '',
+    'login::forgot': '',
+    'login::signup': '',
+
+})
+
+const displayUnits = ref({});
+
+for (const group of groups.value) {
+    config.value[`group::${group}`] = '';
+}
+
+const edit = ref(false);
+const loading = ref(true);
+const opened = ref(new Set());
+
+onMounted(async () => {
+    await fetch();
+});
+
+async function fetch() {
+    edit.value = false;
+    loading.value = true;
+
+    try {
+        const display = await std('/api/config/display')
+        for (const [key, value] of Object.entries(display)) {
+            displayUnits.value[key] = value.options;
+        }
+
+        const url = stdurl('/api/config')
+        url.searchParams.append('keys', Object.keys(config.value).join(','));
+        const configRes = await std(url);
+
+        for (const key of Object.keys(configRes)) {
+            if (configRes[key] === undefined) continue;
+
+            // Keep coordinate format consistent for users
+            if (key === 'map::center') {
+                config.value[key] = configRes[key].split(',').reverse().join(',');
+            } else {
+                config.value[key] = configRes[key];
+            }
+        }
+
+        for (const key of Object.keys(display)) {
+            config.value[`display::${key}`] = display[key].value;
+        }
+    } catch (error) {
+        console.error('Failed to load admin config:', error);
+        // Page will load with default values from config.value initialization
+    }
+
+    loading.value = false;
+}
+
+async function postConfig() {
+    loading.value = true;
+    try {
+        await std(`/api/config`, {
+            method: 'PUT',
+            body: {
+                ...config.value,
+                'map::center': config.value['map::center'].split(',').reverse().join(','),
+            }
+        });
+
+        // Force reload display config to clear any caching
+        const display = await std('/api/config/display');
+        for (const [key, value] of Object.entries(display)) {
+            displayUnits.value[key] = value.options;
+            config.value[`display::${key}`] = value.value;
+        }
+
+        edit.value = false;
+    } catch (error) {
+        console.error('Failed to save admin config:', error);
+        // Keep edit mode active so user can try again
+    } finally {
+        loading.value = false;
+    }
+}
+</script>

package/src/components/Admin/AdminConnections.vue

@@ -0,0 +1,195 @@
+<template>
+    <div>
+        <div class='card-header d-flex'>
+            <h1 class='card-title'>
+                Connection Admin
+            </h1>
+
+            <div class='ms-auto btn-list'>
+                <TablerIconButton
+                    title='Create Connection'
+                    @click='external("/connection/new")'
+                >
+                    <IconPlus
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+
+                <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'
+            />
+            <TablerLoading
+                v-if='loading'
+                desc='Loading Connections'
+            />
+            <TablerAlert
+                v-else-if='error'
+                :err='error'
+            />
+            <TablerNone
+                v-else-if='!list.items.length'
+                label='No Layers'
+                :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='connection in list.items'
+                            :key='connection.id'
+                            class='cursor-pointer'
+                            role='menuitem'
+                            tabindex='0'
+                            @keyup.enter='external(`/connection/${connection.id}`)'
+                            @click='external(`/connection/${connection.id}`)'
+                        >
+                            <template v-for='h in header'>
+                                <template v-if='h.display && h.name === "name"'>
+                                    <td>
+                                        <div class='d-flex align-items-center'>
+                                            <Status :connection='connection' /><span
+                                                class='mx-2'
+                                                v-text='connection[h.name]'
+                                            />
+                                        </div>
+                                    </td>
+                                </template>
+                                <template v-else-if='h.display'>
+                                    <td>
+                                        <span v-text='connection[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>
+import { ref, watch, onMounted } from 'vue'
+import { server, std } from '../../std.ts';
+import TableHeader from '../util/TableHeader.vue'
+import TableFooter from '../util/TableFooter.vue'
+import Status from '../ETL/Connection/StatusDot.vue';
+import {
+    TablerNone,
+    TablerAlert,
+    TablerInput,
+    TablerLoading,
+    TablerIconButton,
+    TablerRefreshButton,
+} from '@tak-ps/vue-tabler';
+import {
+    IconPlus,
+} from '@tabler/icons-vue'
+
+const error = ref(false);
+const loading = ref(true);
+const header = ref([]);
+const paging = ref({
+    filter: '',
+    sort: 'name',
+    order: 'asc',
+    limit: 100,
+    page: 0
+})
+
+const list = ref({
+    total: 0,
+    items: []
+})
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await listLayerSchema();
+    await fetchList();
+});
+
+async function listLayerSchema() {
+    const schema = await std('/api/schema?method=GET&url=/connection');
+    header.value = ['id', 'name'].map((h) => {
+        return { name: h, display: true };
+    });
+
+    header.value.push(...schema.query.properties.sort.enum.map((h) => {
+        return {
+            name: h,
+            display: false
+        }
+    }).filter((h) => {
+        for (const hknown of header.value) {
+            if (hknown.name === h.name) return false;
+        }
+        return true;
+    }));
+}
+
+async function fetchList() {
+    loading.value = true;
+
+    try {
+        const res = await server.GET('/api/connection', {
+            params: {
+                query: {
+                    filter: paging.value.filter,
+                    limit: paging.value.limit,
+                    page: paging.value.page,
+                    sort: paging.value.sort,
+                    order: paging.value.order
+                }
+            }
+        });
+
+        if (res.error) throw new Error(res.error.message);
+
+        list.value = res.data;
+
+        loading.value = false;
+    } catch (err) {
+        loading.value = false;
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+}
+
+function external(url) {
+    window.location.href = url;
+}
+</script>