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,127 @@
+<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, ButtonGroup } from 'pankow';
+import Certificates from '../components/Certificates.vue';
+import SyncDns from '../components/SyncDns.vue';
+import DashboardDomain from '../components/DashboardDomain.vue';
+import Section from '../components/Section.vue';
+import DashboardModel from '../models/DashboardModel.js';
+import DomainsModel from '../models/DomainsModel.js';
+
+const dashboardModel = DashboardModel.create(API_ORIGIN, localStorage.token);
+const domainsModel = DomainsModel.create(API_ORIGIN, localStorage.token);
+
+const domains = ref([]);
+const pageSize = 20;
+const dashboardDomain = ref('');
+
+function prettyProviderName(domain) {
+  switch (domain.provider) {
+    case 'bunny': return 'Bunny';
+    case 'route53': return 'AWS Route53';
+    case 'cloudflare': return 'Cloudflare';
+    case 'desec': return 'deSEC';
+    case 'digitalocean': return 'DigitalOcean';
+    case 'dnsimple': return 'dnsimple';
+    case 'gandi': return 'Gandi LiveDNS';
+    case 'hetzner': return 'Hetzner DNS';
+    case 'inwx': return 'INWX';
+    case 'linode': return 'Linode';
+    case 'namecom': return 'Name.com';
+    case 'namecheap': return 'Namecheap';
+    case 'netcup': return 'Netcup';
+    case 'ovh': return 'OVH';
+    case 'gcdns': return 'Google Cloud';
+    case 'godaddy': return 'GoDaddy';
+    case 'vultr': return 'Vultr';
+    case 'manual': return 'Manual';
+    case 'porkbun': return 'Porkbun';
+    case 'wildcard': return 'Wildcard';
+    case 'noop': return 'No-op';
+    default: return 'Unknown';
+  }
+};
+
+function onAdd () {
+
+}
+
+function onEdit(domain) {
+
+}
+
+function onRemove(domain) {
+
+}
+
+function onEditWellKnown(domain) {
+
+}
+
+onMounted(async () => {
+  let [error, result] = await domainsModel.list();
+  if (error) return console.error(error);
+
+  domains.value = result;
+
+  console.log(result);
+
+  [error, result] = await dashboardModel.getConfig();
+  if (error) return console.error(error);
+
+  dashboardDomain.value = result.adminDomain;
+});
+
+</script>
+
+<template>
+  <div class="content">
+    <Section :title="$t('domains.title')">
+      <template #header-buttons>
+        <Button v-show="domains.length <= pageSize" @click="onAdd()" icon="fa-solid fa-plus"> {{ $t('domains.addDomain') }}</Button>
+      </template>
+
+      <table class="table table-hover">
+        <thead>
+          <tr>
+            <th>{{ $t('domains.domain') }}</th>
+            <th class="text-left hidden-xs hidden-sm">{{ $t('domains.provider') }}</th>
+            <th style="width: 100px" class="text-right">{{ $t('main.actions') }}</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="domain in domains" :key="domain">
+            <td class="elide-table-cell hand" @click="onEdit(domain)">
+              {{ domain.domain }}
+            </td>
+            <td class="text-left elide-table-cell hidden-xs hidden-sm hand" @click="onEdit(domain)">
+              {{ prettyProviderName(domain) }}
+            </td>
+            <td class="text-right no-wrap" style="vertical-align: bottom">
+              <ButtonGroup>
+                <Button tool small secondary @click="onEditWellKnown(domain)" v-tooltip="$t('domains.tooltipWellKnown')" icon="fa-solid fa-atlas" />
+                <Button tool small secondary @click="onEdit(domain)" v-tooltip="$t('domains.tooltipEdit')" icon="fa-solid fa-pencil-alt" />
+                <Button tool small danger @click="onRemove(domain)" v-tooltip="$t('domains.tooltipRemove')" :disabled="domain.domain === adminDomain" icon="fa-solid fa-trash-alt" />
+              </ButtonGroup>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="pull-left">
+        {{ $t('domains.count', { count: domains.length || 0 }) }}
+      </div>
+      <div class="pull-right" ng-show="domains.length > pageSize">
+        <button class="btn btn-default btn-outline btn-xs" ng-click="showPrevPage()" ng-class="{ 'btn-primary': currentPage > 1 }" ng-disabled="currentPage <= 1"><i class="fa fa-angle-double-left"></i> {{ 'main.pagination.prev' | tr }}</button>
+        <span style="margin: 0 5px; line-height: 1.5; font-size: 12px;">{{ currentPage }}</span>
+        <button class="btn btn-default btn-outline btn-xs" ng-click="showNextPage()" ng-class="{ 'btn-primary': (domains | filter:domainSearchString).length > (currentPage * pageSize) }" ng-disabled="(domains | filter:domainSearchString).length <= (currentPage * pageSize)">{{ 'main.pagination.next' | tr }} <i class="fa fa-angle-double-right"></i></button>
+      </div>
+    </Section>
+
+    <Certificates />
+    <SyncDns />
+    <DashboardDomain />
+  </div>
+</template>