created all components for the main page (#143)

* feat: Header und Roadmap erstellt

* feat: tab text verändert

* fix: add baseUrl to tsconfig

* feat: challengedialog implemented

* feat: add angular animations for challengerdialog

* fix: update animation speed

* fix: update animation duration

* feat: function to start the training

* feat: implemented Timer and snackbar

* feat: loginpage hinzugefügt

frontend/angular.json

@@ -33,7 +33,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/favicon.ico",
+              "src/Logo_1_black.ico",
               "src/assets"
             ],
             "styles": [

frontend/src/app/app-routing.module.ts

@@ -1,7 +1,12 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { MainpageComponent } from './components/pages/mainpage/mainpage.component';
+import { AuthenticationpageComponent } from './components/pages/authenticationpage/authenticationpage.component';
 
-const routes: Routes = [];
+const routes: Routes = [
+  {path:"main", component: MainpageComponent},
+  {path:"login", component : AuthenticationpageComponent}
+];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],

frontend/src/app/app.module.ts

@@ -1,18 +1,41 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {provideAnimations} from '@angular/platform-browser/animations'
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { MainpageComponent } from './components/pages/mainpage/mainpage.component';
+import { StatisticHeaderComponent } from './components/organisms/statistic-header/statistic-header.component';
+import { RoadmapComponent } from './components/organisms/roadmap/roadmap.component';
+import { ChallengeButtonComponent } from './components/atoms/challenge-button/challenge-button.component';
+import { ChallengeDialogComponent } from './components/organisms/challenge-dialog/challenge-dialog.component';
+import { TimerComponent } from './components/atoms/timer/timer.component';
+import { TimerPipe } from './pipes/timer.pipe';
+import { StopbuttonComponent } from './components/atoms/stopbutton/stopbutton.component';
+import { ToastComponent } from './components/atoms/toast/toast.component';
+import { AuthenticationpageComponent } from './components/pages/authenticationpage/authenticationpage.component';
+import { LoginformComponent } from './components/organisms/loginform/loginform.component';
+import { InputfieldComponent } from './components/atoms/inputfield/inputfield.component';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    MainpageComponent,
+    StatisticHeaderComponent,
+    RoadmapComponent,
+    ChallengeButtonComponent,
+    ChallengeDialogComponent,
+    TimerComponent,
+    TimerPipe,
+    StopbuttonComponent,
+    ToastComponent,
+    AuthenticationpageComponent,
+    LoginformComponent,
+    InputfieldComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
+  imports: [BrowserModule, AppRoutingModule, BrowserAnimationsModule],
+  providers: [provideAnimations()],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

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

@@ -0,0 +1,17 @@
+<button
+  (click)="challengeButtonIsClicked()"
+  class="button-19"
+  role="button"
+  [disabled]="eventService.disabled"
+>
+  <span id="button-top">Training</span><br /><span>{{ num }}</span>
+</button>
+
+<app-challenge-dialog
+  [trigger] = "buttonIsclicked"
+  [num]="num"
+  [steps]="steps"
+  [time]="time"
+  class="wipe-up"
+  (closeDialog)="closeDialog()"
+></app-challenge-dialog>

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

@@ -0,0 +1,134 @@
+.button-19 {
+  appearance: button;
+  background-color: #a0a0a0ef;
+  border: solid transparent;
+  border-radius: 50%;
+  border-width: 0 0 5px;
+  box-sizing: border-box;
+  color: var(--font);
+  cursor: pointer;
+  display: inline-block;
+  font-size: 25px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  line-height: 20px;
+  margin: 0;
+  outline: none;
+  padding: 13px 16px;
+  text-align: center;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  transform: translateZ(0);
+  transition: filter 0.2s;
+  user-select: none;
+  -webkit-user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 80px;
+  height: 80px;
+  margin-top: 15px;
+}
+
+.button-19:after {
+  background-clip: padding-box;
+  background-color: var(--white);
+  border: solid transparent;
+  border-radius: 50%;
+  border-width: 0 0 4px;
+  bottom: -4px;
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+}
+
+.button-19:main,
+.button-19:focus {
+  user-select: auto;
+}
+
+.button-19:hover:not(:disabled) {
+  filter: brightness(1.1);
+  -webkit-filter: brightness(1.1);
+}
+
+.button-19:disabled {
+  cursor: auto;
+}
+
+.button-19:active {
+  border-width: 4px 0 0;
+  background: none;
+}
+
+#button-top {
+  font-weight: 100;
+  font-size: 10px;
+}
+
+.button-19-false {
+  appearance: button;
+  background-color: #a0a0a0;
+  border: solid transparent;
+  border-radius: 50%;
+  border-width: 0 0 5px;
+  box-sizing: border-box;
+  color: var(--font);
+  cursor: pointer;
+  display: inline-block;
+  font-size: 25px;
+  font-weight: 700;
+  letter-spacing: 0.8px;
+  line-height: 20px;
+  margin: 0;
+  outline: none;
+  padding: 13px 16px;
+  text-align: center;
+  text-transform: uppercase;
+  touch-action: manipulation;
+  transform: translateZ(0);
+  transition: filter 0.2s;
+  user-select: none;
+  -webkit-user-select: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  width: 80px;
+  height: 80px;
+  margin-top: 15px;
+}
+
+.button-19-false:after {
+  background-clip: padding-box;
+  background-color: #a0a0a0;
+  border: solid transparent;
+  border-radius: 50%;
+  border-width: 0 0 4px;
+  bottom: -4px;
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: -1;
+}
+
+.button-19-false:main,
+.button-19-false:focus {
+  user-select: auto;
+}
+
+.button-19-false:hover:not(:disabled) {
+  filter: brightness(1.1);
+  -webkit-filter: brightness(1.1);
+}
+
+.button-19-false:disabled {
+  cursor: auto;
+}
+
+.button-19-false:active {
+  border-width: 4px 0 0;
+  background: none;
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChallengeButtonComponent } from './challenge-button.component';
+
+describe('ChallengeButtonComponent', () => {
+  let component: ChallengeButtonComponent;
+  let fixture: ComponentFixture<ChallengeButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ChallengeButtonComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChallengeButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter} from '@angular/core';
+import { EventService } from 'app/services/event.service';
+
+
+@Component({
+  selector: 'app-challenge-button',
+  templateUrl: './challenge-button.component.html',
+  styleUrl: './challenge-button.component.scss',
+
+})
+export class ChallengeButtonComponent {
+  @Input() num: number = 1;
+  @Input() steps: number = 0;
+  @Input() time: number = 0;
+  @Output() toggleStopButton = new EventEmitter<void>();
+  buttonIsclicked: boolean = false;
+
+
+  constructor(public eventService:EventService)
+  {
+      this.eventService = eventService;
+  }
+
+  challengeButtonIsClicked() {
+    this.buttonIsclicked = true;
+    this.eventService.disabled = true;
+  }
+
+  closeDialog() {
+    this.buttonIsclicked = false;
+    this.eventService.disabled = false;
+  }
+}

frontend/src/app/components/atoms/inputfield/inputfield.component.html

@@ -0,0 +1,4 @@
+<div class="textfield">
+    <label class="label">{{ labeltext }}</label>
+    <input class="input" type="{{typetext}}" placeholder="{{ placeholder }}" >
+</div>

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

@@ -0,0 +1,20 @@
+.textfield
+{
+    display: flex;
+    flex-direction: column;
+
+    .label
+    {
+
+        font-weight: bold;
+    }
+
+    .input
+    {
+        margin-top: 12px;
+        margin-bottom: 12px;
+        height: 40px;
+        border-radius: 8px;
+        text-indent: 10px;
+    }
+}

frontend/src/app/components/atoms/inputfield/inputfield.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputfieldComponent } from './inputfield.component';
+
+describe('InputfieldComponent', () => {
+  let component: InputfieldComponent;
+  let fixture: ComponentFixture<InputfieldComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [InputfieldComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InputfieldComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-inputfield',
+  templateUrl: './inputfield.component.html',
+  styleUrl: './inputfield.component.scss'
+})
+export class InputfieldComponent {
+  @Input() typetext: string = "Hallo";
+  @Input() placeholder: string = ""; 
+  @Input() labeltext:  string = ""; 
+
+
+}

frontend/src/app/components/atoms/stopbutton/stopbutton.component.html

@@ -0,0 +1 @@
+<button class="stopbutton" (click)="toggleStopButton()">Stop</button>