@tak-ps/cloudtak 12.54.0

package/src/components/CloudTAK/Menu/MenuIcon.vue

@@ -0,0 +1,236 @@
+<template>
+    <MenuTemplate name='Icon'>
+        <template #buttons>
+            <div class='d-flex align-items-center gap-2'>
+                <TablerDelete
+                    v-if='(iconset.username || isSystemAdmin) && disabled'
+                    displaytype='icon'
+                    @delete='deleteIcon'
+                />
+
+                <TablerIconButton
+                    v-if='(iconset.username || isSystemAdmin) && disabled'
+                    title='Edit'
+                    @click='disabled = false'
+                >
+                    <IconPencil
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+        </template>
+        <template #default>
+            <TablerLoading v-if='loading' />
+            <template v-else>
+                <div
+                    v-if='disabled === false'
+                    class='row mx-0 gap-4'
+                >
+                    <div class='col-12'>
+                        <TablerInput
+                            v-model='icon.name'
+                            label='Name'
+                        />
+                    </div>
+
+                    <div class='col-12'>
+                        <UploadLogo
+                            v-model='icon.data'
+                            label='Icon Data'
+                            @file-name='updateName'
+                        />
+                    </div>
+
+                    <div class='col-12'>
+                        <TablerInput
+                            v-model='icon.type2525b'
+                            label='2525B Type'
+                        />
+                    </div>
+
+                    <div class='d-flex'>
+                        <div class='ms-auto d-flex gap-2'>
+                            <div
+                                v-if='icon.id'
+                                class='btn btn-secondary'
+                                @click='refresh'
+                            >
+                                Cancel
+                            </div>
+                            <div
+                                class='btn btn-primary'
+                                @click='submit'
+                            >
+                                Submit
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div
+                    v-else
+                    class='container-fluid px-2 px-sm-3 py-4'
+                >
+                    <div class='row gy-3 gx-0 gx-lg-3'>
+                        <div class='col-12'>
+                            <div class='card h-100 bg-dark text-white border border-light-subtle shadow-sm'>
+                                <div class='card-body d-flex flex-column gap-4'>
+                                    <div class='d-flex align-items-center gap-3'>
+                                        <div class='rounded bg-white p-1 d-flex align-items-center justify-content-center'>
+                                            <img
+                                                :src='icon.data'
+                                                width='32'
+                                                height='32'
+                                                style='object-fit: contain;'
+                                            >
+                                        </div>
+                                        <div class='flex-grow-1'>
+                                            <p class='text-uppercase text-white-50 small mb-1'>
+                                                Icon
+                                            </p>
+                                            <h2
+                                                class='h4 mb-0 text-break'
+                                                v-text='icon.name'
+                                            />
+                                        </div>
+                                    </div>
+
+                                    <div class='row gy-3 gx-0 gx-sm-3'>
+                                        <div class='col-12'>
+                                            <small class='text-uppercase text-white-50 d-block mb-1'>Iconset</small>
+                                            <p
+                                                class='text-start text-blue fw-semibold cursor-pointer p-0 text-decoration-none'
+                                                @click='router.push(`/menu/iconset/${icon.iconset}`)'
+                                                v-text='iconset.name'
+                                            />
+                                        </div>
+                                        <div class='col-12'>
+                                            <small class='text-uppercase text-white-50 d-block mb-1'>Type 2525b</small>
+                                            <p
+                                                class='text-start text-white fw-semibold p-0 text-decoration-none'
+                                                v-text='icon.type2525b || "None"'
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { std, stdurl } from '../../../std.ts';
+import { useMapStore } from '../../../stores/map.ts';
+import IconManager from '../../../stores/modules/icons.ts';
+import {
+    TablerDelete,
+    TablerLoading,
+    TablerIconButton,
+    TablerInput
+} from '@tak-ps/vue-tabler';
+import {
+    IconPencil,
+} from '@tabler/icons-vue';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import UploadLogo from '../../util/UploadLogo.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const mapStore = useMapStore();
+
+const loading = ref(true);
+const isSystemAdmin = ref(false);
+
+const disabled = ref(true);
+
+const iconset = ref({});
+const icon = ref({
+    id: false
+});
+
+onMounted(async () => {
+    isSystemAdmin.value = await mapStore.worker.profile.isSystemAdmin();
+    await refresh();
+});
+
+async function refresh() {
+    loading.value = true;
+
+    await fetchIconset();
+
+    if (route.params.icon !== 'new') {
+        disabled.value = true;
+        await fetch();
+    } else {
+        disabled.value = false;
+    }
+
+    loading.value = false;
+}
+
+async function submit() {
+    if (icon.value.id) {
+        const url = await stdurl(`/api/iconset/${route.params.iconset}/icon/${icon.value.id}`);
+
+        icon.value = await std(url, {
+            method: 'PATCH',
+            body: icon.value
+        });
+    } else {
+        const url = await stdurl(`/api/iconset/${route.params.iconset}/icon`);
+
+        icon.value = await std(url, {
+            method: 'POST',
+            body: icon.value
+        });
+
+        router.push(`/menu/iconset/${route.params.iconset}/${icon.value.id}`);
+    }
+
+    disabled.value = true;
+    await refresh();
+}
+
+async function fetch() {
+    const url = stdurl(`/api/iconset/${route.params.iconset}/icon/${route.params.icon}`);
+    const res = await std(url);
+
+    if (res.name.endsWith('.svg') && !res.data.startsWith('data:image/svg+xml;base64,')) {
+        res.data = `data:image/svg+xml;base64,${res.data}`;
+    } else if (res.name.endsWith('.png') && !res.data.startsWith('data:image/png;base64,')) {
+        res.data = `data:image/png;base64,${res.data}`;
+    }
+
+    icon.value = res;
+}
+
+async function fetchIconset() {
+    const is = await IconManager.from(route.params.iconset);
+    if (is) {
+        iconset.value = is;
+    } else {
+        const url = stdurl(`/api/iconset/${route.params.iconset}`);
+        iconset.value = await std(url);
+    }
+}
+
+async function deleteIcon() {
+    loading.value = true;
+    const url = stdurl(`/api/iconset/${route.params.iconset}/icon/${route.params.icon}`);
+    iconset.value = await std(url, {
+        method: 'DELETE'
+    });
+    router.push(`/menu/iconset/${route.params.iconset}`);
+}
+
+function updateName(name) {
+    icon.value.name = name;
+}
+</script>

package/src/components/CloudTAK/Menu/MenuIconset.vue

@@ -0,0 +1,128 @@
+<template>
+    <MenuTemplate :name='iconset.name'>
+        <template #buttons>
+            <TablerIconButton
+                v-if='iconset.username || isSystemAdmin'
+                title='Create Icon'
+                @click='router.push(`/menu/iconset/${iconset.uid}/new`)'
+            >
+                <IconPlus
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+
+            <TablerIconButton
+                v-if='iconset.username || isSystemAdmin'
+                title='Settings'
+                @click='editIconsetModal = iconset'
+            >
+                <IconSettings
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+
+            <TablerIconButton
+                title='Download TAK Zip'
+                @click.stop='download'
+            >
+                <IconDownload
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+
+            <TablerDelete
+                v-if='iconset.username || isSystemAdmin'
+                displaytype='icon'
+                @delete='deleteIconset'
+            />
+        </template>
+        <template #default>
+            <TablerLoading v-if='loading' />
+            <div
+                v-else
+                class='col-lg-12'
+            >
+                <CombinedIcons
+                    v-if='!loading'
+                    :iconset='iconset.uid'
+                    :labels='false'
+                />
+            </div>
+        </template>
+    </MenuTemplate>
+
+    <IconsetEditModal
+        v-if='editIconsetModal'
+        :icon='editIconsetModal'
+        @close='refresh'
+    />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { std, stdurl } from '/src/std.ts';
+import CombinedIcons from '../util/Icons.vue'
+import {
+    TablerDelete,
+    TablerLoading,
+    TablerIconButton,
+} from '@tak-ps/vue-tabler';
+import {
+    IconPlus,
+    IconSettings,
+    IconDownload,
+} from '@tabler/icons-vue';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import IconsetEditModal from './Iconset/EditModal.vue';
+import { useMapStore } from '/src/stores/map.ts';
+
+const route = useRoute();
+const router = useRouter();
+const mapStore = useMapStore();
+
+const loading = ref(true);
+const editIconsetModal = ref(false);
+const isSystemAdmin = ref(false);
+const iconset = ref({
+    uid: ''
+});
+
+onMounted(async () => {
+    await refresh();
+    isSystemAdmin.value = await mapStore.worker.profile.isSystemAdmin();
+});
+
+async function refresh() {
+    loading.value = true;
+    editIconsetModal.value = false;
+    await fetchIconset();
+    loading.value = false;
+}
+
+async function download() {
+    await std(`/api/iconset/${iconset.value.uid}?format=zip&download=true&token=${localStorage.token}`, {
+        download: true
+    });
+}
+
+async function fetchIconset() {
+    loading.value = true;
+    const url = stdurl(`/api/iconset/${route.params.iconset}`);
+    iconset.value = await std(url);
+    loading.value = false;
+}
+
+async function deleteIconset() {
+    loading.value = true;
+    const url = stdurl(`/api/iconset/${route.params.iconset}`);
+    iconset.value = await std(url, {
+        method: 'DELETE'
+    });
+
+    router.push('/menu/iconsets');
+}
+</script>

package/src/components/CloudTAK/Menu/MenuIconsets.vue

@@ -0,0 +1,266 @@
+<template>
+    <MenuTemplate name='Iconsets'>
+        <template #buttons>
+            <TablerIconButton
+                title='Create Iconset'
+                @click='editModal = {}'
+            >
+                <IconPlus
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+
+            <TablerIconButton
+                v-if='!upload'
+                title='Zip Upload'
+                @click='upload = true'
+            >
+                <IconFileUpload
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+
+            <TablerRefreshButton
+                :loading='loading'
+                @click='fetchList'
+            />
+        </template>
+        <template #default>
+            <template v-if='upload'>
+                <div class='mx-4 my-4'>
+                    <Upload
+                        method='PUT'
+                        :url='stdurl(`/api/import`)'
+                        :headers='uploadHeaders()'
+                        @done='processUpload($event)'
+                        @cancel='upload = false'
+                        @err='throws($event)'
+                    />
+                </div>
+            </template>
+            <template v-else>
+                <div
+                    class='px-2 py-2 round btn-group w-100'
+                    role='group'
+                >
+                    <input
+                        id='iconsets'
+                        type='radio'
+                        class='btn-check'
+                        autocomplete='off'
+                        :checked='mode === "iconsets"'
+                        @click='mode = "iconsets"'
+                    >
+                    <label
+                        for='iconsets'
+                        type='button'
+                        class='btn btn-sm'
+                    ><IconAlbum
+                        v-tooltip='"Iconsets"'
+                        :size='32'
+                        stroke='1'
+                    /></label>
+
+                    <input
+                        id='icons'
+                        type='radio'
+                        class='btn-check'
+                        autocomplete='off'
+                        :checked='mode === "icons"'
+                        @click='mode = "icons"'
+                    >
+                    <label
+                        for='icons'
+                        type='button'
+                        class='btn btn-sm'
+                    ><IconPhoto
+                        v-tooltip='"Icons"'
+                        :size='32'
+                        stroke='1'
+                    /></label>
+                </div>
+
+                <template v-if='mode === "iconsets"'>
+                    <div class='px-3 pt-3'>
+                        <TablerInput
+                            v-model='paging.filter'
+                            icon='search'
+                            placeholder='Filter'
+                        />
+                    </div>
+
+                    <TablerLoading
+                        v-if='loading'
+                        desc='Loading Iconsets'
+                    />
+                    <TablerAlert
+                        v-else-if='error'
+                        :err='error'
+                    />
+                    <TablerNone
+                        v-else-if='!list.items.length'
+                        label='Iconsets'
+                        :create='false'
+                    />
+                    <div class='col-12 d-flex flex-column gap-2 p-3'>
+                        <StandardItem
+                            v-for='iconset in list.items'
+                            :key='iconset.uid'
+                            @click='router.push(`/menu/iconset/${iconset.uid}`)'
+                        >
+                            <div class='d-flex align-items-center px-2 py-2'>
+                                <IconAlbum
+                                    :size='32'
+                                    stroke='1'
+                                />
+                                <div
+                                    class='ms-2 flex-grow-1 fw-bold text-truncate'
+                                    style='min-width: 0'
+                                >
+                                    {{ iconset.name }}
+                                </div>
+
+                                <div class='d-flex align-items-center flex-shrink-0'>
+                                    <span
+                                        v-if='!iconset.username'
+                                        class='mx-3 badge border bg-blue text-white'
+                                    >Public</span>
+                                    <span
+                                        v-else
+                                        class='mx-3 badge border bg-red text-white'
+                                    >Private</span>
+                                    <TablerIconButton
+                                        title='Download TAK Zip'
+                                        @click.stop='download(iconset)'
+                                    >
+                                        <IconDownload
+                                            :size='32'
+                                            stroke='1'
+                                        />
+                                    </TablerIconButton>
+                                </div>
+                            </div>
+                        </StandardItem>
+                    </div>
+                    <div class='col-lg-12 d-flex'>
+                        <div class='ms-auto'>
+                            <TablerPager
+                                v-if='list.total > paging.limit'
+                                :page='paging.page'
+                                :total='list.total'
+                                :limit='paging.limit'
+                                @page='paging.page = $event'
+                            />
+                        </div>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class='col-lg-12'>
+                        <IconCombineds
+                            v-if='list.items.length'
+                            :labels='false'
+                        />
+                    </div>
+                </template>
+            </template>
+        </template>
+    </MenuTemplate>
+
+    <IconsetEditModal
+        v-if='editModal'
+        @close='editModal = false'
+    />
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import StandardItem from '../util/StandardItem.vue';
+import { std, stdurl } from '../../../std.ts';
+import Upload from '../../util/Upload.vue';
+import IconCombineds from '../util/Icons.vue'
+import IconsetEditModal from './Iconset/EditModal.vue';
+import {
+    TablerNone,
+    TablerPager,
+    TablerInput,
+    TablerAlert,
+    TablerLoading,
+    TablerIconButton,
+    TablerRefreshButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconDownload,
+    IconFileUpload,
+    IconAlbum,
+    IconPhoto,
+    IconPlus
+} from '@tabler/icons-vue'
+
+const router = useRouter();
+const mode = ref('iconsets');
+
+const error = ref();
+const loading = ref(true)
+const upload = ref(false);
+const editModal = ref(false);
+
+const paging = ref({
+    limit: 20,
+    filter: '',
+    page: 0
+});
+
+const list = ref({
+    total: 0,
+    items: []
+});
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+onMounted(async () => {
+    await fetchList();
+});
+
+function throws(err) {
+    throw err;
+}
+
+function processUpload(body) {
+    router.push(`/menu/imports/${body.imports[0].uid}`);
+}
+
+function uploadHeaders() {
+    return {
+        Authorization: `Bearer ${localStorage.token}`
+    };
+}
+
+async function download(iconset) {
+    await std(`/api/iconset/${iconset.uid}?format=zip&download=true&token=${localStorage.token}`, {
+        download: true
+    });
+}
+
+async function fetchList() {
+    loading.value = true;
+    error.value = undefined;
+
+    try {
+        const url = stdurl('/api/iconset');
+        url.searchParams.append('page', paging.value.page);
+        url.searchParams.append('filter', paging.value.filter);
+        url.searchParams.append('limit', paging.value.limit);
+        list.value = await std(url);
+        loading.value = false;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+        loading.value = false;
+    }
+}
+</script>