PlutoDev/Doppelkopf-Stats-Frontend
3
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: PlutoDev:d0df6e3e5c8e04afdae65119558b7e91733462d2
Branches Tags
PlutoDev:master
..
compare: PlutoDev:68e35fc5bcb9141b05a432f2f4e3af196151f579
Branches Tags
PlutoDev:master

No commits in common. "d0df6e3e5c8e04afdae65119558b7e91733462d2" and "68e35fc5bcb9141b05a432f2f4e3af196151f579" have entirely different histories.
d0df6e3e5c ... 68e35fc5bc

2 changed files with 8 additions and 36 deletions
Show Stats Expand all files Collapse all files

2
src/app/components/header/header.component.html
View File

@ -8,7 +8,7 @@
<div (click)="navigate('/stats')">Stats</div> <div (click)="navigate('/stats')">Stats</div>
</div> </div>
<div id="menu-mobile"> <div id="menu-mobile">
<div id="menu-mobile-dropdown-button" (click)="openMobileDropdown()">Open</div> <div id="menu-mobile-dropdown-button" (click)="toggleMobileDropdown()">Open</div>
<div id="menu-mobile-dropdown-content"> <div id="menu-mobile-dropdown-content">
<div (click)="navigate('/')">Home</div> <div (click)="navigate('/')">Home</div>
<div (click)="navigate('/gamenight')">Game night</div> <div (click)="navigate('/gamenight')">Game night</div>

40
src/app/components/header/header.component.ts
View File

@ -1,4 +1,4 @@
import {Component, HostListener, OnInit} from '@angular/core'; import {Component, OnInit} from '@angular/core';
import {User} from '../../models/user'; import {User} from '../../models/user';
import {StorageService} from '../../services/storage.service'; import {StorageService} from '../../services/storage.service';
import {Router} from '@angular/router'; import {Router} from '@angular/router';
@ -12,15 +12,12 @@ export class HeaderComponent implements OnInit {
showProfilePopOver: boolean = false; showProfilePopOver: boolean = false;
user?: User; user?: User;
initialClickMobileMenu : boolean = true
dropdownContentStyle! : CSSStyleDeclaration;
constructor(private router: Router) { constructor(private router: Router) {
this.user = StorageService.getUserInfo(); this.user = StorageService.getUserInfo();
} }
ngOnInit(): void { ngOnInit(): void {
this.dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style;
} }
openProfile(): void { openProfile(): void {
@ -32,45 +29,20 @@ export class HeaderComponent implements OnInit {
} }
getUserName(): string { getUserName(): string {
return this.user ? this.user.firstName : 'Logged out'; return this.user ? this.user.firstName : 'Logged out';
} }
navigate(path: string): void { navigate(path: string): void {
this.initialClickMobileMenu = true;
this.router.navigate([path]); this.router.navigate([path]);
} }
openMobileDropdown() : void { toggleMobileDropdown(): void {
if (!this.isMobileDropdownOpen()) { const dropdownContentStyle = document.getElementById('menu-mobile-dropdown-content')!.style;
this.dropdownContentStyle.display = 'block'; if (dropdownContentStyle.display == 'block') {
this.initialClickMobileMenu = true; dropdownContentStyle.display = 'none';
}
}
closeMobileDropdown() : void {
this.dropdownContentStyle.display = 'none';
this.initialClickMobileMenu = true;
}
isMobileDropdownOpen() : Boolean {
return this.dropdownContentStyle.display == 'block';
}
@HostListener('document:click', ['$event'])
@HostListener('document:touchstart', ['$event'])
handleOutsideClick(event: any) {
if (!document.getElementById("menu-mobile-dropdown-content")!.contains(event.target)) {
if(this.isMobileDropdownOpen()) {
if(this.initialClickMobileMenu) {
this.initialClickMobileMenu = false;
} else { } else {
this.closeMobileDropdown(); dropdownContentStyle.display = 'block';
console.log("Zu gemacht!")
}
}
} }
} }
} }