I18n & Localization (#28)

* fix readme typo and bump front end version

* barebones i18n setup complete

* partially localized

* translate matdialog

* finish localization

* update docs

* Remove unnecessary note in README.md

* Update README.md with language localization instructions

* Update FE build with localization files

* Remove commented out code in header.component.html

* Fix styling in header component

* Refactor settings component code

* Fix indentation in settings.component.ts

* Update main.js.gz file

README.md

@@ -20,10 +20,8 @@
   </p>
 </div>
 
-> ### What's OSWW?
-> - OSWW is an open source modular watch winder, which you can read more about on [GitHub](https://github.com/mwood77/osww) or [Printables](https://www.printables.com/model/421249-osww-the-open-source-watch-winder).
-
-
+> [!NOTE]
+> OSWW is an open source modular watch winder, which you can read more about on [GitHub](https://github.com/mwood77/osww) or [Printables](https://www.printables.com/model/421249-osww-the-open-source-watch-winder).
 
 ### Key Features
 * Settable RPD (rotations per day) between 100 - 960rpd
@@ -66,9 +64,19 @@
 1. [Winderoo Wiring Diagram](./docs/wiring-diagram.md)
 
 
-## Developer Resources
+## Contributing
 This project welcomes contributions. Please follow the regular git workflow; fork + PR to contribute.
 
+### Translations / Localization
+Winderoo has multi-language support, and we welcome adding more langauges.
+
+To add another language:
+1. Duplicate one of the current localizations, and translate the text:
+    - `src/angular/osww-frontend/src/assets/i18n/` stores the current localizations.
+1. Add a new langauge menu item here to enable your langauge:
+    - `src/angular/osww-frontend/src/app/header/header.component.html`
+1. Open a Pull Request
+
 ### Frontend
 - Angular with Angular Material
 - [Frontend Readme](./src/angular/osww-frontend/README.md)

data/assets/i18n/de-DE.json

@@ -0,0 +1,39 @@
+{
+    "HEADER": {
+        "RESET": "Zurücksetzen",
+        "ON": "an",
+        "OFF": "aus",
+        "DIALOG": {
+            "TITLE": "Das Zurücksetzen dauert 20 Sekunden",
+            "SUBTITLE": "Dieser Bildschirm wird während des Reset-Vorgangs nicht geschlossen",
+            "CANCEL": "stornieren",
+            "POINT_1": "Das Zurücksetzen ist abgeschlossen, wenn die zweite LED nicht mehr schnell blinkt, sondern dauerhaft leuchtet.",
+            "POINT_2": "Verbinden Sie Ihr Mobilgerät mit dem neuen WLAN-Netzwerk namens",
+            "POINT_3": "Fügen Sie Winderoo zu einem vorhandenen WLAN-Netzwerk hinzu. Wenn die LED langsam zu blinken beginnt, hat sich Winderoo diesem Netzwerk erfolgreich angeschlossen.",
+            "POINT_4": "Warten Sie, bis sich Ihr Gerät wieder mit Ihrem bestehenden WLAN-Netzwerk verbindet.",
+            "NOW_AVAILABLE": "Winderoo ist jetzt erhältlich unter:",
+            "CONFIRM_RESET": "Bestätigen Sie das Zurücksetzen"
+        }
+    },
+    "SETTINGS": {
+        "STATUS": "Status",
+        "STOPPED": "Gestoppt",
+        "WINDING": "Wicklung",
+        "ESTIMATED_DURATION": "Geschätzte Zyklusdauer",
+        "DIRECTION": "Richtung",
+        "ROTATIONS_PER_DAY": "Rotationen pro Tag",
+        "FIND_WINDING_PARAMETERS": "Finden Sie die Aufzugsparameter Ihrer Uhr",
+        "CYCLE_START": "Zyklusstartzeit",
+        "ENABLED": "Ermöglicht",
+        "DISABLED": "Deaktiviert",
+        "HOURS": "Stunde",
+        "MINUTES": "Protokoll",
+        "SAVE": "Einstellungen speichern",
+        "SAVE_IN_PROGRESS": "Hochladen läuft",
+        "CLOCKWISE": "Im Uhrzeigersinn",
+        "COUNTER_CLOCKWISE": "Gegen den Uhrzeigersinn",
+        "BOTH": "Beide",
+        "PLEASE_WAIT": "Zyklusfortschritt wird angezeigt, bitte warten",
+        "PROGRESS": "Zyklusfortschritt"
+    }
+}

data/assets/i18n/en-US.json

@@ -0,0 +1,39 @@
+{
+    "HEADER": {
+        "RESET": "Reset",
+        "ON": "on",
+        "OFF": "off",
+        "DIALOG": {
+            "TITLE": "Reset takes 20 seconds",
+            "SUBTITLE": "This screen will not close during the reset process",
+            "CANCEL": "cancel",
+            "POINT_1": "Reset is complete when the second LED stops fast blinking, then turns solid.",
+            "POINT_2": "Connect your mobile device to the new WiFi network called",
+            "POINT_3": "Add Winderoo to an existing WiFi network. If the LED starts to slow blink, Winderoo has successfully joined that network.",
+            "POINT_4": "Wait for your device to reconnect to your existing WiFi network.",
+            "NOW_AVAILABLE": "Winderoo is now available at:",
+            "CONFIRM_RESET": "Confirm Reset"
+        }
+    },
+    "SETTINGS": {
+        "STATUS": "Status",
+        "STOPPED": "Stopped",
+        "WINDING": "Winding",
+        "ESTIMATED_DURATION": "Estimated Cycle Duration",
+        "DIRECTION": "Direction",
+        "ROTATIONS_PER_DAY": "Rotations Per Day",
+        "FIND_WINDING_PARAMETERS": "Find your watch's winding parameters",
+        "CYCLE_START": "Cycle Start Time",
+        "ENABLED": "Enabled",
+        "DISABLED": "Disabled",
+        "HOURS": "Hour",
+        "MINUTES": "Minutes",
+        "SAVE": "Save Settings",
+        "SAVE_IN_PROGRESS": "Upload in progress",
+        "CLOCKWISE": "Clockwise",
+        "COUNTER_CLOCKWISE": "Counter Clockwise",
+        "BOTH": "Both",
+        "PLEASE_WAIT": "Getting cycle progress, please wait",
+        "PROGRESS": "Cycle Progress"
+    }
+}

data/assets/i18n/es-ES.json

@@ -0,0 +1,39 @@
+{
+    "HEADER": {
+        "RESET": "Reiniciar",
+        "ON": "en",
+        "OFF": "apagado",
+        "DIALOG": {
+            "TITLE": "El reinicio tarda 20 segundos",
+            "SUBTITLE": "Esta pantalla no se cerrará durante el proceso de reinicio.",
+            "CANCEL": "cancelar",
+            "POINT_1": "El reinicio se completa cuando el segundo LED deja de parpadear rápidamente y luego se vuelve fijo.",
+            "POINT_2": "Conecta tu dispositivo móvil a la nueva red WiFi llamada",
+            "POINT_3": "Agregue Winderoo a una red WiFi existente. Si el LED comienza a parpadear lentamente, Winderoo se ha unido exitosamente a esa red.",
+            "POINT_4": "Espere a que su dispositivo se vuelva a conectar a su red WiFi existente.",
+            "NOW_AVAILABLE": "Winderoo ya está disponible en:",
+            "CONFIRM_RESET": "Confirmar reinicio"
+        }
+    },
+    "SETTINGS": {
+        "STATUS": "Estado",
+        "STOPPED": "Interrumpido",
+        "WINDING": "Devanado",
+        "ESTIMATED_DURATION": "Duración estimada del ciclo",
+        "DIRECTION": "Dirección",
+        "ROTATIONS_PER_DAY": "Rotaciones por día",
+        "FIND_WINDING_PARAMETERS": "Encuentre los parámetros de cuerda de su reloj",
+        "CYCLE_START": "Hora de inicio del ciclo",
+        "ENABLED": "Activado",
+        "DISABLED": "Desactivado",
+        "HOURS": "Hora",
+        "MINUTES": "Minutos",
+        "SAVE": "Guardar ajustes",
+        "SAVE_IN_PROGRESS": "Carga en progreso",
+        "CLOCKWISE": "Agujas del reloj",
+        "COUNTER_CLOCKWISE": "En sentido anti-horario",
+        "BOTH": "Ambos",
+        "PLEASE_WAIT": "Obteniendo el progreso del ciclo, espere",
+        "PROGRESS": "Progreso del ciclo"
+    }
+}

data/assets/i18n/fr-FR.json

@@ -0,0 +1,39 @@
+{
+    "HEADER": {
+        "RESET": "Réinitialiser",
+        "ON": "sur",
+        "OFF": "désactivé",
+        "DIALOG": {
+            "TITLE": "La réinitialisation prend 20 secondes",
+            "SUBTITLE": "Cet écran ne se fermera pas pendant le processus de réinitialisation",
+            "CANCEL": "Annuler",
+            "POINT_1": "La réinitialisation est terminée lorsque la deuxième LED cesse de clignoter rapidement, puis devient fixe.",
+            "POINT_2": "Connectez votre appareil mobile au nouveau réseau WiFi appelé",
+            "POINT_3": "Ajoutez Winderoo à un réseau WiFi existant. Si la LED commence à clignoter lentement, Winderoo a réussi à rejoindre ce réseau.",
+            "POINT_4": "Attendez que votre appareil se reconnecte à votre réseau WiFi existant.",
+            "NOW_AVAILABLE": "Winderoo est maintenant disponible sur:",
+            "CONFIRM_RESET": "Confirmer la réinitialisation"
+        }
+    },
+    "SETTINGS": {
+        "STATUS": "Statut",
+        "STOPPED": "Arrêté",
+        "WINDING": "Enroulement",
+        "ESTIMATED_DURATION": "Durée estimée du cycle",
+        "DIRECTION": "Direction",
+        "ROTATIONS_PER_DAY": "Rotations par jour",
+        "FIND_WINDING_PARAMETERS": "Trouvez les paramètres de remontage de votre montre",
+        "CYCLE_START": "Heure de début du cycle",
+        "ENABLED": "Activé",
+        "DISABLED": "Désactivé",
+        "HOURS": "Heure",
+        "MINUTES": "Minutes",
+        "SAVE": "Enregistrer les paramètres",
+        "SAVE_IN_PROGRESS": "Téléchargement en cours",
+        "CLOCKWISE": "Dans le sens des aiguilles d'une montre",
+        "COUNTER_CLOCKWISE": "Dans le sens inverse des aiguilles d'une montre",
+        "BOTH": "Les deux",
+        "PLEASE_WAIT": "Obtenir la progression du cycle, veuillez patienter",
+        "PROGRESS": "Progression du cycle"
+    }
+}

docs/user-manual.md

@@ -6,7 +6,7 @@
 
 | v1.0.0 | |
 | :---: |:---: |
-|<img src="gui/overview_v1.0.0.png" height="600">  | This is winderoo's primary interface. From here you can change any settings you need |
+|<img src="gui/overview_v0.1.0.png" height="600">  | This is winderoo's primary interface. From here you can change any settings you need |
 
 
 ### Enable / Disable Winding
@@ -18,6 +18,7 @@
 | UI Element | Function |
 | :---: |:---: |
 |<img src="gui/reset.png" >  | This is will open a pop-up window, which will ask you to confirm reset, and walk you through the reset proceedure. Use this to change the WiFi network Winderoo connects to. |
+|<img src="gui/language.png" >  | This will open a pop-up menu where you can select which language you'd prefer. |
 
 ### Status Bar
 | UI Element | Function |

src/angular/osww-frontend/README.md

@@ -10,7 +10,7 @@
 
 ## Development server
 
-1. Run `npm run serve` from this location (`src/angular/osww-frontend/`)
+1. Run `npm run start` from this location (`src/angular/osww-frontend/`)
 1. Navigate to `http://localhost:4200/` in your browser. You'll see the application.
     - ⚠️ You'll need Winderoo's API running (on hardware, on your network) to interact with. 
     - See [this README](../../../docs/install-software.md) for instructions on how to flash the API to your hardware.