From 8926d930402d1aa9d0be294fd9dc12769965f8d0 Mon Sep 17 00:00:00 2001
From: Eliot Berriot <contact@eliotberriot.com>
Date: Sat, 30 Jun 2018 12:05:52 +0200
Subject: [PATCH] See #161: can now persist language in local storage

---
 front/src/App.vue        | 15 +++++++++++++++
 front/src/main.js        | 22 +++++++++++++---------
 front/src/store/index.js |  4 ++++
 front/src/store/ui.js    |  4 ++++
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/front/src/App.vue b/front/src/App.vue
index 0d66cfc9a..6efd3e582 100644
--- a/front/src/App.vue
+++ b/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)
     }
   }
 }
diff --git a/front/src/main.js b/front/src/main.js
index b4522eb23..d656bda99 100644
--- a/front/src/main.js
+++ b/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 () {
-    let l = {}
-    locales.locales.forEach(c => {
-      l[c.code] = c.label
-    })
-    return l
-  })(),
-  defaultLanguage: 'en_US',
+  availableLanguages: availableLanguages,
+  defaultLanguage: defaultLanguage,
   languageVmMixin: {
     computed: {
       currentKebabCase: function () {
diff --git a/front/src/store/index.js b/front/src/store/index.js
index 0c2908d83..46075d847 100644
--- a/front/src/store/index.js
+++ b/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'],
diff --git a/front/src/store/ui.js b/front/src/store/ui.js
index c33680347..6641f4c0d 100644
--- a/front/src/store/ui.js
+++ b/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()
     },