@tak-ps/cloudtak 12.54.0

package/src/components/util/IconSelect.vue

@@ -0,0 +1,302 @@
+<template>
+    <div
+        data-bs-theme='dark'
+        class='row'
+    >
+        <div class='col-12 d-flex my-1'>
+            <span
+                v-if='description'
+                class='align-self-center'
+            >
+                <IconInfoSquare
+                    :size='20'
+                    stroke='1'
+                    class='cursor-pointer'
+                    @click='help = true'
+                />
+                <TablerHelp
+                    v-if='help'
+                    :label='label || placeholder'
+                    :description='description'
+                    @click='help = false'
+                />
+            </span>
+            <div
+                class='align-self-center subheader'
+                :class='{ "required": required }'
+                v-text='label'
+            />
+            <div class='ms-auto align-self-center'>
+                <slot />
+            </div>
+        </div>
+
+        <TablerLoading
+            v-if='loading.iconset'
+            desc='Loading Iconsets'
+        />
+        <TablerNone
+            v-else-if='sets.length === 0'
+            label='Iconsets Loaded'
+            :compact='true'
+            :create='false'
+        />
+        <template v-else>
+            <div class='d-flex align-items-center'>
+                <template v-if='selected.name'>
+                    <div class='d-flex align-items-center'>
+                        <div>
+                            <img
+                                :src='selected.data'
+                                style='width: 25px; height: auto; margin-right: 5px;'
+                            >
+                        </div>
+                        <div
+                            class='mx-2'
+                            v-text='selected.name'
+                        />
+                    </div>
+                </template>
+                <template v-else>
+                    <span class='text-center my-2 mx-2'>No Icon Selected</span>
+                </template>
+
+                <div
+                    v-if='!disabled'
+                    class='btn-list ms-auto'
+                >
+                    <IconTrash
+                        v-if='selected.name'
+                        v-tooltip='"Remove Icon"'
+                        :size='32'
+                        stroke='1'
+                        class='cursor-pointer'
+                        @click='removeIcon'
+                    />
+
+                    <TablerDropdown>
+                        <template #default>
+                            <IconPhotoSearch
+                                v-tooltip='"Select Icon"'
+                                :size='32'
+                                stroke='1'
+                                class='cursor-pointer'
+                            />
+                        </template>
+                        <template #dropdown>
+                            <div
+                                class='card'
+                                style='min-width: 300px;'
+                            >
+                                <div class='card-header d-flex align-items-center'>
+                                    <h3 class='card-title'>
+                                        Icons
+                                    </h3>
+                                    <IconSearch
+                                        :size='32'
+                                        stroke='1'
+                                        class='ms-auto cursor-pointer mx-2'
+                                        :color='params.showFilter ? "#83b7e8" : "#ffffff"'
+                                        @click.stop.prevent='params.showFilter = !params.showFilter'
+                                    />
+                                </div>
+
+                                <div class='card-body row g-2'>
+                                    <div class='col-12'>
+                                        <TablerEnum
+                                            v-model='params.iconset'
+                                            :options='setsName'
+                                        />
+                                    </div>
+                                    <div class='col-12'>
+                                        <TablerInput
+                                            v-if='params.showFilter'
+                                            v-model='params.filter'
+                                            placeholder='Icon Search'
+                                        />
+                                    </div>
+                                    <TablerLoading
+                                        v-if='loading.icons'
+                                        desc='Loading Icons'
+                                    />
+                                    <div
+                                        v-else
+                                        class='row my-2'
+                                    >
+                                        <div
+                                            v-for='icon of list.items'
+                                            :key='icon.id'
+                                            class='col-auto cursor-pointer'
+                                            @click='selected = icon'
+                                        >
+                                            <img
+                                                v-tooltip='icon.name'
+                                                :src='icon.data'
+                                                style='width: 25px; height: 25px; margin-right: 5px;'
+                                            >
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </TablerDropdown>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, computed, onMounted } from 'vue';
+import { std, stdurl } from '/src/std.ts';
+import {
+    IconInfoSquare,
+    IconTrash,
+    IconSearch,
+    IconPhotoSearch
+} from '@tabler/icons-vue';
+import {
+    TablerHelp,
+    TablerEnum,
+    TablerNone,
+    TablerInput,
+    TablerDropdown,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        required: true
+    },
+    description: {
+        type: String,
+        default: ''
+    },
+    required: {
+        type: Boolean,
+        default: false
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    },
+    label: {
+        type: String,
+        default: 'Icon Select'
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const help = ref(false);
+
+const loading = ref({
+   iconsets: true,
+   icons: true
+});
+
+const params = ref({
+    iconset: '',
+    showFilter: false,
+    filter: '',
+});
+
+const selected = ref({
+    iconset: false,
+    path: '',
+    name: ''
+})
+
+const sets = ref([]);
+const list = ref({
+    total: 0,
+    items: []
+});
+
+const setsName = computed(() => {
+    return sets.value.map((set) => { return set.name });
+});
+
+watch(selected, () => {
+    if (selected.value.path.endsWith('.png')) {
+        emit('update:modelValue', selected.value.path);
+    } else {
+        // Replace any extension with PNG for sprites
+        emit('update:modelValue', selected.value.path.replace(/\.[^/.]+$/, ".png"));
+    }
+}, { deep: true })
+
+watch(params.value, async () => {
+    await Iconlists();
+});
+
+watch(props.modelValue, async () => {
+    await fetch();
+});
+
+onMounted(async () => {
+    await fetch();
+    await Iconlistsets();
+    await Iconlists();
+});
+
+function removeIcon() {
+    selected.value.path = '';
+    selected.value.iconset = false;
+    selected.value.name = '';
+}
+
+async function fetch() {
+    // This is unfortuante but the CloudTAK Map uses the MapLibre Icon format
+    // While the backend uses the TAK Icon Format
+    if (
+        props.modelValue
+        && !props.modelValue.startsWith('2525')
+        && (
+            props.modelValue.includes(":")
+            || props.modelValue.split('/').length === 3
+        )
+    ) {
+        let path = props.modelValue;
+
+        // MapLibre needs the palette name seperated by a ":" instead of a "/"
+        if (path.includes(':')) path = path.split(':').join('/') + '.png';
+
+        const iconset = path.split('/')[0];
+        const icon = path.split('/').splice(1).join('/');
+
+        selected.value = await std(`/api/iconset/${iconset}/icon/${encodeURIComponent(icon)}`);
+    }
+}
+
+async function Iconlistsets() {
+    loading.value.iconsets = true;
+    const url = stdurl('/api/iconset');
+    url.searchParams.append('limit', 50);
+    sets.value = (await std(url)).items;
+    if (sets.value.length) {
+        params.value.iconset = sets.value[0].name;
+    }
+    loading.value.iconsets = false;
+}
+
+async function Iconlists() {
+    loading.value.icons = true;
+    let url = stdurl(`/api/icon`);
+    url.searchParams.append('limit', 1000);
+    if (params.value.iconset) {
+        const id = sets.value.filter((set) => {
+            return set.name === params.value.iconset;
+        })[0];
+
+        if (id) url.searchParams.append('iconset', id.uid);
+    }
+
+    url.searchParams.append('filter', params.value.filter);
+    list.value = await std(url)
+    loading.value.icons = false;
+}
+</script>

package/src/components/util/InitialAuthor.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class='d-flex align-items-center'>
+        <div>
+            <IconUserEdit
+                class='text-gray-500'
+                :size='22'
+                stroke='1'
+            />
+        </div>
+
+        <div class='ms-2'>
+            <div class='subheader user-select-none'>
+                Author
+            </div>
+            <div v-text='props.email' />
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+import {
+    IconUserEdit
+} from '@tabler/icons-vue';
+
+const props = defineProps<{
+  email: string
+}>();
+</script>

package/src/components/util/LayerSelect.vue

@@ -0,0 +1,162 @@
+<template>
+    <div>
+        <div class='d-flex align-items-center'>
+            <label class='mx-1 mb-1'>Layer Selection</label>
+        </div>
+        <div class='card'>
+            <div class='card-body'>
+                <TablerLoading
+                    v-if='loading.main'
+                    :inline='true'
+                    desc='Loading Layers'
+                />
+                <template v-else-if='selected.id'>
+                    <div class='col-12 d-flex align-items-center'>
+                        <div v-text='selected.name' />
+                        <div class='ms-auto'>
+                            <IconTrash
+                                v-if='selected.id && list.total > 1'
+                                v-tooltip='"Remove Layer"'
+                                :size='32'
+                                stroke='1'
+                                class='cursor-pointer'
+                                @click='selected = {}'
+                            />
+                        </div>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class='mb-2'>
+                        <TablerInput
+                            v-model='paging.filter'
+                            placeholder='Layer Filter...'
+                        />
+                    </div>
+
+                    <div
+                        v-if='loading.list'
+                        class='card-body'
+                    >
+                        <TablerLoading desc='Loading Layers' />
+                    </div>
+                    <TablerNone
+                        v-else-if='list.total === 0'
+                        :create='false'
+                        :compact='true'
+                        label='Layers'
+                    />
+                    <template
+                        v-for='layer in list.items'
+                        v-else
+                    >
+                        <div
+                            class='hover px-2 py-2 cursor-pointer row rounded'
+                            @click='selected = layer'
+                        >
+                            <div class='col-md-4'>
+                                <span v-text='layer.name' />
+                            </div>
+
+                            <div
+                                class='col-md-8'
+                                v-text='layer.description'
+                            />
+                        </div>
+                    </template>
+                </template>
+            </div>
+            <div
+                v-if='list.total > paging.limit && !selected.id'
+                class='card-footer d-flex'
+            >
+                <div class='ms-auto'>
+                    <TablerPager
+                        :page='paging.page'
+                        :total='list.total'
+                        :limit='paging.limit'
+                        @page='paging.page = $event'
+                    />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { std, stdurl } from '/src/std.ts';
+import {
+    IconTrash,
+} from '@tabler/icons-vue';
+import {
+    TablerLoading,
+    TablerInput,
+    TablerPager,
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+
+const props = defineProps({
+    modelValue: {
+        type: Number,
+        default: undefined
+    },
+});
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const loading = ref({
+    main: true,
+    list: true,
+})
+
+const selected = ref({
+    id: '',
+    name: ''
+})
+
+const paging = ref({
+    filter: '',
+    limit: 10,
+    page: 0
+});
+
+const list = ref({
+    total: 0,
+    items: []
+});
+
+watch(selected, async () => {
+    emit('update:modelValue', selected.value.id);
+}, { deep: true });
+
+watch(props.modelValue, async () => {
+    await fetch();
+});
+
+watch(paging.value, async () => {
+    await listData();
+});
+
+onMounted(async () => {
+    if (props.modelValue) await fetch();
+    await listData();
+    loading.value.main = false;
+});
+
+async function fetch() {
+    selected.value = await std(`/api/layer/${props.modelValue}`);
+}
+
+async function listData() {
+    loading.value.list = true;
+    const url = stdurl('/api/layer');
+    url.searchParams.append('filter', paging.value.filter);
+    url.searchParams.append('limit', paging.value.limit);
+    url.searchParams.append('page', paging.value.page);
+    list.value = await std(url);
+
+    loading.value.list = false;
+}
+</script>