Merge pull request #21 from DominikNoga/Feature/register-page

Feature/register page

ISD-conference-web-app-frontend/src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { RegisterPageComponent } from './pages/register-page/register-page.compo
 import { TracksPageComponent } from './pages/tracks-page/tracks-page.component';
 import { VisaRequirementsPageComponent } from './pages/visa-requirements-page/visa-requirements-page.component';
 import { TravelInformationPageComponent } from './pages/travel-information-page/travel-information-page.component';
+import { KeynotesPageComponent } from './pages/keynotes-page/keynotes-page.component';
 
 const routes: Routes = [
   { path: '', component: HomePageComponent },
@@ -20,6 +21,7 @@ const routes: Routes = [
   { path: 'travel-information', component: TravelInformationPageComponent},
   { path: 'register', component: RegisterPageComponent},
   { path: 'tracks', component: TracksPageComponent},
+  { path: 'keynotes', component: KeynotesPageComponent},
 ];
 
 @NgModule({

ISD-conference-web-app-frontend/src/app/components/isd-ui/footer/footer.component.html

@@ -21,6 +21,7 @@
                 <a routerLink="/call-for-papers" class="footer-link">Call for Papers</a>
                 <a routerLink="/register" class="footer-link">Register</a>
                 <a routerLink="/committees" class="footer-link">Committees</a>
+                <a routerLink="/keynotes" class="footer-link">Keynotes</a>
             </div>
             <div class="isd-about-links">
                 <strong class="footer-section-header">ABOUT ISD</strong>

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/Register-page/addbutton/addbutton.component.html

@@ -1,3 +1,4 @@
 <div class="wraper">
-    <button class="btn fourth">Add to card</button>
+    <p>Contact us to finalize the purchase at mail&#64;pg.edu.pl</p>
+    <!-- <button class="btn fourth">Add to card</button> -->
 </div>

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/Register-page/addbutton/addbutton.component.scss

@@ -8,6 +8,12 @@ $turquoise: #1abc9c;
 
 .wrapper {
   text-align: center;
+
+}
+p
+{
+  color: #fff;
+
 }
 
 h1 {

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/Register-page/ticket/ticket.component.scss

@@ -57,9 +57,13 @@ ul {
 
 .until
 {
-    margin-left: 50%;
-    margin-right: 10%;
+    margin-left: auto;
+    margin-right: 25%;
+    margin-top: auto;
+    width: 50%;
     text-align: center;
+    border: 0.5mm solid rgb(92,83,54);
+
     @media screen and (max-width: 600px) 
     {
         margin-left: 0;
@@ -84,8 +88,8 @@ ul {
 select {
     width: 40%;
     padding: 10px;
-    margin-right: 10%;
-    margin-left: 50%;
+    margin-right: auto;
+    margin-left: auto;
     margin-top: 3%;
     margin-bottom: 5%;
     border: 1px solid #ccc;
@@ -163,8 +167,8 @@ s.straight::before, strike.straight::before{transform: rotate(0deg);left:-1%;wid
 }
 .moredis
 {
-    padding-top: 5%;
-    padding-bottom: 5%;
+    padding-top: 2%;
+    padding-bottom: 2%;
     align-items: center;
     @media screen and (max-width: 600px) 
     {

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/keynote/keynote.component.html

@@ -0,0 +1,20 @@
+<div class="person" [ngClass]="{'additional-info-visible': additionalInfoVisible}">
+    <div class="items-container">
+        <div class="left">
+
+            <img src="assets/mock_chair_img/{{person.image}}" alt="Person Image">
+
+            <!-- {{this.toggleCountService.getNumberOfToggles()}} -->
+            <!-- {{this.toggleCountService.getNumberOfToggles()}} -->
+            <div class="speaker">{{person.name}}</div>
+            <div class="from">{{person.from}}</div>
+            <div class="title2">{{person.title}}</div>
+            <button class="show-info-btn" (click)="toggleAdditionalInfo()">More Info</button>
+        </div>
+         <div class="right" *ngIf="additionalInfoVisible"> 
+            <div class="abstract"><b>Abstract:</b> {{person.abstract}}</div>
+            <br>
+            <div class="about"><b>About the Speaker: </b>{{person.about}}</div>
+        </div>
+    </div>
+</div>

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/keynote/keynote.component.scss

@@ -0,0 +1,91 @@
+@import '../../../styles/isd-variables.scss';
+@import '../../../styles/isd-mixins.scss';
+@import '../../../pages/keynotes-page/keynotes-page.component.scss';
+
+.person {
+  max-width: $max-content-width;
+  padding-top: 2em;
+  padding-bottom: 2em;
+  text-align: center;
+  min-width: 300px;
+  height: 500px;
+  // border: 5px solid black;
+}
+.left {
+  width: 300px
+}
+.right {
+  text-align: left;
+  flex: 1;
+}
+
+.items-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 94%; // Dodaj to, aby kontener odpowiednio reagował na zmiany szerokościa
+  margin-left: auto;
+  margin-right:  auto;
+}
+
+@media screen and (max-width: 1000px) {
+  .items-container {
+    flex-direction: column;
+
+  }
+  .right {
+    margin-top: 4rem;
+    margin-left: minmax(20px,3%);
+  }
+}
+
+.additional-info {
+  max-width: $max-content-width;
+}
+
+.person img {
+  max-width: auto;
+  max-height: 200px;
+  border-radius: 10%;
+}
+
+.show-info-btn {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  padding: 5px 10px;
+  background-color: #ff002b;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.additional-info {
+  margin-top: 10px;
+}
+
+.speaker {
+  display: block;
+  font-size: 2em;
+  margin-top: 0.5em;
+  margin-left: 0;
+  margin-right: 0;
+  font-weight: 400;
+  font-family: veneer-three;
+  height: 40px;
+}
+
+.from {
+  font-size: 1em;
+  margin-bottom: 0.5em;
+  height: 30px;
+}
+
+.title2 {
+  font-family: veneer-two;
+  font-size: 1.5em;
+  font-weight: 500;
+  max-height: 100px;
+  min-height: 80px;
+}

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/keynote/keynote.component.spec.ts

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

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/keynote/keynote.component.ts

@@ -0,0 +1,61 @@
+import { Component, OnInit, Input, ElementRef, Renderer2 } from '@angular/core';
+import { ToggleCountService } from './toggle-count.service.service';
+import { keynote } from 'src/app/interfaces/keynote';
+
+@Component({
+  selector: 'isd-keynote',
+  templateUrl: './keynote.component.html',
+  styleUrls: ['./keynote.component.scss']
+})
+export class KeynoteComponent implements OnInit {
+  public additionalInfoVisible = false;
+  @Input() person!: keynote;
+
+  temporder!: number;
+
+  constructor(
+    private elementRef: ElementRef,
+    private renderer: Renderer2,
+    public toggleCountService: ToggleCountService
+  ) { }
+
+  ngOnInit(): void {
+    this.temporder = this.person.order; 
+  }
+
+  toggleAdditionalInfo(): void {
+    const hostElement = this.elementRef.nativeElement;
+    const parentElement = hostElement.parentNode as HTMLElement;
+    const order = this.person.order;
+
+    if (window.innerWidth > 1000) {
+      if (!this.additionalInfoVisible) {
+        this.renderer.setStyle(hostElement, 'grid-column', '1 / -1');
+
+        if (order % 3 === 2 || order % 3 === 1) {
+          // Naprawić buda przy więcej niż 3 otwartych dodatkowych informacji
+          parentElement.insertBefore(hostElement, parentElement.children[this.closestdevideby3(this.temporder) + this.toggleCountService.getNumberOfToggles()] );
+        }
+        this.toggleCountService.incrementToggleCount();
+      } else {
+        this.toggleCountService.decrementToggleCount();
+        parentElement.insertBefore(hostElement, parentElement.children[order + 1]);
+        this.renderer.removeStyle(hostElement, 'grid-column');
+      }
+      console.log("current order: " + order);
+    }
+
+    this.additionalInfoVisible = !this.additionalInfoVisible;
+  }
+
+  closestdevideby3(n: number): number {
+    const reszta = n % 3;
+    if (reszta === 0) {
+      return n;
+    } else if (reszta === 1) {
+      return n - 1;
+    } else {
+      return n - 2;
+    }
+  }
+}

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/keynote/toggle-count.service.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ToggleCountService} from './toggle-count.service.service';
+
+describe('ToggleCount.ServiceService', () => {
+  let service: ToggleCountService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ToggleCountService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/keynote/toggle-count.service.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ToggleCountService {
+  private numberOfToggles = 0;
+
+  constructor() { }
+
+  getNumberOfToggles(): number {
+    return this.numberOfToggles;
+  }
+
+  incrementToggleCount(): void {
+    this.numberOfToggles++;
+  }
+
+  decrementToggleCount(): void {
+    this.numberOfToggles--;
+  }
+}

ISD-conference-web-app-frontend/src/app/components/pagesHelperComponents/pagesHelperComponents.module.ts

@@ -7,17 +7,21 @@ import { HomePageComponents } from "./home-page/home-page.module";
 import { UiComponentsModule } from "../isd-ui/components.module";
 import { RegisterPageComponents} from "./Register-page/register-page.module";
 import { CommitteesPageComponents } from "./committees-page/committees-page.module";
+import { KeynoteComponent } from './keynote/keynote.component';
 
 
 @NgModule({
     declarations: [
 
+
+    KeynoteComponent
   ],
     exports: [
         HistoryPageComponents,
         HomePageComponents,
         RegisterPageComponents,
-        CommitteesPageComponents
+        CommitteesPageComponents,
+        KeynoteComponent
     ],
     imports: [
         CommonModule,

ISD-conference-web-app-frontend/src/app/interfaces/keynote.ts

@@ -0,0 +1,9 @@
+export interface keynote {
+    order: number;
+    name: string;
+    image: string;
+    from: string;
+    title: string;
+    abstract: string;
+    about: string;
+  }

ISD-conference-web-app-frontend/src/app/pages/keynotes-page/keynotes-page.component.html

@@ -0,0 +1,6 @@
+<span class="custom-header">ISD Keynotes</span>
+<div class="container">
+  <isd-keynote *ngFor="let keynote of keynotes" [person]="keynote"></isd-keynote>
+</div>
+
+