Initial implementation

src/app/app.module.ts

@@ -185,6 +185,7 @@ 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';
+import { NotificationSettingsService } from './services/notification-settings.service';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -376,7 +377,8 @@ if (environment.production) {
     ServerManagementService,
     ConsoleService,
     DefaultConsoleService,
-    NodeCreatedLabelStylesFixer
+    NodeCreatedLabelStylesFixer,
+    NotificationSettingsService
   ],
   entryComponents: [
     AddServerDialogComponent,

src/app/components/notification-box/notification-box.component.ts

@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { timer, interval, Observable } from 'rxjs';
+import { timer, interval, Observable, Subscription } from 'rxjs';
 import { take } from 'rxjs/operators';
+import { NotificationSettingsService } from '../../services/notification-settings.service';
+import { NotificationSettings } from '../../models/notification-settings-models/notification-settings';
 
 @Component({
     selector: 'app-notification-box',
@@ -8,27 +10,38 @@ import { take } from 'rxjs/operators';
     styleUrls: ['./notification-box.component.scss']
 })
 export class NotificationBoxComponent implements OnInit {
+    notificationSettings: NotificationSettings;
     timer: Observable<number>;
+    timerSubscription: Subscription;
+    viewsCounter = 0;
     ticks: number = 0;
-
-    isVisible = true;
-    progress : number = 0;
-
-    initialTime = 1000;
-    showTime = 1000;
-    breakTime = 10;
+    progress: number = 0;
+    isVisible = false;
     interval = 10;
 
-    constructor(){}
+    constructor(
+        private notifactionSettingsService: NotificationSettingsService
+    ){}
 
-    ngOnInit(){
-        this.timer = timer(this.initialTime, 1000);
+    ngOnInit() {
+        this.notificationSettings = this.notifactionSettingsService.getConfiguration();
+        this.startTimer();
+    }
 
-        this.timer.subscribe(() => {
+    startTimer() {
+        this.timer = timer(this.notificationSettings.delayTime, 1000);
+
+        this.timerSubscription = this.timer.subscribe(() => {
             this.ticks++;
-            if (this.ticks > this.breakTime) {
+            if (this.ticks > this.notificationSettings.breakTime) {
                 this.ticks = 0;
                 this.showNotification();
+                this.viewsCounter++;
+                if (!this.notificationSettings.isEndless){
+                    if (this.viewsCounter === this.notificationSettings.numberOfViews) {
+                        this.timerSubscription.unsubscribe();
+                    }
+                }
             }
         });
     }
@@ -37,15 +50,15 @@ export class NotificationBoxComponent implements OnInit {
         this.isVisible = true;
         this.progress = 0;
 
-        interval(this.interval).pipe(take(this.showTime)).subscribe(() => {
+        interval(this.interval).pipe(take(this.notificationSettings.viewTime)).subscribe(() => {
             this.progress += (1/this.interval);
-            if (this.progress > ((this.showTime/this.interval)-(1/this.interval))) {
+            if (this.progress > ((this.notificationSettings.viewTime/this.interval)-(1/this.interval))) {
                 this.isVisible = false;
             }
         });
     }
 
-    closeNotification(){
+    closeNotification() {
         this.isVisible = false;
     }
 }

src/app/models/notification-settings-models/notification-settings.ts

@@ -0,0 +1,8 @@
+export class NotificationSettings {
+    delayTime: number;
+    viewTime: number;
+    breakTime: number;
+    numberOfViews?: number;
+    isEndless: boolean;
+    contentToShow?: string;
+}

src/app/services/notification-settings.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { NotificationSettings } from '../models/notification-settings-models/notification-settings';
+
+@Injectable()
+export class NotificationSettingsService {
+
+  constructor() {}
+
+  getConfiguration(): NotificationSettings {
+    let configuration: NotificationSettings = {
+        delayTime: 1000,
+        viewTime: 1000,
+        breakTime: 10,
+        isEndless: true,
+        numberOfViews: 1,
+    };
+
+    return configuration;
+  }
+}