Hacking including plain javascript into Angular, Ref: #361

src/app/app.module.ts

@@ -177,6 +177,7 @@ import { StartCaptureDialogComponent } from './components/project-map/packet-cap
 import { SuspendLinkActionComponent } from './components/project-map/context-menu/actions/suspend-link/suspend-link-action.component';
 import { ResumeLinkActionComponent } from './components/project-map/context-menu/actions/resume-link-action/resume-link-action.component';
 import { StopCaptureActionComponent } from './components/project-map/context-menu/actions/stop-capture/stop-capture-action.component';
+import { AdbutlerComponent } from './components/adbutler/adbutler.component';
 
 if (environment.production) {
   Raven.config('https://b2b1cfd9b043491eb6b566fd8acee358@sentry.io/842726', {
@@ -291,7 +292,8 @@ if (environment.production) {
     NameFilter,
     ListOfSnapshotsComponent,
     CustomAdaptersComponent,
-    NodesMenuComponent
+    NodesMenuComponent,
+    AdbutlerComponent
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,14 @@
+<table style="width: 600px; border: 0px solid #C0C0C0; background-color: #263238" cellSpacing=0 cellPadding=3>
+  <tr><td height=80 style="background-color: #263238" #code>
+  <div id="{{ this.divId }}"></div>
+
+
+  <!-- Begin Ad Code -->
+
+  
+  <!-- End Ad Code -->
+  </td></tr>
+  </table>
+  
+  
+  

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

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AdbutlerComponent } from './adbutler.component';
+
+describe('AdbutlerComponent', () => {
+  let component: AdbutlerComponent;
+  let fixture: ComponentFixture<AdbutlerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AdbutlerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AdbutlerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,61 @@
+import { Component, OnInit, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+
+@Component({
+  selector: 'app-adbutler',
+  templateUrl: './adbutler.component.html',
+  styleUrls: ['./adbutler.component.scss']
+})
+export class AdbutlerComponent implements OnInit, AfterViewInit {
+  id: number;
+  setId: number;
+  rnd: number;
+  abkw: string;
+  sparkCounter: number;
+  divId: string;
+
+  @ViewChild('code') code: ElementRef;
+
+  constructor() { }
+
+  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;
+  }
+
+  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);
+  }
+
+}

src/app/components/servers/servers.component.html

@@ -55,5 +55,7 @@
     </div>
 
     <div class="buttons-bar"><button mat-raised-button color="primary" (click)="createModal()">Add server</button></div>
+
+    <app-adbutler></app-adbutler>
   </div>
 </div>