diff --git a/src/app/app.component.html b/src/app/app.component.html index 44e53824..69475d67 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,4 +1,4 @@
- +
diff --git a/src/app/components/adbutler/adbutler.component.html b/src/app/components/adbutler/adbutler.component.html index 2885bcf5..2e383bec 100644 --- a/src/app/components/adbutler/adbutler.component.html +++ b/src/app/components/adbutler/adbutler.component.html @@ -1 +1,11 @@ -
+
+
+ + {{ adBody }} + + + close +
+
diff --git a/src/app/components/adbutler/adbutler.component.scss b/src/app/components/adbutler/adbutler.component.scss index a72c224a..6fc078ce 100644 --- a/src/app/components/adbutler/adbutler.component.scss +++ b/src/app/components/adbutler/adbutler.component.scss @@ -1,13 +1,34 @@ .ad { - background-color: transparent; - width: 400px; + position: fixed; + 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 { diff --git a/src/app/components/adbutler/adbutler.component.ts b/src/app/components/adbutler/adbutler.component.ts index 00fc439f..77218968 100644 --- a/src/app/components/adbutler/adbutler.component.ts +++ b/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>(.*)\s*`; + isVisible: boolean = false; + isLightThemeEnabled: boolean = false; - constructor( - private httpClient: HttpClient - ) {} + // Default ad props in case adbutler request fails + 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() { - this.httpClient - .get('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;').subscribe( - response => { - if (response && response['placements'] && response['placements'].placement_1 && response['placements'].placement_1.body) { - this.onLoad.emit(true); - this.htmlCode = response['placements'].placement_1.body; - this.ad.nativeElement.insertAdjacentHTML('beforeend', this.htmlCode); - } else { - this.onLoad.emit(true); - this.htmlCode = this.staticCode; - } - }, - error => {} - ); - } + constructor( + private httpClient: HttpClient, + private themeService: ThemeService + ) {} + + hide() { + this.isVisible = false; + } + + ngOnInit() { + this.httpClient + .get('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;') + .subscribe(response => { + 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; + }); + } } diff --git a/src/app/components/notification-box/notification-box.component.html b/src/app/components/notification-box/notification-box.component.html index 350fe7ce..16470590 100644 --- a/src/app/components/notification-box/notification-box.component.html +++ b/src/app/components/notification-box/notification-box.component.html @@ -2,7 +2,7 @@
- + close
diff --git a/src/app/components/notification-box/notification-box.component.scss b/src/app/components/notification-box/notification-box.component.scss index da396715..424b7532 100644 --- a/src/app/components/notification-box/notification-box.component.scss +++ b/src/app/components/notification-box/notification-box.component.scss @@ -1,8 +1,8 @@ .notification-box { position: fixed; - bottom: 20px; - right: 20px; - width: 412px; + bottom: 0; + left: 0; + right: 0; height: 108px; } diff --git a/src/app/components/notification-box/notification-box.component.ts b/src/app/components/notification-box/notification-box.component.ts index 6814cf5c..b1d5db4d 100644 --- a/src/app/components/notification-box/notification-box.component.ts +++ b/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'); - var today = new Date().toISOString().substring(0, 10); + console.log('INIT') + // 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(); @@ -94,17 +95,17 @@ export class NotificationBoxComponent implements OnInit, OnDestroy { showNotification() { // localStorage.setItem('adbutler', new Date().toISOString().substring(0, 10)); - + this.viewTimer = timer(0, 100); this.progress = 0; this.isVisible = true; - this.viewTimerSubscription = this.viewTimer.subscribe(() => { - this.progress += 1; - if (this.progress > 100) { - this.isVisible = false; - this.viewTimerSubscription.unsubscribe(); - } - }); + // this.viewTimerSubscription = this.viewTimer.subscribe(() => { + // this.progress += 1; + // if (this.progress > 100) { + // this.isVisible = false; + // this.viewTimerSubscription.unsubscribe(); + // } + // }); } closeNotification() {