add translations in demo

open-pioneer · Nov 20, 2024 · 37e0e96 · 37e0e96
1 parent 19e2f09
commit 37e0e96
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 12 deletions.
diff --git a/src/samples/showcase/showcase-app/demos/SimpleDemos.tsx b/src/samples/showcase/showcase-app/demos/SimpleDemos.tsx
@@ -13,6 +13,7 @@ import {
 import { ViewHistoryModel } from "@open-pioneer/map-navigation";
 import { Measurement } from "@open-pioneer/measurement";
 import { Printing } from "@open-pioneer/printing";
+import { PackageIntl } from "@open-pioneer/runtime";
 import { ScaleBar } from "@open-pioneer/scale-bar";
 import { ScaleSetter } from "@open-pioneer/scale-setter";
 import { ScaleViewer } from "@open-pioneer/scale-viewer";
@@ -46,27 +47,38 @@ export function createCoordinateInputDemo({ intl, notificationService }: SharedD
         createModel() {
             return {
                 description: intl.formatMessage({ id: "demos.coordinateInput.description" }),
-                mainWidget: <CoordinateInputComponent notificationService={notificationService} />
+                mainWidget: (
+                    <CoordinateInputComponent
+                        notificationService={notificationService}
+                        intl={intl}
+                    />
+                )
             };
         }
     };
 }
 
-function CoordinateInputComponent(props: { notificationService: NotificationService }) {
-    const { notificationService } = props;
+function CoordinateInputComponent(props: {
+    notificationService: NotificationService;
+    intl: PackageIntl;
+}) {
+    const { notificationService, intl } = props;
     const [input, setInput] = useState<Coordinate | undefined>();
     function onCoordinateInput(coords: Coordinate, projection: Projection) {
         notificationService.notify({
             level: "info",
-            message: "coordinate entered: " + coords + " in " + projection.getCode(),
+            message: intl.formatMessage(
+                { id: "demos.coordinateInput.entered" },
+                { coordinates: coords.toString(), projection: projection.getCode() }
+            ),
             displayDuration: 4000
         });
     }
 
     function onSearchCleared() {
         notificationService.notify({
             level: "info",
-            message: "search cleared",
+            message: intl.formatMessage({ id: "demos.coordinateSearch.cleared" }),
             displayDuration: 4000
         });
         setInput(undefined);
@@ -77,7 +89,7 @@ function CoordinateInputComponent(props: { notificationService: NotificationServ
             <CoordinateInput
                 mapId={MAP_ID}
                 input={input}
-                placeholder={"Enter coordinate here"}
+                placeholder={intl.formatMessage({ id: "demos.coordinateInput.placeholder" })}
                 onSelect={({ coords, projection }) => onCoordinateInput(coords, projection)}
                 onClear={onSearchCleared}
                 projections={[
@@ -116,7 +128,7 @@ function CoordinateInputComponent(props: { notificationService: NotificationServ
                     setInput([761166, 6692084]);
                 }}
             >
-                Set input value
+                {intl.formatMessage({ id: "demos.coordinateInput.setInput" })}
             </Button>
         </Flex>
     );
@@ -129,26 +141,37 @@ export function createCoordinateSearchDemo({ intl, notificationService }: Shared
         createModel() {
             return {
                 description: intl.formatMessage({ id: "demos.coordinateSearch.description" }),
-                mainWidget: <CoordinateSearchComponent notificationService={notificationService} />
+                mainWidget: (
+                    <CoordinateSearchComponent
+                        notificationService={notificationService}
+                        intl={intl}
+                    />
+                )
             };
         }
     };
 }
 
-function CoordinateSearchComponent(props: { notificationService: NotificationService }) {
-    const { notificationService } = props;
+function CoordinateSearchComponent(props: {
+    notificationService: NotificationService;
+    intl: PackageIntl;
+}) {
+    const { notificationService, intl } = props;
     function onCoordinateSearch(coords: Coordinate, projection: Projection) {
         notificationService.notify({
             level: "info",
-            message: "coordinate entered: " + coords + " in " + projection.getCode(),
+            message: intl.formatMessage(
+                { id: "demos.coordinateSearch.entered" },
+                { coordinates: coords.toString(), projection: projection.getCode() }
+            ),
             displayDuration: 4000
         });
     }
 
     function onSearchCleared() {
         notificationService.notify({
             level: "info",
-            message: "search cleared",
+            message: intl.formatMessage({ id: "demos.coordinateSearch.cleared" }),
             displayDuration: 4000
         });
     }

diff --git a/src/samples/showcase/showcase-app/i18n/de.yaml b/src/samples/showcase/showcase-app/i18n/de.yaml
@@ -29,9 +29,15 @@ messages:
     coordinateInput:
       title: Koordinaten-Eingabe
       description: Diese Demo zeigt, wie die <code>CoordinateInput</code>-Komponente verwendet werden kann, um Usern die Eingabe von Koordinaten zu ermöglichen. Es findet eine Validierung statt, ob die Eingabe eine gültige Koordinate in der ausgewählten Projektion darstellt.
+      cleared: Eingabefeld geleert
+      entered: "Koordinate eingegeben: {coordinates} in {projection}"
+      placeholder: Hier Koordinate eingeben
+      setInput: Wert in Eingabefeld schreiben
     coordinateSearch:
       title: Koordinaten-Suche
       description: Diese Demo zeigt, wie die <code>CoordinateSearch</code>-Komponente verwendet werden kann, um sich Koordinaten an der Position des Mauszeigers anzeigen zu lassen und nach Koordinaten zu suchen. Dafür kann zwischen verschiedenen Projektionen gewechselt werden.
+      cleared: Eingabefeld geleert
+      entered: "Koordinate eingegeben: {coordinates} in {projection}"
     scaleViewer:
       title: Maßstabs-Anzeige
       description: Diese Demo zeigt, wie die <code>ScaleViewer</code>-Komponente verwendet werden kann, um den aktuellen Maßstab anzuzeigen.

diff --git a/src/samples/showcase/showcase-app/i18n/en.yaml b/src/samples/showcase/showcase-app/i18n/en.yaml
@@ -29,9 +29,15 @@ messages:
     coordinateInput:
       title: Coordinate input
       description: This demo shows how to use the <code>CoordinateInput</code> component to allow users to enter coordinates. The validation checks if the input is a valid coordinate for the selected projection.
+      cleared: Input field cleared
+      entered: "Coordinate entered: {coordinates} in {projection}"
     coordinateSearch:
       title: Coordinate search
       description: This demo shows how to use the <code>CoordinateSearch</code> component to show the coordinates at the users current mouse position and to search for coordinates. It is possible to switch between different projections.
+      cleared: Input field cleared
+      entered: "Coordinate entered: {coordinates} in {projection}"
+      placeholder: Enter coordinate here
+      setInput: Set input value
     scaleViewer:
       title: Scale viewer
       description: This demo shows how to use the <code>ScaleViewer</code> component.