Move software files one directory up, Readme

src/pages/misc/preferencesPage/aboutSection.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import packageJson from './../../../../package.json'
+
+</script>
+
+<template>
+  <card-view
+    :title="$t('preferences.aboutProject')"
+    icon="mdi-information"
+  >
+    <template #borderless>
+      <v-list>
+        <v-list-item
+          title="Software Version"
+          :subtitle="packageJson.version"
+          prepend-icon="mdi-counter"
+        />
+        <v-list-item 
+          title="Lizenz"
+          subtitle="MIT"
+          prepend-icon="mdi-license"
+        />
+        <v-list-item
+          title="Entwickler"
+          subtitle="Tobias Zoghaib"
+          prepend-icon="mdi-account"
+        />
+        <v-list-item 
+          title="Entwickelt im Auftrag"
+          subtitle="Uni Hannover, Institut für IT-Sicherheit, Fachgebiet Usable Security and Privacy"
+          prepend-icon="mdi-school"
+        />
+        <v-list-item 
+          title="Copyright"
+          subtitle="2024"
+          prepend-icon="mdi-copyright"
+        />
+      </v-list>
+    </template>
+  </card-view>
+</template>

src/pages/misc/preferencesPage/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import pageSetup from './pageSetupSection.vue';
+import systemSetup from './systemSetupSection.vue';
+import aboutSection from './aboutSection.vue';
+import userSection from './userSection.vue';
+</script>
+
+<template>
+  <v-container max-width="800">
+    <v-row>
+      <v-col>
+        <page-setup />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <user-section />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <system-setup />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <about-section />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

src/pages/misc/preferencesPage/pageSetupSection.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ThemeEnum } from '@/data/enums/themeEnums';
+import cardView from '@/components/basics/cardView.vue';
+import { usePreferencesStore } from '@/stores/preferences.store';
+
+const preferencesStore = usePreferencesStore()
+const themeEnums = Object.values(ThemeEnum)
+</script>
+
+<template>
+  <card-view
+    :title="$t('preferences.pageSetup')"
+    icon="mdi-view-dashboard"
+  >
+    <v-row>
+      <v-col>
+        <v-select
+          v-model="preferencesStore.theme"
+          :items="themeEnums"
+          :label="$t('preferences.selectedTheme')"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-select
+          v-model="preferencesStore.language"
+          :items="$i18n.availableLocales" 
+          :label="$t('preferences.language')"
+          variant="outlined"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+  </card-view>
+</template>

src/pages/misc/preferencesPage/systemSetupSection.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import confirmDialog from '@/components/basics/confirmDialog.vue';
+import { ServerStateEnum } from '@/data/enums/serverStateEnum';
+import { usePreferencesStore } from '@/stores/preferences.store';
+import ServerStateText from '@/components/pageParts/serverStateText.vue';
+import { useRouter } from 'vue-router';
+
+const preferenceStore = usePreferencesStore()
+const router = useRouter()
+
+preferenceStore.getServerState()
+</script>
+
+<template>
+  <card-view
+    :title="$t('preferences.systemSetup')"
+    icon="mdi-engine"
+  >
+    <template #borderless>
+      <v-list>
+        <v-list-item class="text-h6 text-center">
+          {{ $t('preferences.serverState') }}: <server-state-text />
+        </v-list-item>
+
+        <v-list-item class="text-center">
+          <outlined-button
+            @click="preferenceStore.showDeleteDbDialog = true"
+            prepend-icon="mdi-database-refresh"
+            color="red"
+            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+          >
+            {{ $t('preferences.resetDatabase.resetDatabase') }}
+          </outlined-button>
+        </v-list-item>
+
+        <v-list-item class="text-center">
+          <outlined-button
+            @click="preferenceStore.showDeleteExerciseDialog = true"
+            prepend-icon="mdi-progress-close"
+            color="red"
+            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+          >
+            {{ $t('preferences.resetExerciseProgress.resetExerciseProgress') }}
+          </outlined-button>
+        </v-list-item>
+
+        <v-list-item class="text-center">
+          <outlined-button
+            @click="preferenceStore.showFactoryResetDialog = true"
+            prepend-icon="mdi-factory"
+            color="red"
+            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+          >
+            {{ $t('preferences.factoryReset.factoryReset') }}
+          </outlined-button>
+        </v-list-item>
+      </v-list>
+    </template>
+  </card-view>
+
+  <!-- Confirm delete database -->
+  <confirm-dialog
+    :title="$t('preferences.resetDatabase.dialog.title')"
+    :description="$t('preferences.resetDatabase.dialog.description')"
+    v-model="preferenceStore.showDeleteDbDialog"
+    :onConfirm="preferenceStore.resetDb"
+    :loading="preferenceStore.fetchInProgress"
+  />
+
+  <!-- Confirm delete exercise progress -->
+  <confirm-dialog
+    :title="$t('preferences.resetExerciseProgress.dialog.title')"
+    :description="$t('preferences.resetExerciseProgress.dialog.description')"
+    v-model="preferenceStore.showDeleteExerciseDialog"
+    :onConfirm="preferenceStore.resetExerciseProg"
+    :loading="preferenceStore.fetchInProgress"
+  />
+
+  <confirm-dialog
+    :title="$t('preferences.factoryReset.dialog.title')"
+    :description="$t('preferences.factoryReset.dialog.description')"
+    v-model="preferenceStore.showFactoryResetDialog"
+    :onConfirm="() => {
+      preferenceStore.resetToFactorySettings()
+      router.push('/')
+    }"
+    :loading="preferenceStore.fetchInProgress"
+  />
+</template>

src/pages/misc/preferencesPage/userSection.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import { usePreferencesStore } from '@/stores/preferences.store';
+
+const preferencesStore = usePreferencesStore()
+</script>
+
+<template>
+  <card-view icon="mdi-account-school" :title="$t('misc.user')">
+    <v-row>
+      <v-col>
+        <v-text-field
+          variant="outlined"
+          hide-details
+          :label="$t('misc.yourFullName')"
+          v-model="preferencesStore.studentName"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          variant="outlined"
+          hide-details
+          :label="$t('misc.registrationNumber')"
+          v-model="preferencesStore.registrationNumber"
+        />
+      </v-col>
+    </v-row>
+  </card-view>
+</template>