VueRouter, Pinia state management, add pages, design preferences page

software/src/pages/preferencesPage/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Ref, ref } from 'vue';
+import pageSetup from './pageSetup.vue';
+import systemSetup from './systemSetup.vue';
+import BannerModel from '@/data/models/bannerModel';
+import alertBanner from '@/components/alertBanner.vue';
+
+const banner: Ref<BannerModel> = ref(new BannerModel())
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-col>
+        <v-container max-width="800">
+          <alert-banner v-model:alert-banner="banner" />
+
+          <v-row>
+            <v-col>
+              <page-setup />
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col>
+              <system-setup v-model:alert-banner="banner" />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-col>
+    </v-row>
+  </v-container>
+  
+</template>

software/src/pages/preferencesPage/pageSetup.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { ThemeEnum } from '@/data/enums/themeEnums';
+import { useTheme } from 'vuetify/lib/framework.mjs';
+import { useUserStore } from '@/data/stores/userStore';
+
+const userStore = useUserStore()
+const theme = useTheme()
+const themeEnums = Object.values(ThemeEnum)
+
+function changeTheme() {
+  theme.global.name.value = userStore.theme
+}
+</script>
+
+<template>
+  <v-card title="Page Setup" prepend-icon="mdi-view-dashboard">
+    <v-container>
+      <v-row>
+        <v-col>
+          <v-select v-model="userStore.theme" :items="themeEnums" label="Selected theme" @update:model-value="changeTheme" />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>

software/src/pages/preferencesPage/systemSetup.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import BannerModel from '@/data/models/bannerModel';
+import axios from 'axios';
+
+const alertBanner = defineModel("alertBanner", { required: true, type: BannerModel })
+
+function resetDb() {
+  axios.get("http://127.0.0.1:3000/api/resetdatabase")
+    .then(res => {
+      if (res.status == 200) {
+        alertBanner.value.show = true
+      }
+    })
+  // todo: Request all data
+}
+
+function resetSettings() {
+
+}
+</script>
+
+<template>
+  <v-card title="System Setup" prepend-icon="mdi-engine">
+    <v-container>
+      <v-row>
+        <v-col class="d-flex justify-center align-center">
+          <v-btn @click="resetDb" color="primary" prepend-icon="mdi-database-refresh">Datenbank zurücksetzen</v-btn>
+        </v-col>
+        <v-col class="d-flex justify-center align-center">
+          <v-btn @click="resetDb" color="primary" prepend-icon="mdi-cog-counterclockwise">Einstellungen zurücksetzen</v-btn>
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-card>
+</template>