header.component.html 6.67 KB
Newer Older
Almouhannad's avatar
Almouhannad committed
1
<div class="custom-child">
2

3
    <div class="header">
Almouhannad's avatar
Almouhannad committed
4
        <div class="branding d-flex align-items-center">
Almouhannad's avatar
Almouhannad committed
5

Almouhannad's avatar
Almouhannad committed
6 7 8 9
            <div class="container position-relative d-flex align-items-center justify-content-between">
                <div class="logo d-flex align-items-center me-auto">
                    <img src="assets/images/logo.png" alt="Logo" width="100em" height="100em">
                </div>
Almouhannad's avatar
Almouhannad committed
10

11
                <div class="container app-name-container m-auto">
12
                    <h1 class="h3 custom-app-name mb-4">المركز الطبي - برنامج الأطباء</h1>
13
                    <h3 dir="rtl" *ngIf="userData!==null" class="h5 text-primary">أهلاَ <span *ngIf="userData.role===DOCTOR">د.</span> {{userData.fullName}}!</h3>
14
                </div>
Almouhannad's avatar
Almouhannad committed
15

16 17
                <!-- #region unregistered buttons -->
                <nav class="navmenu custom-buttons" *ngIf="userData === null">
18

Almouhannad's avatar
Almouhannad committed
19
                    <ul>
20 21
                        <li><a><button class="btn" [class]="{'btn-outline-secondary': true}"
                                    (click)="openLoginForm(loginModal)">تسجيل الدخول</button></a></li>
22 23

                        <li><a href="home#about"><button class="btn"
24 25
                                    [class]="{'btn-outline-primary': isSelected('About'), 'btn-outline-secondary': !isSelected('About')}"
                                    (click)="selectButton('About')">عن المستوصف</button></a></li>
26 27

                        <li><a href="home#doctors"><button class="btn"
28 29
                                    [class]="{'btn-outline-primary': isSelected('Doctors'), 'btn-outline-secondary': !isSelected('Doctors')}"
                                    (click)="selectButton('Doctors')">الفريق الطبي</button></a></li>
30 31

                        <li><a href="home#"><button class="btn"
32 33
                                    [class]="{'btn-outline-primary': isSelected('Home'), 'btn-outline-secondary': !isSelected('Home')}"
                                    (click)="selectButton('Home')">الصفحة الرئيسية</button></a></li>
34

Almouhannad's avatar
Almouhannad committed
35 36
                    </ul>
                </nav>
37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
                <!-- #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"
54 55
                                    [class]="{'btn-outline-primary': isSelected('Admin-Receptionists'), 'btn-outline-secondary': !isSelected('Admin-Receptionists')}"
                                    (click)="selectButton('Admin-Receptionists')">موظفو الاستقبال</button></a></li>
56

57
                        <li><a [routerLink]="['admin/doctors']"><button class="btn"
58 59
                                    [class]="{'btn-outline-primary': isSelected('Admin-Dorctors'), 'btn-outline-secondary': !isSelected('Admin-Dorctors')}"
                                    (click)="selectButton('Admin-Dorctors')">الأطباء</button></a></li>
60 61

                        <li><a [routerLink]="'home'"><button class="btn"
62 63
                                    [class]="{'btn-outline-primary': isSelected('Home'), 'btn-outline-secondary': !isSelected('Home')}"
                                    (click)="selectButton('Home')">الصفحة الرئيسية</button></a></li>
64 65

                    </ul>
66 67
                </nav>
                <!-- #endregion -->
68

69 70
                <!-- #region doctor buttons -->
                <nav class="navmenu custom-buttons" *ngIf="userData?.role === DOCTOR">
71

72 73 74 75 76 77 78 79 80 81
                    <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>
82

83 84 85 86 87
                        <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>
88 89 90
                </nav>
                <!-- #endregion -->

91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
                <!-- #region receptionist buttons -->
                <nav class="navmenu custom-buttons" *ngIf="userData?.role === RECEPTIONIST">

                    <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 [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 -->
Almouhannad's avatar
Almouhannad committed
112
            </div>
Almouhannad's avatar
Almouhannad committed
113 114 115 116

        </div>

    </div>
117 118 119 120 121 122 123 124 125

    <!-- #region login pop-up -->
    <ng-template #loginModal let-modal>
        <div *ngIf="userData===null" class="modal-body">
            <app-login-form (loggedIn)="onLogin($event); modal.dismiss();" [parentModal]="modal"></app-login-form>
        </div>
    </ng-template>
    <!-- #endregion -->

Almouhannad's avatar
Almouhannad committed
126
</div>