From 25c4b2e5de0e94fb956e99e94c8a078995fcb710 Mon Sep 17 00:00:00 2001
From: Brandon Roberge <brandonroberge@hotmail.ca>
Date: Wed, 20 Mar 2019 14:40:37 -0400
Subject: [PATCH] Enhance notifications

---
 .../notifications-list-modal.component.ts     | 30 +++++++++++++
 .../notifications-list-modal.style.scss       | 26 +++++++++--
 .../notifications-list-modal.template.html    | 44 ++++++++++++-------
 3 files changed, 80 insertions(+), 20 deletions(-)

diff --git a/src/app/modals/notifications-list-modal/notifications-list-modal.component.ts b/src/app/modals/notifications-list-modal/notifications-list-modal.component.ts
index d58483ab..96f4f374 100644
--- a/src/app/modals/notifications-list-modal/notifications-list-modal.component.ts
+++ b/src/app/modals/notifications-list-modal/notifications-list-modal.component.ts
@@ -5,6 +5,8 @@ import { State, getNotifications, getNotificationsLoading } from "./store/notifi
 import { Subscription } from "rxjs";
 import { AttendeeNotification } from "../../api/models/notification";
 import { LoadNotifications } from "./store/notifications.actions";
+import { not } from "rxjs/internal-compatibility";
+import { Activity } from "../../api/models/activity";
 
 @Component({
     selector: "app-notifications-list-modal",
@@ -35,6 +37,34 @@ export class NotificationsListModalComponent extends SimpleModalComponent<void,
         this.notificationSub$.unsubscribe();
     }
 
+    getIcon(notification: Notification): string {
+        if (!notification.data) {
+            return "";
+        }
+        switch (notification.data.type) {
+            case "event":
+                return "fal fa-calendar-check text-danger";
+            case "activity":
+                const activity = JSON.parse(notification.data.activity);
+                if (activity.type === "competition") {
+                    return "fal fa-trophy text-primary";
+                } else if (activity.type === "food") {
+                    return "fal fa-utensils text-primary";
+                } else {
+                    return "fal fa-calendar text-primary";
+                }
+        }
+        return "";
+    }
+
+    getActivityName(notification: Notification): { [lang: string]: string } {
+        if (!notification.data || !notification.data.activity || notification.data.type !== "activity") {
+            return null;
+        }
+        const activity: Activity = JSON.parse(notification.data.activity);
+        return activity.name;
+    }
+
     close() {
         document.querySelector(".modal-right-side.fade").classList.add("slideOutRight");
         return new Promise((resolve => {
diff --git a/src/app/modals/notifications-list-modal/notifications-list-modal.style.scss b/src/app/modals/notifications-list-modal/notifications-list-modal.style.scss
index 8943f24a..30527df8 100644
--- a/src/app/modals/notifications-list-modal/notifications-list-modal.style.scss
+++ b/src/app/modals/notifications-list-modal/notifications-list-modal.style.scss
@@ -1,5 +1,6 @@
 .timestamp {
     font-size: 12px;
+    font-weight: 100;
     text-align: left;
     margin-bottom: 0px;
 }
@@ -7,30 +8,49 @@
 .notif-line {
     margin-top: 3px;
     margin-bottom: 3px;
+    width: 100%;
 }
 
 .notif-title {
-    font-size: 14px;
-    font-weight: bold;
+    font-size: 16px;
+    font-weight: 400;
     text-align: left;
     margin-bottom: 0px;
 }
 
+.notif-activity {
+    font-size: 11px;
+    font-weight: 600;
+    text-align: left;
+    margin-bottom: 0;
+}
+
 .notif-message {
     font-size: 13px;
     text-align: left;
+    font-weight: 300;
     margin-bottom: 0px;
 }
 
+.notif-icon {
+    font-size: 40px;
+}
+
 .card {
     margin-bottom: 10px;
+    background-color: white;
 }
 
 .card-body {
-    padding: 10px;
+    padding: 0.5rem 1rem;
 }
 
 .modal-content {
     height: 100% !important;
+    background-color: #F5F4F0 !important;
+}
+
+.notifications {
+    padding: 0.5rem 1rem;
     overflow-y: auto !important;
 }
diff --git a/src/app/modals/notifications-list-modal/notifications-list-modal.template.html b/src/app/modals/notifications-list-modal/notifications-list-modal.template.html
index 9ec1f381..2e8c0a99 100644
--- a/src/app/modals/notifications-list-modal/notifications-list-modal.template.html
+++ b/src/app/modals/notifications-list-modal/notifications-list-modal.template.html
@@ -1,31 +1,41 @@
-<div class="modal-right-side fade slide-right show animated slideInRight" tabindex="-1" role="dialog" style="display: block;">
+<div class="modal-right-side fade slide-right show animated slideInRight" tabindex="-1" role="dialog"
+     style="display: block;">
     <div class="modal-dialog modal-md">
         <div class="modal-content-wrapper">
             <div class="modal-content">
                 <app-loading-spinner [loading]="loading$"></app-loading-spinner>
                 <a class="close mt-2" (click)="close()"><i class="fa fa-times"></i>
                 </a>
-                <div class="container-xs-height full-height">
-                    <div class="row-xs-height">
-                        <div class="modal-body mt-2 col-xs-height col-middle text-center">
-                            <h4>Notifications</h4>
-                            <div *ngIf="!notifications || notifications.length == 0" class="no-notif">
-                                {{ "components.notification.no_notification" | translate }}</div>
-                            <ng-container *ngIf="notifications">
-                                <div *ngFor="let n of notifications">
-                                    <div class="card">
-                                        <div class="card-body">
-                                            <p class="notif-title">{{ n.notification.title }}</p>
-                                            <p class="notif-message">{{ n.notification.body }}</p>
-                                            <hr class="notif-line">
-                                            <p class="timestamp">{{ n.notification.timestamp | timeago }}</p>
+                <ng-container *ngIf="!(loading$ | async)">
+                    <div fxLayout="column" class="modal-body mt-2 col-xs-height col-middle text-center p-0">
+                        <h3>Notifications</h3>
+                        <div *ngIf="!notifications || notifications.length == 0" class="no-notif">
+                            {{ "components.notification.no_notification" | translate }}</div>
+                        <div fxFlex class="notifications" *ngIf="notifications">
+                            <div *ngFor="let n of notifications">
+                                <div class="card">
+                                    <div class="card-body">
+                                        <div fxLayout="row" fxLayoutAlign="start center">
+                                            <i fxFlex="initial" class="notif-icon"
+                                               [ngClass]="getIcon(n.notification)"></i>
+                                            <div class="ml-3" fxFlex fxLayout="column"
+                                                 fxLayoutAlign="center start">
+                                                <p class="notif-activity"
+                                                   *ngIf="getActivityName(n.notification)">
+                                                    {{ getActivityName(n.notification) | t18n }}
+                                                </p>
+                                                <p class="notif-title">{{ n.notification.title }}</p>
+                                                <p class="notif-message">{{ n.notification.body }}</p>
+                                                <hr class="notif-line">
+                                                <p class="timestamp">{{ n.notification.timestamp | timeago }}</p>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </ng-container>
+                            </div>
                         </div>
                     </div>
-                </div>
+                </ng-container>
             </div>
         </div>
     </div>