Add language settings UI

src/views/settings.html

@@ -220,6 +220,29 @@
     </div>
   </div>
 
+  <div class="text-left">
+    <h3>{{ 'settings.language.title' | tr }}</h3>
+  </div>
+
+  <div class="card" style="margin-bottom: 15px;">
+    <div class="row">
+      <div class="col-md-8">
+        <p>{{ 'settings.language.description' | tr }}</p>
+      </div>
+      <div class="col-md-4">
+        <multiselect class="pull-right" ng-model="language.language" ng-disabled="language.busy" options="lang.key for lang in language.availableLanguages" data-multiple="false" filter-after-rows="5" scroll-after-rows="10"></multiselect>
+      </div>
+    </div>
+
+    <br/>
+
+    <div class="row">
+      <div class="col-md-12 text-right">
+        <button class="btn btn-outline btn-primary pull-right" ng-click="language.submit()" ng-disabled="language.busy || language.language === language.currentLanguage"><i class="fa fa-circle-notch fa-spin" ng-show="language.busy"></i>  {{ 'main.dialog.save' | tr }}</button>
+      </div>
+    </div>
+  </div>
+
   <div class="text-left">
     <h3>{{ 'settings.updates.title' | tr }}</h3>
   </div>

src/views/settings.js

@@ -197,6 +197,31 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         }
     };
 
+    $scope.language = {
+        busy: false,
+        success: false,
+        error: '',
+        language: '',
+        currentLanguage: '',
+        availableLanguages: window.languages,
+
+        submit: function () {
+            if ($scope.language.language === $scope.timeZone.currentLanguage) return;
+
+            $scope.language.error = '';
+            $scope.language.busy = true;
+            $scope.language.success = false;
+
+            Client.setLanguage($scope.language.language.key, function (error) {
+                if (error) $scope.language.error = error.message;
+                else $scope.language.currentLanguage = $scope.language.language;
+
+                $scope.language.busy = false;
+                $scope.language.success = true;
+            });
+        }
+    };
+
     $scope.updateSchedule = {
         busy: false,
         currentPattern: '',
@@ -268,6 +293,15 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         });
     }
 
+    function getLanguage() {
+        Client.getLanguage(function (error, languageKey) {
+            if (error) return console.error(error);
+
+            $scope.language.currentLanguage = window.languages.find(function (t) { return t.key === languageKey; });
+            $scope.language.language = $scope.language.currentLanguage;
+        });
+    }
+
     function getAutoupdatePattern() {
         Client.getAutoupdatePattern(function (error, result) {
             if (error) return console.error(error);
@@ -360,6 +394,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         getAutoupdatePattern();
         getRegistryConfig();
         getTimeZone();
+        getLanguage();
 
         $scope.update.checkStatus();