Add i18n module to enable translations

package.json

@@ -14,6 +14,7 @@
     "filesize": "^4.2.1",
     "jquery": "3.4.1",
     "moment": "^2.27.0",
+    "node-polyglot": "^2.4.0",
     "oidc-client": "^1.10.1",
     "vue": "^2.6.12",
     "vue-full-calendar": "^2.8.0",
@@ -24,7 +25,7 @@
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.12.1",
     "@vue/cli-plugin-eslint": "^3.12.1",
-    "@vue/cli-service": "^3.12.1",
+    "@vue/cli-service": "^4.5.7",
     "@vue/devtools": "^5.3.3",
     "babel-eslint": "^10.1.0",
     "copy-webpack-plugin": "^6.0.3",

src/components/Header.vue

@@ -46,16 +46,21 @@
               </b-nav-item>
             </b-navbar-nav>
             <b-navbar-nav class="ml-auto">
+              <b-nav-item>
+                {{ $t('helloWorld') }}
+              </b-nav-item>
+
               <b-nav-item-dropdown
-                text="EN"
+                :text="$activeLocale.toUpperCase()"
                 right
               >
-                <b-dropdown-item href="#">
-                  EN
-                </b-dropdown-item>
-                <b-dropdown-item href="#">
+                <b-dropdown-item :active="$activeLocale === 'de'" @click="$locale('de')">
                   DE
                 </b-dropdown-item>
+
+                <b-dropdown-item :active="$activeLocale === 'en'" @click="$locale('en')">
+                  EN
+                </b-dropdown-item>
               </b-nav-item-dropdown>
               <b-nav-item-dropdown
                 v-if="user.logged_in"

src/i18n/de.js

+export default {
+    'helloWorld': 'Hallo, Welt'
+}

src/i18n/en.js

+export default {
+    'helloWorld': 'Hello, World'
+}

src/main.js

@@ -2,8 +2,11 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+
+import Translation from '@/plugins/translation';
 import BootstrapVue from 'bootstrap-vue'
 import VueLogger from 'vuejs-logger';
+
 import '../public/assets/tailwind.css'
 
 // Use this if you also have to debug a production build
@@ -21,6 +24,7 @@ Vue.use(VueLogger, {
 });
 
 Vue.use(BootstrapVue)
+Vue.use(Translation)
 
 Vue.config.productionTip = false
 

src/plugins/translation.js

+import Polyglot from 'node-polyglot';
+
+const Translation = {}
+Translation.install = async function(Vue) {
+    const availableLocales = [ 'de', 'en' ]
+    const potentialLocale = navigator.language.substring(0, 2)
+    const activeLocale = availableLocales.includes(potentialLocale)
+        ? potentialLocale
+        : 'de'
+
+    const phrasesModule = await import(`@/i18n/${activeLocale}`)
+    const phrases = phrasesModule.default
+
+    Vue.prototype.$activeLocale = activeLocale
+    Vue.prototype.polyglot = new Polyglot({ phrases })
+
+    Vue.prototype.$t = function(text, context = {}) {
+        return this.polyglot.t(text, context)
+    }
+
+    Vue.prototype.$locale = async function(newLocale) {
+        this.$log.debug(`Setting locale: ${newLocale}`)
+
+        const phrasesModule = await import(`@/i18n/${newLocale}`)
+        const phrases = phrasesModule.default
+
+        this.$activeLocale = newLocale
+        this.polyglot = new Polyglot({ phrases })
+        this.$forceUpdate()
+    }
+};
+
+export default Translation

src/store/modules/shows.js

@@ -343,8 +343,13 @@ const actions = {
     let method = data.update ? 'put' : 'post'
     let formData = new FormData();
 
+    // We serialize the data to a FormData object, so we can send the image
+    // as binary blob to the Steering API.
     for (const [key, value] of Object.entries(data.note)) {
-      if (data.update && NON_UPDATEABLE_PROPERTIES.includes(key)) continue;
+      // When we're updating we don't want to include some properties that cause errors.
+      if (data.update && NON_UPDATEABLE_PROPERTIES.includes(key)) {
+        continue;
+      }
 
       formData.append(key, value);
     }