Commit 77e12b8c authored by Almouhannad's avatar Almouhannad

(F) Add welcome message, role-related buttons to hreader

parent 60b89930
...@@ -39,6 +39,12 @@ ...@@ -39,6 +39,12 @@
} }
.app-name-container {
text-align: center; /* or any other alignment you prefer */
}
/* #endregion */ /* #endregion */
/* #region Header*/ /* #region Header*/
......
...@@ -8,24 +8,17 @@ ...@@ -8,24 +8,17 @@
<img src="assets/images/logo.png" alt="Logo" width="100em" height="100em"> <img src="assets/images/logo.png" alt="Logo" width="100em" height="100em">
</div> </div>
<h1 class="h3 m-auto custom-app-name">المركز الطبي - برنامج الأطباء</h1> <div class="app-name-container m-auto">
<h1 class="h3 custom-app-name mb-4">المركز الطبي - برنامج الأطباء</h1>
<h3 dir="rtl" *ngIf="userData!==null" class="h5 text-primary">أهلاً {{userData.fullName}}!</h3>
</div>
<nav class="navmenu custom-buttons"> <!-- #region unregistered buttons -->
<nav class="navmenu custom-buttons" *ngIf="userData === null">
<ul> <ul>
<li *ngIf="userData!==null" class="dropdown"> <li><a><button class="btn" [class]="{'btn-outline-secondary': true}"
<button (click)="openLoginForm(loginModal)">تسجيل الدخول</button></a></li>
[ngClass]="{'btn': true, 'btn-outline-secondary': true, 'custom-selected-dropdown': showDropdown}"
(click)="showDropdown = !showDropdown">خيارات <i
class="bi bi-chevron-down toggle-dropdown"></i></button>
<ul [ngClass]="{'show': showDropdown}">
<li (click)="onLogout();"><a>تسجيل الخروج</a></li>
</ul>
</li>
<li *ngIf="userData===null"><a><button class="btn"
[class]="{'btn-outline-secondary': true}"
(click)="openLoginForm(loginModal)">تسجيل الدخول</button></a></li>
<li><a href="home#about"><button class="btn" <li><a href="home#about"><button class="btn"
[class]="{'btn-outline-primary': isSelected('About'), 'btn-outline-secondary': !isSelected('About')}" [class]="{'btn-outline-primary': isSelected('About'), 'btn-outline-secondary': !isSelected('About')}"
...@@ -41,6 +34,41 @@ ...@@ -41,6 +34,41 @@
</ul> </ul>
</nav> </nav>
<!-- #endregion -->
<!-- #region admin buttons -->
<nav class="navmenu custom-buttons" *ngIf="userData?.role === ADMIN">
<ul>
<li class="dropdown">
<button
[ngClass]="{'btn': true, 'btn-outline-secondary': true, 'custom-selected-dropdown': showDropdown}"
(click)="showDropdown = !showDropdown">خيارات <i
class="bi bi-chevron-down toggle-dropdown"></i></button>
<ul [ngClass]="{'show': showDropdown}">
<li (click)="onLogout();"><a>تسجيل الخروج</a></li>
</ul>
</li>
<li><a><button class="btn"
[class]="{'btn-outline-primary': isSelected('Admin-Receptionists'), 'btn-outline-secondary': !isSelected('Admin-Receptionists')}"
(click)="selectButton('Admin-Receptionists')">موظفو الاستقبال</button></a></li>
<li><a><button class="btn"
[class]="{'btn-outline-primary': isSelected('Admin-Dorctors'), 'btn-outline-secondary': !isSelected('Admin-Dorctors')}"
(click)="selectButton('Admin-Dorctors')">الأطباء</button></a></li>
<li><a [routerLink]="'home'"><button class="btn"
[class]="{'btn-outline-primary': isSelected('Home'), 'btn-outline-secondary': !isSelected('Home')}"
(click)="selectButton('Home')">الصفحة الرئيسية</button></a></li>
</ul>
</nav>
<!-- #endregion -->
</div> </div>
</div> </div>
......
...@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; ...@@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
import { UserData } from '../../../classes/Authentication/user-data'; import { UserData } from '../../../classes/Authentication/user-data';
import { AuthenticationService } from '../../../services/authentication/authentication.service'; import { AuthenticationService } from '../../../services/authentication/authentication.service';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { HomeComponent } from '../../home/home.component'; import { Roles } from '../../../classes/Authentication/roles';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({ @Component({
...@@ -24,6 +24,12 @@ export class HeaderComponent { ...@@ -24,6 +24,12 @@ export class HeaderComponent {
//#region Variables //#region Variables
//#region Roles
readonly ADMIN: string = Roles.Admin;
readonly DOCTOR: string = Roles.Doctor;
readonly RECEPTIONIST: string = Roles.Receptionist;
//#endregion
//#region Dropdown //#region Dropdown
showDropdown: boolean = false; showDropdown: boolean = false;
//#endregion //#endregion
...@@ -52,6 +58,7 @@ export class HeaderComponent { ...@@ -52,6 +58,7 @@ export class HeaderComponent {
onLogout(): void { onLogout(): void {
this.authenticationService.logout(); this.authenticationService.logout();
this.userData = null; this.userData = null;
this.showDropdown = false;
this.router.navigate(['']); this.router.navigate(['']);
} }
//#endregion //#endregion
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment