simplify ad banner, make it a footer (non-timer based)

src/app/app.component.html

@@ -1,4 +1,4 @@
 <div [ngClass]="{dark: darkThemeEnabled, light: !darkThemeEnabled}">
     <router-outlet></router-outlet>
-    <app-notification-box></app-notification-box>    
+    <app-adbutler></app-adbutler>
 </div>

src/app/components/adbutler/adbutler.component.html

@@ -1 +1,11 @@
-<div class="ad" #ad></div>
+<div class="ad" [ngClass]="{hidden: !isVisible, lightTheme: isLightThemeEnabled}">
+    <div class="adInnerContainer">
+        <span class="adBody">
+            <a [href]="adUrl" target="_blank">{{ adBody }}</a>
+        </span>
+        <button>
+            <a target="_blank" [href]="adUrl">{{ buttonLabel }}</a>
+        </button>
+        <mat-icon (click)="hide()" class="close-button">close</mat-icon>
+    </div>
+</div>

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

@@ -1,13 +1,34 @@
 .ad {
-  background-color: transparent;
+  position: fixed;
-  width: 400px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #a8ecff;
   padding-top: 10px;
   padding-bottom: 10px;
   font-size: 12px;
+  font-weight: bold;
+}
+
+.adInnerContainer {
+    margin: auto;
+    text-align: center;
+}
+
+.adBody {
+    padding-right: 16px;
+}
+
+.lightTheme {
+    background-color: #ddf9ff;
+}
+
+.hidden {
+    visibility: hidden;
 }
 
 button {
-  background-color: #0097a7;
+  background-color: #01d4ff;
   margin-top: 2px;
   border: none;
   outline: none;
@@ -16,11 +37,11 @@ button {
   font-weight: bold;
   padding-right: 15px;
   padding-left: 15px;
-  border-radius: 4px;
+  border-radius: 6px;
 }
 
 a {
-  color: #0097a7;
+  color: #122124;
 }
 
 button {

src/app/components/adbutler/adbutler.component.ts

@@ -1,47 +1,68 @@
-import { Component, OnInit, ElementRef, ViewChild, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import { ThemeService } from '../../services/theme.service';
 import { AdButlerResponse } from '../../models/adbutler';
-import { ToasterService } from '../../services/toaster.service';
+
+const adButlerResponseBodyRegex: RegExp = /<a href="(.*)">(.*)<\/a><br\/>(.*)<br\/>\s*<button><a .*>(.*)<\/a>\s*<\/button>/i
 
 @Component({
-  selector: 'app-adbutler',
+    selector: 'app-adbutler',
-  templateUrl: './adbutler.component.html',
+    templateUrl: './adbutler.component.html',
-  styleUrls: ['./adbutler.component.scss'],
+    styleUrls: ['./adbutler.component.scss']
-  encapsulation: ViewEncapsulation.None
 })
+
 export class AdbutlerComponent implements OnInit {
-  @ViewChild('ad') ad: ElementRef;
+    isVisible: boolean = false;
-  theme: string;
+    isLightThemeEnabled: boolean = false;
-  onLoad = new EventEmitter();
-  htmlCode: string;
-  staticCode: string = `<a href="https://try.solarwinds.com/gns3-free-toolset-giveaway?CMP=LEC-HAD-GNS3-SW_NA_X_NP_X_X_EN_STSGA_SW-ST-20200901_ST_OF1_TRY-NWSLTR">
-  Access Our Favorite Network Free Tools!
- </a><br/>
- Access 20+ network performance management, monitoring, and troubleshooting tools for FREE ($200 Value).<br/>
- <button>
- <a target="_blank" href="https://try.solarwinds.com/gns3-free-toolset-giveaway?CMP=LEC-HAD-GNS3-SW_NA_X_NP_X_X_EN_STSGA_SW-ST-20200901_ST_OF1_TRY-NWSLTR">
- Check it out!
- </a>
- </button>`;
 
-  constructor(
+    // Default ad props in case adbutler request fails
-    private httpClient: HttpClient
+    adUrl: string = 'https://try.solarwinds.com/gns3-free-toolset-giveaway?CMP=LEC-HAD-GNS3-SW_NA_X_NP_X_X_EN_STSGA_SW-ST-20200901_ST_OF1_TRY-NWSLTR';
-  ) {}
+    adBody: string = 'Network Config Generator makes it easy configure network devices, including VLANs without opening the CLI'
+    buttonLabel: string = 'Check it out!'
 
-  ngOnInit() {
+    constructor(
-    this.httpClient
+        private httpClient: HttpClient,
-      .get('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;').subscribe(
+        private themeService: ThemeService
-        response => {
+    ) {}
-          if (response && response['placements'] && response['placements'].placement_1 && response['placements'].placement_1.body) {
+
-            this.onLoad.emit(true);
+    hide() {
-            this.htmlCode = response['placements'].placement_1.body;
+        this.isVisible = false;
-            this.ad.nativeElement.insertAdjacentHTML('beforeend', this.htmlCode);
+    }
-          } else {
+
-            this.onLoad.emit(true);
+    ngOnInit() {
-            this.htmlCode = this.staticCode;
+        this.httpClient
-          }
+            .get<AdButlerResponse>('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;')
-        },
+            .subscribe(response => {
-        error => {}
+                if (response?.placements?.placement_1?.body) {
-      );
+                    try {
-  }
+                        // Use a regexp to parse the AdButler response. Preferably we would use the AdButler API
+                        // directly to get the data we need through a JSON response, but making an API request
+                        // involves storing credentials, which would be unwise to store in this repo. Best thing
+                        // would to have gns3.com proxy the JSON ad data to this web ui app.
+                        const htmlWithoutNewlines = response.placements.placement_1.body.replace(/(\r\n|\n|\r)/gm, '');
+                        const parsedAdResponseParts = adButlerResponseBodyRegex.exec(htmlWithoutNewlines);
+
+                        // Ad title (2nd capture group) currently not used
+                        this.adUrl = parsedAdResponseParts[1].trim();
+                        this.adBody = parsedAdResponseParts[3].trim();
+                        this.buttonLabel = parsedAdResponseParts[4].trim();
+                    } catch (e) {}
+                }
+
+                this.isVisible = true;
+            },
+            error => {}
+        );
+
+        this.themeService.getActualTheme() === 'light'
+            ? this.isLightThemeEnabled = true
+            : this.isLightThemeEnabled = false;
+
+        this.themeService.themeChanged.subscribe((value: string) => {
+            console.log(value)
+            this.themeService.getActualTheme() === 'light'
+                ? this.isLightThemeEnabled = true
+                : this.isLightThemeEnabled = false;
+        });
+    }
 }

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

@@ -2,7 +2,7 @@
     <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
     <div style="display: flex; height: 102px;">
         <div class="content" [ngClass]="{lightTheme: isLightThemeEnabled}">
-            <template #dynamicComponentContainer></template>
+            <ng-template #dynamicComponentContainer></ng-template>
             <mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
         </div>
     </div>

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

@@ -1,8 +1,8 @@
 .notification-box {
     position: fixed;
-    bottom: 20px;
+    bottom: 0;
-    right: 20px;
+    left: 0;
-    width: 412px;
+    right: 0;
     height: 108px;
 }
 

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

@@ -39,8 +39,9 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
     ) {}
 
     ngOnInit() {
-        let adbutler = localStorage.getItem('adbutler');
+        console.log('INIT')
-        var today = new Date().toISOString().substring(0, 10);
+        // let adbutler = localStorage.getItem('adbutler');
+        // var today = new Date().toISOString().substring(0, 10);
 
         // to show ad once a day
         // if (!this.location.path().includes('nodes') && !(adbutler == today)) this.startTimer();
@@ -98,13 +99,13 @@ export class NotificationBoxComponent implements OnInit, OnDestroy {
         this.viewTimer = timer(0, 100);
         this.progress = 0;
         this.isVisible = true;
-        this.viewTimerSubscription = this.viewTimer.subscribe(() => {
+        // this.viewTimerSubscription = this.viewTimer.subscribe(() => {
-            this.progress += 1;
+        //     this.progress += 1;
-            if (this.progress > 100) {
+        //     if (this.progress > 100) {
-                this.isVisible = false;
+        //         this.isVisible = false;
-                this.viewTimerSubscription.unsubscribe();
+        //         this.viewTimerSubscription.unsubscribe();
-            }
+        //     }
-        });
+        // });
     }
 
     closeNotification() {