From 9607bddddf1ce7f9f4b2e6d3fa59ea2a63555d31 Mon Sep 17 00:00:00 2001 From: Aleksandr Pronin Date: Wed, 16 Aug 2023 12:10:08 +0200 Subject: [PATCH 1/7] =?UTF-8?q?=E2=9C=A8=20added=20speakers=20and=20mock?= =?UTF-8?q?=20data?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app-routing.module.ts | 4 +- src/app/app.module.ts | 4 + .../headermenu/headermenu.component.html | 3 +- .../headermenu/headermenu.component.scss | 1 + src/app/components/speakers/APISpeackers.ts | 86 +++++++++++++++++++ .../components/speakers/speaker.interface.ts | 29 +++++++ .../speakers/speakers.component.html | 26 ++++++ .../speakers/speakers.component.scss | 82 ++++++++++++++++++ .../speakers/speakers.component.spec.ts | 21 +++++ .../components/speakers/speakers.component.ts | 37 ++++++++ .../pages/test-page/test-page.component.html | 4 + .../pages/test-page/test-page.component.scss | 7 ++ .../test-page/test-page.component.spec.ts | 21 +++++ .../pages/test-page/test-page.component.ts | 10 +++ src/app/services/speaker.service.ts | 72 ++++++++++++++++ src/app/style-components/button.scss | 10 ++- src/styles.scss | 1 + src/variables.scss | 2 + 18 files changed, 416 insertions(+), 4 deletions(-) create mode 100644 src/app/components/speakers/APISpeackers.ts create mode 100644 src/app/components/speakers/speaker.interface.ts create mode 100644 src/app/components/speakers/speakers.component.html create mode 100644 src/app/components/speakers/speakers.component.scss create mode 100644 src/app/components/speakers/speakers.component.spec.ts create mode 100644 src/app/components/speakers/speakers.component.ts create mode 100644 src/app/pages/test-page/test-page.component.html create mode 100644 src/app/pages/test-page/test-page.component.scss create mode 100644 src/app/pages/test-page/test-page.component.spec.ts create mode 100644 src/app/pages/test-page/test-page.component.ts create mode 100644 src/app/services/speaker.service.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index e7d59f4..74d38fb 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,9 +1,11 @@ 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'; const routes: Routes = [ - { path: 'page/:id', component: PageComponent } + { path: 'page/:id', component: PageComponent }, + { path: 'test_page', component: TestPageComponent } ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 251d80f..3466e37 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -13,6 +13,8 @@ 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'; @@ -25,6 +27,8 @@ import { GalleryComponent } from './gallery/gallery.component'; HeadermenuComponent, PageComponent, ButtonComponent, + TestPageComponent, + SpeakersComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/menus/headermenu/headermenu.component.html b/src/app/components/menus/headermenu/headermenu.component.html index 4a330cf..9e1a59a 100644 --- a/src/app/components/menus/headermenu/headermenu.component.html +++ b/src/app/components/menus/headermenu/headermenu.component.html @@ -1,4 +1,4 @@ -
+
@@ -39,6 +39,5 @@
-
\ No newline at end of file diff --git a/src/app/components/menus/headermenu/headermenu.component.scss b/src/app/components/menus/headermenu/headermenu.component.scss index d93f3d7..9f50cf6 100644 --- a/src/app/components/menus/headermenu/headermenu.component.scss +++ b/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; diff --git a/src/app/components/speakers/APISpeackers.ts b/src/app/components/speakers/APISpeackers.ts new file mode 100644 index 0000000..50020d5 --- /dev/null +++ b/src/app/components/speakers/APISpeackers.ts @@ -0,0 +1,86 @@ +import { APISpeackers, Answer, Availability, Speaker } from './speaker.interface' + +export const fakePretalx: APISpeackers = { + 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' } + ] + }, + ] +} + diff --git a/src/app/components/speakers/speaker.interface.ts b/src/app/components/speakers/speaker.interface.ts new file mode 100644 index 0000000..cee2ef1 --- /dev/null +++ b/src/app/components/speakers/speaker.interface.ts @@ -0,0 +1,29 @@ +export interface APISpeackers { + 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; + } \ No newline at end of file diff --git a/src/app/components/speakers/speakers.component.html b/src/app/components/speakers/speakers.component.html new file mode 100644 index 0000000..11f944e --- /dev/null +++ b/src/app/components/speakers/speakers.component.html @@ -0,0 +1,26 @@ +
+
+
+ + +
+
+ +
+
+
{{ speaker.name }}
+
+
+ +
+
+
+
+ + Weniger + +
+
+
\ No newline at end of file diff --git a/src/app/components/speakers/speakers.component.scss b/src/app/components/speakers/speakers.component.scss new file mode 100644 index 0000000..f7959af --- /dev/null +++ b/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; + } + } + } +} diff --git a/src/app/components/speakers/speakers.component.spec.ts b/src/app/components/speakers/speakers.component.spec.ts new file mode 100644 index 0000000..a3fe01b --- /dev/null +++ b/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; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [SpeakersComponent] + }); + fixture = TestBed.createComponent(SpeakersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/speakers/speakers.component.ts b/src/app/components/speakers/speakers.component.ts new file mode 100644 index 0000000..b676a34 --- /dev/null +++ b/src/app/components/speakers/speakers.component.ts @@ -0,0 +1,37 @@ + +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; + + constructor(private speakerService: SpeakerService) { } + + ngOnInit(): void { + this.allSpeakers$ = this.speakerService.getAllSpeakers() + } + + + toggleShowMore() { + this.showAll = !this.showAll; + } + + showSpeakerDetails(code: string): void { + console.log(code); + } + +} \ No newline at end of file diff --git a/src/app/pages/test-page/test-page.component.html b/src/app/pages/test-page/test-page.component.html new file mode 100644 index 0000000..d80acbe --- /dev/null +++ b/src/app/pages/test-page/test-page.component.html @@ -0,0 +1,4 @@ +
+

test-page works!

+ +
\ No newline at end of file diff --git a/src/app/pages/test-page/test-page.component.scss b/src/app/pages/test-page/test-page.component.scss new file mode 100644 index 0000000..191cb62 --- /dev/null +++ b/src/app/pages/test-page/test-page.component.scss @@ -0,0 +1,7 @@ +.test-container { + align-items: center; + justify-content: center; + height: 200px; + width: 100%; + +} \ No newline at end of file diff --git a/src/app/pages/test-page/test-page.component.spec.ts b/src/app/pages/test-page/test-page.component.spec.ts new file mode 100644 index 0000000..8efa59d --- /dev/null +++ b/src/app/pages/test-page/test-page.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TestPageComponent } from './test-page.component'; + +describe('TestPageComponent', () => { + let component: TestPageComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [TestPageComponent] + }); + fixture = TestBed.createComponent(TestPageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/test-page/test-page.component.ts b/src/app/pages/test-page/test-page.component.ts new file mode 100644 index 0000000..7213113 --- /dev/null +++ b/src/app/pages/test-page/test-page.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-test-page', + templateUrl: './test-page.component.html', + styleUrls: ['./test-page.component.scss'] +}) +export class TestPageComponent { + +} diff --git a/src/app/services/speaker.service.ts b/src/app/services/speaker.service.ts new file mode 100644 index 0000000..d64ea0b --- /dev/null +++ b/src/app/services/speaker.service.ts @@ -0,0 +1,72 @@ +import { Injectable } from "@angular/core"; +import { HttpClient } from "@angular/common/http"; +import { Observable, of } from "rxjs"; +import { Answer, Availability, Speaker } from "../components/speakers/speaker.interface"; +import { fakePretalx } from "../components/speakers/APISpeackers"; + + +@Injectable({ + providedIn: "root" +}) +export class SpeakerService { + + private _url: string = "pretax"; + + constructor(private http: HttpClient) { }; + + // Mapping function for Availability + mapAvailability = (apiAvailability: any): Availability => ({ + id: apiAvailability.id, + start: apiAvailability.start, + end: apiAvailability.end, + allDay: apiAvailability.allDay + }); + + // Mapping function for Answer + mapAnswer = (apiAnswer: any): Answer => ({ + question: apiAnswer.question, + answer: apiAnswer.answer + }); + + // Mapping function for Speaker + mapSpeaker = (apiSpeaker: any): Speaker => { + + //may need to be checked upon receipt of the object from the server + // const availabilities = Array.isArray(apiSpeaker.availabilities) + // ? apiSpeaker.availabilities.map(this.mapAvailability) + // : []; + // const answers = Array.isArray(apiSpeaker.answers) + // ? apiSpeaker.answers.map(this.mapAnswer) + // : []; + // return { + // availabilities: availabilities, + // answers: answers + + return { + code: apiSpeaker.code, + name: apiSpeaker.name, + biography: apiSpeaker.biography, + submissions: apiSpeaker.submissions, + avatar: apiSpeaker.avatar, + email: apiSpeaker.email, + availabilities: apiSpeaker.availabilities.map(this.mapAvailability), + answers: apiSpeaker.answers.map(this.mapAnswer) + }; + + }; + + mappedSpeakers: Speaker[] = fakePretalx.results.map(this.mapSpeaker); + + getAllSpeakers = (): Observable => { + // return this.http.get(this._url); + return of(this.mappedSpeakers); + }; + + getSpeakerDetails = (code: string): Observable => { + // return this.http.get(this._url + "/" + id); + const speaker = this.mappedSpeakers.find(s => s.code === code); + return of(speaker); + }; + + } + diff --git a/src/app/style-components/button.scss b/src/app/style-components/button.scss index 2c95e66..c940c9c 100644 --- a/src/app/style-components/button.scss +++ b/src/app/style-components/button.scss @@ -27,4 +27,12 @@ font-size: 1.75rem; line-height: 2rem; } - } \ No newline at end of file + + &.outline { + background: transparent; + color: var(--button-border-color); + padding-right: 3rem; + border: 3px solid; + font-weight: bold; + } +} \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 2353045..ab93560 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -7,6 +7,7 @@ @import "./app/style-components/pricing-table.scss"; @import "./app/style-components/teaser.scss"; @import "./app/style-components/button.scss"; +@import "./app/components/speakers/speakers.component.scss"; /* Source Sans Pro Regular */ @font-face { diff --git a/src/variables.scss b/src/variables.scss index 29935ba..fd13819 100644 --- a/src/variables.scss +++ b/src/variables.scss @@ -24,4 +24,6 @@ --header-font-color: #ffffffff; --package-cost-gradient-start: #40d5c5; --package-cost-gradient-end: #00b6a3; + --fotos-backround-gardient-start: #00b6a3; + --fotos-backround-gardient-end: #14897d; } \ No newline at end of file From 8f52a58ff4e83ec122e1a16c9483d8204ecaaca7 Mon Sep 17 00:00:00 2001 From: Aleksandr Pronin Date: Wed, 16 Aug 2023 12:23:11 +0200 Subject: [PATCH 2/7] =?UTF-8?q?=E2=9C=8F=20Fixing=20typos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/speakers/APISpeakers.ts | 86 +++++++++++++++++++ .../components/speakers/speaker.interface.ts | 2 +- src/app/services/speaker.service.ts | 2 +- 3 files changed, 88 insertions(+), 2 deletions(-) create mode 100644 src/app/components/speakers/APISpeakers.ts diff --git a/src/app/components/speakers/APISpeakers.ts b/src/app/components/speakers/APISpeakers.ts new file mode 100644 index 0000000..ad4f1d5 --- /dev/null +++ b/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' } + ] + }, + ] +} + diff --git a/src/app/components/speakers/speaker.interface.ts b/src/app/components/speakers/speaker.interface.ts index cee2ef1..4ac9f40 100644 --- a/src/app/components/speakers/speaker.interface.ts +++ b/src/app/components/speakers/speaker.interface.ts @@ -1,4 +1,4 @@ -export interface APISpeackers { +export interface APISpeakers { count: number; next: null | string; previous: null | string; diff --git a/src/app/services/speaker.service.ts b/src/app/services/speaker.service.ts index d64ea0b..187fac8 100644 --- a/src/app/services/speaker.service.ts +++ b/src/app/services/speaker.service.ts @@ -2,7 +2,7 @@ import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Observable, of } from "rxjs"; import { Answer, Availability, Speaker } from "../components/speakers/speaker.interface"; -import { fakePretalx } from "../components/speakers/APISpeackers"; +import { fakePretalx } from "../components/speakers/APISpeakers"; @Injectable({ From 7dd8ab841cb0c570cc6f7750815349d08aac0d89 Mon Sep 17 00:00:00 2001 From: Aleksandr Pronin Date: Wed, 16 Aug 2023 12:24:45 +0200 Subject: [PATCH 3/7] =?UTF-8?q?=E2=9C=8F=20=20Fixing=20typos?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/components/speakers/APISpeackers.ts | 86 --------------------- 1 file changed, 86 deletions(-) delete mode 100644 src/app/components/speakers/APISpeackers.ts diff --git a/src/app/components/speakers/APISpeackers.ts b/src/app/components/speakers/APISpeackers.ts deleted file mode 100644 index 50020d5..0000000 --- a/src/app/components/speakers/APISpeackers.ts +++ /dev/null @@ -1,86 +0,0 @@ -import { APISpeackers, Answer, Availability, Speaker } from './speaker.interface' - -export const fakePretalx: APISpeackers = { - 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' } - ] - }, - ] -} - From 5ba64dfe06b9cd2c2d60538d176a947c3ae42313 Mon Sep 17 00:00:00 2001 From: Aleksandr Pronin Date: Mon, 21 Aug 2023 12:51:49 +0200 Subject: [PATCH 4/7] =?UTF-8?q?=F0=9F=9A=91=20hotfix=20according=20to=20co?= =?UTF-8?q?mments=20&=20=E2=9C=A8=20add=20spinner?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/app-routing.module.ts | 4 +- src/app/app.module.ts | 4 ++ .../speakers/speakers.component.html | 44 +++++++------ .../components/speakers/speakers.component.ts | 7 +- .../components/spinner/spinner.component.html | 3 + .../components/spinner/spinner.component.scss | 29 +++++++++ .../spinner/spinner.component.spec.ts | 21 ++++++ .../components/spinner/spinner.component.ts | 10 +++ .../speaker-details.component.html | 1 + .../speaker-details.component.scss | 0 .../speaker-details.component.spec.ts | 21 ++++++ .../speaker-details.component.ts | 10 +++ src/app/services/speaker.service.ts | 64 ++++++++----------- src/styles.scss | 1 - 14 files changed, 159 insertions(+), 60 deletions(-) create mode 100644 src/app/components/spinner/spinner.component.html create mode 100644 src/app/components/spinner/spinner.component.scss create mode 100644 src/app/components/spinner/spinner.component.spec.ts create mode 100644 src/app/components/spinner/spinner.component.ts create mode 100644 src/app/pages/speaker-details/speaker-details.component.html create mode 100644 src/app/pages/speaker-details/speaker-details.component.scss create mode 100644 src/app/pages/speaker-details/speaker-details.component.spec.ts create mode 100644 src/app/pages/speaker-details/speaker-details.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 74d38fb..745acc5 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,10 +2,12 @@ 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: 'test_page', component: TestPageComponent } + { path: 'test_page', component: TestPageComponent }, + { path: 'speaker-details/:speakerCode', component: SpeakerDetailsComponent } ]; @NgModule({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 3466e37..a55cd7b 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,8 @@ 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'; @@ -29,6 +31,8 @@ import { SpeakersComponent } from './components/speakers/speakers.component'; ButtonComponent, TestPageComponent, SpeakersComponent, + SpinnerComponent, + SpeakerDetailsComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/speakers/speakers.component.html b/src/app/components/speakers/speakers.component.html index 11f944e..16fbe8d 100644 --- a/src/app/components/speakers/speakers.component.html +++ b/src/app/components/speakers/speakers.component.html @@ -1,26 +1,30 @@ -
-
-
+ +
+
+
- -
-
- -
-
-
{{ speaker.name }}
+
+
+ +
+
+
{{ speaker.name }}
+
-
+
-
-
-
- - Weniger - +
+
+ + Weniger + +
-
\ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/app/components/speakers/speakers.component.ts b/src/app/components/speakers/speakers.component.ts index b676a34..8fa82b6 100644 --- a/src/app/components/speakers/speakers.component.ts +++ b/src/app/components/speakers/speakers.component.ts @@ -22,7 +22,12 @@ export class SpeakersComponent implements OnInit { constructor(private speakerService: SpeakerService) { } ngOnInit(): void { - this.allSpeakers$ = this.speakerService.getAllSpeakers() + + //todo del setinterval + //this.allSpeakers$ = this.speakerService.getAllSpeakers() + setInterval(() => { + this.allSpeakers$ = this.speakerService.getAllSpeakers() + }, 1000); } diff --git a/src/app/components/spinner/spinner.component.html b/src/app/components/spinner/spinner.component.html new file mode 100644 index 0000000..6471006 --- /dev/null +++ b/src/app/components/spinner/spinner.component.html @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/src/app/components/spinner/spinner.component.scss b/src/app/components/spinner/spinner.component.scss new file mode 100644 index 0000000..43ad870 --- /dev/null +++ b/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); + } + } +} diff --git a/src/app/components/spinner/spinner.component.spec.ts b/src/app/components/spinner/spinner.component.spec.ts new file mode 100644 index 0000000..2759278 --- /dev/null +++ b/src/app/components/spinner/spinner.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SpinnerComponent } from './spinner.component'; + +describe('SpinnerComponent', () => { + let component: SpinnerComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [SpinnerComponent] + }); + fixture = TestBed.createComponent(SpinnerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/spinner/spinner.component.ts b/src/app/components/spinner/spinner.component.ts new file mode 100644 index 0000000..beed2a2 --- /dev/null +++ b/src/app/components/spinner/spinner.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'dd-spinner', + templateUrl: './spinner.component.html', + styleUrls: ['./spinner.component.scss'] +}) +export class SpinnerComponent { + +} diff --git a/src/app/pages/speaker-details/speaker-details.component.html b/src/app/pages/speaker-details/speaker-details.component.html new file mode 100644 index 0000000..326ede4 --- /dev/null +++ b/src/app/pages/speaker-details/speaker-details.component.html @@ -0,0 +1 @@ +

speaker-details works!

diff --git a/src/app/pages/speaker-details/speaker-details.component.scss b/src/app/pages/speaker-details/speaker-details.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/speaker-details/speaker-details.component.spec.ts b/src/app/pages/speaker-details/speaker-details.component.spec.ts new file mode 100644 index 0000000..9db1a8e --- /dev/null +++ b/src/app/pages/speaker-details/speaker-details.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { SpeakerDetailsComponent } from './speaker-details.component'; + +describe('SpeakerDetailsComponent', () => { + let component: SpeakerDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(() => { + TestBed.configureTestingModule({ + declarations: [SpeakerDetailsComponent] + }); + fixture = TestBed.createComponent(SpeakerDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/speaker-details/speaker-details.component.ts b/src/app/pages/speaker-details/speaker-details.component.ts new file mode 100644 index 0000000..7719357 --- /dev/null +++ b/src/app/pages/speaker-details/speaker-details.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-speaker-details', + templateUrl: './speaker-details.component.html', + styleUrls: ['./speaker-details.component.scss'] +}) +export class SpeakerDetailsComponent { + +} diff --git a/src/app/services/speaker.service.ts b/src/app/services/speaker.service.ts index 187fac8..c0d869c 100644 --- a/src/app/services/speaker.service.ts +++ b/src/app/services/speaker.service.ts @@ -11,11 +11,14 @@ import { fakePretalx } from "../components/speakers/APISpeakers"; export class SpeakerService { private _url: string = "pretax"; + private mappedSpeakers: Speaker[] = []; - constructor(private http: HttpClient) { }; + constructor(private http: HttpClient) { + this.mappedSpeakers = fakePretalx.results.map(this.mapSpeaker); + }; // Mapping function for Availability - mapAvailability = (apiAvailability: any): Availability => ({ + private mapAvailability = (apiAvailability: any): Availability => ({ id: apiAvailability.id, start: apiAvailability.start, end: apiAvailability.end, @@ -23,50 +26,37 @@ export class SpeakerService { }); // Mapping function for Answer - mapAnswer = (apiAnswer: any): Answer => ({ + private mapAnswer = (apiAnswer: any): Answer => ({ question: apiAnswer.question, answer: apiAnswer.answer }); // Mapping function for Speaker - mapSpeaker = (apiSpeaker: any): Speaker => { - - //may need to be checked upon receipt of the object from the server - // const availabilities = Array.isArray(apiSpeaker.availabilities) - // ? apiSpeaker.availabilities.map(this.mapAvailability) - // : []; - // const answers = Array.isArray(apiSpeaker.answers) - // ? apiSpeaker.answers.map(this.mapAnswer) - // : []; - // return { - // availabilities: availabilities, - // answers: answers - + private mapSpeaker = (apiSpeaker: any): Speaker => { return { - code: apiSpeaker.code, - name: apiSpeaker.name, - biography: apiSpeaker.biography, - submissions: apiSpeaker.submissions, - avatar: apiSpeaker.avatar, - email: apiSpeaker.email, - availabilities: apiSpeaker.availabilities.map(this.mapAvailability), - answers: apiSpeaker.answers.map(this.mapAnswer) - }; - + code: apiSpeaker.code, + name: apiSpeaker.name, + biography: apiSpeaker.biography, + submissions: apiSpeaker.submissions, + avatar: apiSpeaker.avatar, + email: apiSpeaker.email, + availabilities: apiSpeaker.availabilities.map(this.mapAvailability), + answers: apiSpeaker.answers.map(this.mapAnswer) }; - mappedSpeakers: Speaker[] = fakePretalx.results.map(this.mapSpeaker); + }; - getAllSpeakers = (): Observable => { - // return this.http.get(this._url); - return of(this.mappedSpeakers); - }; - getSpeakerDetails = (code: string): Observable => { - // return this.http.get(this._url + "/" + id); - const speaker = this.mappedSpeakers.find(s => s.code === code); - return of(speaker); - }; + public getAllSpeakers = (): Observable => { + // return this.http.get(this._url); + return of(this.mappedSpeakers); + }; + + public getSpeakerDetails = (code: string): Observable => { + // return this.http.get(this._url + "/" + id); + const speaker = this.mappedSpeakers.find(s => s.code === code); + return of(speaker); + }; - } +} diff --git a/src/styles.scss b/src/styles.scss index ab93560..2353045 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -7,7 +7,6 @@ @import "./app/style-components/pricing-table.scss"; @import "./app/style-components/teaser.scss"; @import "./app/style-components/button.scss"; -@import "./app/components/speakers/speakers.component.scss"; /* Source Sans Pro Regular */ @font-face { From 3d68c7ed51dae173ce1e492032364a1402f49123 Mon Sep 17 00:00:00 2001 From: Aleksandr Pronin Date: Tue, 29 Aug 2023 08:44:56 +0200 Subject: [PATCH 5/7] =?UTF-8?q?=E2=9C=A8=20sessions=20components=20add=20/?= =?UTF-8?q?=20service/mock?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../speaker-details.component.scss | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/src/app/pages/speaker-details/speaker-details.component.scss b/src/app/pages/speaker-details/speaker-details.component.scss index e69de29..1fafa76 100644 --- a/src/app/pages/speaker-details/speaker-details.component.scss +++ b/src/app/pages/speaker-details/speaker-details.component.scss @@ -0,0 +1,27 @@ +:host { + .info { + padding-top: 40px; + padding-bottom: 40px; + text-align: left; + } + .col-highlight { + background: linear-gradient( + 14deg, + var(--fotos-backround-gardient-start) 0%, + var(--fotos-backround-gardient-end) 100% + ); + color: #ffffff; + } + .content-sidebar img { + max-width: 100%; + } + h3 { + padding-top: 1rem; + } + .session-link { + color: #35a4a3; + text-decoration: none; + background-color: transparent; + cursor: pointer; + } +} From 293fe9049c650bbca61e42be0ec1200f0d625d6b Mon Sep 17 00:00:00 2001 From: Aleksandr Pronin Date: Tue, 29 Aug 2023 08:48:15 +0200 Subject: [PATCH 6/7] =?UTF-8?q?=E2=9C=A8=20add=20session=20copm/service/mo?= =?UTF-8?q?ck?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 + src/app/app.module.ts | 2 + .../headermenu/headermenu.component.html | 4 +- .../session-list/session-list.component.html | 66 +++++++++ .../session-list/session-list.component.scss | 98 +++++++++++++ .../session-list.component.spec.ts | 21 +++ .../session-list/session-list.component.ts | 35 +++++ .../components/speakers/speakers.component.ts | 2 +- src/app/interfaces/session.interface.ts | 60 ++++++++ .../speaker.interface.ts | 0 .../speakers => mocks}/APISpeakers.ts | 18 +-- src/app/mocks/APITalks.ts | 132 ++++++++++++++++++ .../speaker-details.component.html | 35 ++++- .../speaker-details.component.ts | 22 +++ .../pages/test-page/test-page.component.html | 1 + src/app/services/session.service.ts | 93 ++++++++++++ src/app/services/speaker.service.ts | 6 +- 17 files changed, 582 insertions(+), 16 deletions(-) create mode 100644 .vscode/settings.json create mode 100644 src/app/components/session-list/session-list.component.html create mode 100644 src/app/components/session-list/session-list.component.scss create mode 100644 src/app/components/session-list/session-list.component.spec.ts create mode 100644 src/app/components/session-list/session-list.component.ts create mode 100644 src/app/interfaces/session.interface.ts rename src/app/{components/speakers => interfaces}/speaker.interface.ts (100%) rename src/app/{components/speakers => mocks}/APISpeakers.ts (79%) create mode 100644 src/app/mocks/APITalks.ts create mode 100644 src/app/services/session.service.ts diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..5dabb89 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "sarif-viewer.connectToGithubCodeScanning": "off" +} \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a55cd7b..338af47 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -17,6 +17,7 @@ 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'; @@ -33,6 +34,7 @@ import { SpeakerDetailsComponent } from './pages/speaker-details/speaker-details SpeakersComponent, SpinnerComponent, SpeakerDetailsComponent, + SessionListComponent, ], imports: [ BrowserModule, diff --git a/src/app/components/menus/headermenu/headermenu.component.html b/src/app/components/menus/headermenu/headermenu.component.html index 9e1a59a..cdf972e 100644 --- a/src/app/components/menus/headermenu/headermenu.component.html +++ b/src/app/components/menus/headermenu/headermenu.component.html @@ -5,14 +5,14 @@ Dev Day
-
+
-
+