Bugfix genre store

Limit nr of top genres on homepage
Bugfixes: No startup after packaging, infinity loading on concert booking page if user comes from band page
2025-09-01 15:08:13 +02:00 · 2025-09-01 14:49:02 +02:00 · 2025-09-01 14:22:53 +02:00 · 2025-08-31 11:47:56 +02:00 · 2025-08-31 11:33:25 +02:00 · 2025-08-30 14:11:18 +02:00
103 changed files with 5719 additions and 1931 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,5 +11,6 @@
  "i18n-ally.enabledFrameworks": [
    "vue"
  ],
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.extract.autoDetect": true,
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,53 @@
-# v.0.1.0 (Alpha)
+# v.0.4.0 MuC-Edition (2025-09-01)
+
+## 🚀 Features
+
+- Exercise selection system
+
+## 🌟 Enhancements
+
+- Tooltips on append icons in toolbar
+- Exercise page icon adds open exercises badge
+- Finished english translation
+- Icons on exercise groups on help page
+- Welcome dialog: New page for look and feel, merge database and exercise creation in one step
+- Add links to GitHub and project page on settings
+- New section on homepage for popular genres
+
+## 🐛 Bugfixes
+
+- Filter on band page changes visible bands on homepage
+- No startup after packaging
+- Infinity loading on concert booking page is user comes from band page
+
+# v.0.3.0 (2025-02-28)
+## 🚀 Features
+- Swagger Documentation
+- RPM Image
+
+## 🐛 Bugfixes
+- Bugfix on search page for Band datasets
+
+# v.0.2.0 (2024-12-05)
+## 🚀 Features
+- Adding "Test Environment" banner in the bottom right corner
+- License handling system
+- New SQL-Injection exercise 2.1
+- Solution code based on Matrikelnummer and number of completed exercises
+
+## 🌟 Enhancements
+- Improve exercise solution of 2.1, 2.2, 2.3, 2.4 and 2.6
+- Light mode improvements
+- Global color schema
+- More feedback through notifications
+- More hints on text fields
+- Redesign account pages, split payments and addresses, new dashboard
+
+## 🐛 Bugfixes
+- More server stability
+- Bugfix file manager in Electron application
+
+# v.0.1.0 (2024-11-21)
 ## 🚀 Features
 - Frontend
  - VueJS frontend framework with Vuetify UI library
--- a/README.md
+++ b/README.md
@@ -1,30 +1,116 @@
-# HackMyCart
+<p align="center">
+  <img src="misc/images/logo.png" width="300" />
+</p>

-The most hackable Web Shop!
+<h1 align="center">EventMaster</h1>
+<h2 align="center">The most hackable Ticket-Shop!</h2>
+
+![Hompage](/misc/images/homepage.png)
+
+## About the project
+
+EventMaster is a desktop application for simulating various hacking methods for web applications. It's the perfect tool to understand  vulnerabilities in modern web applications.
+
+The shop offers tickets for concerts of popular bands with a complete ordering system, account management and admin interface. The program has been deliberately provided with vulnerabilities for teaching purposes, e.g. SQL injections. If a task is solved and a vulnerability is identified, the system provides visual feedback. The progress can be viewed on an overview page.
+
+This project is created during my Bachelor thesis. It will be used at Leibniz University Hannover for foundation lectures.
+
+## Important notes!
+- ⚠️ The project is under development, bugs may occur
+- ⚠️ The software is developed for educational purposes, don't use the attack techniques without permission on other applications and systems!
+- ⚠️ Works 100% offline, no data transmission to or from external services
+
+## Features
+- 13 exercises
+- 3 attack techniques
+  - SQL-Injections
+  - Cross-Site-Scripting
+  - Broken Access Control
+- Exercise control system - check the progress and get feedback for solved exercises!
+- Full working ticket shop:
+  - Vuetify design
+  - Account management system
+  - Order process system
+  - Event locations with seat plan and seat reservation system during ordering process
+  - Global search
+  - Admin panel
+  - Product pages
+  - ExpressJs-Backend server
+  - REST-API
+  - SQLite Database
+- URL simulation bar for electron application
+- Works 100% offline
+- Multi language support (German, English)
+- Dark/Light-Mode
+- Exercise progress PDF generation
+- API-Documentation with Swagger
+- Desktop application packed with Electron
+- Database can be resetted complete or partially
+
+### Techstack
+
+- Axios
+- Electron
+- Electron Builder
+- Express.js
+- JsonWebToken
+- jspdf
+- Moment.js
+- NPM
+- Nodemon
+- Pinia
+- Sequelize
+- SQLite 3
+- Swagger
+- TypeScript
+- Vite
+- Vue i18n
+- Vue.js
+- VueRouter
+- Vuetify
+
+### Planned features
+
+- More attack techniques
+- More exercises
+- More languages
+- Customize the offered set of exercises (for trainer)
+- Image license view system (currently only in admin panel)
+
+### Screenshots
+
+#### Band Detail page
+![Band Detail page](/misc/images/band-detail-seite.png)
+
+#### Booking page
+![Booking page](/misc/images/booking-concert.png)
+
+#### Admin panel
+![Admin panel](/misc/images/admin-panel.png)
+
+#### Global search
+![Global search](/misc/images/search.png)
+
+#### Feedback on exercise solution
+![Snackbar Feedback](/misc/images/snackbar-feedback.png)

 ## How to use

-### Prepare development environment
+### Download pre-builded images

-1. Install node.js
+Go to releases and download one of the pre-builded images for your operating system.

-```bash
-sudo apt install npm
+### Build yourself

-# If outdated version:
-sudo npm install -g n
-sudo n stable
-```
-
-2. Download + extract the project
-3. Open the root folder with VS Code (recommended)
-4. Open the bash inside VS Code and install all necessary packages:
+1. Download + extract the project
+2. Open the root folder with VS Code (recommended)
+3. Open the bash inside VS Code and install all necessary packages:

 ```bash
 npm i
 ```

-### Test/development
+#### Test/development

 There are multiple commands to test parts or the whole project:

@@ -34,7 +120,7 @@ There are multiple commands to test parts or the whole project:

 The frontend runs on `http://localhost:5173/` and the backend on `http://localhost:3000/`

-### Build
+#### Build

 - `npm run vite:build`: Build Vue frontend only
 - `npm run server:build`: Build ExpressJs backend only
@@ -48,423 +134,6 @@ The frontend runs on `http://localhost:5173/` and the backend on `http://localho
 ### Database
 ![database-erm](misc/images/database.png)

+### Frontend-Backend-System

-### Backend API endpoints
-
-The application host it's data in a SQLite database. The access is managed by an [ExpressJs](https://expressjs.com/) server which offers many REST-API endpoints for the frontend. The REST-API server runs on port 3000.
-
---
-
-#### Listing existing
-
-<details open>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/accounts/</b></code> <code> (Get all Accounts)</code>
-</summary>
-
-##### Parameters
-> None
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Array<Account + AccountRole>`  |
-
-##### Example Response
-```json
-[
-  {
-    "id": 421,
-    "username": "hagemeister93",
-    "password": "Xjt3qb5t",
-    "email": "hagemeister93@gmail.com",
-    "firstName": "Laurin",
-    "lastName": "Hagemeister",
-    "accountRoleId": 2,
-    "accountRole": {
-      "id": 2,
-      "name": "Admin",
-      "privilegeBuy": true,
-      "privilegeAdminPanel": true
-    }
-  }
-]
-```
-
-</details>
-
-<details open>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/api/files</b></code> <code> (Get all public files)</code>
-</summary>
-
-##### Parameters
-> None
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Array<{folder: String, files: Array<{name: String, size: Number, url: String}> }>`  |
-
-##### Example Response
-```json
-[
-  {
-    "folder": "artists",
-    "files": [
-      {
-        "name": "alex-turner.jpg",
-        "size": 56473,
-        "url": "http://localhost:3000/static/artists/alex-turner.jpg"
-      },
-      {
-        "name": "andy-nicholson.jpg",
-        "size": 68983,
-        "url": "http://localhost:3000/static/artists/andy-nicholson.jpg"
-      }
-    ]
-  }
-]
-```
-</details>
-
-<details open>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/bands/</b></code> <code> (Get all bands)</code>
-</summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | :---: | --- | --- | --- |
-> | `sort` |  optional | string   | Sort by number of concerts ascending (asc) or descending (desc) |
-> | `count` |  optional | number   | Number of items to responde |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Array<>`  |
-
-##### Example Response
-```json
-[
-  {
-    "folder": "artists",
-    "files": [
-      {
-        "name": "alex-turner.jpg",
-        "size": 56473,
-        "url": "http://localhost:3000/static/artists/alex-turner.jpg"
-      },
-      {
-        "name": "andy-nicholson.jpg",
-        "size": 68983,
-        "url": "http://localhost:3000/static/artists/andy-nicholson.jpg"
-      }
-    ]
-  }
-]
-```
-</details>
-
-
-
-
-
-
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/events?city=cityName&genre=genreName&count=nrOfItems&sort=sortDirection</b></code> <code> (Get all events, filtered by city and genre)</code>
-</summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | :---: | --- | --- | --- |
-> | `cityName` |  optional | string   | Name of the city to filter for  |
-> | `genreName` |  optional | string   | Name of the genre to filter for  |
-> | `nrOfItems` |  optional | number   | Limits number of results |
-> | `sortDirection` |  optional | string   | Sort by number of concerts, 'asc' or 'desc' |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Array<Event + Array<Concert + Location + City> + Band & Genre>`  |
-</details>
-
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/locations?count=nrOfItems&sort=sortDirection</b></code> <code> (Get all locations)</code>
-</summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | :---: | --- | --- | --- |
-> | `nrOfItems` |  optional | number   | Limits number of results |
-> | `sortDirection` |  optional | string   | Sort by number of concerts, 'asc' or 'desc' |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Array<Location + City + Array<Concert + Event>>`  |
-</details>
-
-
-Down here: todo!
-
-
-
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/bands</b></code> <code> (Get all bands)</code>
-</summary>
-
-##### Parameters
-> None
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Array<Band>`  |
-</details>
-
-
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/bands/:id</b></code> <code> (Get all information about one band)</code>
-</summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | :---: | --- | --- | --- |
-> | `id` |  required | string   | ID of product in the database  |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Band` + `Array<Rating>` + `Array<Member>`  |
-</details>
-
-
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/shows/:id</b></code> <code> (Get all information about one show)</code>
-</summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | :---: | --- | --- | --- |
-> | `id` |  required | string   | ID of product in the database  |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Show` + `Tour` + `Location` + `City`  |
-</details>
-
-
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/tours</b></code> <code> (Get all tours)</code>
-</summary>
-
-##### Parameters
-> None
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Array<Tours>` + `Band` + `Show` + `Location` + `City`  |
-</details>
-
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/genres</b></code> <code> (Get all genres)</code>
-</summary>
-
-##### Parameters
-> None
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Array<Genre>`  |
-</details>
-
-
-
-
-
-
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/orders/:id</b></code> <code> (Get all orders of an user)</code>
-</summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | --- | --- | --- | --- |
-> | `id` |  required | string   | ID of userAccount in the database  |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `ProductModel` + `Order`, `OrderItem`, `Product`  |
-</details>
-
-
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/categories/</b></code> <code> (Get all Categories)</code>
-</summary>
-
-##### Parameters
-> None
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Array<Categories>` |
-</details>
-
-
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/brands</b></code> <code> (Get all Brands)</code>
-</summary>
-
-##### Parameters
-> None
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `Array<Brand>` |
-</details>
-
-
---
-
-
-#### Creating new
-
-<details>
-<summary><code><span style="color:#69CA92"><b>POST</b></span></code> <code><b>/accounts/</b></code> <code> (Create a new account)</code>
-</summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | :---: | --- | --- | --- |
-> | None |  required | object (JSON) | Model of an Account |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `201` | `application/json` | `AccountModel`  |
-> | `400` | `application/json` | `{code: 400, message: "Username too short!"}` |
-> | `400` | `application/json` | `{code: 400, message: "Password too short!"}` |
-> | `409` | `application/json` | `{code: 409, message: "Username already in use"}` |
-</details>
-
-
-<details>
-<summary><code><span style="color:#69CA92"><b>POST</b></span></code> <code><b>/orders/</b></code> <code> (Create a new order)</code>
-</summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | :---: | --- | --- | --- |
-> | None |  required | object (JSON) | Model of an Order |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `201` | `application/json` | `OrderModel`  |
-</details>
-
---
-
-#### Updating existing
-
-<details>
-<summary><code><span style="color:#F3A63D"><b>PATCH</b></span></code> <code><b>/accounts/</b></code> <code> (Update data of an existing account)</code>
-</summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | :---: | --- | --- | --- |
-> | None |  required | object (JSON) | Model of an Account |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | AccountModel  |
-> | `400` | `application/json` | `{code: 400, message: "..."}` |
-</details>
-
---
-
-#### Delete existing
-
-<!-- <details>
-<summary><code><span style="color:#EB5246"><b>DELETE</b></span></code> <code><b>/product/:id</b></code> <code> (Delete a product)</code>
-</summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | :---: | --- | --- | --- |
-> | `id` |  required | string | ID of product in the database |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `ProductModel`  |
-> | `400` | `application/json` | `{code: 400, message: "..."}` |
-</details> -->
-
---
-
-#### Miscs
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/api/</b></code> <code> (Check if server runs)</code>
-</summary>
-
-##### Parameters
-> None
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | None | None |
-</details>
-
-<details>
-<summary><code><span style="color:#70AFFD"><b>GET</b></span></code> <code><b>/resetDatabase/</b></code> <code> (Reset the database to it's default values)</code>
-</summary>
-
-##### Parameters
-> None
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | None | None |
-</details>
-
-
-#### Validate
-
-<details>
-<summary><code><span style="color:#69CA92"><b>POST</b></span></code> <code><b>/accounts/login</b></code> <code> (Login for user)</code></summary>
-
-##### Parameters
-> | name | type | data type | description |
-> | --- | --- | --- | --- |
-> | username |  required | string   | Username of the account  |
-> | password |  required | string   | Password of the account  |
-
-##### Responses
-> | http code | content-type | response |
-> | :---: | --- | --- |
-> | `200` | `application/json` | `AccountObject` + `Addresses`, `Payments`, `AccountRole`  |
-> | `400` | `application/json` | `{code: 400, message: "Bad Request"}` |
-> | `401` | `application/json` | `{code: 401, message: "Unauthorized"}` |
-</details>
-
---
+![frontend-backend-system](misc/images/frontend-backend-system.png)
--- a/backend/data/accountRoles.json
+++ b/backend/data/accountRoles.json
@@ -4,29 +4,19 @@
      "id": 0,
      "name": "Unregistered",
      "privilegeBuy": false,
-      "privilegeAdminPanel": false,
-      "privilegeFileAccess": false
+      "privilegeAdminPanel": false
    },
    {
      "id": 1,
      "name": "User",
      "privilegeBuy": true,
-      "privilegeAdminPanel": false,
-      "privilegeFileAccess": false
+      "privilegeAdminPanel": false
    },
    {
      "id": 2,
      "name": "Admin",
      "privilegeBuy": true,
-      "privilegeAdminPanel": true,
-      "privilegeFileAccess": false
-    },
-    {
-      "id": 3,
-      "name": "Super-Admin",
-      "privilegeBuy": true,
-      "privilegeAdminPanel": true,
-      "privilegeFileAccess": true
+      "privilegeAdminPanel": true
    }
  ]
 }
--- a/backend/data/accounts.json
+++ b/backend/data/accounts.json
@@ -19,7 +19,7 @@
          "iban": "DE92500105175721645777"
        }
      ],
-      "accountRoleId": 2
+      "accountRoleId": 1
    },
    {
      "username": "katjaStoiber",
@@ -94,7 +94,7 @@
          "iban": "DE41500105172184936679"
        }
      ],
-      "accountRoleId": 3
+      "accountRoleId": 2
    },
    {
      "username": "guitarhero",
--- a/backend/data/exercises.json
+++ b/backend/data/exercises.json
@@ -3,127 +3,144 @@
    {
      "nameDe": "Den Shop kennenlernen",
      "nameEn": "Getting to know the shop",
+      "icon": "mdi-human-greeting",
      "groupNr": 0,
      "descriptionDe": "Vor einem Angriff ist es wichtig zu verstehen, wie die Webseite aufgebaut ist. Wie sind die URLs strukturiert? Wo befinden sich Eingabefelder welche im Backend eine SQL Abfrage stellen?",
-      "descriptionEn": "todo",
+      "descriptionEn": "Before an attack, it's important to understand how the website is structured. How are the URLs structured? Where are input fields located that execute SQL queries in the backend?",
      "exercises": [
        {
+          "uuid": "getting-known-register",
          "nameDe": "Registrieren",
          "nameEn": "Register",
          "exerciseNr": 1,
          "descriptionDe": "Wir richten uns einen gewöhnlichen Account auf der Plattform ein. Navigiere hierzu auf die Account-Seite und registriere dich.",
-          "descriptionEn": "Create a new account in the online shop"
+          "descriptionEn": "We'll set up a regular account on the platform. To do this, navigate to the account page and register."
        },
        {
+          "uuid": "getting-known-profile",
          "nameDe": "Profil vervollständigen",
          "nameEn": "Complete profile",
          "exerciseNr": 2,
          "descriptionDe": "Bestellungen sind erst möglich, wenn das Account-Profil vervollständigt ist. Logge dich ein, navigiere zu den Account-Einstellungen, fülle den Namen aus und füge je eine Adresse und Bezahlart hinzu. Speichere alles zum Schluss ab.",
-          "descriptionEn": "Search for an event of choice and buy a ticket for"
+          "descriptionEn": "Orders are only possible once your account profile is complete. Log in, navigate to your account settings, fill in your name, and add an address and payment method. Finally, save everything."
        },
        {
+          "uuid": "getting-known-buy-ticket",
          "nameDe": "Ein Ticket kaufen",
          "nameEn": "Buy a ticket",
          "exerciseNr": 3,
          "descriptionDe": "Wir führen nun einen Bestellvorgang durch. Wähle hierzu ein Konzert deiner Wahl und lege Tickets in den Warenkorb. Öffne diesen und schließe die Bestellung ab. Beachte die Struktur der URL wenn du ein Konzert buchen willst. Sieh dir ruhig 2-3 Buchungsseiten an, wie sich die URL jeweils verändert.",
-          "descriptionEn": "Search for an event of choice and buy a ticket for"
+          "descriptionEn": "We'll now complete the order process. Select a concert of your choice and add tickets to your shopping cart. Open the shopping cart and complete your order. Pay attention to the URL structure when booking a concert. Feel free to look at two or three booking pages to see how the URL changes each time."
        }
      ]
    },
    {
      "nameDe": "Broken Access Control",
      "nameEn": "Broken Access Control",
+      "icon": "mdi-application-outline",
      "groupNr": 1,
      "descriptionDe": "Eine Webseite beinhaltet öffentlich einsehbare und einige geschützte Seiten. Letztere sind nur mit passenden Berechtigungen erreichbar. Beispiele hierfür sind ein Admin-Panel oder der persönliche Warenkorb. Der Zugriff wird oft über Cookies oder eine Authentifizierung an einem Backend-Server geregelt. Bei Broken Access Control ist dieser Sicherheits-Mechanismus nicht oder fehlerhaft implementiert. Somit lassen sich Seiten unberechtigterweise über die URL erreichen.",
-      "descriptionEn": "todo",
+      "descriptionEn": "A website contains publicly visible pages and some protected pages. The latter can only be accessed with appropriate permissions. Examples include an admin panel or the personal shopping cart. Access is often controlled via cookies or authentication on a backend server. With broken access control, this security mechanism is either not implemented or is incorrectly implemented. This allows pages to be accessed without authorization via the URL.",
      "exercises": [
        {
+          "uuid": "broken-access-control-exercise-page",
          "nameDe": "Hilfe-Seite aufrufen",
          "nameEn": "Access Help Page",
          "exerciseNr": 1,
          "descriptionDe": "Die Hilfe-Seite erlaubt dir einen Einblick auf den Bearbeitungszustand der Aufgaben. Sie ist dementsprechend nicht abgesichert, aber auch (noch) nicht in der Titel-Leiste als Button erreichbar. Erweitere die URL in der Adresszeile so, dass du auf die Hilfeseite gelangst.",
-          "descriptionEn": "Manipulate the URL and access the help page"
+          "descriptionEn": "The help page provides insight into the processing status of tasks. It's therefore not secure, but it's also not (yet) accessible as a button in the title bar. Expand the URL in the address bar to access the help page."
        },
        {
+          "uuid": "broken-access-control-hidden-concert",
          "nameDe": "Das versteckte Konzert buchen",
          "nameEn": "Book the hidden concert",
          "exerciseNr": 2,
          "descriptionDe": "Die Band >>Arctic Monkeys<< will auf ihrer >>European Tour<< drei Konzerte spielen. Im Shop finden sich allerdings nur zwei Einträge. Zwischen den beiden Tourdaten soll eine Show in der Lanxess Arena in Köln stattfinden, der Datensatz hierfür ist bereits angelegt, jedoch nicht freigeschaltet. Besuche die Seite der Band. Sieh dir den Zeitraum zwischen beiden Konzerten an, in denen das versteckte Event liegen könnte. Öffne eine Buchungsseite eines anderen Konzertes und ändere die URL so ab, dass du das versteckte Konzert buchen kannst. Reserviere dir mindestens ein Ticket und schließe den Bestellprozess ab.",
-          "descriptionEn": "Manipulate the URL and access the sold out concert and buy a ticket"
+          "descriptionEn": "The band >>Arctic Monkeys<< plans to play three shows on their >>European Tour<<. However, there are only two entries in the shop. A show at the Lanxess Arena in Cologne is scheduled to take place between the two tour dates. The dataset for this has already been created but is not yet activated. Visit the band's website. Look at the time period between the two concerts, where the hidden event could take place. Open a booking page for another concert and change the URL so that you can book the hidden concert. Reserve at least one ticket and complete the order process."
        }
      ]
    },
    {
      "nameDe": "SQL Injections",
      "nameEn": "SQL Injections",
+      "icon": "mdi-needle",
      "groupNr": 2,
      "descriptionDe": "Eine Datenbank arbeitet mit SQL Befehlen um Datensätze anzulegen, abzurufen, zu verändern und löschen. Ein Server wird über API-Schnittstellen angesprochen, führt die Befehle in der Datenbank aus und liefert das Ergebnis zurück. Der Client darf keinen direkten Zugriff auf die Datenbank haben. Bei SQL Injections wird versucht, diesen Sicherheitsmechanismus zu umgehen und über die API-Schnittstellen direkte SQL Befehle auszuführen.",
-      "descriptionEn": "todo",
+      "descriptionEn": "A database uses SQL commands to create, retrieve, modify, and delete records. A server is accessed via API interfaces, executes the commands in the database, and returns the results. The client must not have direct access to the database. SQL injection attempts to circumvent this security mechanism and execute SQL commands directly via the API interfaces.",
      "exercises": [
        {
+          "uuid": "sql-injection-database-scheme",
          "nameDe": "Wie sieht die Datenbank aus?",
          "nameEn": "How does the database look like?",
          "exerciseNr": 1,
          "descriptionDe": "Wir versuchen nun die Datenbank im Hintergrund anzugreifen. Aktuell wissen wir aber noch nicht wie die Datenbank aussieht, also welche Tabellen sie beinhaltet. Wir können uns aber mit einem SQL-Befehl ausgeben. Gehe zur globalen Suchseite. Öffne mit der Tastenkombination >>Strg<< + >>D<< die >>Developer Tools<<. Klicke auf den Reiter >>Network<<. Hier siehst du, wie das Frontend mit dem Server kommuniziert. Schreibe nun eine SQL-Injection, welche den Suchbegriff ignoriert und dir stattdessen alle Datensätze der Tabelle >>sqlite_master<< zurück gibt, sofern die Bedingung >>type='table'<< erfüllt ist. Kopiere dir bei erfolgreicher Rückmeldung des Backends die Namen der Tabellen in eine Text-Datei, damit wir für die kommenden Aufgaben die richtigen Namen der Tabellen angeben können.",
-          "descriptionEn": "todo"
+          "descriptionEn": "We'll now attempt to attack the database in the background. Currently, we don't yet know what the database looks like, or which tables it contains. However, we can use an SQL command to inject it. Go to the global search page. Open the Developer Tools using the keyboard shortcut Ctrl + D. Click on the Network tab. Here you can see how the frontend communicates with the server. Now write an SQL injection that ignores the search term and instead returns all records in the sqlite_master table, provided the type='table' condition is met. If the backend responds successfully, copy the table names into a text file so that we can specify the correct table names for future tasks."
        },
        {
+          "uuid": "sql-injection-all-accounts",
          "nameDe": "Alle Accounts ausspähen",
          "nameEn": "Get all accounts",
          "exerciseNr": 2,
          "descriptionDe": "Schreibe nun eine SQL-Injection, welche den Suchbegriff ignoriert und dir stattdessen alle Datensätze der Account-Tabelle zurück liefert. Führe den Angriff über das Suchfeld aus. Sieh dir die Rückmeldung des Servers an.",
-          "descriptionEn": "Execute an SQL-Injection on the Search page to get all datasets from >>Accounts<< table."
+          "descriptionEn": "Now write an SQL injection that ignores the search term and instead returns all records in the account table. Execute the attack using the search field. Watch the server's response."
        },
        {
+          "uuid": "sql-injection-account-roles",
          "nameDe": "Alle Berechtigungsgruppen ausspähen",
          "nameEn": "Get all account roles",
          "exerciseNr": 3,
          "descriptionDe": "Wir sehen nun alle Accounts. Jeder hat eine Berechtigungs-ID (accountRoleId) mit der Berechtigungen wie der Zugriff aufs Admin-Panel geregelt werden. Wir wissen aber nicht, was die ID's bedeuten. Schreibe darum eine SQL-Injection, welche den Suchbegriff ignoriert und dir stattdessen alle Datensätze der Tabelle >>AccountRoles<< zurück liefert. Führe den Angriff über das Suchfeld aus. Beobachte die Rückmeldung des Servers über den >>Network<<-Tab.",
-          "descriptionEn": "Execute an SQL-Injection on the Search page to get all datasets from >>AccountRoles<< table."
+          "descriptionEn": "We now see all the accounts. Each has an authorization ID (accountRoleId) that controls permissions such as access to the admin panel. However, we don't know what the IDs mean. Therefore, write an SQL injection that ignores the search term and instead returns all records in the >>AccountRoles<< table. Execute the attack via the search field. Observe the server's response via the >>Network<< tab."
        },
        {
+          "uuid": "sql-injection-upgrade-privileges",
          "nameDe": "Eigene Berechtigungen erhöhen",
          "nameEn": "Upgrade your privileges",
          "exerciseNr": 4,
          "descriptionDe": "Jetzt bearbeiten wir unseren eigenen Account. Schreibe hierfür einen >>UPDATE<<-SQL-Befehl, welcher die >>accountRoleId<< auf das Niveau eines >>Admin<< erhöht für deinen Account-Namen.",
-          "descriptionEn": "Change the privileges of your account"
+          "descriptionEn": "Now we'll edit our own account. To do this, write an >>UPDATE<< SQL command that elevates the >>accountRoleId<< to the level of >>Admin<< for your account name."
        },
        {
+          "uuid": "sql-injection-capture-account",
          "nameDe": "Einen fremden Account übernehmen",
          "nameEn": "Capture another account",
          "exerciseNr": 5,
          "descriptionDe": "Statt unsere eigenen Berechtigungen zu erhöhen, können wir auch einen Account übernehmen, welcher bereits ein >>Super-Admin<< ist. Suche dir dafür aus der Liste der in Aufgabe 2.1 erhaltenen Accounts einen aus, welcher die Rolle >>Super-Admin<< inne hat. Nur damit lässt sich die Dateiverwaltung öffnen, welche wir später brauchen. Hast du den Account-Namen gefunden, gehe ins Login-Menü (logge dich aus, falls du noch angemeldet bist). Führe nun einen SQL-Injektion durch um diesen Account zu übernehmen.",
-          "descriptionEn": "todo"
+          "descriptionEn": "Instead of increasing our own permissions, we can also take over an account that is already a >>super admin<<. To do this, select one from the list of accounts obtained in Task 2.1 that has the >>super admin<< role. Only then can we open the file manager, which we'll need later. Once you've found the account name, go to the login menu (log out if you're still logged in). Now perform an SQL injection to take over this account."
        },
        {
+          "uuid": "sql-injection-delete-rating",
          "nameDe": "Bewertungen löschen",
          "nameEn": "Delete ratings",
          "exerciseNr": 6,
          "descriptionDe": "Jede Band hat Bewertungen auf einer Skala von eins bis fünf Sternen erhalten. Wir wollen alle Fünf-Sterne Bewertungen aus der Datenbank löschen. Schreibe eine SQL Injection, welche in der Bewertungs-Tabelle alle Einträge mit der Bedingung >>rating = 5<< entfernt. Führe die Injection über die globale Suche aus.",
-          "descriptionEn": "todo"
+          "descriptionEn": "Each band has received ratings on a scale of one to five stars. We want to delete all five-star ratings from the database. Write an SQL injection that removes all entries in the ratings table with the condition >>rating = 5<<. Execute the injection via the global search."
        }
      ]
    },
    {
      "nameDe": "Cross-Site Scripting (XSS)",
      "nameEn": "Cross-Site Scripting (XSS)",
+      "icon": "mdi-code-brackets",
      "groupNr": 3,
      "descriptionDe": "Als nächstes wollen wir Schadcode in die Web-Applikation einschleusen. Zunächst testen wir, ob die Webseite hierfür anfällig ist. Manipuliere die URL der Band-Seite so, dass du eine >>Hallo Welt!<<-Nachricht als >>alert<< siehst. Hinweis: Nutze einen image tag! Setze als >>src<< die Zahl >>1<<. Den Befehl kannst du im Tag >>onerror<< ausführen.",
-      "descriptionEn": "todo",
+      "descriptionEn": "Next, we want to inject malicious code into the web application. First, we'll test whether the website is vulnerable to this. Manipulate the URL of the band's page so that you see a >>Hello World!<< message as an >>alert<<. Note: Use an image tag! Set the number >>1<< as the >>src<<. You can execute the command in the >>onerror<< tag.",
      "exercises": [
        {
+          "uuid": "cross-site-scripting-hello-world",
          "nameDe": "Hallo Welt!",
          "nameEn": "Hello World!",
          "exerciseNr": 1,
          "descriptionDe": "Als nächstes wollen wir Schadcode in die Web-Applikation einschleusen. Zunächst testen wir, ob die Webseite hierfür anfällig ist. Gehe hierzu auf die Seite >>Alle Bands<< und filtere die Einträge nach einem beliebigen Genre deiner Wahl. In der URL-Leiste siehst du nun, dass hinter der URL und dem Ressourcen-Ziel ein Parameter angegeben ist (der Part hinter dem Fragezeichen). Wir tauschen diesen Parameter gegen einen HTML Tag aus. Der Trick hierbei: Als Quelle geben wir den Zahlenwert >>1<< an, wodurch automatisch das ausgeführt wird, was im >>onerror<<-Tag drinnen steht. Genau hier soll eine Alert-Meldung mit >>Hello World!<< als JavaScript Code eingefügt werden. Verändere die URL so, dass sie die Meldung ausgibt. Falls du nicht mit JavaScript vertraut bist, sieh dir die letzte Seite mit nützlichen Befehlen an.",
-          "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"
+          "descriptionEn": "Next, we want to inject malicious code into the web application. First, we'll test whether the website is vulnerable to malicious code. To do this, go to the >>All Bands<< page and filter the entries by any genre of your choice. In the URL bar, you'll now see that a parameter is specified after the URL and the resource target (the part after the question mark). We'll replace this parameter with an HTML tag. The trick here: We specify the numeric value >>1<< as the source, which automatically executes what's contained in the >>onerror<< tag. This is exactly where we want to insert an alert message with >>Hello World!<< as JavaScript code. Change the URL so that it displays the message. If you're not familiar with JavaScript, check out the last page for useful commands."
        },
        {
+          "uuid": "cross-site-scripting-external-script",
          "nameDe": "Ein externes Script aufrufen",
          "nameEn": "Run an external script",
          "exerciseNr": 2,
          "descriptionDe": "Wir haben festgestellt, dass die Seite für Cross-Site-Scripting durch Reflected XSS angreifbar ist! Im zweiten Schritt binden wir nun das Script ein. Es wurde bereits auf den Server hochgeladen. Logge dich wahlweise mit einem Admin-Account (Aufgabe 2.5) oder deinem eigenen nun berechtigten Account (Aufgabe 2.4) ein. Öffne nun das Admin-Panel über den Button rechts oben. Suche über die Dateiverwaltung im Admin-Panel nach dem Skript und notiere dir die darunter angezeigte Adresse auf dem Backend-Server. Logge dich aus. Wir wollen das Skript auf der nun sichtbaren Login-Seite über eine veränderte URL einbinden. Nutze hierfür das gleiche Prinzip wie in Aufgabe 3.1. Statt >>genreName<< kannst du einen beliebigen anderen Parameter-Namen verwenden. Nutze die Konsole mit der Tastenkombination Strg + D vor dem Abschicken der URL.Logge dich nach erfolgreicher Aufgabenlösung ein und sieh in der Konsole, wie deine Login-Daten abgegriffen werden.",
-          "descriptionEn": "Create an URL of the shop, which calls the script"
+          "descriptionEn": "We've determined that the page is vulnerable to cross-site scripting through Reflected XSS! In the second step, we'll integrate the script. It's already been uploaded to the server. Log in either with an admin account (Task 2.5) or your own, now authorized account (Task 2.4). Now open the admin panel using the button in the top right. Search for the script using the file manager in the admin panel and note the address displayed below it on the backend server. Log out. We want to integrate the script into the now visible login page using a modified URL. Use the same principle as in Task 3.1. Instead of >>genreName<<, you can use any other parameter name. Use the console by pressing Ctrl + D before submitting the URL. After successfully completing the task, log in and watch in the console how your login data is being retrieved."
        }
      ]
    }
--- a/backend/models/exercises/exercise.model.ts
+++ b/backend/models/exercises/exercise.model.ts
@@ -3,6 +3,9 @@ import { ExerciseGroup } from "./exerciseGroup.model";

@Table({ timestamps: false })
 export class Exercise extends Model {
+  @Column
+  uuid: string
+
  @Column
  nameDe: string

--- a/backend/models/exercises/exerciseGroup.model.ts
+++ b/backend/models/exercises/exerciseGroup.model.ts
@@ -9,6 +9,9 @@ export class ExerciseGroup extends Model {
  @Column
  nameEn: string

+  @Column
+  icon: string
+
  @Column
  groupNr: number

--- a/backend/models/user/accountRole.model.ts
+++ b/backend/models/user/accountRole.model.ts
@@ -12,9 +12,6 @@ export class AccountRole extends Model {
  @Column
  privilegeAdminPanel: boolean

-  @Column
-  privilegeFileAccess: boolean
-

  // Relations
  @HasMany(() => Account)
--- a/backend/routes/account.routes.ts
+++ b/backend/routes/account.routes.ts
@@ -1,3 +1,9 @@
+/**
+ * @swagger
+ * tags:
+ *   name: Account
+ *   description: API to manage accounts
+ */
 import { Router, Request, Response } from "express";
 import { Account } from "../models/user/account.model";
 import { validateString } from "../scripts/validateHelper";
@@ -11,60 +17,132 @@ import { encryptString } from "../scripts/encryptScripts";

 export const account = Router()

-account.get("/", verifyToken, (req: Request, res: Response) => {
-  Account.findAll({
-    include: [ AccountRole ]
-  })
-    .then(accounts => {
-      res.status(200).json(accounts)
-    })
-})
-
-// Login user
-account.get("/account/login", async (req: Request, res: Response) => {
+/**
+ * @swagger
+ * /accounts/login:
+ *   get:
+ *     summary: Start login process
+ *     tags: [Account]
+ *     parameters:
+ *        - in: query
+ *          name: username
+ *          schema:
+ *            type: string
+ *          required: true
+ *          description: Username
+ *        - in: query
+ *          name: password
+ *          schema:
+ *            type: string
+ *          required: true
+ *          description: User password
+ *     responses:
+ *       200:
+ *         description: Login successful
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/loginResponse'
+ *       401:
+ *         description: Wrong credentials
+ *       500:
+ *         description: Internal server error
+ */
+account.get("/login", async (req: Request, res: Response) => {
  const encryptedPassword = encryptString(String(req.query.password))

-  // Using raw SQL code for SQL injections!
-  const [results, metadata] = 
-    await sequelize.query(
-      "SELECT * FROM Accounts " +
-      "WHERE (username='" + req.query.username + 
-      "' AND password='" + encryptedPassword + "')"
-    )
+  try {
+    // Using raw SQL code for SQL injections!
+    const [results, metadata] = 
+      await sequelize.query(
+        "SELECT * FROM Accounts " +
+        "WHERE (username='" + req.query.username + 
+        "' AND password='" + encryptedPassword + "')"
+      )

-  if (results.length != 0) {
-    // Creating session token
-    const token = jwt.sign({ userId: results[0]["id"] }, 'sjcucjdkdf')
+    if (results.length != 0) {
+      // Creating session token
+      const token = jwt.sign({ userId: results[0]["id"] }, 'sjcucjdkdf')

-    // Status: 200 OK
-    res.status(200).json({
-      success: true,
-      token: token
-    })
-  } else {
-    // Status: 401 Unauthorized
-    res.status(401).json({
-      code: 401, 
-      message: "Unauthorized"
-    })
+      // Status: 200 OK
+      res.status(200).json({
+        success: true,
+        token: token
+      })
+    } else {
+      // Status: 401 Unauthorized
+      res.status(401).send()
+    }
+  } catch (e) {
+    res.status(500).send()
  }
 })


-account.get("/account/data", verifyToken, async(req: Request, res: Response) => {
+/**
+ * @swagger
+ * /accounts/account:
+ *   get:
+ *     summary: Get all data about an user account
+ *     tags: [Account]
+ *     security:
+ *       - JWT: []
+ *     responses:
+ *       200:
+ *         description: Success
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/useraccount'
+ *       401:
+ *         description: Unauthorized
+ *       500:
+ *         description: Internal server error
+ */
+account.get("/account", verifyToken, async(req: Request, res: Response) => {
  Account.findOne({
    where: {
      id: req["id"]
    },
-    include: [ Address, AccountRole, Payment ]
+    include: [ Address, AccountRole, Payment ],
+    attributes: {
+      exclude: [ "accountRoleId" ]
+    }
  })
    .then(account => {
      res.status(200).json(account)
    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })


-// Creating a new user
+/**
+ * @swagger
+ * /accounts/account:
+ *   post:
+ *     summary: Create a new user account
+ *     tags: [Account]
+ *     requestBody:
+ *       description: Minimal user data body
+ *       required: true
+ *       content:
+ *         application/json:
+ *           schema:
+ *             $ref: '#/components/schemas/minimalAccount'
+ *     responses:
+ *       201:
+ *         description: Created
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/useraccount'
+ *       400:
+ *         description: Username/password too short
+ *       409:
+ *         description: Username already in use
+ */
 account.post("/account", async (req: Request, res: Response) => {
  // Check if username is valid
  if (!validateString(req.body.username, 4))
@@ -102,7 +180,7 @@ account.post("/account", async (req: Request, res: Response) => {
    .then(account => {
      // Status: 201 Created
      res.status(201).json(account)
-    }).catch(reason => {
+    }).catch(error => {
      // Status: 409 Conflict
      res.status(409).json({
        code: 409,
@@ -111,38 +189,56 @@ account.post("/account", async (req: Request, res: Response) => {
    })
 })

+
+
+/**
+ * @swagger
+ * /accounts/account:
+ *   patch:
+ *     summary: Update an user accounts data
+ *     tags: [Account]
+ *     security:
+ *       - JWT: []
+ *     responses:
+ *       200:
+ *         description: Success
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/useraccount'
+ *       401:
+ *         description: Unauthorized
+ *       500:
+ *         description: Internal server error
+ */
 account.patch("/account", verifyToken, (req: Request, res: Response) => {
  Account.update(req.body,
  {
    where: { id: req.body.id }
  })
    .then(async result => {
-      for (let payment of req.body.payments) {
-        if (payment.id == undefined) {
-          payment["accountId"] = req.body.id
-
-          await Payment.create(payment)
-        } else {
-          await Payment.update(payment,
-            {
-              where: { id: payment.id }
-            }
-          )
+      Payment.destroy({
+        where: {
+          accountId: req.body.id
        }
+      })
+
+      Address.destroy({
+        where: {
+          accountId: req.body.id
+        }
+      })
+
+      for (let payment of req.body.payments) {
+        payment["accountId"] = req.body.id
+
+        await Payment.create(payment)
      }

      for (let address of req.body.addresses) {
-        if (address.id == undefined) {
-          address["accountId"] = req.body.id
+        address["accountId"] = req.body.id

-          await Address.create(address)
-        } else {
-          await Address.update(address,
-            {
-              where: { id: address.id }
-            }
-          )
-        }
+        await Address.create(address)
      }

      // Status: 200 OK
@@ -158,7 +254,31 @@ account.patch("/account", verifyToken, (req: Request, res: Response) => {
  })
 })

-account.delete("/account/:id", (req: Request, res: Response) => {
+
+/**
+ * @swagger
+ * /accounts/account/{id}:
+ *   delete:
+ *     summary: Delete an user account
+ *     tags: [Account]
+ *     security:
+ *       - JWT: []
+ *     parameters:
+ *        - in: path
+ *          name: id
+ *          schema:
+ *            type: number
+ *          required: true
+ *          description: ID of user account
+ *     responses:
+ *       200:
+ *         description: Success
+ *       401:
+ *         description: Unauthorized
+ *       500:
+ *         description: Internal server error
+ */
+account.delete("/account/:id", verifyToken, (req: Request, res: Response) => {
  Account.destroy({
    where: {
      id: req.params.id
@@ -167,4 +287,40 @@ account.delete("/account/:id", (req: Request, res: Response) => {
    .then(account => {
      res.status(200).send()
    })
+    .catch(error => {
+      res.status(500).send()
+    })
+})
+
+
+/**
+ * @swagger
+ * /accounts/:
+ *   get:
+ *     summary: Request all user accounts
+ *     tags: [Account]
+ *     security:
+ *       - JWT: []
+ *     responses:
+ *       200:
+ *         description: Success
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/useraccount'
+ *       401:
+ *         description: Unauthorized
+ *       500:
+ *         description: Internal server error
+ */
+account.get("/", verifyToken, (req: Request, res: Response) => {
+  Account.findAll({
+    include: [ AccountRole ]
+  })
+    .then(accounts => {
+      res.status(200).json(accounts)
+    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })
--- a/backend/routes/api.routes.ts
+++ b/backend/routes/api.routes.ts
@@ -1,18 +1,38 @@
+/**
+ * @swagger
+ * tags:
+ *   name: Api
+ *   description: Main API access point for misc events
+ */
 import { Request, Response, NextFunction, Router } from 'express'
 import { deleteAllTables, deleteExerciseProgressTables, prepopulateDatabase, prepopulateExerciseDatabase } from '../scripts/databaseHelper'

 export const api = Router()

 /**
- * Status check endpoint
+ * @swagger
+ * /api:
+ *   get:
+ *     summary: Status check endpoint
+ *     tags: [Api]
+ *     responses:
+ *       200:
+ *         description: Server is up and running
 */
 api.get("/", (req: Request, res: Response, next: NextFunction) => {
  res.status(200).send()
 })

 /**
- * Reset the whole database to factory state
- * Doesn't effect ExerciseTable and ExerciseGroupTable
+ * @swagger
+ * /api/resetdatabase:
+ *   get:
+ *     summary: Reset the database to factory state
+ *     description: Doesn't effect ExerciseTable and ExerciseGroupTable
+ *     tags: [Api]
+ *     responses:
+ *       200:
+ *         description: Reset successful
 */
 api.get("/resetdatabase", async (req: Request, res: Response, next: NextFunction) => {
  // Step 1: Delete all data tables
@@ -26,7 +46,15 @@ api.get("/resetdatabase", async (req: Request, res: Response, next: NextFunction
 })

 /**
- * Reset ExerciseTable and ExerciseGroupTable to factory state
+ * @swagger
+ * /api/resetExerciseProgress:
+ *   get:
+ *     summary: Reset exercises to factory state
+ *     description: Reset ExerciseTable and ExerciseGroupTable to factory state
+ *     tags: [Api]
+ *     responses:
+ *       200:
+ *         description: Reset successful
 */
 api.get("/resetExerciseProgress", async (req: Request, res: Response, next: NextFunction) => {
  deleteExerciseProgressTables()
--- a/backend/routes/band.routes.ts
+++ b/backend/routes/band.routes.ts
@@ -1,3 +1,9 @@
+/**
+ * @swagger
+ * tags:
+ *   name: Bands
+ *   description: API to manage the bands
+ */
 import { Member } from "../models/acts/member.model";
 import { Band } from "../models/acts/band.model";
 import { Request, Response, Router } from "express";
@@ -13,7 +19,33 @@ import { sequelize } from "../database";
 export const band = Router()

 /**
- * Get all bands
+ * @swagger
+ * /bands:
+ *   get:
+ *     summary: Download all available bands
+ *     tags: [Bands]
+ *     parameters:
+ *        - in: query
+ *          name: sort
+ *          schema:
+ *            type: string
+ *          required: false
+ *          description: Sort bands by number of concerts ascending (asc) or descending (desc)
+ *        - in: query
+ *          name: count
+ *          schema:
+ *            type: number
+ *          required: false
+ *          description: Limit number of results
+ *     responses:
+ *       200:
+ *         description: List of band objects
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/band'
+ *       500:
+ *         description: Internal server error
 */
 band.get("/", (req: Request, res: Response) => {
  let sort = req.query.sort
@@ -21,16 +53,14 @@ band.get("/", (req: Request, res: Response) => {

  Band.findAll({
    include: [
-      {
-        model: Rating,
-      },
      {
        model: Genre,
        attributes: {
          exclude: [ "id" ]
        }
      },
-      Concert
+      Concert,
+      Rating
    ]
  })
    .then(bands => {
@@ -65,6 +95,9 @@ band.get("/", (req: Request, res: Response) => {

      res.status(200).json(bands)
    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })

 /**
@@ -122,7 +155,7 @@ band.get("/band/:name", (req: Request, res: Response) => {

      res.status(200).json(band)
    })
-    .catch(e => {
+    .catch(error => {
      res.status(404).send()
    })
 })
@@ -137,10 +170,13 @@ band.get("/search", async (req: Request, res: Response) => {

  // On stacked prompts, execute last prompt
  if (prompts.length > 1) {
-    const [results, metadata] =
-      await sequelize.query(prompts[prompts.length - 2])
-
-    res.status(200).json(results)
+    try {
+      const [results, metadata] =
+        await sequelize.query(prompts[prompts.length - 2])
+        res.status(200).json(results)
+    } catch (e) {
+      res.status(400).send()
+    }
  } else {
      Band.findAll({
        where: {
@@ -153,7 +189,7 @@ band.get("/search", async (req: Request, res: Response) => {
        .then(bands => {
          res.status(200).json(bands)
        })
-        .catch(e => {
+        .catch(error => {
          res.status(200).send()
        })
  }
@@ -172,6 +208,9 @@ band.patch("/", (req: Request, res: Response) => {
    .then(result => {
      res.status(200).json(result)
    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })


@@ -183,6 +222,9 @@ band.post("/", (req: Request, res: Response) => {
    .then(result => {
      res.status(200).json(result)
    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })

 /**
--- a/backend/routes/city.routes.ts
+++ b/backend/routes/city.routes.ts
@@ -1,11 +1,36 @@
+/**
+ * @swagger
+ * tags:
+ *   name: Cities
+ *   description: API to manage the cities
+ */
 import { City } from "../models/locations/city.model";
 import { Request, Response, Router } from "express";

 export const city = Router()

+/**
+ * @swagger
+ * /cities:
+ *   get:
+ *     summary: Download all cities
+ *     tags: [Cities]
+ *     responses:
+ *       200:
+ *         description: List of all cities as objects
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/city'
+ *       500:
+ *         description: Internal server error
+ */
 city.get("/", (req: Request, res: Response) => {
  City.findAll()
    .then(cities => {
      res.status(200).json(cities)
    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })
--- a/backend/routes/concert.routes.ts
+++ b/backend/routes/concert.routes.ts
@@ -1,3 +1,9 @@
+/**
+ * @swagger
+ * tags:
+ *   name: Concerts
+ *   description: API to manage the concerts
+ */
 import { Location } from "../models/locations/location.model";
 import { Concert } from "../models/acts/concert.model";
 import { Request, Response, Router } from "express";
@@ -11,18 +17,68 @@ import { Op } from "sequelize";

 export const concert = Router()

+const concertStructure = [
+  {
+    model: Band
+  },
+  {
+    model: Location,
+    include: [
+      {
+        model: City
+      },
+      {
+        model: SeatGroup,
+        include: [
+          {
+            model: SeatRow,
+            include: [
+              {
+                model: Seat,
+                include: [
+                  {
+                    model: Ticket
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    ],
+    attributes: {
+      exclude: [ "cityId" ]
+    }
+  }
+]

+
+/**
+ * @swagger
+ * /concerts:
+ *   get:
+ *     summary: Get all available concerts
+ *     tags: [Concerts]
+ *     parameters:
+ *        - in: query
+ *          name: count
+ *          schema:
+ *            type: number
+ *          required: false
+ *          description: Limit number of results
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/concert'
+ */
 concert.get("/", (req: Request, res: Response) => {
  let count = req.query.count

  Concert.findAll({
-    include: [
-      {
-        model: Location,
-        include: [ City ]
-      },
-      Band
-    ],
+    include: concertStructure,
    order: [
      [ 'date', 'ASC' ]
    ]
@@ -35,50 +91,37 @@ concert.get("/", (req: Request, res: Response) => {

      res.status(200).json(concerts)
    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })


-// Get all available data about a band by it's ID
+/**
+ * @swagger
+ * /concerts/concert/{id}:
+ *   get:
+ *     summary: Download all available informations about a specific concert
+ *     tags: [Concerts]
+ *     parameters:
+ *        - in: path
+ *          name: id
+ *          schema:
+ *            type: number
+ *          required: true
+ *          description: ID of concert in database
+ *     responses:
+ *       200:
+ *         description: Single concert object
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/concert'
+ *       404:
+ *         description: Not found
+ */
 concert.get("/concert/:id", (req: Request, res: Response) => {
-  Concert.findByPk(req.params.id, {
-    include: [
-      {
-        model: Band,
-      },
-      {
-        model: Location,
-        include: [
-          {
-            model: City
-          },
-          {
-            model: SeatGroup,
-            include: [
-              {
-                model: SeatRow,
-                include: [
-                  {
-                    model: Seat,
-                    include: [
-                      {
-                        model: Ticket
-                      }
-                    ]
-                  }
-                ]
-              }
-            ]
-          }
-        ],
-        attributes: {
-          exclude: [ "cityId" ]
-        }
-      }
-    ],
-    attributes: {
-      exclude: [ "locationId", "tourId" ]
-    }
-  })
+  Concert.findByPk(req.params.id, { include: concertStructure })
    .then(concert => {
      concert.dataValues["capacity"] = 0

@@ -116,7 +159,29 @@ concert.get("/concert/:id", (req: Request, res: Response) => {
 })


-// Concert search
+/**
+ * @swagger
+ * /concerts/search:
+ *   get:
+ *     summary: Search for concerts
+ *     tags: [Concerts]
+ *     parameters:
+ *        - in: query
+ *          name: value
+ *          schema:
+ *            type: string
+ *          required: true
+ *          description: Search term
+ *     responses:
+ *       200:
+ *         description: List of concert objects
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/concert'
+ *       500:
+ *         description: Internal server error
+ */
 concert.get("/search", (req: Request, res: Response) => {
  Concert.findAll({
    where: {
@@ -154,4 +219,7 @@ concert.get("/search", (req: Request, res: Response) => {
    .then(concerts => {
      res.status(200).json(concerts)
    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })
--- a/backend/routes/exercise.routes.ts
+++ b/backend/routes/exercise.routes.ts
@@ -1,3 +1,9 @@
+/**
+ * @swagger
+ * tags:
+ *   name: Exercises
+ *   description: API to manage the exercise progress
+ */
 import { Op } from "sequelize";
 import { Exercise } from "../models/exercises/exercise.model";
 import { ExerciseGroup } from "../models/exercises/exerciseGroup.model";
@@ -6,26 +12,75 @@ import { Request, Response, Router } from "express";
 export const exercises = Router()

 /**
- * Get all Exercises grouped in ExerciseGroups
+ * @swagger
+ * /exercises:
+ *   get:
+ *     summary: Download all exercises
+ *     tags: [Exercises]
+ *     responses:
+ *       200:
+ *         description: Array of all exercises
+ *         type: array
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/exercise'
+ *       500:
+ *         description: Internal server error
 */
 exercises.get("/", (req: Request, res: Response) => {
  Exercise.findAll({
-    include: [ ExerciseGroup ]
-  }).then(result => {
-    result.sort((a, b) => {
-      return (a.dataValues.exerciseGroup.dataValues.groupNr * 10 + a.dataValues.exerciseNr) > (b.dataValues.exerciseGroup.dataValues.groupNr * 10 + b.dataValues.exerciseNr) ? 1 : -1
-    })
-
-    res.status(200).json(result)
+    include: [ ExerciseGroup ],
+    attributes: {
+      exclude: [ "exerciseGroupId" ]
+    }
  })
+    .then(result => {
+      result.sort((a, b) => {
+        return (a.dataValues.exerciseGroup.dataValues.groupNr * 10 + a.dataValues.exerciseNr) > (b.dataValues.exerciseGroup.dataValues.groupNr * 10 + b.dataValues.exerciseNr) ? 1 : -1
+      })
+
+      res.status(200).json(result)
+    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })

 /**
- * Update state of an Exercise
- * 
- * @param groupNr Number of exercise group (not ID)
- * @param exerciseNr Number of exercise (not ID)
- * @param state New state boolean
+ * @swagger
+ * /exercises/{groupNr}/{exerciseNr}/{state}:
+ *   post:
+ *     summary: Update an exercise solved state
+ *     tags: [Exercises]
+ *     parameters:
+ *        - in: path
+ *          name: groupNr
+ *          schema:
+ *            type: number
+ *          required: true
+ *          description: Number of exercise group (not ID)
+ *        - in: path
+ *          name: exerciseNr
+ *          schema:
+ *            type: number
+ *          required: true
+ *          description: Number of exercise (not ID)
+ *        - in: path
+ *          name: state
+ *          schema:
+ *            type: number
+ *          required: true
+ *          description: 1 = Solved, 0 = Unsolved
+ *     responses:
+ *       200:
+ *         description: Edited exercise
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/exercise'
+ *       500:
+ *         description: Internal server error
 */
 exercises.post("/:groupNr/:exerciseNr/:state", (req: Request, res: Response) => {
  Exercise.findOne({
@@ -39,7 +94,10 @@ exercises.post("/:groupNr/:exerciseNr/:state", (req: Request, res: Response) =>
        }
      ]
    },
-    include: [ ExerciseGroup ]
+    include: [ ExerciseGroup ],
+    attributes: {
+      exclude: [ "exerciseGroupId" ]
+    }
  })
    .then(async exercise => {
      let changed = false
@@ -54,21 +112,7 @@ exercises.post("/:groupNr/:exerciseNr/:state", (req: Request, res: Response) =>
          changed: changed
        })
    })
-
-
-  // ExerciseGroup.findOne({
-  //   where: { groupNr: req.params.groupNr }
-  // })
-  //   .then(group => {
-  //     Exercise.findOne({
-  //       where: {
-  //         exerciseNr: req.params.exerciseNr,
-  //         exerciseGroupId: group.id
-  //       }
-  //     })
-  //       .then(exercise => {
-  //         exercise.update({ solved: req.params.state == "1"})
-  //         res.status(200).send()
-  //       })
-  //   })
+    .catch(error => {
+      res.status(500).send()
+    })
 })
--- a/backend/routes/files.routes.ts
+++ b/backend/routes/files.routes.ts
@@ -1,22 +1,40 @@
+/**
+ * @swagger
+ * tags:
+ *   name: Files
+ *   description: API for handling static files
+ */
 import { Request, Response, NextFunction, Router } from 'express'
-import fs, { createReadStream } from "fs"
+import fs from "fs"
 import multer from "multer"
 const upload = multer({ dest: './backend/images/' })
 import licenses from "../data/licenses.json"
+import path from 'path'

 export const files = Router()

 /**
- * Get all folders
+ * @swagger
+ * /files/folders:
+ *   get:
+ *     summary: Get all static folders
+ *     tags: [Files]
+ *     responses:
+ *       200:
+ *         description: Login successful
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/folder'
 */
 files.get("/folders", async (req: Request, res: Response) => {
-  let dirNames = fs.readdirSync("./backend/images")
+  let dirNames = fs.readdirSync(path.resolve(__dirname, "../images"))
  let result = []

  dirNames.forEach(dir => {
    result.push({
      name: dir,
-      nrOfItems: fs.readdirSync("./backend/images/" + dir).length
+      nrOfItems: fs.readdirSync(path.resolve(__dirname, "../images/" + dir)).length
    })
  })

@@ -25,32 +43,52 @@ files.get("/folders", async (req: Request, res: Response) => {


 /**
- * Get all uploaded file names by folder name
- * 
- * @param folder Name of folder on server
+ * @swagger
+ * /files/{folder}:
+ *   get:
+ *     summary: Get all files in one folder
+ *     tags: [Files]
+ *     parameters:
+ *        - in: path
+ *          name: folder
+ *          schema:
+ *            type: string
+ *          required: true
+ *          description: Name of folder
+ *     responses:
+ *       200:
+ *         description: Login successful
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/file'
 */
 files.get("/:folder", async (req: Request, res: Response) => {
  let result = []
-  let fileNames = fs.readdirSync("./backend/images/" + req.params.folder + "/")
+  let fileNames = fs.readdirSync(path.resolve(__dirname, "../images/" + req.params.folder))

-  fileNames.forEach(file => {
-    let resData = ""
-    let url = "http://localhost:3000/static/" + req.params.folder + "/" + file
+  try {
+    fileNames.forEach(file => {
+      let resData = ""
+      let url = "http://localhost:3000/static/" + req.params.folder + "/" + file

-    if (file.endsWith("html") || file.endsWith("js")) {
-      resData = fs.readFileSync("./backend/images/" + req.params.folder + "/" + file, "utf8")
-    }
+      if (file.endsWith("html") || file.endsWith("js")) {
+        resData = fs.readFileSync(path.resolve(__dirname, "../images/" + req.params.folder + "/" + file), "utf8")
+      }

-    result.push({
-      name: file,
-      size: fs.statSync("./backend/images/" + req.params.folder + "/" + file).size,
-      content: resData,
-      url: url,
-      copyright: licenses.find(data => data.image == file)
+      result.push({
+        name: file,
+        size: fs.statSync(path.resolve(__dirname, "../images/" + req.params.folder + "/" + file)).size,
+        content: resData,
+        url: url,
+        copyright: licenses.find(data => data.image == file)
+      })
    })
-  })

-  res.status(200).json(result)
+    res.status(200).json(result)
+  } catch (error) {
+    res.status(400).json(error)
+  }
 })


@@ -58,7 +96,5 @@ files.get("/:folder", async (req: Request, res: Response) => {
 * Upload a file
 */
 files.post("/", upload.single("file"), function (req: Request, res: Response, next: NextFunction) {
-  console.log(req.file)
-
  res.status(200).send()
 })
--- a/backend/routes/genre.routes.ts
+++ b/backend/routes/genre.routes.ts
@@ -1,3 +1,9 @@
+/**
+ * @swagger
+ * tags:
+ *   name: Genres
+ *   description: API to manage the music genres
+ */
 import { Band } from "../models/acts/band.model";
 import { Genre } from "../models/acts/genre.model";
 import { Request, Response, Router } from "express";
@@ -5,7 +11,20 @@ import { Request, Response, Router } from "express";
 export const genre = Router()

 /**
- * Get all available Genres
+ * @swagger
+ * /genres:
+ *   get:
+ *     summary: Get all available genres
+ *     tags: [Genres]
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/genre'
+ *       500:
+ *         description: Internal Server Error
 */
 genre.get("/", (req: Request, res: Response) => {
  Genre.findAll({
@@ -19,8 +38,22 @@ genre.get("/", (req: Request, res: Response) => {
    })
 })

+
 /**
- * Update a Genre entry
+ * @swagger
+ * /genres:
+ *   patch:
+ *     summary: Update the dataset of a genre
+ *     tags: [Genres]
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/genre'
+ *       500:
+ *         description: Internal Server Error
 */
 genre.patch("/", (req: Request, res: Response) => {
  Genre.update(req.body, {
@@ -36,8 +69,22 @@ genre.patch("/", (req: Request, res: Response) => {
    })
 })

+
 /**
- * Create a new Genre entry
+ * @swagger
+ * /genres:
+ *   post:
+ *     summary: Add a new dataset of a genre
+ *     tags: [Genres]
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/genre'
+ *       500:
+ *         description: Internal Server Error
 */
 genre.post("/", (req: Request, res: Response) => {
  Genre.create(req.body)
@@ -49,8 +96,22 @@ genre.post("/", (req: Request, res: Response) => {
    })
 })

+
 /**
- * Delete a Genre entry
+ * @swagger
+ * /genres:
+ *   delete:
+ *     summary: Delete the dataset of a genre
+ *     tags: [Genres]
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/genre'
+ *       500:
+ *         description: Internal Server Error
 */
 genre.delete("/", (req: Request, res: Response) => {
  Genre.destroy({
--- a/backend/routes/location.routes.ts
+++ b/backend/routes/location.routes.ts
@@ -1,3 +1,9 @@
+/**
+ * @swagger
+ * tags:
+ *   name: Locations
+ *   description: API to manage the event locations
+ */
 import { Concert } from "../models/acts/concert.model";
 import { City } from "../models/locations/city.model";
 import { Location } from "../models/locations/location.model";
@@ -10,24 +16,57 @@ import { Op } from "sequelize";

 export const location = Router()

+// Response include rules
+const locationStructure = [
+  City,
+  {
+    model: Concert,
+    include: [ Band ]
+  },
+  {
+    model: SeatGroup,
+    include: [
+      {
+        model: SeatRow,
+        include: [ Seat ]
+      }
+    ]
+  }
+]
+
 /**
- * Get all available Locations
- * 
- * @query sort    Sort results ascending (asc) or descending (desc)
- * @query count   Limit number of results
+ * @swagger
+ * /locations:
+ *   get:
+ *     summary: Get all available locations
+ *     tags: [Locations]
+ *     parameters:
+ *        - in: query
+ *          name: sort
+ *          schema:
+ *            type: string
+ *          required: false
+ *          description: Sort locations by number of concerts ascending (asc) or descending (desc)
+ *        - in: query
+ *          name: count
+ *          schema:
+ *            type: number
+ *          required: false
+ *          description: Limit number of results
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/location'
 */
 location.get("/", (req: Request, res: Response) => {
  let sort = req.query.sort
  let count = req.query.count

  Location.findAll({
-    include: [
-      City, 
-      {
-        model: Concert,
-        include: [ Band ],
-      }
-    ],
+    include: locationStructure,
    attributes: {
      exclude: [ "cityId" ]
    }
@@ -60,29 +99,32 @@ location.get("/", (req: Request, res: Response) => {


 /**
- * Get all data about a specific location
- * 
- * @param urlName   UrlName of the band (e.g. Red Hot Chili Peppers => red-hot-chili-peppers)
+ * @swagger
+ * /locations/{urlName}:
+ *   get:
+ *     summary: Download all available informations about a specific locations
+ *     tags: [Locations]
+ *     parameters:
+ *        - in: path
+ *          name: urlName
+ *          schema:
+ *            type: string
+ *          required: true
+ *          description: Url name of the location to request for
+ *     responses:
+ *       200:
+ *         description: Single of location objects
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/location'
+ *       500:
+ *         description: Internal server error
 */
 location.get("/location/:urlName", (req: Request, res: Response) => {
  Location.findOne({
    where: { urlName: req.params.urlName },
-    include: [
-      City, 
-      {
-        model: Concert,
-        include: [ Band ],
-      },
-      {
-        model: SeatGroup,
-        include: [
-          {
-            model: SeatRow,
-            include: [ Seat ]
-          }
-        ]
-      }
-    ],
+    include: locationStructure,
    attributes: {
      exclude: [ "cityId" ]
    }
@@ -98,16 +140,34 @@ location.get("/location/:urlName", (req: Request, res: Response) => {

      res.status(200).json(location)
    })
-    .catch(e => {
+    .catch(error => {
      res.status(404).send()
    })
 })


 /**
- * Search for Locations
- * 
- * @query value     Search term to look for
+ * @swagger
+ * /locations/search:
+ *   get:
+ *     summary: Search for locations
+ *     tags: [Locations]
+ *     parameters:
+ *        - in: query
+ *          name: value
+ *          schema:
+ *            type: string
+ *          required: true
+ *          description: Search term
+ *     responses:
+ *       200:
+ *         description: List of band objects
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/location'
+ *       500:
+ *         description: Internal server error
 */
 location.get("/search", (req: Request, res: Response) => {
  Location.findAll({
@@ -128,9 +188,12 @@ location.get("/search", (req: Request, res: Response) => {
        }
      ]
    },
-    include: [ City, Concert ]
+    include: locationStructure
  })
    .then(locations => {
      res.status(200).json(locations)
    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })
--- a/backend/routes/order.routes.ts
+++ b/backend/routes/order.routes.ts
@@ -1,3 +1,9 @@
+/**
+ * @swagger
+ * tags:
+ *   name: Orders
+ *   description: API to manage orders
+ */
 import { Router, Request, Response } from "express";
 import { Order } from "../models/ordering/order.model";
 import { Concert } from "../models/acts/concert.model";
@@ -10,17 +16,41 @@ import { City } from "../models/locations/city.model";
 import { Seat } from "../models/locations/seat.model";
 import { SeatRow } from "../models/locations/seatRow.model";
 import { SeatGroup } from "../models/locations/seatGroup.model";
+import { verifyToken } from "../middlewares/auth.middleware";
 import { Account } from "../models/user/account.model";
-import { Exercise } from "backend/models/exercises/exercise.model";

 export const order = Router()

-// Get all orders
-order.get("/", (req: Request, res: Response) => {
+/**
+ * @swagger
+ * /orders:
+ *   get:
+ *     summary: Get orders of an account or all available
+ *     tags: [Orders]
+ *     security:
+ *        - JWT: []
+ *     parameters:
+ *        - in: query
+ *          name: id
+ *          schema:
+ *            type: string
+ *          required: false
+ *          description: User account id to filter the orders
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/order'
+ *       500:
+ *         description: Internal server error
+ */
+order.get("/", verifyToken, (req: Request, res: Response) => {
+  const accountId = req.query.id
+
  Order.findAll({
    include: [
-      Account,
-      Address,
      {
        model: Ticket,
        include: [
@@ -35,42 +65,6 @@ order.get("/", (req: Request, res: Response) => {
                include: [ City ]
              }
            ]
-          }
-        ]
-      }
-    ]
-  })
-    .then(orders => {
-      res.status(200).json(orders)
-    })
-})
-
-
-// Get all orders of one account by it's user id
-order.get("/:id", (req: Request, res: Response) => {
-  Order.findAll({
-    where: { accountId: req.params.id },
-    include: [
-      { 
-        model: Ticket, 
-        include: [ 
-          { 
-            model: Concert,
-            include: [
-              {
-                model: Band
-              },
-              {
-                model: Location,
-                include: [ City ]
-              }
-            ],
-            attributes: {
-              exclude: [
-                "categoryId",
-                "brandId"
-              ]
-            }
          },
          {
            model: Seat,
@@ -83,17 +77,58 @@ order.get("/:id", (req: Request, res: Response) => {
          }
        ]
      },
+      Address,
      Payment,
-      Address
-    ]
+      Account,
+    ],
+    attributes: {
+      exclude: [ "accountId", "addressId", "paymentId" ]
+    }
  })
    .then(orders => {
-      res.status(200).json(orders)
+      if (accountId != undefined) {
+        let filteredOrders = orders.filter(order => {
+          return order.id == accountId
+        })
+
+        res.status(200).json(filteredOrders)
+      } else {
+        res.status(200).json(orders)
+      }
+    })
+    .catch(error => {
+      res.status(500).send()
    })
 })

-// Place a new order
-order.post("/", (req: Request, res: Response) => {
+/**
+ * @swagger
+ * /orders:
+ *   post:
+ *     summary: Place a new order
+ *     tags: [Orders]
+ *     security:
+ *        - JWT: []
+ *     parameters:
+ *        - in: query
+ *          name: id
+ *          schema:
+ *            type: string
+ *          required: false
+ *          description: User account id to filter the orders
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/order'
+ *       500:
+ *         description: Internal server error
+ */
+order.post("/", verifyToken, (req: Request, res: Response) => {
+  req.body["accountId"] = req["id"]
+
  Order.create(req.body)
    .then(async order => {
      for (let ticket of req.body.tickets) {
@@ -116,4 +151,45 @@ order.post("/", (req: Request, res: Response) => {
      // Created
      res.status(201).json(order)
    })
+    .catch(error => {
+      res.status(500).send()
+    })
+})
+
+
+/**
+ * @swagger
+ * /orders:
+ *   patch:
+ *     summary: Update an order
+ *     tags: [Orders]
+ *     parameters:
+ *        - in: body
+ *          name: order
+ *          schema:
+ *            type: object
+ *          required: true
+ *          description: Updated order object
+ *     responses:
+ *       200:
+ *         description: OK
+ *         content:
+ *           application/json:
+ *             schema:
+ *               $ref: '#/components/schemas/order'
+ *       500:
+ *         description: Internal server error
+ */
+order.patch("/", (req: Request, res: Response) => {
+  Order.update(req.body, {
+    where: {
+      id: req.body.id
+    }
+  })
+    .then(affectedCount => {
+      res.status(200).send()
+    })
+    .catch(error => {
+      res.status(500).send()
+    })
 })
--- a/backend/server.ts
+++ b/backend/server.ts
@@ -1,6 +1,8 @@
 import express from 'express'
 import cors from 'cors'
 import bodyParser from 'body-parser'
+import swaggerJsdoc from "swagger-jsdoc"
+import swaggerUi from "swagger-ui-express"
 import { api } from './routes/api.routes'
 import { startDatabase } from './database'
 import { order } from './routes/order.routes'
@@ -12,6 +14,7 @@ import { location } from './routes/location.routes'
 import { city } from './routes/city.routes'
 import { exercises } from './routes/exercise.routes'
 import { files } from './routes/files.routes'
+import swaggerFile from './swagger.json'

 const app = express()
 const port = 3000
@@ -33,7 +36,7 @@ app.use("/files", files)

 // Add delay for more realistic response times
 app.use((req, res, next) => {
-  setTimeout(next, Math.floor((Math.random() * 1000) + 100))
+  setTimeout(next, Math.floor((Math.random() * 500) + 100))
 })

 // Routes
@@ -46,6 +49,17 @@ app.use("/accounts", account)
 app.use("/cities", city)
 app.use("/concerts", concert)

+
+// Swagger API documentation
+const specs = swaggerJsdoc(swaggerFile);
+
+app.use(
+  "/api-docs",
+  swaggerUi.serve, 
+  swaggerUi.setup(specs, { explorer: true })
+)
+
+
 // Start server
 const server = app.listen(port, () => {
  console.log(`Server is running and listening to port ${port}`)
--- a/backend/swagger.json
+++ b/backend/swagger.json
@@ -0,0 +1,796 @@
+{
+  "swagger": "2.0",
+  "definition": {
+    "openapi": "3.1.0",
+    "info": {
+      "title": "EventMaster API",
+      "version": "0.2.0",
+      "description": "Dokumentation über alle API-Endpunkte des Backends",
+      "license": {
+        "name": "MIT",
+        "url": "https://spdx.org/licenses/MIT.html"
+      }
+    },
+    "servers": [
+      {
+        "url": "http://localhost:3000"
+      }
+    ],
+    "components": {
+      "securitySchemes": {
+        "JWT": {
+          "type": "apiKey",
+          "in": "header",
+          "name": "Json Web Token"
+        }
+      },
+      "schemas": {
+        "city": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "number",
+              "description": "The auto-generated id"
+            },
+            "name": {
+              "type": "string",
+              "description": "Name of the city"
+            },
+            "country": {
+              "type": "string",
+              "description": "Name of country of the city"
+            }
+          },
+          "example": {
+            "id": 2,
+            "name": "Hannover",
+            "country": "Germany"
+          }
+        },
+        "loginResponse": {
+          "type": "object",
+          "properties": {
+            "success": {
+              "type": "boolean",
+              "description": "Login successful state"
+            },
+            "token": {
+              "type": "string",
+              "description": "Individual created access token"
+            }
+          },
+          "example": {
+            "success": true,
+            "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjI2MiwiaWF0IjoxNzMzNzYwOTY3fQ.I3rR71c-k2Y2WB0dkd1QEgHxsIRGl4s69YprBNuhX7w"
+          }
+        },
+        "minimalAccount": {
+          "type": "object",
+          "properties": {
+            "username": {
+              "type": "string",
+              "description": "Account username"
+            },
+            "password": {
+              "type": "string",
+              "description": "Encrypted password"
+            },
+            "email": {
+              "type": "string",
+              "description": "E-Mail address of user"
+            }
+          },
+          "example": {
+            "username": "maxmustermann",
+            "password": "supersecret",
+            "email": "tijjji@didjhli.de"
+          }
+        },
+        "minimalAccountResponse": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "number",
+              "description": "The auto-generated id"
+            },
+            "username": {
+              "type": "string",
+              "description": "Account username"
+            },
+            "password": {
+              "type": "string",
+              "description": "Encrypted password"
+            },
+            "email": {
+              "type": "string",
+              "description": "E-Mail address of user"
+            },
+            "accountRoleId": {
+              "type": "number",
+              "description": "ID of account role"
+            }
+          },
+          "example": {
+            "id": 263,
+            "username": "maxmustermann",
+            "password": "8746fb88adbae61ffa68193ee0bb8050",
+            "email": "tijjji@didjhli.de",
+            "accountRoleId": 1
+          }
+        },
+        "placeOrderBody": {
+          "type": "object",
+          "properties": {
+            "username": {
+              "type": "string",
+              "description": "Account username"
+            },
+            "password": {
+              "type": "string",
+              "description": "Encrypted password"
+            },
+            "email": {
+              "type": "string",
+              "description": "E-Mail address of user"
+            },
+            "accountRoleId": {
+              "type": "number",
+              "description": "ID of account role"
+            }
+          },
+          "example": {
+            "id": 263,
+            "username": "maxmustermann",
+            "password": "8746fb88adbae61ffa68193ee0bb8050",
+            "email": "tijjji@didjhli.de",
+            "accountRoleId": 1
+          }
+        },
+        "genre": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "number",
+              "description": "The auto-generated id"
+            },
+            "name": {
+              "type": "string",
+              "description": "Name of the genre"
+            },
+            "bands": {
+              "type": "object",
+              "description": "Bands with this genre object"
+            }
+          },
+          "example": [
+            {
+              "id": 562,
+              "name": "Funk Rock",
+              "bands": [
+                {
+                  "images": [
+                    "http://localhost:3000/static/bands/red-hot-chili-peppers-1.jpg",
+                    "http://localhost:3000/static/bands/red-hot-chili-peppers-2.jpg",
+                    "http://localhost:3000/static/bands/red-hot-chili-peppers-3.jpg",
+                    "http://localhost:3000/static/bands/red-hot-chili-peppers-4.jpg"
+                  ],
+                  "id": 265,
+                  "name": "Red Hot Chili Peppers",
+                  "foundingYear": 1983,
+                  "descriptionEn": "The Red Hot Chili Peppers are an American rock band formed in Los Angeles in 1983, comprising vocalist Anthony Kiedis, bassist Flea, drummer Chad Smith, and guitarist John Frusciante. Their music incorporates elements of alternative rock, funk, punk rock, hard rock, hip hop, and psychedelic rock. Their eclectic range has influenced genres such as funk metal, rap metal, rap rock, and nu metal. With over 120 million records sold worldwide, the Red Hot Chili Peppers are one of the top-selling bands of all time.",
+                  "descriptionDe": "Red Hot Chili Peppers (Abkürzung: RHCP) ist eine 1983 gegründete US-amerikanische Funk- und Alternative-Rockband. Sie zählt zu den kommerziell erfolgreichsten Vertretern des Crossover. Ihr Album Blood Sugar Sex Magik gilt als eines der bedeutendsten dieses Genres.",
+                  "imageMembers": "http://localhost:3000/static/bands/red-hot-chili-peppers-members.jpg",
+                  "logo": "http://localhost:3000/static/bands/red-hot-chili-peppers-logo.png",
+                  "BandGenre": {
+                    "id": 793,
+                    "genreId": 562,
+                    "bandId": 265
+                  }
+                }
+              ]
+            },
+            {
+              "id": 563,
+              "name": "Alternative Rock",
+              "bands": [
+                {
+                  "images": [
+                    "http://localhost:3000/static/bands/red-hot-chili-peppers-1.jpg",
+                    "http://localhost:3000/static/bands/red-hot-chili-peppers-2.jpg",
+                    "http://localhost:3000/static/bands/red-hot-chili-peppers-3.jpg",
+                    "http://localhost:3000/static/bands/red-hot-chili-peppers-4.jpg"
+                  ],
+                  "id": 265,
+                  "name": "Red Hot Chili Peppers",
+                  "foundingYear": 1983,
+                  "descriptionEn": "The Red Hot Chili Peppers are an American rock band formed in Los Angeles in 1983, comprising vocalist Anthony Kiedis, bassist Flea, drummer Chad Smith, and guitarist John Frusciante. Their music incorporates elements of alternative rock, funk, punk rock, hard rock, hip hop, and psychedelic rock. Their eclectic range has influenced genres such as funk metal, rap metal, rap rock, and nu metal. With over 120 million records sold worldwide, the Red Hot Chili Peppers are one of the top-selling bands of all time.",
+                  "descriptionDe": "Red Hot Chili Peppers (Abkürzung: RHCP) ist eine 1983 gegründete US-amerikanische Funk- und Alternative-Rockband. Sie zählt zu den kommerziell erfolgreichsten Vertretern des Crossover. Ihr Album Blood Sugar Sex Magik gilt als eines der bedeutendsten dieses Genres.",
+                  "imageMembers": "http://localhost:3000/static/bands/red-hot-chili-peppers-members.jpg",
+                  "logo": "http://localhost:3000/static/bands/red-hot-chili-peppers-logo.png",
+                  "BandGenre": {
+                    "id": 794,
+                    "genreId": 563,
+                    "bandId": 265
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        "location": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "number",
+              "description": "The auto-generated id"
+            },
+            "name": {
+              "type": "string",
+              "description": "Name of the genre"
+            },
+            "bands": {
+              "type": "object",
+              "description": "Bands with this genre object"
+            }
+          },
+          "example": {
+            "id": 562,
+            "name": "Funk Rock",
+            "bands": [
+              {
+                "images": [
+                  "http://localhost:3000/static/bands/red-hot-chili-peppers-1.jpg",
+                  "http://localhost:3000/static/bands/red-hot-chili-peppers-2.jpg",
+                  "http://localhost:3000/static/bands/red-hot-chili-peppers-3.jpg",
+                  "http://localhost:3000/static/bands/red-hot-chili-peppers-4.jpg"
+                ],
+                "id": 265,
+                "name": "Red Hot Chili Peppers",
+                "foundingYear": 1983,
+                "descriptionEn": "The Red Hot Chili Peppers are an American rock band formed in Los Angeles in 1983, comprising vocalist Anthony Kiedis, bassist Flea, drummer Chad Smith, and guitarist John Frusciante. Their music incorporates elements of alternative rock, funk, punk rock, hard rock, hip hop, and psychedelic rock. Their eclectic range has influenced genres such as funk metal, rap metal, rap rock, and nu metal. With over 120 million records sold worldwide, the Red Hot Chili Peppers are one of the top-selling bands of all time.",
+                "descriptionDe": "Red Hot Chili Peppers (Abkürzung: RHCP) ist eine 1983 gegründete US-amerikanische Funk- und Alternative-Rockband. Sie zählt zu den kommerziell erfolgreichsten Vertretern des Crossover. Ihr Album Blood Sugar Sex Magik gilt als eines der bedeutendsten dieses Genres.",
+                "imageMembers": "http://localhost:3000/static/bands/red-hot-chili-peppers-members.jpg",
+                "logo": "http://localhost:3000/static/bands/red-hot-chili-peppers-logo.png",
+                "BandGenre": {
+                  "id": 793,
+                  "genreId": 562,
+                  "bandId": 265
+                }
+              }
+            ]
+          }
+        },
+        "order": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "number",
+              "description": "The auto-generated id"
+            },
+            "orderedAt": {
+              "type": "string",
+              "description": "Timestamp of order"
+            },
+            "tickets": {
+              "type": "array",
+              "description": "Array of Ticket objects"
+            },
+            "addresses": {
+              "type": "object",
+              "description": "Address object"
+            },
+            "payment": {
+              "type": "object",
+              "description": "Payment object"
+            },
+            "account": {
+              "type": "object",
+              "description": "Account object"
+            }
+          },
+          "example": {
+            "id": 112,
+            "orderedAt": "2024-11-29T12:38:36.381Z",
+            "shipped": false,
+            "tickets": [
+              {
+                "id": 144,
+                "orderId": 112,
+                "orderPrice": 184,
+                "concertId": 892,
+                "seatId": 106331,
+                "concert": {
+                  "id": 892,
+                  "date": "2024-11-30",
+                  "name": "Unlimited Love",
+                  "price": 92,
+                  "image": "http://localhost:3000/static/concerts/unlimited-love-tour.jpg",
+                  "inStock": 170,
+                  "offered": true,
+                  "bandId": 265,
+                  "locationId": 834,
+                  "band": {
+                    "images": [
+                      "http://localhost:3000/static/bands/red-hot-chili-peppers-1.jpg",
+                      "http://localhost:3000/static/bands/red-hot-chili-peppers-2.jpg",
+                      "http://localhost:3000/static/bands/red-hot-chili-peppers-3.jpg",
+                      "http://localhost:3000/static/bands/red-hot-chili-peppers-4.jpg"
+                    ],
+                    "id": 265,
+                    "name": "Red Hot Chili Peppers",
+                    "foundingYear": 1983,
+                    "descriptionEn": "The Red Hot Chili Peppers are an American rock band formed in Los Angeles in 1983, comprising vocalist Anthony Kiedis, bassist Flea, drummer Chad Smith, and guitarist John Frusciante. Their music incorporates elements of alternative rock, funk, punk rock, hard rock, hip hop, and psychedelic rock. Their eclectic range has influenced genres such as funk metal, rap metal, rap rock, and nu metal. With over 120 million records sold worldwide, the Red Hot Chili Peppers are one of the top-selling bands of all time.",
+                    "descriptionDe": "Red Hot Chili Peppers (Abkürzung: RHCP) ist eine 1983 gegründete US-amerikanische Funk- und Alternative-Rockband. Sie zählt zu den kommerziell erfolgreichsten Vertretern des Crossover. Ihr Album Blood Sugar Sex Magik gilt als eines der bedeutendsten dieses Genres.",
+                    "imageMembers": "http://localhost:3000/static/bands/red-hot-chili-peppers-members.jpg",
+                    "logo": "http://localhost:3000/static/bands/red-hot-chili-peppers-logo.png"
+                  },
+                  "location": {
+                    "id": 834,
+                    "urlName": "swiss-life-hall",
+                    "name": "Swiss Life Hall",
+                    "address": "Ferdinand-Wilhelm-Fricke-Weg 8",
+                    "cityId": 246,
+                    "imageIndoor": "http://localhost:3000/static/locations/swiss-life-hall-indoor.jpg",
+                    "imageOutdoor": "http://localhost:3000/static/locations/swiss-life-hall-outdoor.jpg",
+                    "layout": 2,
+                    "capacity": 180,
+                    "city": {
+                      "id": 246,
+                      "name": "Hannover",
+                      "country": "Germany"
+                    }
+                  }
+                },
+                "seat": {
+                  "id": 106331,
+                  "seatNr": 1,
+                  "seatRowId": 14701,
+                  "seatRow": {
+                    "id": 14701,
+                    "row": 0,
+                    "seatGroupId": 3872,
+                    "seatGroup": {
+                      "id": 3872,
+                      "name": "A",
+                      "surcharge": 30,
+                      "capacity": 40,
+                      "standingArea": true,
+                      "locationId": 834
+                    }
+                  }
+                }
+              }
+            ],
+            "address": {
+              "id": 342,
+              "accountId": 255,
+              "street": "Laportestraße",
+              "houseNumber": 22,
+              "postalCode": 30449,
+              "city": "Hannover"
+            },
+            "payment": {
+              "id": 247,
+              "accountId": 255,
+              "bankName": "Deutsche Bank",
+              "iban": "DE92500105175721645777"
+            },
+            "account": {
+              "id": 255,
+              "username": "hagemeister93",
+              "password": "e1e3981e5b0c009c018c5726a4be5eee",
+              "email": "hagemeister93@gmail.com",
+              "firstName": "Laurin",
+              "lastName": "Hagemeister",
+              "accountRoleId": 1
+            }
+          }
+        },
+        "useraccount": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "number",
+              "description": "The auto-generated id"
+            },
+            "username": {
+              "type": "string",
+              "description": "Account username"
+            },
+            "password": {
+              "type": "string",
+              "description": "Encrypted password"
+            },
+            "email": {
+              "type": "string",
+              "description": "E-Mail address of user"
+            },
+            "firstName": {
+              "type": "string",
+              "description": "First name of user"
+            },
+            "lastName": {
+              "type": "string",
+              "description": "Last name of user"
+            },
+            "addresses": {
+              "type": "array",
+              "description": "Array of Address objects"
+            },
+            "accountRole": {
+              "type": "object",
+              "description": "Account role object"
+            },
+            "payments": {
+              "type": "array",
+              "description": "Array of Payments objects"
+            }
+          },
+          "example": {
+            "id": 262,
+            "username": "max",
+            "password": "06f7a5f329fed099ad36026f9623e6ce",
+            "email": "titi@didi.de",
+            "firstName": "Max",
+            "lastName": "Mustermann",
+            "accountRoleId": 1,
+            "addresses": [
+              {
+                "id": 352,
+                "accountId": 262,
+                "street": "Musterstraße",
+                "houseNumber": 21,
+                "postalCode": 30167,
+                "city": "Hannover"
+              }
+            ],
+            "accountRole": {
+              "id": 1,
+              "name": "User",
+              "privilegeBuy": true,
+              "privilegeAdminPanel": false
+            },
+            "payments": [
+              {
+                "id": 254,
+                "accountId": 262,
+                "bankName": "Deutsche Bank",
+                "iban": "DE293948484738383829"
+              }
+            ]
+          }
+        },
+        "exercise": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "number",
+              "description": "The auto-generated id"
+            },
+            "nameDe": {
+              "type": "string",
+              "description": "German exercise name"
+            },
+            "nameEn": {
+              "type": "string",
+              "description": "English exercise name"
+            },
+            "exerciseNr": {
+              "type": "number",
+              "description": "Number of exercise in group"
+            },
+            "descriptionDe": {
+              "type": "string",
+              "description": "German description text"
+            },
+            "descriptionEn": {
+              "type": "string",
+              "description": "English description text"
+            },
+            "solved": {
+              "type": "boolean",
+              "description": "State of solved"
+            },
+            "exerciseGroup": {
+              "type": "object",
+              "description": "Exercise group object"
+            }
+          },
+          "example": {
+            "id": 350,
+            "nameDe": "Registrieren",
+            "nameEn": "Register",
+            "exerciseNr": 1,
+            "descriptionDe": "Wir richten uns einen gewöhnlichen Account auf der Plattform ein. Navigiere hierzu auf die Account-Seite und registriere dich.",
+            "descriptionEn": "Create a new account in the online shop",
+            "solved": true,
+            "exerciseGroup": {
+              "id": 113,
+              "nameDe": "Den Shop kennenlernen",
+              "nameEn": "Getting to know the shop",
+              "groupNr": 0,
+              "descriptionDe": "Vor einem Angriff ist es wichtig zu verstehen, wie die Webseite aufgebaut ist. Wie sind die URLs strukturiert? Wo befinden sich Eingabefelder welche im Backend eine SQL Abfrage stellen?",
+              "descriptionEn": "todo"
+            }
+          }
+        },
+        "folder": {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string",
+              "description": "Name of folder"
+            },
+            "nrOrItems": {
+              "type": "number",
+              "description": "Number of files in folder"
+            }
+          },
+          "example": {
+            "name": "artists",
+            "description": 41
+          }
+        },
+        "file": {
+          "type": "object",
+          "properties": {
+            "name": {
+              "type": "string",
+              "description": "Name of file"
+            },
+            "size": {
+              "type": "number",
+              "description": "File size in Bytes"
+            },
+            "content": {
+              "type": "string",
+              "description": "Text content, only for Text/Code files"
+            },
+            "url": {
+              "type": "string",
+              "description": "Resource URL"
+            },
+            "copyright": {
+              "type": "object",
+              "description": "Copyright object"
+            }
+          },
+          "example": {
+            "name": "alex-turner.jpg",
+            "size": 551625,
+            "content": "",
+            "url": "http://localhost:3000/static/artists/alex-turner.jpg",
+            "copyright": {
+              "image": "alex-turner.jpg",
+              "license": "CC BY 2.0",
+              "creator": "Raph_PH",
+              "url": "https://upload.wikimedia.org/wikipedia/commons/9/95/Alex_Turner%2C_Way_Out_West_2018.jpg"
+            }
+          }
+        },
+        "concert": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "number",
+              "description": "The auto-generated id"
+            },
+            "date": {
+              "type": "string",
+              "description": "Date of the concert"
+            },
+            "name": {
+              "type": "string",
+              "description": "Name of concert"
+            },
+            "price": {
+              "type": "string",
+              "description": "Lowest price of concert"
+            },
+            "image": {
+              "type": "number",
+              "description": "Concert image"
+            },
+            "inStock": {
+              "type": "string",
+              "description": "Amount of available tickets"
+            },
+            "offered": {
+              "type": "string",
+              "description": "Display concert in UI"
+            },
+            "band": {
+              "type": "object",
+              "description": "Band object"
+            },
+            "location": {
+              "type": "object",
+              "description": "Location object"
+            }
+          },
+          "example": [
+            {
+              "id": 892,
+              "date": "2024-11-30",
+              "name": "Unlimited Love",
+              "price": 92,
+              "image": "http://localhost:3000/static/concerts/unlimited-love-tour.jpg",
+              "inStock": 169,
+              "offered": true,
+              "bandId": 265,
+              "locationId": 834,
+              "band": {
+                "images": [
+                  "http://localhost:3000/static/bands/red-hot-chili-peppers-1.jpg",
+                  "http://localhost:3000/static/bands/red-hot-chili-peppers-2.jpg",
+                  "http://localhost:3000/static/bands/red-hot-chili-peppers-3.jpg",
+                  "http://localhost:3000/static/bands/red-hot-chili-peppers-4.jpg"
+                ],
+                "id": 265,
+                "name": "Red Hot Chili Peppers",
+                "foundingYear": 1983,
+                "descriptionEn": "The Red Hot Chili Peppers are an American rock band formed in Los Angeles in 1983, comprising vocalist Anthony Kiedis, bassist Flea, drummer Chad Smith, and guitarist John Frusciante. Their music incorporates elements of alternative rock, funk, punk rock, hard rock, hip hop, and psychedelic rock. Their eclectic range has influenced genres such as funk metal, rap metal, rap rock, and nu metal. With over 120 million records sold worldwide, the Red Hot Chili Peppers are one of the top-selling bands of all time.",
+                "descriptionDe": "Red Hot Chili Peppers (Abkürzung: RHCP) ist eine 1983 gegründete US-amerikanische Funk- und Alternative-Rockband. Sie zählt zu den kommerziell erfolgreichsten Vertretern des Crossover. Ihr Album Blood Sugar Sex Magik gilt als eines der bedeutendsten dieses Genres.",
+                "imageMembers": "http://localhost:3000/static/bands/red-hot-chili-peppers-members.jpg",
+                "logo": "http://localhost:3000/static/bands/red-hot-chili-peppers-logo.png"
+              },
+              "location": {
+                "id": 834,
+                "urlName": "swiss-life-hall",
+                "name": "Swiss Life Hall",
+                "address": "Ferdinand-Wilhelm-Fricke-Weg 8",
+                "imageIndoor": "http://localhost:3000/static/locations/swiss-life-hall-indoor.jpg",
+                "imageOutdoor": "http://localhost:3000/static/locations/swiss-life-hall-outdoor.jpg",
+                "layout": 2,
+                "capacity": 180,
+                "city": {
+                  "id": 246,
+                  "name": "Hannover",
+                  "country": "Germany"
+                },
+                "seatGroups": []
+              }
+            }
+          ]
+        },
+        "band": {
+          "type": "object",
+          "properties": {
+            "id": {
+              "type": "integer",
+              "description": "The auto-generated id"
+            },
+            "name": {
+              "type": "string",
+              "description": "Name of the band"
+            },
+            "foundingYear": {
+              "type": "string",
+              "description": "Founding year of the band"
+            },
+            "descriptionEn": {
+              "type": "string",
+              "description": "English description text"
+            },
+            "descriptionDe": {
+              "type": "string",
+              "description": "German description text"
+            },
+            "imageMembers": {
+              "type": "string",
+              "description": "URL to image of band members"
+            },
+            "logo": {
+              "type": "string",
+              "description": "URL to image of band logo"
+            },
+            "genres": {
+              "type": "array",
+              "description": "Array of Genre objects which fits the bands music"
+            },
+            "concerts": {
+              "type": "array",
+              "description": "Array of Concert objects"
+            },
+            "nrOfConcerts": {
+              "type": "number",
+              "description": "Number of concerts"
+            },
+            "rating": {
+              "type": "number",
+              "description": "Average rating of the band"
+            }
+          },
+          "example": {
+            "images": [
+              "http://localhost:3000/static/bands/red-hot-chili-peppers-1.jpg",
+              "http://localhost:3000/static/bands/red-hot-chili-peppers-2.jpg",
+              "http://localhost:3000/static/bands/red-hot-chili-peppers-3.jpg",
+              "http://localhost:3000/static/bands/red-hot-chili-peppers-4.jpg"
+            ],
+            "id": 265,
+            "name": "Red Hot Chili Peppers",
+            "foundingYear": 1983,
+            "descriptionEn": "The Red Hot Chili Peppers are an American rock band formed in Los Angeles in 1983, comprising vocalist Anthony Kiedis, bassist Flea, drummer Chad Smith, and guitarist John Frusciante. Their music incorporates elements of alternative rock, funk, punk rock, hard rock, hip hop, and psychedelic rock. Their eclectic range has influenced genres such as funk metal, rap metal, rap rock, and nu metal. With over 120 million records sold worldwide, the Red Hot Chili Peppers are one of the top-selling bands of all time.",
+            "descriptionDe": "Red Hot Chili Peppers (Abkürzung: RHCP) ist eine 1983 gegründete US-amerikanische Funk- und Alternative-Rockband. Sie zählt zu den kommerziell erfolgreichsten Vertretern des Crossover. Ihr Album Blood Sugar Sex Magik gilt als eines der bedeutendsten dieses Genres.",
+            "imageMembers": "http://localhost:3000/static/bands/red-hot-chili-peppers-members.jpg",
+            "logo": "http://localhost:3000/static/bands/red-hot-chili-peppers-logo.png",
+            "genres": [
+              {
+                "name": "Funk Rock"
+              },
+              {
+                "name": "Alternative Rock"
+              },
+              {
+                "name": "Crossover"
+              }
+            ],
+            "concerts": [
+              {
+                "id": 892,
+                "date": "2024-11-30",
+                "name": "Unlimited Love",
+                "price": 92,
+                "image": "http://localhost:3000/static/concerts/unlimited-love-tour.jpg",
+                "inStock": 170,
+                "offered": true,
+                "bandId": 265,
+                "locationId": 834
+              },
+              {
+                "id": 893,
+                "date": "2024-12-07",
+                "name": "Unlimited Love",
+                "price": 92,
+                "image": "http://localhost:3000/static/concerts/unlimited-love-tour.jpg",
+                "inStock": 170,
+                "offered": true,
+                "bandId": 265,
+                "locationId": 834
+              },
+              {
+                "id": 894,
+                "date": "2024-12-11",
+                "name": "Unlimited Love",
+                "price": 119.9,
+                "image": "http://localhost:3000/static/concerts/unlimited-love-tour.jpg",
+                "inStock": 8736,
+                "offered": true,
+                "bandId": 265,
+                "locationId": 838
+              },
+              {
+                "id": 895,
+                "date": "2024-12-18",
+                "name": "Unlimited Love",
+                "price": 114.9,
+                "image": "http://localhost:3000/static/concerts/unlimited-love-tour.jpg",
+                "inStock": 2793,
+                "offered": true,
+                "bandId": 265,
+                "locationId": 842
+              },
+              {
+                "id": 896,
+                "date": "2024-12-30",
+                "name": "Unlimited Love",
+                "price": 124.9,
+                "image": "http://localhost:3000/static/concerts/unlimited-love-tour.jpg",
+                "inStock": 3079,
+                "offered": true,
+                "bandId": 265,
+                "locationId": 845
+              }
+            ],
+            "nrOfConcerts": 5,
+            "rating": 4.428571428571429
+          }
+        }
+      }
+    }
+  },
+  "apis": [
+    "./backend/routes/*.ts"
+  ]
+}
--- a/electron-builder.json
+++ b/electron-builder.json
@@ -19,7 +19,7 @@
    "icon": "public/logo-small.png"
  },
  "linux":  {
-    "target": ["deb"],
+    "target": ["deb", "rpm"],
    "maintainer": "Tobias Zoghaib",
    "icon": "public/logo-small.png",
    "category": "Education"
@@ -35,6 +35,8 @@
    "!release",
    "!src",
    "!dist",
-    "!out"
+    "!out",
+    "!misc",
+    "!database.sqlite"
  ]
 }
--- a/example-config.json
+++ b/example-config.json
@@ -0,0 +1,19 @@
+{
+  "theme": "dark",
+  "language": "en",
+  "notAvailableExercises": [
+    "getting-known-register",
+    "getting-known-profile",
+    "getting-known-buy-ticket",
+    "broken-access-control-exercise-page",
+    "broken-access-control-hidden-concert",
+    "sql-injection-database-schema",
+    "sql-injection-all-accounts",
+    "sql-injection-account-roles",
+    "sql-injection-upgrade-privileges",
+    "sql-injection-capture-account",
+    "sql-injection-delete-rating",
+    "cross-site-scripting-hello-world",
+    "cross-site-scripting-external-script"
+  ]
+}
--- a/misc/database.drawio
+++ b/misc/database.drawio
--- a/misc/frontend-backend-system.drawio
+++ b/misc/frontend-backend-system.drawio
@@ -0,0 +1,84 @@
+<mxfile host="Electron" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/26.0.9 Chrome/128.0.6613.186 Electron/32.2.5 Safari/537.36" version="26.0.9">
+  <diagram name="Page-1" id="6ideKt-3XiqBCAVgAsyQ">
+    <mxGraphModel dx="1195" dy="689" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1169" pageHeight="827" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="KDqfIFqn06qLZiIO6-10-49" value="Frontend" style="rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;" parent="1" vertex="1">
+          <mxGeometry x="40" y="90" width="400" height="220" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-52" value="Subpage&lt;div&gt;&quot;All Bands&quot;&lt;/div&gt;" style="rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;" parent="1" vertex="1">
+          <mxGeometry x="50" y="120" width="150" height="180" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-50" value="Backend" style="rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;" parent="1" vertex="1">
+          <mxGeometry x="630" y="90" width="210" height="280" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-55" value="API Endpoint" style="rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;" parent="1" vertex="1">
+          <mxGeometry x="650" y="120" width="170" height="100" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-46" value="bandStore" style="rounded=0;whiteSpace=wrap;html=1;verticalAlign=top;" parent="1" vertex="1">
+          <mxGeometry x="270" y="120" width="160" height="160" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-70" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;strokeColor=#00CC00;" parent="1" source="KDqfIFqn06qLZiIO6-10-47" target="KDqfIFqn06qLZiIO6-10-65" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-71" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;strokeColor=#00CC00;" parent="1" source="KDqfIFqn06qLZiIO6-10-47" target="KDqfIFqn06qLZiIO6-10-66" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-73" value="&lt;font color=&quot;#00cc00&quot;&gt;Handles&lt;/font&gt;&lt;div&gt;&lt;font color=&quot;#00cc00&quot;&gt;changes&lt;/font&gt;&lt;/div&gt;" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;strokeColor=#00CC00;" parent="1" source="KDqfIFqn06qLZiIO6-10-47" target="KDqfIFqn06qLZiIO6-10-72" edge="1">
+          <mxGeometry x="0.168" y="24" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-47" value="bands" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="290" y="230" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-59" value="&lt;div style=&quot;&quot;&gt;&lt;font style=&quot;color: rgb(204, 0, 0);&quot;&gt;Stores&lt;/font&gt;&lt;/div&gt;&lt;div style=&quot;&quot;&gt;&lt;font style=&quot;color: rgb(204, 0, 0);&quot;&gt;results&lt;/font&gt;&lt;/div&gt;" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;align=left;fillColor=#e51400;strokeColor=#B20000;" parent="1" source="KDqfIFqn06qLZiIO6-10-48" target="KDqfIFqn06qLZiIO6-10-47" edge="1">
+          <mxGeometry x="-0.2" y="10" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-67" value="&lt;font style=&quot;color: rgb(0, 29, 188);&quot;&gt;requests&lt;/font&gt;" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.25;entryDx=0;entryDy=0;verticalAlign=bottom;fillColor=#0050ef;strokeColor=#001DBC;" parent="1" source="KDqfIFqn06qLZiIO6-10-48" target="KDqfIFqn06qLZiIO6-10-56" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-48" value="getBands()" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="290" y="150" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-53" value="&lt;font color=&quot;#bd7000&quot;&gt;Call function&lt;/font&gt;" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.25;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;verticalAlign=bottom;fillColor=#f0a30a;strokeColor=#BD7000;" parent="1" source="KDqfIFqn06qLZiIO6-10-52" target="KDqfIFqn06qLZiIO6-10-48" edge="1">
+          <mxGeometry x="-0.2148" y="7" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-68" value="&lt;font style=&quot;color: rgb(0, 87, 0);&quot;&gt;send http code &amp;amp;&lt;/font&gt;&lt;div&gt;&lt;span style=&quot;color: light-dark(rgb(0, 87, 0), rgb(0, 87, 0)); background-color: light-dark(#ffffff, var(--ge-dark-color, #121212));&quot;&gt;data sets&lt;/span&gt;&lt;/div&gt;" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.75;exitDx=0;exitDy=0;entryX=1;entryY=0.75;entryDx=0;entryDy=0;verticalAlign=top;fillColor=#008a00;strokeColor=#005700;" parent="1" source="KDqfIFqn06qLZiIO6-10-56" target="KDqfIFqn06qLZiIO6-10-48" edge="1">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-56" value="/bands" style="rounded=0;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="670" y="150" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-63" value="&lt;font style=&quot;color: rgb(0, 153, 153);&quot;&gt;get raw&lt;/font&gt;&lt;div&gt;&lt;font color=&quot;#009999&quot;&gt;datasets&lt;/font&gt;&lt;/div&gt;" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.855;exitY=0;exitDx=0;exitDy=4.35;exitPerimeter=0;align=left;strokeColor=#009999;" parent="1" source="KDqfIFqn06qLZiIO6-10-61" edge="1">
+          <mxGeometry x="-0.2154" y="-9" relative="1" as="geometry">
+            <mxPoint as="offset" />
+            <mxPoint x="751" y="180" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-61" value="DB" style="shape=cylinder3;whiteSpace=wrap;html=1;boundedLbl=1;backgroundOutline=1;size=15;" parent="1" vertex="1">
+          <mxGeometry x="700" y="280" width="60" height="80" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-62" value="&lt;font style=&quot;color: rgb(255, 0, 255);&quot;&gt;sends&lt;/font&gt;&lt;div&gt;&lt;font style=&quot;color: rgb(255, 0, 255);&quot;&gt;SQL&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font style=&quot;color: rgb(255, 0, 255);&quot;&gt;command&lt;/font&gt;&lt;/div&gt;" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.321;exitY=1.017;exitDx=0;exitDy=0;entryX=0.145;entryY=0;entryDx=0;entryDy=4.35;entryPerimeter=0;align=right;strokeColor=#FF00FF;exitPerimeter=0;" parent="1" source="KDqfIFqn06qLZiIO6-10-56" target="KDqfIFqn06qLZiIO6-10-61" edge="1">
+          <mxGeometry x="0.2159" y="-9" relative="1" as="geometry">
+            <mxPoint as="offset" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-65" value="Coldplay" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="65" y="170" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-66" value="Muse" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="65" y="210" width="120" height="30" as="geometry" />
+        </mxCell>
+        <mxCell id="KDqfIFqn06qLZiIO6-10-72" value="Radiohead" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
+          <mxGeometry x="65" y="250" width="120" height="30" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>
--- a/misc/frontend-structure.drawio
+++ b/misc/frontend-structure.drawio
@@ -1,181 +0,0 @@
-<mxfile host="Electron" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/24.7.17 Chrome/128.0.6613.36 Electron/32.0.1 Safari/537.36" version="24.7.17">
-  <diagram name="Page-1" id="z4ePnmX8JLkG3N1GDPOr">
-    <mxGraphModel dx="1783" dy="1720" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
-      <root>
-        <mxCell id="0" />
-        <mxCell id="1" parent="0" />
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-20" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-1" target="Fk8QGSgGJ1bhqam2HO4i-3" edge="1">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-21" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-1" target="Fk8QGSgGJ1bhqam2HO4i-15" edge="1">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-12" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" target="fY-Wzga6seKQwhded4A5-7">
-          <mxGeometry relative="1" as="geometry">
-            <mxPoint x="-360" y="700" as="targetPoint" />
-            <mxPoint x="-720" y="240" as="sourcePoint" />
-            <Array as="points">
-              <mxPoint x="-720" y="540" />
-            </Array>
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-16" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-1" target="Fk8QGSgGJ1bhqam2HO4i-13">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-17" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-1" target="fY-Wzga6seKQwhded4A5-8">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-22" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-1">
-          <mxGeometry relative="1" as="geometry">
-            <mxPoint x="-680" y="-20" as="targetPoint" />
-            <Array as="points">
-              <mxPoint x="-720" y="-20" />
-              <mxPoint x="-680" y="-20" />
-            </Array>
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-23" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-1" target="fY-Wzga6seKQwhded4A5-1">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-24" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-1" target="Fk8QGSgGJ1bhqam2HO4i-14">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-25" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-1" target="Fk8QGSgGJ1bhqam2HO4i-4">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-1" value="Homepage&lt;div&gt;&lt;font face=&quot;Courier New&quot;&gt;&lt;b&gt;/&lt;/b&gt;&lt;/font&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-800" y="-120" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-26" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-2" target="Fk8QGSgGJ1bhqam2HO4i-9">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-27" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-2" target="Fk8QGSgGJ1bhqam2HO4i-8">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-28" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-2" target="Fk8QGSgGJ1bhqam2HO4i-7">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-40" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;fillColor=#6d8764;strokeColor=#3A5431;" edge="1" parent="1" target="Fk8QGSgGJ1bhqam2HO4i-2">
-          <mxGeometry relative="1" as="geometry">
-            <mxPoint x="-679.6666666666667" y="70" as="targetPoint" />
-            <mxPoint x="-680" y="-20" as="sourcePoint" />
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-43" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-2" target="fY-Wzga6seKQwhded4A5-42">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-2" value="AccountHomePage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/account&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-600" y="-40" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-3" target="Fk8QGSgGJ1bhqam2HO4i-5">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-3" value="BandsPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/bands&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-600" y="280" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-4" value="PreferencesPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/preferences&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-600" y="600" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-10" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;entryX=0.5;entryY=0;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-5" target="fY-Wzga6seKQwhded4A5-5">
-          <mxGeometry relative="1" as="geometry">
-            <Array as="points">
-              <mxPoint x="-280" y="330" />
-              <mxPoint x="-280" y="330" />
-            </Array>
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-5" value="BandDetailPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/bands/detail/:bandName&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-360" y="280" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-41" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0;entryY=0.5;entryDx=0;entryDy=0;dashed=1;fillColor=#e51400;strokeColor=#B20000;" edge="1" parent="1" target="Fk8QGSgGJ1bhqam2HO4i-7">
-          <mxGeometry relative="1" as="geometry">
-            <mxPoint x="-200" y="-220" as="targetPoint" />
-            <mxPoint x="-680" y="-20" as="sourcePoint" />
-            <Array as="points">
-              <mxPoint x="-680" y="140" />
-            </Array>
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-7" value="LoginPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/account/login&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-360" y="120" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-8" value="AccountData&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/account/data&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-360" y="40" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-9" value="OrdersPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/account/orders&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-360" y="-40" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-13" value="AdminHome&lt;span style=&quot;background-color: initial;&quot;&gt;Page&lt;/span&gt;&lt;div&gt;&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/admin&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-600" y="760" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-14" value="HelpPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/help&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-600" y="680" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-15" target="Fk8QGSgGJ1bhqam2HO4i-16">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-15" value="LocationsPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/locations&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-600" y="440" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-9" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=0;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;" edge="1" parent="1" source="Fk8QGSgGJ1bhqam2HO4i-16" target="fY-Wzga6seKQwhded4A5-5">
-          <mxGeometry relative="1" as="geometry">
-            <Array as="points">
-              <mxPoint x="-280" y="420" />
-              <mxPoint x="-280" y="420" />
-            </Array>
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="Fk8QGSgGJ1bhqam2HO4i-16" value="LocationsDetailPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/locations/detail/:name&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" parent="1" vertex="1">
-          <mxGeometry x="-360" y="440" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-30" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="fY-Wzga6seKQwhded4A5-1" target="fY-Wzga6seKQwhded4A5-5">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-1" value="ConcertsPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/concerts&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
-          <mxGeometry x="-600" y="360" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-3" value="if logged in" style="text;strokeColor=none;align=center;fillColor=none;html=1;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
-          <mxGeometry x="-680" y="-60" width="80" height="30" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-4" value="else" style="text;strokeColor=none;align=center;fillColor=none;html=1;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
-          <mxGeometry x="-690" y="110" width="80" height="30" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-34" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=1;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="fY-Wzga6seKQwhded4A5-5" target="fY-Wzga6seKQwhded4A5-7">
-          <mxGeometry relative="1" as="geometry">
-            <Array as="points">
-              <mxPoint x="-160" y="380" />
-              <mxPoint x="-160" y="540" />
-            </Array>
-          </mxGeometry>
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-5" value="ConcertsBookingPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/concerts/booking/:id&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
-          <mxGeometry x="-360" y="360" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-7" value="BasketPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/basket&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
-          <mxGeometry x="-600" y="520" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-37" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="fY-Wzga6seKQwhded4A5-8" target="Fk8QGSgGJ1bhqam2HO4i-5">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-38" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="fY-Wzga6seKQwhded4A5-8" target="fY-Wzga6seKQwhded4A5-5">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-39" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;" edge="1" parent="1" source="fY-Wzga6seKQwhded4A5-8" target="Fk8QGSgGJ1bhqam2HO4i-16">
-          <mxGeometry relative="1" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-8" value="SearchPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/search&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
-          <mxGeometry x="-600" y="200" width="160" height="40" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-14" value="if ticket add to basket" style="text;strokeColor=none;align=center;fillColor=none;html=1;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
-          <mxGeometry x="-290" y="510" width="130" height="30" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-29" value="on log out" style="text;strokeColor=none;align=center;fillColor=none;html=1;verticalAlign=middle;whiteSpace=wrap;rounded=0;" vertex="1" parent="1">
-          <mxGeometry x="-460" y="90" width="60" height="30" as="geometry" />
-        </mxCell>
-        <mxCell id="fY-Wzga6seKQwhded4A5-42" value="AccountRatingsPage&lt;div&gt;&lt;b style=&quot;font-family: &amp;quot;Courier New&amp;quot;;&quot;&gt;&lt;font style=&quot;font-size: 10px;&quot;&gt;/account/ratings&lt;/font&gt;&lt;/b&gt;&lt;br&gt;&lt;/div&gt;" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
-          <mxGeometry x="-360" y="-120" width="160" height="40" as="geometry" />
-        </mxCell>
-      </root>
-    </mxGraphModel>
-  </diagram>
-</mxfile>
--- a/misc/images/admin-panel.png
+++ b/misc/images/admin-panel.png
--- a/misc/images/band-detail-seite.png
+++ b/misc/images/band-detail-seite.png
--- a/misc/images/booking-concert.png
+++ b/misc/images/booking-concert.png
--- a/misc/images/frontend-backend-system.png
+++ b/misc/images/frontend-backend-system.png
--- a/misc/images/homepage.png
+++ b/misc/images/homepage.png
--- a/misc/images/logo.png
+++ b/misc/images/logo.png
--- a/misc/images/search.png
+++ b/misc/images/search.png
--- a/misc/images/snackbar-feedback.png
+++ b/misc/images/snackbar-feedback.png
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "eventmaster",
-  "version": "0.1.0",
+  "version": "0.2.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "eventmaster",
-      "version": "0.1.0",
+      "version": "0.2.0",
      "license": "MIT",
      "dependencies": {
        "@mdi/font": "^7.4.47",
@@ -29,6 +29,9 @@
        "sequelize": "^6.37.4",
        "sequelize-typescript": "^2.1.6",
        "sqlite3": "^5.1.7",
+        "swagger-autogen": "^2.23.7",
+        "swagger-jsdoc": "^6.2.8",
+        "swagger-ui-express": "^5.0.1",
        "vue": "^3.4.29",
        "vue-i18n": "^10.0.4",
        "vue-router": "^4.4.5",
@@ -44,6 +47,8 @@
        "@types/jsonwebtoken": "^9.0.7",
        "@types/multer": "^1.4.12",
        "@types/node": "^22.9.0",
+        "@types/swagger-jsdoc": "^6.0.4",
+        "@types/swagger-ui-express": "^4.1.7",
        "@vitejs/plugin-vue": "^5.1.4",
        "concurrently": "^9.0.1",
        "copyfiles": "^2.4.1",
@@ -56,6 +61,50 @@
        "vue-tsc": "^2.1.10"
      }
    },
+    "node_modules/@apidevtools/json-schema-ref-parser": {
+      "version": "9.1.2",
+      "resolved": "https://registry.npmjs.org/@apidevtools/json-schema-ref-parser/-/json-schema-ref-parser-9.1.2.tgz",
+      "integrity": "sha512-r1w81DpR+KyRWd3f+rk6TNqMgedmAxZP5v5KWlXQWlgMUUtyEJch0DKEci1SorPMiSeM8XPl7MZ3miJ60JIpQg==",
+      "license": "MIT",
+      "dependencies": {
+        "@jsdevtools/ono": "^7.1.3",
+        "@types/json-schema": "^7.0.6",
+        "call-me-maybe": "^1.0.1",
+        "js-yaml": "^4.1.0"
+      }
+    },
+    "node_modules/@apidevtools/openapi-schemas": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@apidevtools/openapi-schemas/-/openapi-schemas-2.1.0.tgz",
+      "integrity": "sha512-Zc1AlqrJlX3SlpupFGpiLi2EbteyP7fXmUOGup6/DnkRgjP9bgMM/ag+n91rsv0U1Gpz0H3VILA/o3bW7Ua6BQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@apidevtools/swagger-methods": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@apidevtools/swagger-methods/-/swagger-methods-3.0.2.tgz",
+      "integrity": "sha512-QAkD5kK2b1WfjDS/UQn/qQkbwF31uqRjPTrsCs5ZG9BQGAkjwvqGFjjPqAuzac/IYzpPtRzjCP1WrTuAIjMrXg==",
+      "license": "MIT"
+    },
+    "node_modules/@apidevtools/swagger-parser": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/@apidevtools/swagger-parser/-/swagger-parser-10.0.3.tgz",
+      "integrity": "sha512-sNiLY51vZOmSPFZA5TF35KZ2HbgYklQnTSDnkghamzLb3EkNtcQnrBQEj5AOCxHpTtXpqMCRM1CrmV2rG6nw4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@apidevtools/json-schema-ref-parser": "^9.0.6",
+        "@apidevtools/openapi-schemas": "^2.0.4",
+        "@apidevtools/swagger-methods": "^3.0.2",
+        "@jsdevtools/ono": "^7.1.3",
+        "call-me-maybe": "^1.0.1",
+        "z-schema": "^5.0.1"
+      },
+      "peerDependencies": {
+        "openapi-types": ">=7"
+      }
+    },
    "node_modules/@babel/helper-string-parser": {
      "version": "7.25.7",
      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.7.tgz",
@@ -1546,6 +1595,12 @@
        "@jridgewell/sourcemap-codec": "^1.4.10"
      }
    },
+    "node_modules/@jsdevtools/ono": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@jsdevtools/ono/-/ono-7.1.3.tgz",
+      "integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
+      "license": "MIT"
+    },
    "node_modules/@malept/cross-spawn-promise": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@malept/cross-spawn-promise/-/cross-spawn-promise-2.0.0.tgz",
@@ -1933,6 +1988,13 @@
        "win32"
      ]
    },
+    "node_modules/@scarf/scarf": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@scarf/scarf/-/scarf-1.4.0.tgz",
+      "integrity": "sha512-xxeapPiUXdZAE3che6f3xogoJPeZgig6omHEy1rIY5WVsB3H2BHNnZH+gHG6x91SCWyQCzWGsuL2Hh3ClO5/qQ==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0"
+    },
    "node_modules/@sideway/address": {
      "version": "4.1.5",
      "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -2138,6 +2200,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "license": "MIT"
+    },
    "node_modules/@types/jsonwebtoken": {
      "version": "9.0.7",
      "resolved": "https://registry.npmjs.org/@types/jsonwebtoken/-/jsonwebtoken-9.0.7.tgz",
@@ -2256,6 +2324,24 @@
        "@types/send": "*"
      }
    },
+    "node_modules/@types/swagger-jsdoc": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/@types/swagger-jsdoc/-/swagger-jsdoc-6.0.4.tgz",
+      "integrity": "sha512-W+Xw5epcOZrF/AooUM/PccNMSAFOKWZA5dasNyMujTwsBkU74njSJBpvCCJhHAJ95XRMzQrrW844Btu0uoetwQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/swagger-ui-express": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@types/swagger-ui-express/-/swagger-ui-express-4.1.7.tgz",
+      "integrity": "sha512-ovLM9dNincXkzH4YwyYpll75vhzPBlWx6La89wwvYH7mHjVpf0X0K/vR/aUM7SRxmr5tt9z7E5XJcjQ46q+S3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/express": "*",
+        "@types/serve-static": "*"
+      }
+    },
    "node_modules/@types/validator": {
      "version": "13.12.2",
      "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.12.2.tgz",
@@ -3050,7 +3136,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
      "license": "Python-2.0"
    },
    "node_modules/array-flatten": {
@@ -3635,6 +3720,12 @@
        "url": "https://github.com/sponsors/ljharb"
      }
    },
+    "node_modules/call-me-maybe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-me-maybe/-/call-me-maybe-1.0.2.tgz",
+      "integrity": "sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==",
+      "license": "MIT"
+    },
    "node_modules/canvg": {
      "version": "3.0.10",
      "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz",
@@ -4370,6 +4461,15 @@
        "node": ">=4.0.0"
      }
    },
+    "node_modules/deepmerge": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/defaults": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/defaults/-/defaults-1.0.4.tgz",
@@ -4598,6 +4698,18 @@
        "node": ">=8"
      }
    },
+    "node_modules/doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
    "node_modules/dompurify": {
      "version": "2.5.7",
      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.7.tgz",
@@ -5060,6 +5172,15 @@
      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
      "license": "MIT"
    },
+    "node_modules/esutils": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
+      "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/etag": {
      "version": "1.8.1",
      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -5086,9 +5207,9 @@
      }
    },
    "node_modules/exifreader/node_modules/@xmldom/xmldom": {
-      "version": "0.9.5",
-      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.9.5.tgz",
-      "integrity": "sha512-6g1EwSs8cr8JhP1iBxzyVAWM6BIDvx9Y3FZRIQiMDzgG43Pxi8YkWOZ0nQj2NHgNzgXDZbJewFx/n+YAvMZrfg==",
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.9.6.tgz",
+      "integrity": "sha512-Su4xcxR0CPGwlDHNmVP09fqET9YxbyDXHaSob6JlBH7L6reTYaeim6zbk9o08UarO0L5GTRo3uzl0D+9lSxmvw==",
      "license": "MIT",
      "optional": true,
      "engines": {
@@ -6210,7 +6331,6 @@
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "argparse": "^2.0.1"
@@ -6252,7 +6372,6 @@
      "version": "2.2.3",
      "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
      "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
-      "dev": true,
      "license": "MIT",
      "bin": {
        "json5": "lib/cli.js"
@@ -6444,6 +6563,12 @@
      "license": "MIT",
      "peer": true
    },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "license": "MIT"
+    },
    "node_modules/lodash.includes": {
      "version": "4.3.0",
      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
@@ -6456,6 +6581,12 @@
      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
      "license": "MIT"
    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "license": "MIT"
+    },
    "node_modules/lodash.isinteger": {
      "version": "4.0.4",
      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
@@ -6480,6 +6611,12 @@
      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
      "license": "MIT"
    },
+    "node_modules/lodash.mergewith": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.2.tgz",
+      "integrity": "sha512-GK3g5RPZWTRSeLSpgP8Xhra+pnjBC56q9FZYe1d5RN3TJ35dbkGy3YqBSMbyCrlbi+CM9Z3Jk5yTL7RCsqboyQ==",
+      "license": "MIT"
+    },
    "node_modules/lodash.once": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
@@ -7229,6 +7366,13 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/openapi-types": {
+      "version": "12.1.3",
+      "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.1.3.tgz",
+      "integrity": "sha512-N4YtSYJqghVu4iek2ZUvcN/0aqH1kRDuNqzcycDxhOUpg7GdvLa2F3DgS6yBNhInhv2r/6I0Flkn7CqL8+nIcw==",
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/ora": {
      "version": "5.4.1",
      "resolved": "https://registry.npmjs.org/ora/-/ora-5.4.1.tgz",
@@ -8816,6 +8960,116 @@
        "node": ">=12.0.0"
      }
    },
+    "node_modules/swagger-autogen": {
+      "version": "2.23.7",
+      "resolved": "https://registry.npmjs.org/swagger-autogen/-/swagger-autogen-2.23.7.tgz",
+      "integrity": "sha512-vr7uRmuV0DCxWc0wokLJAwX3GwQFJ0jwN+AWk0hKxre2EZwusnkGSGdVFd82u7fQLgwSTnbWkxUL7HXuz5LTZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "acorn": "^7.4.1",
+        "deepmerge": "^4.2.2",
+        "glob": "^7.1.7",
+        "json5": "^2.2.3"
+      }
+    },
+    "node_modules/swagger-autogen/node_modules/acorn": {
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/swagger-jsdoc": {
+      "version": "6.2.8",
+      "resolved": "https://registry.npmjs.org/swagger-jsdoc/-/swagger-jsdoc-6.2.8.tgz",
+      "integrity": "sha512-VPvil1+JRpmJ55CgAtn8DIcpBs0bL5L3q5bVQvF4tAW/k/9JYSj7dCpaYCAv5rufe0vcCbBRQXGvzpkWjvLklQ==",
+      "license": "MIT",
+      "dependencies": {
+        "commander": "6.2.0",
+        "doctrine": "3.0.0",
+        "glob": "7.1.6",
+        "lodash.mergewith": "^4.6.2",
+        "swagger-parser": "^10.0.3",
+        "yaml": "2.0.0-1"
+      },
+      "bin": {
+        "swagger-jsdoc": "bin/swagger-jsdoc.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/swagger-jsdoc/node_modules/commander": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.0.tgz",
+      "integrity": "sha512-zP4jEKbe8SHzKJYQmq8Y9gYjtO/POJLgIdKgV7B9qNmABVFVc+ctqSX6iXh4mCpJfRBOabiZ2YKPg8ciDw6C+Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/swagger-jsdoc/node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "license": "ISC",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/swagger-parser": {
+      "version": "10.0.3",
+      "resolved": "https://registry.npmjs.org/swagger-parser/-/swagger-parser-10.0.3.tgz",
+      "integrity": "sha512-nF7oMeL4KypldrQhac8RyHerJeGPD1p2xDh900GPvc+Nk7nWP6jX2FcC7WmkinMoAmoO774+AFXcWsW8gMWEIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@apidevtools/swagger-parser": "10.0.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/swagger-ui-dist": {
+      "version": "5.18.2",
+      "resolved": "https://registry.npmjs.org/swagger-ui-dist/-/swagger-ui-dist-5.18.2.tgz",
+      "integrity": "sha512-J+y4mCw/zXh1FOj5wGJvnAajq6XgHOyywsa9yITmwxIlJbMqITq3gYRZHaeqLVH/eV/HOPphE6NjF+nbSNC5Zw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@scarf/scarf": "=1.4.0"
+      }
+    },
+    "node_modules/swagger-ui-express": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/swagger-ui-express/-/swagger-ui-express-5.0.1.tgz",
+      "integrity": "sha512-SrNU3RiBGTLLmFU8GIJdOdanJTl4TOmT27tt3bWWHppqYmAZ6IDuEuBvMU6nZq0zLEe6b/1rACXCgLZqO6ZfrA==",
+      "license": "MIT",
+      "dependencies": {
+        "swagger-ui-dist": ">=5.0.0"
+      },
+      "engines": {
+        "node": ">= v0.10.32"
+      },
+      "peerDependencies": {
+        "express": ">=4.0.0 || >=5.0.0-beta"
+      }
+    },
    "node_modules/tar": {
      "version": "6.2.1",
      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
@@ -9642,6 +9896,15 @@
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "license": "ISC"
    },
+    "node_modules/yaml": {
+      "version": "2.0.0-1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.0.0-1.tgz",
+      "integrity": "sha512-W7h5dEhywMKenDJh2iX/LABkbFnBxasD27oyXWDS/feDsxiw0dD5ncXdYXgkvAsXIY2MpW/ZKkr9IU30DBdMNQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
    "node_modules/yargs": {
      "version": "17.7.2",
      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
@@ -9705,6 +9968,36 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/z-schema": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-5.0.5.tgz",
+      "integrity": "sha512-D7eujBWkLa3p2sIpJA0d1pr7es+a7m0vFAnZLlCEKq/Ij2k0MLi9Br2UPxoxdYystm5K1yeBGzub0FlYUEWj2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash.get": "^4.4.2",
+        "lodash.isequal": "^4.5.0",
+        "validator": "^13.7.0"
+      },
+      "bin": {
+        "z-schema": "bin/z-schema"
+      },
+      "engines": {
+        "node": ">=8.0.0"
+      },
+      "optionalDependencies": {
+        "commander": "^9.4.1"
+      }
+    },
+    "node_modules/z-schema/node_modules/commander": {
+      "version": "9.5.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz",
+      "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": "^12.20.0 || >=14"
+      }
+    },
    "node_modules/zip-stream": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.1.tgz",
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
  "name": "eventmaster",
-  "version": "0.1.0",
+  "version": "0.4.0",
  "author": "Tobias Zoghaib",
  "description": "Hackable ticket store for educational purposes",
  "license": "MIT",
-  "homepage": "www.uni-hannover.de",
+  "homepage": "https://www.itsec.uni-hannover.de/de/usec/forschung/eventmaster-learning-web-attacks",
  "main": "build/src/electron/index.js",
  "private": true,
  "scripts": {
@@ -53,6 +53,9 @@
    "sequelize": "^6.37.4",
    "sequelize-typescript": "^2.1.6",
    "sqlite3": "^5.1.7",
+    "swagger-autogen": "^2.23.7",
+    "swagger-jsdoc": "^6.2.8",
+    "swagger-ui-express": "^5.0.1",
    "vue": "^3.4.29",
    "vue-i18n": "^10.0.4",
    "vue-router": "^4.4.5",
@@ -68,6 +71,8 @@
    "@types/jsonwebtoken": "^9.0.7",
    "@types/multer": "^1.4.12",
    "@types/node": "^22.9.0",
+    "@types/swagger-jsdoc": "^6.0.4",
+    "@types/swagger-ui-express": "^4.1.7",
    "@vitejs/plugin-vue": "^5.1.4",
    "concurrently": "^9.0.1",
    "copyfiles": "^2.4.1",
--- a/src/components/basics/cardViewOneLine.vue
+++ b/src/components/basics/cardViewOneLine.vue
@@ -3,17 +3,33 @@ defineProps({
  /** Displayed smaller text on the left side */
  descriptionText: {
    type: String,
-    default: ""
+    default: "",
+  },
+  loading: {
+    type: Boolean,
+    default: false,
  },

  /** Displayed bigger text on the right side */
-  valueText: [ String, Number ]
-})
+  valueText: [String, Number],
+});
 </script>

 <template>
-  <v-card variant="outlined" class="my-1 mx-2 px-2">
-    <v-row class="d-flex justify-center align-center">
+  <v-card variant="outlined" class="my-1 px-2">
+    <v-row v-if="loading">
+      <v-col>
+        <v-skeleton-loader
+          type="heading"
+          :loading="loading"
+          style="background-color: transparent"
+        >
+        sdasd
+        </v-skeleton-loader>
+      </v-col>
+    </v-row>
+
+    <v-row class="d-flex justify-center align-center" v-else>
      <v-col class="text-caption text-left" v-if="descriptionText.length > 0">
        {{ descriptionText }}
      </v-col>
@@ -23,4 +39,4 @@ defineProps({
      </v-col>
    </v-row>
  </v-card>
-</template>
+</template>
--- a/src/components/navigation/navigationAppendItems.vue
+++ b/src/components/navigation/navigationAppendItems.vue
@@ -1,50 +1,122 @@
 <script setup lang="ts">
-import { useAccountStore } from '@/stores/account.store';
-import { useBasketStore } from '@/stores/basket.store';
-import { useExerciseStore } from '@/stores/exercise.store';
+import { useAccountStore } from "@/stores/account.store";
+import { useBasketStore } from "@/stores/basket.store";
+import { useExerciseStore } from "@/stores/exercise.store";
+import { ref, watch } from "vue";

-const accountStore = useAccountStore()
-const basketStore = useBasketStore()
-const exerciseStore = useExerciseStore()
+const accountStore = useAccountStore();
+const basketStore = useBasketStore();
+const exerciseStore = useExerciseStore();
+const basketItems = ref(0);

-exerciseStore.getAllExercises()
+exerciseStore.getAllExercises();
+
+watch(
+  () => basketStore.itemsInBasket,
+  () => {
+    basketItems.value = basketStore.itemsInBasket.reduce((tot, item) => {
+      return tot + item.seats.length;
+    }, 0);
+  }
+);
 </script>

 <template>
-  <v-btn variant="plain" icon="mdi-magnify" to="/search" />
+  <!-- Global search -->
+  <v-tooltip :text="$t('misc.search.globalsearch')" location="bottom">
+    <template #activator="{ props }">
+      <v-btn v-bind="props" variant="plain" icon="mdi-magnify" to="/search" />
+    </template>
+  </v-tooltip>

-  <v-btn
-    v-if="accountStore.userAccountToken == ''"
-    variant="plain"
-    icon="mdi-account"
-    to="/account/login"
-  />
-  
-  <v-btn v-else variant="plain" icon="mdi-account-check" to="/account/home" />
+  <!-- Account -->
+  <v-tooltip :text="$t('account.account')" location="bottom">
+    <template #activator="{ props }">
+      <v-btn
+        v-if="accountStore.userAccountToken == ''"
+        v-bind="props"
+        variant="plain"
+        icon="mdi-account"
+        to="/account/login"
+      />

-  <div>
-    <v-badge
-      :content="basketStore.itemsInBasket.reduce((tot, item) => {
-        return tot + item.seats.length
-      }, 0)"
-      color="error" offset-x="8" offset-y="8">
-      <v-btn variant="plain" icon="mdi-cart" to="/basket" />
-    </v-badge>
-  </div>
+      <v-btn
+        v-else
+        v-bind="props"
+        variant="plain"
+        icon="mdi-account-check"
+        to="/account/home"
+      />
+    </template>
+  </v-tooltip>

-  <v-btn
-    v-if="accountStore.adminPanelVisible"
-    variant="plain"
-    icon="mdi-table-cog"
-    to="/admin"
-  />
+  <!-- Basket -->
+  <v-tooltip :text="$t('basket.basket')" location="bottom">
+    <template #activator="{ props }">
+      <v-badge
+        v-if="basketItems > 0"
+        :content="basketItems"
+        color="error"
+        offset-x="8"
+        offset-y="8"
+      >
+        <v-btn v-bind="props" variant="plain" icon="mdi-cart" to="/basket" />
+      </v-badge>

-  <v-btn
-    v-if="exerciseStore.helpPageVisible"
-    variant="plain"
-    icon="mdi-help"
-    to="/help"
-  />
-  
-  <v-btn variant="plain" icon="mdi-cog" to="/preferences"/>
-</template>
+      <v-btn
+        v-else
+        v-bind="props"
+        variant="plain"
+        icon="mdi-cart"
+        to="/basket"
+      />
+    </template>
+  </v-tooltip>
+
+  <!-- Exercise page -->
+  <v-tooltip :text="$t('misc.firstStartup.exercises')" location="bottom">
+    <template #activator="{ props }">
+      <v-badge
+        v-if="exerciseStore.exercisePageVisible"
+        :content="
+          exerciseStore.exercises.reduce((tot, exercise) => {
+            if (exercise.available && !exercise.solved) {
+              return tot + 1;
+            } else {
+              return tot;
+            }
+          }, 0)
+        "
+        color="error"
+        offset-x="8"
+        offset-y="8"
+      >
+        <v-btn
+          v-bind="props"
+          variant="plain"
+          icon="mdi-book-open-blank-variant"
+          to="/help"
+        />
+      </v-badge>
+    </template>
+  </v-tooltip>
+
+  <!-- Admin panel -->
+  <v-tooltip :text="$t('admin.adminpanel')" location="bottom">
+    <template #activator="{ props }">
+      <v-btn
+        v-if="accountStore.adminPanelVisible"
+        v-bind="props"
+        variant="plain"
+        icon="mdi-table-cog"
+        to="/admin"
+      />
+    </template>
+  </v-tooltip>
+
+  <v-tooltip :text="$t('preferences.preferences')" location="bottom">
+    <template #activator="{ props }">
+      <v-btn v-bind="props" variant="plain" icon="mdi-cog" to="/preferences" />
+    </template>
+  </v-tooltip>
+</template>
--- a/src/components/pageParts/concertListItem.vue
+++ b/src/components/pageParts/concertListItem.vue
@@ -1,27 +1,27 @@
 <script setup lang="ts">
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import { BandModel } from '@/data/models/acts/bandModel';
-import { ConcertModel } from '@/data/models/acts/concertModel';
-import { LocationModel } from '@/data/models/locations/locationModel';
-import { useRouter } from 'vue-router';
+import cardViewHorizontal from "@/components/basics/cardViewHorizontal.vue";
+import { BandModel } from "@/data/models/acts/bandModel";
+import { ConcertModel } from "@/data/models/acts/concertModel";
+import { LocationModel } from "@/data/models/locations/locationModel";
+import { useRouter } from "vue-router";

-const router = useRouter()
+const router = useRouter();

 defineProps({
  /** Concert to display */
  concert: {
    type: ConcertModel,
-    required: true
+    required: true,
  },

  band: {
    type: BandModel,
-    required: true
+    required: true,
  },

  location: {
    type: LocationModel,
-    required: true
+    required: true,
  },

  /** Display text parts as skeleton */
@@ -30,9 +30,9 @@ defineProps({
  /** Show or hide the button on the right side */
  showButton: {
    type: Boolean,
-    default: true
-  }
-})
+    default: true,
+  },
+});
 </script>

 <template>
@@ -40,7 +40,13 @@ defineProps({
    :title="concert.name"
    v-if="!loading"
    :link="showButton && concert.inStock > 0"
-    @click="showButton && concert.inStock > 0 ? router.push('/concerts/booking/' + location.urlName + '/' + concert.date) : () => {}"
+    @click="console.log(concert.date);
+      showButton && concert.inStock > 0
+        ? router.push(
+            '/concerts/booking/' + location.urlName + '/' + concert.date
+          )
+        : () => {}
+    "
  >
    <template #prepend>
      <div>
@@ -49,7 +55,9 @@ defineProps({
        </div>

        <div class="text-h6">
-          {{ new Date(concert.date).toLocaleString('default', { month: 'long' }) }}
+          {{
+            new Date(concert.date).toLocaleString("default", { month: "long" })
+          }}
        </div>

        <div class="text-h6">
@@ -71,28 +79,23 @@ defineProps({
    <template #append>
      <div>
        <div class="text-secondary font-weight-medium text-h6 pb-1">
-          {{ $t('misc.from') + ' ' + concert.price.toFixed(2) + ' €' }}
+          {{ $t("misc.from") + " " + concert.price.toFixed(2) + " €" }}
        </div>

        <div v-if="concert.inStock == 0 && showButton" class="text-h6">
-          {{ $t('concert.concertSoldOut') }}
+          {{ $t("concert.concertSoldOut") }}
        </div>

        <div v-else-if="showButton">
          <v-btn variant="flat" color="secondary">
-            {{ $t('concert.goToTheConcert') }}
+            {{ $t("concert.goToTheConcert") }}
          </v-btn>
        </div>
-
      </div>
    </template>
  </card-view-horizontal>

-  <card-view-horizontal 
-    v-else
-    :loading="loading"
-  >
-    <v-skeleton-loader
-      type="text" />
+  <card-view-horizontal v-else :loading="loading">
+    <v-skeleton-loader type="text" />
  </card-view-horizontal>
-</template>
+</template>
--- a/src/pages/admin/dashboardPage/dashboardCard.vue
+++ b/src/pages/admin/dashboardPage/dashboardCard.vue
@@ -37,7 +37,7 @@ defineProps({
        {{ secondLine }}
      </v-skeleton-loader>

-      <template #actions>
+      <template #actions v-if="!$slots.actions">
        <outlined-button
          @click="router.push(buttonRoute)"
          :loading="loading"
@@ -45,6 +45,10 @@ defineProps({
          {{ $t('misc.actions.more') }}
        </outlined-button>
      </template>
+
+      <template #actions v-else>
+        <slot name="actions"></slot>
+      </template>
    </card-view>
  </v-col>
 </template>
--- a/src/data/api/accountApi.ts
+++ b/src/data/api/accountApi.ts
@@ -27,7 +27,7 @@ export async function fetchAllAccounts(token: string) {
 * @returns Response from server with token body
 */
 export async function getLogin(username: string, password: string) {
-  return await axios.get(BASE_URL + "/account/login?username=" + username + "&password=" + password)
+  return await axios.get(BASE_URL + "/login?username=" + username + "&password=" + password)
 }


@@ -39,7 +39,7 @@ export async function getLogin(username: string, password: string) {
 * @returns Response from server with account body
 */
 export async function getAccount(token: string) {
-  return await axios.get(BASE_URL + "/account/data", {
+  return await axios.get(BASE_URL + "/account", {
    headers: {
      "Authorization": token
    }
@@ -77,9 +77,17 @@ export async function updateAccount(account: AccountModel, token: string) {
 * Delete an account in servers database
 * 
 * @param account Account to delete
+ * @param token Validation token
 * 
 * @returns Response from server
 */
-export async function deleteAccount(account: AccountModel) {
-  return await axios.delete(BASE_URL + "/account/" + account.id)
+export async function deleteAccount(account: AccountModel, token: string) {
+  return await axios.delete(BASE_URL + "/account", {
+    headers: {
+      "Authorization": token
+    },
+    data: {
+      account: account
+    }
+  })
 }
--- a/src/data/api/orderApi.ts
+++ b/src/data/api/orderApi.ts
@@ -1,17 +1,22 @@
 import axios from "axios"
 import { BasketItemModel } from "../models/ordering/basketItemModel"
+import { OrderApiModel } from "../models/apiEndpoints/orderApiModel"

 const BASE_URL = "http://localhost:3000/orders"

-export async function fetchUserOrders(userId: number) {
-  return axios.get(BASE_URL + "/" + userId)
+export async function fetchUserOrders(userId: number, token: string) {
+  return axios.get(BASE_URL + "?id=" + userId, {
+    headers: {
+      "Authorization": token
+    }
+  })
 }

 export async function createOrder(
-  accountId: number, 
  basketItem: Array<BasketItemModel>,
  paymentId: number,
-  addressId: number
+  addressId: number,
+  token: string
 ) {
  let tickets = []

@@ -25,21 +30,25 @@ export async function createOrder(
    }
  }

-  console.log({
-    accountId: accountId,
-    tickets: tickets,
-    paymentId: paymentId,
-    addressId: addressId
-  })
-
  return axios.post(BASE_URL, {
-    accountId: accountId,
    tickets: tickets,
    paymentId: paymentId,
-    addressId: addressId
+    addressId: addressId,
+  }, {
+    headers: {
+      "Authorization": token
+    }
  })
 }

-export async function fetchAllOrders() {
-  return axios.get(BASE_URL)
+export async function fetchAllOrders(token: string) {
+  return axios.get(BASE_URL, {
+    headers: {
+      "Authorization": token
+    }
+  })
+}
+
+export async function patchOrder(order: OrderApiModel) {
+  return axios.patch(BASE_URL, order)
 }
--- a/src/data/models/exercises/exerciseGroupModel.ts
+++ b/src/data/models/exercises/exerciseGroupModel.ts
@@ -2,6 +2,7 @@ export class ExerciseGroupModel {
  id = -1
  nameDe: string = ""
  nameEn: string = ""
+  icon: string = ""
  groupNr: number = 0
  descriptionDe: string = ""
  descriptionEn: string = ""
--- a/src/data/models/exercises/exerciseModel.ts
+++ b/src/data/models/exercises/exerciseModel.ts
@@ -1,7 +1,8 @@
 import { ExerciseGroupModel } from "./exerciseGroupModel"

 export class ExerciseModel {
-  id = -1
+  id: number = -1
+  uuid: string = ""
  nameDe: string = ""
  nameEn: string = ""
  exerciseNr: number = 0
@@ -9,4 +10,5 @@ export class ExerciseModel {
  descriptionEn: string = ""
  solved: boolean = false
  exerciseGroup: ExerciseGroupModel
+  available: boolean = true
 }
--- a/src/layouts/adminDataLayout.vue
+++ b/src/layouts/adminDataLayout.vue
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -74,7 +74,7 @@
    "emailIsNotValid": "Ungültige E-Mail Addresse",
    "emailRequired": "E-Mail-Adresse benötigt",
    "accountManagement": "Account verwalten",
-    "accountManagementDescription": "Persönliche Daten, Adressen, Bezahlmethoden",
+    "accountManagementDescription": "Persönliche Daten, Konto löschen",
    "login": {
      "pleaseLoginToOrder": "Bitte anmelden zum bestellen",
      "backToLogin": "Zurück zum Login",
@@ -97,7 +97,8 @@
      "postalCode": "Postleitzahl",
      "placeOfResidence": "Wohnort",
      "bankName": "Name der Bank",
-      "iban": "IBAN"
+      "iban": "IBAN",
+      "actions": "Aktionen"
    },
    "deleteAccount": {
      "deleteAccount": "Account löschen",
@@ -109,7 +110,16 @@
    "addNewAccount": "Neuen Account hinzufügen",
    "accountRole": "Account Rolle",
    "noRealPaymentsNeeded": "Keine echten Kontodaten nötig!",
-    "administrator": "Administrator | Administratoren"
+    "administrator": "Administrator | Administratoren",
+    "managePaymentsDescription": "Bezahlarten hinzufügen, ändern, löschen",
+    "paymentsManagement": "Bezahlarten verwalten",
+    "payments": {
+      "editPayment": "Bezahlart bearbeiten",
+      "editAddress": "Adresse bearbeiten"
+    },
+    "addressManagementDetails": "Adressen hinzufügen, ändern, löschen",
+    "addressManagement": "Adressen verwalten",
+    "sessionTime": "Session time"
  },
  "order": {
    "oclock": "Uhr",
@@ -121,7 +131,8 @@
    "noOrdersText": "Bisher wurden keine Bestellungen von diesem Account getätigt. Gehe zum Warenkorb und bestelle!",
    "ordersDescription": "Übersicht aller getätigten Bestellungen",
    "order": "Bestellung | Bestellungen",
-    "notShipped": "noch nicht versendet"
+    "notShipped": "noch nicht versendet",
+    "orderState": "Bestellstatus"
  },
  "basket": {
    "addToBasket": "Zum Warenkorb hinzufügen",
@@ -157,12 +168,26 @@
        "title": "Auf Werkseinstellungen zurücksetzen?",
        "description": "Sollen alle Einstellungen und Daten auf Werkseinstellungen zurückgesetzt werden? Alle Änderungen und Fortschritte gehen verloren!"
      }
-    }
+    },
+    "exercises": {
+      "available": "{0} von {1} Aufgaben verfügbar",
+      "edit": "Verfügbare Aufgaben bearbeiten",
+      "settings": "Aufgaben-Konfiguration"
+    },
+    "importExport": {
+      "title": "Import/Export Konfiguration",
+      "selectConfigFile": "Konfigurations-Datei auswählen",
+      "download": "Konfiguration exportieren",
+      "upload": "Datei hochladen"
+    },
+    "preferences": "Einstellungen"
  },
  "help": {
    "scoreBoard": {
      "exerciseGroupNr": "Aufgabengruppe {0}: ",
-      "exerciseNr": "Aufgabe {0}.{1}: "
+      "exerciseNr": "Aufgabe {0}.{1}: ",
+      "generatePdf": "PDF generieren",
+      "personalSolutionKey": "Persönlicher Lösungsschlüssel"
    }
  },
  "bannerMessages": {
@@ -216,6 +241,7 @@
      "cancel": "Abbrechen",
      "more": "Mehr",
      "confirm": "Bestätigen",
+      "back": "Zurück",
      "next": "Weiter"
    },
    "validation": {
@@ -232,7 +258,7 @@
    "firstStartup": {
      "title": "Ersteinrichtung",
      "description": "Die Datenbank wird eingerichtet. Bitte warten...",
-      "createDatabase": "Erstelle Datenbank...",
+      "createDatabase": "Datenbank Einrichtung",
      "complete": "Fertig",
      "finished": "Abgeschlossen",
      "createExercises": "Erstelle Aufgaben...",
@@ -240,6 +266,7 @@
      "database": "Datenbank",
      "exercises": "Aufgaben",
      "userData": "Persönliche Daten",
+      "lookAndFeel": "Look and feel",
      "enterYourPersonalData": "Bitte gebe nun deinen Namen und deine Matrikelnummer von der Universität ein. Überprüfe die Angaben vor dem Absenden genau! Die Angaben können später nicht ohne Verlust des Bearbeitungsfortschrittes geändert werden!"
    },
    "user": "Angaben zur Person",
@@ -254,10 +281,26 @@
      "empty": {
        "headline": "So leer hier..."
      },
-      "searchterm": "Suchbegriff"
-    }
+      "searchterm": "Suchbegriff",
+      "globalsearch": "Globale Suche"
+    },
+    "submit": "Absenden",
+    "content": "Inhalt",
+    "source": "Quelle",
+    "softwareVersion": "Software Version",
+    "license": "Lizenz",
+    "developer": "Entwickler",
+    "developedFor": "Entwickelt im Auftrag",
+    "copyright": "Copyright",
+    "githubRepository": "GitHub Repository",
+    "projectPage": "Projektseite"
  },
  "genre": {
-    "withoutBand": "ohne Band"
+    "withoutBand": "ohne Band",
+    "popular": "Beliebte Genres",
+    "allGenres": "Alle Genres"
+  },
+  "admin": {
+    "adminpanel": "Admin Panel"
  }
 }
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -74,7 +74,7 @@
    "emailIsNotValid": "E-Mail not valid",
    "emailRequired": "E-Mail required",
    "accountManagement": "Manage Account",
-    "accountManagementDescription": "Personal data, addresses, payments",
+    "accountManagementDescription": "Personal data, delete account",
    "login": {
      "pleaseLoginToOrder": "Please login to order",
      "backToLogin": "Back to Login",
@@ -97,7 +97,8 @@
      "postalCode": "Postal code",
      "placeOfResidence": "Place of residence",
      "bankName": "Name of bank",
-      "iban": "IBAN"
+      "iban": "IBAN",
+      "actions": "Actions"
    },
    "deleteAccount": {
      "deleteAccount": "Delete Account",
@@ -109,7 +110,16 @@
    "addNewAccount": "Add new account",
    "accountRole": "Account Role",
    "noRealPaymentsNeeded": "No real payment data required!",
-    "administrator": "Administrator"
+    "administrator": "Administrator",
+    "managePaymentsDescription": "Add, change, remove payments",
+    "paymentsManagement": "Manage payments",
+    "payments": {
+      "editPayment": "Edit Payment",
+      "editAddress": "Edit address"
+    },
+    "addressManagementDetails": "Add, change, remove addresses",
+    "addressManagement": "Manage addresses",
+    "sessionTime": "Session time"
  },
  "order": {
    "oclock": "o'clock",
@@ -118,10 +128,11 @@
    "takeOrder": "Execute order",
    "noOrders": "No orders found",
    "orderedAt": "Ordered at",
-    "noOrdersText": "Bisher wurden keine Bestellungen von diesem Account getätigt. Gehe zum Warenkorb und bestelle!",
+    "noOrdersText": "No orders have been placed with this account yet. Go to your shopping cart and place your order!",
    "ordersDescription": "Overview of all placed orders",
    "order": "Order | Orders",
-    "notShipped": "don't shipped"
+    "notShipped": "don't shipped",
+    "orderState": "Order state"
  },
  "basket": {
    "addToBasket": "Add to basket",
@@ -157,12 +168,28 @@
        "title": "Factory reset?",
        "description": "Do you really want to reset everything? Every change will be lost!"
      }
-    }
+    },
+    "exercises": {
+      "settings": "Exercise Configuration",
+      "available": "{0} of {1} exercises are available",
+      "uploadExerciseConfig": "Upload exercise config",
+      "edit": "Edit available exercises",
+      "upload": "Upload exercises config"
+    },
+    "importExport": {
+      "title": "Import/Export config",
+      "selectConfigFile": "Select config file",
+      "upload": "Upload file",
+      "download": "Export config"
+    },
+    "preferences": "Preferences"
  },
  "help": {
    "scoreBoard": {
      "exerciseGroupNr": "Exercise Group {0}: ",
-      "exerciseNr": "Exercise {0}.{1}: "
+      "exerciseNr": "Exercise {0}.{1}: ",
+      "generatePdf": "Generate PDF",
+      "personalSolutionKey": "Personal solution key"
    }
  },
  "bannerMessages": {
@@ -216,6 +243,7 @@
      "cancel": "Cancel",
      "more": "More",
      "confirm": "Confirm",
+      "back": "Back",
      "next": "Next"
    },
    "validation": {
@@ -232,14 +260,13 @@
    "firstStartup": {
      "title": "First startup",
      "description": "Creating database. Please wait...",
-      "createDatabase": "Create Database...",
+      "createDatabase": "Create Database",
      "complete": "Complete",
-      "createExercises": "Create Exercises...",
-      "finished": "Finished",
      "connectToServer": "Server",
      "database": "Database",
      "exercises": "Exercises",
      "userData": "User data",
+      "lookAndFeel": "Look and feel",
      "enterYourPersonalData": "Please enter your name and your Matrikel number from your university. Check it twice! You can't change it later without loosing your exercise progress!"
    },
    "user": "About person",
@@ -254,10 +281,26 @@
      "empty": {
        "headline": "So empty here..."
      },
-      "searchterm": "Search term"
-    }
+      "searchterm": "Search term",
+      "globalsearch": "Global Search"
+    },
+    "submit": "Submit",
+    "content": "Content",
+    "source": "Source",
+    "softwareVersion": "Software Version",
+    "license": "License",
+    "developer": "Developer",
+    "developedFor": "Developed for",
+    "copyright": "Copyright",
+    "githubRepository": "GitHub Repository",
+    "projectPage": "Project page"
  },
  "genre": {
-    "withoutBand": "without Band"
+    "withoutBand": "without Band",
+    "popular": "Popular Genres",
+    "allGenres": "All Genres"
+  },
+  "admin": {
+    "adminpanel": "Admin Panel"
  }
 }
--- a/src/pages/account/accountAddressesPage/addressEditDialog.vue
+++ b/src/pages/account/accountAddressesPage/addressEditDialog.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import OutlinedButton from '@/components/basics/outlinedButton.vue';
+import { getIbanRules, getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
+import { useAccountStore } from '@/stores/account.store';
+import cardViewOneLine from '@/components/basics/cardViewOneLine.vue';
+import { ref } from 'vue';
+
+const valid = ref(false)
+
+const accountStore = useAccountStore()
+</script>
+
+<template>
+  <action-dialog
+    v-model="accountStore.showEditDialog"
+    max-width="800"
+    :title="$t('account.payments.editAddress')"
+  >
+    <v-container>
+      <v-form v-model="valid">
+        <v-row class="pt-5">
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.street')"
+                v-model="accountStore.address.street"
+                :rules="getStringRules()"
+                variant="outlined"
+                clearable
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.houseNumber')"
+                v-model="accountStore.address.houseNumber"
+                :rules="getNumberStartRules()"
+                variant="outlined"
+                clearable
+              />
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.postalCode')"
+                v-model="accountStore.address.postalCode"
+                :rules="getPostalRules()"
+                variant="outlined"
+                clearable
+              />
+            </v-col>
+            <v-col>
+              <v-text-field
+                :label="$t('account.userData.placeOfResidence')"
+                v-model="accountStore.address.city"
+                :rules="getStringRules()"
+                variant="outlined"
+                clearable
+              />
+            </v-col>
+          </v-row>
+      </v-form>
+
+    </v-container>
+
+    <template #actions>
+      <outlined-button
+        color="success"
+        prepend-icon="mdi-content-save"
+        :disabled="!valid"
+        :loading="accountStore.fetchInProgress"
+        @click="accountStore.saveAddress"
+      >
+        {{ $t('misc.actions.save') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>
--- a/src/pages/account/accountAddressesPage/index.vue
+++ b/src/pages/account/accountAddressesPage/index.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import dataLayout from '@/layouts/dataLayout.vue';
+import { useAccountStore } from '@/stores/account.store';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import addressEditDialog from './addressEditDialog.vue';
+
+const accountStore = useAccountStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('account.userData.street'), value: "street" },
+  { title: feedbackStore.i18n.t('account.userData.houseNumber'), value: "houseNumber" },
+  { title: feedbackStore.i18n.t('account.userData.postalCode'), value: "postalCode" },
+  { title: feedbackStore.i18n.t('account.userData.placeOfResidence'), value: "city" },
+  { title: feedbackStore.i18n.t('account.userData.actions'), value: "actions", width: 130 }
+]
+
+accountStore.refreshAccount()
+</script>
+
+<template>
+  <data-layout
+    :add-button-string="$t('misc.actions.add')"
+    :fetch-in-progress="accountStore.fetchInProgress"
+    :on-add-click="() => { accountStore.newAddress() }"
+  >
+    <v-data-table
+      :headers="headers"
+      :items="accountStore.userAccount.addresses"
+      :loading="accountStore.fetchInProgress"
+    >
+      <template #item.actions="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="accountStore.editAddress(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="accountStore.removeAddress(item)"
+        />
+      </template>
+    </v-data-table>
+  </data-layout>
+
+  <address-edit-dialog />
+</template>
--- a/src/pages/account/accountDataPage/accountDataCard.vue
+++ b/src/pages/account/accountDataPage/accountDataCard.vue
@@ -81,7 +81,6 @@ const stringRules = [
          v-model="accountStore.userAccount.firstName"
          variant="outlined"
          :rules="stringRules"
-          hide-details
        />
      </v-col>
      <v-col>
@@ -90,7 +89,6 @@ const stringRules = [
          v-model="accountStore.userAccount.lastName"
          variant="outlined"
          :rules="stringRules"
-          hide-details
        />
      </v-col>
    </v-row>
--- a/src/pages/account/accountDataPage/addressesCard.vue
+++ b/src/pages/account/accountDataPage/addressesCard.vue
@@ -1,111 +0,0 @@
-<script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
-import { useAccountStore } from '@/stores/account.store';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-import { AddressModel } from '@/data/models/user/addressModel';
-import { getNumberStartRules, getPostalRules, getStringRules } from '@/scripts/validationRules';
-
-const accountStore = useAccountStore()
-</script>
-
-<template>
-  <card-view 
-    icon="mdi-home"
-    :title="$t('account.userData.address', 2)"
-  >
-    <v-expansion-panels v-if="accountStore.userAccount.addresses.length > 0">
-      <v-expansion-panel
-        v-for="address in accountStore.userAccount.addresses"
-        color="primary"
-      >
-        <template #title>
-          <div v-if="address.street != undefined">
-            {{ address.street }}
-          </div>
-          
-          &nbsp;
-          
-          <div v-if="address.houseNumber != undefined">
-            {{ address.houseNumber }}
-          </div>
-        </template>
-
-        <template #text>
-          <v-row class="pt-5">
-            <v-col>
-              <v-text-field
-                :label="$t('account.userData.street')"
-                v-model="address.street"
-                :rules="getStringRules()"
-                variant="outlined"
-                clearable
-                hide-details
-              />
-            </v-col>
-            <v-col>
-              <v-text-field
-                :label="$t('account.userData.houseNumber')"
-                v-model="address.houseNumber"
-                :rules="getNumberStartRules()"
-                variant="outlined"
-                clearable
-                hide-details
-              />
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col>
-              <v-text-field
-                :label="$t('account.userData.postalCode')"
-                v-model="address.postalCode"
-                :rules="getPostalRules()"
-                variant="outlined"
-                clearable
-                hide-details
-              />
-            </v-col>
-            <v-col>
-              <v-text-field
-                :label="$t('account.userData.placeOfResidence')"
-                v-model="address.city"
-                :rules="getStringRules()"
-                variant="outlined"
-                clearable
-                hide-details
-              />
-            </v-col>
-          </v-row>
-
-          <v-row>
-            <v-col class="d-flex justify-center align-center">
-              <outlined-button
-                @click="accountStore.removeAddress(address)"
-                color="error"
-                prepend-icon="mdi-delete"
-              >
-                {{ $t('misc.actions.remove') }}
-              </outlined-button>
-            </v-col>
-          </v-row>
-        </template>
-      </v-expansion-panel>
-    </v-expansion-panels>
-
-    <v-empty-state
-      v-else
-      :title="$t('account.noAddresses')"
-      icon="mdi-home-off"
-    />
-
-    <template #actions>
-      <outlined-button
-        @click="accountStore.userAccount.addresses.push(new AddressModel())"
-        prepend-icon="mdi-plus"
-        color="success"
-      >
-        {{ $t('misc.actions.add') }}
-      </outlined-button>
-    </template>
-  </card-view>
-</template>
--- a/src/pages/account/accountDataPage/index.vue
+++ b/src/pages/account/accountDataPage/index.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import accountDataCard from './accountDataCard.vue';
 import accountManagingCard from './accountManagingCard.vue';
-import addressesCard from './addressesCard.vue';
-import paymentsCard from './paymentsCard.vue';
 import { useRouter } from 'vue-router';
 import accountSubPageLayout from '@/layouts/accountSubPageLayout.vue';

@@ -17,18 +15,6 @@ const router = useRouter()
      </v-col>
    </v-row>

-    <v-row>
-      <v-col>
-        <addresses-card />
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col>
-        <payments-card />
-      </v-col>
-    </v-row>
-
    <v-row>
      <v-col>
        <account-managing-card />
--- a/src/pages/account/accountDataPage/paymentsCard.vue
+++ b/src/pages/account/accountDataPage/paymentsCard.vue
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
-import { useAccountStore } from '@/stores/account.store';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-import { PaymentModel } from '@/data/models/user/paymentModel';
-import { getIbanRules, getStringRules } from '@/scripts/validationRules';
-import cardViewOneLine from '@/components/basics/cardViewOneLine.vue';
-
-const accountStore = useAccountStore()
-</script>
-
-<template>
-  <card-view 
-    icon="mdi-currency-usd"
-    :title="$t('account.userData.payment', 2)"
-  >
-    <v-row>
-      <v-col>
-        <card-view-one-line
-          color="warning"
-          prepend-icon="mdi-alert"
-          :title="$t('account.noRealPaymentsNeeded')"
-        />
-      </v-col>
-    </v-row>
-
-    <v-row v-if="accountStore.userAccount.payments.length > 0">
-      <v-col>
-        <v-expansion-panels>
-          <v-expansion-panel
-            v-for="payment in accountStore.userAccount.payments"
-            color="primary"
-          >
-            <template #title>
-              {{ payment.bankName }}
-            </template>
-            <template #text>
-              <v-row class="pt-5">
-                <v-col>
-                  <v-text-field
-                    :label="$t('account.userData.bankName')"
-                    v-model="payment.bankName"
-                    :rules="getStringRules()"
-                    variant="outlined"
-                    hide-details
-                  />
-                </v-col>
-                <v-col>
-                  <v-text-field
-                    :label="$t('account.userData.iban')"
-                    v-model="payment.iban"
-                    :rules="getIbanRules()"
-                    variant="outlined"
-                    hide-details
-                  />
-                </v-col>
-              </v-row>
-
-              <v-row>
-                <v-col class="d-flex justify-center align-center">
-                  <outlined-button
-                    @click="accountStore.removePayment(payment)"
-                    color="error"
-                    prepend-icon="mdi-delete"
-                  >
-                    {{ $t('misc.actions.remove') }}
-                  </outlined-button>
-                </v-col>
-              </v-row>
-            </template>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </v-col>
-    </v-row>
-
-    <v-row v-else>
-      <v-col>
-        <v-empty-state
-          :title="$t('account.noPayments')"
-          icon="mdi-currency-usd-off"
-        />
-      </v-col>
-    </v-row>
-
-
-
-    <template #actions>
-      <outlined-button
-        @click="accountStore.userAccount.payments.push(new PaymentModel())"
-        prepend-icon="mdi-plus"
-        color="success"
-      >
-        {{ $t('misc.actions.add') }}
-      </outlined-button>
-    </template>
-  </card-view>
-</template>
--- a/src/pages/account/accountHomePage/index.vue
+++ b/src/pages/account/accountHomePage/index.vue
@@ -1,60 +1,76 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/stores/account.store';
-import cardView from '@/components/basics/cardView.vue';
+import dashboardCard from '@/components/pageParts/dashboardCard.vue';
+import { useOrderStore } from '@/stores/order.store';
+import OutlinedButton from '@/components/basics/outlinedButton.vue';
 import { useRouter } from 'vue-router';
+import moment from 'moment';
+import { millisecondsToHumanReadableString } from '@/scripts/dateTimeScripts';

 const accountStore = useAccountStore()
+const orderStore = useOrderStore()
 const router = useRouter()
+
+orderStore.getOrdersOfAccount(accountStore.userAccount, accountStore.userAccountToken)
+accountStore.refreshAccount()
 </script>

 <template>
-  <v-container max-width="1000">
+  <v-container>
    <v-row>
-      <v-col>
-        <card-view
-          :title="$t('misc.greeting', { msg: accountStore.userAccount.username })"
-          icon="mdi-hand-wave"
-        >
-          <v-container>
-            <v-row>
-              <v-col>
-                <card-view
-                  :title="$t('order.order', 2)"
-                  icon="mdi-basket-check"
-                  @click="router.push('/account/orders')"
-                >
-                  {{ $t('order.ordersDescription') }}
-                </card-view>
-              </v-col>
-            </v-row>
+      <dashboard-card
+        :title="$t('order.order', 2)"
+        icon="mdi-basket-check"
+        :first-line="orderStore.orders.length + ' ' + $t('order.order', 2)"
+        :second-line="$t('order.ordersDescription')"
+        button-route="/account/orders"
+        :loading="orderStore.fetchInProgress"
+      />

-            <v-row>
-              <v-col>
-                <card-view
-                  :title="$t('account.accountManagement')"
-                  icon="mdi-account"
-                  @click="router.push('/account/data')"
-                >
-                  {{ $t('account.accountManagementDescription') }}
-                </card-view>
-              </v-col>
-            </v-row>
+      <dashboard-card
+        :title="$t('account.accountManagement')"
+        icon="mdi-account"
+        :first-line="accountStore.userAccount.username"
+        :second-line="$t('account.accountManagementDescription')"
+        :loading="accountStore.fetchInProgress"
+        button-route="/account/data"
+      />

-            <v-row>
-              <v-col>
-                <card-view
-                  :title="$t('account.logout.logout')"
-                  icon="mdi-logout"
-                  @click="accountStore.logout(); router.push('/account/login')"
-                >
-                  {{ $t('account.logout.logoutDescription') }}
-                </card-view>
-              </v-col>
-            </v-row>
-          </v-container>
-        </card-view>
-        
-      </v-col>
+      <dashboard-card
+        :title="$t('account.addressManagement')"
+        icon="mdi-city"
+        :first-line="accountStore.userAccount.addresses?.length + ' ' + 
+          $t('account.userData.address', accountStore.userAccount.addresses?.length)"
+        :second-line="$t('account.addressManagementDetails')"
+        :loading="accountStore.fetchInProgress"
+        button-route="/account/addresses"
+      />
+
+      <dashboard-card
+        :title="$t('account.paymentsManagement', 2)"
+        icon="mdi-currency-eur"
+        :first-line="accountStore.userAccount.payments?.length + ' ' + 
+          $t('account.userData.payment', accountStore.userAccount.payments?.length)"
+        :second-line="$t('account.managePaymentsDescription')"
+        :loading="accountStore.fetchInProgress"
+        button-route="/account/payments"
+      />
+
+      <dashboard-card
+        :title="$t('account.logout.logout')"
+        :first-line="millisecondsToHumanReadableString(moment().diff(moment(accountStore.loggedInTimeStamp))) + ' h ' + $t('account.sessionTime')"
+        :second-line="$t('account.logout.logoutDescription')"
+        icon="mdi-logout"
+      >
+        <template #actions>
+          <outlined-button
+            color="error"
+            @click="accountStore.logout(); router.push('/account/login')"
+          >
+            {{ $t('account.logout.logout') }}
+          </outlined-button>
+        </template>
+      </dashboard-card>
    </v-row>
  </v-container>
 </template>
--- a/src/pages/account/accountPaymentsPage/index.vue
+++ b/src/pages/account/accountPaymentsPage/index.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import dataLayout from '@/layouts/dataLayout.vue';
+import { useAccountStore } from '@/stores/account.store';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import PaymentEditDialog from './paymentEditDialog.vue';
+
+const accountStore = useAccountStore()
+const feedbackStore = useFeedbackStore()
+
+const headers = [
+  { title: feedbackStore.i18n.t('account.userData.bankName'), value: "bankName" },
+  { title: feedbackStore.i18n.t('account.userData.iban'), value: "iban" },
+  { title: feedbackStore.i18n.t('account.userData.actions'), value: "actions", width: 130 }
+]
+
+accountStore.refreshAccount()
+</script>
+
+<template>
+  <data-layout
+    :add-button-string="$t('misc.actions.add')"
+    :fetch-in-progress="accountStore.fetchInProgress"
+    :on-add-click="() => { accountStore.newPayment() }"
+  >
+    <v-data-table
+      :headers="headers"
+      :items="accountStore.userAccount.payments"
+      :loading="accountStore.fetchInProgress"
+    >
+      <template #item.actions="{ item }">
+        <v-btn
+          icon="mdi-pencil"
+          variant="plain"
+          color="orange"
+          @click="accountStore.editPayment(item)"
+        />
+
+        <v-btn
+          icon="mdi-delete"
+          variant="plain"
+          color="red"
+          @click="accountStore.removePayment(item)"
+        />
+      </template>
+    </v-data-table>
+  </data-layout>
+
+  <payment-edit-dialog />
+</template>
--- a/src/pages/account/accountPaymentsPage/paymentEditDialog.vue
+++ b/src/pages/account/accountPaymentsPage/paymentEditDialog.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import OutlinedButton from '@/components/basics/outlinedButton.vue';
+import { getIbanRules, getStringRules } from '@/scripts/validationRules';
+import { useAccountStore } from '@/stores/account.store';
+import cardViewOneLine from '@/components/basics/cardViewOneLine.vue';
+import { ref } from 'vue';
+
+const valid = ref(false)
+
+const accountStore = useAccountStore()
+</script>
+
+<template>
+  <action-dialog
+    v-model="accountStore.showEditDialog"
+    max-width="800"
+    :title="$t('account.payments.editPayment')"
+  >
+    <v-container>
+      <v-row>
+        <v-col>
+          <card-view-one-line
+            color="warning"
+            prepend-icon="mdi-alert"
+            :title="$t('account.noRealPaymentsNeeded')"
+          />
+        </v-col>
+      </v-row>
+
+      <v-form v-model="valid">
+        <v-row>
+          <v-col>
+            <v-text-field
+              :label="$t('account.userData.bankName')"
+              v-model="accountStore.payment.bankName"
+              :rules="getStringRules(8)"
+              variant="outlined"
+            />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-text-field
+              :label="$t('account.userData.iban')"
+              v-model="accountStore.payment.iban"
+              :rules="getIbanRules()"
+              variant="outlined"
+            />
+          </v-col>
+        </v-row>
+      </v-form>
+
+    </v-container>
+
+    <template #actions>
+      <outlined-button
+        color="success"
+        prepend-icon="mdi-content-save"
+        :disabled="!valid"
+        :loading="accountStore.fetchInProgress"
+        @click="accountStore.savePayment"
+      >
+        {{ $t('misc.actions.save') }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>
--- a/src/pages/account/loginPage/registerForm.vue
+++ b/src/pages/account/loginPage/registerForm.vue
@@ -10,6 +10,7 @@ const accountStore = useAccountStore()
 async function registerAccount() {
  accountStore.registerAccount()
    .then(result => {
+      console.log(result)
      if (result) {
        showRegisterCard.value = false
      }
--- a/src/pages/account/ordersPage/index.vue
+++ b/src/pages/account/ordersPage/index.vue
@@ -8,7 +8,7 @@ import { useOrderStore } from '@/stores/order.store';
 const accountStore = useAccountStore()
 const orderStore = useOrderStore()

-orderStore.getOrdersOfAccount(accountStore.userAccount)
+orderStore.getOrdersOfAccount(accountStore.userAccount, accountStore.userAccountToken)
 </script>

 <template>
--- a/src/pages/admin/accountsAdminPage/index.vue
+++ b/src/pages/admin/accountsAdminPage/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useAccountStore } from '@/stores/account.store';
-import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import dataLayout from '@/layouts/dataLayout.vue';
 import { useFeedbackStore } from '@/stores/feedback.store';

 const accountStore = useAccountStore()
@@ -19,7 +19,7 @@ accountStore.getAllAccounts()
 </script>

 <template>
-  <admin-data-layout
+  <data-layout
    :add-button-string="$t('account.addNewAccount')"
    :fetch-in-progress="accountStore.fetchInProgress"
  >
@@ -44,5 +44,5 @@ accountStore.getAllAccounts()
        /> -->
      </template>
    </v-data-table>
-  </admin-data-layout>
+  </data-layout>
 </template>
--- a/src/pages/admin/bandsAdminPage/index.vue
+++ b/src/pages/admin/bandsAdminPage/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useBandStore } from '@/stores/band.store';
 import bandEditDialog from './bandEditDialog.vue';
-import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import dataLayout from '@/layouts/dataLayout.vue';
 import { useFeedbackStore } from '@/stores/feedback.store';

 const bandStore = useBandStore()
@@ -22,7 +22,7 @@ bandStore.getBands()
 </script>

 <template>
-  <admin-data-layout
+  <data-layout
    :add-button-string="$t('band.addNewBand')"
    :fetch-in-progress="bandStore.fetchInProgress"
    :on-add-click="() => bandStore.newBand()"
@@ -72,7 +72,7 @@ bandStore.getBands()
        /> -->
      </template>
    </v-data-table>
-  </admin-data-layout>
+  </data-layout>

  <band-edit-dialog />
 </template>
--- a/src/pages/admin/concertsAdminPage/index.vue
+++ b/src/pages/admin/concertsAdminPage/index.vue
@@ -2,7 +2,7 @@
 import { useBandStore } from '@/stores/band.store';
 import { useConcertStore } from '@/stores/concert.store';
 import { useFeedbackStore } from '@/stores/feedback.store';
-import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import dataLayout from '@/layouts/dataLayout.vue';
 import moment from 'moment';

 const concertStore = useConcertStore()
@@ -25,7 +25,7 @@ concertStore.getConcerts()
 </script>

 <template>
-  <admin-data-layout
+  <data-layout
    :add-button-string="$t('concert.addNewConcert')"
    :fetch-in-progress="concertStore.fetchInProgress"
    :on-add-click="() => concertStore.newConcert()"
@@ -40,7 +40,7 @@ concertStore.getConcerts()
      </template>

      <template #item.price="{ item }">
-        {{ item.price.toFixed(2) }} €
+        {{ item.price.toFixed(2) + '€' }}
      </template>

      <template #item.image="{ item }">
@@ -73,5 +73,5 @@ concertStore.getConcerts()
        /> -->
      </template>
    </v-data-table>
-  </admin-data-layout>
+  </data-layout>
 </template>
--- a/src/pages/admin/dashboardPage/index.vue
+++ b/src/pages/admin/dashboardPage/index.vue
@@ -5,7 +5,7 @@ import { useAccountStore } from '@/stores/account.store';
 import { useLocationStore } from '@/stores/location.store';
 import { useGenreStore } from '@/stores/genre.store';
 import { usePreferencesStore } from '@/stores/preferences.store';
-import dashboardCard from './dashboardCard.vue';
+import dashboardCard from '../../../components/pageParts/dashboardCard.vue';
 import { useOrderStore } from '@/stores/order.store';
 import { useFilesStore } from '@/stores/files.store';

--- a/src/pages/admin/filesAdminPage/fileUploadDialog.vue
+++ b/src/pages/admin/filesAdminPage/fileUploadDialog.vue
@@ -46,7 +46,7 @@ const test = ref()
        </v-row>
      </v-container>

-      <v-btn type="submit">Submit</v-btn>
+      <v-btn type="submit">{{ $t('misc.submit') }}</v-btn>
    </v-form>

    <template #actions>
--- a/src/pages/admin/filesAdminPage/index.vue
+++ b/src/pages/admin/filesAdminPage/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import dataLayout from '@/layouts/dataLayout.vue';
 import { ref } from 'vue';
 import FileUploadDialog from './fileUploadDialog.vue';
 import { useFilesStore } from '@/stores/files.store';
@@ -12,7 +12,7 @@ filesStore.getStaticFolders()
 </script>

 <template>
-  <admin-data-layout
+  <data-layout
    :add-button-string="$t('misc.uploadFile')"
    :fetch-in-progress="filesStore.fetchInProgress"
    :on-add-click="() => { filesStore.showFileUploadDialog = true }"
@@ -67,7 +67,7 @@ filesStore.getStaticFolders()
              v-if="filesStore.selectedFile != undefined && filesStore.selectedFile.name.endsWith('js')"
              :model-value="filesStore.selectedFile.content"
              variant="outlined"
-              label="Content"
+              :label="$t('misc.content')"
              height="300"
              rows="30"
            />
@@ -104,7 +104,7 @@ filesStore.getStaticFolders()
                  prepend-icon="mdi-web"
                  v-if="filesStore.selectedFile.copyright.url.length > 0"
                >
-                  <a :href="filesStore.selectedFile.copyright.url" target="_blank" >Quelle</a>
+                  <a :href="filesStore.selectedFile.copyright.url" target="_blank" >{{ $t('misc.source') }}</a>
                </v-list-item>
              </template>
            </v-list>
@@ -112,7 +112,7 @@ filesStore.getStaticFolders()
        </v-row>
      </v-col>
    </v-row>
-  </admin-data-layout>
+  </data-layout>

  <file-preview-dialog
    v-model:show-dialog="showPreviewDialog"
--- a/src/pages/admin/genresAdminPage/index.vue
+++ b/src/pages/admin/genresAdminPage/index.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
-import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import dataLayout from '@/layouts/dataLayout.vue';
 import genreEditDialog from './genreEditDialog.vue';
 import { useGenreStore } from '@/stores/genre.store';
+import { useFeedbackStore } from '@/stores/feedback.store';

 const genreStore = useGenreStore()
+const feedbackStore = useFeedbackStore()

 const headers = [
-  { title: "Name", value: "name" },
-  { title: "Bands", value: "bands" },
+  { title: feedbackStore.i18n.t('band.genre'), value: "name" },
+  { title: feedbackStore.i18n.t('band.name'), value: "bands" },
  { title: "", value: "edit", width: 130 }
 ]

@@ -15,7 +17,7 @@ genreStore.getGenres()
 </script>

 <template>
-  <admin-data-layout
+  <data-layout
    :add-button-string="$t('band.addNewGenre')"
    :fetch-in-progress="genreStore.fetchInProgress"
    :on-add-click="() => { genreStore.newGenre() }"
@@ -48,7 +50,7 @@ genreStore.getGenres()
        /> -->
      </template>
    </v-data-table>
-  </admin-data-layout>
+  </data-layout>

  <genre-edit-dialog />
 </template>
--- a/src/pages/admin/locationsAdminPage/index.vue
+++ b/src/pages/admin/locationsAdminPage/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import dataLayout from '@/layouts/dataLayout.vue';
 import { useFeedbackStore } from '@/stores/feedback.store';
 import { useLocationStore } from '@/stores/location.store';

@@ -22,7 +22,7 @@ locationStore.getLocations()
 </script>

 <template>
-  <admin-data-layout
+  <data-layout
    :fetch-in-progress="locationStore.fetchInProgress"
    :add-button-string="$t('location.addLocation')"
    :on-add-click="() => { locationStore.newLocation() }"
@@ -66,5 +66,5 @@ locationStore.getLocations()
        /> -->
      </template>
    </v-data-table>
-  </admin-data-layout>
+  </data-layout>
 </template>
--- a/src/pages/admin/ordersAdminPage/index.vue
+++ b/src/pages/admin/ordersAdminPage/index.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import adminDataLayout from '@/layouts/adminDataLayout.vue';
+import dataLayout from '@/layouts/dataLayout.vue';
 import { useOrderStore } from '@/stores/order.store';
 import moment from 'moment';
 import OrderDetailDialog from './orderDetailDialog.vue';
+import { useFeedbackStore } from '@/stores/feedback.store';

 const orderStore = useOrderStore()
+const feedbackStore = useFeedbackStore()

 const headers = [
-  { title: "Account", value: "account.username" },
-  { title: "Name", value: "account" },
-  { title: "Bestellt am", value: "orderedAt" },
-  { title: "Adresse", value: "street" },
-  { title: "Stadt", value: "city" },
-  { title: "Versendet", value: "shipped" },
+  { title: feedbackStore.i18n.t('account.userData.username'), value: "account.username" },
+  { title: feedbackStore.i18n.t('account.userData.firstName'), value: "account" },
+  { title: feedbackStore.i18n.t('order.orderedAt'), value: "orderedAt" },
+  { title: feedbackStore.i18n.t('account.userData.address'), value: "street" },
+  { title: feedbackStore.i18n.t('account.userData.placeOfResidence'), value: "city" },
+  { title: feedbackStore.i18n.t('order.orderState'), value: "shipped" },
  { title: "", value: "edit", width: 130 }
 ]

@@ -20,12 +22,14 @@ orderStore.getAllOrders()
 </script>

 <template>
-  <admin-data-layout
+  <data-layout
    :hide-add-button="true"
  >
    <v-data-table
      :headers="headers"
      :items="orderStore.orders"
+      :loading="orderStore.fetchInProgress"
+      :items-per-page="100"
    >
      <template #item.account="{ item }">
        {{ item.account.firstName }} {{ item.account.lastName }}
@@ -46,27 +50,27 @@ orderStore.getAllOrders()
      <template #item.shipped="{ item }">
        <v-icon
          :icon="item.shipped ? 'mdi-check' : 'mdi-close'"
-          :color="item.shipped ? 'green' : 'red'"
+          :color="item.shipped ? 'success' : 'error'"
        />
      </template>

      <template #item.edit="{ item }">
-        <!-- todo <v-btn
+        <v-btn
          icon="mdi-eye"
          variant="plain"
          @click="orderStore.openDetails(item)"
-        /> -->
+        />

-        <!-- todo <v-btn
-          icon="mdi-delete"
+        <v-btn
+          :icon="item.shipped ? 'mdi-close-circle-outline' : 'mdi-check-circle-outline'"
          variant="plain"
-          color="red"
-          @click="orderStore.deleteOrder(item)"
-        /> -->
+          :color="item.shipped ? 'error' : 'success'"
+          @click="orderStore.changeOrderShippedState(item, !item.shipped)"
+        />
      </template>

    </v-data-table>
-  </admin-data-layout>
+  </data-layout>

  <order-detail-dialog />
 </template>
--- a/src/pages/admin/ordersAdminPage/orderDetailDialog.vue
+++ b/src/pages/admin/ordersAdminPage/orderDetailDialog.vue
@@ -12,15 +12,67 @@ const orderStore = useOrderStore()
    v-model="orderStore.showDetailDialog"
    :title="$t('order.order')"
    icon="mdi-basket"
+    max-width="800"
  >
    <v-list>
      <v-list-subheader>
-        {{ $t('ticket.ticket', 2) }}
+        {{ $t('account.account') }}
      </v-list-subheader>

-      <v-list-item v-for="ticket of orderStore.order.tickets">
-        {{ moment(ticket.concert.date).format("DD.MM.YYYY") }} - 
-        {{ ticket.concert.band.name }} - {{ ticket.concert.name }}
+      <v-list-item prepend-icon="mdi-account">
+        {{ orderStore.order.account.username }}
+      </v-list-item>
+
+      <v-list-item prepend-icon="mdi-card-account-details">
+        {{ orderStore.order.account.firstName }} {{ orderStore.order.account.lastName }}
+      </v-list-item>
+
+      <v-list-item prepend-icon="mdi-home">
+        {{ orderStore.order.address.street }} {{ orderStore.order.address.houseNumber }}
+      </v-list-item>
+
+      <v-list-item prepend-icon="mdi-city">
+        {{ orderStore.order.address.postalCode }} {{ orderStore.order.address.city }}
+      </v-list-item>
+
+      <v-list-subheader>
+        {{ $t('order.order') }}
+      </v-list-subheader>
+
+      <v-list-item prepend-icon="mdi-calendar">
+        {{ moment(orderStore.order.orderedAt).format("DD.MM.YYYY, HH:mm:ss") }}
+      </v-list-item>
+
+      <v-list-item prepend-icon="mdi-truck">
+        {{ orderStore.order.shipped ? 'Versendet' : 'Nicht versendet' }}
+      </v-list-item>
+
+      <v-list-item>
+        <v-table>
+          <thead>
+            <tr>
+              <th>{{ $t('concert.date') }}</th>
+              <th>{{ $t('concert.name') }}</th>
+              <th>{{ $t('band.name') }}</th>
+              <th>{{ $t('location.name') }}</th>
+              <th>{{ $t('location.seat.seatGroup') }}</th>
+              <th>{{ $t('location.seat.seatRow') }}</th>
+              <th>{{ $t('location.seat.seat') }}</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr v-for="ticket of orderStore.order.tickets">
+              <td>{{ moment(ticket.concert.date).format("DD.MM.YYYY") }}</td>
+              <td>{{ ticket.concert.name }}</td>
+              <td>{{ ticket.concert.band.name }}</td>
+              <td>{{ ticket.concert.location.name }}</td>
+              <td>{{ ticket.seat.seatRow.seatGroup.name }}</td>
+              <td>{{ ticket.seat.seatRow.row }}</td>
+              <td>{{ ticket.seat.seatNr }}</td>
+            </tr>
+          </tbody>
+        </v-table>
      </v-list-item>
    </v-list>
  </action-dialog>
--- a/src/pages/bands/bandDetailPage/index.vue
+++ b/src/pages/bands/bandDetailPage/index.vue
@@ -7,9 +7,13 @@ import concertSection from './concertSection.vue';
 import heroImage from '@/components/pageParts/heroImage.vue';
 import { useBandStore } from '@/stores/band.store';
 import { onMounted, watch } from 'vue';
+import { useConcertStore } from '@/stores/concert.store';

 const router = useRouter()
 const bandStore = useBandStore()
+const concertStore = useConcertStore()
+
+concertStore.getConcerts()

 onMounted(async () => {
  bandStore.getBand(String(router.currentRoute.value.params.name).replaceAll('-', ' '))
--- a/src/pages/bands/bandsPage/index.vue
+++ b/src/pages/bands/bandsPage/index.vue
@@ -39,8 +39,8 @@ watch(() => router.currentRoute.value.query, () => {
        </v-row>

        <v-row
-          v-else-if="bandStore.bands.length > 0"
-          v-for="band in bandStore.bands"
+          v-else-if="bandStore.filteredBands.length > 0"
+          v-for="band in bandStore.filteredBands"
        >
          <v-col>
            <band-list-item
--- a/src/pages/concerts/concertBookingPage/index.vue
+++ b/src/pages/concerts/concertBookingPage/index.vue
@@ -72,7 +72,7 @@ watch(() => router.currentRoute.value.params.date, () => {
            <circular-progress-indeterminate />

            <div class="pt-5 text-h3">
-              {{ $t('misc.loading') }}...
+              {{ $t('misc.loading') }}
            </div>
          </v-col>

--- a/src/pages/concerts/concertsPage/concertsListSection.vue
+++ b/src/pages/concerts/concertsPage/concertsListSection.vue
@@ -1,17 +1,15 @@
 <script setup lang="ts">
-import { useConcertStore } from '@/stores/concert.store';
-import concertListItem from '@/components/pageParts/concertListItem.vue';
-import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
-import sectionDivider from '@/components/basics/sectionDivider.vue';
-import concertFilterbar from './concertFilterbar.vue';
+import { useConcertStore } from "@/stores/concert.store";
+import concertListItem from "@/components/pageParts/concertListItem.vue";
+import cardViewHorizontal from "@/components/basics/cardViewHorizontal.vue";
+import sectionDivider from "@/components/basics/sectionDivider.vue";
+import concertFilterbar from "./concertFilterbar.vue";

-const concertStore = useConcertStore()
+const concertStore = useConcertStore();
 </script>

 <template>
-  <div
-    v-if="concertStore.fetchInProgress"
-  >
+  <div v-if="concertStore.fetchInProgress">
    <section-divider :loading="true" />
    <v-row v-for="i in 3">
      <v-col>
@@ -25,14 +23,22 @@ const concertStore = useConcertStore()
    v-for="(concert, index) of concertStore.concerts"
  >
    <div v-if="concert.offered">
-      <v-row 
-        v-if="index == 0 || 
-        new Date(concertStore.concerts[index - 1].date).getMonth() != 
-        new Date(concertStore.concerts[index].date).getMonth()"
+      <v-row
+        v-if="
+          index == 0 ||
+          new Date(concertStore.concerts[index - 1].date).getMonth() !=
+            new Date(concertStore.concerts[index].date).getMonth()
+        "
      >
        <v-col>
          <section-divider
-            :title="new Date(concert.date).toLocaleString('default', { month: 'long' }) + ' ' + new Date(concert.date).getFullYear()"
+            :title="
+              new Date(concert.date).toLocaleString('default', {
+                month: 'long',
+              }) +
+              ' ' +
+              new Date(concert.date).getFullYear()
+            "
          />
        </v-col>
      </v-row>
@@ -48,4 +54,4 @@ const concertStore = useConcertStore()
      </v-row>
    </div>
  </div>
-</template>
+</template>
--- a/src/pages/misc/basketPage/index.vue
+++ b/src/pages/misc/basketPage/index.vue
@@ -43,7 +43,7 @@ const showOrderingDialog = ref()
          </template>

          <v-card-text class="text-right text-h5" v-if="basketStore.itemsInBasket.length > 0">
-            {{ $t('misc.totalPrice') }}: {{ (basketStore.getTotalPrice).toFixed(2) }} €
+            {{ $t('misc.totalPrice') }}: {{ (basketStore.getTotalPrice).toFixed(2) + '€' }}
          </v-card-text>
          

--- a/src/pages/misc/basketPage/ticketsTable.vue
+++ b/src/pages/misc/basketPage/ticketsTable.vue
@@ -44,19 +44,19 @@ function removeFromBasket(basketItem: BasketItemModel) {

        <!-- Quantity -->
        <td class="text-center">
-          {{ basketItem.seats.length }}x
+          {{ basketItem.seats.length + 'x' }}
        </td>

        <!-- Price per event -->
        <td class="text-right">
          <div v-if="basketItem.seats">
-            {{ basketItem.price.toFixed(2) }} €
+            {{ basketItem.price.toFixed(2) + '€' }}
          </div>
        </td>

        <!-- Total price -->
        <td class="text-right">
-          {{ (calcPrice(basketItem.concert.price, basketItem.seats.length)).toFixed(2) }} €
+          {{ (calcPrice(basketItem.concert.price, basketItem.seats.length)).toFixed(2) + '€' }}
        </td>

        <td class="text-right">
--- a/src/pages/misc/helpPage/index.vue
+++ b/src/pages/misc/helpPage/index.vue
@@ -1,23 +1,34 @@
 <script setup lang="ts">
-import { useExerciseStore } from '@/stores/exercise.store';
-import outlinedButton from '@/components/basics/outlinedButton.vue';
-import { generateResultsPdf } from '@/scripts/pdfScripts';
-import { usePreferencesStore } from '@/stores/preferences.store';
-import cardView from '@/components/basics/cardView.vue';
-import { LanguageEnum } from '@/data/enums/languageEnum';
+import { useExerciseStore } from "@/stores/exercise.store";
+import outlinedButton from "@/components/basics/outlinedButton.vue";
+import { generateResultsPdf } from "@/scripts/pdfScripts";
+import { usePreferencesStore } from "@/stores/preferences.store";
+import cardView from "@/components/basics/cardView.vue";
+import { LanguageEnum } from "@/data/enums/languageEnum";
+import { ExerciseModel } from "@/data/models/exercises/exerciseModel";
+import { getExerciseDotColor } from "@/scripts/colorScripts";
+import { getExerciseDescriptionLanguage, getExerciseNameLanguage } from "@/scripts/languageScripts";

-const exerciseStore = useExerciseStore()
-const preferencesStore = usePreferencesStore()
+const exerciseStore = useExerciseStore();
+const preferencesStore = usePreferencesStore();

-exerciseStore.solveExercise(1, 1)
+// Mark this exercise as solved if page was opened
+exerciseStore.solveExercise(1, 1);

-function getDotColor(exerciseGroupNr: number) {
-  switch(exerciseGroupNr) {
-    case 0: return "purple"
-    case 1: return "orange"
-    case 2: return "blue"
-    case 3: return "pink"
-  }
+function generateExerciseKey() {
+  try {
+    let code = "";
+
+    for (let i = 0; i < 13; i++) {
+      if (exerciseStore.exercises[i].solved) {
+        code += "3";
+      } else {
+        code += "0";
+      }
+    }
+
+    return (Number(code) + Number(preferencesStore.registrationNumber)) * 237;
+  } catch (e) {}
 }
 </script>

@@ -26,30 +37,31 @@ 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()"
-          :disabled="preferencesStore.studentName.length < 3 || preferencesStore.registrationNumber.length < 7"
+          :disabled="
+            preferencesStore.studentName.length < 3 ||
+            preferencesStore.registrationNumber.length < 7
+          "
        >
-          PDF generieren
+          {{ $t("help.scoreBoard.generatePdf") }}
        </outlined-button>
      </v-col>
    </v-row>

+    <v-row>
+      <v-col class="text-h5 text-center">
+        <div>
+          {{ $t("help.scoreBoard.personalSolutionKey") + ":" }}
+        </div>
+        <div>
+          {{ generateExerciseKey() }}
+        </div>
+      </v-col>
+    </v-row>
+
    <v-row>
      <v-col>
        <card-view
@@ -57,46 +69,55 @@ function getDotColor(exerciseGroupNr: number) {
          icon="mdi-checkbox-marked-circle-auto-outline"
        >
          <template #borderless>
-            <v-timeline
-              side="end"
-              class="px-5"
-              align="start"
-            >
+            <v-timeline side="end" class="px-5" align="start">
              <template v-for="exercise of exerciseStore.exercises">
-                <v-timeline-item v-if="exercise.exerciseNr == 1"
-                  dot-color="grey"
+                <!-- Add exercise group description item -->
+                <v-timeline-item
+                  v-if="exercise.exerciseNr == 1"
+                  :dot-color="
+                    getExerciseDotColor(exercise.exerciseGroup.groupNr)
+                  "
+                  :icon="exercise.exerciseGroup.icon"
                  fill-dot
                >
                  <div
-                    :class="`pt-1 text-h5 font-weight-bold text-${getDotColor(exercise.exerciseGroup.groupNr)}`"
+                    :class="`pt-1 text-h5 font-weight-bold text-${getExerciseDotColor(
+                      exercise.exerciseGroup.groupNr
+                    )}`"
                  >
                    {{
-                      (preferencesStore.language == LanguageEnum.GERMAN 
-                      ? exercise.exerciseGroup.nameDe 
-                      : exercise.exerciseGroup.nameEn) 
+                      preferencesStore.language == LanguageEnum.GERMAN
+                        ? exercise.exerciseGroup.nameDe
+                        : exercise.exerciseGroup.nameEn
                    }}
                  </div>

                  <div>
                    {{
-                      (preferencesStore.language == LanguageEnum.GERMAN 
-                      ? exercise.exerciseGroup.descriptionDe 
-                      : exercise.exerciseGroup.descriptionEn) 
+                      preferencesStore.language == LanguageEnum.GERMAN
+                        ? exercise.exerciseGroup.descriptionDe
+                        : exercise.exerciseGroup.descriptionEn
                    }}
                  </div>
                </v-timeline-item>

+                <!-- Exercise item -->
                <v-timeline-item
-                  :dot-color="getDotColor(exercise.exerciseGroup.groupNr)"
+                  v-if="exercise.available"
+                  :dot-color="exercise.solved ? 'green' : 'primary'"
                  :icon="exercise.solved ? 'mdi-check' : 'mdi-pencil'"
                >
-                   <!-- Right side -->
+                  <!-- Right side -->
                  <card-view
-                    :title="$t('help.scoreBoard.exerciseNr', [exercise.exerciseGroup.groupNr, exercise.exerciseNr]) + 
-                      (preferencesStore.language == LanguageEnum.GERMAN ? exercise.nameDe : exercise.nameEn)"
+                    :title="
+                      $t('help.scoreBoard.exerciseNr', [
+                        exercise.exerciseGroup.groupNr,
+                        exercise.exerciseNr,
+                      ]) + getExerciseNameLanguage(exercise)
+                    "
                    :color="exercise.solved ? 'green' : 'primary'"
                  >
-                    {{ preferencesStore.language == LanguageEnum.GERMAN ? exercise.descriptionDe : exercise.descriptionEn }}
+                    {{ getExerciseDescriptionLanguage(exercise) }}
                  </card-view>
                </v-timeline-item>
              </template>
@@ -106,4 +127,4 @@ function getDotColor(exerciseGroupNr: number) {
      </v-col>
    </v-row>
  </v-container>
-</template>
+</template>
--- a/src/pages/misc/homePage/index.vue
+++ b/src/pages/misc/homePage/index.vue
@@ -1,24 +1,25 @@
 <script setup lang="ts">
-import { useConcertStore } from '@/stores/concert.store';
-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';
+import { useConcertStore } from "@/stores/concert.store";
+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/dialog.vue";
+import { ref } from "vue";
+import genresSection from "./topGenresSection.vue";

-const concertStore = useConcertStore()
-const locationStore = useLocationStore()
-const preferencesStore = usePreferencesStore()
-const showWelcomeDialog = ref(false)
+const concertStore = useConcertStore();
+const locationStore = useLocationStore();
+const preferencesStore = usePreferencesStore();
+const showWelcomeDialog = ref(false);

-concertStore.getUpcomingConcerts()
-locationStore.getTopLocations()
+concertStore.getUpcomingConcerts();
+locationStore.getTopLocations();

 // First startup
 if (preferencesStore.firstStartup) {
-  showWelcomeDialog.value = true
+  showWelcomeDialog.value = true;
 }
 </script>

@@ -33,7 +34,9 @@ if (preferencesStore.firstStartup) {

      <v-col cols="10">
        <upcoming-concerts-section />
-        
+
+        <genres-section />
+
        <top-locations-section />
      </v-col>

@@ -42,4 +45,4 @@ if (preferencesStore.firstStartup) {
  </v-container>

  <welcome-dialog :model-value="showWelcomeDialog" />
-</template>
+</template>
--- a/src/pages/misc/homePage/topGenresSection.vue
+++ b/src/pages/misc/homePage/topGenresSection.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import CardView from "@/components/basics/cardView.vue";
+import CardViewOneLine from "@/components/basics/cardViewOneLine.vue";
+import SectionDivider from "@/components/basics/sectionDivider.vue";
+import { GenreApiModel } from "@/data/models/acts/genreApiModel";
+import { useGenreStore } from "@/stores/genre.store";
+import { ref, watch } from "vue";
+import { useRouter } from "vue-router";
+import outlinedButton from "@/components/basics/outlinedButton.vue";
+
+const genreStore = useGenreStore();
+const genresByNumberOfBands = ref<Array<GenreApiModel>>([]);
+const router = useRouter();
+
+genreStore.getGenres();
+
+watch(
+  () => genreStore.genres,
+  () => {
+    genresByNumberOfBands.value = genreStore.genres;
+
+    genresByNumberOfBands.value.sort((a, b) => {
+      return b.bands.length - a.bands.length;
+    });
+  }
+);
+</script>
+
+<template>
+  <v-row>
+    <v-col>
+      <section-divider :title="$t('genre.popular')" />
+    </v-col>
+  </v-row>
+
+  <v-row>
+    <v-col v-if="genreStore.fetchInProgress" v-for="n in 4" cols="6" md="">
+      <v-skeleton-loader :loading="true" type="card" />
+    </v-col>
+
+    <v-col v-else v-for="genre in genreStore.topGenres" cols="6" md="3">
+      <card-view
+        @click="router.push({ path: '/bands', query: { genreName: genre.name }})"
+        :title="genre.name"
+        :subtitle="genre.bands.length + ' ' + $t('band.band', genre.bands.length)"
+      />
+    </v-col>
+  </v-row>
+
+  <!-- todo?
+  <v-row>
+    <v-col>
+      <outlined-button
+        append-icon="mdi-chevron-right"
+        @click="router.push('/')"
+        block
+      >
+        {{ $t('genre.allGenres') }}
+      </outlined-button>
+    </v-col>
+  </v-row> -->
+</template>
--- a/src/pages/misc/homePage/welcomeDialog.vue
+++ b/src/pages/misc/homePage/welcomeDialog.vue
@@ -1,192 +0,0 @@
-<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
-  >
-    <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="success"
-            />
-
-            <v-divider v-if="n < steps.length - 1" />
-          </template>
-        </v-stepper-header>
-
-
-        <!-- Content -->
-        <v-stepper-window>
-          <!-- Step 1: Check connection to backend server -->
-          <v-stepper-window-item
-            :value="1"
-            class="text-h4 text-center"
-          >
-            <div>
-              {{ $t('preferences.serverState') }}:
-            </div>
-
-            <server-state-text />
-          </v-stepper-window-item>
-
-          <!-- Step 2: Reset the database -->
-          <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>
-
-          <!-- Step 3: Create exercises -->
-          <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>
-
-          <!-- Step 4: Personal data -->
-          <v-stepper-window-item
-            :value="4"
-          >
-            <v-container class="px-0 py-2">
-              <v-row>
-                <v-col>
-                  <v-alert color="warning" icon="mdi-alert">
-                    {{ $t('misc.firstStartup.enterYourPersonalData') }}
-                  </v-alert>
-                </v-col>
-              </v-row>
-              <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="success"
-            >
-              {{ $t('misc.firstStartup.complete') }}
-            </outlined-button>
-          </template>
-        </v-stepper-actions>
-      </template>
-    </v-stepper>
-  </action-dialog>
-</template>
--- a/src/pages/misc/homePage/welcomeDialog/dialog.vue
+++ b/src/pages/misc/homePage/welcomeDialog/dialog.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import actionDialog from '@/components/basics/actionDialog.vue';
+import outlinedButton from '@/components/basics/outlinedButton.vue';
+import { useFeedbackStore } from '@/stores/feedback.store';
+import { usePreferencesStore } from '@/stores/preferences.store';
+import { ref, watch } from 'vue';
+import step1 from './step1.vue';
+import step2 from './step2.vue';
+import step3 from './step3.vue';
+import step4 from './step4.vue';
+
+const preferencesStore = usePreferencesStore()
+const feedbackStore = useFeedbackStore()
+const showDialog = defineModel()
+const currentStep = ref(1)
+const databaseCreated = ref(false)
+
+const steps = [
+  feedbackStore.i18n.t('misc.firstStartup.connectToServer'),
+  feedbackStore.i18n.t('misc.firstStartup.lookAndFeel'),
+  feedbackStore.i18n.t('misc.firstStartup.database'),
+  feedbackStore.i18n.t('misc.firstStartup.userData'),
+]
+
+preferencesStore.getServerState()
+
+
+watch(() => currentStep.value, async () => {
+  if (currentStep.value == 3 && !databaseCreated.value) {
+    await preferencesStore.resetDb();
+    await preferencesStore.resetExerciseProg();
+
+    databaseCreated.value = true;
+  }
+})
+</script>
+
+<template>
+  <action-dialog
+    v-model="showDialog"
+    :title="$t('misc.firstStartup.title')"
+    icon="mdi-human-greeting"
+    max-width="800"
+    persistent
+  >
+    <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="success"
+            />
+
+            <v-divider v-if="n < steps.length - 1" />
+          </template>
+        </v-stepper-header>
+
+
+        <!-- Content -->
+        <v-stepper-window>
+          <!-- Step 1: Check connection to backend server -->
+          <v-stepper-window-item
+            :value="1"
+          >
+            <step1 />
+          </v-stepper-window-item>
+
+
+          <!-- Step 2: Select theme and language -->
+          <v-stepper-window-item
+            :value="2"
+            
+          >
+            <step2 />
+          </v-stepper-window-item>
+
+          <!-- Step 3: Reset the database -->
+          <v-stepper-window-item
+            :value="3"
+          >
+            <step3 />
+          </v-stepper-window-item>
+
+          <!-- Step 4: Personal data -->
+          <v-stepper-window-item
+            :value="4"
+          >
+            <step4 />
+          </v-stepper-window-item>
+        </v-stepper-window>
+
+
+        <!-- Next/Previous buttons -->
+        <v-stepper-actions
+          @click:next="next"
+          @click:prev="prev"
+        >
+          <template #prev="{ props }">
+            <outlined-button
+              @click="props.onClick()"
+              :disabled="currentStep == 1 || preferencesStore.fetchInProgress"
+              color="grey"
+              prepend-icon="mdi-arrow-left"
+            >
+              {{ $t('misc.actions.back') }}
+            </outlined-button>
+          </template>
+
+          <template #next="{ props }">
+            <outlined-button
+              v-if="currentStep < steps.length"
+              @click="props.onClick()"
+              :disabled="preferencesStore.fetchInProgress"
+              append-icon="mdi-arrow-right"
+            >
+              {{ $t('misc.actions.next') }}
+            </outlined-button>
+
+            <outlined-button
+              v-else
+              @click="showDialog = false; preferencesStore.firstStartup = false"
+              :disabled="preferencesStore.studentName.length < 5 || 
+                preferencesStore.registrationNumber.length < 8"
+              append-icon="mdi-check"
+              color="success"
+            >
+              {{ $t('misc.firstStartup.complete') }}
+            </outlined-button>
+          </template>
+        </v-stepper-actions>
+      </template>
+    </v-stepper>
+  </action-dialog>
+</template>
--- a/src/pages/misc/homePage/welcomeDialog/step1.vue
+++ b/src/pages/misc/homePage/welcomeDialog/step1.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import ServerStateText from '@/components/pageParts/serverStateText.vue';
+</script>
+
+<template>
+  <v-container class="text-h4 text-center">
+    <v-row>
+      <v-col>
+        <v-icon icon="mdi-server" />
+      </v-col>
+    </v-row>
+    
+    <v-row>
+      <v-col>
+        <div>
+          {{ $t('preferences.serverState') + ':' }}
+        </div>
+
+        <server-state-text />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
--- a/src/pages/misc/homePage/welcomeDialog/step2.vue
+++ b/src/pages/misc/homePage/welcomeDialog/step2.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ThemeEnum } from '@/data/enums/themeEnums';
+import { usePreferencesStore } from '@/stores/preferences.store';
+
+const preferencesStore = usePreferencesStore()
+
+const themeEnums = Object.values(ThemeEnum)
+</script>
+
+<template>
+  <v-container width="600" class="text-h4 text-center">
+    <v-row>
+      <v-col>
+        <v-icon icon="mdi-palette" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        {{ $t('misc.firstStartup.lookAndFeel') }}
+      </v-col>
+    </v-row>
+
+    <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>
+  </v-container>
+</template>
--- a/src/pages/misc/homePage/welcomeDialog/step3.vue
+++ b/src/pages/misc/homePage/welcomeDialog/step3.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { usePreferencesStore } from '@/stores/preferences.store';
+
+const preferencesStore = usePreferencesStore()
+</script>
+
+<template>
+  <v-container width="600" class="text-h4 text-center">
+    <v-row>
+      <v-col>
+        <v-icon icon="mdi-database" />
+      </v-col>
+    </v-row>
+    
+    <v-row>
+      <v-col>
+        {{ $t('misc.firstStartup.createDatabase') }}
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col v-if="preferencesStore.fetchInProgress">
+        <v-progress-linear indeterminate />
+      </v-col>
+
+      <v-col v-else class="text-green">
+        <v-icon icon="mdi-check" /> {{ $t('misc.firstStartup.finished') }}
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
--- a/src/pages/misc/homePage/welcomeDialog/step4.vue
+++ b/src/pages/misc/homePage/welcomeDialog/step4.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { getRegisterNumberRules, getStringRules } from '@/scripts/validationRules';
+import { usePreferencesStore } from '@/stores/preferences.store';
+
+const preferencesStore = usePreferencesStore()
+</script>
+
+<template>
+  <v-container class="px-0 py-2"  width="600">
+    <v-row>
+      <v-col class="text-h4 text-center">
+        <v-icon icon="mdi-account" />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col class="text-h4 text-center">
+        {{ $t('misc.firstStartup.userData') }}
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-alert color="warning" icon="mdi-alert">
+          {{ $t('misc.firstStartup.enterYourPersonalData') }}
+        </v-alert>
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          variant="outlined"
+          :label="$t('misc.yourFullName')"
+          v-model="preferencesStore.studentName"
+          :rules="getStringRules(4)"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+
+    <v-row>
+      <v-col>
+        <v-text-field
+          variant="outlined"
+          :label="$t('misc.registrationNumber')"
+          v-model="preferencesStore.registrationNumber"
+          :rules="getRegisterNumberRules()"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
--- a/src/pages/misc/preferencesPage/aboutSection.vue
+++ b/src/pages/misc/preferencesPage/aboutSection.vue
@@ -1,42 +1,56 @@
 <script setup lang="ts">
-import cardView from '@/components/basics/cardView.vue';
-import packageJson from './../../../../package.json'
+import cardView from "@/components/basics/cardView.vue";
+import packageJson from "./../../../../package.json";

+function openExternal(url: string) {
+  window.open(url, "_blank");
+}
 </script>

 <template>
-  <card-view
-    :title="$t('preferences.aboutProject')"
-    icon="mdi-information"
-  >
+  <card-view :title="$t('preferences.aboutProject')" icon="mdi-information">
    <template #borderless>
      <v-list>
        <v-list-item
-          title="Software Version"
+          :title="$t('misc.softwareVersion')"
          :subtitle="packageJson.version"
          prepend-icon="mdi-counter"
        />
-        <v-list-item 
-          title="Lizenz"
+        <v-list-item
+          :title="$t('misc.license')"
          subtitle="MIT"
          prepend-icon="mdi-license"
        />
        <v-list-item
-          title="Entwickler"
+          :title="$t('misc.developer')"
          subtitle="Tobias Zoghaib"
          prepend-icon="mdi-account"
        />
-        <v-list-item 
-          title="Entwickelt im Auftrag"
+        <v-list-item
+          :title="$t('misc.developedFor')"
          subtitle="Uni Hannover, Institut für IT-Sicherheit, Fachgebiet Usable Security and Privacy"
          prepend-icon="mdi-school"
        />
-        <v-list-item 
-          title="Copyright"
-          subtitle="2024"
+        <v-list-item
+          :title="$t('misc.copyright')"
+          subtitle="2024-2025"
          prepend-icon="mdi-copyright"
        />
+        <v-list-item
+          :title="$t('misc.githubRepository')"
+          prepend-icon="mdi-web"
+          @click="openExternal('https://github.com/TobiZog/eventmaster')"
+        />
+        <v-list-item
+          :title="$t('misc.projectPage')"
+          prepend-icon="mdi-web"
+          @click="
+            openExternal(
+              'https://www.itsec.uni-hannover.de/de/usec/forschung/eventmaster-learning-web-attacks'
+            )
+          "
+        />
      </v-list>
    </template>
  </card-view>
-</template>
+</template>
--- a/src/pages/misc/preferencesPage/exerciseConfig/exerciseDialog.vue
+++ b/src/pages/misc/preferencesPage/exerciseConfig/exerciseDialog.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import actionDialog from "@/components/basics/actionDialog.vue";
+import OutlinedButton from "@/components/basics/outlinedButton.vue";
+import {
+  getExerciseGroupNameLanguage,
+  getExerciseNameLanguage,
+} from "@/scripts/languageScripts";
+import { useExerciseStore } from "@/stores/exercise.store";
+import { usePreferencesStore } from "@/stores/preferences.store";
+import { ModelRef } from "vue";
+
+const showDialog: ModelRef<boolean> = defineModel();
+const exerciseStore = useExerciseStore();
+const preferencesStore = usePreferencesStore();
+
+function saveConfig() {
+  preferencesStore.notAvailableExercises = []
+
+  for (let exercise of exerciseStore.exercises) {
+    if (!exercise.available) {
+      preferencesStore.notAvailableExercises.push(exercise.uuid)
+    }
+  }
+
+  showDialog.value = false
+}
+</script>
+
+<template>
+  <action-dialog
+    v-model="showDialog"
+    :title="$t('preferences.exercises.edit')"
+    icon="mdi-pencil"
+    width="800"
+    persistent
+  >
+    <v-container>
+      <v-list>
+        <div v-for="exercise in exerciseStore.exercises">
+          <div
+            v-if="exercise.exerciseNr == 1"
+          >
+            <v-divider v-if="exercise.exerciseGroup.groupNr != 0"></v-divider>
+            <v-list-item
+              type="subheader"
+              :title="getExerciseGroupNameLanguage(exercise.exerciseGroup)"
+            />
+          </div>
+
+          <v-list-item>
+            <v-checkbox
+              :label="getExerciseNameLanguage(exercise)"
+              v-model="exercise.available"
+              hide-details
+              density="compact"
+            />
+          </v-list-item>
+        </div>
+      </v-list>
+    </v-container>
+
+    <template #actions>
+      <outlined-button color="warning" prepend-icon="mdi-close" @click="showDialog = false">
+        {{ $t('misc.actions.cancel') }}
+      </outlined-button> 
+      <outlined-button color="success" prepend-icon="mdi-content-save" @click="saveConfig()">
+        {{ $t("misc.actions.save") }}
+      </outlined-button>
+    </template>
+  </action-dialog>
+</template>
--- a/src/pages/misc/preferencesPage/exerciseConfig/exerciseSection.vue
+++ b/src/pages/misc/preferencesPage/exerciseConfig/exerciseSection.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import cardView from "@/components/basics/cardView.vue";
+import OutlinedButton from "@/components/basics/outlinedButton.vue";
+import { ExerciseGroupModel } from "@/data/models/exercises/exerciseGroupModel";
+import { ExerciseModel } from "@/data/models/exercises/exerciseModel";
+import { getExerciseGroupNameLanguage } from "@/scripts/languageScripts";
+import { useExerciseStore } from "@/stores/exercise.store";
+import { ref, watch } from "vue";
+import exerciseDialog from "./exerciseDialog.vue";
+
+const exerciseStore = useExerciseStore();
+const exerciseGroups = ref<Array<ExerciseGroupModel>>([]);
+const showExerciseDialog = ref(false);
+
+exerciseStore.getAllExercises();
+
+/**
+ * Extract exercise groups from all exercises
+ */
+function groupExercises() {
+  exerciseStore.exercises.forEach((exercise) => {
+    if (
+      !exerciseGroups.value.find(
+        (exerciseGroup) => exerciseGroup.id == exercise.exerciseGroup.id
+      )
+    ) {
+      exerciseGroups.value.push(exercise.exerciseGroup);
+    }
+  });
+}
+
+function filterByExerciseGroup(
+  exercises: Array<ExerciseModel>,
+  group: ExerciseGroupModel
+) {
+  return exercises.filter((exercise) => exercise.exerciseGroup.id == group.id);
+}
+
+watch(
+  () => exerciseStore.exercises,
+  () => groupExercises()
+);
+</script>
+
+<template>
+  <card-view
+    :title="$t('preferences.exercises.settings')"
+    icon="mdi-book-open-blank-variant"
+  >
+    <template #borderless>
+      <v-list>
+        <v-list-item
+          v-for="group in exerciseGroups"
+          :title="getExerciseGroupNameLanguage(group)"
+          :subtitle="
+            $t('preferences.exercises.available', [
+              filterByExerciseGroup(exerciseStore.exercises, group).filter((exercise) => exercise.available)
+                .length,
+              filterByExerciseGroup(exerciseStore.exercises, group).length,
+            ])
+          "
+          :prepend-icon="group.icon"
+        />
+      </v-list>
+    </template>
+
+    <template #actions>
+      <outlined-button prepend-icon="mdi-pencil" @click="showExerciseDialog = true">
+        {{ $t("preferences.exercises.edit") }}
+      </outlined-button>
+    </template>
+  </card-view>
+
+  <exercise-dialog v-model="showExerciseDialog" />
+</template>
--- a/src/pages/misc/preferencesPage/importExportSection.vue
+++ b/src/pages/misc/preferencesPage/importExportSection.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import OutlinedButton from "@/components/basics/outlinedButton.vue";
+
+</script>
+
+<template>
+  <card-view
+    :title="$t('preferences.importExport.title')"
+    icon="mdi-swap-horizontal-bold"
+  >
+    <v-row>
+      <v-col>
+        <v-file-input
+          :label="$t('preferences.importExport.selectConfigFile')"
+          variant="outlined"
+          accept=".json"
+          hide-details
+        />
+      </v-col>
+    </v-row>
+
+    <template #actions>
+      <outlined-button prepend-icon="mdi-export">
+        {{ $t("preferences.importExport.download") }}
+      </outlined-button>
+
+      <outlined-button prepend-icon="mdi-upload" color="green">
+        {{ $t("preferences.importExport.upload") }}
+      </outlined-button>
+    </template>
+
+  </card-view>
+</template>
--- a/src/pages/misc/preferencesPage/index.vue
+++ b/src/pages/misc/preferencesPage/index.vue
@@ -2,16 +2,29 @@
 import pageSetup from './pageSetupSection.vue';
 import systemSetup from './systemSetupSection.vue';
 import aboutSection from './aboutSection.vue';
+import exerciseSection from './exerciseConfig/exerciseSection.vue';
+import importExportSection from './importExportSection.vue';
 </script>

 <template>
  <v-container max-width="800">
+    <!-- <v-row>
+      <v-col>
+        <import-export-section />
+      </v-col>
+    </v-row> -->
    <v-row>
      <v-col>
        <page-setup />
      </v-col>
    </v-row>

+    <v-row>
+      <v-col>
+        <exercise-section />
+      </v-col>
+    </v-row>
+
    <v-row>
      <v-col>
        <system-setup />
--- a/src/pages/misc/preferencesPage/systemSetupSection.vue
+++ b/src/pages/misc/preferencesPage/systemSetupSection.vue
@@ -1,27 +1,24 @@
 <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';
+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()
+const preferenceStore = usePreferencesStore();
+const router = useRouter();

-preferenceStore.getServerState()
+preferenceStore.getServerState();
 </script>

 <template>
-  <card-view
-    :title="$t('preferences.systemSetup')"
-    icon="mdi-engine"
-  >
+  <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 />
+          {{ $t("preferences.serverState") + ":" }} <server-state-text />
        </v-list-item>

        <v-list-item class="text-center">
@@ -29,9 +26,12 @@ preferenceStore.getServerState()
            @click="preferenceStore.showDeleteDbDialog = true"
            prepend-icon="mdi-database-refresh"
            color="warning"
-            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+            :disabled="
+              preferenceStore.serverState != ServerStateEnum.ONLINE ||
+              preferenceStore.fetchInProgress
+            "
          >
-            {{ $t('preferences.resetDatabase.resetDatabase') }}
+            {{ $t("preferences.resetDatabase.resetDatabase") }}
          </outlined-button>
        </v-list-item>

@@ -40,9 +40,12 @@ preferenceStore.getServerState()
            @click="preferenceStore.showDeleteExerciseDialog = true"
            prepend-icon="mdi-progress-close"
            color="warning"
-            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+            :disabled="
+              preferenceStore.serverState != ServerStateEnum.ONLINE ||
+              preferenceStore.fetchInProgress
+            "
          >
-            {{ $t('preferences.resetExerciseProgress.resetExerciseProgress') }}
+            {{ $t("preferences.resetExerciseProgress.resetExerciseProgress") }}
          </outlined-button>
        </v-list-item>

@@ -51,9 +54,12 @@ preferenceStore.getServerState()
            @click="preferenceStore.showFactoryResetDialog = true"
            prepend-icon="mdi-factory"
            color="warning"
-            :disabled="preferenceStore.serverState != ServerStateEnum.ONLINE || preferenceStore.fetchInProgress"
+            :disabled="
+              preferenceStore.serverState != ServerStateEnum.ONLINE ||
+              preferenceStore.fetchInProgress
+            "
          >
-            {{ $t('preferences.factoryReset.factoryReset') }}
+            {{ $t("preferences.factoryReset.factoryReset") }}
          </outlined-button>
        </v-list-item>
      </v-list>
@@ -85,10 +91,12 @@ preferenceStore.getServerState()
    :description="$t('preferences.factoryReset.dialog.description')"
    v-model="preferenceStore.showFactoryResetDialog"
    icon="mdi-factory"
-    :onConfirm="() => {
-      preferenceStore.resetToFactorySettings()
-      router.push('/')
-    }"
+    :onConfirm="
+      () => {
+        preferenceStore.resetToFactorySettings();
+        router.push('/');
+      }
+    "
    :loading="preferenceStore.fetchInProgress"
  />
-</template>
+</template>
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -16,6 +16,8 @@ import PreferencesPage from "@/pages/misc/preferencesPage/index.vue";
 import HelpPage from "@/pages/misc/helpPage/index.vue"
 import ErrorPage from "@/pages/misc/errorPage/index.vue"
 import ImageLicensePage from "@/pages/misc/imageLicensePage/index.vue"
+import AccountPaymentsPage from "@/pages/account/accountPaymentsPage/index.vue"
+import AccountAddressesPage from "@/pages/account/accountAddressesPage/index.vue"

 const routes = [
  // Main page
@@ -32,6 +34,8 @@ const routes = [
  { path: '/account/orders', component: OrdersPage },
  { path: '/account/data', component: AccountDataPage },
  { path: '/account/login', component: LoginPage },
+  { path: '/account/payments', component: AccountPaymentsPage },
+  { path: '/account/addresses', component: AccountAddressesPage },

  // Admin
  ...adminRoutes,
--- a/src/scripts/colorScripts.ts
+++ b/src/scripts/colorScripts.ts
@@ -19,4 +19,20 @@ export function getSeatColor(surcharge: number, state: number): string {
    case 1: return "grey"
    case 2: return "orange"
  }
+}
+
+/**
+ * Get color of exercise group
+ * 
+ * @param exerciseGroupNr Number of exercise group
+ * 
+ * @returns Color as string
+ */
+export function getExerciseDotColor(exerciseGroupNr: number) {
+  switch(exerciseGroupNr) {
+    case 0: return "purple"
+    case 1: return "orange"
+    case 2: return "blue"
+    case 3: return "pink"
+  }
 }
--- a/src/scripts/dateTimeScripts.ts
+++ b/src/scripts/dateTimeScripts.ts
@@ -20,4 +20,16 @@ export function dateToHumanReadableString(date: Date) {
 */
 export function dateStringToHumanReadableString(string: string) {
  return dateToHumanReadableString(new Date(string))
+}
+
+/**
+ * Format milliseconds to a readable format
+ * 
+ * @param milliseconds Milliseconds to format
+ * 
+ * @returns h:mm format
+ */
+export function millisecondsToHumanReadableString(milliseconds: number): string {
+  return Math.floor(milliseconds / 1000 / 60 / 60) + ':' + 
+    String(Math.floor(milliseconds / 60000)).padStart(2, "0") + ''
 }
--- a/src/scripts/languageScripts.ts
+++ b/src/scripts/languageScripts.ts
@@ -0,0 +1,37 @@
+import { LanguageEnum } from "@/data/enums/languageEnum";
+import { ExerciseGroupModel } from "@/data/models/exercises/exerciseGroupModel";
+import { ExerciseModel } from "@/data/models/exercises/exerciseModel";
+import { usePreferencesStore } from "@/stores/preferences.store";
+
+export function getExerciseNameLanguage(exercise: ExerciseModel) {
+  let preferencesStore = usePreferencesStore()
+
+  switch (preferencesStore.language) {
+    case LanguageEnum.GERMAN:
+      return exercise.nameDe;
+    case LanguageEnum.ENGLISH:
+      return exercise.nameEn;
+  }
+}
+
+export function getExerciseDescriptionLanguage(exercise: ExerciseModel) {
+  let preferencesStore = usePreferencesStore()
+
+  switch (preferencesStore.language) {
+    case LanguageEnum.GERMAN:
+      return exercise.descriptionDe;
+    case LanguageEnum.ENGLISH:
+      return exercise.descriptionEn;
+  }
+}
+
+export function getExerciseGroupNameLanguage(exerciseGroup: ExerciseGroupModel) {
+  let preferencesStore = usePreferencesStore()
+
+  switch (preferencesStore.language) {
+    case LanguageEnum.GERMAN:
+      return exerciseGroup.nameDe;
+    case LanguageEnum.ENGLISH:
+      return exerciseGroup.nameEn;
+  }
+}
--- a/src/scripts/validationRules.ts
+++ b/src/scripts/validationRules.ts
@@ -168,4 +168,32 @@ export function getIbanRules() {
      }
    }
  ]
+}
+
+export function getRegisterNumberRules() {
+  const feedbackStore = useFeedbackStore()
+
+  return [
+    value => {
+      if (value) {
+        return true
+      } else {
+        return feedbackStore.i18n.t('misc.validation.required')
+      }
+    },
+    value => {
+      if (value?.length >= 8) {
+        return true
+      } else {
+        return feedbackStore.i18n.t('misc.validation.notEnoughChars')
+      }
+    },
+    value => {
+      if(!isNaN(value) && !isNaN(parseFloat(value))) {
+        return true
+      } else {
+        return feedbackStore.i18n.t('misc.validation.onlyDigitsAllowed')
+      }
+    }
+  ]
 }
--- a/src/stores/account.store.ts
+++ b/src/stores/account.store.ts
@@ -10,6 +10,7 @@ import { AccountApiModel } from "../data/models/user/accountApiModel";
 import { ref } from "vue";
 import { defineStore } from "pinia";
 import { useExerciseStore } from "./exercise.store";
+import moment, { Moment } from "moment";

 export const useAccountStore = defineStore("accountStore", {
  state: () => ({
@@ -17,10 +18,10 @@ export const useAccountStore = defineStore("accountStore", {
    accounts: ref<Array<AccountApiModel>>([]),

    /** Server token of currently logged in account */
-    userAccountToken: useLocalStorage("hackmycart/accountStore/userAccountToken", ""),
+    userAccountToken: useLocalStorage("eventMaster/accountStore/userAccountToken", ""),

    /** Useraccount which is currently logged in */
-    userAccount: useLocalStorage("hackmycart/accountStore/userAccount", new AccountApiModel()),
+    userAccount: useLocalStorage("eventMaster/accountStore/userAccount", new AccountApiModel()),

    /** User input on login screen */
    loginData: ref<{ username: String, password: String}>(
@@ -37,7 +38,15 @@ export const useAccountStore = defineStore("accountStore", {
    adminPanelVisible: ref(false),

    /** Flag to activate buy option on basket page */
-    privilegeBuy: ref(false)
+    privilegeBuy: ref(false),
+
+    payment: ref(),
+
+    address: ref(),
+
+    showEditDialog: ref(false),
+
+    loggedInTimeStamp: useLocalStorage<string>("eventMaster/accountStore/loggedInTimeStamp", "")
  }),

  actions: {
@@ -80,6 +89,7 @@ export const useAccountStore = defineStore("accountStore", {
        await getLogin(this.loginData.username, this.loginData.password)
          .then(async result => {
            this.userAccountToken = result.data.token
+            this.loggedInTimeStamp = moment().format("YYYY-MM-DDTHH:mm:ss.SSS")

            getAccount(this.userAccountToken)
              .then(response => {
@@ -91,7 +101,7 @@ export const useAccountStore = defineStore("accountStore", {
                this.privilegeBuy = true
                this.adminPanelVisible = response.data.accountRole.privilegeAdminPanel

-                if (response.data.accountRoleId == 3) {
+                if (response.data.accountRoleId == 2) {
                  exerciseStore.solveExercise(2, 5)
                }
              })
@@ -113,14 +123,16 @@ export const useAccountStore = defineStore("accountStore", {
     * Reload account information about current logged in user
     */
    async refreshAccount() {
+      this.fetchInProgress = true
+
      getAccount(this.userAccountToken)
        .then(response => {
          this.userAccount = response.data

-          this.fetchInProgress = false
-
          this.privilegeBuy = true
          this.adminPanelVisible = response.data.accountRole.privilegeAdminPanel
+
+          this.fetchInProgress = false
        })
    },

@@ -133,6 +145,7 @@ export const useAccountStore = defineStore("accountStore", {
    async registerAccount(): Promise<boolean> {
      const feedbackStore = useFeedbackStore()
      const exerciseStore = useExerciseStore()
+      let success = false
      this.fetchInProgress = true

      if (this.registerData.username == null || this.registerData.username.length < 4) {
@@ -142,7 +155,8 @@ export const useAccountStore = defineStore("accountStore", {
      } else if (!this.registerData.email.match(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) {
        feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTMAILADDRESSUNVALID)
      }
-      else {
+      else
+      {
        await registerAccount(this.registerData)
          .then(async res => {
            if (res.status == 201) {
@@ -156,6 +170,7 @@ export const useAccountStore = defineStore("accountStore", {
            }

            this.fetchInProgress = false
+            success = true
          })
          .catch((error) => {
            if (error.status == 400) {
@@ -165,12 +180,11 @@ export const useAccountStore = defineStore("accountStore", {
            }

            this.fetchInProgress = false
-            return false
          })
      }

      this.fetchInProgress = false
-      return false
+      return success
    },

    /**
@@ -179,6 +193,7 @@ export const useAccountStore = defineStore("accountStore", {
    async updateAccount() {
      const feedbackStore = useFeedbackStore()
      const exerciseStore = useExerciseStore()
+      this.fetchInProgress = true

      // Check for exercise 0.2 completion
      let accountComplete = this.userAccount.firstName != "" && this.userAccount.lastName != "" && 
@@ -196,6 +211,7 @@ export const useAccountStore = defineStore("accountStore", {
            feedbackStore.addSnackbar(BannerStateEnum.ACCOUNTUPDATESUCCESSFUL)

            this.userAccount = res.data
+            this.fetchInProgress = false
          }
        })
    },
@@ -222,13 +238,40 @@ export const useAccountStore = defineStore("accountStore", {
    async refreshOrders() {
      this.fetchInProgress = true

-      await fetchUserOrders(this.userAccount.id)
+      await fetchUserOrders(this.userAccount.id, this.userAccountToken)
        .then(result => {
          this.orders = result.data
          this.fetchInProgress = false
        })
    },

+    newAddress() {
+      this.address = new AddressModel()
+      this.showEditDialog = true
+    },
+
+    editAddress(address: AddressModel) {
+      this.address = address
+      this.showEditDialog = true
+    },
+
+    async saveAddress() {
+      this.fetchInProgress = true
+
+      if (this.address.id == undefined) {
+        this.userAccount.addresses.push(this.address)
+      } else {
+        this.userAccount.addresses = this.userAccount.addresses.filter(address => {
+          return address.id != this.address.id
+        })
+
+        this.userAccount.addresses.push(this.address)
+      }
+
+      await this.updateAccount()
+      this.showEditDialog = false
+    },
+
    /**
     * Remove an address from the user model
     * 
@@ -238,17 +281,59 @@ export const useAccountStore = defineStore("accountStore", {
      this.userAccount.addresses = this.userAccount.addresses.filter((addr: AddressModel) => 
        addr != address
      )
+
+      this.updateAccount()
    },

    /**
-     * Remove an payment from the user model
+     * Add a new payment, opens dialog
+     */
+    newPayment() {
+      this.payment = new PaymentModel()
+      this.showEditDialog = true
+    },
+
+    /**
+     * Edit existing payment, opens dialog
+     * 
+     * @param payment Payment dataset to edit
+     */
+    editPayment(payment: PaymentModel) {
+      this.payment = payment
+      this.showEditDialog = true
+    },
+
+    /**
+     * Save current edited payment
+     */
+    async savePayment() {
+      this.fetchInProgress = true
+
+      if (this.payment.id == undefined) {
+        this.userAccount.payments.push(this.payment)
+      } else {
+        this.userAccount.payments = this.userAccount.payments.filter(payment => {
+          return payment.id != this.payment.id
+        })
+
+        this.userAccount.payments.push(this.payment)
+      }
+
+      await this.updateAccount()
+      this.showEditDialog = false
+    },
+
+    /**
+     * Remove a payment from the user model
     * 
     * @param address Payment dataset to remove
     */
-    removePayment(payment: PaymentModel) {
-      this.userAccount.payments = this.userAccount.payments.filter((paym: PaymentModel) =>
+    async removePayment(payment: PaymentModel) {
+      this.userAccount.payments = await this.userAccount.payments.filter((paym: PaymentModel) =>
        paym != payment
      )
+
+      this.updateAccount()
    },

    /**
@@ -259,7 +344,7 @@ export const useAccountStore = defineStore("accountStore", {
    async deleteAccount(account: AccountModel) {
      this.fetchInProgress = true

-      deleteAccount(account)
+      deleteAccount(account, this.userAccountToken)
        .then(response => {
          this.fetchInProgress = false
        })
--- a/src/stores/band.store.ts
+++ b/src/stores/band.store.ts
@@ -12,6 +12,9 @@ export const useBandStore = defineStore("bandStore", {
    /** All available bands */
    bands: ref<Array<BandApiModel>>([]),

+    /** Available bands filtered by parameters */
+    filteredBands: ref<Array<BandApiModel>>([]),
+
    /** All information about a single band */
    band: ref<BandDetailsApiModel>(new BandDetailsApiModel()),

@@ -32,7 +35,9 @@ export const useBandStore = defineStore("bandStore", {

      await fetchAllBands()
        .then(result => {
-          this.bands = result.data.filter((band: BandApiModel) => {
+          this.bands = result.data
+
+          this.filteredBands = result.data.filter((band: BandApiModel) => {
            if (genreStore.genre == null) {
              return true
            }
--- a/src/stores/basket.store.ts
+++ b/src/stores/basket.store.ts
@@ -16,7 +16,7 @@ import { useExerciseStore } from "./exercise.store";
 export const useBasketStore = defineStore('basketStore', {
  state: () => ({
    /** Items in customers basket */
-    itemsInBasket: useLocalStorage<Array<BasketItemModel>>("hackmycart/basketStore/itemsInBasket", []),
+    itemsInBasket: useLocalStorage<Array<BasketItemModel>>("eventMaster/basketStore/itemsInBasket", []),

    /** Address used in the order dialog */
    usedAddress: ref<AddressModel>(null),
@@ -100,10 +100,10 @@ export const useBasketStore = defineStore('basketStore', {
      const exerciseStore = useExerciseStore()

      await createOrder(
-        accountStore.userAccount.id,
        this.itemsInBasket,
        this.usedPayment.id,
-        this.usedAddress.id
+        this.usedAddress.id,
+        accountStore.userAccountToken
      )
        .then(async result => {
          if (result.status == 201) {
@@ -119,7 +119,6 @@ export const useBasketStore = defineStore('basketStore', {
            for (let item of this.itemsInBasket) {
              if (!item.concert.offered) {
                exerciseStore.solveExercise(1, 2)
-                feedbackStore.addSnackbar(BannerStateEnum.EXERCISESOLVED12)
              }
            }
            
--- a/src/stores/concert.store.ts
+++ b/src/stores/concert.store.ts
@@ -64,6 +64,9 @@ export const useConcertStore = defineStore("concertStore", {
      const feedbackStore = useFeedbackStore()
      this.fetchInProgress = true

+      console.log("LOcation & Date:")
+      console.log(this.concerts)
+
      let id = this.concerts.find((concert: ConcertApiModel) => {
        return (concert.location.urlName == location && concert.date == date)
      }).id
@@ -75,6 +78,7 @@ export const useConcertStore = defineStore("concertStore", {
        })
        .catch(res => {
          feedbackStore.notFound = true
+          this.fetchInProgress = false
        })
    },

@@ -95,13 +99,5 @@ export const useConcertStore = defineStore("concertStore", {
      this.concert = new ConcertDetailsApiModel()
      this.showEditDialog = true
    },
-
-    editConcert(concert: ConcertModel) {
-      // todo
-    },
-
-    async deleteConcert(item: ConcertModel) {
-      // todo
-    }
  }
 })
--- a/src/stores/exercise.store.ts
+++ b/src/stores/exercise.store.ts
@@ -4,6 +4,7 @@ import { ref } from "vue";
 import { useFeedbackStore } from "./feedback.store";
 import { BannerStateEnum } from "@/data/enums/bannerStateEnum";
 import { ExerciseModel } from "@/data/models/exercises/exerciseModel";
+import { usePreferencesStore } from "./preferences.store";

 export const useExerciseStore = defineStore("exerciseStore", {
  state: () => ({
@@ -13,106 +14,155 @@ export const useExerciseStore = defineStore("exerciseStore", {
    /** Request to server sent, waiting for data response */
    fetchInProgress: ref(false),

-    helpPageVisible: ref(false)
+    exercisePageVisible: ref(false),
+
+    /** All available exercise uuids are stored here */
+    exerciseConfig: ref<Array<string>>(),
  }),

  actions: {
    /**
     * Get all exercises and exercise groups from server
+     *
+     * @param firstLoad True sets all exercises as available, for first load after database was initialised
     */
-    async getAllExercises() {
-      this.fetchInProgress = true
+    async getAllExercises(firstLoad: boolean = false) {
+      const preferencesStore = usePreferencesStore();
+      this.fetchInProgress = true;

-      await fetchAllExerciseGroups()
-        .then(result => {
-          this.exercises = result.data
+      await fetchAllExerciseGroups().then((result) => {
+        this.exercises = result.data;

-          this.helpPageVisible = this.getExercise(1, 1).solved
-          this.fetchInProgress = false
-        })
+        if (firstLoad) {
+          preferencesStore.notAvailableExercises = []
+        }
+
+        result.data.forEach((exercise) => {
+          if (firstLoad) {
+            exercise.available = true
+          } else {
+            exercise.available =
+              preferencesStore.notAvailableExercises.find(
+                (availableExercise: string) => {
+                  return availableExercise == exercise.uuid;
+                }
+              ) == undefined;
+          }
+        });
+
+        this.exercisePageVisible = this.getExercise(1, 1).solved;
+        this.fetchInProgress = false;
+      });
    },

    /**
     * Get a exercise by group and exercise number
-     * 
+     *
     * @param exerciseGroupNr Number of group of exercise
     * @param exerciseNr Number of exercise in group
-     * 
+     *
     * @returns ExerciseModel
     */
    getExercise(exerciseGroupNr: number, exerciseNr: number): ExerciseModel {
      return this.exercises.find((exercise: ExerciseModel) => {
-        return exercise.exerciseNr == exerciseNr && exercise.exerciseGroup.groupNr == exerciseGroupNr
-      })
+        return (
+          exercise.exerciseNr == exerciseNr &&
+          exercise.exerciseGroup.groupNr == exerciseGroupNr
+        );
+      });
    },

    /**
     * Mark an exercise as solved
-     * 
+     *
     * @param exerciseGroupNr Exercise group number (0-3)
     * @param exerciseNr Exercise number (1-3)
     */
    async solveExercise(exerciseGroupNr: number, exerciseNr: number) {
      // Request all exercises from server
-      await this.getAllExercises()
+      await this.getAllExercises();

-      const feedbackStore = useFeedbackStore()
-      this.fetchInProgress = true
+      const feedbackStore = useFeedbackStore();
+      this.fetchInProgress = true;

      // Change only if the exercise is not solved
-      updateExercise(exerciseGroupNr, exerciseNr, true)
-        .then(result => {
-          if (result.data.changed) {
+      updateExercise(exerciseGroupNr, exerciseNr, true).then((result) => {
+        if (result.data.changed) {
+          let bannerState = BannerStateEnum.ERROR;

-            let bannerState = BannerStateEnum.ERROR
-
-            switch(exerciseGroupNr) {
-              case 0: {
-                switch(exerciseNr) {
-                  case 1: bannerState = BannerStateEnum.EXERCISESOLVED01; break;
-                  case 2: bannerState = BannerStateEnum.EXERCISESOLVED02; break;
-                  case 3: bannerState = BannerStateEnum.EXERCISESOLVED03; break;
-                }
-
-                break;
+          switch (exerciseGroupNr) {
+            case 0: {
+              switch (exerciseNr) {
+                case 1:
+                  bannerState = BannerStateEnum.EXERCISESOLVED01;
+                  break;
+                case 2:
+                  bannerState = BannerStateEnum.EXERCISESOLVED02;
+                  break;
+                case 3:
+                  bannerState = BannerStateEnum.EXERCISESOLVED03;
+                  break;
              }

-              case 1: {
-                switch(exerciseNr) {
-                  case 1: bannerState = BannerStateEnum.EXERCISESOLVED11; break;
-                  case 2: bannerState = BannerStateEnum.EXERCISESOLVED12; break;
-                }
-
-                break;
-              }
-
-              case 2: {
-                switch(exerciseNr) {
-                  case 1: bannerState = BannerStateEnum.EXERCISESOLVED21; break;
-                  case 2: bannerState = BannerStateEnum.EXERCISESOLVED22; break;
-                  case 3: bannerState = BannerStateEnum.EXERCISESOLVED23; break;
-                  case 4: bannerState = BannerStateEnum.EXERCISESOLVED24; break;
-                  case 5: bannerState = BannerStateEnum.EXERCISESOLVED25; break;
-                  case 6: bannerState = BannerStateEnum.EXERCISESOLVED26; break;
-                }
-
-                break;
-              }
-
-              case 3: {
-                switch(exerciseNr) {
-                  case 1: bannerState = BannerStateEnum.EXERCISESOLVED31; break;
-                  case 2: bannerState = BannerStateEnum.EXERCISESOLVED32; break;
-                }
-
-                break;
-              }
+              break;
            }

-            feedbackStore.addSnackbar(bannerState)
-            this.getAllExercises()
+            case 1: {
+              switch (exerciseNr) {
+                case 1:
+                  bannerState = BannerStateEnum.EXERCISESOLVED11;
+                  break;
+                case 2:
+                  bannerState = BannerStateEnum.EXERCISESOLVED12;
+                  break;
+              }
+
+              break;
+            }
+
+            case 2: {
+              switch (exerciseNr) {
+                case 1:
+                  bannerState = BannerStateEnum.EXERCISESOLVED21;
+                  break;
+                case 2:
+                  bannerState = BannerStateEnum.EXERCISESOLVED22;
+                  break;
+                case 3:
+                  bannerState = BannerStateEnum.EXERCISESOLVED23;
+                  break;
+                case 4:
+                  bannerState = BannerStateEnum.EXERCISESOLVED24;
+                  break;
+                case 5:
+                  bannerState = BannerStateEnum.EXERCISESOLVED25;
+                  break;
+                case 6:
+                  bannerState = BannerStateEnum.EXERCISESOLVED26;
+                  break;
+              }
+
+              break;
+            }
+
+            case 3: {
+              switch (exerciseNr) {
+                case 1:
+                  bannerState = BannerStateEnum.EXERCISESOLVED31;
+                  break;
+                case 2:
+                  bannerState = BannerStateEnum.EXERCISESOLVED32;
+                  break;
+              }
+
+              break;
+            }
          }
-        })
-    }
-  }
-})
+
+          feedbackStore.addSnackbar(bannerState);
+          this.getAllExercises();
+        }
+      });
+    },
+  },
+});
--- a/src/stores/genre.store.ts
+++ b/src/stores/genre.store.ts
@@ -1,4 +1,9 @@
-import { deleteGenre, fetchAllGenres, patchGenre, postGenre } from "@/data/api/genreApi";
+import {
+  deleteGenre,
+  fetchAllGenres,
+  patchGenre,
+  postGenre,
+} from "@/data/api/genreApi";
 import { GenreApiModel } from "@/data/models/acts/genreApiModel";
 import { defineStore } from "pinia";
 import { ref } from "vue";
@@ -10,6 +15,8 @@ export const useGenreStore = defineStore("genreStore", {
    /** All available genres from server */
    genres: ref<Array<GenreApiModel>>([]),

+    topGenres: ref<Array<GenreApiModel>>([]),
+
    /** Currently selected genre */
    genre: ref<GenreApiModel>(null),

@@ -17,7 +24,7 @@ export const useGenreStore = defineStore("genreStore", {
    showEditDialog: ref(false),

    /** Request to server sent, waiting for data response */
-    fetchInProgress: ref(false)
+    fetchInProgress: ref(false),
  }),

  actions: {
@@ -25,98 +32,103 @@ export const useGenreStore = defineStore("genreStore", {
     * Get all genres from the database
     */
    getGenres() {
-      this.fetchInProgress = true
+      this.fetchInProgress = true;

-      fetchAllGenres()
-        .then(response => {
-          this.genres = response.data
-          this.fetchInProgress = false
-        })
+      fetchAllGenres().then((response) => {
+        this.genres = response.data;
+
+        let genresByNumberOfBands = this.genres.slice();
+
+        genresByNumberOfBands.sort((a, b) => {
+          return b.bands.length - a.bands.length;
+        });
+
+        this.topGenres = genresByNumberOfBands.splice(0, 8)
+
+        this.fetchInProgress = false;
+      });
    },

    /**
     * Prepare edit dialog for new genre, opens it
     */
    newGenre() {
-      this.genre = new GenreApiModel()
-      this.showEditDialog = true
+      this.genre = new GenreApiModel();
+      this.showEditDialog = true;
    },

    /**
     * Edit a Genre object, move parameter to this.genre, opens dialog
-     * 
+     *
     * @param genre Selected Genre object
     */
    editGenre(genre: GenreApiModel) {
-      this.genre = genre
-      this.showEditDialog = true
+      this.genre = genre;
+      this.showEditDialog = true;
    },

    /**
     * Save edited genre to the backend server
     */
    saveGenre() {
-      const feedbackStore = useFeedbackStore()
-      this.fetchInProgress = true
+      const feedbackStore = useFeedbackStore();
+      this.fetchInProgress = true;

      if (this.genre.id == undefined) {
        // Creating new Genre
-        postGenre(this.genre)
-          .then(response => {
-            if (response.status == 200) {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL)
-              this.getGenres()
-              this.showEditDialog = false
-            } else {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR)
-            }
-          })
+        postGenre(this.genre).then((response) => {
+          if (response.status == 200) {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL);
+            this.getGenres();
+            this.showEditDialog = false;
+          } else {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR);
+          }
+        });
      } else {
        // Update existing Genre
-        patchGenre(this.genre)
-          .then(response => {
-            if (response.status == 200) {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL)
-              this.getGenres()
-              this.showEditDialog = false
-            } else {
-              feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR)
-            }
-          })
+        patchGenre(this.genre).then((response) => {
+          if (response.status == 200) {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDSUCCESSFUL);
+            this.getGenres();
+            this.showEditDialog = false;
+          } else {
+            feedbackStore.addSnackbar(BannerStateEnum.GENRESAVEDERROR);
+          }
+        });
      }
    },

    /**
     * Delete a Genre object
-     * 
+     *
     * @param genre Genre to delete
     */
    deleteGenre(genre: GenreApiModel) {
-      const feedbackStore = useFeedbackStore()
-      this.fetchInProgress = true
+      const feedbackStore = useFeedbackStore();
+      this.fetchInProgress = true;

-      deleteGenre(genre)
-        .then(response => {
-          if (response.status == 200) {
-            feedbackStore.addSnackbar(BannerStateEnum.GENREDELETESUCCESSFUL)
-            this.getGenres()
-          } else {
-            feedbackStore.addSnackbar(BannerStateEnum.GENREDELETEERROR)
-          }
-        })
+      deleteGenre(genre).then((response) => {
+        if (response.status == 200) {
+          feedbackStore.addSnackbar(BannerStateEnum.GENREDELETESUCCESSFUL);
+          this.getGenres();
+        } else {
+          feedbackStore.addSnackbar(BannerStateEnum.GENREDELETEERROR);
+        }
+      });
    },

    setGenreByName(name: string) {
-      this.genre = null
-      name = name.replace("+", " ")
+      this.genre = null;
+      name = name.replace("+", " ");

-      let newGenre = this.genres.find(genre => {
-        return genre.name == name
-      })
+      let newGenre = this.genres.find((genre) => {
+        return genre.name == name;
+      });

      if (newGenre != undefined) {
-        this.genre = newGenre
+        this.genre = newGenre;
      }
-    }
-  }
-})
+    },
+  },
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
TobiZog	409fa835a3	Bugfix genre store	2025-09-01 15:08:13 +02:00
TobiZog	9506156070	Limit nr of top genres on homepage	2025-09-01 14:49:02 +02:00
TobiZog	f98eb098f5	Bugfixes: No startup after packaging, infinity loading on concert booking page if user comes from band page	2025-09-01 14:22:53 +02:00
TobiZog	d730280876	Bugfix: Filter on band page changes visible bands on home page	2025-08-31 11:47:56 +02:00
TobiZog	2fd045c590	New section on homepage: popular genres	2025-08-31 11:33:25 +02:00
TobiZog	57a036bea2	Disable import section on preference page, upgrade version number	2025-08-30 14:11:18 +02:00
TobiZog	cde3c84bc7	Append icons in toolbar shows tooltips, exercise page icon adds open exercises badge	2025-08-30 13:39:16 +02:00
TobiZog	052bb7694a	Add links to project and GitHub page	2025-08-30 13:11:39 +02:00
TobiZog	3c13bb88e1	Exercises selection system	2025-08-30 12:54:29 +02:00
TobiZog	b69c63ea53	Welcome dialog: New page for look and feel, redesign pages, merge database and exercise creating in one step	2025-07-05 14:35:48 +02:00
TobiZog	48c59936ec	Finish english translation, add icons to exercise groups on help page	2025-07-05 13:39:01 +02:00
TobiZog	d75e91481f	RPM, Changelog	2025-02-28 17:39:04 +01:00
TobiZog	a4780d2545	Readme	2025-02-28 17:03:00 +01:00
TobiZog	0023313266	Readme	2025-01-16 10:29:04 +01:00
TobiZog	e68d49abd5	Documentation, upgrade version	2025-01-16 10:23:17 +01:00
TobiZog	0fdac7b2cf	Backend documentation	2024-12-30 23:13:41 +01:00
TobiZog	ade0f8cd88	Bugfix search page (Band)	2024-12-21 21:05:06 +01:00
TobiZog	7884f5c57a	More swagger documentation	2024-12-13 16:24:19 +01:00
TobiZog	4215bbf9c2	Swagger API documentation	2024-12-09 19:06:50 +01:00
TobiZog	9df62d037d	Bugfix file manager	2024-12-05 12:29:05 +01:00
TobiZog	c08645a294	Redesign account pages, split payments and addresses to single pages, new dashboard	2024-11-29 13:38:20 +01:00
TobiZog	1d49f210c5	Add hint for inputs in Welcome Dialog	2024-11-29 11:34:35 +01:00
TobiZog	878c21be4f	Remove test script	2024-11-28 19:48:05 +01:00
TobiZog	fb9e85552a	Rewrite solution code generation	2024-11-28 19:46:02 +01:00
TobiZog	ea2fc7f6f4	Finish order admin page with detail dialog and actions	2024-11-28 13:10:54 +01:00
TobiZog	feca0934a3	More server stability	2024-11-28 12:29:36 +01:00
TobiZog	fd2a2dd345	Remove Super-Admin role, bugfix if user enters buggy SQL injection on search field	2024-11-27 19:29:03 +01:00
TobiZog	ba700eb050	Implement solution codes for exercises	2024-11-27 18:32:10 +01:00
TobiZog	7baa8e2b25	Adding new SQL-Injection exercise	2024-11-27 14:21:14 +01:00
TobiZog	1f6ebf5b2e	Light mode improvements, empty state on search page	2024-11-26 20:58:10 +01:00
TobiZog	1a4b438191	Global color schema, remove name and register number access in preferences, add alert in first startup wizard	2024-11-26 20:13:54 +01:00
TobiZog	51a2599545	More feedback on account creation, bugfix on account creation	2024-11-26 19:39:40 +01:00
TobiZog	fe6f2840e9	Add more license information of images	2024-11-26 12:51:23 +01:00
TobiZog	17907a51be	Improve exercise solution of 2.1, 2.2, 2.3 and 2.5	2024-11-26 12:40:01 +01:00
TobiZog	bfc4b6681b	Adding "Test Environment" banner in the bottom right corner	2024-11-26 11:59:37 +01:00
TobiZog	85f34dd087	License system implemented	2024-11-25 18:55:28 +01:00
TobiZog	f7cdaacceb	First steps of license store system	2024-11-23 17:45:14 +01:00
TobiZog	628c1f97c0	Changelog	2024-11-21 09:42:53 +01:00
TobiZog	836c5c5d1c	Minor bugfixes, new logo	2024-11-20 19:20:22 +01:00
TobiZog	4b4517cc4b	Implementing exercise 3.2	2024-11-20 14:07:41 +01:00
TobiZog	5eab947b8c	Exercise 3.1 fully implemented	2024-11-20 12:27:41 +01:00
TobiZog	cfc466b92e	Exercise 2.5 added	2024-11-20 11:34:44 +01:00
TobiZog	9b04e0ce69	Password encryption	2024-11-20 10:43:48 +01:00
TobiZog	f923b34b77	Developer window in Electron app, remove edit/delete options in Admin panel (currently not completed)	2024-11-19 18:41:26 +01:00
TobiZog	b347df7c6e	Move software files one directory up, Readme	2024-11-19 16:51:28 +01:00
TobiZog	9fa2b753ec	Rewrite SQL Injection exercises, change code for search field, exercises 0.1 - 3.1 implemented	2024-11-19 12:25:30 +01:00
TobiZog	22684fea44	Implement exercise 2.1	2024-11-18 16:12:58 +01:00
TobiZog	24561fba23	Add exercise group descriptions to help page, restructure timeline	2024-11-18 16:07:51 +01:00
TobiZog	e2c45c6be0	Exercisegroup 0 and 1 complete implemented	2024-11-18 15:41:33 +01:00
TobiZog	9fbd9a1375	Working on exercise 1.2	2024-11-16 16:56:20 +01:00
TobiZog	d92533ab6a	Bugfix order process/account update	2024-11-15 11:36:17 +01:00
TobiZog	c61a628ed4	Authentification Token	2024-11-14 15:32:28 +01:00
TobiZog	f4d5f54846	Improve Snackbar	2024-11-14 09:33:45 +01:00
TobiZog	c2fe6ee3d2	Implement exercise 1.1 (open help page)	2024-11-14 08:09:06 +01:00
TobiZog	20b9a59257	Improve UI for smaller screens	2024-11-14 07:25:06 +01:00
TobiZog	cb86720b13	Rewrite database access for exercises	2024-11-13 13:56:44 +01:00
TobiZog	5124ec4e6d	Redesign file browser, file upload (server)	2024-11-12 23:50:21 +01:00
TobiZog	860432ead3	Bugfix database creation	2024-11-12 05:09:54 +01:00
TobiZog	af26e64ad8	OrderDetailDialog	2024-11-11 08:44:17 +01:00
TobiZog	b7291577b7	Documentation	2024-11-11 08:15:21 +01:00
TobiZog	9875b99631	Admin Order Page, refresh ERM diagram of database	2024-11-09 15:19:08 +01:00
TobiZog	47992b92c9	PDF Generator for Exercise progress	2024-11-08 20:02:37 +01:00
TobiZog	c5d18218c0	First startup dialog, factory reset	2024-11-08 13:45:09 +01:00
TobiZog	18235c4e4c	Reduce DB creation time to 5,0 seconds	2024-11-07 19:29:59 +01:00
TobiZog	d762a9d8ab	Massive improvement of database creation time (63s -> 7s)	2024-11-07 19:18:50 +01:00
TobiZog	2c9b2cc509	OrderStore	2024-11-07 17:18:49 +01:00
TobiZog	fbae1b9f3a	Docstrings, AdminDashboard button loading, new BannerStateEnums	2024-11-06 18:22:03 +01:00
TobiZog	c2a337e051	Finish GenresAdminPanel	2024-11-06 17:55:18 +01:00
TobiZog	33880069a0	Startup dialog on first run	2024-11-06 16:45:36 +01:00
TobiZog	b892d93379	File browser on admin page	2024-11-05 19:54:14 +01:00
TobiZog	b06b81f140	Error page	2024-11-05 18:43:47 +01:00
TobiZog	1088060580	Account itself deletable	2024-11-04 19:05:14 +01:00
TobiZog	07c4b7ba80	LocationDetailPage: Seat not selectable, loading animation during fetching	2024-11-04 18:15:49 +01:00
TobiZog	7e649240ca	Small improvements on account pages, added payment info card	2024-11-04 12:04:15 +01:00
TobiZog	a776431738	Split concertsPage	2024-11-03 17:38:14 +01:00
TobiZog	0844b3d5b5	Split home page in sections	2024-11-03 17:30:07 +01:00
TobiZog	aeb28fe5a7	Electron & Electron Builder	2024-11-02 18:09:44 +01:00
TobiZog	201714403c	Redesign Band highlight section on HomePage, fix Footer spacing bug	2024-11-01 12:52:17 +01:00
TobiZog	1f9987ba22	Brand logo	2024-11-01 11:06:10 +01:00
TobiZog	159b4434df	New "about" section on PreferencesPage, add new exercise descriptions/steps	2024-11-01 03:56:38 +01:00
TobiZog	98e2a3c3db	Bugfix Carousel on HomePage	2024-11-01 03:08:52 +01:00
TobiZog	370278fddc	License	2024-10-31 22:10:31 +01:00
TobiZog	0c70e43c7d	AccountsAdminPage, ConcertsAdminPage	2024-10-30 05:58:53 +01:00
TobiZog	e464b52394	Account Dashboard Card	2024-10-27 00:12:27 +02:00
TobiZog	f8e1a191b3	LocationsAdminPage data table	2024-10-26 23:52:38 +02:00
TobiZog	57819f5a2f	Genre Admin page, new Genre store	2024-10-26 16:23:00 +02:00
TobiZog	76a98b8a16	Creating Band edit page	2024-10-26 14:35:33 +02:00
TobiZog	db72a94468	Restructure translation files	2024-10-25 13:05:51 +02:00
TobiZog	37f9f50da3	Reactivate Admin Panel, implement exercise 2.1, add feedback if exercise solved	2024-10-24 20:23:28 +02:00
TobiZog	c5c5a2da8b	Exercise store, mark exercise 0.2 as solved on ticket buy	2024-10-23 13:57:37 +02:00
TobiZog	093eba9af6	Display free tickets in standing areas	2024-10-23 13:36:21 +02:00
TobiZog	376a4ec385	Reimplement Carousel on homepage	2024-10-22 21:06:00 +02:00
TobiZog	d0d4c469fb	Filterbar on Concert page	2024-10-22 20:26:35 +02:00
TobiZog	048a8c30ff	Band filter by genre	2024-10-22 20:11:09 +02:00
TobiZog	cf9a888a97	Enhance search for band names of concerts	2024-10-22 19:16:30 +02:00
TobiZog	4b43757dd4	Slight changes on TicketListItem append section	2024-10-22 19:08:52 +02:00
TobiZog	9140765772	Streamlined stores	2024-10-22 18:47:27 +02:00
TobiZog	780ab85a9e	Slight changes seat rows on locations	2024-10-22 12:19:15 +02:00
TobiZog	b1b731f3d3	Fix order process	2024-10-21 14:57:03 +02:00
TobiZog	18a7814747	Fixed Account pages	2024-10-21 14:02:51 +02:00
TobiZog	ff36345382	Add addressbar	2024-10-17 19:10:21 +02:00
TobiZog	7fc1f45574	Update configuration	2024-10-17 18:42:35 +02:00
TobiZog	b490d058e4	Remove EventModel in frontend	2024-10-12 21:00:42 +02:00
TobiZog	60a9cea147	New page for all concerts	2024-10-12 19:40:12 +02:00
TobiZog	3204e4a658	Simplified json import	2024-10-12 16:22:14 +02:00
TobiZog	60e217db03	Remove EventTable in database, redesign frontend URL paths	2024-10-12 15:54:03 +02:00
TobiZog	7b991d2ff8	Finish search page	2024-10-11 18:59:19 +02:00
TobiZog	8f0de99634	Atomize model classes	2024-10-11 17:42:21 +02:00
TobiZog	8e7c9a949d	Implement global search	2024-10-11 12:59:21 +02:00
TobiZog	461bc753e6	UI Bugfixes	2024-10-10 19:23:13 +02:00
TobiZog	ba752fa906	Improve UI of concertListItem and eventListItem	2024-10-10 18:43:38 +02:00
TobiZog	5f8adbaf10	Bugfixes, reset exercise progress from frontend	2024-10-10 14:29:45 +02:00
TobiZog	8d78a9eeb7	Redesign seat map layout	2024-10-10 14:11:09 +02:00
TobiZog	23b9fa3dd2	Add more locations, add all location images, adjust seatGroups in locations	2024-10-08 20:04:56 +02:00
TobiZog	48bfcc9c75	Implement URL XSS attack	2024-10-08 14:30:39 +02:00
TobiZog	f81e9be320	Implementing Exercise system in database with API and frontend visualization	2024-10-07 13:15:16 +02:00
TobiZog	4a62c7a96b	Ticket Component	2024-10-06 19:30:12 +02:00
TobiZog	c050560fba	Redesign and reimplementing account page	2024-10-05 21:00:39 +02:00
TobiZog	c54e6f3743	Tickets moveable to basket, Basket shows tickets, removable	2024-10-05 20:23:13 +02:00
TobiZog	a676ce3d86	SeatSelection page	2024-10-04 20:15:16 +02:00
TobiZog	519fa210e9	More skeleton loader, repair bandDetailPage	2024-10-04 18:01:37 +02:00
TobiZog	e0a8748184	More skelton loader, add optional parameters to /locations and /events	2024-10-04 15:20:40 +02:00
TobiZog	0cf0c6be76	Skeleton loader	2024-10-04 13:16:05 +02:00
TobiZog	ed4fa90f75	Loading feedback with indeterminate circle	2024-10-03 20:19:03 +02:00
TobiZog	c611cc04fc	Improve filterBar on eventsPage, improve API access from frontend	2024-10-03 19:56:44 +02:00
TobiZog	2b7e87a68d	Start moving data server handling from pinia store to server	2024-10-03 19:03:36 +02:00
TobiZog	2cbee721c7	Add more artist images	2024-10-03 16:51:30 +02:00
TobiZog	6c8d8dadaf	Adding Seat plan component and database tables	2024-10-01 15:37:08 +02:00
TobiZog	142d574f78	New locationDetailPage displays concert in a location, new datasets, images, URL path changed	2024-09-29 21:42:20 +02:00
TobiZog	04678f9913	Split band detail page in section files	2024-09-29 18:43:37 +02:00
TobiZog	f898c0c5b9	Creating whole Band details page	2024-09-29 16:56:43 +02:00
TobiZog	422a5e1722	Filterable tours	2024-09-29 14:28:29 +02:00
TobiZog	4bcc2b86d5	Display concerts with card views on "All concerts" page, adding image property for tours	2024-09-28 21:18:25 +02:00
TobiZog	9b325c849e	Display all bands grouped by genre, create m:n association between Band and Genre in database	2024-09-27 23:25:24 +02:00
TobiZog	848e7abf92	Location page displays city groups with all available concert locations	2024-09-27 20:40:59 +02:00
TobiZog	2977c73a10	Redesign home page	2024-09-27 15:52:22 +02:00
TobiZog	e3863058a0	Move Navigation from NavDrawer to AppBar, redesign page structure and routes	2024-09-27 13:08:43 +02:00
TobiZog	941fd711d5	Refactor frontend, display tours with cards on ToursPage	2024-09-26 16:06:20 +02:00
TobiZog	f5204578e4	Add ToursTable, update API documentation	2024-09-26 14:40:41 +02:00
TobiZog	787c5a61e5	Rewriting database and API to transform to a ticket shop	2024-09-26 11:04:27 +02:00
TobiZog	080610cd7e	Data tables for brand and category added to admin pages	2024-09-25 15:54:45 +02:00
TobiZog	f41cf1ba90	Creating admin pages, new brand API endpoint	2024-09-25 15:42:05 +02:00
TobiZog	cbd01f6d59	Connect Orders database table with Payments and Addresses, visualize it in the frontend	2024-09-24 23:41:35 +02:00
TobiZog	e00107ab6a	Better validation on text fields, change AlertBanner to Snackbar	2024-09-24 22:18:27 +02:00
TobiZog	14da64ecbe	Payments and Addresses add- and removeable	2024-09-24 20:53:46 +02:00
TobiZog	76c5e953a1	Add more user feedback (loading buttons, empty states)	2024-09-24 16:36:30 +02:00
TobiZog	03ff8b402f	Implement ordering process	2024-09-24 15:40:16 +02:00
TobiZog	22d3e8d177	Multiple addresses & payments of an account configurable in frontend	2024-09-24 13:55:48 +02:00
TobiZog	0b34174ce9	Matching UI with improved API	2024-09-24 13:12:44 +02:00
TobiZog	8395b4427d	Readme	2024-09-23 21:27:39 +02:00
TobiZog	87f3516b54	Extend database with more tables, rewrite API doc, improve API endpoints	2024-09-23 21:22:45 +02:00
TobiZog	6aae064902	Add Score board page to visualize progress of exercises	2024-09-22 21:29:23 +02:00
TobiZog	a55248ecef	Confirm dialog, fix language change bug, add bank accout information to users	2024-09-22 20:57:28 +02:00
TobiZog	98cc551f76	New cardView component, add database reset confirm dialog	2024-09-22 15:46:33 +02:00
TobiZog	eb84351231	ProductCard redesigned, add property for number of items in stock for product	2024-09-22 15:06:10 +02:00
TobiZog	1f48ec6ae1	New products, productDetail dialog offers a specs category	2024-09-20 23:20:03 +02:00
TobiZog	c27dc747b7	Fix order view	2024-09-20 15:30:40 +02:00
TobiZog	871f8cac7a	Redesign productDetail dialog	2024-09-20 15:08:17 +02:00
TobiZog	88c43d62c6	Improved user feedback system, improved Product detail view	2024-09-20 12:57:19 +02:00
TobiZog	58fcae647a	Move banner system to store, migrate login/register API handling to own file, display Account details on accountPage	2024-09-19 16:20:12 +02:00
TobiZog	fbefa52e01	Readme	2024-09-19 15:04:09 +02:00
TobiZog	ddc96bac13	CategoryStore, API calls	2024-09-18 16:21:07 +02:00
TobiZog	fbbfcdf365	ProductStore, move API calls to separate file	2024-09-18 15:59:16 +02:00
TobiZog	a254f99404	Documenting, restructure and expand API	2024-09-13 12:07:33 +02:00
TobiZog	5134a9df31	Setting fo ri18n-ally, progress stepper on order page	2024-09-12 18:38:56 +02:00
TobiZog	0c20ef4366	Create OrdersPage, load orders from backend, move NavDrawer items to Component	2024-09-11 20:49:55 +02:00
TobiZog	463b49ba93	Account login possible	2024-09-11 14:54:33 +02:00
TobiZog	ee07a5a5af	User registration completed	2024-09-10 20:28:24 +02:00
TobiZog	628d1e7bee	Add dialog to create new user	2024-09-10 18:50:47 +02:00
TobiZog	c9a80a0a74	Moving image source from web to backend	2024-09-10 16:45:49 +02:00
TobiZog	5a1b28dd60	Translation	2024-09-09 20:55:09 +02:00
TobiZog	40586f18b2	New basket table, add empty state on basket page, new BasketItemModel	2024-09-09 19:47:46 +02:00
TobiZog	dff6992db3	Store products in a basket, display list of products in basket	2024-09-09 14:33:29 +02:00
TobiZog	b577ddf47d	Moving exmple datasets to json files	2024-09-09 13:45:26 +02:00
TobiZog	ed99709afd	Working on product detail dialog	2024-09-08 20:35:10 +02:00
TobiZog	3f061f0136	Add empty state on productsPage	2024-09-08 19:20:54 +02:00
TobiZog	b585ceb81b	Product images	2024-09-06 18:49:22 +02:00
TobiZog	53d079c95f	Filter products by category and discount, sort by price and name	2024-09-06 18:26:34 +02:00
TobiZog	c1208b5762	Create product cards, display all on products page	2024-09-06 17:10:21 +02:00
TobiZog	5fdf9315c9	Login form	2024-09-05 18:12:08 +02:00
TobiZog	4662a929a0	VueRouter, Pinia state management, add pages, design preferences page	2024-09-05 17:47:02 +02:00
TobiZog	6464521b04	Fix db relations, add sample data, show categories in frontend menu	2024-09-05 16:19:23 +02:00
TobiZog	7ca15a66b3	Add all database tables with relations	2024-09-04 17:06:41 +02:00
TobiZog	955758ec4c	Add SQLite database to backend, interacting with the frontend	2024-09-04 16:42:37 +02:00
TobiZog	64f3769953	Create a test backend server with ExpressJs	2024-09-03 19:10:18 +02:00
TobiZog	4ec710e899	Add Vuetify and basic layout for test purposes	2024-09-03 13:54:19 +02:00
TobiZog	36c5e5b583	Add Vue.js with TypeScript support	2024-09-03 13:37:46 +02:00