@tak-ps/cloudtak 12.54.0

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

@@ -0,0 +1,340 @@
+<template>
+    <MenuTemplate name='Package'>
+        <template #buttons>
+            <div class='d-flex align-items-center gap-2'>
+                <TablerDelete
+                    v-if='pkg && (profile && (profile.username === pkg.username || profile.system_admin))'
+                    displaytype='icon'
+                    @delete='deleteFile(pkg)'
+                />
+                <TablerIconButton
+                    v-if='pkg && !loading && !error'
+                    :title='"Download Asset"'
+                    @click='downloadFile'
+                >
+                    <IconDownload
+                        :size='32'
+                        stroke='1'
+                    />
+                </TablerIconButton>
+            </div>
+        </template>
+        <template #default>
+            <TablerAlert
+                v-if='error'
+                :err='error'
+            />
+            <TablerLoading v-else-if='loading || !pkg || !profile' />
+            <template v-else-if='mode === "share" && shareFeat'>
+                <div class='container-fluid px-2 px-sm-3 py-4'>
+                    <div class='card border border-light-subtle bg-dark text-white shadow-sm'>
+                        <div class='card-header d-flex align-items-center gap-2'>
+                            <IconShare2
+                                :size='20'
+                                stroke='1'
+                            />
+                            <span class='fw-semibold text-uppercase small'>Share Package</span>
+                            <button
+                                type='button'
+                                class='btn-close btn-close-white ms-auto'
+                                aria-label='Close share panel'
+                                @click='mode = "default"'
+                            />
+                        </div>
+                        <div class='card-body bg-black bg-opacity-25 rounded-bottom'>
+                            <Share
+                                :feats='[shareFeat]'
+                                @done='mode = "default"'
+                                @close='mode = "default"'
+                            />
+                        </div>
+                    </div>
+                </div>
+            </template>
+            <template v-else>
+                <div 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-circle bg-primary-subtle text-primary-emphasis p-1 d-flex align-items-center justify-content-center'>
+                                            <IconPackage
+                                                :size='32'
+                                                stroke='1'
+                                            />
+                                        </div>
+                                        <div class='flex-grow-1'>
+                                            <p class='text-uppercase text-white-50 small mb-1'>
+                                                Package
+                                            </p>
+                                            <h2
+                                                class='h4 mb-0 text-break'
+                                                v-text='pkg.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'>Created By</small>
+                                            <p
+                                                class='text-start text-white fw-semibold p-0 text-decoration-none'
+                                                v-text='pkg.username'
+                                            />
+                                        </div>
+                                        <div class='col-12 col-lg-6'>
+                                            <small class='text-uppercase text-white-50 d-block'>Created</small>
+                                            <button
+                                                type='button'
+                                                class='btn btn-link text-start text-white fw-semibold p-0 text-decoration-none'
+                                                @click='relative = !relative'
+                                            >
+                                                {{ relative ? timeDiff(pkg.created) : pkg.created }}
+                                            </button>
+                                        </div>
+                                        <div class='col-12'>
+                                            <small class='text-uppercase text-white-50 d-block mb-1'>Package Hash</small>
+                                            <p
+                                                class='fs-6 fw-semibold text-white mb-0 text-break'
+                                                v-text='pkg.hash || "—"'
+                                            />
+                                        </div>
+                                        <div class='col-12'>
+                                            <small class='text-uppercase text-white-50 d-block mb-1'>Size</small>
+                                            <p class='fs-6 text-white mb-0'>
+                                                {{ packageSize }}
+                                            </p>
+                                        </div>
+                                        <div class='col-12'>
+                                            <small class='text-uppercase text-white-50 d-block mb-2'>Hashtags</small>
+                                            <Keywords :keywords='pkg.keywords' />
+                                            <p
+                                                v-if='!pkg.keywords || !pkg.keywords.length'
+                                                class='text-white-50 mb-0'
+                                            >
+                                                No hashtags provided
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <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-3'>
+                                    <p class='text-uppercase text-white-50 small mb-1'>
+                                        Quick Actions
+                                    </p>
+                                    <button
+                                        class='btn btn-primary w-100 d-flex align-items-center justify-content-center gap-2'
+                                        @click='createImport'
+                                    >
+                                        <IconFileImport
+                                            :size='20'
+                                            stroke='1'
+                                        />
+                                        <span>Import Package</span>
+                                    </button>
+                                    <button
+                                        class='btn btn-outline-light w-100 d-flex align-items-center justify-content-center gap-2'
+                                        :disabled='!shareFeat'
+                                        @click='mode = "share"'
+                                    >
+                                        <IconShare2
+                                            :size='20'
+                                            stroke='1'
+                                        />
+                                        <span>Share Package</span>
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+import type { Profile, Server, Package, Feature } from '../../../../src/types.ts';
+import { server, stdurl, std } from '../../../std.ts';
+import Share from '../util/Share.vue';
+import Keywords from '../util/Keywords.vue';
+import timeDiff from '../../../timediff.ts';
+import {
+    TablerAlert,
+    TablerDelete,
+    TablerLoading,
+    TablerIconButton
+} from '@tak-ps/vue-tabler';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import {
+    IconShare2,
+    IconDownload,
+    IconFileImport,
+    IconPackage
+} from '@tabler/icons-vue';
+import { useMapStore } from '../../../stores/map.ts';
+
+const route = useRoute();
+const router = useRouter();
+const mapStore = useMapStore();
+
+const relative = ref(true);
+const loading = ref(true);
+const error = ref<Error | undefined>()
+const mode = ref('default');
+const serverConfig = ref<Server | undefined>();
+const pkg = ref<Package | undefined>();
+
+watch(route, async () => {
+    await fetch();
+});
+
+const profile = ref<Profile | undefined>(undefined);
+
+const shareFeat = computed<Feature | undefined>(() => {
+    if (!profile.value || !pkg.value || !serverConfig.value) return;
+
+    return {
+        type: 'Feature',
+        properties: {
+            type: 'b-f-t-r',
+            how: 'h-e',
+            fileshare: {
+                filename: pkg.value.name + '.zip',
+                senderUrl: `${serverConfig.value.api}/Marti/sync/content?hash=${pkg.value.hash}`,
+                sizeInBytes: pkg.value.size,
+                sha256: pkg.value.hash,
+                senderUid: `ANDROID-CloudTAK-${profile.value.username}`,
+                senderCallsign: profile.value.tak_callsign,
+                name: pkg.value.name
+            },
+            metadata: {},
+        },
+        geometry: {
+            type: 'Point',
+            coordinates: [0, 0, 0]
+        }
+    } as Feature;
+});
+
+const packageSize = computed(() => {
+    if (!pkg.value?.size) return '—';
+
+    const bytes = Number(pkg.value.size);
+    if (!Number.isFinite(bytes) || bytes < 0) return `${pkg.value.size} B`;
+
+    return formatBytes(bytes);
+});
+
+function formatBytes(bytes: number): string {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+    let value = bytes;
+    let unitIndex = 0;
+
+    while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex++;
+    }
+
+    const precision = value >= 10 || unitIndex === 0 ? 0 : 1;
+    return `${value.toFixed(precision)} ${units[unitIndex]}`;
+}
+
+
+onMounted(async () => {
+    profile.value = await mapStore.worker.profile.load();
+    serverConfig.value = await mapStore.worker.profile.loadServer();
+    await fetch();
+});
+
+async function downloadFile(): Promise<void> {
+    if (!pkg.value) return;
+
+    const url = stdurl(`/api/marti/api/files/${pkg.value.hash}`)
+    url.searchParams.append('token', localStorage.token);
+    url.searchParams.append('name', pkg.value.name + '.zip');
+
+    await std(url, {
+        download: true
+    });
+}
+
+async function fetch() {
+    error.value = undefined;
+
+    try {
+        loading.value = true;
+
+        const res = await server.GET('/api/marti/package/{:uid}', {
+            params: {
+                path: {
+                    ':uid': String(route.params.package)
+                },
+            }
+        });
+
+        if (res.error) throw new Error(res.error.message);
+
+        pkg.value = res.data;
+
+        loading.value = false;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+        loading.value = false;
+    }
+
+    loading.value = false;
+}
+
+async function deleteFile(pkg: Package) {
+    loading.value = true;
+
+    try {
+        await server.DELETE('/api/marti/package/{:uid}', {
+            params: {
+                path: {
+                    ':uid': pkg.uid
+                },
+                query: {
+                    hash: pkg.hash
+                }
+            }
+        });
+
+        router.push(`/menu/packages`)
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+
+}
+
+async function createImport() {
+    if (!pkg.value) return;
+
+    loading.value = true;
+
+    try {
+        const res = await server.POST('/api/import', {
+            body: {
+                name: pkg.value.name,
+                source: 'Package',
+                source_id: pkg.value.hash
+            }
+        });
+
+        if (res.error) throw new Error(res.error.message);
+
+        router.push(`/menu/imports/${res.data.id}`)
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+        loading.value = false;
+    }
+}
+</script>

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

@@ -0,0 +1,193 @@
+<template>
+    <MenuTemplate
+        name='Data Packages'
+    >
+        <template #buttons>
+            <TablerIconButton
+                v-if='!loading'
+                title='Create Package'
+                @click='upload = true'
+            >
+                <IconPlus
+                    :size='32'
+                    stroke='1'
+                />
+            </TablerIconButton>
+
+            <TablerRefreshButton
+                :loading='loading'
+                @click='fetchList'
+            />
+        </template>
+        <template #default>
+            <ShareToPackage
+                v-if='upload'
+                :upload='true'
+                @close='upload = false'
+            />
+
+            <div class='d-flex flex-column'>
+                <div class='d-flex mx-2 pt-2 flex-row gap-2'>
+                    <TablerInput
+                        v-model='paging.filter'
+                        icon='search'
+                        placeholder='Filter'
+                        class='flex-grow-1'
+                    />
+                </div>
+
+                <ChannelInfo label='Data Packages' />
+                <EmptyInfo v-if='mapStore.hasNoChannels' />
+
+                <TablerLoading
+                    v-if='loading'
+                    class='my-5'
+                />
+                <TablerAlert
+                    v-else-if='error'
+                    title='Packages Error'
+                    :err='error'
+                />
+                <TablerNone
+                    v-else-if='!list.items.length'
+                    label='Packages'
+                    :create='false'
+                />
+                <div
+                    v-else
+                    class='d-flex flex-column gap-3 mx-2'
+                >
+                    <StandardItem
+                        v-for='pkg in list.items'
+                        :key='pkg.uid'
+                        class='d-flex flex-row gap-3'
+                        @click='router.push(`/menu/packages/${pkg.uid}`)'
+                    >
+                        <div class='menu-packages__icon-wrapper ms-2 mt-2 d-flex align-items-center justify-content-center rounded-circle bg-black bg-opacity-25'>
+                            <IconPackage
+                                :size='24'
+                                stroke='1'
+                            />
+                        </div>
+
+                        <div class='flex-grow-1 d-flex flex-column gap-2 py-2'>
+                            <div class='d-flex flex-wrap align-items-center gap-2'>
+                                <span
+                                    class='fw-semibold text-break'
+                                    v-text='pkg.name'
+                                />
+                            </div>
+
+                            <Keywords
+                                :keywords='pkg.keywords.filter((k) => k && k.trim() !== "missionpackage")'
+                            />
+                            <div
+                                v-if='!pkg.keywords.filter((k) => k && k.trim() !== "missionpackage").length'
+                                class='text-secondary small'
+                            >
+                                No keywords
+                            </div>
+
+                            <div class='text-secondary small d-flex flex-wrap align-items-center gap-2'>
+                                <div v-text='timeDiff(pkg.created)' />
+                                <span class='text-white-50'>•</span>
+                                <div v-text='pkg.username' />
+                            </div>
+                        </div>
+                    </StandardItem>
+                </div>
+            </div>
+        </template>
+    </MenuTemplate>
+</template>
+
+<script setup lang='ts'>
+import type { PackageList } from '../../../../src/types.ts';
+import { ref, watch, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import MenuTemplate from '../util/MenuTemplate.vue';
+import Keywords from '../util/Keywords.vue';
+import StandardItem from '../util/StandardItem.vue';
+import { server } from '../../../std.ts';
+
+import {
+    TablerNone,
+    TablerAlert,
+    TablerIconButton,
+    TablerRefreshButton,
+    TablerLoading,
+    TablerInput,
+} from '@tak-ps/vue-tabler';
+import {
+    IconPlus,
+    IconPackage,
+} from '@tabler/icons-vue';
+import timeDiff from '../../../timediff.ts';
+import ChannelInfo from '../util/ChannelInfo.vue';
+import EmptyInfo from '../util/EmptyInfo.vue';
+import ShareToPackage from '../util/ShareToPackage.vue';
+import { useMapStore } from '../../../../src/stores/map.ts';
+
+const mapStore = useMapStore();
+
+const router = useRouter();
+
+const error = ref<Error | undefined>();
+const loading = ref(true);
+const upload = ref(false)
+
+const paging = ref({
+    filter: ''
+});
+
+const list = ref<PackageList>({
+    total: 0,
+    items: []
+})
+
+onMounted(async () => {
+    await fetchList();
+});
+
+watch(paging.value, async () => {
+    await fetchList();
+});
+
+async function fetchList() {
+    try {
+        upload.value = false;
+        error.value = undefined;
+        loading.value = true;
+
+        const res = await server.GET('/api/marti/package', {
+            params: {
+                query: {
+                    filter: paging.value.filter,
+                }
+            }
+        });
+
+        if (res.error) {
+            loading.value = false;
+            error.value = Error(res.error.message);
+            return;
+        }
+
+        list.value = res.data;
+    } catch (err) {
+        error.value = err instanceof Error ? err : new Error(String(err));
+    }
+
+    loading.value = false;
+}
+</script>
+
+<style scoped>
+.menu-packages__icon-wrapper {
+    width: 3rem;
+    height: 3rem;
+    min-width: 3rem;
+    min-height: 3rem;
+    flex-shrink: 0;
+}
+</style>