Adds table of contents to user guide

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.html

@@ -1 +1,11 @@
-<div id='userguide' [innerHTML]="guideHTML"></div>
+<!-- <div class="container-fluid">
+	<div class="row">
+		<span class="custom-header">User Guide Editor</span>
+	</div>
+</div> -->
+<!-- <div id='userguide' [innerHTML]="guideHTML"></div> -->
+<div class="container-fluid">
+	<div class="row">
+		<iframe *ngIf="guideHTMLUrl" class="iframe" id='userguide' [src]="guideHTMLUrl"></iframe>
+	</div>
+</div>

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.scss

@@ -1,11 +1,27 @@
-:host ::ng-deep .href{
+:host ::ng-deep .href {
 	color: rgb(0, 0, 238) !important;
 }
 
-:host :hover ::ng-deep .href  {
+:host :hover ::ng-deep .href {
 	cursor: pointer !important;
 }
 
 #userguide {
-	margin: 20px;
+	// margin: 20px;
+}
+
+.custom-header {
+	font-size: 20px;
+	letter-spacing: 0px;
+	color: #212121;
+	margin-top: 67px;
+	margin-bottom: 38px;
+	opacity: 1;
+}
+
+.iframe {
+	width: 100%;
+	height: calc(100vh - 80px);
+	margin: 0px;
+	border: none;
 }

dmp-frontend/src/app/ui/user-guide/user-guide-content/user-guide-content.component.ts

@@ -2,59 +2,63 @@ import { Component, OnInit, AfterViewChecked } from '@angular/core';
 import { UserGuideService } from '@app/core/services/user-guide/user-guide.service';
 import { BaseComponent } from '@common/base/base.component';
 import { takeUntil } from 'rxjs/internal/operators/takeUntil';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 
 @Component({
-  selector: 'app-user-guide-content',
-  templateUrl: './user-guide-content.component.html',
-  styleUrls: ['./user-guide-content.component.scss']
+	selector: 'app-user-guide-content',
+	templateUrl: './user-guide-content.component.html',
+	styleUrls: ['./user-guide-content.component.scss']
 })
 export class UserGuideContentComponent extends BaseComponent implements OnInit, AfterViewChecked {
 
 
 	guideHTML: any;
+	guideHTMLUrl: SafeResourceUrl;
 	private scrollEvent: EventListener;
 
-  constructor(
-	  private userGuideService: UserGuideService,
-	  private sanitizer: DomSanitizer
-  ) { super(); }
+	constructor(
+		private userGuideService: UserGuideService,
+		private sanitizer: DomSanitizer
+	) { super(); }
 
-  ngOnInit() {
-	  this.scrollEvent = ((ev) => this.scroll(ev));
-	this.userGuideService.getUserGuide()
-	  .pipe(takeUntil(this._destroyed))
-	  .subscribe(response => {
-		const blob = new Blob([response.body], { type: 'text/html' });
-		this.readBlob(blob);
+	ngOnInit() {
+		this.scrollEvent = ((ev) => this.scroll(ev));
+		this.userGuideService.getUserGuide()
+			.pipe(takeUntil(this._destroyed))
+			.subscribe(response => {
+				const blob = new Blob([response.body], { type: 'text/html' });
+				this.readBlob(blob);
 
-	  });
-  }
+				// this.guideHTMLUrl = URL.createObjectURL(blob);
+				this.guideHTMLUrl = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(blob));
+				console.log(this.guideHTMLUrl)
+			});
+	}
 
-  ngAfterViewChecked(): void {
-	this.parse();
-}
-
-  readBlob(blob: Blob) {
-	const fr = new FileReader();
-	fr.onload = ev => {
-		this.guideHTML = this.sanitizer.bypassSecurityTrustHtml(fr.result as string);
+	ngAfterViewChecked(): void {
 		this.parse();
-	};
-	fr.readAsText(blob);
-  }
-
-  scroll(ev: Event) {
-    document.getElementById((ev.srcElement as any).getAttribute('path')).scrollIntoView({behavior: 'smooth', block: 'start'});
-  }
-
-  private parse() {
-	  const specialElements: HTMLCollection = document.getElementsByClassName('href');
-	  for (let i = 0; i < specialElements.length; i++) {
-		  const element = specialElements.item(i);
-		  element.removeEventListener('click', this.scrollEvent);
-		  element.addEventListener('click', this.scrollEvent);
-	  }
-  }
+	}
+
+	readBlob(blob: Blob) {
+		const fr = new FileReader();
+		fr.onload = ev => {
+			this.guideHTML = this.sanitizer.bypassSecurityTrustHtml(fr.result as string);
+			this.parse();
+		};
+		fr.readAsText(blob);
+	}
+
+	scroll(ev: Event) {
+		document.getElementById((ev.srcElement as any).getAttribute('path')).scrollIntoView({ behavior: 'smooth', block: 'start' });
+	}
+
+	private parse() {
+		const specialElements: HTMLCollection = document.getElementsByClassName('href');
+		for (let i = 0; i < specialElements.length; i++) {
+			const element = specialElements.item(i);
+			element.removeEventListener('click', this.scrollEvent);
+			element.addEventListener('click', this.scrollEvent);
+		}
+	}
 
 }