public exportHtml(foodcard: IFoodCard): Observable<SafeUrl>
{
let observ = new Observable<SafeUrl>((observ) => {
- let html: string = '<html lang="de">';
- html += '<head>';
- html += '<meta charset="utf-8">';
- 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.cssExportContent;
- html += '</style>';
- html += '<style type="text/css" media="print">';
- html += this.cssPrintExportContent;
- html += '</style>';
- html += '</head>';
- html += '<body>';
- html += '<div class="foodcard">';
- html += this.createHtmlTitles(foodcard.Titles);
- html += '<p>Fragen zu Allergenen beantwortet Ihnen gerne unser Servicepersonal</p>';
- html += '</div>';
- html += '</body>'
- html += '</html>';
- let result = this.sanitizer.bypassSecurityTrustUrl("data:text/html;charset=UTF-8," + html);
+ let doctype = "<!DOCTYPE html>";
+ let doc = document.implementation.createHTMLDocument();
+ doc.documentElement.lang = "de";
+ doc.title = "Speisekarte";
+
+ let element = document.createElement("meta");
+ element.setAttribute("charset", "utf-8");
+ doc.head.appendChild(element);
+
+ element = document.createElement("meta");
+ element.setAttribute("name", "viewport");
+ element.setAttribute("content", "width=device-width, initial-scale=1");
+ doc.head.appendChild(element);
+
+ let styleElement = document.createElement("style");
+ styleElement.setAttribute("type", "text/css");
+ styleElement.setAttribute("media", "screen");
+ styleElement.innerHTML = this.cssExportContent;
+ doc.head.appendChild(styleElement);
+
+ styleElement = document.createElement("style");
+ styleElement.setAttribute("type", "text/css");
+ styleElement.setAttribute("media", "print");
+ styleElement.innerHTML = this.cssPrintExportContent;
+ doc.head.appendChild(styleElement);
+
+ let divElement = document.createElement("div");
+ divElement.classList.add("foodcard");
+ divElement.appendChild(this.createHtmlTitles(foodcard.Titles));
+ doc.body.appendChild(divElement);
+
+ let pElement = document.createElement("p");
+ pElement.innerText = "Fragen zu Allergenen beantwortet Ihnen gerne unser Servicepersonal";
+ doc.body.appendChild(pElement);
+
+ let result = this.sanitizer.bypassSecurityTrustUrl("data:text/html;charset=UTF-8," + doctype + doc.documentElement.outerHTML);
observ.next(result);
});
});
}
- private createHtmlTitles(titles: ITitle[]): string
+ private createHtmlTitles(titles: ITitle[]): HTMLDivElement
{
- let titlestring = "";
+ let divElement = document.createElement("div");
+ divElement.classList.add("title");
+ let element = document.createElement("h1");
for (let i = 0; i < titles.length; i++) {
- titlestring += '<h1>' + titles[i].Title + '</h1>';
- titlestring += this.createHtmlSubtitles(titles[i].Subtitles);
+ element = document.createElement("h1");
+ element.innerText = titles[i].Title;
+ divElement.appendChild(element);
+ divElement.appendChild(this.createHtmlSubtitles(titles[i].Subtitles));
}
- return titlestring;
+ return divElement;
}
- private createHtmlSubtitles(subtitles: ISubtitle[]): string
+ private createHtmlSubtitles(subtitles: ISubtitle[]): HTMLDivElement
{
- let subtitlestring = "";
+ let divElement = document.createElement("div");
+ divElement.classList.add("subtitle");
+ let element = document.createElement("h2");
for (let i = 0; i < subtitles.length; i++) {
- subtitlestring += '<h2>' + subtitles[i].Subtitle + '</h2>';
- subtitlestring += this.createHtmlFoods(subtitles[i].Foods);
+ element = document.createElement("h2");
+ element.innerText = subtitles[i].Subtitle;
+ divElement.appendChild(element);
+ divElement.appendChild(this.createHtmlFoods(subtitles[i].Foods));
}
- return subtitlestring;
+ return divElement
}
- private createHtmlFoods(foods: IFood[]): string
+ private createHtmlFoods(foods: IFood[]): HTMLDivElement
{
- let foodstring = "";
+ let divElement = document.createElement("div");
+ divElement.classList.add("foods");
+ let divSubElement = document.createElement("div");
+ let divFoodElement = document.createElement("div");
for (let i = 0; i < foods.length; i++) {
- foodstring += '<div class="grid foodmenu">';
- foodstring += '<div class="food">' + foods[i].Food + '</div>';
- foodstring += '<div class="sideDish">' + foods[i].sideDish + '</div>';
- foodstring += '<div class="price">' + foods[i].price + '</div>'
- foodstring += '</div>';
+ divSubElement = document.createElement("div");
+ divSubElement.classList.add("grid");
+ divSubElement.classList.add("foodmenu");
+ divElement.appendChild(divSubElement);
+
+ divFoodElement = document.createElement("div");
+ divFoodElement.classList.add("food");
+ divFoodElement.innerText = foods[i].Food;
+ divSubElement.appendChild(divFoodElement);
+
+ divFoodElement = document.createElement("div");
+ divFoodElement.classList.add("sideDish");
+ divFoodElement.innerText = foods[i].sideDish;
+ divSubElement.appendChild(divFoodElement);
+
+ divFoodElement = document.createElement("div");
+ divFoodElement.classList.add("price");
+ divFoodElement.innerText = foods[i].price;
+ divSubElement.appendChild(divFoodElement);
}
- return foodstring;
+ return divElement;
}
}
projects / speisekarten-editor.git / commitdiff