Implementing Exercise system in database with API and frontend visualization

software/backend/data/exercises.json

@@ -0,0 +1,54 @@
+{
+  "data": [
+    {
+      "nameDe": "Den Shop kennenlernen",
+      "nameEn": "Getting to know the shop",
+      "groupNr": 0,
+      "exercises": [
+        {
+          "nameDe": "Registrieren",
+          "nameEn": "Register",
+          "exerciseNr": 1,
+          "descriptionDe": "Erstelle einen neuen Account im Online Shop",
+          "descriptionEn": "Create a new account in the online shop",
+          "solved": false
+        },
+        {
+          "nameDe": "Ein Ticket kaufen",
+          "nameEn": "Buy a ticket",
+          "exerciseNr": 2,
+          "descriptionDe": "Suche dir ein Event deiner Wahl und kaufe dafür ein Ticket",
+          "descriptionEn": "Search for an event of choice and buy a ticket for",
+          "solved": false
+        }
+      ]
+    },
+    {
+      "nameDe": "SQL Injections",
+      "nameEn": "SQL Injections",
+      "groupNr": 1,
+      "exercises": []
+    },
+    {
+      "nameDe": "Broken Access Control",
+      "nameEn": "Broken Access Control",
+      "groupNr": 2,
+      "exercises": []
+    },
+    {
+      "nameDe": "Cross-Site Scripting (XSS)",
+      "nameEn": "Cross-Site Scripting (XSS)",
+      "groupNr": 3,
+      "exercises": [
+        {
+          "nameDe": "Hallo Welt!",
+          "nameEn": "Hello World!",
+          "exerciseNr": 1,
+          "descriptionDe": "Nimm dir eine URL des Shops und erweitere sie mit JavaScript Code so, dass beim Öffnen des Links eine 'Hallo Welt' Nachricht erscheint",
+          "descriptionEn": "Take an URL of the shop and extend it with JavaScript code so that a 'Hello World' message appears whent the link is opened",
+          "solved": false
+        }
+      ]
+    }
+  ]
+}

software/backend/data/orders.json

@@ -10,7 +10,9 @@
         {
           "concertId": 0,
           "orderPrice": 184,
-          "seatId": 43
+          "seatGroup": "A",
+          "seatRow": 0,
+          "seat": 1
         }
       ]
     },
@@ -24,12 +26,16 @@
         {
           "concertId": 0,
           "orderPrice": 184,
-          "seatId": 2
+          "seatGroup": "A",
+          "seatRow": 0,
+          "seat": 2
         },
         {
           "concertId": 0,
           "orderPrice": 184,
-          "seatId": 3
+          "seatGroup": "A",
+          "seatRow": 0,
+          "seat": 3
         }
       ]
     },
@@ -43,7 +49,9 @@
         {
           "concertId": 0,
           "orderPrice": 184,
-          "seatId": 3
+          "seatGroup": "A",
+          "seatRow": 0,
+          "seat": 4
         }
       ]
     }

software/backend/database.ts

@@ -20,6 +20,8 @@ import { BandGenre } from "./models/acts/bandGenre.model"
 import { Seat } from "./models/locations/seat.model"
 import { SeatGroup } from "./models/locations/seatGroup.model"
 import { SeatRow } from "./models/locations/seatRow.model"
+import { Exercise } from "./models/exercises/exercise.model"
+import { ExerciseGroup } from "./models/exercises/exerciseGroup.model"
 
 const dbName = "database"
 const dbUser = "root"
@@ -36,19 +38,20 @@ export const sequelize = new Sequelize({
     AccountRole, Account, Payment, Address,
     City, Location, SeatGroup, SeatRow, Seat,
     Genre, Band, BandGenre, Rating, Member, Event, Concert,
-    Order, Ticket
+    Order, Ticket,
+    Exercise, ExerciseGroup
   ]
 })
 
 export function startDatabase() {
-  let force = false
+  let recreateDb = false
 
   // Create database and tables
-  sequelize.sync({ force: force })
+  sequelize.sync({ force: recreateDb })
     .then(() => {
       console.log("Database & tables created!")
 
-      if (force) {
+      if (recreateDb) {
         prepopulateDatabase()
       }
       

software/backend/models/exercises/exercise.model.ts

@@ -0,0 +1,33 @@
+import { BelongsTo, Column, ForeignKey, Model, Table } from "sequelize-typescript";
+import { ExerciseGroup } from "./exerciseGroup.model";
+
+@Table({ timestamps: false })
+export class Exercise extends Model {
+  @Column
+  nameDe: String
+
+  @Column
+  nameEn: String
+
+  @Column
+  exerciseNr: Number
+
+  @Column
+  descriptionDe: String
+
+  @Column
+  descriptionEn: String
+
+  @Column
+  solved: Boolean
+
+  @ForeignKey(() => ExerciseGroup)
+  @Column
+  exerciseGroupId: Number
+
+
+  // Relations
+
+  @BelongsTo(() => ExerciseGroup)
+  exerciseGroup: ExerciseGroup
+}

software/backend/models/exercises/exerciseGroup.model.ts

@@ -0,0 +1,20 @@
+import { Column, HasMany, Model, Table } from "sequelize-typescript";
+import { Exercise } from "./exercise.model";
+
+@Table({ timestamps: false })
+export class ExerciseGroup extends Model {
+  @Column
+  nameDe: String
+
+  @Column
+  nameEn: String
+
+  @Column
+  groupNr: Number
+
+
+  // Relations
+
+  @HasMany(() => Exercise)
+  exercises: Exercise[]
+}

software/backend/routes/account.routes.ts

@@ -4,6 +4,7 @@ import { validateString } from "../scripts/validateHelper";
 import { Address } from "../models/user/address.model";
 import { Payment } from "../models/user/payment.model";
 import { AccountRole } from "../models/user/accountRole.model";
+import { Exercise } from "../models/exercises/exercise.model";
 
 export const account = Router()
 
@@ -65,16 +66,26 @@ account.post("/", (req: Request, res: Response) => {
 
   // Create account
   Account.create(req.body)
-  .then(account => {
-    // Status: 201 Created
-    res.status(201).json(account)
-  }).catch(reason => {
-    // Status: 409 Conflict
-    res.status(409).json({
-      code: 409,
-      message: "Username already in use"
+    .then(account => {
+      // Status: 201 Created
+      res.status(201).json(account)
+
+      // Check exercise in table
+      Exercise.update(
+        { solved: true },
+        {
+          where: {
+            nameEn: "Register"
+          }
+        }
+      )
+    }).catch(reason => {
+      // Status: 409 Conflict
+      res.status(409).json({
+        code: 409,
+        message: "Username already in use"
+      })
     })
-  })
 })
 
 account.patch("/", (req: Request, res: Response) => {

software/backend/routes/api.routes.ts

@@ -7,12 +7,12 @@ api.get("/", (req: Request, res: Response, next: NextFunction) => {
   res.status(200).send()
 })
 
-api.get("/resetdatabase", (req: Request, res: Response, next: NextFunction) => {
+api.get("/resetdatabase", async (req: Request, res: Response, next: NextFunction) => {
   // Step 1: Delete all data tables
   deleteAllTables()
 
   // Step 2: Prepopulate with default values
-  prepopulateDatabase()
+  await prepopulateDatabase()
 
   // Step 3: Send status back
   res.status(200).send()

software/backend/routes/exercise.routes.ts

@@ -0,0 +1,23 @@
+import { Exercise } from "../models/exercises/exercise.model";
+import { ExerciseGroup } from "../models/exercises/exerciseGroup.model";
+import { Request, Response, Router } from "express";
+
+export const exercises = Router()
+
+exercises.get("/", (req: Request, res: Response) => {
+  ExerciseGroup.findAll(
+    {
+      include: [
+        {
+          model: Exercise,
+          separate: true,
+          order: [
+            [ 'id', 'ASC' ]
+          ]
+        }
+      ]
+    }
+  ).then(result => {
+    res.status(200).json(result)
+  })
+})

software/backend/scripts/databaseHelper.ts

@@ -16,6 +16,8 @@ import { BandGenre } from '../models/acts/bandGenre.model'
 import { SeatGroup } from '../models/locations/seatGroup.model'
 import { Seat } from '../models/locations/seat.model'
 import { SeatRow } from '../models/locations/seatRow.model'
+import { Exercise } from '../models/exercises/exercise.model'
+import { ExerciseGroup } from '../models/exercises/exerciseGroup.model'
 
 import accounts from "./../data/accounts.json"
 import orders from "./../data/orders.json"
@@ -24,6 +26,7 @@ import bands from "./../data/bands.json"
 import genres from "./../data/genres.json"
 import events from "./../data/events.json"
 import cities from "./../data/cities.json"
+import exercises from "./../data/exercises.json"
 
 
 /**
@@ -49,6 +52,9 @@ export function deleteAllTables() {
   Payment.destroy({ truncate: true })
   Account.destroy({ truncate: true })
   AccountRole.destroy({ truncate: true})
+
+  Exercise.destroy({truncate: true})
+  ExerciseGroup.destroy({truncate: true})
 }
 
 /**
@@ -144,10 +150,10 @@ export async function prepopulateDatabase() {
   }
 
 
-  for (let tour of events.data) {
-    await Event.create(tour)
+  for (let event of events.data) {
+    await Event.create(event)
       .then(async dataset => {
-        for (let concert of tour.concerts) {
+        for (let concert of event.concerts) {
           concert["eventId"] = dataset.id
           
           await Concert.create(concert)
@@ -161,7 +167,42 @@ export async function prepopulateDatabase() {
         for (let ticket of order.tickets) {
           ticket["orderId"] = dataset.id
 
-          await Ticket.create(ticket)
+          SeatGroup.findOne({
+            where: {
+              name: ticket.seatGroup
+            }
+          })
+            .then(seatGroup => {
+              SeatRow.findOne({
+                where: {
+                  seatGroupId: seatGroup.id,
+                  row: ticket.seatRow
+                }
+              })
+                .then(seatRow => {
+                  Seat.findOne({
+                    where: {
+                      seatRowId: seatRow.id,
+                      seatNr: ticket.seat
+                    }
+                  })
+                    .then(async seat => {
+                      ticket["seatId"] = seat.id
+                      await Ticket.create(ticket)
+                    })
+                })
+            })
+        }
+      })
+  }
+
+  for (let exerciseGroup of exercises.data) {
+    ExerciseGroup.create(exerciseGroup)
+      .then(async dataset => {
+        for (let exercise of exerciseGroup.exercises) {
+          exercise["exerciseGroupId"] = dataset.id
+
+          await Exercise.create(exercise)
         }
       })
   }

software/backend/server.ts

@@ -11,6 +11,7 @@ import { genre } from './routes/genre.routes'
 import { location } from './routes/location.routes'
 import { events } from './routes/events.routes'
 import { city } from './routes/city.routes'
+import { exercises } from './routes/exercise.routes'
 
 const app = express()
 const port = 3000
@@ -43,6 +44,7 @@ app.use("/orders", order)
 app.use("/accounts", account)
 app.use("/cities", city)
 app.use("/concerts", concert)
+app.use("/exercises", exercises)
 
 
 // Start server

software/src/components/basics/cardView.vue

@@ -5,20 +5,28 @@ defineProps({
   icon: {
     type: String
   },
-  subtitle: {
-    type: String,
+  loading: {
+    type: Boolean,
+    default: false
   }
 })
 </script>
 
 <template>
-  <v-card
-    variant="tonal"
-    :prepend-icon="icon"
-    :title="title"
-    :subtitle="subtitle"
-  >
-    <v-container class="pt-0">
+  <v-card variant="tonal" >
+    <v-card-title v-if="title || loading" color="primary" class="pa-0">
+      <v-sheet color="primary" class="pl-2 py-1">
+        <v-skeleton-loader
+          type="heading"
+          :loading="loading"
+          style="background-color: transparent"
+        >
+          <v-icon :icon="icon" v-if="icon" /> &nbsp;{{ title }}
+        </v-skeleton-loader>
+      </v-sheet>
+    </v-card-title>
+
+    <v-container>
       <v-row>
         <v-col >
           <slot></slot>

software/src/data/api/exerciseApi.ts

@@ -0,0 +1,7 @@
+import axios from "axios"
+
+const BASE_URL = "http://localhost:3000/exercises"
+
+export async function getAllExerciseGroups() {
+  return await axios.get(BASE_URL)
+}

software/src/data/models/exercises/exerciseGroupModel.ts

@@ -0,0 +1,8 @@
+import { ExerciseModel } from "./exerciseModel"
+
+export class ExerciseGroupModel {
+  nameDe: string = ""
+  nameEn: string = ""
+  groupNr: number = 0
+  exercises: Array<ExerciseModel>
+}

software/src/data/models/exercises/exerciseModel.ts

@@ -0,0 +1,8 @@
+export class ExerciseModel {
+  nameDe: string = ""
+  nameEn: string = ""
+  exerciseNr: number = 0
+  descriptionDe: string = ""
+  descriptionEn: string = ""
+  solved: boolean = false
+}

software/src/locales/de.json

@@ -159,5 +159,7 @@
   "seatGroup": "Kategorie",
   "date": "Datum",
   "price": "Preis",
-  "standingArea": "Stehbereich"
+  "standingArea": "Stehbereich",
+  "exerciseGroup": "Aufgabengruppe",
+  "exercise": "Aufgabe"
 }

software/src/locales/en.json

@@ -159,5 +159,7 @@
   "seatGroup": "Category",
   "date": "Date",
   "price": "Price",
-  "standingArea": "Standing Area"
+  "standingArea": "Standing Area",
+  "exerciseGroup": "Exercise group",
+  "exercise": "Exercise"
 }

software/src/pages/events/eventsPage/filterBar.vue

@@ -27,7 +27,6 @@ function itemPropsGenre(genre: GenreModel) {
   <card-view
     variant="tonal"
     :title="$t('filtering')"
-    subtitle="123"
     icon="mdi-cog"
   >
     <v-row class="d-flex justify-center" >

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

@@ -1,49 +1,35 @@
 <script setup lang="ts">
+import { getAllExerciseGroups } from '@/data/api/exerciseApi';
 import scoreCard from './scoreCard.vue';
+import { ref } from 'vue';
+import { ExerciseGroupModel } from '@/data/models/exercises/exerciseGroupModel';
+import { useFeedbackStore } from '@/data/stores/feedbackStore';
+
+const exerciseGroups = ref<Array<ExerciseGroupModel>>([])
+const feedbackStore = useFeedbackStore()
+
+feedbackStore.fetchDataFromServerInProgress = true
+
+getAllExerciseGroups()
+  .then(result => {
+    exerciseGroups.value = result.data
+    feedbackStore.fetchDataFromServerInProgress = false
+  })
 </script>
 
 <template>
   <v-container max-width="1000">
-    <v-row>
+    <v-row v-if="feedbackStore.fetchDataFromServerInProgress" v-for="i in 3">
       <v-col>
-        <score-card
-          :title="$t('scoreBoard.exerciseGroup0')"
-          :progress="2"
-          :total-steps="2"
-          :step-names="['Registrieren', 'Bestellung ausführen']"
-        />
+        <score-card :loading="true"
+      />
       </v-col>
     </v-row>
 
-    <v-row>
+    <v-row v-for="exerciseGroup in exerciseGroups">
       <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="['', '', '']"
+          :exercise-group="exerciseGroup"
         />
       </v-col>
     </v-row>

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

@@ -1,46 +1,83 @@
 <script setup lang="ts">
 import cardView from '@/components/basics/cardView.vue';
+import { ExerciseGroupModel } from '@/data/models/exercises/exerciseGroupModel';
 
-const props = defineProps({
-  exerciseGroup: String,
-  progress: Number,
-  totalSteps: Number,
-  stepNames: Array<String>
+defineProps({
+  exerciseGroup: ExerciseGroupModel,
+  loading: Boolean
 })
-
-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" >
+  <card-view v-if="loading" :loading="loading" >
     <v-timeline
       direction="horizontal"
-      side="end"
+      side="start"
       class="pb-3"
     >
       <v-timeline-item
-        v-for="step in totalSteps"
-        :dot-color="getDotColor(step)"
-        :icon="getIcon(step)"
+        v-for="i in 3"
+        dot-color="grey"
+        icon="mdi-pencil"
       >
-        {{ stepNames[step - 1] }}
+        <v-skeleton-loader
+          type="list-item"
+          :loading="loading"
+          width="200"
+        />
+
+      <template #opposite>
+        <v-skeleton-loader
+          type="sentences"
+          :loading="loading"
+          width="200"
+        />
+        </template>
+      </v-timeline-item>
+    </v-timeline>
+  </card-view>
+
+
+  <card-view
+    v-else
+    :title="$t('exerciseGroup') + ' ' + exerciseGroup.groupNr + ': ' +  exerciseGroup.nameDe"
+    :loading="loading"
+  >
+    <v-timeline
+      direction="horizontal"
+      side="start"
+      class="pb-3"
+    >
+      <v-timeline-item
+        v-for="exercise in exerciseGroup.exercises"
+        :dot-color="exercise.solved ? 'green' : 'grey'"
+        :icon="exercise.solved ? 'mdi-check' : 'mdi-pencil'"
+      >
+        <v-skeleton-loader
+          type="text"
+          :loading="loading"
+        >
+          <div class="text-h6">
+            {{ $t('exercise') }} {{ exercise.exerciseNr }}
+          </div>
+        </v-skeleton-loader>
+        
 
         <template #opposite>
-          {{ $t('scoreBoard.exercise', [step]) }}
+          <v-skeleton-loader
+          type="text"
+          :loading="loading"
+        >
+          <div class="text-center">
+            <div class="text-h6">
+              {{ exercise.nameDe }}
+            </div>
+
+            <div>
+              {{ exercise.descriptionDe }}
+            </div>
+          </div>
+        </v-skeleton-loader>
         </template>
         
       </v-timeline-item>