From ca20e0365c84f27c06d77137ca34f830f2e3d5d2 Mon Sep 17 00:00:00 2001
From: Bastian Dehn <hhaalo@arcor.de>
Date: Fri, 10 Jun 2022 20:59:58 +0200
Subject: [PATCH] add: html export service

---
 src/app/app.component.html          | 17 +++++++++++++----
 src/app/app.component.ts            | 26 ++++++++++++++++++++++----
 src/app/html-export.service.spec.ts | 16 ++++++++++++++++
 src/app/html-export.service.ts      | 24 ++++++++++++++++++++++++
 4 files changed, 75 insertions(+), 8 deletions(-)
 create mode 100644 src/app/html-export.service.spec.ts
 create mode 100644 src/app/html-export.service.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 4c8ec20..c2f9e54 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -5,12 +5,21 @@
 	<button class="button"
 		type="button"
 		id="exportJson"
-		(click)="exportJson()">Export</button>
-	<a #exportLink
-		id="exportLink"
+		(click)="exportJson()">Export Json</button>
+	<a #exportJsonLink
+		id="exportJsonLink"
 		[href]="downloadJsonHref"
 		hidden="hidden"
-		download="speisekarte.json">Download</a>
+		download="speisekarte.json">Json</a>
+	<button class="button"
+		type="button"
+		id="exportHtml"
+		(click)="exportHtml()">Export Html</button>
+	<a #exportHtmlLink
+		id="exportHtmlLink"
+		[href]="downloadHtmlHref"
+		hidden="hidden"
+		download="speisekarte.html">Html</a>
 	<button class="button"
 		type="button"
 		id="addTitle"
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 4bf521f..29da96d 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -5,6 +5,7 @@ import { ISubtitle } from './isubtitle';
 import { IFood } from './ifood';
 import { IFoodCard } from './ifood-card';
 import { JsonFileService } from './json-file.service';
+import { HtmlExportService } from './html-export.service';
 
 @Component({
 	selector: 'app-root',
@@ -14,11 +15,14 @@ import { JsonFileService } from './json-file.service';
 
 export class AppComponent implements AfterViewChecked
 {
-	@ViewChild("exportLink")
+	@ViewChild("exportJsonLink") exportJsonLink: any;
+	@ViewChild("exportHtmlLink") exportHtmlLink: any;
 	public foodcard: IFoodCard = { Titles: [] };
 	public downloadJsonHref: SafeUrl = "";
+	public downloadHtmlHref: SafeUrl = "";
 
-	constructor(private jsonFileService: JsonFileService) {}
+	constructor(private jsonFileService: JsonFileService,
+		private htmlExportService: HtmlExportService) {}
 
 	public exportJson(): void
 	{
@@ -28,6 +32,14 @@ export class AppComponent implements AfterViewChecked
 		});
 	}
 
+	public exportHtml(): void
+	{
+		let observ = this.htmlExportService.exportHtml(this.foodcard);
+		observ.subscribe((next) => {
+			this.downloadHtmlHref = next;
+		});
+	}
+
 	public fileEvent(event: any): void
 	{
 		let importobserv = this.jsonFileService.importJson(event);
@@ -44,9 +56,15 @@ export class AppComponent implements AfterViewChecked
 	public ngAfterViewChecked()
 	{
 		if (this.downloadJsonHref !== "") {
-			let link = document.getElementById("exportLink");
+			let link = document.getElementById("exportJsonLink");
+			link?.click();
+			Promise.resolve().then(() => this.downloadJsonHref = "");
+		}
+
+		if (this.downloadHtmlHref !== "") {
+			let link = document.getElementById("exportHtmlLink");
 			link?.click();
-			this.downloadJsonHref = "";
+			Promise.resolve().then(() => this.downloadHtmlHref = "");
 		}
 	}
 }
diff --git a/src/app/html-export.service.spec.ts b/src/app/html-export.service.spec.ts
new file mode 100644
index 0000000..f25651b
--- /dev/null
+++ b/src/app/html-export.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { HtmlExportService } from './html-export.service';
+
+describe('HtmlExportService', () => {
+  let service: HtmlExportService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(HtmlExportService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/html-export.service.ts b/src/app/html-export.service.ts
new file mode 100644
index 0000000..9a67f22
--- /dev/null
+++ b/src/app/html-export.service.ts
@@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
+import { Observable } from 'rxjs';
+import { IFoodCard } from './ifood-card';
+
+@Injectable({
+	providedIn: 'root'
+})
+
+export class HtmlExportService
+{
+	constructor(private sanitizer: DomSanitizer) {}
+
+	public exportHtml(foodcard: IFoodCard): Observable<SafeUrl>
+	{
+		let observ = new Observable<SafeUrl>((observ) => {
+			let html: string = '<html lang="de"><head><meta charset="utf-9"><meta name="viewport" content="width-device-width, initial-scale=1.0"><title>Speisekarte</title></head><body></body></html>';
+			let result = this.sanitizer.bypassSecurityTrustUrl("data:text/html;charset=UTF-8," + html);
+			observ.next(result);
+		});
+
+		return observ;
+	}
+}
-- 
2.39.5