From 6f6506347738376b2200b60eb87d8f527443dc47 Mon Sep 17 00:00:00 2001
From: Piotr Pekala <piotrpawelpekala@gmail.com>
Date: Tue, 5 Nov 2019 00:31:11 -0800
Subject: [PATCH] Checking if ad is loaded correctly added

---
 .../cartography/widgets/interface-status.ts   |  6 +++---
 .../components/adbutler/adbutler.component.ts | 20 +++++++++++++------
 .../notification-box.component.html           |  4 ++--
 .../notification-box.component.scss           |  4 ++++
 .../notification-box.component.ts             | 10 +++++++---
 5 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/app/cartography/widgets/interface-status.ts b/src/app/cartography/widgets/interface-status.ts
index e74ed89d..99393090 100644
--- a/src/app/cartography/widgets/interface-status.ts
+++ b/src/app/cartography/widgets/interface-status.ts
@@ -28,7 +28,7 @@ export class InterfaceStatusWidget implements Widget {
           ];
         }
       }
-/////////////////////////////////////////////
+
       const status_started = link_group
         .selectAll<SVGCircleElement, LinkStatus>('circle.status_started')
         .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'started'));
@@ -44,7 +44,7 @@ export class InterfaceStatusWidget implements Widget {
         .attr('fill', '#2ecc71');
 
       status_started.exit().remove();
-/////////////////////////////////////////////
+
       const status_stopped = link_group
         .selectAll<SVGRectElement, LinkStatus>('rect.status_stopped')
         .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'stopped'));
@@ -63,7 +63,7 @@ export class InterfaceStatusWidget implements Widget {
         .attr('fill', 'red');
 
       status_stopped.exit().remove();
-/////////////////////////////////////////////
+
       const status_suspended = link_group
         .selectAll<SVGCircleElement, LinkStatus>('circle.status_suspended')
         .data(statuses.filter((link_status: LinkStatus) => link_status.status === 'suspended'));
diff --git a/src/app/components/adbutler/adbutler.component.ts b/src/app/components/adbutler/adbutler.component.ts
index beca10f5..3df983ef 100644
--- a/src/app/components/adbutler/adbutler.component.ts
+++ b/src/app/components/adbutler/adbutler.component.ts
@@ -1,6 +1,7 @@
-import { Component, OnInit, ElementRef, ViewChild, ViewEncapsulation, Input } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { AdButlerResponse } from '../../models/adbutler';
+import { ToasterService } from '../../services/toaster.service';
 
 @Component({
   selector: 'app-adbutler',
@@ -11,16 +12,23 @@ import { AdButlerResponse } from '../../models/adbutler';
 export class AdbutlerComponent implements OnInit {
   @ViewChild('ad', {static: false}) ad: ElementRef;
   @Input() theme: string;
+  @Output() onLoad = new EventEmitter();
   htmlCode: string;
 
   constructor(
-    private httpClient: HttpClient
+    private httpClient: HttpClient,
+    private toasterService: ToasterService
   ) {}
 
   ngOnInit() {
-    this.httpClient.get('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;').subscribe((response: AdButlerResponse) => {
-      this.htmlCode = response.placements.placement_1.body;
-      this.ad.nativeElement.insertAdjacentHTML('beforeend', this.htmlCode);
-    });
+    this.httpClient
+      .get('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;').subscribe(
+        response => {
+          this.onLoad.emit(true);
+          this.htmlCode = response['placements'].placement_1.body;
+          this.ad.nativeElement.insertAdjacentHTML('beforeend', this.htmlCode);
+        },
+        error => this.toasterService.error(error)
+      );
   }
 }
diff --git a/src/app/components/notification-box/notification-box.component.html b/src/app/components/notification-box/notification-box.component.html
index 1bcabaa9..359de8ff 100644
--- a/src/app/components/notification-box/notification-box.component.html
+++ b/src/app/components/notification-box/notification-box.component.html
@@ -1,8 +1,8 @@
-<div class="notification-box" *ngIf="isVisible">
+<div class="notification-box" [ngClass]="{hidden: !isVisible}">
     <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
     <div style="display: flex; height: 102px;">
         <div class="content">
-            <app-adbutler theme="dark"></app-adbutler>
+            <app-adbutler (onLoad)="onLoadingAdbutler($event)" theme="dark"></app-adbutler>
             <mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
         </div>
     </div>
diff --git a/src/app/components/notification-box/notification-box.component.scss b/src/app/components/notification-box/notification-box.component.scss
index 178ae504..4d37df44 100644
--- a/src/app/components/notification-box/notification-box.component.scss
+++ b/src/app/components/notification-box/notification-box.component.scss
@@ -29,3 +29,7 @@
     background-color: #0097a7;
     margin-top: -10px;
 }
+
+.hidden {
+    visibility: hidden;
+}
diff --git a/src/app/components/notification-box/notification-box.component.ts b/src/app/components/notification-box/notification-box.component.ts
index abc60f36..d028911b 100644
--- a/src/app/components/notification-box/notification-box.component.ts
+++ b/src/app/components/notification-box/notification-box.component.ts
@@ -14,6 +14,7 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
     viewsCounter = 0;
     ticks: number = 1000;
     progress: number = 0;
+    isAdLoaded = false;
     isVisible = false;
     interval = 10;
 
@@ -33,7 +34,7 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
 
         this.timerSubscription = this.timer.subscribe(() => {
             this.ticks++;
-            if (this.ticks > this.breakTime && !this.isVisible && navigator.onLine) {
+            if (this.ticks > this.breakTime && !this.isVisible && navigator.onLine && this.isAdLoaded) {
                 this.ticks = 0;
                 this.showNotification();
                 this.viewsCounter++;
@@ -46,11 +47,14 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
         });
     }
 
+    onLoadingAdbutler(event) {
+        this.isAdLoaded = event;
+    }
+
     showNotification() {
         this.viewTimer = timer(0, 100);
-        this.isVisible = true;
         this.progress = 0;
-
+        this.isVisible = true;
         this.viewTimerSubscription = this.viewTimer.subscribe(() => {
             this.progress += 1;
             if (this.progress > 100) {