refactor: i18n for dish item listings and details

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 {SCDish} from '@openstapps/core';
-import {SCThingTranslator} 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
   }
 }

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-header>{{ 'characteristics' | propertyNameTranslate: item | titlecase }}</ion-card-header>
-  <ion-card-content *ngFor="let characteristic of translator.translate(item).characteristics">
+  <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.fatContent | numberLocalized}} g <span *ngIf="item.nutrition.saturatedFatContent">({{'data.types.dish.detail.FAT_SATURATED' | translate }}:
-            {{item.nutrition.saturatedFatContent}} g)</span>
+            {{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
+          {{item.nutrition.saltContent | numberLocalized}} 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
         </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>

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) {
+  // tslint:disable-next-line: completed-docs prefer-function-over-method
-  //   super();
-  //   this.settingsProvider = settingsProvider;
-  // }
-
-  /**
-   * TODO
-   */
-  // tslint:disable-next-line:prefer-function-over-method
   ngOnInit() {
-    // TODO: translation...
+    // custom init
   }
 }

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>
+      <h2 class="name">{{'name' | thingTranslate: item}}</h2>
-      <p>{{item.description}}</p>
+      <p>{{'description' | thingTranslate: item}}</p>
-      <p>{{item.categories.join(',')}}</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>

src/assets/i18n/de.json

@@ -9,10 +9,15 @@
     },
     "types": {
       "dish": {
-        "detailPage": {
+        "detail": {
-          "DESCRIPTION_TITLE": "Description",
+          "AVG_NUTRITION_INFO": "Durchschnittliche Nährwertangaben",
-          "CATEGORY_TITLE": "Category",
+          "CALORIES": "Brennwert",
-          "CHARACTERISTICS_TITLE": "Characteristics"
+          "FAT_TOTAL": "Fett",
+          "FAT_SATURATED": "davon gesättinge Fettsäuren",
+          "CARBOHYDRATE" : "Kohlenhydrate",
+          "SALT": "Salz",
+          "SUGAR": "davon Zucker",
+          "PROTEIN": "Protein"
         }
       }
     }

src/assets/i18n/en.json

@@ -9,10 +9,15 @@
     },
     "types": {
       "dish": {
-        "detailPage": {
+        "detail": {
-          "DESCRIPTION_TITLE": "Description",
+          "AVG_NUTRITION_INFO": "Average Nutrition Facts",
-          "CATEGORY_TITLE": "Category",
+          "CALORIES": "Calories",
-          "CHARACTERISTICS_TITLE": "Characteristics"
+          "FAT_TOTAL": "Fat",
+          "FAT_SATURATED": "Saturated Fat",
+          "CARBOHYDRATE" : "Carbohydrate",
+          "SALT": "Salt",
+          "SUGAR": "Sugars",
+          "PROTEIN": "Protein"
         }
       }
     }