From 2fe5297f342aa3a065d2f29aa668d7d70c8340f2 Mon Sep 17 00:00:00 2001
From: tidusjar <tidusjar@gmail.com>
Date: Wed, 4 Nov 2020 09:00:24 +0000
Subject: [PATCH] Improved the "user area"

---
 src/Ombi/ClientApp/src/app/app.component.ts   |  5 ++-
 .../src/app/my-nav/my-nav.component.html      |  8 ++++-
 .../src/app/my-nav/my-nav.component.scss      | 31 +++++++++++++++++--
 .../src/app/my-nav/my-nav.component.ts        | 28 ++++++++++++++---
 src/Ombi/wwwroot/translations/en.json         |  5 ++-
 5 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/app.component.ts b/src/Ombi/ClientApp/src/app/app.component.ts
index abf47b1bf..9b12be5ef 100644
--- a/src/Ombi/ClientApp/src/app/app.component.ts
+++ b/src/Ombi/ClientApp/src/app/app.component.ts
@@ -56,6 +56,7 @@ export class AppComponent implements OnInit {
 
         if (this.authService.loggedIn()) {
             this.identity.getUser().subscribe(u => {
+                this.username = u.userName;
                 if (u.language) {
                     this.translate.use(u.language);
                 }
@@ -106,9 +107,7 @@ export class AppComponent implements OnInit {
             this.currentUrl = event.url;
             if (event instanceof NavigationStart) {
                 this.user = this.authService.claims();
-                if (this.user && this.user.username) {
-                    this.username = this.user.username;
-                }
+
                 this.isAdmin = this.authService.hasRole("admin");
                 this.showNav = this.authService.loggedIn();
 
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
index 3ab703851..7fdcc62b0 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
@@ -4,7 +4,13 @@
         [opened]="!(isHandset$ | async)">
         <mat-toolbar>{{applicationName}}</mat-toolbar>
         <div class="profile-img-container">
-            <img class="profile-img" src="https://www.gravatar.com/avatar/{{emailHash}}?d=https://raw.githubusercontent.com/tidusjar/Ombi/gh-pages/img/android-chrome-512x512.png" />
+            <div class="profile-img">
+            <img src="https://www.gravatar.com/avatar/{{emailHash}}?d=https://raw.githubusercontent.com/tidusjar/Ombi/gh-pages/img/android-chrome-512x512.png" />
+        </div>
+        <div class="profile-info">
+            <h3>{{username}}</h3>
+            <p>{{welcomeText | translate}}</p>
+        </div>
         </div>
         <mat-nav-list>
             <span *ngFor="let nav of navItems">
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
index 8225d8742..86dc17f8d 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.scss
@@ -90,9 +90,34 @@
 }*/
 
 .profile-img-container {
-    text-align: center;padding-bottom: 15px;
+    margin: 20px auto 10px;
+    overflow: hidden;
+    text-align: center;
+    width: 80%;
 }
 .profile-img {
-    width: 100px;
-    border-radius: 100%;
+    float: left;
+    height: 40px;
+    margin-right: 15px;
+}
+.profile-info {
+    overflow: hidden;
+    text-align: left;
+}
+.profile-info > h3 {
+    font-size: 15px;
+    text-transform: capitalize;
+    // color: #333;
+    margin-bottom: 2px;
+}
+.profile-info > p {
+    // color: #333;
+    font-size: 11px;
+    margin-top: 5px;
+}
+
+.profile-img img {
+    border-radius: 6px;
+    box-shadow: 4px 3px 6px 0 rgba(0,0,0,.2);
+    width: 45px;
 }
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
index 2f25df92c..5483929ae 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
@@ -7,7 +7,8 @@ import { StorageService } from '../shared/storage/storage-service';
 import { SettingsService } from '../services';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { SearchFilter } from './SearchFilter';
-import {Md5} from 'ts-md5/dist/md5';
+import { Md5 } from 'ts-md5/dist/md5';
+import { TranslateService } from '@ngx-translate/core';
 
 export enum SearchFilterType {
   Movie = 1,
@@ -40,11 +41,13 @@ export class MyNavComponent implements OnInit {
   public navItems: INavBar[];
   public searchFilter: SearchFilter;
   public SearchFilterType = SearchFilterType;
-  public emailHash: string|Int32Array;
+  public emailHash: string | Int32Array;
+  public welcomeText: string;
 
   constructor(private breakpointObserver: BreakpointObserver,
     private settingsService: SettingsService,
-    private store: StorageService) {
+    private store: StorageService,
+    private translate: TranslateService) {
   }
 
   public async ngOnInit() {
@@ -56,8 +59,8 @@ export class MyNavComponent implements OnInit {
       tvShows: true
     }
 
-
-    if(this.email) {
+    this.setWelcomeText();
+    if (this.email) {
       const md5 = new Md5();
       this.emailHash = md5.appendStr(this.email).end();
     }
@@ -122,4 +125,19 @@ export class MyNavComponent implements OnInit {
     }
     this.store.save("searchFilter", JSON.stringify(this.searchFilter));
   }
+
+  private setWelcomeText() {
+    var d = new Date();
+    var hour = d.getHours();
+
+    if (hour >= 0 && hour < 12) {
+      this.welcomeText = 'NavigationBar.MorningWelcome';
+    }
+    if (hour >= 12 && hour < 18) {
+      this.welcomeText = 'NavigationBar.AfternoonWelcome';
+    }
+    if (hour >= 18 && hour < 23) {
+      this.welcomeText = 'NavigationBar.EveningWelcome';
+    }
+  }
 }
diff --git a/src/Ombi/wwwroot/translations/en.json b/src/Ombi/wwwroot/translations/en.json
index 592aa34f3..3f6df284a 100644
--- a/src/Ombi/wwwroot/translations/en.json
+++ b/src/Ombi/wwwroot/translations/en.json
@@ -75,7 +75,10 @@
             "TvShows":"TV Shows",
             "Music":"Music",
             "People":"People"
-        }
+        },
+        "MorningWelcome":"Good morning!",
+        "AfternoonWelcome":"Good afternoon!",
+        "EveningWelcome":"Good evening!"
     },
     "Search": {
         "Title": "Search",