ExternalVendorCode/gns3-web-ui
1
0
Fork 0
mirror of https://github.com/GNS3/gns3-web-ui.git synced 2025-04-24 13:05:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ajay Sabhaney 2021-04-05 13:54:36 -04:00
parent 785855d3bd
commit 6b676fa91e
7 changed files with 112 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/app.component.html
View File

@ -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>

12
src/app/components/adbutler/adbutler.component.html
View File

@ -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>

31
src/app/components/adbutler/adbutler.component.scss
View File

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

97
src/app/components/adbutler/adbutler.component.ts
View File

@ -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',
templateUrl: './adbutler.component.html',
styleUrls: ['./adbutler.component.scss'],
encapsulation: ViewEncapsulation.None
selector: 'app-adbutler',
templateUrl: './adbutler.component.html',
styleUrls: ['./adbutler.component.scss']
})
export class AdbutlerComponent implements OnInit {
@ViewChild('ad') ad: ElementRef;
theme: string;
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>`;
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<AdButlerResponse>('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;
});
}
}

2
src/app/components/notification-box/notification-box.component.html
View File

@ -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>

6
src/app/components/notification-box/notification-box.component.scss
View File

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

21
src/app/components/notification-box/notification-box.component.ts
View File

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