Speisekarte

From 80e2d1a29af48113c4fda881c134a185f8ff0632 Mon Sep 17 00:00:00 2001 From: Bastian Dehn Date: Mon, 13 Jun 2022 17:20:57 +0200 Subject: [PATCH] add: function load extern css file for export --- src/app/html-export.service.ts | 83 ++++++---------------------------- 1 file changed, 15 insertions(+), 68 deletions(-) diff --git a/src/app/html-export.service.ts b/src/app/html-export.service.ts index e7e500a..e1560b1 100644 --- a/src/app/html-export.service.ts +++ b/src/app/html-export.service.ts @@ -1,5 +1,6 @@ import { Injectable } from '@angular/core'; import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; +import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs'; import { IFoodCard } from './ifood-card'; import { ITitle } from './ititle'; @@ -12,10 +13,17 @@ import { IFood } from './ifood'; export class HtmlExportService { - constructor(private sanitizer: DomSanitizer) {} + private cssExportContent: string = ""; + + constructor(private sanitizer: DomSanitizer, + private httpclient: HttpClient) + { + this.loadCssFile(); + } public exportHtml(foodcard: IFoodCard): Observable { + this.loadCssFile(); let observ = new Observable((observ) => { let html: string = ''; html += ''; @@ -23,7 +31,7 @@ export class HtmlExportService html += ''; html += 'Speisekarte'; html += ''; html += ''; html += ''; @@ -40,73 +48,12 @@ export class HtmlExportService return observ; } - private createHtmlStyle(): string + private loadCssFile(): void { - let stylestring = "" - // Font - stylestring += '@import url("https://fonts.googleapis.com/css?family=Tangerine");'; - stylestring += '@font-face { font-family: "Tangerine"; }'; - - // foodcard - stylestring += '.foodcard { max-width: 60em; margin: 0 auto; }'; - stylestring += 'p { font-style: italic; text-align: center; }'; - - // Grid - stylestring += '.grid { display: grid;'; - stylestring += 'grid-template-columns: repeat(12, 1fr) }'; - - // Title - stylestring += 'h1 { font-family: "Tangerine", serif;'; - stylestring += 'text-align: center; font-size: 2.5em;'; - stylestring += 'margin: 1em 0; }'; - - // Subtitle - stylestring += 'h2 { font-family: "Tangerine", serif;'; - stylestring += 'text-align: center; font-size: 2em; }'; - - // FoodMenu - stylestring += '.foodmenu { text-align: center; }'; - - // Food - stylestring += '.food { grid-row: 1; grid-column: 1/13;'; - stylestring += 'font-size: 1.2em; font-weight: bold; }'; - - // SideDish - stylestring += '.sideDish { grid-row: 2; grid-column: 1/13;'; - stylestring += 'font-style: italic; }'; - - // Price - stylestring += '.price { grid-row: 3; grid-column: 1/13;'; - stylestring += 'margin-top: 0.5em; }'; - - // Bigger Media - stylestring += '@media only screen and (min-width: 46.875em) {'; - - // Title - stylestring += 'h1 { text-align: left; }'; - - // Subtitle - stylestring += 'h2 { text-align: left; }'; - - // FoodMenu - stylestring += '.foodmenu { padding: 0.5em 0;'; - stylestring += 'border-bottom: 0.125em solid gray;'; - stylestring += 'text-align: left; }'; - - // Food - stylestring += '.food { grid-row: 1; grid-column: 1/9;'; - stylestring += 'font-size: 1.5em; }'; - - // SideDish - stylestring += '.sideDish { grid-row: 2; grid-column: 1/13; }'; - - // Price - stylestring += '.price { grid-row: 1; grid-column: 9/13;'; - stylestring += 'text-align: right; font-size: 1.1em; }'; - - stylestring += '}'; - - return stylestring; + let loadcss = this.httpclient.get("assets/htmlexport.css", + { responseType: 'text' }); + loadcss.subscribe((content: any) => { + this.cssExportContent = content as string; }); } private createHtmlTitles(titles: ITitle[]): string -- 2.39.5