@tak-ps/cloudtak 12.54.0

package/src/components/util/PublicTilesSelect.vue

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

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

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

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

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

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