From 098eaab15d7723c2cfc2dab848b2ea9307b2812a Mon Sep 17 00:00:00 2001 From: Kyle Kemp Date: Wed, 24 Apr 2024 08:59:34 -0500 Subject: [PATCH] closes #2 --- interfaces/product.ts | 1 + package-lock.json | 86 ++++++++++++++++++++++++++++++++++--- package.json | 1 + src/app/card/card.page.html | 18 +++++--- src/app/card/card.page.ts | 11 +++++ src/app/meta.service.ts | 13 ++++++ 6 files changed, 118 insertions(+), 12 deletions(-) diff --git a/interfaces/product.ts b/interfaces/product.ts index 015b2ff..12f44e2 100644 --- a/interfaces/product.ts +++ b/interfaces/product.ts @@ -12,4 +12,5 @@ export interface IProductDefinition { export interface IProduct extends IProductDefinition { filters: IProductFilter[]; subproducts: IProductDefinition[]; + cardTemplate: string; } diff --git a/package-lock.json b/package-lock.json index ad95135..1bbdc72 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "@siemens/ngx-datatable": "^22.2.0", "compress-json": "^2.1.2", "csv-parse": "^5.3.2", + "handlebars": "^4.7.8", "ionicons": "^6.0.3", "lodash": "^4.17.21", "luxon": "^3.1.0", @@ -11687,6 +11688,34 @@ "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==", "dev": true }, + "node_modules/handlebars": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "dependencies": { + "minimist": "^1.2.5", + "neo-async": "^2.6.2", + "source-map": "^0.6.1", + "wordwrap": "^1.0.0" + }, + "bin": { + "handlebars": "bin/handlebars" + }, + "engines": { + "node": ">=0.4.7" + }, + "optionalDependencies": { + "uglify-js": "^3.1.4" + } + }, + "node_modules/handlebars/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/har-schema": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", @@ -15675,7 +15704,6 @@ "version": "1.2.7", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", - "dev": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -15947,8 +15975,7 @@ "node_modules/neo-async": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", - "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", - "dev": true + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" }, "node_modules/ngx-clipboard": { "version": "15.1.0", @@ -20379,6 +20406,18 @@ "node": "*" } }, + "node_modules/uglify-js": { + "version": "3.17.4", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz", + "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==", + "optional": true, + "bin": { + "uglifyjs": "bin/uglifyjs" + }, + "engines": { + "node": ">=0.8.0" + } + }, "node_modules/unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -21170,6 +21209,11 @@ "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==", "dev": true }, + "node_modules/wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" + }, "node_modules/wrap-ansi": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", @@ -29718,6 +29762,25 @@ "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==", "dev": true }, + "handlebars": { + "version": "4.7.8", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.7.8.tgz", + "integrity": "sha512-vafaFqs8MZkRrSX7sFVUdo3ap/eNiLnb4IakshzvP56X5Nr1iGKAIqdX6tMlm6HcNRIkr6AxO5jFEoJzzpT8aQ==", + "requires": { + "minimist": "^1.2.5", + "neo-async": "^2.6.2", + "source-map": "^0.6.1", + "uglify-js": "^3.1.4", + "wordwrap": "^1.0.0" + }, + "dependencies": { + "source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==" + } + } + }, "har-schema": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz", @@ -32691,8 +32754,7 @@ "minimist": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz", - "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==", - "dev": true + "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==" }, "minipass": { "version": "3.3.4", @@ -32890,8 +32952,7 @@ "neo-async": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz", - "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==", - "dev": true + "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==" }, "ngx-clipboard": { "version": "15.1.0", @@ -36179,6 +36240,12 @@ "optional": true, "peer": true }, + "uglify-js": { + "version": "3.17.4", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz", + "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==", + "optional": true + }, "unbox-primitive": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz", @@ -36750,6 +36817,11 @@ "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==", "dev": true }, + "wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" + }, "wrap-ansi": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", diff --git a/package.json b/package.json index 25ec5af..0bf5219 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "@siemens/ngx-datatable": "^22.2.0", "compress-json": "^2.1.2", "csv-parse": "^5.3.2", + "handlebars": "^4.7.8", "ionicons": "^6.0.3", "lodash": "^4.17.21", "luxon": "^3.1.0", diff --git a/src/app/card/card.page.html b/src/app/card/card.page.html index ec4710b..a063159 100644 --- a/src/app/card/card.page.html +++ b/src/app/card/card.page.html @@ -23,18 +23,26 @@ - + @if(cardData.text) { + -
- {{ cardData.text }} +
+

{{ cardData.text }}

+ + @if(template) { +
+
+ } + } - {{ tag - }} + @for(tag of cardData.tags; track tag) { + {{ tag }} + } diff --git a/src/app/card/card.page.ts b/src/app/card/card.page.ts index 00ec989..48580aa 100644 --- a/src/app/card/card.page.ts +++ b/src/app/card/card.page.ts @@ -2,6 +2,9 @@ import { Component, inject, type OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { type ICard } from '../../../interfaces'; import { CardsService } from '../cards.service'; +import { MetaService } from '../meta.service'; + +import Handlebars from 'handlebars'; @Component({ selector: 'app-card', @@ -12,8 +15,10 @@ export class CardPage implements OnInit { private router = inject(Router); private route = inject(ActivatedRoute); private cardsService = inject(CardsService); + private metaService = inject(MetaService); public cardData: ICard | undefined = undefined; + public template = ''; ngOnInit() { const cardId = this.route.snapshot.paramMap.get('id'); @@ -23,6 +28,12 @@ export class CardPage implements OnInit { this.router.navigate(['/']); return; } + + const template = this.metaService.getTemplateByProductId( + this.cardData.product + ); + const compiledTemplate = Handlebars.compile(template); + this.template = compiledTemplate(this.cardData); } search(query: string) { diff --git a/src/app/meta.service.ts b/src/app/meta.service.ts index 347c140..b9950e7 100644 --- a/src/app/meta.service.ts +++ b/src/app/meta.service.ts @@ -8,6 +8,7 @@ import { environment } from '../environments/environment'; }) export class MetaService { private allProducts: IProduct[] = []; + private templatesByProductId: Record = {}; public get products() { return this.allProducts; @@ -18,5 +19,17 @@ export class MetaService { const realData = await metaData.json(); this.allProducts = realData; + + this.loadTemplates(); + } + + private loadTemplates() { + this.allProducts.forEach((product) => { + this.templatesByProductId[product.id] = product.cardTemplate; + }); + } + + public getTemplateByProductId(productId: string): string { + return this.templatesByProductId[productId]; } }