18 session handing sessiongrid

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "sarif-viewer.connectToGithubCodeScanning": "off"
+}

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,11 @@ 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';
+import { SessionListComponent } from './components/session-list/session-list.component';
 
 
 
@@ -25,6 +30,11 @@ import { GalleryComponent } from './gallery/gallery.component';
     HeadermenuComponent,
     PageComponent,
     ButtonComponent,
+    TestPageComponent,
+    SpeakersComponent,
+    SpinnerComponent,
+    SpeakerDetailsComponent,
+    SessionListComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -1,18 +1,18 @@
-<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="/">
         <img src="/assets/devday-logo.svg" alt="Dev Day" width="175" height="59">
       </a>
     </div>
-    <div class="col-sm-8 col-8  d-xl-none mobile-menu-trigger">
+    <div class="col-sm-8 col-8  col-lg-2 d-lg-none mobile-menu-trigger">
       <button class="mobile-menu-trigger-button" [ngClass]="{ 'open': isMenuOpen }" (click)="toggleMenu()">
         <span></span>
         <span></span>
         <span></span>
       </button>
     </div>
-    <div class="col-sm-12 col-md-12 col-lg-10 col-xl-8 d-xl-block" [ngClass]="{ 'd-none': !isMenuOpen }">
+    <div class="col-sm-12 col-md-12 col-lg-8 col-xl-8 d-lg-block" [ngClass]="{ 'd-none': !isMenuOpen }">
       <nav *ngIf="menuItems" aria-label="Main Navigation" [ngClass]="{ 'open': isMenuOpen }">
         <ul>
           <ng-container *ngFor="let menuItem of menuItems">
@@ -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/session-list/session-list.component.html

@@ -0,0 +1,66 @@
+<div class="container">
+  <div class="content-area">
+    <div clas="row">
+      <div class="col-12 col-md-10 offset-md-1">
+        <h1>Sessionplan Dev Day 2023</h1>
+        <div>
+
+
+          <table class="session_table  d-none d-xl-block">
+            <thead>
+              <tr>
+                <th>Zeit</th>
+                <th *ngFor="let talk of talks$ | async ">
+                  <span>{{ talk.slot.room }}</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              <ng-container *ngFor="let group of groupedSessions">
+                <tr>
+                  <td class="td_time">{{ group[0].slot.start | date:'HH:mm' }} - {{ group[0].slot.end | date:'HH:mm' }}
+                  </td>
+                  <td *ngFor="let talk of talks$ | async ">
+                    <p>
+                      <a class="title">{{ getSessionForRoom(group, talk.slot.room)?.title }}</a>
+                    </p>
+                    <ng-container *ngFor="let speaker of getSessionForRoom(group, talk.slot.room)?.speakers">
+                      <a class="speaker-link"  [routerLink]="['/speaker-details', speaker.code]">{{speaker.name}} </a>
+                    </ng-container>
+                  </td>
+                </tr>
+              </ng-container>
+            </tbody>
+          </table>
+
+          <table class="session_table_small">
+            <tbody class="container d-xl-none">
+              <ng-container *ngFor="let group of groupedSessions">
+                <tr class="row">
+                  <td class="td_time col-12 col-sm-3">{{ group[0].slot.start | date:'HH:mm' }} - {{ group[0].slot.end |
+                    date:'HH:mm' }}</td>
+                  <div class="test col-12 col-sm-8">
+                    <ng-container *ngFor="let talk of talks$ | async ">
+                      <td class="td_topic" *ngIf="getSessionForRoom(group, talk.slot.room)">
+                        <p>
+                          {{getSessionForRoom(group, talk.slot.room)?.slot.room}}
+                        </p>
+                        <p>
+                          <a class="speaker-link">{{getSessionForRoom(group, talk.slot.room)?.title}}</a>
+                        </p>
+                        <ng-container *ngFor="let speaker of getSessionForRoom(group, talk.slot.room)?.speakers">
+                          <a class="speaker-link">{{speaker.name}} </a>
+                        </ng-container>
+                      </td>
+                    </ng-container>
+                  </div>
+                </tr>
+              </ng-container>
+            </tbody>
+          </table>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/components/session-list/session-list.component.scss

@@ -0,0 +1,98 @@
+:host {
+  .content-area {
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
+  }
+
+  .content-area h1 {
+    color: #171034;
+    margin-bottom: 1rem;
+  }
+
+ table {
+    border-collapse: collapse;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    table-layout: fixed;
+    font-size: 20px;
+    line-height: 23px;
+    margin-bottom: 3rem;
+    gap: 10px;
+  }
+
+  table thead th:first-child {
+    width: 15%;
+  }
+
+  .session_table thead th span {
+    position: relative;
+    width: 98%;
+    margin-left: 13px;
+    display: block;
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      border-radius: 100px;
+      background: #35a4a3;
+      top: auto;
+      bottom: -9px;
+      width: 100%;
+      height: 6px;
+    }
+  }
+
+.td_time {
+    color: #6c757d;
+    font-size: 24px;
+    line-height: 31px;
+    font-weight: 500;
+  }
+
+  table th,
+  table td {
+    padding: 0.75rem;
+    vertical-align: top;
+    border-bottom: 1px solid #dee2e6;
+  }
+
+  a.speaker-link,
+  a.title {
+    color: #35a4a3;
+    text-decoration: none;
+    background-color: transparent;
+    cursor: pointer;
+  }
+
+  .test {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .session_table_small {
+    width: 100%;
+  }
+
+  .session_table_small .row .td_topic::before {
+    content: '';
+    display: block;
+    width: 5px;
+    height: 90%;
+    background-color: #35a4a3;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 100px;
+  }
+
+  .session_table_small .row .td_topic {
+    position: relative;
+    padding-left: 10px; 
+  }
+
+ a:hover {
+    color:var(--highlight-dark); 
+    text-decoration: underline;
+}
+}

src/app/components/session-list/session-list.component.spec.ts

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

src/app/components/session-list/session-list.component.ts

@@ -0,0 +1,35 @@
+// session-list.component.ts
+import { Component, OnInit } from "@angular/core";
+import { Observable } from "rxjs";
+import { SessionResults } from "src/app/interfaces/session.interface";
+import { fakePretalxTalks } from "src/app/mocks/APITalks";
+import { SessionService } from "src/app/services/session.service";
+
+@Component({
+  selector: "dd-session-list",
+  templateUrl: "./session-list.component.html",
+  styleUrls: ["./session-list.component.scss"]
+})
+
+export class SessionListComponent implements OnInit {
+
+  talks$: Observable<SessionResults[]>;
+  groupedSessions: SessionResults[][] = [];
+
+  constructor(private sessionService: SessionService) { }
+
+  ngOnInit(): void {
+    this.talks$ = this.sessionService.getAllSessions();
+    this.groupedSessions = this.sessionService.getGroupedSessions();
+  }
+
+  getSessionForRoom(group: SessionResults[], room: string): SessionResults {
+    const foundSession = group.find(session => session.slot.room === room);
+    if (foundSession) {
+      return foundSession;
+    } else {
+      return null;
+    }
+  }
+
+}

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>