UnchartedBull · UnchartedBull · Apr 11, 2021 · Mar 23, 2021 · Mar 23, 2021 · Mar 25, 2021
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,4 +1,7 @@
+# General
+
 If you can think of something nice to add or want to change / extend some of the functionality, feel free to create a Pull Request or an Issue. Please make sure to follow the code style (.prettierrc is included in the GitHub) and not break any of the existing functionality. Any help is greatly appreciated!
+## Setting up the repository and build the package
 
 To setup a local environment you need to do the following steps:
 - Fork the repository to your GitHub account, so you can push your changes
@@ -7,3 +10,51 @@ To setup a local environment you need to do the following steps:
 - Run the build `npm run build` (only required once to copy assets)
 - Start the Live Server: `npm run start` or `npm run start:big`
 - If you want to package OctoDash, so you can install it on your Raspberry Pi: `npm run pack`
+
+# Languages
+
+To launch the app in development mode in a specific locale instead of the source english locale, use 
+```
+npm run start --serve="--configuration=<lang>"
+```
+
+## Add a new language
+
+To add a language to the list of supported languages, follow these steps:
+- find your language code in [this list](https://github.com/angular/angular/tree/master/packages/common/locales) (angular country codes are not all standard)
+- in src/locale, duplicate an existing locale (or run `npm run locale:extract` to generate a new locale file)
+- rename the file to include your language code in the format `messages.<languageCode>.xlf`
+- in the `<file>` tag (second line of the xlf file) adapt `source-language="<languageCode>"` to your language code
+- add the translations for your language between `target` tags
+- add your language reference in `angular.json` 
+  - `Projects.OctoDash.i18n.locales`
+    - add:
+      ```
+      "<lang>": {
+        "translation": "src/locale/messages.<lang>.xlf",
+        "baseHref": ""
+      } 
+      ```
+  - `Projects.OctoDash.architect.build.configurations.production.localize`.
+    - add:
+      ```
+        "<lang>"
+      ```
+  - `Projects.OctoDash.architect.build.configurations`.
+    - add:
+      ```
+      "<lang>": {
+        "localize": ["<lang>"]
+      },
+      ```
+  - `Projects.OctoDash.architect.serve.configurations`.
+    - add:
+      ```
+        "<lang>": {
+          "browserTarget": "OctoDash:build:<lang>"
+        },
+      ```
+
+## Update translations IDs and sources
+
+To update translations with the latest codebase and IDs, run `npm run update:locales`. Only commit the files that do not have a date, these are only backups of the locale versions before the update.
diff --git a/README.md b/README.md
@@ -65,6 +65,7 @@ For more info have a look at the [wiki](https://github.com/UnchartedBull/OctoDas
 - You can press multiple arrows directly after another in the control view. All actions will be executed in series, even if the prior didn't finish
 - The six actions on the right in the control view can be customized. They can either send GCode commands to your printer, restart OctoPrint or your Pi and even open iFrames so you can view your camera
 - You can adjust the temperatures and fan speed in the home screen by pressing on their icons, if you want to set them to zero, just tap the value once (v1.4.1 and up)
+- OctoDash will start in your host's language if it is supported. You can start OctoDash in a different supported language by starting it with `LANG=fr_FR.UTF-8 octodash`.
 
 ## Demo
 

diff --git a/angular.json b/angular.json
@@ -13,13 +13,27 @@
       "root": "",
       "sourceRoot": "src",
       "prefix": "app",
+      "i18n": {
+        "sourceLocale": {
+          "code": "en",
+          "baseHref": ""
+        },
+        "locales": {
+          "fr": {
+             "translation": "src/locale/messages.fr.xlf",
+             "baseHref": ""
+          } 
+        }
+      },
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "aot": true,
             "outputPath": "dist",
             "index": "src/index.html",
+            "i18nMissingTranslation": "warning",
+            "localize": ["en"],
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "tsconfig.app.json",
@@ -44,7 +58,14 @@
             "scripts": []
           },
           "configurations": {
+            "fr": {
+              "localize": ["fr"]
+            },
             "production": {
+              "localize": [
+                "en",
+                "fr"
+              ],
               "fileReplacements": [
                 {
                   "replace": "src/environments/environment.ts",
@@ -79,6 +100,9 @@
             "browserTarget": "OctoDash:build"
           },
           "configurations": {
+            "fr": {
+              "browserTarget": "OctoDash:build:fr"
+            },
             "production": {
               "browserTarget": "OctoDash:build:production"
             }

diff --git a/helper/listener.js b/helper/listener.js
@@ -11,13 +11,9 @@ function activateScreenSleepListener(ipcMain) {
   ipcMain.on('screenControl', (_, screenCommand) => exec(screenCommand.command));
 }
 
-function activateReloadListener(ipcMain, window, dev) {
+function activateReloadListener(ipcMain, window, url) {
   ipcMain.on('reload', () => {
-    if (dev) {
-      window.loadURL('http://localhost:4200');
-    } else {
-      window.loadURL('app://.');
-    }
+    window.loadURL(url);
   });
 }
 
@@ -44,11 +40,11 @@ function activateConfigListener(ipcMain, window) {
   ipcMain.on('checkConfig', (_, config) => checkConfig(window, config));
 }
 
-function activateListeners(ipcMain, window, app, dev) {
+function activateListeners(ipcMain, window, app, url) {
   activateConfigListener(ipcMain, window);
   activateAppInfoListener(ipcMain, window, app);
   activateScreenSleepListener(ipcMain);
-  activateReloadListener(ipcMain, window, dev);
+  activateReloadListener(ipcMain, window, url);
   activateUpdateListener(ipcMain, window);
   activateDiscoverListener(ipcMain, window);
 }

diff --git a/helper/locale.js b/helper/locale.js
@@ -0,0 +1,94 @@
+module.exports = {
+
+  // returns the correct supported locale given the LANG variable
+  getLocale() {
+    const angularConf = require('../angular.json');
+    const i18n = angularConf.projects.OctoDash.i18n;
+    let lang;
+    try {
+      // Detect if environment LANG is set
+      // if it is defined, convert LANG from ie 'en_US.UTF-8' to 'en-US'
+      // if not defined, set it to the source locale
+      lang = process.env['LANG']
+        ? process.env['LANG'].split('.')[0].replace('_', '-')
+        : i18n.sourceLocale.code;
+    } catch(e) {
+      // LANG was populated with something else than a standard locale code
+      lang = i18n.sourceLocale.code;
+    }
+    // Check if exact LANG exists in our locales
+    const exactLocale = Object.keys(i18n.locales).includes(lang) && lang;
+    // Make the short version, convert ie 'en-US' to 'en'
+    const shortLang = lang.split('-')[0];
+    // Check if short LANG exists in our locales
+    // This matches 'fr-CA' to 'fr' if 'fr-CA' is not defined but 'fr' is
+    const approximateLocale = Object.keys(i18n.locales).includes(shortLang) && shortLang;
+    // Define locale by either the exact, approximate, or source locale in this order
+    const locale = exactLocale || approximateLocale || i18n.sourceLocale.code;
+    console.info('selected language: ' + locale);
+    return locale;
+  },
+
+  // updates all supported locales consuming an updated messages.xlf
+  updateLocales() {
+    const fs = require('fs');
+    const xliff = require('xliff');
+
+    // list all existing locales
+    // transtaledXLFs = [{
+    //   filename: 'messages.fr.xlf',
+    //   lang: 'fr',
+    // }]
+    let translatedXLFs = [];
+    const filenames = fs.readdirSync('./src/locale');
+    for (filename of filenames) {
+      const match = filename.match(/messages.(..|..-..).xlf/);
+      if (match) {
+        const lang = match[1];
+        translatedXLFs.push({ filename, lang });
+      }
+    }
+
+    // get extracted messages
+    const extractedXLF = fs.readFileSync('./src/locale/messages.xlf').toString();
+    xliff.xliff12ToJs(extractedXLF, (err, extracted) => {
+      if (err) throw new Error(err.message);
+
+      // for each supported locale
+      for (translatedXLFRef of translatedXLFs) {
+        const translatedXLF = fs.readFileSync(`./src/locale/${translatedXLFRef.filename}`).toString();
+
+        // load this locale
+        xliff.xliff12ToJs(translatedXLF, (err, translated) => {
+          if (err) throw new Error(err.message);
+
+          // hard copy of messages.xlf
+          const newTranslation = JSON.parse(JSON.stringify(extracted));
+          newTranslation.targetLanguage = translated.targetLanguage;
+          // transfer the locale's translations to the copy of the extracted locale
+          for (id in newTranslation.resources['ng2.template']) {
+            const source = translated.resources['ng2.template'];
+            const target = newTranslation.resources['ng2.template'];
+            // only copy if the translation has a target
+            if (source[id]) {
+              target[id].target = source[id].target;
+            }
+          }
+          // backup the previous version of the locale and write the new locale
+          xliff.jsToXliff12(newTranslation, (err, result) => {
+            if (err) throw new Error(err.message);
+            const now = new Date();
+            fs.renameSync(
+              `./src/locale/${translatedXLFRef.filename}`,
+              `./src/locale/messages.${translatedXLFRef.lang}-${now.toISOString()}.xlf`
+            );
+            console.info(`updating ${translatedXLFRef.filename}...`);
+            fs.writeFileSync(`./src/locale/${translatedXLFRef.filename}`, result);
+          })
+        })
+      }
+      // remove extracted messages
+      fs.unlinkSync('./src/locale/messages.xlf');
+    })
+  }
+};
diff --git a/main.js b/main.js
@@ -13,18 +13,22 @@ const dev = args.some(val => val === '--serve');
 
 const activateListeners = require('./helper/listener');
 
+let window;
+let locale;
+let url;
+
 if (!dev) {
   const createProtocol = require('./helper/protocol');
   const scheme = 'app';
 
   protocol.registerSchemesAsPrivileged([{ scheme: scheme, privileges: { standard: true } }]);
   createProtocol(scheme, path.join(__dirname, 'dist'));
+
+  locale = require('./helper/locale.js').getLocale();
 }
 
 app.commandLine.appendSwitch('touch-events', 'enabled');
 
-let window;
-
 function createWindow() {
   const _store = new Store();
 
@@ -57,14 +61,15 @@ function createWindow() {
   });
 
   if (dev) {
-    window.loadURL('http://localhost:4200');
+    url = 'http://localhost:4200'
     window.webContents.openDevTools();
   } else {
-    window.loadURL('app://.');
+    url = `file://${__dirname}/dist/${locale}/index.html`
     window.setFullScreen(true);
   }
 
-  activateListeners(ipcMain, window, app, dev);
+  window.loadURL(url);
+  activateListeners(ipcMain, window, app, url);
 
   window.on('closed', () => {
     window = null;