✨ add speakers handling components; api service; mock data

src/app/app-routing.module.ts

@@ -1,9 +1,13 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { PageComponent } from './pages/page/page.component';
+import { TestPageComponent } from './pages/test-page/test-page.component';
+import { SpeakerDetailsComponent } from './pages/speaker-details/speaker-details.component';
 
 const routes: Routes = [
-  { path: 'page/:id', component: PageComponent }
+  { path: 'page/:id', component: PageComponent },
+  { path: 'test_page', component: TestPageComponent },
+  { path: 'speaker-details/:speakerCode', component: SpeakerDetailsComponent }
 ];
 
 @NgModule({

src/app/app.module.ts

@@ -13,6 +13,10 @@ import { ButtonComponent } from './components/button/button.component';
 import { WorkshoplistComponent } from './workshoplist/workshoplist.component';
 import { TimeplanComponent } from './timeplan/timeplan.component';
 import { GalleryComponent } from './gallery/gallery.component';
+import { TestPageComponent } from './pages/test-page/test-page.component';
+import { SpeakersComponent } from './components/speakers/speakers.component';
+import { SpinnerComponent } from './components/spinner/spinner.component';
+import { SpeakerDetailsComponent } from './pages/speaker-details/speaker-details.component';
 
 
 
@@ -25,6 +29,10 @@ import { GalleryComponent } from './gallery/gallery.component';
     HeadermenuComponent,
     PageComponent,
     ButtonComponent,
+    TestPageComponent,
+    SpeakersComponent,
+    SpinnerComponent,
+    SpeakerDetailsComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/menus/headermenu/headermenu.component.html

@@ -1,4 +1,4 @@
-<header class="container">
+<header class="container header-menu">
   <div class="row justify-content-between">
     <div class="col-sm-4 col-4 col-lg-2 col-xl-4">
       <a routerLink="/">
@@ -39,6 +39,5 @@
         </ul>
       </nav>
     </div>
-
   </div>
 </header>

src/app/components/menus/headermenu/headermenu.component.scss

@@ -8,6 +8,7 @@
   position: sticky;
   display: block;
   top: 0;
+  z-index: 1000;
 
   .button-center {
     align-self: center;

src/app/components/speakers/APISpeakers.ts

@@ -0,0 +1,86 @@
+import { APISpeakers, Answer, Availability, Speaker } from './speaker.interface'
+
+export const fakePretalx: APISpeakers = {
+  count: 1,
+  next: null,
+  previous: null,
+  results: [
+    {
+      code: "ABCDE",
+      name: "Max Mustermann",
+      biography: "Managing state and complex data in Angular",
+      submissions: ["DEFAB"],
+      avatar: "https://picsum.photos/200/300?random=3",
+      availabilities: [
+        {
+          id: 1,
+          start: "2023-08-24T04:00:00Z",
+          end: "2023-08-25T04:00:00Z",
+          allDay: false
+        }
+      ],
+      answers: [
+        { question: 'Favorite programming language?', answer: 'JavaScript' },
+        { question: 'Experience in public speaking?', answer: 'Yes' }
+      ]
+    },
+    {
+      code: "XYZ123",
+      name: "Alexander Pronin",
+      biography: "A good speaker",
+      submissions: ["DEFAB"],
+      avatar: "https://picsum.photos/200/300?random=1",
+      availabilities: [
+        {
+          "id": 1,
+          "start": "2023-08-01T09:00:00Z",
+          "end": "2023-08-02T09:00:00Z",
+          "allDay": false
+        }
+      ],
+      answers: [
+        { question: 'Favorite programming language?', answer: 'JavaScript' },
+        { question: 'Experience in public speaking?', answer: 'Yes' }
+      ]
+    },
+    {
+      code: "BDF456",
+      name: "Einfach Tobias",
+      biography: "Wird schon",
+      submissions: ["DEFAB"],
+      avatar: "https://picsum.photos/200/300?random=2",
+      availabilities: [
+        {
+          "id": 1,
+          "start": "2023-08-01T09:00:00Z",
+          "end": "2023-08-02T09:00:00Z",
+          "allDay": false
+        }
+      ],
+      answers: [
+        { question: 'Favorite programming language?', answer: 'JavaScript' },
+        { question: 'Experience in public speaking?', answer: 'Yes' }
+      ]
+    },
+    {
+      code: "BDF456",
+      name: "Versteckter Sprecher",
+      biography: "Jemand, der nicht angezeigt werden soll",
+      submissions: ["DEFAB"],
+      avatar: "https://picsum.photos/200/300?random=4",
+      availabilities: [
+        {
+          "id": 1,
+          "start": "2023-08-01T09:00:00Z",
+          "end": "2023-08-02T09:00:00Z",
+          "allDay": false
+        }
+      ],
+      answers: [
+        { question: 'Favorite programming language?', answer: 'JavaScript' },
+        { question: 'Experience in public speaking?', answer: 'Yes' }
+      ]
+    },
+  ]
+}
+

src/app/components/speakers/speaker.interface.ts

@@ -0,0 +1,29 @@
+export interface APISpeakers {
+    count: number;
+    next: null | string;
+    previous: null | string;
+    results: Speaker[];
+  }
+
+export interface Speaker {
+    code: string;
+    name: string;
+    biography: string;
+    submissions: string[];
+    avatar: string;
+    email?: string;
+    availabilities: Availability[];
+    answers?: Answer[];
+  }
+
+  export interface Availability {
+    id: number;
+    start: string;
+    end: string;
+    allDay: boolean;
+  }
+
+  export interface Answer {
+    question: string;
+    answer: string;
+  }

src/app/components/speakers/speakers.component.html

@@ -0,0 +1,30 @@
+<ng-container *ngIf="allSpeakers$ | async as speakers;  else loading">
+    <div class="container justify-content-center">
+        <div class="row">
+            <div *ngFor="let speaker of (showAll ? speakers : speakers.slice(0, 3))" class="col-md-4 mb-4">
+
+                <div class="custom-card" [routerLink]="['/speaker-details', speaker.code]">
+                    <div class="card-header">
+                        <img [src]="speaker.avatar" [alt]="speaker.name" class="card-img">
+                    </div>
+                    <div class="card-body">
+                        <h5 class="card-title">{{ speaker.name }}</h5>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-md-12 mb-12 button-container">
+                <dd-button [buttonText]="showAll ? 'Zeige weniger ' : 'Zeige mehr '" [buttonType]="ButtonType.outline"
+                    class="toggle-content-button" (click)="toggleShowMore()" [ngClass]="showAll ? 'less' : 'more'">
+                    <img *ngIf="showAll" src="../../../assets/icons/arrow-bottom.svg" alt="Weniger">
+                </dd-button>
+            </div>
+        </div>
+    </div>
+</ng-container>
+
+<ng-template #loading>
+    <dd-spinner></dd-spinner>
+</ng-template>

src/app/components/speakers/speakers.component.scss

@@ -0,0 +1,82 @@
+:host {
+  .custom-card {
+    padding: 10px;
+    cursor: pointer;
+
+    &:hover {
+      color: #14897d;
+    }
+
+    .card-header {
+      text-align: center;
+      background: linear-gradient(
+        14deg,
+        var(--fotos-backround-gardient-start) 0%,
+        var(--fotos-backround-gardient-end) 100%
+      );
+
+      .card-img {
+        max-width: 100%;
+        height: auto;
+      }
+    }
+
+    .card-body {
+      text-align: center;
+      padding: 15px;
+
+      .card-title {
+        font-size: 1.25rem;
+        margin: 0;
+        font-weight: bold;
+      }
+    }
+    .card-img {
+      filter: grayscale(100%);
+      transform: rotate(-4deg);
+      transition: all 0.3s ease;
+
+      &:hover {
+        transform: rotate(0);
+        transition: transform 0.3s ease;
+        filter: grayscale(0%);
+      }
+    }
+  }
+
+  .button-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1rem;
+
+    .toggle-content-button {
+      position: relative;
+
+      &.more::before {
+        content: "";
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        transform: rotate(45deg) translateX(-4px);
+        border-right: 2px solid;
+        border-bottom: 2px solid;
+        top: 50%;
+        right: 1.25rem;
+        margin-top: -5px;
+      }
+      &.less::before {
+        content: "";
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        transform: rotate(225deg) translateX(-2px);
+        border-right: 2px solid;
+        border-bottom: 2px solid;
+        top: 50%;
+        right: 1.7rem;
+        margin-top: -4px;
+      }
+    }
+  }
+}

src/app/components/speakers/speakers.component.spec.ts

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

src/app/components/speakers/speakers.component.ts

@@ -0,0 +1,42 @@
+
+import { Component, OnInit } from '@angular/core';
+import { SpeakerService } from '../../services/speaker.service';
+import { tap } from 'rxjs/operators';
+import { Speaker } from './speaker.interface';
+import { ButtonType } from '../button/button.component';
+import { Observable } from 'rxjs';
+
+
+@Component({
+  selector: 'app-speakers',
+  templateUrl: './speakers.component.html',
+  styleUrls: ['./speakers.component.scss']
+})
+
+export class SpeakersComponent implements OnInit {
+  showAll = false;
+  ButtonType = ButtonType;
+
+  allSpeakers$: Observable<Speaker[]>;
+
+  constructor(private speakerService: SpeakerService) { }
+
+  ngOnInit(): void {
+
+    //todo del setinterval
+    //this.allSpeakers$ = this.speakerService.getAllSpeakers()
+    setInterval(() => {
+      this.allSpeakers$ = this.speakerService.getAllSpeakers()
+        }, 1000);
+  }
+
+
+  toggleShowMore() {
+    this.showAll = !this.showAll;
+  }
+
+  showSpeakerDetails(code: string): void {
+    console.log(code);
+  }
+
+}

src/app/components/spinner/spinner.component.html

@@ -0,0 +1,3 @@
+<div class="loading-container">
+    <div class="spinner"></div>
+</div>

src/app/components/spinner/spinner.component.scss

@@ -0,0 +1,29 @@
+:host {
+  .loading-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  .spinner {
+    border: 4px solid rgba(0, 0, 0, 0.1);
+    border-left: 4px solid #00b6a3;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}