display logged-in user

src/app/components/summary/summary.component.html

@@ -93,8 +93,21 @@
       </div>
     </div>
     <div class="right-container">
-      <p>Good Morning,</p>
+      <p>{{ displayGreeting() }},</p>
-      <span id="welcome-user">Guest</span>
+      <span id="welcome-user"
+        >{{
+          this.userService.getUserDetails(
+            userService.getCurrentUserId(),
+            "firstName"
+          )
+        }}<br />
+        {{
+          this.userService.getUserDetails(
+            userService.getCurrentUserId(),
+            "lastName"
+          )
+        }}</span
+      >
     </div>
   </div>
 </section>

src/app/components/summary/summary.component.scss

@@ -163,7 +163,7 @@ section {
 
 /*------------- RESPONSIVE -------------*/
 
-@media screen and (max-width: 1250px) {
+@media screen and (max-width: 1500px) {
   .right-container {
     display: none;
   }

src/app/components/summary/summary.component.ts

@@ -1,7 +1,8 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { TaskService } from '../../services/task.service';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { UserService } from '../../services/user.service';
 
 @Component({
   selector: 'app-summary',
@@ -11,7 +12,11 @@ import { TranslateModule } from '@ngx-translate/core';
   styleUrl: './summary.component.scss',
 })
 export class SummaryComponent {
-  constructor(private taskService: TaskService) {}
+  constructor(
+    private taskService: TaskService,
+    public userService: UserService,
+    private translateService: TranslateService
+  ) {}
 
   displayNumberOfAllTasks() {
     return this.taskService.getAllTasks().length;
@@ -63,4 +68,17 @@ export class SummaryComponent {
     var time = month + ' ' + date + ', ' + year;
     return time;
   }
+
+  displayGreeting() {
+    let currentTime = new Date();
+    let localTime = new Date(currentTime.getTime() + 3600000);
+    let currentHour = localTime.getHours();
+    if (currentHour >= 5 && currentHour < 12) {
+      return this.translateService.instant('summary.morning');
+    } else if (currentHour >= 12 && currentHour < 18) {
+      return this.translateService.instant('summary.afternoon');
+    } else {
+      return this.translateService.instant('summary.evening');
+    }
+  }
 }

src/app/services/user.service.ts

@@ -31,6 +31,13 @@ export class UserService implements OnDestroy {
     return this.allUsers;
   }
 
+  getCurrentUserId() {
+    let currentUser = localStorage.getItem('currentUser');
+    if (currentUser !== null) {
+      return JSON.parse(currentUser)[0].id;
+    }
+  }
+
   getUserDetails(userId: string, query: keyof User) {
     return this.getAllUsers()
       .filter((user) => user.id === userId)

src/app/shared/components/header/header.component.html

@@ -13,7 +13,14 @@
       <div class="img-language" (click)="toggleLanguage()">
         <img src="./../../../../assets/img/header/language.svg" alt="" />
       </div>
-      <div class="img-user" (click)="toggleNavbar()">G</div>
+      <div class="img-user" (click)="toggleNavbar()">
+        {{
+          this.userService.getUserDetails(
+            userService.getCurrentUserId(),
+            "initials"
+          )
+        }}
+      </div>
     </div>
   </div>
 </section>

src/app/shared/components/header/header.component.ts

@@ -3,6 +3,7 @@ import { RouterModule } from '@angular/router';
 import { NavbarComponent } from '../navbar/navbar.component';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
+import { UserService } from '../../../services/user.service';
 
 @Component({
   selector: 'app-header',
@@ -15,6 +16,8 @@ export class HeaderComponent {
   navbarVisible: boolean = false;
   navbarLanguageVisible: boolean = false;
 
+  constructor(public userService: UserService) {}
+
   toggleNavbar() {
     this.navbarVisible = !this.navbarVisible;
   }