feat: add translations

Author: Angular2Guy

frontend/app/gs-map/gs-map.tsx

@@ -26,13 +26,15 @@ import { useEffect } from 'react';
 import { nanoid } from 'nanoid';
 import { type CenterLocation } from '../model/location';
 import { type GsValue } from '../model/gs-point';
+import { useTranslation } from 'node_modules/react-i18next';
 
 interface InputProps {
   center: CenterLocation;
   gsValues: GsValue[];
 }
 
 export default function GsMap(inputProps: InputProps) {
+  const { i18n } = useTranslation();
   let map: Map;    
   let currentOverlay: Overlay | null = null;
   useEffect(() => {
@@ -63,7 +65,7 @@ export default function GsMap(inputProps: InputProps) {
     return inputProps.gsValues.map((gsValue, index) => {
       const element = document.createElement('div');
       element.id = nanoid();
-      element.innerHTML = `${gsValue.location}<br/>E5: ${gsValue.e5}<br/>E10: ${gsValue.e10}<br/>Diesel: ${gsValue.diesel}`;
+      element.innerHTML = `${gsValue.location}<br/>${i18n.t('table.e5')}: ${gsValue.e5}<br/>${i18n.t('table.e10')}: ${gsValue.e10}<br/>${i18n.t('table.diesel')}: ${gsValue.diesel}`;
       const overlay = new Overlay({
         element: element,
         offset: [-5, 0],

frontend/app/i18n/de/translation.json

@@ -12,5 +12,32 @@
         "password": "Passwort",
         "login": "Login",
         "signin": "Registrieren"
+    },
+    "header": {
+        "title": "Günstiges Benzin",
+        "location": "Standort",
+        "targetPrice": "Zielpreis"
+    },
+    "location": {
+        "setLocation": "Standort festlegen",
+        "searchRadius": "Suchradius (km)",
+        "postalCode": "Postleitzahl",
+        "getLocation": "Standort abrufen"
+    },
+    "targetPrice": {
+        "setTargetPrice": "Zielpreise festlegen",
+        "diesel": "Zielpreis Diesel",
+        "e5": "Zielpreis E5",
+        "e10": "Zielpreis E10"
+    },
+    "table": {
+     "currentPrices": "Aktuelle Preise", 
+     "lastPriceMatches": "Letzte Preistreffer",
+     "currentPriceMap": "Aktuelle Preiskarte",
+     "diesel": "Diesel",
+     "e5": "E5",
+     "e10": "E10",
+     "location": "Standort",
+     "time": "Zeit"
     }
 }

frontend/app/i18n/en/translation.json

@@ -29,6 +29,15 @@
         "diesel": "Target Price Diesel",
         "e5": "Target Price E5",
         "e10": "Target Price E10"
+    },
+    "table": {
+     "currentPrices": "Current Prices", 
+     "lastPriceMatches": "Last Price Matches",
+     "currentPriceMap": "Current Price Map",
+     "diesel": "Diesel",
+     "e5": "E5",
+     "e10": "E10",
+     "location": "Location",
+     "time": "Time"
     }
-
 }

frontend/app/main/main.tsx

@@ -24,9 +24,11 @@ import { type TimeSlot } from '../model/time-slot-response';
 import { type GsValue } from '../model/gs-point';
 import { type MyDataJson } from '../model/my-data-json';
 import { useAtom } from "jotai";
+import { useTranslation } from 'node_modules/react-i18next';
 
 export default function Main() {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const [controller, setController] = useState(null as AbortController | null);
   const [timer, setTimer] = useState(undefined as undefined | NodeJS.Timeout);
   const [value, setValue] = useState(0);
@@ -132,16 +134,16 @@ export default function Main() {
 
   return (<Box sx={{ width: '100%' }}>
     <Tabs value={value} onChange={handleTabChange} centered={true}>
-      <Tab label="Current Prices" />
-      <Tab label="Last Price matches" />
-      <Tab label="Current Prices Map" />
+      <Tab label={t('table.currentPrices')} />
+      <Tab label={t('table.lastPriceMatches')} />
+      <Tab label={t('table.currentPriceMap')} />
     </Tabs>    
     {value === 0 &&
-       <DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>}    
+       <DataTable diesel={t('table.diesel')} e10={t('table.e10')} e5={t('table.e5')} location={t('table.location')} showAverages={true} time={t('table.time')} rows={rows}></DataTable>}    
     {value === 1 &&
       <Chart timeSlots={avgTimeSlots}></Chart>}      
     {value === 1 &&
-      <DataTable diesel='Diesel' e10='E10' e5='E5' location='Location' showAverages={true} time='Time' rows={rows}></DataTable>}      
+      <DataTable diesel={t('table.diesel')} e10={t('table.e10')} e5={t('table.e5')} location={t('table.location')} showAverages={true} time={t('table.time')} rows={rows}></DataTable>}      
     {value === 2 &&
       <GsMap gsValues={gsValues} center={globalUserDataState}></GsMap>}      
   </Box>);