🌐 i18n strings

src/app/app.component.ts

@@ -13,6 +13,7 @@ import {
   HsToastService
 } from 'hslayers-ng';
 
+import i18n from './translations.json';
 import {AppService} from './app.service';
 
 proj4.defs(
@@ -144,6 +145,7 @@ export class AppComponent {
           source: new VectorSource(),
         }),
       ],
+      translationOverrides: i18n,
     });
     /* Now wait for the OpenLayers Map object to load */
     this.hsEventBusService.olMapLoads.subscribe(() => {

src/app/calculator/calculator.component.html

@@ -3,17 +3,17 @@
   <div class="card-body">
     <div class="p-2 center-block">
       <div>
-        Chci vypočítat index:&emsp;
+        {{ 'CALCULATOR.selectIndex' | translate}}:&emsp;
         <select class="form-select" [(ngModel)]="data.selectedProduct">
           <option *ngFor="let product of calcService.availableProducts" [ngValue]="product">{{product}}</option>
         </select>
       </div>
       <div>
         <button type="button" class="btn btn-primary btn-lg" (click)="getDates()"
-          [disabled]="noFieldSelected() || noProductSelected()">GET DATES</button>
+          [disabled]="noFieldSelected() || noProductSelected()">{{ 'CALCULATOR.getDates' | translate}}</button>
       </div>
       <div [hidden]="noDates()">
-        Chci datum:&emsp;
+        {{ 'CALCULATOR.selectDate' | translate}}:&emsp;
         <select class="form-select" [(ngModel)]="data.selectedDate">
           <option *ngFor="let date of calcService.availableDates" [ngValue]="date">{{date}}</option>
         </select>
@@ -21,7 +21,7 @@
       </div>
       <div>
         <button type="button" class="btn btn-primary btn-lg" (click)="getZones()"
-          [disabled]="noDateSelected()">GET ZONES</button>
+          [disabled]="noDateSelected()">{{ 'CALCULATOR.getZones' | translate }}</button>
       </div>
     </div>
   </div>

src/app/translations.json

@@ -0,0 +1,20 @@
+{
+  "cs": {
+    "CALCULATOR": {
+      "getDates": "VYBRAT DATUM",
+      "getZones": "ZÍSKAT ZÓNY",
+      "panelHeader": "Výpočet indexů pole",
+      "selectDate": "Chci datum",
+      "selectIndex": "Chci vypočítat index"
+    }
+  },
+  "en": {
+    "CALCULATOR": {
+      "getDates": "GET DATES",
+      "getZones": "GET ZONES",
+      "panelHeader": "Field calculation",
+      "selectDate": "I want a datum",
+      "selectIndex": "I want to calculate index"
+    }
+  }
+}