add missing comments

frontend/src/app/app.component.html

@@ -1,8 +1,7 @@
 <main [@routeAnimations]="prepareRoute(outlet)">
   <router-outlet #outlet="outlet"></router-outlet>
-</main >
+</main>
 
 <app-footer *ngIf="hasFooter()"></app-footer>
-<!--TODO: set visible for the laoding progress-->
-<app-loader *ngIf="isLoading" ></app-loader>
+<app-loader *ngIf="isLoading"></app-loader>
 <app-toast></app-toast>

frontend/src/app/app.component.ts

@@ -2,38 +2,51 @@ import { Component } from '@angular/core';
 import { OnInit } from '@angular/core';
 import { LoaderService } from './services/loader.service';
 import { RouterOutlet } from '@angular/router';
-import { slideInAnimation} from './route-transition-animation';
+import { slideInAnimation } from './route-transition-animation';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
-  animations: [slideInAnimation]
+  animations: [slideInAnimation],
 })
 
-export class AppComponent implements OnInit{
-  title = 'duogradus. | Sammle Schritte, Tritt gegen Freunde an und steig in der Liga auf';
+/**
+ * The root component of the application.
+ * Responsible for displaying the main layout and handling loading state.
+ */
+export class AppComponent implements OnInit {
+  title =
+    'duogradus. | Sammle Schritte, Tritt gegen Freunde an und steig in der Liga auf';
   isLoading: boolean = false;
-  constructor(private loaderService: LoaderService) {
 
-  }
+  constructor(private loaderService: LoaderService) {}
 
+  /**
+   * Prepares the route for animation.
+   * @param outlet - The router outlet.
+   * @returns The animation data for the activated route.
+   */
   prepareRoute(outlet: RouterOutlet) {
-    console
-    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+    return (
+      outlet &&
+      outlet.activatedRouteData &&
+      outlet.activatedRouteData['animation']
+    );
   }
 
-    hasFooter() {
+  /**
+   * Checks if the current page should have a footer.
+   * @returns True if the current page should have a footer, false otherwise.
+   */
+  hasFooter() {
     const footerPages: string[] = ['/main', '/ranking', '/profile', '/friends'];
     return footerPages.includes(window.location.pathname);
-    }
+  }
 
   ngOnInit(): void {
-     this.loaderService.isLoading.subscribe((value) => {
+    this.loaderService.isLoading.subscribe((value) => {
       this.isLoading = value;
     });
-
   }
-
 }
-

frontend/src/app/components/atoms/challenge-button/challenge-button.component.scss

@@ -1,3 +1,6 @@
+/**
+ * Styles for the challenge button component.
+ */
 .button-19 {
   appearance: button;
   background-color: #a0a0a0ef;
@@ -29,6 +32,26 @@
   margin-top: 15px;
 }
 
+/**
+ * Styles for the pseudo-element ":after" of the .button-19 class.
+ *
+ * This pseudo-element is used to create a circular background with a border at the bottom of the button.
+ * It is positioned absolutely and covers the entire button.
+ *
+ * CSS Properties:
+ * - background-clip: Specifies how the background image or color should be clipped.
+ * - background-color: Specifies the background color of the pseudo-element.
+ * - border: Specifies the border style of the pseudo-element.
+ * - border-radius: Specifies the border radius of the pseudo-element, making it circular.
+ * - border-width: Specifies the width of the border at the bottom of the pseudo-element.
+ * - bottom: Specifies the distance between the bottom edge of the pseudo-element and its containing element.
+ * - content: Specifies the content to be displayed in the pseudo-element.
+ * - left: Specifies the distance between the left edge of the pseudo-element and its containing element.
+ * - position: Specifies the positioning method of the pseudo-element.
+ * - right: Specifies the distance between the right edge of the pseudo-element and its containing element.
+ * - top: Specifies the distance between the top edge of the pseudo-element and its containing element.
+ * - z-index: Specifies the stack order of the pseudo-element.
+ */
 .button-19:after {
   background-clip: padding-box;
   background-color: var(--white);
@@ -44,25 +67,45 @@
   z-index: -1;
 }
 
+/**
+ * Styles for the .button-19 class when it is the main element or in focus state.
+ * Allows user selection of the element.
+ */
 .button-19:main,
 .button-19:focus {
   user-select: auto;
 }
 
+/**
+ * Styles for the .button-19 class when it is being hovered, not disabled.
+ * Increases the brightness of the button by 10%.
+ */
 .button-19:hover:not(:disabled) {
   filter: brightness(1.1);
   -webkit-filter: brightness(1.1);
 }
 
+/**
+ * Styles for the .button-19 class when it is disabled.
+ * Sets the cursor to auto.
+ */
 .button-19:disabled {
   cursor: auto;
 }
 
+/**
+ * Styles for the active state of the .button-19 class.
+ * This style removes the background and adds a 4px border at the top.
+ */
 .button-19:active {
   border-width: 4px 0 0;
   background: none;
 }
 
+/**
+ * Styles for the #button-top ID.
+ * This style sets the font weight to 100 and font size to 10px.
+ */
 #button-top {
   font-weight: 100;
   font-size: 10px;

frontend/src/app/components/atoms/challenge-button/challenge-button.component.ts

@@ -8,16 +8,20 @@ import { EventService } from 'app/services/event.service';
 })
 export class ChallengeButtonComponent {
   @Input() num: number = 1;
-  @Input() id: string = "";
-  @Input() title: string = "";
-  @Input() description: string = "";
+  @Input() id: string = '';
+  @Input() title: string = '';
+  @Input() description: string = '';
   @Output() toggleStopButton = new EventEmitter<void>();
   buttonIsclicked: boolean = false;
 
   constructor(public eventService: EventService) {
     this.eventService = eventService;
   }
 
+  /**
+   * Handles the click event of the challenge button.
+   * Sets the `buttonIsclicked` property to `true` and disables the event service.
+   */
   challengeButtonIsClicked() {
     this.buttonIsclicked = true;
     this.eventService.disabled = true;

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

@@ -1,58 +1,67 @@
-.main-container
-{
-    display: flex;
-    flex-direction: row;
-    background-color: inherit;
-    align-items: center;
-    width: 91vw;
-    border-top: 0.1px solid rgb(85, 85, 85);
-    padding: 5px;
-
-
-    img
-    {
-        width: 50px;
-        border-radius: 50%;
-        height: 50px;
-        margin-left: 1rem;
-        padding: 0;
-        background-color: var(--white);
-        margin-top: 3px;
-
-    }
+/**
+ * Styles for the FriendCardComponent.
+ */
+.main-container {
+  display: flex;
+  flex-direction: row;
+  background-color: inherit;
+  align-items: center;
+  width: 91vw;
+  border-top: 0.1px solid rgb(85, 85, 85);
+  padding: 5px;
 
-    h3
-    {
-        font-size: 1rem;
-        margin-left: 1rem;
-        color: var(--white);
-        margin-top: 0;
-    }
+  /**
+     * Styles for the image element inside the FriendCardComponent.
+     */
+  img {
+    width: 50px;
+    border-radius: 50%;
+    height: 50px;
+    margin-left: 1rem;
+    padding: 0;
+    background-color: var(--white);
+    margin-top: 3px;
+  }
 
-    .remove-button {
-        background-color: var(--green);
-        border: none;
-        cursor: pointer;
-        border-radius: 5px;
-        height: 25px;
-        font-weight: bold;
-        align-items: end;
-        margin-right: 20px;
-        transition: background-color 0.1s ease; /* Übergangseigenschaft für die Hintergrundfarbe */
-    }
+  /**
+     * Styles for the heading element inside the FriendCardComponent.
+     */
+  h3 {
+    font-size: 1rem;
+    margin-left: 1rem;
+    color: var(--white);
+    margin-top: 0;
+  }
 
+  /**
+     * Styles for the remove button inside the FriendCardComponent.
+     */
+  .remove-button {
+    background-color: var(--green);
+    border: none;
+    cursor: pointer;
+    border-radius: 5px;
+    height: 25px;
+    font-weight: bold;
+    align-items: end;
+    margin-right: 20px;
+    transition: background-color 0.1s ease;
+  }
 
-    .remove-button:active {
-        background-color: lighten(#00ff7f, 30%); /* Die Hintergrundfarbe wird beim Klicken um 20% aufgehellt */
-    }
+  /**
+     * Styles for the remove button when it is active.
+     */
+  .remove-button:active {
+    background-color: lighten(#00ff7f, 30%);
+  }
 
-
-
-    .inner-container
-    {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        width: 100%;
-    }
+  /**
+     * Styles for the inner container inside the FriendCardComponent.
+     */
+  .inner-container {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+  }
 }

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

@@ -1,20 +1,19 @@
-
 import { Component, Input } from '@angular/core';
 
-
 @Component({
   selector: 'app-friend-card',
   templateUrl: './friend-card.component.html',
-  styleUrl: './friend-card.component.scss'
+  styleUrl: './friend-card.component.scss',
 })
-export class FriendCardComponent{
-  @Input() name: string = "";
-  @Input() picture: string = "../../../../assets/icons/001-sportler.png";
+export class FriendCardComponent {
+  @Input() name: string = '';
+  @Input() picture: string = '../../../../assets/icons/001-sportler.png';
   removeIsPressed: boolean = false;
 
-  toggleRemove()
-    {
-      this.removeIsPressed = !this.removeIsPressed;
-
-    }
+  /**
+   * Toggles the state of the `removeIsPressed` property.
+   */
+  toggleRemove() {
+    this.removeIsPressed = !this.removeIsPressed;
+  }
 }

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

@@ -1,26 +1,32 @@
+/**
+ * Styles for the header component.
+ */
+.header {
+  width: 100vw;
+  height: 30px;
+  background: rgb(0, 0, 0);
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 1) 14%,
+    rgba(0, 75, 17, 1) 82%,
+    rgba(0, 75, 17, 1) 100%
+  );
+  margin: 0;
+  padding-top: 8px;
+  padding-bottom: 5px;
+  display: flex;
+  justify-content: start;
+  align-items: center;
 
-.header
-{
-    width: 100vw;
-    height: 30px;
-    background: rgb(0,0,0);
-    background: linear-gradient(90deg, rgba(0,0,0,1) 14%, rgba(0,75,17,1) 82%, rgba(0,75,17,1) 100%);
+  /**
+     * Styles for the heading element within the header component.
+     */
+  h3 {
+    color: var(--white-1);
+    font-size: 2rem;
     margin: 0;
-    padding-top: 8px;
-    padding-bottom: 5px;
-    display: flex;
-    justify-content: start;
-    align-items: center;
-
-
-
-    h3
-    {
-        color: var(--white-1);
-        font-size: 2rem;
-        margin: 0;
-        text-align: start;
-        align-horizontally: center;
-        margin-left: 1rem;
-    }
+    text-align: start;
+    align-horizontally: center;
+    margin-left: 1rem;
+  }
 }