Merge pull request #575 from GNS3/Adbutler-error

Checking if ad is loaded correctly added

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'));

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.httpClient
-      this.htmlCode = response.placements.placement_1.body;
+      .get('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;').subscribe(
-      this.ad.nativeElement.insertAdjacentHTML('beforeend', this.htmlCode);
+        response => {
-    });
+          this.onLoad.emit(true);
+          this.htmlCode = response['placements'].placement_1.body;
+          this.ad.nativeElement.insertAdjacentHTML('beforeend', this.htmlCode);
+        },
+        error => this.toasterService.error(error)
+      );
   }
 }

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>

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

@@ -29,3 +29,7 @@
     background-color: #0097a7;
     margin-top: -10px;
 }
+
+.hidden {
+    visibility: hidden;
+}

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