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

rm notification-box component

Browse Source
This commit is contained in:
Ajay Sabhaney 2021-04-05 13:55:33 -04:00
parent 6b676fa91e
commit 5832f9f724
4 changed files with 0 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,9 +0,0 @@
<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" [ngClass]="{lightTheme: isLightThemeEnabled}">
<ng-template #dynamicComponentContainer></ng-template>
<mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
</div>
</div>
</div>

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

@ -1,39 +0,0 @@
.notification-box {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 108px;
}
.content {
background-color: #263238;
padding-left: 8px;
border-left: 2px solid #0097a7;
border-right: 2px solid #0097a7;
border-bottom: 2px solid #0097a7;
}
.lightTheme {
background-color: white!important;
}
.close-button {
position: fixed;
bottom: 90px;
right: 30px;
cursor: pointer;
}
.mat-icon:hover {
color: #0097a7;
}
.check-button {
background-color: #0097a7;
margin-top: -10px;
}
.hidden {
visibility: hidden;
}

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

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

@ -1,119 +0,0 @@
import { Component, OnInit, OnDestroy, ComponentFactoryResolver, ViewContainerRef, ViewChild } from '@angular/core';
import { timer, Observable, Subscription } from 'rxjs';
import { ThemeService } from '../../services/theme.service';
import { AdbutlerComponent } from '../adbutler/adbutler.component';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
@Component({
selector: 'app-notification-box',
templateUrl: './notification-box.component.html',
styleUrls: ['./notification-box.component.scss']
})
export class NotificationBoxComponent implements OnInit, OnDestroy {
@ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer;
timer: Observable<number>;
viewTimer: Observable<number>;
timerSubscription: Subscription;
viewTimerSubscription: Subscription;
viewsCounter = 0;
ticks: number = 1000;
progress: number = 0;
isAdLoaded = false;
isVisible = false;
interval = 10;
delayTime: number = 5000;
breakTime: number = 20 * 60;
isEndless: boolean = true;
numberOfViews: number = 1;
isLightThemeEnabled: boolean = false;
constructor(
private themeService: ThemeService,
private componentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef,
private location: Location
) {}
ngOnInit() {
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();
if (!this.location.path().includes('nodes')) this.startTimer();
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
this.themeService.themeChanged.subscribe((value: string) => {
this.themeService.getActualTheme() === 'light' ? this.isLightThemeEnabled = true : this.isLightThemeEnabled = false;
});
}
ngAfterViewInit() {
this.createDynamicAdComponent();
}
createDynamicAdComponent() : void {
const factory = this.componentFactoryResolver.resolveComponentFactory(AdbutlerComponent);
const componentRef = this.dynamicComponentContainer.createComponent(factory);
componentRef.instance.theme = this.themeService.getActualTheme() === 'light';
componentRef.instance.onLoad.subscribe(event => {
this.onLoadingAdbutler(event);
})
componentRef.changeDetectorRef.detectChanges();
}
startTimer() {
this.timer = timer(this.delayTime, 1000);
setTimeout(() => {
this.showNotification();
}, 5000);
this.timerSubscription = this.timer.subscribe(() => {
this.ticks++;
if (this.ticks > this.breakTime && !this.isVisible && navigator.onLine && this.isAdLoaded) {
this.ticks = 0;
this.showNotification();
this.viewsCounter++;
if (!this.isEndless){
if (this.viewsCounter === this.numberOfViews) {
this.timerSubscription.unsubscribe();
}
}
}
});
}
onLoadingAdbutler(event) {
this.isAdLoaded = event;
}
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();
// }
// });
}
closeNotification() {
this.isVisible = false;
}
ngOnDestroy() {
this.timerSubscription.unsubscribe();
this.viewTimerSubscription.unsubscribe();
}
}