style: added comments to clarify the code

frontend/src/app/components/atoms/settingsentry/settingsentry.component.scss

@@ -1,4 +1,6 @@
 $font-size:1.2em;
+
+//design for generic settings entry
 #wrapper{
     height:14vh;
     text-align: center;

frontend/src/app/components/atoms/settingsentry/settingsentry.component.ts

@@ -6,6 +6,7 @@ import { Component, Input } from '@angular/core';
   styleUrl: './settingsentry.component.scss'
 })
 export class SettingsentryComponent {
+  //input with default values for showcase
   @Input() name :String = 'default';
   @Input() value :String = 'default';
 }

frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.scss

@@ -1,3 +1,4 @@
+//design for generic statistic entry
 #wrapper{
     background-color: var(--white);
     text-align: center;

frontend/src/app/components/atoms/statistic-entry/statistic-entry.component.ts

@@ -6,6 +6,7 @@ import { Component, Input, input } from '@angular/core';
   styleUrl: './statistic-entry.component.scss'
 })
 export class StatisticEntryComponent {
+  //input with default values for showcase
   @Input() name:string = 'Distanz gelaufen';
   @Input() value:string = '12.3 km';
 }

frontend/src/app/components/atoms/user-card/user-card.component.scss

@@ -3,6 +3,7 @@ $border-radius-size: 10px;
 $background-color: var(--white);
 $font-color: var(--font);
 
+//design of user card for ranked page
 .user-card {
     display: flex;
     justify-content: space-between;

frontend/src/app/components/atoms/user-card/user-card.component.ts

@@ -6,6 +6,7 @@ import { Component, Input } from '@angular/core';
   styleUrls: ['./user-card.component.scss']
 })
 export class UserCardComponent {
+  //input with default values for showcase
   @Input() placement: number = 0;
   @Input() name: string = "default";
   @Input() winstreak: number = 0;

frontend/src/app/components/organisms/footer/footer.component.html

@@ -1,4 +1,9 @@
 <div id="container">
+    <!-- 
+        navigation bar that is always visible
+        contains 4 icons that represent the main pages of the app
+        the icon of the current page is highlighted
+     -->
     <div id="nav-main"
         (click)="navigate('/main')"
         [ngClass]="isOnPage('/main')? 'nav-element highlight': 'nav-element'">

frontend/src/app/components/organisms/footer/footer.component.scss

@@ -25,6 +25,7 @@
             padding-top: 5%;
         }
     }
+    //highlight the active navigation element
     .highlight{
         background-color: var(--white)!important;
         .icons{

frontend/src/app/components/organisms/footer/footer.component.ts

@@ -12,10 +12,12 @@ export class FooterComponent {
   constructor(router:Router){
     this.router=router;
   }
-
+  //called to navigate to a different page
   navigate(path:string){
     this.router.navigateByUrl(path);
   }
+
+  //called to highlight current page
   isOnPage(path:string):boolean{
     return this.router.url==path;
   }

frontend/src/app/components/organisms/ranking-table/ranking-table.component.html

@@ -1,12 +1,12 @@
 <div class="ranking-list">
+  <!-- table header -->
   <div class="header">
     <div id="hd-plce">Placement</div>
     <div id="hd-name">Name</div>
     <div id="hd-wins">Winstreak</div>
   </div>
-
   <hr id="table-seperator">
-
+  <!-- dynamic table entries -->
   <ng-container *ngIf="users.length > 0; else noUsers">
     <app-user-card 
     *ngFor="let user of users" 
@@ -15,7 +15,7 @@
     [winstreak]="user.winstreak"
     class="uc"/>
   </ng-container>
-
+  <!-- no users placeholder -->
   <ng-template #noUsers>
     <div class="no-users">No users found.</div>
   </ng-template>

frontend/src/app/components/organisms/ranking-table/ranking-table.component.scss

@@ -1,6 +1,7 @@
 $gap-size: 10px;
 $font-weight-bold: bold;
 
+//list with column flex to display the ranking
 .ranking-list {
     display: flex;
     flex-direction: column;
@@ -19,6 +20,7 @@ $font-weight-bold: bold;
             width: 40%;
         }
     }
+    //align the user cards with header
     .uc{
         padding-left: 2%;
     }

frontend/src/app/components/organisms/ranking-table/ranking-table.component.ts

@@ -6,6 +6,7 @@ import { Component, Input, NgModule } from '@angular/core';
   styleUrl: './ranking-table.component.scss'
 })
 export class RankingTableComponent {
+  //input, default values in parent element
   @Input() users: any[] = [
   ];
 }

frontend/src/app/components/pages/profilepage/profilepage.component.html

@@ -1,12 +1,15 @@
 <div id="wrapper">
+    <!-- avatar section -->
     <div id="avatar">
         <img (click)="settings()" src="../../../../assets/icons/settings.svg" alt="settings-svg" id="settings">
         <img src="../../../../assets/icons/avatar.svg" alt="avatar-svg" id="avatar-svg">
     </div>
+    <!-- user info section -->
     <div id="data" class="pf-section">
         <h2 id="name">{{name}}</h2>
         <p id="email">{{email}}</p>
     </div>
+    <!-- dynamic statistic entries -->
     <div id="statistics" class="pf-section">
         <h2>Statistiken</h2>
         <div id="entrys-wrapper">

frontend/src/app/components/pages/profilepage/profilepage.component.scss

@@ -1,20 +1,24 @@
+//page wrapper
 #wrapper{
     background-color: var(--background-black);
     height: 90vh;
     overflow-y: scroll;
 }
+//settings icon
 #settings {
     position: fixed;
     top: 0.5em;
     right: 0.5em;
     width: 2.5em;
     height: auto;
 }
+//avatar section
 #avatar {
     width: 100%;
     height: 10em;
     background-color: var(--white);
 }
+//avatar icon
 #avatar-svg{
     height: 100%;
     padding-top: 1.5em;
@@ -23,7 +27,7 @@
     clip-path: inset(0px 0px 1.5em 0px);
 }
 
-//sections below the avatar
+//format for user data and statistic entries
 @mixin section{
     text-indent: 1em;
     background-color: var(--font);
@@ -33,15 +37,17 @@
         padding-top: 1em;
     }
 }
- 
+//user data section
 #data{
     @include section;
     height: 20vh;
 }
+//statistics section
 #statistics{
     @include section;
     min-height: 30vh;
 }
+//wrapper for section entries
 #entrys-wrapper{
     display: flex;
     flex-wrap: wrap;

frontend/src/app/components/pages/profilepage/profilepage.component.ts

@@ -7,6 +7,8 @@ import { Router } from '@angular/router';
   styleUrl: './profilepage.component.scss'
 })
 export class ProfilepageComponent {
+  //input with default values for showcase
+  //statistics is dynamic array
   name: string = "David Hasselhoff";
   email: string = "[email protected]";
   statistics: {name: string, value: string}[] = [
@@ -21,6 +23,7 @@ export class ProfilepageComponent {
     this.router = router;
   }
 
+  //gets called to open settings
   settings(){
     this.router.navigate(['/settings']);
   }

frontend/src/app/components/pages/ranking-page/ranking-page.component.html

@@ -1,9 +1,11 @@
 <div id="pg-container">
+    <!-- header -->
     <div id="pg-ranked-header">
         <div id="headline-wrapper">
             <h1>Globale Rangliste</h1>
         </div>
     </div>
+    <!-- ranking table with input data -->
     <app-ranking-table [users]="users"></app-ranking-table>
 </div>
 

frontend/src/app/components/pages/ranking-page/ranking-page.component.scss

@@ -1,3 +1,4 @@
+//only for header, table in seperate file
 #pg-container{
     min-height: 100vh;
     background-color: var(--background-black);

frontend/src/app/components/pages/ranking-page/ranking-page.component.ts

@@ -6,7 +6,7 @@ import { Component, Input } from '@angular/core';
   styleUrls: ['./ranking-page.component.scss']
 })
 export class RankingPageComponent {
-  //Default values for showcase 
+  //input with default values for showcase 
   users: any[] = [
     { name: 'Susi', placement: 1, winstreak: 43 },
     { name: 'Max', placement: 2, winstreak: 38 },

frontend/src/app/components/pages/settingspage/settingspage.component.html

@@ -1,4 +1,5 @@
 <div id="wrapper">
+    <!-- settings header -->
     <div id="header">
         <img id="close-settings" src="../../../../assets/icons/close-settings.svg" alt="close-svg"
         (click)="goBack()">
@@ -10,12 +11,14 @@
             SAVE
         </div>
     </div>
+    <!-- settings avatar section -->
     <div id="avatar">
         <img id="avatar-img" src="../../../../assets/icons/avatar.svg" alt="avatar-svg">
         <div id="change-avatar">
             CHANGE AVATAR
         </div>
     </div>
+    <!-- settings dyncamic entries -->
     <div id="settings">
         <app-settingsentry
         *ngFor="let setting of settings"

frontend/src/app/components/pages/settingspage/settingspage.component.scss

@@ -1,14 +1,18 @@
+//page wrapper
 #wrapper{
     background-color: var(--background-black);
     height: 100vh;
 }
+
 #header{
     height: 4em;
     background-color: var(--font);
     display: flex;
     flex: 1 2 auto;
     justify-content: space-between;
 }
+
+//cross icon to close page
 #close-settings{
     width: auto;
     height: 60%;
@@ -17,18 +21,23 @@
     filter: invert(1);
     padding-bottom: 0.3em;
 }
+
 #headline{
     font-size: 2.5em;
     color: var(--white);
     margin: auto;
 }
+
+//save button
 #save{
     margin: auto;
     margin-right: 5%;
     font-size: 1.5em;
     color: var(--green);
     text-align: right;
 }
+
+//avatar section
 #avatar{
     height: 30vh;
     text-align: center;
@@ -37,21 +46,27 @@
     background-color: var(--font);
     border-radius: 1em;
 }
+//avatar placeholder
 #avatar-img{
     height: 70%;
 }
+
+//change avatar link
 #change-avatar{
     margin-top: 0.5em;
     font-size: 1.5em;
 }
+//nessesary for small screens
 @media (height <= 400px) {
     #change-avatar{
         font-size: 0.5em;
     }
 }
+//logout section
 #logout{
     text-align: center;
 }
+//logout button
 #logout-bt{
     background-color: var(--green);
     color: var(--black-2);

frontend/src/app/components/pages/settingspage/settingspage.component.ts

@@ -8,16 +8,19 @@ import { Router } from '@angular/router';
 })
 export class SettingspageComponent {
 
+  //dynamic settings array with fake data for showcase
   @Input() settings =[{name:'Name', value:'David Hasselhoff'},
                       {name:'Email',value:'[email protected]'}];
 
   constructor(private router: Router) { 
   }
 
+  //gets called on page close
   goBack() {
     this.router.navigate(['/profile']);
   }
 
+  //gets called when the user clicks the logout button
   logout() {
     localStorage.removeItem('bearerToken');
     this.router.navigate(['/home']);