788e176b16
* move api clients and rename * organize recipes composables * rewrite useRecipeContext * refactor(frontend): ♻️ abstract common ingredient functionality. * feat(frontend): ✨ add scale, and back to recipe button + hide ingredients if none * update regex to mach 11. instead of just 1. * minor UX improvements Co-authored-by: Hayden K <hay-kot@pm.me>
87 lines
No EOL
2.6 KiB
Vue
87 lines
No EOL
2.6 KiB
Vue
<template>
|
|
<v-container class="narrow-container">
|
|
<BasePageTitle divider>
|
|
<template #header>
|
|
<v-img max-height="125" max-width="125" :src="require('~/static/svgs/manage-tasks.svg')"></v-img>
|
|
</template>
|
|
<template #title> Background Tasks </template>
|
|
Here you can view all the running background tasks and their status
|
|
</BasePageTitle>
|
|
<v-card-actions>
|
|
<BaseButton color="info" :loading="loading" @click="refreshTasks">
|
|
<template #icon> {{ $globals.icons.refresh }} </template>
|
|
Refresh
|
|
</BaseButton>
|
|
<BaseButton color="info" @click="testTask">
|
|
<template #icon> {{ $globals.icons.testTube }} </template>
|
|
Test
|
|
</BaseButton>
|
|
</v-card-actions>
|
|
<v-expansion-panels class="mt-2">
|
|
<v-expansion-panel v-for="(task, i) in tasks" :key="i">
|
|
<v-expansion-panel-header>
|
|
<span>
|
|
<v-progress-circular v-if="task.status === 'running'" indeterminate color="info"></v-progress-circular>
|
|
<v-icon v-else-if="task.status === 'finished'" large color="success"> {{ $globals.icons.check }}</v-icon>
|
|
<v-icon v-else-if="task.status === 'failed'" large color="error"> {{ $globals.icons.close }}</v-icon>
|
|
<v-icon v-else-if="task.status === 'pending'" large color="gray"> {{ $globals.icons.pending }}</v-icon>
|
|
<span class="ml-2">
|
|
{{ task.name }}
|
|
</span>
|
|
</span>
|
|
{{ $d(Date.parse(task.createdAt), "short") }}
|
|
</v-expansion-panel-header>
|
|
<v-expansion-panel-content style="white-space: pre-line">
|
|
{{ task.log === "" ? "No Logs Found" : task.log }}
|
|
</v-expansion-panel-content>
|
|
</v-expansion-panel>
|
|
</v-expansion-panels>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted, ref } from "@nuxtjs/composition-api";
|
|
import { ServerTask } from "~/api/types/server-task";
|
|
import { useAdminApi } from "~/composables/api";
|
|
|
|
export default defineComponent({
|
|
layout: "admin",
|
|
setup() {
|
|
const api = useAdminApi();
|
|
|
|
const tasks = ref<ServerTask[]>([]);
|
|
const loading = ref(false);
|
|
|
|
async function refreshTasks() {
|
|
loading.value = true;
|
|
const { data } = await api.serverTasks.getAll();
|
|
|
|
if (data) {
|
|
tasks.value = data;
|
|
}
|
|
loading.value = false;
|
|
}
|
|
|
|
async function testTask() {
|
|
await api.serverTasks.testTask();
|
|
refreshTasks();
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await refreshTasks();
|
|
});
|
|
|
|
return {
|
|
loading,
|
|
refreshTasks,
|
|
testTask,
|
|
tasks,
|
|
};
|
|
},
|
|
head() {
|
|
return {
|
|
title: "Tasks",
|
|
};
|
|
},
|
|
});
|
|
</script> |