Add exercise group descriptions to help page, restructure timeline

software/backend/data/accounts.json

@@ -98,7 +98,7 @@
           "iban": "DE41500105172184936679"
         }
       ],
-      "accountRoleId": 2
+      "accountRoleId": 3
     },
     {
       "username": "guitarhero",

software/src/locales/de.json

@@ -243,7 +243,8 @@
     "yourFullName": "Vollständiger Name",
     "chooseFile": "Datei auswählen",
     "chooseDestinationFolder": "Zielordner auswählen",
-    "upload": "Hochladen"
+    "upload": "Hochladen",
+    "fulfillYourPersonalDataFirst": "Gehe zu den Einstellungen und fülle deinen Namen und deine Matrikelnummer aus"
   },
   "genre": {
     "withoutBand": "ohne Band"

software/src/locales/en.json

@@ -243,7 +243,8 @@
     "yourFullName": "Full name",
     "chooseFile": "Choose file",
     "chooseDestinationFolder": "Choose destination folder",
-    "upload": "Upload"
+    "upload": "Upload",
+    "fulfillYourPersonalDataFirst": "Go to settings and enter your name and the right register number"
   },
   "genre": {
     "withoutBand": "without Band"

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

@@ -26,7 +26,20 @@ function getDotColor(exerciseGroupNr: number) {
     <v-row>
       <v-spacer />
 
+      <v-col
+        v-if="preferencesStore.studentName.length < 3 || preferencesStore.registrationNumber.length < 7"
+        cols="auto"
+      >
+        <card-view variant="outlined" >
+          {{ $t('misc.fulfillYourPersonalDataFirst') }}
+        </card-view>
+      </v-col>
+
       <v-col cols="auto">
+        <v-tooltip :text="$t('misc.fulfillYourPersonalDataFirst')">
+          <template #activator="{ props }"></template>
+
+        </v-tooltip>
         <outlined-button
           prepend-icon="mdi-file-pdf-box"
           @click="generateResultsPdf()"
@@ -49,16 +62,13 @@ function getDotColor(exerciseGroupNr: number) {
               class="px-5"
               align="start"
             >
-              <v-timeline-item
-                v-for="exercise of exerciseStore.exercises"
-                :dot-color="getDotColor(exercise.exerciseGroup.groupNr)"
-                :icon="exercise.solved ? 'mdi-check' : 'mdi-pencil'"
+              <template v-for="exercise of exerciseStore.exercises">
+                <v-timeline-item v-if="exercise.exerciseNr == 1"
+                  dot-color="grey"
+                  fill-dot
                 >
-                <!-- Left side -->
-                <template #opposite>
                   <div
-                    v-if="exercise.exerciseNr == 1"
-                    :class="`pt-1 font-weight-bold text-${getDotColor(exercise.exerciseGroup.groupNr)}`"
+                    :class="`pt-1 text-h5 font-weight-bold text-${getDotColor(exercise.exerciseGroup.groupNr)}`"
                   >
                     {{
                       (preferencesStore.language == LanguageEnum.GERMAN 
@@ -66,8 +76,20 @@ function getDotColor(exerciseGroupNr: number) {
                       : exercise.exerciseGroup.nameEn) 
                     }}
                   </div>
-                </template>
 
+                  <div>
+                    {{
+                      (preferencesStore.language == LanguageEnum.GERMAN 
+                      ? exercise.exerciseGroup.descriptionDe 
+                      : exercise.exerciseGroup.descriptionEn) 
+                    }}
+                  </div>
+                </v-timeline-item>
+
+                <v-timeline-item
+                  :dot-color="getDotColor(exercise.exerciseGroup.groupNr)"
+                  :icon="exercise.solved ? 'mdi-check' : 'mdi-pencil'"
+                >
                    <!-- Right side -->
                   <card-view
                     :title="$t('help.scoreBoard.exerciseNr', [exercise.exerciseGroup.groupNr, exercise.exerciseNr]) + 
@@ -77,6 +99,7 @@ function getDotColor(exerciseGroupNr: number) {
                     {{ preferencesStore.language == LanguageEnum.GERMAN ? exercise.descriptionDe : exercise.descriptionEn }}
                   </card-view>
                 </v-timeline-item>
+              </template>
             </v-timeline>
           </template>
         </card-view>