Move Navigation from NavDrawer to AppBar, redesign page structure and routes

software/src/pages/system/helpPage/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import scoreCard from './scoreCard.vue';
+</script>
+
+<template>
+  <v-container max-width="1000">
+    <v-row>
+      <v-col>
+        <score-card
+          :title="$t('scoreBoard.exerciseGroup0')"
+          :progress="2"
+          :total-steps="2"
+          :step-names="['Registrieren', 'Bestellung ausführen']"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <score-card
+          :title="$t('scoreBoard.exerciseGroup1')"
+          :progress="1"
+          :total-steps="4"
+          :step-names="['', '']"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <score-card
+          :title="$t('scoreBoard.exerciseGroup2')"
+          :progress="1"
+          :total-steps="4"
+          :step-names="['', '']"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <score-card
+          :title="$t('scoreBoard.exerciseGroup3')"
+          :progress="0"
+          :total-steps="3"
+          :step-names="['', '', '']"
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

software/src/pages/system/helpPage/scoreCard.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import cardView from '@/components/cardView.vue';
+
+const props = defineProps({
+  exerciseGroup: String,
+  progress: Number,
+  totalSteps: Number,
+  stepNames: Array<String>
+})
+
+function getDotColor(step: number) {
+  if (props.progress >= step) {
+    return "green"
+  } else {
+    return "grey"
+  }
+}
+
+function getIcon(step: number) {
+  if (props.progress >= step) {
+    return "mdi-check"
+  } else {
+    return "mdi-pencil"
+  }
+}
+</script>
+
+<template>
+  <card-view :title="exerciseGroup" >
+    <v-timeline
+      direction="horizontal"
+      side="end"
+      class="pb-3"
+    >
+      <v-timeline-item
+        v-for="step in totalSteps"
+        :dot-color="getDotColor(step)"
+        :icon="getIcon(step)"
+      >
+        {{ stepNames[step - 1] }}
+
+        <template #opposite>
+          {{ $t('scoreBoard.exercise', [step]) }}
+        </template>
+        
+      </v-timeline-item>
+    </v-timeline>
+  </card-view>
+</template>

software/src/pages/system/preferencesPage/index.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import pageSetup from './pageSetup.vue';
+import systemSetup from './systemSetup.vue';
+</script>
+
+<template>
+  <v-container max-width="800">
+    <v-row>
+      <v-col>
+        <page-setup />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <system-setup />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>

software/src/pages/system/preferencesPage/pageSetup.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ThemeEnum } from '@/data/enums/themeEnums';
+import { useTheme } from 'vuetify/lib/framework.mjs';
+import { i18n } from '@/plugins/i18n';
+import cardView from '@/components/cardView.vue';
+import { usePreferencesStore } from '@/data/stores/preferencesStore';
+
+const preferencesStore = usePreferencesStore()
+const theme = useTheme()
+const themeEnums = Object.values(ThemeEnum)
+
+function changeTheme() {
+  theme.global.name.value = preferencesStore.theme
+}
+
+function changeLanguage() {
+  i18n.global.locale = preferencesStore.language
+}
+</script>
+
+<template>
+  <card-view :title="$t('preferences.pageSetup')" prepend-icon="mdi-view-dashboard" elevation="8">
+    <v-row>
+      <v-col>
+        <v-select
+          v-model="preferencesStore.theme"
+          :items="themeEnums"
+          :label="$t('preferences.selectedTheme')"
+          @update:model-value="changeTheme"
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-select v-model="preferencesStore.language" :items="$i18n.availableLocales" :label="$t('preferences.language')"
+        @update:model-value="changeLanguage"
+      />
+      </v-col>
+    </v-row>
+  </card-view>
+</template>

software/src/pages/system/preferencesPage/systemSetup.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { BannerStateEnum } from '@/data/enums/bannerStateEnum';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import cardView from '@/components/cardView.vue';
+import outlinedButton from '@/components/outlinedButton.vue';
+import { ref } from 'vue';
+import confirmDialog from '@/components/confirmDialog.vue';
+import { getServerState, resetDatabase } from '@/data/api/mainApi';
+import { ServerStateEnum } from '@/data/enums/serverStateEnum';
+
+const feedbackStore = useFeedbackStore()
+const showConfirmDialog = ref(false)
+const serverOnline = ref(ServerStateEnum.PENDING)
+
+getServerState()
+  .then(result => {
+    if (result.status == 200) {
+      serverOnline.value = ServerStateEnum.ONLINE
+    } else {
+      serverOnline.value = ServerStateEnum.OFFLINE
+    }
+  })
+  .catch(error => {
+    serverOnline.value = ServerStateEnum.OFFLINE
+  })
+
+async function resetDb() {
+  serverOnline.value = ServerStateEnum.PENDING
+
+  await resetDatabase()
+    .then(result => {
+      if (result.status == 200) {
+        feedbackStore.changeBanner(BannerStateEnum.DATABASERESETSUCCESSFUL)
+        serverOnline.value = ServerStateEnum.ONLINE
+      }
+    })
+
+  showConfirmDialog.value = false
+  // todo: Request all data
+}
+
+function resetSettings() {
+  // todo
+}
+</script>
+
+<template>
+  <card-view
+    :title="$t('preferences.systemSetup')"
+    prepend-icon="mdi-engine"
+  >
+    <v-row>
+      <v-col>
+        {{ $t('serverState') }}:
+        <span v-if="serverOnline == ServerStateEnum.ONLINE" class="text-green">
+          <v-icon icon="mdi-check" />
+          Online
+        </span>
+
+        <span v-else-if="serverOnline == ServerStateEnum.OFFLINE" class="text-red">
+          <v-icon icon="mdi-alert-circle" />
+          Offline
+        </span>
+
+        <span v-else-if="serverOnline == ServerStateEnum.PENDING" class="text-orange">
+          <v-icon icon="mdi-clock" />
+          Pending...
+        </span>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col class="d-flex justify-center align-center">
+        <outlined-button
+          @click="showConfirmDialog = true"
+          prepend-icon="mdi-database-refresh"
+          color="red"
+          :disabled="serverOnline != ServerStateEnum.ONLINE"
+        >
+          {{ $t('preferences.resetDatabase') }}
+        </outlined-button>
+      </v-col>
+      <v-col class="d-flex justify-center align-center">
+        <outlined-button
+          @click="resetSettings"
+          prepend-icon="mdi-cog-counterclockwise"
+        >
+          {{ $t('preferences.resetPreferences') }}
+        </outlined-button>
+      </v-col>
+    </v-row>
+  </card-view>
+
+  <confirm-dialog
+    :title="$t('dialog.resetConfirm.title')"
+    :description="$t('dialog.resetConfirm.description')"
+    v-model="showConfirmDialog"
+    :onConfirm="resetDb"
+  />
+</template>