See #161: can now persist language in local storage

front/src/App.vue

@@ -57,6 +57,18 @@
                 <translate>The funkwhale logo was kindly designed and provided by Francis Gading.</translate>
               </p>
             </div>
+            <div class="three wide column">
+              <h4 v-translate class="ui header">Options</h4>
+              <div class="ui form">
+                <div class="ui field">
+                  <label>{{ $gettext('Change language') }}</label>
+                  <select class="ui dropdown" v-model="$language.current">
+                    <option v-for="(language, key) in $language.available" :value="key">{{ language }}</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+
           </div>
         </div>
       </div>
@@ -144,6 +156,9 @@ export default {
     '$store.state.instance.instanceUrl' () {
       this.$store.dispatch('instance/fetchSettings')
       this.fetchNodeInfo()
+    },
+    '$language.current' (newValue) {
+      this.$store.commit('ui/currentLanguage', newValue)
     }
   }
 }

front/src/main.js

@@ -32,16 +32,20 @@ window.$ = window.jQuery = require('jquery')
 // require('./semantic/semantic.css')
 require('semantic-ui-css/semantic.js')
 require('masonry-layout')
-
+let availableLanguages = (function () {
+  let l = {}
+  locales.locales.forEach(c => {
+    l[c.code] = c.label
+  })
+  return l
+})()
+let defaultLanguage = 'en_US'
+if (availableLanguages[store.state.ui.currentLanguage]) {
+  defaultLanguage = store.state.ui.currentLanguage
+}
 Vue.use(GetTextPlugin, {
-  availableLanguages: (function () {
+  availableLanguages: availableLanguages,
-    let l = {}
+  defaultLanguage: defaultLanguage,
-    locales.locales.forEach(c => {
-      l[c.code] = c.label
-    })
-    return l
-  })(),
-  defaultLanguage: 'en_US',
   languageVmMixin: {
     computed: {
       currentKebabCase: function () {

front/src/store/index.js

@@ -36,6 +36,10 @@ export default new Vuex.Store({
       key: 'instance',
       paths: ['instance.events', 'instance.instanceUrl']
     }),
+    createPersistedState({
+      key: 'ui',
+      paths: ['ui.currentLanguage']
+    }),
     createPersistedState({
       key: 'radios',
       paths: ['radios'],

front/src/store/ui.js

@@ -3,6 +3,7 @@ import axios from 'axios'
 export default {
   namespaced: true,
   state: {
+    currentLanguage: 'en_US',
     lastDate: new Date(),
     maxMessages: 100,
     messageDisplayDuration: 10000,
@@ -13,6 +14,9 @@ export default {
     }
   },
   mutations: {
+    currentLanguage: (state, value) => {
+      state.currentLanguage = value
+    },
     computeLastDate: (state) => {
       state.lastDate = new Date()
     },