]> gitweb.hhaalo.de Git - speisekarten-editor.git/commitdiff
projects / speisekarten-editor.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 24303a8)
add: function load extern css file for export
authorBastian Dehn <hhaalo@arcor.de>
Mon, 13 Jun 2022 15:20:57 +0000 (17:20 +0200)
committerBastian Dehn <hhaalo@arcor.de>
Mon, 13 Jun 2022 15:45:33 +0000 (17:45 +0200)
src/app/html-export.service.ts patch | blob | history

diff --git a/src/app/html-export.service.ts b/src/app/html-export.service.ts
index e7e500afb6f6819322ce20f3b5d489dca59581f2..e1560b15cdbe02bc9575f6f6a7792288eeeaa968 100644 (file)
--- 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<SafeUrl>
        {
+               this.loadCssFile();
                let observ = new Observable<SafeUrl>((observ) => {
                        let html: string = '<html lang="de">';
                        html += '<head>';
@@ -23,7 +31,7 @@ export class HtmlExportService
                        html += '<meta name="viewport" content="width-device-width, initial-scale=1.0">';
                        html += '<title>Speisekarte</title>';
                        html += '<style type="text/css" media="screen">';
-                       html += this.createHtmlStyle();
+                       html += this.cssExportContent;
                        html += '</style>';
                        html += '</head>';
                        html += '<body>';
@@ -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
Speisekarten Editor