@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/util/WarnChannels.vue

@@ -0,0 +1,56 @@
+<template>
+    <TablerModal>
+        <div class='modal-status bg-red' />
+        <button
+            type='button'
+            class='btn-close'
+            aria-label='Close'
+            @click='$emit("close")'
+        />
+        <div class='modal-header text-white'>
+            <div class='d-flex align-items-center'>
+                <IconInfoSquare
+                    :size='28'
+                    stroke='1'
+                />
+                <span class='mx-2'>No Channels Active</span>
+            </div>
+        </div>
+        <div class='modal-body text-white'>
+            <p>Channels are the basis of who and what you are able to see in TAK</p>
+
+            <p>At this time you do not have any active channels and as such you will not see any Users, Data Packages, or Data Syncs associated with channels.</p>
+
+            <p>It is recommended to turn on relevant channels now</p>
+
+            <div class='d-flex align-items-center'>
+                <div class='ms-auto btn-list'>
+                    <button
+                        class='btn btn-primary'
+                        @click='selectChannels'
+                    >
+                        Select Channels
+                    </button>
+                </div>
+            </div>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup lang='ts'>
+import { useRouter } from 'vue-router';
+import {
+    TablerModal,
+} from '@tak-ps/vue-tabler';
+import {
+    IconInfoSquare,
+} from '@tabler/icons-vue';
+
+const router = useRouter();
+const emit = defineEmits([ 'close' ]);
+
+function selectChannels() {
+    emit('close');
+    router.push('/menu/channels');
+}
+</script>

package/src/components/CloudTAK/util/WarnConfiguration.vue

@@ -0,0 +1,34 @@
+<template>
+    <TablerModal size='lg'>
+        <div class='modal-status bg-red' />
+        <div class='modal-header text-white'>
+            <div class='d-flex align-items-center'>
+                <IconInfoSquare
+                    :size='28'
+                    stroke='1'
+                />
+                <span class='mx-2'>Welcome to CloudTAK</span>
+            </div>
+        </div>
+        <div class='modal-body text-white'>
+            <SettingsCallsign
+                mode='emit'
+                :force-callsign='true'
+                @update='emit("close")'
+            />
+        </div>
+    </TablerModal>
+</template>
+
+<script setup lang='ts'>
+import {
+    TablerModal,
+} from '@tak-ps/vue-tabler';
+import {
+    IconInfoSquare,
+} from '@tabler/icons-vue';
+
+import SettingsCallsign from './SettingsCallsign.vue';
+
+const emit = defineEmits([ 'close' ]);
+</script>

package/src/components/Configure.vue

@@ -0,0 +1,259 @@
+<template>
+    <div
+        class='page page-center'
+        style='overflow: auto;'
+    >
+        <div class='container container-normal py-4'>
+            <div class='row align-items-center g-4'>
+                <div class='col-lg'>
+                    <div class='container-tight'>
+                        <div
+                            class='text-center'
+                            style='margin-bottom: 24px;'
+                        >
+                            <img
+                                class='d-none d-md-inline'
+                                style='
+                                    height: 150px;
+                                '
+                                src='/CloudTAKLogoText.svg'
+                                alt='CloudTAK System Logo'
+                            >
+                        </div>
+                        <div class='card card-md'>
+                            <div class='card-body'>
+                                <h2 class='h2 text-center mb-4'>
+                                    Initial Server Configuration
+                                </h2>
+                                <TablerLoading v-if='loading' />
+                                <template v-else>
+                                    <div class='row g-2'>
+                                        <div class='col-12'>
+                                            <TablerInput
+                                                v-model='body.name'
+                                                :error='errors.name'
+                                                label='Server Name'
+                                                placeholder='TAK Server Name'
+                                                description='Human Readable name for the server'
+                                                @keyup.enter='updateServer'
+                                            />
+                                        </div>
+                                        <div class='col-12'>
+                                            <TablerInput
+                                                v-model='helper.hostname'
+                                                label='Server Hostname'
+                                                placeholder='ops.example.com'
+                                                description='Hostname or IP address of the TAK Server'
+                                                :error='errors.hostname'
+                                                @keyup.enter='updateServer'
+                                            />
+                                        </div>
+                                        <div class='col-md-4 col-12'>
+                                            <TablerInput
+                                                v-model='helper.stream'
+                                                type='number'
+                                                label='CoT Port'
+                                                placeholder='8089'
+                                                description='Streaming COT API - Usually on port 8089'
+                                                @keyup.enter='updateServer'
+                                            />
+                                        </div>
+                                        <div class='col-md-4 col-12'>
+                                            <TablerInput
+                                                v-model='helper.api'
+                                                type='number'
+                                                label='Marti Port'
+                                                placeholder='8443'
+                                                description='Marti API - Usually on port 8443'
+                                                @keyup.enter='updateServer'
+                                            />
+                                        </div>
+                                        <div class='col-md-4 col-12'>
+                                            <TablerInput
+                                                v-model='helper.webtak'
+                                                type='number'
+                                                label='WebTAK'
+                                                placeholder='8446'
+                                                description='WebTAK API - Usually on port 8446'
+                                                :error='errors.url'
+                                                @keyup.enter='updateServer'
+                                            />
+                                        </div>
+
+                                        <div class='mb-2'>
+                                            <label class='mx-2'>Admin Certificate</label>
+                                            <CertificateP12
+                                                v-if='!body.auth || !body.auth.cert || !body.auth.key'
+                                                @certs='body.auth = $event'
+                                            />
+
+                                            <template v-else>
+                                                <div class='col-12 d-flex align-items-center'>
+                                                    <IconCheck
+                                                        :size='40'
+                                                        class='text-green'
+                                                    />
+                                                    <span class='mx-3'>Certificate Uploaded</span>
+
+                                                    <div class='ms-auto'>
+                                                        <IconTrash
+                                                            v-tooltip='"Remove Certificate"'
+                                                            :size='32'
+                                                            stroke='1'
+                                                            class='cursor-pointer'
+                                                            @click='body.auth = { cert: "", key: "" };'
+                                                        />
+                                                    </div>
+                                                </div>
+                                            </template>
+                                        </div>
+                                        <div class='mb-2'>
+                                            <TablerInput
+                                                v-model='body.username'
+                                                label='Initial Administrator Username'
+                                                description='An existing TAK user to use as an initial CloudTAK System Administrator - The TAK Server must respond with a cert for this username/password combo'
+                                                autocomplete='username'
+                                                :error='errors.username'
+                                                @keyup.enter='updateServer'
+                                            />
+                                        </div>
+                                        <div class='mb-2'>
+                                            <TablerInput
+                                                v-model='body.password'
+                                                type='password'
+                                                label='Initial Administrator Password'
+                                                description='An existing TAK user to use as an initial CloudTAK System Administrator - The TAK Server must respond with a cert for this username/password combo'
+                                                autocomplete='password'
+                                                :error='errors.password'
+                                                @keyup.enter='updateServer'
+                                            />
+                                        </div>
+                                        <div class='form-footer'>
+                                            <button
+                                                type='submit'
+                                                class='btn btn-primary w-100'
+                                                :disabled='!body.auth || !body.auth.key'
+                                                @click='updateServer'
+                                            >
+                                                Configure Server
+                                            </button>
+                                        </div>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { std } from '../std.ts';
+import type { Server, Server_Update } from '../types.ts';
+import CertificateP12 from './ETL/Connection/CertificateP12.vue';
+import {
+    TablerLoading,
+    TablerInput
+} from '@tak-ps/vue-tabler'
+import {
+    IconCheck,
+    IconTrash
+} from '@tabler/icons-vue';
+
+const router = useRouter();
+
+const loading = ref(false);
+
+const errors = ref<Record<string, string>>({
+    name: '',
+    username: '',
+    password: '',
+    hostname: ''
+})
+
+const helper = ref({
+    hostname: '',
+    stream: 8089,
+    webtak: 8446,
+    api: 8443,
+});
+
+const body = ref<Server_Update>({
+    name: '',
+    url: '',
+    api: '',
+    webtak: '',
+    username: '',
+    password: '',
+    auth: {
+        key: '',
+        cert: ''
+    }
+})
+
+onMounted(async () => {
+    let server;
+    try {
+        server = await std('/api/server') as Server;
+    } catch (err) {
+        console.error(err);
+    }
+
+    if (!server || server.status === 'configured') {
+        delete localStorage.token;
+        window.location.href = '/login';
+    }
+});
+
+async function updateServer() {
+    if (!body.value.name || body.value.name.trim().length < 8) {
+        errors.value.name = 'Name should be > 8 characters';
+    } else {
+        errors.value.name = '';
+    }
+
+    if (!body.value.username || body.value.username.trim().length === 0) {
+        errors.value.username = 'Username cannot be empty';
+    } else {
+        errors.value.username = '';
+    }
+
+    if (!body.value.password || body.value.password.trim().length === 0) {
+        errors.value.password = 'Password cannot be empty';
+    } else {
+        errors.value.password = '';
+    }
+
+    if (!helper.value.hostname || helper.value.hostname.trim().length === 0) {
+        errors.value.hostname = 'Hostname cannot be empty';
+    } else {
+        errors.value.hostname = '';
+    }
+
+    for (const e in errors.value) {
+        if (errors.value[e]) return;
+    }
+
+    body.value.url = `ssl://${helper.value.hostname}:${helper.value.stream}`;
+    body.value.api = `https://${helper.value.hostname}:${helper.value.api}`;
+    body.value.webtak = `https://${helper.value.hostname}:${helper.value.webtak}`;
+
+    loading.value = true;
+
+    try {
+        await std('/api/server', {
+            method: 'PATCH',
+            body: body.value
+        })
+
+        router.push('/login');
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+</script>

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

@@ -0,0 +1,102 @@
+<template>
+    <div>
+        <span
+            v-if='connection.agency'
+            class='badge border text-white cursor-pointer'
+            :class='{
+                "bg-blue": !muted,
+                "bg-blue-lt": muted
+            }'
+            style='height: 20px'
+            @click='info.shown = true'
+            v-text='`Agency`'
+        />
+        <span
+            v-else
+            class='badge border text-white'
+            :class='{
+                "bg-red": !muted,
+                "bg-red-lt": muted
+            }'
+            style='height: 20px'
+            v-text='`Admin`'
+        />
+
+        <TablerModal v-if='info.shown'>
+            <div class='modal-status bg-yellow' />
+            <button
+                type='button'
+                class='btn-close'
+                aria-label='Close'
+                @click='info.shown = false'
+            />
+
+            <TablerLoading
+                v-if='!agency'
+                desc='Loading Agency...'
+            />
+            <template v-else>
+                <div class='modal-header'>
+                    <div
+                        class='modal-title'
+                        v-text='agency.name'
+                    />
+                </div>
+
+                <div class='modal-body'>
+                    <div class='datagrid'>
+                        <div class='datagrid-item'>
+                            <div class='datagrid-title'>
+                                Description
+                            </div>
+                            <div
+                                class='datagrid-content'
+                                v-text='"No Description"'
+                            />
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <div class='modal-footer'>
+                <button
+                    class='btn btn-primary'
+                    @click='info.shown = false'
+                >
+                    Close
+                </button>
+            </div>
+        </TablerModal>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, onMounted } from 'vue';
+import {
+    TablerModal,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import type { ETLConnection, ETLAgency } from '../../../types.ts';
+import { std } from '../../../std.ts';
+
+const props = defineProps<{
+    connection: ETLConnection,
+    muted?: boolean
+}>()
+
+const info = ref({ shown: false });
+const agency = ref<ETLAgency | undefined>();
+
+watch(info, async () => {
+    await fetch()
+});
+
+onMounted(async () => {
+    if (props.connection.agency) {
+        await fetch()
+    }
+});
+
+async function fetch() {
+    agency.value = await std(`/api/agency/${props.connection.agency}`) as ETLAgency;
+}
+</script>

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

@@ -0,0 +1,185 @@
+<template>
+    <div>
+        <div class='d-flex align-items-center'>
+            <label class='mx-1 mb-1'>Connection Agency</label>
+            <div
+                v-if='isSystemAdmin'
+                class='ms-auto'
+            >
+                <TablerToggle
+                    v-model='noAgency'
+                    label='System Admin Connection - No Owning Agency'
+                />
+            </div>
+        </div>
+        <div class='card'>
+            <template v-if='noAgency'>
+                <TablerNone
+                    :create='false'
+                    :compact='true'
+                    label='Agency - System Admin Access Only'
+                />
+            </template>
+            <template v-else>
+                <div class='card-body'>
+                    <TablerLoading
+                        v-if='loading.main'
+                        :inline='true'
+                        desc='Loading Agencies'
+                    />
+                    <template v-else-if='selected'>
+                        <div class='col-12 d-flex align-items-center'>
+                            <div v-text='selected.name' />
+                            <div class='ms-auto'>
+                                <TablerIconButton
+                                    v-if='selected && list.total > 1'
+                                    title='Remove Agency'
+                                    @click='selected = undefined'
+                                >
+                                    <IconTrash
+                                        :size='32'
+                                        stroke='1'
+                                    />
+                                </TablerIconButton>
+                            </div>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class='col-12 pb-2'>
+                            <TablerInput
+                                v-model='filter'
+                                icon='search'
+                                placeholder='Agency Filter...'
+                            />
+                        </div>
+
+                        <TablerLoading
+                            v-if='loading.list'
+                            desc='Loading Agencies'
+                        />
+                        <TablerNone
+                            v-else-if='list.total === 0'
+                            :create='false'
+                            :compact='true'
+                            label='Agencies'
+                        />
+                        <template v-else>
+                            <div
+                                v-for='agency in list.items'
+                                :key='agency.id'
+                                class='hover px-2 py-2 cursor-pointer row rounded col-12'
+                                @click='selected = agency'
+                            >
+                                <div class='d-flex align-items-center'>
+                                    <IconHome
+                                        :size='32'
+                                        stroke='1'
+                                    />
+                                    <span
+                                        class='mx-2'
+                                        v-text='agency.name'
+                                    />
+                                </div>
+                            </div>
+                        </template>
+                    </template>
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, onMounted } from 'vue';
+import { std, stdurl } from '../../../std.ts';
+import type { Profile, ETLAgencyList, ETLAgency } from '../../../types.ts';
+import { watchDebounced } from '@vueuse/core'
+import {
+    IconTrash,
+    IconHome,
+} from '@tabler/icons-vue';
+import {
+    TablerIconButton,
+    TablerLoading,
+    TablerToggle,
+    TablerInput,
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+
+const props = defineProps<{
+    modelValue: number | null,
+}>()
+
+const emit = defineEmits([ 'update:modelValue', 'disabled' ]);
+
+const noAgency = ref(props.modelValue === null);
+const loading = ref({
+    main: true,
+    list: true,
+});
+const filter = ref('');
+const selected = ref<ETLAgency | undefined>(undefined);
+const isSystemAdmin = ref(false);
+
+const list =  ref<ETLAgencyList>({
+    total: 0,
+    config: {
+        enabled: true
+    },
+    items: []
+});
+
+watch(selected, () => {
+    if (!noAgency.value) {
+        emit('update:modelValue', selected.value ? selected.value.id : undefined);
+    }
+});
+
+watch(noAgency, () => {
+    if (noAgency.value) {
+        selected.value = undefined;
+        emit('update:modelValue', null);
+    }
+});
+
+watchDebounced(filter, async function() {
+    await listData()
+}, { debounce: 500 })
+
+watch(props, async (newProps, oldProps) => {
+    if (newProps.modelValue !== oldProps.modelValue) {
+        await fetch();
+    }
+})
+
+onMounted(async () => {
+    const profile = await std('/api/profile') as Profile;
+    isSystemAdmin.value = profile.system_admin;
+
+    if (props.modelValue) await fetch();
+    await listData();
+    loading.value.main = false;
+});
+
+async function fetch() {
+    selected.value = await std(`/api/agency/${props.modelValue}`) as ETLAgency;
+}
+
+async function listData() {
+    loading.value.list = true;
+    const url = stdurl('/api/agency');
+    url.searchParams.append('filter', filter.value);
+    const data = await std(url) as ETLAgencyList;
+
+    if (!isSystemAdmin.value && data.total === 1) {
+        selected.value = data.items[0];
+    }
+
+    if (!data.config.enabled) {
+        emit('disabled', true);
+    } else {
+        list.value = data;
+        loading.value.list = false;
+    }
+}
+</script>