Initial work on moving domain view to vue

2025-01-27 22:20:26 +01:00
parent 42ce3cb405
commit 70b15d128a
12 changed files with 474 additions and 13 deletions
@@ -0,0 +1,85 @@
+<script setup>
+
+const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
+
+import { ref, onMounted } from 'vue';
+import { Button, ProgressBar } from 'pankow';
+import { prettyLongDate } from 'pankow/utils';
+import { TASK_TYPES } from '../constants.js';
+import Section from '../components/Section.vue';
+import TasksModel from '../models/TasksModel.js';
+import DomainsModel from '../models/DomainsModel.js';
+
+const taskModel = TasksModel.create(API_ORIGIN, localStorage.token);
+const domainsModel = DomainsModel.create(API_ORIGIN, localStorage.token);
+
+const lastTask = ref({});
+const taskLogsMenu = ref([]);
+
+async function waitForLastTask() {
+  if (!lastTask.value.id) return;
+
+  const [error, result] = await taskModel.get(lastTask.value.id);
+  if (error) return console.error(error);
+
+  lastTask.value = result;
+
+  // task done, refresh menu
+  if (!result.active) return await refreshTasks();
+
+  setTimeout(waitForLastTask, 2000);
+}
+
+async function refreshTasks() {
+  const [error, result] = await taskModel.getByType(TASK_TYPES.TASK_SYNC_DNS_RECORDS);
+  if (error) return console.error(error);
+
+  lastTask.value = result[0] || {};
+
+  // limit to last 10
+  taskLogsMenu.value = result.slice(0,10).map(t => {
+    return {
+      icon: 'fa-solid ' + ((!t.active && t.success) ? 'status-active fa-check-circle' : (t.active ? 'fa-circle-notch fa-spin' : 'status-error fa-times-circle')),
+      label: prettyLongDate(t.ts),
+      action: () => { window.open(`/logs.html?taskId=${t.id}`); }
+    };
+  });
+
+  // if last task is currently active, start polling
+  if (lastTask.value.active) waitForLastTask();
+}
+
+async function onSync() {
+  lastTask.value.active = true;
+  lastTask.value.percent = 0;
+  lastTask.value.message = 'Queued';
+
+  // no options means all records
+  const [error] = await domainsModel.setDnsRecords({});
+  if (error) return console.error(error);
+
+  await refreshTasks();
+}
+
+onMounted(async () => {
+  await refreshTasks();
+});
+
+</script>
+
+<template>
+  <Section :title="$t('domains.syncDns.title')">
+    <template #header-buttons>
+      <Button tool icon="fa-solid fa-align-left" v-tooltip="$t('domains.renewCerts.showLogsAction')" :menu="taskLogsMenu" :disabled="!taskLogsMenu.length"/>
+    </template>
+
+    <p v-html="$t('domains.syncDns.description')"></p>
+
+    <div v-if="lastTask.active">
+      <ProgressBar :value="lastTask.percent" />
+      <div>{{ lastTask.message }}</div>
+    </div>
+
+    <Button @click="onSync()" :loading="lastTask.active" :disabled="lastTask.active">{{ $t('domains.syncDns.syncAction') }}</Button>
+  </Section>
+</template>