Init

app/frontend/src/components/Base.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-app id="inspire">
+    <v-navigation-drawer>
+      <v-list-item
+        v-for="(item, i) in menu_items"
+        :key="i"
+        :href="item.link"
+        :active="item.link === current_path"
+        :title="item.title"
+      />
+    </v-navigation-drawer>
+
+    <v-app-bar>
+      <v-app-bar-title>WebPanel</v-app-bar-title>
+    </v-app-bar>
+
+    <v-main>
+      <slot></slot>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+const current_path = window.location.pathname
+const menu_items = [
+  {title: "Home", link: "/"},
+  {title: "DB", link: "/db/"},
+]
+</script>

app/frontend/src/components/db/DBBackups.vue

@@ -0,0 +1,27 @@
+<template>
+
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+
+const loading = ref(false);
+const db_backups = ref(null);
+
+onMounted(() => {
+  fetchDBBackups();
+})
+
+async function fetchDBBackups(){
+  loading.value = true;
+
+  try{
+    let response = await fetch("/api/db/db_backups/");
+    db_backups.value = await response.json();
+  }catch(err){
+    console.log(err);
+  }finally {
+    loading.value = false;
+  }
+}
+</script>

app/frontend/src/components/db/DBs.vue

@@ -0,0 +1,27 @@
+<template>
+
+</template>
+
+<script setup>
+import {ref, onMounted} from "vue";
+
+const loading = ref(false);
+const dbs = ref(null);
+
+onMounted(() => {
+  fetchDBs();
+})
+
+async function fetchDBs(){
+  loading.value = true;
+
+  try{
+    let response = await fetch("/api/db/dbs/");
+    dbs.value = await response.json();
+  }catch(err){
+    console.log(err);
+  }finally {
+    loading.value = false;
+  }
+}
+</script>

app/frontend/src/components/db/Index.vue

@@ -0,0 +1,13 @@
+<template>
+  <Base>
+    <v-container>
+      <v-btn icon="mdi-home"/>
+    </v-container>
+  </Base>
+</template>
+
+<script setup>
+import {defineAsyncComponent} from "vue";
+
+const Base = defineAsyncComponent(() => import("../Base.vue"))
+</script>

app/frontend/src/entrypoint/app.js

@@ -0,0 +1,3 @@
+// add the beginning of your app entry
+import 'vite/modulepreload-polyfill'
+

app/frontend/src/entrypoint/db.js

@@ -0,0 +1,17 @@
+// add the beginning of your app entry
+import 'vite/modulepreload-polyfill'
+
+// import {createVue} from "../utils.js"
+import App from "@/components/db/Index.vue"
+
+import("@/plugins/vue-loader.js").then(utils => {
+  utils.createVue(App, "#app");
+})
+
+// (async function(){
+//   const a = () => import("../utils.js");
+//   const b = await a();
+//   console.log(b)
+//   b.default.createVue(App, "#app")
+//   // b.createVue(App, "#app")
+// })()

app/frontend/src/plugins/vue-loader.js

@@ -0,0 +1,6 @@
+import vuetify from "./vuetify.js";
+import { createApp } from 'vue';
+
+export function createVue(component, dom_id){
+  return createApp(component).use(vuetify).mount(dom_id)
+}

app/frontend/src/plugins/vuetify.js

@@ -0,0 +1,30 @@
+import '@mdi/font/css/materialdesignicons.css' // Ensure you are using css-loader
+import 'vuetify/styles'
+import { createVuetify } from 'vuetify'
+import colors from 'vuetify/lib/util/colors.mjs'
+// import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
+
+export default createVuetify({
+  // components,
+  // directives,
+  icons: {
+    defaultSet: 'mdi',
+  },
+  // ssr: false,
+  theme: {
+    defaultTheme: "dark",
+    themes: {
+      dark: {
+        colors: {
+          primary: colors.blue.darken2,
+          accent: colors.grey.darken3,
+          secondary: colors.amber.darken3,
+          info: colors.teal.lighten1,
+          warning: colors.amber.base,
+          error: colors.deepOrange.accent4,
+          success: colors.green.accent3
+        }
+      }
+    }
+  }
+});

app/frontend/src/style/main.css

@@ -0,0 +1,3 @@
+/*body {*/
+/*    background-color: grey;*/
+/*}*/

app/frontend/src/style/main.css.js

@@ -0,0 +1 @@
+import "@/style/main.css"