@tak-ps/cloudtak 12.54.0

package/src/components/util/LayerTaskSelect.vue

@@ -0,0 +1,311 @@
+<template>
+    <div>
+        <div class='d-flex align-items-center user-select-none'>
+            <label class='mx-1 mb-1'>Task Selection</label>
+        </div>
+        <div class='card'>
+            <div class='card-body'>
+                <TablerLoading
+                    v-if='loading.main'
+                    :inline='true'
+                    desc='Loading Tasks'
+                />
+                <TablerLoading
+                    v-else-if='loading.task'
+                    :inline='true'
+                    desc='Loading Task'
+                />
+                <template v-else-if='selected.id'>
+                    <div class='col-12 d-flex align-items-center user-select-none'>
+                        <img
+                            v-if='selected.logo'
+                            :src='selected.logo'
+                            alt='Logo Preview'
+                            style='height: 50px;'
+                            class='img-thumbnail'
+                        >
+                        <IconBroadcast
+                            v-else
+                            size='50'
+                            stroke='1'
+                            class='text-muted'
+                        />
+                        <div
+                            class='mx-2'
+                            v-text='selected.name'
+                        />
+                        <div class='ms-auto btn-list'>
+                            <TablerEnum
+                                v-model='selected.version'
+                                :options='selected.versions'
+                            />
+
+
+                            <TablerIconButton
+                                v-if='selected.id'
+                                title='Remove Task'
+                                @click='selected.id = undefined'
+                            >
+                                <IconTrash
+                                    :size='32'
+                                    stroke='1'
+                                />
+                            </TablerIconButton>
+                        </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'
+                    />
+                    <div
+                        v-else
+                        class='row row-cards'
+                    >
+                        <template
+                            v-for='task in list.items'
+                        >
+                            <div class='col-sm-6 col-lg-3'>
+                                <div
+                                    class='card card-link cursor-pointer hover'
+                                    @click='selected = select(task)'
+                                >
+                                    <div class='card-header d-flex align-items-center user-select-none'>
+                                        <IconStar
+                                            v-if='task.favorite'
+                                            size='24'
+                                            stroke='1'
+                                            class='me-2'
+                                        />
+                                        <div v-text='task.name' />
+                                        <div class='ms-auto'>
+                                            <TablerIconButton
+                                                title='Task Info'
+                                                @click.prevent.stop='infoModal = task'
+                                            >
+                                                <IconInfoSquare
+                                                    :size='32'
+                                                    stroke='1'
+                                                />
+                                            </TablerIconButton>
+                                        </div>
+                                    </div>
+                                    <div class='card-body d-flex align-items-center justify-content-center user-select-none'>
+                                        <div style='width: 128px; height: 128px;'>
+                                            <img
+                                                v-if='task.logo'
+                                                :src='task.logo'
+                                                alt='Logo Preview'
+                                                class='img-thumbnail'
+                                            >
+                                            <IconBroadcast
+                                                v-else
+                                                size='128'
+                                                stroke='1'
+                                                class='text-muted'
+                                            />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </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>
+
+    <TablerModal
+        v-if='infoModal'
+        size='xl'
+    >
+        <div class='modal-header'>
+            <IconInfoSquare
+                size='24'
+                stroke='1'
+            />
+            <span
+                class='mx-2'
+                v-text='infoModal.name'
+            />
+            <button                                       
+                type='button'                  
+                class='btn-close'            
+                aria-label='Close'                                 
+                @click='infoModal = undefined'                                            
+            />
+        </div>
+        <div
+            class='modal-body overflow-auto'
+            style='max-height: 50vh'
+        >
+            <TablerLoading
+                v-if='!infoModal.readme_body'
+            />
+            <TablerMarkdown
+                v-else
+                :markdown='infoModal.readme_body'
+            />
+        </div>
+        <div class='modal-footer'>
+            <button
+                class='btn btn-primary'
+                @click='infoModal = undefined'
+            >
+                Close
+            </button>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { std, stdurl } from '/src/std.ts';
+import {
+    IconStar,
+    IconTrash,
+    IconBroadcast,
+    IconInfoSquare,
+} from '@tabler/icons-vue';
+import {
+    TablerModal,
+    TablerMarkdown,
+    TablerIconButton,
+    TablerLoading,
+    TablerEnum,
+    TablerInput,
+    TablerPager,
+    TablerNone,
+} from '@tak-ps/vue-tabler';
+
+const props = defineProps({
+    modelValue: {
+        type: String,
+        default: undefined
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const loading = ref({
+    main: true,
+    modal: true,
+    list: true,
+});
+
+const infoModal = ref();
+
+const selected = ref({
+    id: undefined
+});
+
+const paging = ref({
+    filter: '',
+    limit: 12,
+    sort: 'favorite',
+    order: 'desc',
+    page: 0
+});
+
+const list = ref({
+    total: 0,
+    items: []
+});
+
+watch(selected, () => {
+    if (selected.value.id) {
+        emit('update:modelValue', `${selected.value.prefix}-v${selected.value.version}`);
+    } else {
+        emit('update:modelValue', undefined);
+    }
+}, {
+    deep: true
+});
+
+watch(infoModal, async function() {
+    if (!infoModal.value) return;
+
+    const readme = await std(`/api/task/${infoModal.value.id}/readme`);
+
+    infoModal.value.readme_body = readme.body;
+})
+
+watch(props.modelValue, async function() {
+    if (props.modelValue) {
+        select.value  = await select(props.modelValue.split('-v')[0], props.modelValue.split('-v')[1])
+    }
+});
+
+watch(paging.value, async () => {
+    await listTasks();
+});
+
+onMounted(async () => {
+    if (props.modelValue) {
+        await select(props.modelValue.split('-v')[0], props.modelValue.split('-v')[1])
+    }
+
+    await listTasks();
+    loading.value.main = false;
+});
+
+async function select(task, version) {
+    loading.value.task = true;
+
+    const detail = await std(`/api/task/raw/${task.prefix}`);
+    selected.value = {
+        versions: detail.versions,
+        version: version || detail.versions[0],
+        ...task
+    }
+
+    loading.value.task = false;
+}
+
+async function listTasks() {
+    loading.value.list = true;
+    const url = stdurl('/api/task');
+    url.searchParams.append('filter', paging.value.filter);
+    url.searchParams.append('limit', paging.value.limit);
+    url.searchParams.append('order', paging.value.order);
+    url.searchParams.append('sort', paging.value.sort);
+    url.searchParams.append('page', paging.value.page);
+    list.value = await std(url);
+
+    loading.value.list = false;
+}
+</script>

package/src/components/util/LayerTemplateSelect.vue

@@ -0,0 +1,173 @@
+<template>
+    <div>
+        <div class='d-flex align-items-center'>
+            <label class='mx-1 mb-1'>Template Selection</label>
+        </div>
+        <div class='card'>
+            <div class='card-body'>
+                <TablerLoading
+                    v-if='loading.main'
+                    :inline='true'
+                    desc='Loading Templates'
+                />
+                <template v-else-if='selected.id'>
+                    <div class='col-12 d-flex align-items-center'>
+                        <div v-text='selected.name' />
+                        <div class='ms-auto'>
+                            <IconTrash
+                                v-if='selected.id'
+                                v-tooltip='"Remove Template"'
+                                :size='32'
+                                stroke='1'
+                                class='cursor-pointer'
+                                @click='selected = {}'
+                            />
+                        </div>
+                    </div>
+                </template>
+                <template v-else>
+                    <TablerInput
+                        v-model='paging.filter'
+                        placeholder='Template Filter...'
+                        class='pb-2'
+                    />
+
+                    <div
+                        v-if='loading.list'
+                        class='card-body'
+                    >
+                        <TablerLoading desc='Loading Templates' />
+                    </div>
+                    <TablerNone
+                        v-else-if='list.total === 0'
+                        :create='false'
+                        :compact='true'
+                        label='Templates'
+                    />
+                    <template
+                        v-for='layer in list.items'
+                        v-else
+                    >
+                        <div
+                            class='hover px-2 py-2 cursor-pointer row rounded'
+                            @click='selected = layer'
+                        >
+                            <div class='col-md-4'>
+                                <span v-text='layer.name' />
+                            </div>
+
+                            <div
+                                class='col-md-8'
+                                v-text='layer.description'
+                            />
+                        </div>
+                    </template>
+                </template>
+            </div>
+            <div
+                v-if='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 props = defineProps({
+    modelValue: {
+        type: Object,
+        default: undefined
+    },
+    disabled: {
+        type: Boolean,
+        default: false
+    }
+});
+
+const emit = defineEmits([
+    'update:modelValue'
+]);
+
+const loading = ref({
+    main: true,
+    list: true,
+});
+
+const selected = ref({
+    id: '',
+});
+
+const paging = ref({
+    filter: '',
+    limit: 10,
+    page: 0
+});
+
+const list = ref({
+    total: 0,
+    items: []
+});
+
+watch(selected, () => {
+    if (selected.value.id) {
+        emit('update:modelValue', selected.value);
+    } else {
+        emit('update:modelValue', {});
+    }
+}, { deep: true });
+
+watch(() => props.modelValue, async () => {
+    if (props.modelValue && props.modelValue.id !== selected.value.id) {
+        await fetch();
+    }
+});
+
+watch(paging, async () => {
+    await listData();
+}, { deep: true });
+
+onMounted(async () => {
+    if (props.modelValue) {
+        await fetch();
+    }
+
+    await listData();
+    loading.value.main = false;
+});
+
+async function fetch() {
+    selected.value = await std(`/api/template/${props.modelValue.id}`);
+}
+
+async function listData() {
+    loading.value.list = true;
+    const url = stdurl('/api/template');
+    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/LoginModal.vue

@@ -0,0 +1,110 @@
+<template>
+    <TablerModal>
+        <div class='px-4 py-4'>
+            <div
+                class='text-center'
+                style='margin-bottom: 24px;'
+            >
+                <img
+                    src='/logo.png'
+                    style='height: 150px;'
+                >
+            </div>
+            <h2 class='h2 text-center mb-2'>
+                Authentication Expired
+            </h2>
+            <div class='w-100 text-center'>
+                Your session has expired, login to continue
+            </div>
+
+            <TablerLoading
+                v-if='loading'
+                desc='Logging in'
+            />
+            <template v-else>
+                <div class='mb-3'>
+                    <label class='form-label'>Username or Email</label>
+                    <input
+                        v-model='username'
+                        type='text'
+                        class='form-control'
+                        placeholder='your@email.com'
+                        autocomplete='off'
+                        @keyup.enter='createLogin'
+                    >
+                </div>
+                <div class='mb-2'>
+                    <label class='form-label'>
+                        Password
+                        <span class='form-label-description'>
+                            <a
+                                class='cursor-pointer'
+                                @click='external("https://cotak.gov/forgot-password")'
+                            >Forgot Password</a>
+                        </span>
+                    </label>
+                    <div class='input-group input-group-flat'>
+                        <input
+                            v-model='password'
+                            type='password'
+                            class='form-control'
+                            placeholder='Your password'
+                            autocomplete='off'
+                            @keyup.enter='createLogin'
+                        >
+                    </div>
+                </div>
+                <div class='form-footer'>
+                    <button
+                        type='submit'
+                        class='btn btn-primary w-100'
+                        @click='createLogin'
+                    >
+                        Sign In
+                    </button>
+                </div>
+            </template>
+        </div>
+    </TablerModal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { std } from '/src/std.ts';
+import {
+    TablerLoading,
+    TablerModal
+} from '@tak-ps/vue-tabler'
+
+const emit = defineEmits([
+    'login'
+]);
+
+const loading = ref(false);
+const username = ref('');
+const password = ref('');
+
+function external(url) {
+    window.location = new URL(url);
+}
+
+async function createLogin() {
+    loading.value = true;
+    try {
+        const login = await std('/api/login', {
+            method: 'POST',
+            body: {
+                username: username.value,
+                password: password.value
+            }
+        });
+
+        localStorage.token = login.token;
+
+        emit('login');
+    } catch (err) {
+        loading.value = false;
+        throw err;
+    }
+}
+</script>