From 47c494653c07211550acdf41157f79c7df8f001c Mon Sep 17 00:00:00 2001 From: Patrick Mueller Date: Fri, 2 Sep 2022 17:55:19 +0200 Subject: [PATCH] Adding profile component (de)activation logic --- src/app/app-routing.module.ts | 4 +- src/app/app.component.ts | 2 +- src/app/app.module.ts | 20 +++++----- .../components/header/header.component.html | 2 +- .../header/header.component.spec.ts | 32 ++++++++-------- src/app/components/header/header.component.ts | 6 ++- .../components/profile/profile.component.html | 10 ++++- .../components/profile/profile.component.scss | 7 +++- .../profile/profile.component.spec.ts | 32 ++++++++-------- .../components/profile/profile.component.ts | 37 +++++++++++++++---- src/app/models/game.ts | 2 +- .../gamenight/gamenight.component.spec.ts | 32 ++++++++-------- .../pages/gamenight/gamenight.component.ts | 15 ++++---- src/app/pages/home/home.component.spec.ts | 32 ++++++++-------- src/app/pages/home/home.component.ts | 25 +++++++------ src/app/pages/stats/stats.component.spec.ts | 32 ++++++++-------- src/app/pages/stats/stats.component.ts | 15 ++++---- src/app/services/storage.service.ts | 2 +- 18 files changed, 174 insertions(+), 133 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 7bc7e30..edcd738 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,8 +1,8 @@ import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; -import { GamenightComponent } from './pages/gamenight/gamenight.component'; +import {GamenightComponent} from './pages/gamenight/gamenight.component'; import {HomeComponent} from './pages/home/home.component'; -import { StatsComponent } from './pages/stats/stats.component'; +import {StatsComponent} from './pages/stats/stats.component'; const routes: Routes = [ {path: '', component: HomeComponent, pathMatch: 'full'}, diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 69bc0dc..6e84894 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -1,4 +1,4 @@ -import {Component, OnDestroy, OnInit} from '@angular/core'; +import {Component} from '@angular/core'; import {Player} from './models/player'; @Component({ diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f8fc711..f37acad 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,20 +3,20 @@ import {BrowserModule} from '@angular/platform-browser'; import {AppRoutingModule} from './app-routing.module'; import {AppComponent} from './app.component'; -import { HomeComponent } from './pages/home/home.component'; -import { StatsComponent } from './pages/stats/stats.component'; -import { GamenightComponent } from './pages/gamenight/gamenight.component'; -import { HeaderComponent } from './components/header/header.component'; -import { ProfileComponent } from './components/profile/profile.component'; +import {HomeComponent} from './pages/home/home.component'; +import {StatsComponent} from './pages/stats/stats.component'; +import {GamenightComponent} from './pages/gamenight/gamenight.component'; +import {HeaderComponent} from './components/header/header.component'; +import {ProfileComponent} from './components/profile/profile.component'; @NgModule({ declarations: [ AppComponent, - HomeComponent, - StatsComponent, - GamenightComponent, - HeaderComponent, - ProfileComponent + HomeComponent, + StatsComponent, + GamenightComponent, + HeaderComponent, + ProfileComponent ], imports: [ BrowserModule, diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index e3c6481..5ff69cf 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -4,5 +4,5 @@

Paddy

User Icon - + diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts index 1fd30b4..e3fe6c6 100644 --- a/src/app/components/header/header.component.spec.ts +++ b/src/app/components/header/header.component.spec.ts @@ -1,23 +1,23 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { HeaderComponent } from './header.component'; +import {HeaderComponent} from './header.component'; describe('HeaderComponent', () => { - let component: HeaderComponent; - let fixture: ComponentFixture; + let component: HeaderComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ HeaderComponent ] - }) - .compileComponents(); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [HeaderComponent] + }) + .compileComponents(); - fixture = TestBed.createComponent(HeaderComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + fixture = TestBed.createComponent(HeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it('should create', () => { + expect(component).toBeTruthy(); + }); }); diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 9354a2a..e8023b3 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -16,8 +16,10 @@ export class HeaderComponent implements OnInit { } openProfile(): void { - console.log('Called'); - this.showProfilePopover = !this.showProfilePopover; + this.showProfilePopover = true; } + closeProfile(): void { + this.showProfilePopover = false; + } } diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 4b701ec..d8e820c 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -1,3 +1,11 @@
-

Test

+
+

Hello, Paddy!

+

You're successfully logged in.

+

Your id is: 1

+
+
+

Not logged in

+

Please log in to continue

+
diff --git a/src/app/components/profile/profile.component.scss b/src/app/components/profile/profile.component.scss index fe14b44..e5f3f00 100644 --- a/src/app/components/profile/profile.component.scss +++ b/src/app/components/profile/profile.component.scss @@ -8,6 +8,11 @@ color: $text; background-color: $secondary; width: 15em; - height: 20em; border-radius: 1em; + padding: 1em; +} + +h2.heading { + text-align: center; + font-weight: bold; } diff --git a/src/app/components/profile/profile.component.spec.ts b/src/app/components/profile/profile.component.spec.ts index 246039d..8217ee3 100644 --- a/src/app/components/profile/profile.component.spec.ts +++ b/src/app/components/profile/profile.component.spec.ts @@ -1,23 +1,23 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { ProfileComponent } from './profile.component'; +import {ProfileComponent} from './profile.component'; describe('ProfileComponent', () => { - let component: ProfileComponent; - let fixture: ComponentFixture; + let component: ProfileComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ ProfileComponent ] - }) - .compileComponents(); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ProfileComponent] + }) + .compileComponents(); - fixture = TestBed.createComponent(ProfileComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + fixture = TestBed.createComponent(ProfileComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it('should create', () => { + expect(component).toBeTruthy(); + }); }); diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index 29ea4ff..4b16191 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -1,15 +1,38 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, ElementRef, EventEmitter, HostListener, OnInit, Output} from '@angular/core'; @Component({ - selector: 'app-profile', - templateUrl: './profile.component.html', - styleUrls: ['./profile.component.scss'] + selector: 'app-profile', + templateUrl: './profile.component.html', + styleUrls: ['./profile.component.scss'] }) export class ProfileComponent implements OnInit { - constructor() { } + initialClick = true; + @Output() showProfilePopoverChange = new EventEmitter(); - ngOnInit(): void { - } + isLoggedIn = true; + + constructor(private eRef: ElementRef) { + } + + ngOnInit(): void { + } + + /** + * Used to close Profile component when user clicks outside the component + * @param event + */ + @HostListener('document:click', ['$event']) + @HostListener('document:touchstart', ['$event']) + handleOutsideClick(event: any) { + if (this.initialClick) { + this.initialClick = false; + return; + } + + if (!this.eRef.nativeElement.contains(event.target)) { + this.showProfilePopoverChange.emit(false); + } + } } diff --git a/src/app/models/game.ts b/src/app/models/game.ts index 9c43760..e4ec73f 100644 --- a/src/app/models/game.ts +++ b/src/app/models/game.ts @@ -1,6 +1,6 @@ import {Player} from './player'; import {Announcement} from './enums/announcement'; -import { Solo } from './enums/solo'; +import {Solo} from './enums/solo'; export interface Game { gameId: number; diff --git a/src/app/pages/gamenight/gamenight.component.spec.ts b/src/app/pages/gamenight/gamenight.component.spec.ts index 6e89a44..a6979d8 100644 --- a/src/app/pages/gamenight/gamenight.component.spec.ts +++ b/src/app/pages/gamenight/gamenight.component.spec.ts @@ -1,23 +1,23 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { GamenightComponent } from './gamenight.component'; +import {GamenightComponent} from './gamenight.component'; describe('GamenightComponent', () => { - let component: GamenightComponent; - let fixture: ComponentFixture; + let component: GamenightComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ GamenightComponent ] - }) - .compileComponents(); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [GamenightComponent] + }) + .compileComponents(); - fixture = TestBed.createComponent(GamenightComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + fixture = TestBed.createComponent(GamenightComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it('should create', () => { + expect(component).toBeTruthy(); + }); }); diff --git a/src/app/pages/gamenight/gamenight.component.ts b/src/app/pages/gamenight/gamenight.component.ts index 59d0c53..9673896 100644 --- a/src/app/pages/gamenight/gamenight.component.ts +++ b/src/app/pages/gamenight/gamenight.component.ts @@ -1,15 +1,16 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; @Component({ - selector: 'app-gamenight', - templateUrl: './gamenight.component.html', - styleUrls: ['./gamenight.component.scss'] + selector: 'app-gamenight', + templateUrl: './gamenight.component.html', + styleUrls: ['./gamenight.component.scss'] }) export class GamenightComponent implements OnInit { - constructor() { } + constructor() { + } - ngOnInit(): void { - } + ngOnInit(): void { + } } diff --git a/src/app/pages/home/home.component.spec.ts b/src/app/pages/home/home.component.spec.ts index 5075be7..0914023 100644 --- a/src/app/pages/home/home.component.spec.ts +++ b/src/app/pages/home/home.component.spec.ts @@ -1,23 +1,23 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { HomeComponent } from './home.component'; +import {HomeComponent} from './home.component'; describe('HomeComponent', () => { - let component: HomeComponent; - let fixture: ComponentFixture; + let component: HomeComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ HomeComponent ] - }) - .compileComponents(); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [HomeComponent] + }) + .compileComponents(); - fixture = TestBed.createComponent(HomeComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + fixture = TestBed.createComponent(HomeComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it('should create', () => { + expect(component).toBeTruthy(); + }); }); diff --git a/src/app/pages/home/home.component.ts b/src/app/pages/home/home.component.ts index 9738303..411e2d7 100644 --- a/src/app/pages/home/home.component.ts +++ b/src/app/pages/home/home.component.ts @@ -1,21 +1,22 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {ActivatedRoute} from '@angular/router'; @Component({ - selector: 'app-home', - templateUrl: './home.component.html', - styleUrls: ['./home.component.scss'] + selector: 'app-home', + templateUrl: './home.component.html', + styleUrls: ['./home.component.scss'] }) export class HomeComponent implements OnInit { - constructor( - private route: ActivatedRoute - ) { } + constructor( + private route: ActivatedRoute + ) { + } - ngOnInit(): void { - this.route.queryParams.subscribe(params => { - console.table(params); - }) - } + ngOnInit(): void { + this.route.queryParams.subscribe(params => { + // Read params + }); + } } diff --git a/src/app/pages/stats/stats.component.spec.ts b/src/app/pages/stats/stats.component.spec.ts index 7098127..7f0505e 100644 --- a/src/app/pages/stats/stats.component.spec.ts +++ b/src/app/pages/stats/stats.component.spec.ts @@ -1,23 +1,23 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; +import {ComponentFixture, TestBed} from '@angular/core/testing'; -import { StatsComponent } from './stats.component'; +import {StatsComponent} from './stats.component'; describe('StatsComponent', () => { - let component: StatsComponent; - let fixture: ComponentFixture; + let component: StatsComponent; + let fixture: ComponentFixture; - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ StatsComponent ] - }) - .compileComponents(); + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [StatsComponent] + }) + .compileComponents(); - fixture = TestBed.createComponent(StatsComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); + fixture = TestBed.createComponent(StatsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + it('should create', () => { + expect(component).toBeTruthy(); + }); }); diff --git a/src/app/pages/stats/stats.component.ts b/src/app/pages/stats/stats.component.ts index 7df50bc..9537f10 100644 --- a/src/app/pages/stats/stats.component.ts +++ b/src/app/pages/stats/stats.component.ts @@ -1,15 +1,16 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; @Component({ - selector: 'app-stats', - templateUrl: './stats.component.html', - styleUrls: ['./stats.component.scss'] + selector: 'app-stats', + templateUrl: './stats.component.html', + styleUrls: ['./stats.component.scss'] }) export class StatsComponent implements OnInit { - constructor() { } + constructor() { + } - ngOnInit(): void { - } + ngOnInit(): void { + } } diff --git a/src/app/services/storage.service.ts b/src/app/services/storage.service.ts index a9970a2..32b504c 100644 --- a/src/app/services/storage.service.ts +++ b/src/app/services/storage.service.ts @@ -14,7 +14,7 @@ export class StorageService { firstName: firstName, token: token, sessionKey: sessionKey - } + }; } setUserInfo(user: User): void {