Implementation of custom html ad

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

@@ -1,12 +1 @@
-
-<table class="butler" height=80 [ngClass]="(theme=='dark')?'butlerdark':'butlerlight'" cellSpacing=0 cellPadding=3>
-  <tr><td height=80 [ngClass]="(theme=='dark')?'rowdark':'rowlight'" #code>
-  <div id="{{ this.divId }}"></div>
-
-
-  <!-- Begin Ad Code -->
-
-  
-  <!-- End Ad Code -->
-  </td></tr>
-</table>
+<div class="ad" #ad></div>

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

@@ -1,27 +1,24 @@
-.butler a {
+.ad {
+  background-color: #263238;
+  width: 400px;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-size: 12px;
+}
+
+button {
+  background-color: #0097a7;
+  margin-top: 10px;
+  border: none;
+  outline: none;
+  padding: 5px;
+  color: white;
+  font-weight: bold;
+  padding-right: 15px;
+  padding-left: 15px;
+  border-radius: 5px;
+}
+
+a {
   color: #0097a7;
 }
-
-.butler {
-  font-size: 14px;
-}
-
-.butlerdark {
-  width: 400px; 
-  border: 0px solid #C0C0C0; 
-  background-color: #263238;
-}
-
-.butlerlight {
-  width: 400px; 
-  border: 0px solid #C0C0C0; 
-  background-color: white;
-}
-
-.rowdark {
-  background-color: #263238;
-}
-
-.rowlight {
-  background-color: #263238;
-}

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

@@ -1,4 +1,6 @@
-import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, ViewEncapsulation, OnDestroy, Input } from '@angular/core';
+import { Component, OnInit, ElementRef, ViewChild, ViewEncapsulation, Input } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { AdButlerResponse } from '../../models/adbutler';
 
 @Component({
   selector: 'app-adbutler',
@@ -6,64 +8,20 @@ import { Component, OnInit, ElementRef, ViewChild, AfterViewInit, ViewEncapsulat
   styleUrls: ['./adbutler.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class AdbutlerComponent implements OnInit, AfterViewInit, OnDestroy {
-  id: number;
-  setId: number;
-  rnd: number;
-  abkw: string;
-  sparkCounter: number;
-  divId: string;
-
-  @ViewChild('code') code: ElementRef;
+export class AdbutlerComponent implements OnInit {
+  @ViewChild('ad') ad: ElementRef;
   @Input() theme: string;
 
-  constructor() { }
+  htmlCode: string;
+
+  constructor(
+    private httpClient: HttpClient
+  ) {}
 
   ngOnInit() {
-    var loadedTextAds355353 = (window as any).loadedTextAds355353;
-    if(loadedTextAds355353 == null) {
-      (window as any).loadedTextAds355353 = new Array();
-    }
-
-    (window as any).id355353 = 165803;
-    (window as any).setID355353 = 355353;
-    (window as any).rnd = (window as any).rnd || Math.floor(Math.random()*10e6);
-    (window as any).abkw = (window as any).abkw ||'';
-
-    var sparkCounter355353 = (window as any).sparkCounter355353;
-    if(sparkCounter355353 == null) {
-      sparkCounter355353 = 1;
-    }
-    else {
-      sparkCounter355353 = sparkCounter355353 + 1
-    }
-
-    (window as any).sparkCounter355353 = sparkCounter355353;
-    (window as any).loadedTextAds355353[sparkCounter355353] = false;
-
-    this.id = (window as any).id355353;
-    this.divId = "abta355353" + sparkCounter355353;
-    this.setId = (window as any).setID355353;
-    this.abkw = (window as any).abkw;
-    this.rnd = (window as any).rnd;
-    this.sparkCounter = (window as any).sparkCounter355353;
+    this.httpClient.get('https://servedbyadbutler.com/adserve/;ID=165803;size=0x0;setID=371476;type=json;').subscribe((response: AdButlerResponse) => {
+      this.htmlCode = response.placements.placement_1.body;
+      this.ad.nativeElement.insertAdjacentHTML('beforeend', this.htmlCode);
+    });
   }
-
-  ngAfterViewInit() {
-    const scriptUrl = "https://servedbyadbutler.com/adserve/;ID=" + this.id + ";setID=" + this.setId + ";type=textad;kw=" + this.abkw + ";pid=" + this.rnd + ";layoutID=" + this.sparkCounter;
-
-    const scriptElement = document.createElement('script');
-    scriptElement.src = scriptUrl;
-    scriptElement.type = 'text/javascript';
-    scriptElement.async = true;
-    scriptElement.charset = 'utf-8';
-    this.code.nativeElement.appendChild(scriptElement);
-  }
-
-  ngOnDestroy() {
-    // start from 0 when switching pages
-    (window as any).sparkCounter355353 = 0;
-    delete (window as any).loadedTextAds355353[this.sparkCounter];
-  }
-
 }

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

@@ -1,10 +1,9 @@
 <div class="notification-box" *ngIf="isVisible">
     <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
-    <div style="display: flex; height: 82px;">
+    <div style="display: flex; height: 102px;">
         <div class="content">
             <app-adbutler theme="dark"></app-adbutler>
             <mat-icon (click)="closeNotification()" class="close-button">close</mat-icon>
-            <!-- <button class="check-button" mat-button>CHECK IT OUT</button> -->
         </div>
     </div>
 </div>

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

@@ -3,7 +3,7 @@
     bottom: 20px;
     right: 20px;
     width: 412px;
-    height: 88px;
+    height: 108px;
 }
 
 .content {
@@ -16,7 +16,7 @@
 
 .close-button {
     position: fixed;
-    bottom: 70px;
+    bottom: 90px;
     right: 30px;
     cursor: pointer;
 }

src/app/models/adbutler.ts

@@ -0,0 +1,23 @@
+export interface Placement1 {
+    banner_id: string;
+    width: string;
+    height: string;
+    alt_text: string;
+    accompanied_html: string;
+    target: string;
+    tracking_pixel: string;
+    body: string;
+    redirect_url: string;
+    refresh_url: string;
+    refresh_time: string;
+    image_url: string;
+}
+
+export interface Placements {
+    placement_1: Placement1;
+}
+
+export interface AdButlerResponse {
+    status: string;
+    placements: Placements;
+}