i18n: automated locale detection and...

... manual selection box

ui/merge-strings.js

@@ -0,0 +1,16 @@
+#!/bin/env node
+const fs = require('fs')
+const merge = require('deepmerge')
+const glob = require('glob')
+
+glob('src/locales/!(messages).json', {}, (e, files) => {
+  let messages = []
+  for (const file of files) {
+    console.log(`Loading ${file}...`)
+    const locale_messages = require(`./${file}`)
+    messages.push(locale_messages)
+  }
+  console.log('Merging messages...')
+  messages = merge.all(messages)
+  fs.writeFileSync('src/locales/messages.json', JSON.stringify(messages), {})
+})

ui/package.json

@@ -5,7 +5,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "postinstall": "node merge-strings.js"
   },
   "dependencies": {
     "axios": "^0.19.0",
@@ -21,6 +22,7 @@
     "@vue/cli-service": "^4.1.1",
     "@vue/eslint-config-standard": "^5.0.1",
     "babel-eslint": "^10.0.3",
+    "deepmerge": "^4.2.2",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-node": "^10.0.0",
@@ -28,6 +30,7 @@
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.0.1",
     "express": "^4.17.1",
+    "glob": "^7.1.6",
     "http-proxy-middleware": "^0.20.0",
     "vue-template-compiler": "^2.6.10"
   }

ui/src/App.vue

@@ -18,6 +18,14 @@
                         <h2 class="subtitle" v-if="$root.$data.metadata.preexisting_install">
                             {{ $t('app.maintenance_title', {'name': $root.$data.attrs.name}) }}
                         </h2>
+                        <b-dropdown hoverable @change="selectLocale" aria-role="list">
+                            <button class="button" slot="trigger">
+                                <span>{{ $t('locale') }}</span>
+                                <b-icon icon="menu-down"></b-icon>
+                            </button>
+
+                            <b-dropdown-item v-for="(locale, index) in this.$i18n.messages" v-bind:key="index" :value="index" aria-role="listitem">{{locale.locale}}</b-dropdown-item>
+                        </b-dropdown>
                     </div>
 
                     <router-view />
@@ -27,6 +35,33 @@
     </div>
 </template>
 
+<script>
+export default {
+  mounted: function () {
+    // detect languages
+    var languages = window.navigator.languages
+    if (languages) {
+      // standard-compliant browsers
+      for (var index = 0; index < languages.length; index++) {
+        var lang = languages[index]
+        // Find the most preferred language that we support
+        if (Object.prototype.hasOwnProperty.call(this.$i18n.messages, lang)) {
+          this.$i18n.locale = lang
+          return
+        }
+      }
+    }
+    // IE9+ support
+    this.$i18n.locale = window.navigator.browserLanguage
+  },
+  methods: {
+    selectLocale: function (locale) {
+      this.$i18n.locale = locale
+    }
+  }
+}
+</script>
+
 <style>
 /* roboto-regular - latin */
 @font-face {

ui/src/locales/.gitignore

@@ -0,0 +1 @@
+messages.json

ui/src/locales/en.json

@@ -0,0 +1,55 @@
+{
+  "en":{
+    "locale":"English",
+    "app":{
+      "installer_title":"Welcome to the {name} installer!",
+      "installer_subtitle":"We will have you up and running in just a few moments.",
+      "maintenance_title":"Welcome to the {name} Maintenance Tool.",
+      "window_title":"{name} Installer"
+    },
+    "download_config":{
+      "download_config":"Downloading config...",
+      "error_download_config":"Got error while downloading config: {msg}"
+    },
+    "select_packages":{
+      "title":"Select which packages you want to install:",
+      "installed":"(installed)",
+      "advanced":"Advanced...",
+      "install":"Install",
+      "modify":"Modify",
+      "location":"Install Location",
+      "location_placeholder":"Enter a install path here",
+      "select":"Select"
+    },
+    "install_packages":{
+      "check_for_update":"Checking for updates...",
+      "uninstall":"Uninstalling...",
+      "self_update":"Downloading self-update...",
+      "install":"Installing...",
+      "please_wait":"Please wait..."
+    },
+    "error":{
+      "title":"An error occurred",
+      "exit_error":"{msg}\n\nPlease upload the log file (in {path}) to the {name} team",
+      "location_unknown":"the location where this installer is"
+    },
+    "complete":{
+      "thanks":"Thanks for installing {name}!",
+      "up_to_date":"{name} is already up to date!",
+      "updated":"{name} has been updated.",
+      "uninstalled":"{name} has been uninstalled.",
+      "where_to_find":"You can find your installed applications in your start menu."
+    },
+    "modify":{
+      "title":"Choose an option:",
+      "update":"Update",
+      "modify":"Modify",
+      "uninstall":"Uninstall",
+      "prompt":"Are you sure you want to uninstall {name}?"
+    },
+    "back":"Back",
+    "exit":"Exit",
+    "yes":"Yes",
+    "no":"No"
+  }
+}

ui/src/locales/messages.js

@@ -1,54 +0,0 @@
-export default {
-  en: {
-    app: {
-      installer_title: 'Welcome to the {name} installer!',
-      installer_subtitle: 'We will have you up and running in just a few moments.',
-      maintenance_title: 'Welcome to the {name} Maintenance Tool.',
-      window_title: '{name} Installer'
-    },
-    download_config: {
-      download_config: 'Downloading config...',
-      error_download_config: 'Got error while downloading config: {msg}'
-    },
-    select_packages: {
-      title: 'Select which packages you want to install:',
-      installed: '(installed)',
-      advanced: 'Advanced...',
-      install: 'Install',
-      modify: 'Modify',
-      location: 'Install Location',
-      location_placeholder: 'Enter a install path here',
-      select: 'Select'
-    },
-    install_packages: {
-      check_for_update: 'Checking for updates...',
-      uninstall: 'Uninstalling...',
-      self_update: 'Downloading self-update...',
-      install: 'Installing...',
-      please_wait: 'Please wait...'
-    },
-    error: {
-      title: 'An error occurred',
-      exit_error: '{msg}\n\nPlease upload the log file (in {path}) to the {name} team',
-      location_unknown: 'the location where this installer is'
-    },
-    complete: {
-      thanks: 'Thanks for installing {name}!',
-      up_to_date: '{name} is already up to date!',
-      updated: '{name} has been updated.',
-      uninstalled: '{name} has been uninstalled.',
-      where_to_find: 'You can find your installed applications in your start menu.'
-    },
-    modify: {
-      title: 'Choose an option:',
-      update: 'Update',
-      modify: 'Modify',
-      uninstall: 'Uninstall',
-      prompt: 'Are you sure you want to uninstall {name}?'
-    },
-    back: 'Back',
-    exit: 'Exit',
-    yes: 'Yes',
-    no: 'No'
-  }
-}

ui/src/main.js

@@ -6,7 +6,7 @@ import VueAxios from 'vue-axios'
 import VueI18n from 'vue-i18n'
 import { stream_ajax as streamAjax } from './helpers'
 import Buefy from 'buefy'
-import messages from './locales/messages.js'
+import messages from './locales/messages.json'
 import 'buefy/dist/buefy.css'
 
 Vue.config.productionTip = false

ui/yarn.lock

@@ -2712,6 +2712,11 @@ deepmerge@^1.5.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -3847,7 +3852,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
+glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==