From 0809759765a9247f2066059195dbcd1de7d4b5ea Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Thu, 16 May 2019 04:42:23 -0700
Subject: [PATCH] Initial implementation

---
 src/app/app.component.html                    |  1 +
 src/app/app.module.ts                         |  4 +-
 .../adbutler/adbutler.component.html          |  9 ++--
 .../adbutler/adbutler.component.scss          | 22 +++++++-
 .../components/adbutler/adbutler.component.ts |  3 +-
 .../installed-software.component.html         |  2 +-
 .../notification-box.component.html           | 12 +++++
 .../notification-box.component.scss           | 30 +++++++++++
 .../notification-box.component.spec.ts        |  0
 .../notification-box.component.ts             | 51 +++++++++++++++++++
 10 files changed, 124 insertions(+), 10 deletions(-)
 create mode 100644 src/app/components/notification-box/notification-box.component.html
 create mode 100644 src/app/components/notification-box/notification-box.component.scss
 create mode 100644 src/app/components/notification-box/notification-box.component.spec.ts
 create mode 100644 src/app/components/notification-box/notification-box.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 0680b43f..cc3b2bf2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+<app-notification-box></app-notification-box>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 108ee935..8cbff37e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -184,6 +184,7 @@ import { AdbutlerComponent } from './components/adbutler/adbutler.component';
 import { ConsoleService } from './services/settings/console.service';
 import { DefaultConsoleService } from './services/settings/default-console.service';
 import { NodeCreatedLabelStylesFixer } from './components/project-map/helpers/node-created-label-styles-fixer';
+import { NotificationBoxComponent } from './components/notification-box/notification-box.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -302,7 +303,8 @@ if (environment.production) {
     AdbutlerComponent,
     ConsoleDeviceActionComponent,
     ConsoleComponent,
-    NodesMenuComponent
+    NodesMenuComponent,
+    NotificationBoxComponent
   ],
   imports: [
     BrowserModule,
diff --git a/src/app/components/adbutler/adbutler.component.html b/src/app/components/adbutler/adbutler.component.html
index 4e7940a3..40395c14 100644
--- a/src/app/components/adbutler/adbutler.component.html
+++ b/src/app/components/adbutler/adbutler.component.html
@@ -1,6 +1,6 @@
 
-<table class="butler" style="width: 600px; border: 0px solid #C0C0C0; background-color: #263238" cellSpacing=0 cellPadding=3>
-  <tr><td height=80 style="background-color: #263238" #code>
+<table class="butler" height=80 [ngClass]="(theme=='dark')?'butlerdark':'butlerlight'" cellSpacing=0 cellPadding=3>
+  <tr><td height=80 [ngClass]="(theme=='dark')?'rowdark':'rowlight'" #code>
   <div id="{{ this.divId }}"></div>
 
 
@@ -9,7 +9,4 @@
   
   <!-- End Ad Code -->
   </td></tr>
-  </table>
-  
-  
-  
\ No newline at end of file
+</table>
diff --git a/src/app/components/adbutler/adbutler.component.scss b/src/app/components/adbutler/adbutler.component.scss
index cdb7ea77..93962182 100644
--- a/src/app/components/adbutler/adbutler.component.scss
+++ b/src/app/components/adbutler/adbutler.component.scss
@@ -4,4 +4,24 @@
 
 .butler {
   font-size: 14px;
-}
\ No newline at end of file
+}
+
+.butlerdark {
+  width: 600px; 
+  border: 0px solid #C0C0C0; 
+  background-color: #263238;
+}
+
+.butlerlight {
+  width: 600px; 
+  border: 0px solid #C0C0C0; 
+  background-color: #263238;
+}
+
+.rowdark {
+  background-color: #263238;
+}
+
+.rowlight {
+  background-color: #263238;
+}
diff --git a/src/app/components/adbutler/adbutler.component.ts b/src/app/components/adbutler/adbutler.component.ts
index 54c5ae1d..e4f74e3f 100644
--- a/src/app/components/adbutler/adbutler.component.ts
+++ b/src/app/components/adbutler/adbutler.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, ViewEncapsulation, OnDestroy } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, ViewEncapsulation, OnDestroy, Input } from '@angular/core';
 
 @Component({
   selector: 'app-adbutler',
@@ -15,6 +15,7 @@ export class AdbutlerComponent implements OnInit, AfterViewInit, OnDestroy {
   divId: string;
 
   @ViewChild('code') code: ElementRef;
+  @Input() theme: string;
 
   constructor() { }
 
diff --git a/src/app/components/installed-software/installed-software.component.html b/src/app/components/installed-software/installed-software.component.html
index 28292ad4..f81d01e4 100644
--- a/src/app/components/installed-software/installed-software.component.html
+++ b/src/app/components/installed-software/installed-software.component.html
@@ -14,7 +14,7 @@
               </ng-container>
 
               <ng-container *ngIf="row.type === 'adbutler'">
-                  <app-adbutler></app-adbutler>
+                  <app-adbutler theme="dark"></app-adbutler>
               </ng-container>
             </mat-cell>
           </ng-container>
diff --git a/src/app/components/notification-box/notification-box.component.html b/src/app/components/notification-box/notification-box.component.html
new file mode 100644
index 00000000..25ca34e0
--- /dev/null
+++ b/src/app/components/notification-box/notification-box.component.html
@@ -0,0 +1,12 @@
+<div class="notification-box" *ngIf="isVisible">
+    <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
+    <div style="display: flex; height: 80px;">
+        <div class="edgeline"></div>
+        <div>
+            <app-adbutler theme="light"></app-adbutler>
+            <mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
+        </div>
+        <div class="edgeline"></div>
+    </div>
+    <div class="bottomline"></div>
+</div>
diff --git a/src/app/components/notification-box/notification-box.component.scss b/src/app/components/notification-box/notification-box.component.scss
new file mode 100644
index 00000000..609047bc
--- /dev/null
+++ b/src/app/components/notification-box/notification-box.component.scss
@@ -0,0 +1,30 @@
+.notification-box {
+    posiTion: fixed;
+    bottom: 10px;
+    right: 5px;
+    width: 608px;
+    height: 88px;
+}
+
+.close-button {
+    position: fixed;
+    bottom: 65px;
+    right: 15px;
+    cursor: pointer;
+}
+
+.mat-icon:hover {
+    color: #0097a7;
+}
+
+.edgeline {
+    height: 84px;
+    width: 4px;
+    background-color: #0097a7;
+}
+
+.bottomline {
+    width: 608px;
+    height: 4px;
+    background-color: #0097a7;
+}
diff --git a/src/app/components/notification-box/notification-box.component.spec.ts b/src/app/components/notification-box/notification-box.component.spec.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/components/notification-box/notification-box.component.ts b/src/app/components/notification-box/notification-box.component.ts
new file mode 100644
index 00000000..905bcff9
--- /dev/null
+++ b/src/app/components/notification-box/notification-box.component.ts
@@ -0,0 +1,51 @@
+import { Component, OnInit } from '@angular/core';
+import { timer, interval, Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
+
+@Component({
+    selector: 'app-notification-box',
+    templateUrl: './notification-box.component.html',
+    styleUrls: ['./notification-box.component.scss']
+})
+export class NotificationBoxComponent implements OnInit {
+    timer: Observable<number>;
+    ticks: number = 0;
+
+    isVisible = true;
+    progress : number = 0;
+
+    initialTime = 1000;
+    showTime = 1000;
+    breakTime = 10;
+    interval = 10;
+
+    constructor(){}
+
+    ngOnInit(){
+        this.timer = timer(this.initialTime, 1000);
+
+        this.timer.subscribe(() => {
+            this.ticks++;
+            if (this.ticks > this.breakTime) {
+                this.ticks = 0;
+                this.showNotification();
+            }
+        });
+    }
+
+    showNotification() {
+        this.isVisible = true;
+        this.progress = 0;
+
+        interval(this.interval).pipe(take(this.showTime)).subscribe(() => {
+            this.progress += (1/this.interval);
+            if (this.progress > ((this.showTime/this.interval)-(1/this.interval))) {
+                this.isVisible = false;
+            }
+        });
+    }
+
+    closeNotification(){
+        this.isVisible = false;
+    }
+}