@tak-ps/cloudtak 12.54.0 → 12.55.0

package/src/components/util/PublicTilesSelect.vue

@@ -1,171 +0,0 @@
-<template>
-    <div>
-        <div class='d-flex align-items-center user-select-none'>
-            <label class='mx-1 mb-1'>Public Tiles Selection</label>
-        </div>
-        <div class='card'>
-            <div class='card-body'>
-                <TablerLoading
-                    v-if='loading.main'
-                    :inline='true'
-                    desc='Loading Tiles'
-                />
-                <TablerLoading
-                    v-else-if='loading.tiles'
-                    :inline='true'
-                    desc='Loading Tile Metadata'
-                />
-                <template v-else-if='selected'>
-                    <div class='col-12 d-flex align-items-center user-select-none'>
-                        <div v-text='selected.name' />
-                        <div class='ms-auto btn-list'>
-                            <IconTrash
-                                v-tooltip='"Remove Tile"'
-                                :size='32'
-                                stroke='1'
-                                class='cursor-pointer'
-                                @click='selected = undefined'
-                            />
-                        </div>
-                    </div>
-                </template>
-                <template v-else>
-                    <TablerInput
-                        v-model='paging.filter'
-                        placeholder='Task Filter...'
-                        class='pb-2'
-                    />
-
-                    <div
-                        v-if='loading.list'
-                        class='card-body'
-                    >
-                        <TablerLoading desc='Loading Tasks' />
-                    </div>
-                    <TablerNone
-                        v-else-if='list.total === 0'
-                        :create='false'
-                        :compact='true'
-                        label='Tasks'
-                    />
-                    <template
-                        v-for='task in list.items'
-                        v-else
-                    >
-                        <div
-                            class='hover px-2 py-2 cursor-pointer rounded user-select-none d-flex align-items-center'
-                            @click='select(task)'
-                        >
-                            <div v-text='task.name.replace(/^public\//, "").replace(/\.pmtiles$/, "")' />
-                        </div>
-                    </template>
-                </template>
-            </div>
-            <div
-                v-if='!loading.main && !loading.task && 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 emit = defineEmits([
-    'select'
-]);
-
-const loading = ref({
-    main: true,
-    modal: true,
-    list: true,
-});
-
-const config = ref();
-
-const selected = ref();
-
-const paging = ref({
-    filter: '',
-    limit: 10,
-    page: 0
-});
-
-const list = ref({
-    total: 0,
-    items: []
-});
-
-watch(selected, () => {
-    if (selected.value) {
-        emit('select', selected.value);
-    } else {
-        emit('select', undefined);
-    }
-}, {
-    deep: true
-});
-
-watch(paging.value, async () => {
-    await listTiles();
-});
-
-onMounted(async () => {
-    await listTiles();
-    loading.value.main = false;
-});
-
-async function select(tile) {
-    loading.value.tiles = true;
-
-    if (!config.value) {
-        config.value = await std('/api/config/tiles');
-    }
-
-    const name = tile.name.replace(/^public\//, "").replace(/\.pmtiles$/, '');
-
-    const url = stdurl(new URL(config.value.url + `/tiles/public/${name}`));
-    url.searchParams.append('token', localStorage.token);
-
-    const detail = await std(url);
-    selected.value = detail;
-
-    loading.value.tiles = false;
-}
-
-async function listTiles() {
-    if (!config.value) {
-        config.value = await std('/api/config/tiles');
-    }
-
-    loading.value.list = true;
-    const url = stdurl(new URL(config.value.url + '/tiles/public'));
-    url.searchParams.append('token', localStorage.token);
-    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>

package/src/components/util/StatusDot.vue

@@ -1,31 +0,0 @@
-<template>
-    <span
-        v-tooltip='props.title || props.status'
-        class='status-indicator status-indicator-animated'
-        :class='{
-            "status-yellow": ["running", "pending"].includes(normalizeStatus),
-            "status-orange": ["warn", "provisioning"].includes(normalizeStatus),
-            "status-green": ["success"].includes(normalizeStatus),
-            "status-red": ["fail", "pending", "deprovisioning"].includes(normalizeStatus),
-            "status-dark": !props.dark && ["unknown", "empty"].includes(normalizeStatus),
-            "status-light": props.dark && ["unknown", "empty"].includes(normalizeStatus),
-        }'
-    >
-        <span class='status-indicator-circle' />
-        <span class='status-indicator-circle' />
-        <span class='status-indicator-circle' />
-    </span>
-</template>
-
-<script setup lang='ts'>
-import { computed } from 'vue';
-const props = defineProps<{
-    title?: string,
-    status: string,
-    dark?: boolean
-}>();
-
-const normalizeStatus = computed(() => {
-    return (props.status ?? '').toLowerCase()
-});
-</script>

package/src/components/util/TableFooter.vue

@@ -1,64 +0,0 @@
-<template>
-    <div
-        class='card-footer'
-        style='height: 60px;'
-    >
-        <div class='row'>
-            <div class='col-sm-12 col-md-6'>
-                <p
-                    v-if='total === 0'
-                    class='m-0 text-muted'
-                >
-                    Showing 0 of 0 entries
-                </p>
-                <p
-                    v-else
-                    class='m-0 text-muted'
-                >
-                    Showing <span v-text='limit * page + 1' /> to <span v-text='total < limit ? total : (page * limit + limit > total ? total : page * limit + limit)' /> of <span v-text='total' /> entries
-                </p>
-            </div>
-            <div
-                v-if='total > limit'
-                class='col-sm-12 col-md-6 d-flex'
-            >
-                <div class='ms-auto'>
-                    <TablerPager
-                        :page='page'
-                        :total='total'
-                        :limit='limit'
-                        @page='page = $event'
-                    />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-import {
-    TablerPager
-} from '@tak-ps/vue-tabler';
-
-defineProps({
-    limit: {
-        type: Number,
-        required: true
-    },
-    total: {
-        type: Number,
-        required: true
-    }
-});
-
-const emit = defineEmits([
-    'page'
-]);
-
-const page = ref(0);
-
-watch(page, () => {
-    emit("page", page.value);
-});
-</script>

package/src/components/util/TableHeader.vue

@@ -1,127 +0,0 @@
-<template>
-    <thead>
-        <tr>
-            <th
-                v-for='s in shown'
-                :key='s'
-            >
-                <div class='d-flex align-items-center'>
-                    <span
-                        class='cursor-pointer'
-                        @click='updateSort(s.name)'
-                        v-text='s.name'
-                    />
-                    <span
-                        v-if='s.name === sort'
-                        class='ms-auto'
-                    >
-                        <IconChevronDown
-                            v-if='order === "asc"'
-                            :size='16'
-                            stroke='1'
-                            class='cursor-pointer'
-                            @click='updateOrder("desc")'
-                        />
-                        <IconChevronUp
-                            v-else
-                            :size='16'
-                            stroke='1'
-                            class='cursor-pointer'
-                            @click='updateOrder("asc")'
-                        />
-                    </span>
-
-                    <template v-if='shown[shown.length - 1] === s'>
-                        <div class='ms-auto'>
-                            <TablerDropdown>
-                                <IconSettings
-                                    :size='16'
-                                    stroke='1'
-                                    class='mx-2 dropdown-toggle cursor-pointer'
-                                />
-
-                                <template #dropdown>
-                                    <div
-                                        v-for='(h, h_it) of header'
-                                        :key='h_it'
-                                    >
-                                        <label class='form-check subheader mb-1 mx-1'>
-                                            <input
-                                                class='form-check-input'
-                                                type='checkbox'
-                                                :checked='h.display'
-                                                @change='displayHeader(h_it, $event)'
-                                            >
-                                            <span
-                                                class='form-check-label'
-                                                v-text='h.name'
-                                            />
-                                        </label>
-                                    </div>
-                                </template>
-                            </TablerDropdown>
-                        </div>
-                    </template>
-                </div>
-            </th>
-        </tr>
-    </thead>
-</template>
-
-<script setup>
-import { computed } from 'vue';
-import {
-    IconChevronUp,
-    IconChevronDown,
-    IconSettings
-} from '@tabler/icons-vue';
-import {
-    TablerDropdown
-} from '@tak-ps/vue-tabler'
-
-const props = defineProps({
-    header: {
-        type: Array,
-        required: true,
-        description: 'Array of object headers - [{ name: "example", "displayed: true }]'
-    },
-    order: {
-        type: String,
-        required: false,
-        default: 'desc',
-        description: 'Order to sort by asc or desc'
-    },
-    sort: {
-        type: String,
-        required: false,
-        description: 'Field to sort by',
-        default: undefined
-    },
-});
-
-const emit = defineEmits([
-    'update:order',
-    'update:sort',
-    'update:header'
-]);
-
-const shown = computed(() => {
-   return props.header.filter((h) => {
-        return h.display;
-   });
-});
-
-function updateSort(sort) {
-    emit('update:sort', sort);
-}
-
-function updateOrder(order) {
-    emit('update:order', order);
-}
-
-function displayHeader(h_it, $event) {
-    const header = JSON.parse(JSON.stringify(props.header));
-    header[h_it].display = $event.target.checked;
-    emit('update:header', header);
-}
-</script>

package/src/components/util/Upload.vue

@@ -1,220 +0,0 @@
-<template>
-    <div class='card-body'>
-        <div
-            class='row'
-            :class='{ "d-none": file }'
-        >
-            <div
-                class='col-12 d-flex justify-content-center mb-3'
-                v-text='props.label'
-            />
-            <div class='col-12 d-flex justify-content-center'>
-                <div class='btn-list'>
-                    <button
-                        v-if='props.cancel'
-                        class='btn btn-secondary'
-                        @click='emit("cancel")'
-                    >
-                        Cancel
-                    </button>
-                    <button
-                        class='btn btn-primary'
-                        @click='fileInput?.click()'
-                    >
-                        Upload
-                    </button>
-                </div>
-            </div>
-            <form>
-                <input
-                    id='file'
-                    ref='fileInput'
-                    class='d-none'
-                    type='file'
-                    name='file'
-                    :accept='props.mimetype'
-                    @change='stage'
-                >
-            </form>
-        </div>
-
-        <div
-            v-if='file && progress === 0'
-            class='row'
-        >
-            <div class='d-flex align-items-center px-3 py-2'>
-                <IconFile
-                    :size='24'
-                    stroke='1'
-                />
-                <span
-                    class='mx-2 user-select-none'
-                    v-text='file.name'
-                />
-            </div>
-        </div>
-        <div
-            v-else-if='file && progress > 0 && progress < 101'
-        >
-            <TablerLoading :desc='`Uploading ${file.name}`' />
-            <TablerProgress :percent='progress / 100' />
-        </div>
-    </div>
-</template>
-
-<script setup lang='ts'>
-import { ref } from 'vue';
-import {
-    IconFile
-} from '@tabler/icons-vue';
-import {
-    TablerLoading,
-    TablerProgress
-} from '@tak-ps/vue-tabler';
-
-// Define component properties with types and default values
-interface Props {
-    url: URL;
-    autoupload?: boolean;
-    headers?: Record<string, string>;
-    format?: 'formdata' | 'raw';
-    method?: string;
-    cancel?: boolean;
-    label?: string;
-    mimetype?: string;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    headers: () => ({}),
-    autoupload: true,
-    format: 'formdata',
-    method: 'POST',
-    cancel: true,
-    label: 'Select a file to upload',
-    mimetype: '*'
-});
-
-// Define the events emitted by this component
-const emit = defineEmits<{
-    (e: 'cancel'): void;
-    (e: 'error', response: Error): void;
-    (e: 'staged', response: { name: string }): void;
-    (e: 'done', response: unknown): void;
-}>();
-
-
-// Reactive state variables
-const file = ref<{
-    name: string;
-    file: File;
-} | undefined>();
-const progress = ref<number>(0);
-const fileInput = ref<HTMLInputElement | null>(null);
-
-/**
- * Resets the component state and file input.
- * This function is exposed to be callable from a parent component.
- */
-function refresh() {
-    file.value = undefined;
-    progress.value = 0;
-
-    const input = fileInput.value;
-    if (input) {
-        // A common trick to clear the file input's value
-        input.type = 'text';
-        input.type = 'file';
-    }
-}
-
-/**
- * Handles the file upload process when a file is selected.
- * @param event - The file input change event
- */
-function stage(event: Event) {
-    const target = event.target as HTMLInputElement;
-    if (!target.files?.length) return;
-
-    const singleFile = target.files[0];
-    file.value = {
-        name: singleFile.name,
-        file: singleFile
-    }
-
-    emit('staged', {
-        name: file.value.name
-    });
-
-    if (!props.autoupload) return;
-
-    upload();
-}
-
-async function upload(opts: {
-    query?: Record<string, string>;
-} = {}) {
-    if (!file.value) throw new Error('No file staged for upload');
-
-    const url = new URL(props.url.toString());
-
-    if (opts.query) {
-        Object.entries(opts.query).forEach(([key, value]) => {
-            url.searchParams.append(key, value);
-        });
-    }
-
-    let response;
-
-    try {
-        if (props.format === 'formdata') {
-            const formData = new FormData();
-
-            formData.append('file', file.value.file);
-
-            const headers = {
-                'X-Requested-With': 'XMLHttpRequest',
-                ...props.headers,
-            };
-
-            response = await fetch(url, {
-                method: props.method,
-                headers: headers,
-                body: formData,
-            });
-        } else if (props.format === 'raw') {
-            const headers = {
-                'X-Requested-With': 'XMLHttpRequest',
-                ...props.headers,
-            };
-
-            response = await fetch(url, {
-                method: props.method,
-                headers: headers,
-                body: file.value.file,
-            });
-        } else {
-            throw new Error('Unsupported upload format');
-        }
-
-        if (response.ok) {
-            progress.value = 101;
-            const responseData = await response.json();
-            emit('done', responseData);
-
-            return responseData;
-        } else {
-            emit('error', new Error(`Upload Failed: ${response.statusText}`));
-        }
-    } catch (error) {
-        console.error('Upload error:', error);
-        emit('cancel');
-    }
-}
-
-// Expose the refresh function so parent components can call it
-defineExpose({
-    refresh,
-    upload
-});
-</script>
-

package/src/components/util/UploadCSV.vue

@@ -1,46 +0,0 @@
-<template>
-    <TablerModal>
-        <button
-            type='button'
-            class='btn-close'
-            aria-label='Close'
-            @click='close'
-        />
-        <div class='modal-status bg-yellow' />
-        <div class='modal-body text-center py-4'>
-            <TablerInput
-                v-model='csv'
-                label='CSV'
-                :rows='10'
-            />
-
-            <div class='row mt-3'>
-                <div class='col'>
-                    <a
-                        class='cursor-pointer btn w-100'
-                        @click='$emit("import", csv)'
-                    >Import</a>
-                </div>
-            </div>
-        </div>
-    </TablerModal>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-import {
-    TablerModal,
-    TablerInput
-} from '@tak-ps/vue-tabler';
-
-const emit = defineEmits([
-    'import',
-    'close'
-]);
-
-const csv = ref('');
-
-function close() {
-    emit('close');
-}
-</script>