@tak-ps/cloudtak 12.54.0 → 12.55.0

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

@@ -1,198 +0,0 @@
-<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

@@ -1,199 +0,0 @@
-<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

@@ -1,240 +0,0 @@
-<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>