From abf7595c030a1349ebb6ac88e0d3c635ebb6f059 Mon Sep 17 00:00:00 2001
From: Rainer Killinger <killinger@hrz.uni-frankfurt.de>
Date: Mon, 8 Feb 2021 14:42:18 +0100
Subject: [PATCH] refactor: i18n for dish item listings and details

---
 .../dish/dish-detail-content.component.ts     | 13 +------
 .../data/types/dish/dish-detail-content.html  | 39 ++++++++-----------
 .../types/dish/dish-list-item.component.ts    | 13 +------
 .../data/types/dish/dish-list-item.html       |  6 +--
 src/assets/i18n/de.json                       | 13 +++++--
 src/assets/i18n/en.json                       | 13 +++++--
 6 files changed, 42 insertions(+), 55 deletions(-)

diff --git a/src/app/modules/data/types/dish/dish-detail-content.component.ts b/src/app/modules/data/types/dish/dish-detail-content.component.ts
index ea34ef2f..1a8e41d4 100644
--- a/src/app/modules/data/types/dish/dish-detail-content.component.ts
+++ b/src/app/modules/data/types/dish/dish-detail-content.component.ts
@@ -13,8 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {Component, Input} from '@angular/core';
-import {SCDish, SCThing, SCTranslations} from '@openstapps/core';
-import {SCThingTranslator} from '@openstapps/core';
+import {SCDish} from '@openstapps/core';
 
 /**
  * TODO
@@ -28,22 +27,14 @@ export class DishDetailContentComponent {
    * TODO
    */
   @Input() item: SCDish;
-  /**
-   * TODO
-   */
-  @Input() language: keyof SCTranslations<SCThing>;
   /**
    * TODO
    */
   objectKeys = Object.keys;
-  /**
-   * TODO
-   */
-  translator: SCThingTranslator;
   /**
    * TODO
    */
   constructor() {
-    this.translator = new SCThingTranslator(this.language);
+    // nothing yet
   }
 }
diff --git a/src/app/modules/data/types/dish/dish-detail-content.html b/src/app/modules/data/types/dish/dish-detail-content.html
index fa7f2be5..b8659636 100644
--- a/src/app/modules/data/types/dish/dish-detail-content.html
+++ b/src/app/modules/data/types/dish/dish-detail-content.html
@@ -1,8 +1,8 @@
-<stapps-simple-card [title]="'Categories'" [content]="translator.translate(item).categories">
+<stapps-simple-card [title]="'categories' | propertyNameTranslate: item | titlecase" [content]="'categories' | thingTranslate: item">
 </stapps-simple-card>
 <ion-card *ngIf="item.characteristics">
-  <ion-card-header>Characteristics</ion-card-header>
-  <ion-card-content *ngFor="let characteristic of translator.translate(item).characteristics">
+  <ion-card-header>{{ 'characteristics' | propertyNameTranslate: item | titlecase }}</ion-card-header>
+  <ion-card-content *ngFor="let characteristic of ('characteristics' | thingTranslate: item)">
     <p>
       <img *ngIf="characteristic.image"
         [src]="characteristic.image" /><span>&nbsp;{{characteristic.name}}</span>&nbsp;&nbsp;
@@ -10,47 +10,42 @@
   </ion-card-content>
 </ion-card>
 <stapps-offers-detail *ngIf="item.offers" [offers]="item.offers"></stapps-offers-detail>
-<stapps-simple-card *ngIf="item.additives" [title]="'Additives'" [content]="translator.translate(item).additives.join(', ')">
+<stapps-simple-card *ngIf="item.additives" [title]="'additives' | propertyNameTranslate: item" [content]="'additives' | thingTranslate: item | join: ', '">
 </stapps-simple-card>
 <ion-card *ngIf="item.nutrition">
-  <ion-card-header>Average Nutrition Information</ion-card-header>
+  <ion-card-header>{{'data.types.dish.detail.AVG_NUTRITION_INFO' | translate }}</ion-card-header>
   <ion-card-content>
     <ion-grid>
       <ion-row *ngIf="item.nutrition.calories">
-        <ion-col>Calories:</ion-col>
+        <ion-col>{{'data.types.dish.detail.CALORIES' | translate }}:</ion-col>
         <ion-col width-20 text-right>
-          {{item.nutrition.calories}} kcal
+          {{item.nutrition.calories | numberLocalized}} kcal
         </ion-col>
       </ion-row>
       <ion-row *ngIf="item.nutrition.fatContent">
-        <ion-col>Fat content:</ion-col>
+        <ion-col>{{'data.types.dish.detail.FAT_TOTAL' | translate }}:</ion-col>
         <ion-col width-20 text-right>
-          {{item.nutrition.fatContent}} g <span *ngIf="item.nutrition.saturatedFatContent">(saturated:
-            {{item.nutrition.saturatedFatContent}} g)</span>
+          {{item.nutrition.fatContent | numberLocalized}} g <span *ngIf="item.nutrition.saturatedFatContent">({{'data.types.dish.detail.FAT_SATURATED' | translate }}:
+            {{item.nutrition.saturatedFatContent | numberLocalized}} g)</span>
         </ion-col>
       </ion-row>
       <ion-row *ngIf="item.nutrition.carbohydrateContent">
-        <ion-col>Carbohydrate content:</ion-col>
+        <ion-col>{{'data.types.dish.detail.CARBOHYDRATE' | translate }}:</ion-col>
         <ion-col width-20 text-right>
-          {{item.nutrition.carbohydrateContent}} g
+          {{item.nutrition.carbohydrateContent | numberLocalized}} g <span *ngIf="item.nutrition.sugarContent">({{'data.types.dish.detail.SUGAR' | translate }}:
+            {{item.nutrition.sugarContent | numberLocalized}} g)</span>
         </ion-col>
       </ion-row>
       <ion-row *ngIf="item.nutrition.saltContent">
-        <ion-col>Salt content:</ion-col>
+        <ion-col>{{'data.types.dish.detail.SALT' | translate }}:</ion-col>
         <ion-col width-20 text-right>
-          {{item.nutrition.saltContent}} g
-        </ion-col>
-      </ion-row>
-      <ion-row *ngIf="item.nutrition.sugarContent">
-        <ion-col>Sugar content:</ion-col>
-        <ion-col width-20 text-right>
-          {{item.nutrition.sugarContent}} g
+          {{item.nutrition.saltContent | numberLocalized}} g
         </ion-col>
       </ion-row>
       <ion-row *ngIf="item.nutrition.proteinContent">
-        <ion-col>Protein content:</ion-col>
+        <ion-col>{{'data.types.dish.detail.PROTEIN' | translate }}:</ion-col>
         <ion-col width-20 text-right>
-          {{item.nutrition.proteinContent}} g
+          {{item.nutrition.proteinContent | numberLocalized}} g
         </ion-col>
       </ion-row>
     </ion-grid>
diff --git a/src/app/modules/data/types/dish/dish-list-item.component.ts b/src/app/modules/data/types/dish/dish-list-item.component.ts
index 7622ec6b..01933847 100644
--- a/src/app/modules/data/types/dish/dish-list-item.component.ts
+++ b/src/app/modules/data/types/dish/dish-list-item.component.ts
@@ -30,18 +30,9 @@ export class DishListItem extends DataListItem {
    * TODO
    */
   @Input() item: SCDish;
-  // settingsProvider: SettingsProvider;
 
-  // constructor(settingsProvider: SettingsProvider) {
-  //   super();
-  //   this.settingsProvider = settingsProvider;
-  // }
-
-  /**
-   * TODO
-   */
-  // tslint:disable-next-line:prefer-function-over-method
+  // tslint:disable-next-line: completed-docs prefer-function-over-method
   ngOnInit() {
-    // TODO: translation...
+    // custom init
   }
 }
diff --git a/src/app/modules/data/types/dish/dish-list-item.html b/src/app/modules/data/types/dish/dish-list-item.html
index 8df88344..cf888069 100644
--- a/src/app/modules/data/types/dish/dish-list-item.html
+++ b/src/app/modules/data/types/dish/dish-list-item.html
@@ -1,9 +1,9 @@
 <ion-grid>
   <ion-row>
     <ion-col>
-      <h2 class="name">{{item.name}}</h2>
-      <p>{{item.description}}</p>
-      <p>{{item.categories.join(',')}}</p>
+      <h2 class="name">{{'name' | thingTranslate: item}}</h2>
+      <p>{{'description' | thingTranslate: item}}</p>
+      <p>{{'categories' | thingTranslate: item | join: ', '}}</p>
     </ion-col>
     <ion-col width-20 text-right>
       <stapps-offers-in-list *ngIf="item.offers" [offers]="item.offers"></stapps-offers-in-list>
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 32f8556e..08a02d00 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -9,10 +9,15 @@
     },
     "types": {
       "dish": {
-        "detailPage": {
-          "DESCRIPTION_TITLE": "Description",
-          "CATEGORY_TITLE": "Category",
-          "CHARACTERISTICS_TITLE": "Characteristics"
+        "detail": {
+          "AVG_NUTRITION_INFO": "Durchschnittliche Nährwertangaben",
+          "CALORIES": "Brennwert",
+          "FAT_TOTAL": "Fett",
+          "FAT_SATURATED": "davon gesättinge Fettsäuren",
+          "CARBOHYDRATE" : "Kohlenhydrate",
+          "SALT": "Salz",
+          "SUGAR": "davon Zucker",
+          "PROTEIN": "Protein"
         }
       }
     }
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 22a4dab0..2e852052 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -9,10 +9,15 @@
     },
     "types": {
       "dish": {
-        "detailPage": {
-          "DESCRIPTION_TITLE": "Description",
-          "CATEGORY_TITLE": "Category",
-          "CHARACTERISTICS_TITLE": "Characteristics"
+        "detail": {
+          "AVG_NUTRITION_INFO": "Average Nutrition Facts",
+          "CALORIES": "Calories",
+          "FAT_TOTAL": "Fat",
+          "FAT_SATURATED": "Saturated Fat",
+          "CARBOHYDRATE" : "Carbohydrate",
+          "SALT": "Salt",
+          "SUGAR": "Sugars",
+          "PROTEIN": "Protein"
         }
       }
     }