@tak-ps/cloudtak 12.54.0

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

@@ -0,0 +1,198 @@
+<template>
+    <MenuTemplate name='Import'>
+        <template #buttons>
+            <TablerDelete
+                v-if='imported && (imported.status === "Fail" || imported.status === "Success")'
+                displaytype='icon'
+                @delete='deleteImport'
+            />
+            <TablerIconButton
+                title='Download File'
+                @click='downloadImport'
+            >
+                <IconDownload
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+            <TablerRefreshButton
+                :loading='loading.initial'
+                @click='fetch(true)'
+            />
+        </template>
+        <template #default>
+            <TablerLoading v-if='!imported || loading.initial' />
+            <TablerAlert
+                v-else-if='error'
+                title='Import Error'
+                :err='error'
+            />
+            <div
+                v-else
+                class='mx-4 my-4'
+            >
+                <div class='datagrid'>
+                    <div class='datagrid-item'>
+                        <div class='datagrid-title'>
+                            Import Name
+                        </div>
+                        <div class='datagrid-content d-flex align-items-center'>
+                            <Status
+                                :dark='true'
+                                :status='imported.status'
+                            /><span
+                                class='mx-2 text-break'
+                                v-text='imported.name'
+                            />
+                        </div>
+                    </div>
+                    <div class='datagrid-item'>
+                        <div class='datagrid-title'>
+                            Import Type
+                        </div>
+                        <div
+                            class='datagrid-content'
+                            v-text='imported.source + ": " + imported.source_id'
+                        />
+                    </div>
+                </div>
+                <div class='py-2'>
+                    <TablerNone
+                        v-if='imported.status === "Empty"'
+                        :create='false'
+                    />
+                    <template v-else-if='loading.run'>
+                        <TablerLoading
+                            v-if='loading.run'
+                            desc='Running Import'
+                        />
+                    </template>
+                    <template v-else-if='imported.status === "Fail"'>
+                        <div class='datagrid-item'>
+                            <div class='datagrid-title'>
+                                Import Error
+                            </div>
+                            <div
+                                class='datagrid-content'
+                                v-text='imported.error'
+                            />
+                        </div>
+                    </template>
+                </div>
+                <div class='datagrid d-flex'>
+                    <div class='datagrid-item'>
+                        <div class='datagrid-title'>
+                            Created
+                        </div>
+                        <div
+                            class='datagrid-content'
+                            v-text='timeDiff(imported.created)'
+                        />
+                    </div>
+                    <div class='datagrid-item ms-auto'>
+                        <div class='datagrid-title'>
+                            Updated
+                        </div>
+                        <div
+                            class='datagrid-content'
+                            v-text='timeDiff(imported.updated)'
+                        />
+                    </div>
+                </div>
+            </div>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { std, stdurl } from '../../../../src/std.ts';
+import type { Import } from '../../../../src/types.ts';
+import Status from '../../util/StatusDot.vue';
+import timeDiff from '../../../timediff.ts';
+import {
+    TablerNone,
+    TablerAlert,
+    TablerDelete,
+    TablerLoading,
+    TablerIconButton,
+    TablerRefreshButton
+} from '@tak-ps/vue-tabler';
+import {
+    IconDownload
+} from '@tabler/icons-vue';
+
+import MenuTemplate from '../util/MenuTemplate.vue';
+
+const route = useRoute();
+const router = useRouter();
+
+const error = ref<Error | undefined>()
+const loading = ref({
+    main: true,
+    initial: true,
+    run: true
+});
+const interval = ref<ReturnType<typeof setInterval>>();
+const imported = ref<Import | undefined>();
+
+onMounted(async () => {
+    await fetch(true);
+
+    interval.value = setInterval(async () => {
+        await fetch()
+    }, 2000);
+});
+
+onUnmounted(() => {
+    if (interval.value) {
+        clearInterval(interval.value);
+    }
+});
+
+async function downloadImport() {
+    const url = stdurl(`/api/import/${route.params.import}/raw`)
+    url.searchParams.append('token', localStorage.token);
+    url.searchParams.append('download', String(true));
+    await std(url, {
+        download: true
+    })
+}
+
+async function deleteImport() {
+    loading.value.initial = true;
+
+    try {
+        const url = stdurl(`/api/import/${route.params.import}`);
+
+        await std(url, {
+            method: 'DELETE'
+        });
+
+        router.push('/menu/imports');
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value.initial = false;
+}
+
+async function fetch(init = false) {
+    if (init) loading.value.initial = true;
+
+    try {
+        const url = stdurl(`/api/import/${route.params.import}`);
+        imported.value = await std(url) as Import;
+
+        if (imported.value && (imported.value.status === 'Fail' || imported.value.status === 'Success')) {
+            if (interval.value) clearInterval(interval.value);
+            loading.value.run = false;
+        }
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value.initial = false;
+}
+</script>

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

@@ -0,0 +1,199 @@
+<template>
+    <MenuTemplate name='Data Imports'>
+        <template #buttons>
+            <TablerIconButton
+                v-if='!loading && !upload'
+                title='New Import'
+                @click='upload = true'
+            >
+                <IconUpload
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+            <TablerRefreshButton
+                :loading='loading'
+                @click='fetchList'
+            />
+        </template>
+        <template #default>
+            <div
+                v-if='upload'
+                class='py-2 px-4'
+            >
+                <Upload
+                    :url='stdurl(`/api/import`)'
+                    :headers='uploadHeaders()'
+                    method='PUT'
+                    @cancel='upload = false'
+                    @done='uploadComplete($event)'
+                />
+            </div>
+
+            <div class='col-12 px-2 py-2'>
+                <TablerInput
+                    v-model='paging.filter'
+                    icon='search'
+                    placeholder='Filter'
+                />
+            </div>
+
+            <TablerLoading v-if='loading' />
+            <TablerAlert
+                v-else-if='error'
+                title='Imports Error'
+                :err='error'
+            />
+            <TablerNone
+                v-else-if='!list.items.length'
+                label='Imports'
+                :create='false'
+            />
+            <template v-else>
+                <div
+                    v-for='imported in list.items'
+                    :key='imported.id'
+                    class='col-12 px-2 py-1'
+                >
+                    <StandardItem
+                        class='d-flex align-items-center py-2 px-3'
+                        @click='router.push(`/menu/imports/${imported.id}`)'
+                    >
+                        <div class='col-auto'>
+                            <Status
+                                :dark='true'
+                                :status='imported.status'
+                            />
+                        </div>
+                        <div
+                            v-tooltip='`${imported.source} Import`'
+                            class='col-auto mx-2'
+                        >
+                            <IconAmbulance
+                                v-if='imported.source === "Mission"'
+                                :size='32'
+                                stroke='0.5'
+                            />
+                            <IconPackages
+                                v-else-if='imported.source === "Package"'
+                                :size='32'
+                                stroke='0.5'
+                            />
+                            <IconFile
+                                v-else
+                                :size='32'
+                                stroke='0.5'
+                            />
+                        </div>
+                        <div
+                            class='mx-2 col d-flex flex-column'
+                        >
+                            <div
+                                class='text-break'
+                                v-text='imported.name'
+                            />
+                            <div
+                                class='subheader'
+                                v-text='timeDiff(imported.created)'
+                            />
+                        </div>
+                    </StandardItem>
+                </div>
+            </template>
+
+            <div class='px-2 py-2 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>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, watch, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import type { ImportList } from '../../../../src/types.ts';
+import { std, stdurl } from '../../../../src/std.ts';
+import {
+    TablerNone,
+    TablerInput,
+    TablerAlert,
+    TablerIconButton,
+    TablerRefreshButton,
+    TablerPager,
+    TablerLoading
+} from '@tak-ps/vue-tabler';
+import {
+    IconUpload,
+    IconFile,
+    IconAmbulance,
+    IconPackages,
+} from '@tabler/icons-vue';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import StandardItem from '../util/StandardItem.vue';
+import Status from '../../util/StatusDot.vue';
+import timeDiff from '../../../timediff.ts';
+import Upload from '../../util/Upload.vue';
+
+const router = useRouter();
+const upload = ref(false)
+const error = ref<Error | undefined>();
+const loading = ref(true);
+
+const paging = ref({
+    filter: '',
+    limit: 20,
+    page: 0
+});
+
+const list = ref<ImportList>({
+    total: 0,
+    items: []
+});
+
+watch(paging.value, async function() {
+    await fetchList()
+});
+
+onMounted(async () => {
+    await fetchList();
+});
+
+function uploadHeaders() {
+    return {
+        Authorization: `Bearer ${localStorage.token}`
+    };
+}
+
+function uploadComplete(event: unknown) {
+    upload.value = false;
+    const imp = event as { imports: Array<{ uid: string }> };
+    router.push(`/menu/imports/${imp.imports[0].uid}`)
+}
+
+async function fetchList() {
+    loading.value = true;
+    error.value = undefined;
+
+    try {
+        const url = stdurl('/api/import');
+        url.searchParams.append('order', 'desc');
+        url.searchParams.append('page', String(paging.value.page));
+        url.searchParams.append('limit', String(paging.value.limit));
+        url.searchParams.append('filter', paging.value.filter);
+        url.searchParams.append('sort', 'created');
+        list.value = await std(url) as ImportList;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err))
+    }
+
+    loading.value = false;
+}
+</script>

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

@@ -0,0 +1,240 @@
+<template>
+    <component
+        :is='compact ? &apos;div&apos; : StandardItem'
+        :class='classes'
+        role='menuitem'
+        tabindex='0'
+        @click='$emit("select")'
+        @keyup.enter='$emit("select")'
+    >
+        <div class='menu-item-card__icon-wrapper'>
+            <component
+                :is='icon'
+                v-if='icon'
+                v-tooltip='tooltipBinding'
+                :title='tooltip'
+                :size='iconSize'
+                :color='iconColor'
+                stroke='1'
+                class='menu-item-card__icon'
+            />
+            <span
+                v-if='layout === "tiles" && badge'
+                class='menu-item-card__badge menu-item-card__badge--tile-icon'
+            >{{ badge }}</span>
+        </div>
+
+        <span
+            v-if='compact && badge'
+            class='menu-item-card__badge menu-item-card__badge--compact'
+        >{{ badge }}</span>
+
+        <template v-if='!compact'>
+            <template v-if='layout === "tiles"'>
+                <div class='menu-item-card__body menu-item-card__body--tile'>
+                    <div class='menu-item-card__label'>
+                        {{ label }}
+                    </div>
+                    <div
+                        v-if='description'
+                        class='menu-item-card__description'
+                        :class='descriptionClass'
+                    >
+                        {{ description }}
+                    </div>
+                </div>
+            </template>
+            <template v-else-if='compact'>
+                <span class='menu-item-card__label menu-item-card__label--compact'>{{ label }}</span>
+            </template>
+            <template v-else>
+                <div class='menu-item-card__body'>
+                    <div class='menu-item-card__label'>
+                        {{ label }}
+                    </div>
+                    <div
+                        v-if='description'
+                        class='menu-item-card__description'
+                        :class='descriptionClass'
+                    >
+                        {{ description }}
+                    </div>
+                </div>
+                <span
+                    v-if='badge'
+                    class='menu-item-card__badge menu-item-card__badge--admin ms-auto'
+                >{{ badge }}</span>
+                <div
+                    v-if='$slots.default'
+                    class='ms-auto'
+                >
+                    <slot />
+                </div>
+            </template>
+        </template>
+    </component>
+</template>
+
+<script setup lang='ts'>
+import { computed } from 'vue';
+import type { Component, PropType } from 'vue';
+import StandardItem from '../util/StandardItem.vue';
+
+defineEmits(['select']);
+
+type LayoutVariant = 'list' | 'tiles';
+
+const props = defineProps({
+    icon: {
+        type: Function as unknown as PropType<Component>,
+        required: true
+    },
+    iconColor: {
+        type: String,
+        default: undefined
+    },
+    label: {
+        type: String,
+        required: true
+    },
+    description: {
+        type: String,
+        default: ''
+    },
+    descriptionClass: {
+        type: String,
+        default: ''
+    },
+    tooltip: {
+        type: String,
+        default: ''
+    },
+    badge: {
+        type: String,
+        default: ''
+    },
+    layout: {
+        type: String as PropType<LayoutVariant>,
+        default: 'list'
+    },
+    compact: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const classes = computed(() => ({
+    'menu-item-card': true,
+    [`menu-item-card--${props.layout}`]: true,
+    'menu-item-card--compact position-relative hover-button': props.compact,
+}));
+
+const iconSize = computed(() => props.layout === 'tiles' ? 36 : 32);
+const tooltipBinding = computed(() => props.tooltip ? { content: props.tooltip, placement: 'left' } : undefined);
+</script>
+
+<style scoped>
+.menu-item-card {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    color: #fff;
+    cursor: pointer;
+    user-select: none;
+}
+
+.menu-item-card--list:not(.menu-item-card--compact) {
+    padding: 0.85rem 1rem;
+}
+
+.menu-item-card--tiles {
+    flex-direction: column;
+    text-align: center;
+    padding: 1rem;
+}
+
+.menu-item-card--compact {
+    padding: 0.5rem 0.75rem;
+}
+
+.menu-item-card__icon-wrapper {
+    position: relative;
+    display: flex;
+    flex-shrink: 0;
+}
+
+.menu-item-card__badge--tile-icon {
+    position: absolute;
+    top: -4px;
+    right: -6px;
+    min-width: 16px;
+    height: 16px;
+    border-radius: 999px;
+    font-size: 10px;
+    background: #228be6;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 3px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+}
+
+.menu-item-card__icon {
+    flex-shrink: 0;
+}
+
+.menu-item-card__body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+}
+
+.menu-item-card__body--tile {
+    align-items: center;
+}
+
+.menu-item-card__label {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.menu-item-card__label--compact {
+    font-size: 0.95rem;
+}
+
+.menu-item-card__description {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.78);
+}
+
+.menu-item-card__badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    padding: 0.1rem 0.45rem;
+    border-radius: 999px;
+}
+
+
+
+.menu-item-card__badge--admin {
+    border: 1px solid rgba(99, 137, 255, 0.9);
+    background-color: rgba(99, 137, 255, 0.25);
+    color: #fff;
+}
+
+.menu-item-card__badge--compact {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    min-width: 14px;
+    height: 14px;
+    border-radius: 14px;
+    font-size: 10px;
+    background: #228be6;
+    color: white;
+    padding: 0 3px;
+}
+</style>