Initial implementation

src/app/app.component.html

@@ -1 +1,2 @@
 <router-outlet></router-outlet>
+<app-notification-box></app-notification-box>

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,

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>
-  
-  
-  
+</table>

src/app/components/adbutler/adbutler.component.scss

@@ -5,3 +5,23 @@
 .butler {
   font-size: 14px;
 }
+
+.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;
+}

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() { }
 

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>

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>

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;
+}

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;
+    }
+}