First startup dialog, factory reset

software/src/pages/misc/homePage/index.vue

@@ -4,20 +4,30 @@ import { useLocationStore } from '@/stores/location.store';
 import bandSection from './bandsSection.vue';
 import UpcomingConcertsSection from './upcomingConcertsSection.vue';
 import TopLocationsSection from './topLocationsSection.vue';
+import { usePreferencesStore } from '@/stores/preferences.store';
+import welcomeDialog from './welcomeDialog.vue';
+import { ref } from 'vue';
 
 const concertStore = useConcertStore()
 const locationStore = useLocationStore()
+const preferencesStore = usePreferencesStore()
+const showWelcomeDialog = ref(false)
 
 concertStore.getUpcomingConcerts()
 locationStore.getTopLocations()
+
+// First startup
+if (preferencesStore.firstStartup) {
+  showWelcomeDialog.value = true
+}
 </script>
 
 <template>
   <div class="pt-4">
-    <band-section />
+    <band-section v-if="!preferencesStore.firstStartup" />
   </div>
 
-  <v-container>
+  <v-container v-if="!preferencesStore.firstStartup">
     <v-row>
       <v-spacer />
 
@@ -30,4 +40,6 @@ locationStore.getTopLocations()
       <v-spacer />
     </v-row>
   </v-container>
+
+  <welcome-dialog :model-value="showWelcomeDialog" />
 </template>

software/src/pages/misc/homePage/welcomeDialog.vue

@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import ServerStateText from '@/components/pageParts/serverStateText.vue';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import { usePreferencesStore } from '@/stores/preferences.store';
+import { ref, watch } from 'vue';
+
+const preferencesStore = usePreferencesStore()
+const feedbackStore = useFeedbackStore()
+const showDialog = defineModel()
+const currentStep = ref(0)
+
+const steps = [
+  feedbackStore.i18n.t('misc.firstStartup.connectToServer'),
+  feedbackStore.i18n.t('misc.firstStartup.database'),
+  feedbackStore.i18n.t('misc.firstStartup.exercises'),
+  feedbackStore.i18n.t('misc.firstStartup.userData'),
+]
+
+preferencesStore.getServerState()
+
+
+watch(() => currentStep.value, () => {
+  switch(currentStep.value) {
+    case 2: {
+      preferencesStore.resetDb();
+      break;
+    }
+
+    case 3: {
+      preferencesStore.resetExerciseProg();
+      break;
+    }
+
+    case 4: {
+      
+      break;
+    }
+  }
+})
+</script>
+
+<template>
+  <action-dialog
+    v-model="showDialog"
+    :title="$t('misc.firstStartup.title')"
+    icon="mdi-human-greeting"
+    max-width="800"
+    persistent
+  >
+    <template #borderless>
+      <v-stepper
+        v-model="currentStep"
+        alt-labels
+        flat
+      >
+        <template #default="{ prev, next}">
+          <!-- Header items -->
+          <v-stepper-header>
+            <template v-for="(step, n) in steps">
+              <v-stepper-item
+                :complete="currentStep > n + 1"
+                :title="step"
+                :value="n + 1"
+                complete-icon="mdi-check"
+                color="green"
+              />
+
+              <v-divider v-if="n < steps.length - 1" />
+            </template>
+          </v-stepper-header>
+
+
+          <!-- Content -->
+          <v-stepper-window>
+            <v-stepper-window-item
+              :value="1"
+              class="text-h4 text-center"
+            >
+              <div>
+                {{ $t('preferences.serverState') }}:
+              </div>
+
+              <server-state-text />
+            </v-stepper-window-item>
+
+            <v-stepper-window-item
+              :value="2"
+            >
+              <div v-if="preferencesStore.fetchInProgress" class="text-center text-h4 pb-4">
+                <div class="pb-4">
+                  {{ $t('misc.firstStartup.createDatabase') }}
+                </div>
+
+                <v-progress-linear indeterminate />
+              </div>
+
+              <div v-else class="text-center text-h4 pb-4 text-green">
+                <v-icon icon="mdi-check" /> {{ $t('misc.firstStartup.finished') }}
+              </div>
+            </v-stepper-window-item>
+
+
+            <v-stepper-window-item
+              :value="3"
+            >
+              <div v-if="preferencesStore.fetchInProgress" class="text-center text-h4 pb-4">
+                <div class="pb-4">
+                  {{ $t('misc.firstStartup.createExercises') }}
+                </div>
+                
+                <v-progress-linear indeterminate />
+              </div>
+
+              <div v-else class="text-center text-h4 pb-4 text-green">
+                <v-icon icon="mdi-check" /> {{ $t('misc.firstStartup.finished') }}
+              </div>
+            </v-stepper-window-item>
+
+
+            <v-stepper-window-item
+              :value="4"
+            >
+              <v-container class="px-0 py-2">
+                <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>
+              </v-container>
+            </v-stepper-window-item>
+          </v-stepper-window>
+
+
+          <!-- Next/Previous buttons -->
+          <v-stepper-actions
+            @click:next="next"
+          >
+            <template #prev="{ props }">
+              <v-spacer />
+            </template>
+
+            <template #next="{ props }">
+              <outlined-button
+                v-if="currentStep < 4"
+                @click="props.onClick()"
+                :disabled="preferencesStore.fetchInProgress"
+              >
+                {{ $t('misc.actions.next') }}
+              </outlined-button>
+
+              <outlined-button
+                v-else
+                @click="showDialog = false; preferencesStore.firstStartup = false"
+                :disabled="preferencesStore.studentName.length == 0 || 
+                  preferencesStore.registrationNumber.length == 0"
+                prepend-icon="mdi-check"
+                color="green"
+              >
+                {{ $t('misc.firstStartup.complete') }}
+              </outlined-button>
+            </template>
+          </v-stepper-actions>
+        </template>
+      </v-stepper>
+    </template>
+  </action-dialog>
+</template>

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import pageSetup from './pageSetup.vue';
-import systemSetup from './systemSetup.vue';
+import pageSetup from './pageSetupSection.vue';
+import systemSetup from './systemSetupSection.vue';
 import aboutSection from './aboutSection.vue';
+import userSection from './userSection.vue';
 </script>
 
 <template>
@@ -12,6 +13,12 @@ import aboutSection from './aboutSection.vue';
       </v-col>
     </v-row>
 
+    <v-row>
+      <v-col>
+        <user-section />
+      </v-col>
+    </v-row>
+
     <v-row>
       <v-col>
         <system-setup />

software/src/pages/misc/preferencesPage/pageSetupSection.vue

@@ -1,21 +1,10 @@
 <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/basics/cardView.vue';
 import { usePreferencesStore } from '@/stores/preferences.store';
 
 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>
@@ -29,7 +18,6 @@ function changeLanguage() {
           v-model="preferencesStore.theme"
           :items="themeEnums"
           :label="$t('preferences.selectedTheme')"
-          @update:model-value="changeTheme"
           variant="outlined"
           hide-details
         />
@@ -42,7 +30,6 @@ function changeLanguage() {
           v-model="preferencesStore.language"
           :items="$i18n.availableLocales" 
           :label="$t('preferences.language')"
-          @update:model-value="changeLanguage"
           variant="outlined"
           hide-details
         />

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

@@ -1,84 +0,0 @@
-<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';
-
-const preferenceStore = usePreferencesStore()
-
-preferenceStore.getServerState()
-</script>
-
-<template>
-  <card-view
-    :title="$t('preferences.systemSetup')"
-    icon="mdi-engine"
-  >
-    <v-row>
-      <v-col>
-        {{ $t('preferences.serverState') }}:
-        <span v-if="preferenceStore.serverState == ServerStateEnum.ONLINE" class="text-green">
-          <v-icon icon="mdi-check" />
-          Online
-        </span>
-
-        <span v-else-if="preferenceStore.serverState == ServerStateEnum.OFFLINE" class="text-red">
-          <v-icon icon="mdi-alert-circle" />
-          Offline
-        </span>
-
-        <span v-else-if="preferenceStore.serverState == 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="preferenceStore.showDeleteDbDialog = true"
-          prepend-icon="mdi-database-refresh"
-          color="red"
-          :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE"
-        >
-          {{ $t('preferences.resetDatabase.resetDatabase') }}
-        </outlined-button>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col class="d-flex justify-center align-center">
-        <outlined-button
-        @click="preferenceStore.showDeleteExerciseDialog = true"
-          prepend-icon="mdi-progress-close"
-          color="red"
-          :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE"
-        >
-          {{ $t('preferences.resetExerciseProgress.resetExerciseProgress') }}
-        </outlined-button>
-      </v-col>
-    </v-row>
-  </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"
-  />
-</template>

software/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>

software/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>