refactor: i18n for dish item listings and details

This commit is contained in:
Rainer Killinger
2021-02-08 14:42:18 +01:00
parent 3d4c476549
commit abf7595c03
6 changed files with 42 additions and 55 deletions

View File

@@ -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
}
}

View File

@@ -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>

View File

@@ -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
}
}

View File

@@ -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>

View File

@@ -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"
}
}
}

View File

@@ -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"
}
}
}