@tak-ps/cloudtak 12.54.0

package/src/components/ETL/Styling/Style.vue

@@ -0,0 +1,233 @@
+<template>
+    <div class='card-header px-1 pb-1 pt-2'>
+        Style Editor
+        <div class='ms-auto btn-list'>
+            <template v-if='mode === "visual"'>
+                <TablerIconButton
+                    title='New Layer'
+                    @click='newLayer'
+                >
+                    <IconPlus
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+                <TablerIconButton
+                    title='Code View'
+                    @click='mode = "code"'
+                >
+                    <IconCode
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </template>
+            <TablerIconButton
+                v-if='mode === "code"'
+                title='Visual View'
+                @click='mode = "visual"'
+            >
+                <IconEye
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+        </div>
+    </div>
+
+    <template v-if='mode === "code"'>
+        <ObjectInput
+            v-model='styles'
+            placeholder='GL JS Style JSON'
+            :rows='30'
+        />
+    </template>
+    <template v-else>
+        <TablerNone
+            v-if='!styles.length'
+            :create='false'
+        />
+        <div
+            v-for='(l, l_it) of styles'
+            v-else
+            :key='l.id'
+        >
+            <div
+                class='hover cursor-pointer'
+                @click='open.has(l.id) ? open.delete(l.id) : open.add(l.id)'
+            >
+                <div class='px-3 py-2 d-flex align-items-center'>
+                    <IconPaint
+                        v-if='l.type === "fill"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconLine
+                        v-else-if='l.type === "line"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconAbc
+                        v-else-if='l.type === "symbol"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconCircle
+                        v-else-if='l.type === "circle"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconFlame
+                        v-else-if='l.type === "heatmap"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconCube
+                        v-else-if='l.type === "fill-extrusion"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconPhoto
+                        v-else-if='l.type === "raster"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconMountain
+                        v-else-if='l.type === "hillshade"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconBackground
+                        v-else-if='l.type === "background"'
+                        :size='24'
+                        stroke='1'
+                    />
+                    <IconQuestionMark
+                        v-else
+                        :size='24'
+                        stroke='1'
+                    />
+
+                    <span
+                        class='user-select-none mx-2'
+                        v-text='l.id || l.name'
+                    />
+
+                    <div
+                        v-if='open.has(l.id)'
+                        class='ms-auto btn-list'
+                        @click.stop.prevent
+                    >
+                        <TablerIconButton
+                            v-if='!code.has(l.id)'
+                            title='Code View'
+                            @click='code.add(l.id)'
+                        >
+                            <IconCode
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+                        <TablerIconButton
+                            v-else
+                            title='Visual View'
+                            @click='code.delete(l.id)'
+                        >
+                            <IconEye
+                                :size='32'
+                                stroke='1'
+                            />
+                        </TablerIconButton>
+
+                        <TablerDelete
+                            v-tooltip='"Remove Layer"'
+                            displaytype='icon'
+                            @delete='removeLayer(l, l_it)'
+                        />
+                    </div>
+                </div>
+            </div>
+            <div v-if='open.has(l.id)'>
+                <template v-if='code.has(l.id)'>
+                    <ObjectInput v-model='styles[l_it]' />
+                </template>
+                <StyleLayer
+                    v-else
+                    :layer='l'
+                    :advanced='advanced'
+                    :update-map='false'
+                />
+            </div>
+        </div>
+    </template>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import {
+    TablerIconButton,
+    TablerDelete,
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+import ObjectInput from './ObjectInput.vue';
+import {
+    IconEye,
+    IconPlus,
+    IconAbc,
+    IconCube,
+    IconCode,
+    IconPaint,
+    IconLine,
+    IconFlame,
+    IconPhoto,
+    IconCircle,
+    IconMountain,
+    IconBackground,
+    IconQuestionMark
+} from '@tabler/icons-vue';
+import StyleLayer from './Layer.vue';
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        required: true
+    },
+    advanced: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const styles = ref(JSON.parse(JSON.stringify(props.modelValue)))
+const code = ref(new Set());
+const open = ref(new Set());
+const mode = ref('visual');
+
+watch(styles, () => {
+    emit('update:modelValue', styles.value);
+});
+
+watch(styles.value, () => {
+    emit('update:modelValue', styles.value);
+});
+
+function removeLayer(l, i) {
+    styles.value.splice(i, 1);
+    open.value.delete(l.id)
+    code.value.delete(l.id)
+}
+
+function newLayer() {
+    styles.value.push({
+        id: "new-layer",
+        type: 'circle',
+        layout: {},
+        paint: {}
+    });
+    open.value.add('new-layer');
+}
+</script>

package/src/components/Home.vue

@@ -0,0 +1,17 @@
+<template>
+    <CloudTAK
+        v-if='user'
+        :user='user'
+    />
+</template>
+
+<script setup lang='ts'>
+import CloudTAK from './CloudTAK/Map.vue';
+
+defineProps({
+    user: {
+        type: Object,
+        required: true
+    }
+});
+</script>

package/src/components/Loading.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class='page page-center'>
+        <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='card card-md'>
+                            <div class='card-body'>
+                                <div
+                                    class='text-center'
+                                    style='margin-bottom: 24px;'
+                                >
+                                    <img
+                                        alt='Agency Logo'
+                                        :src='brandStore.login && brandStore.login.logo ? brandStore.login.logo : "/CloudTAKLogo.svg"'
+                                        draggable='false'
+                                        style='height: 150px;'
+                                    >
+                                </div>
+                                <TablerLoading desc='Loading CloudTAK' />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import { useBrandStore } from '../stores/brand.ts';
+import { onMounted } from 'vue'
+import {
+    TablerLoading
+} from '@tak-ps/vue-tabler'
+
+const brandStore = useBrandStore();
+
+onMounted(async () => {
+    await brandStore.init();
+})
+</script>

package/src/components/Login.vue

@@ -0,0 +1,198 @@
+<template>
+    <div
+        class='page page-center cloudtak-gradient position-relative'
+        style='overflow: auto;'
+    >
+        <img
+            class='position-absolute d-none d-md-inline user-select-none'
+            draggable='false'
+            style='
+                height: 48px;
+                bottom: 24px;
+                left: 24px;
+            '
+            src='/CloudTAKLogoText.svg'
+            alt='CloudTAK Logo'
+        >
+
+        <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='card card-md'>
+                            <div
+                                v-if='!brandStore || !brandStore.loaded'
+                                class='card-body'
+                                style='height: 400px;'
+                            >
+                                <div class='col-12 d-flex justify-content-center pb-4'>
+                                    <img
+                                        class='user-select-none'
+                                        draggable='false'
+                                        style='
+                                            height: 64px;
+                                        '
+                                        src='/CloudTAKLogo.svg'
+                                        alt='CloudTAK Logo'
+                                    >
+                                </div>
+                                <div class='col-12 d-flex justify-content-center pb-4'>
+                                    <h2 class='h2 text-center mb-4'>
+                                        Loading CloudTAK
+                                    </h2>
+                                </div>
+                                <TablerLoading />
+                            </div>
+                            <div
+                                v-else
+                                class='card-body'
+                            >
+                                <div
+                                    class='text-center'
+                                    style='margin-bottom: 24px;'
+                                >
+                                    <img
+                                        :src='brandStore.login && brandStore.login.logo ? brandStore.login.logo : "/CloudTAKLogo.svg"'
+                                        style='height: 150px;'
+                                        draggable='false'
+                                        class='user-select-none'
+                                        alt='CloudTAK System Logo'
+                                    >
+                                </div>
+                                <h2 class='h2 text-center mb-4'>
+                                    Login to your account
+                                </h2>
+                                <TablerLoading
+                                    v-if='loading'
+                                    desc='Logging in'
+                                />
+                                <template v-else>
+                                    <div class='mb-3'>
+                                        <TablerInput
+                                            v-model='body.username'
+                                            icon='user'
+                                            label='Username or Email'
+                                            placeholder='your@email.com'
+                                            @keyup.enter='createLogin'
+                                        />
+                                    </div>
+                                    <div class='mb-2'>
+                                        <div class='d-flex'>
+                                            <label class='form-label mb-0'>
+                                                Password
+                                            </label>
+                                            <span class='ms-auto'>
+                                                <a
+                                                    v-if='brandStore.login && brandStore.login.forgot'
+                                                    tabindex='-1'
+                                                    class='cursor-pointer'
+                                                    :href='brandStore.login.forgot'
+                                                >Forgot Password</a>
+                                            </span>
+                                        </div>
+                                        <TablerInput
+                                            v-model='body.password'
+                                            icon='lock'
+                                            type='password'
+                                            placeholder='Your password'
+                                            @keyup.enter='createLogin'
+                                        />
+                                    </div>
+                                    <div class='form-footer'>
+                                        <button
+                                            type='submit'
+                                            class='btn btn-primary w-100'
+                                            @click='createLogin'
+                                        >
+                                            Sign In
+                                        </button>
+                                    </div>
+                                </template>
+                            </div>
+                        </div>
+                        <div
+                            v-if='brandStore.login && brandStore.login.signup'
+                            class='text-center text-muted mt-3'
+                        >
+                            Don't have an account yet?
+                            <a
+                                tabindex='-1'
+                                class='cursor-pointer'
+                                :href='brandStore.login.signup'
+                            >Sign Up</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import type { Login_Create, Login_CreateRes } from '../types.ts'
+import { ref, onMounted } from 'vue';
+import { useBrandStore } from '../stores/brand.ts';
+import { useRouter, useRoute } from 'vue-router'
+import { std } from '../std.ts';
+import {
+    TablerLoading,
+    TablerInput
+} from '@tak-ps/vue-tabler'
+
+const emit = defineEmits([ 'login' ]);
+
+const route = useRoute();
+const router = useRouter();
+const brandStore = useBrandStore();
+
+const loading = ref(false);
+const body = ref<Login_Create>({
+    username: '',
+    password: ''
+});
+
+onMounted(async () => {
+    await brandStore.init();
+
+    if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.getRegistrations().then((registrations) => {
+            for (const registration of registrations) {
+                registration.update();
+            }
+        });
+    }
+
+    const deleteDB = indexedDB.deleteDatabase('CloudTAK');
+
+    deleteDB.onerror = (event) => {
+        console.error('Failed to delete existing database', event);
+    };
+})
+
+async function createLogin() {
+    loading.value = true;
+
+    try {
+        const login = await std('/api/login', {
+            method: 'POST',
+            body: {
+                username: body.value.username,
+                password: body.value.password
+             }
+        }) as Login_CreateRes
+
+        localStorage.token = login.token;
+
+        emit('login');
+
+        if (route.query.redirect && !String(route.query.redirect).includes('/login')) {
+            router.push(String(route.query.redirect));
+        } else {
+            router.push("/");
+        }
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+</script>

package/src/components/LostUser.vue

@@ -0,0 +1,31 @@
+<template>
+    <div class='page page-center'>
+        <div class='container-tight py-4'>
+            <div class='empty'>
+                <div class='empty-header'>
+                    404
+                </div>
+                <p class='empty-title'>
+                    Oops… You just found an error page
+                </p>
+                <p class='empty-subtitle text-muted'>
+                    We are sorry but the page you are looking for was not found
+                </p>
+                <div class='empty-action'>
+                    <a
+                        class='cursor-pointer btn btn-primary'
+                        @click='router.push("/")'
+                    >
+                        Home
+                    </a>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+</script>

package/src/components/PageFooter.vue

@@ -0,0 +1,41 @@
+<template>
+    <footer class='footer footer-transparent d-print-none'>
+        <div class='container-xl'>
+            <div class='row text-center align-items-center flex-row-reverse'>
+                <div class='col-lg-auto ms-lg-auto'>
+                    <ul class='list-inline list-inline-dots mb-0'>
+                        <li class='list-inline-item'>
+                            <a
+                                href='./docs/'
+                                class='link-secondary'
+                            >Documentation</a>
+                        </li>
+                        <li class='list-inline-item'>
+                            <a
+                                href='https://github.com/dfpc-coe/CloudTAK'
+                                target='_blank'
+                                class='link-secondary'
+                                rel='noopener'
+                            >Source code</a>
+                        </li>
+                    </ul>
+                </div>
+                <div class='col-12 col-lg-auto mt-3 mt-lg-0'>
+                    <ul class='list-inline list-inline-dots mb-0'>
+                        <li class='list-inline-item'>
+                            Copyright © 2025
+                            <a
+                                href='https://www.colorado.gov/'
+                                class='link-secondary'
+                            >State of Colorado</a>
+                            - <a 
+                                href='https://github.com/dfpc-coe/CloudTAK/blob/main/LICENSE'
+                                class='link-secondary'  
+                            >AGPL-3.0 license</a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </footer>
+</template>