Add time zone settings ui

src/views/settings.html

@@ -258,6 +258,35 @@
     </div>
   </div>
 
+  <div class="text-left">
+    <h3>Time Zone</h3>
+  </div>
+
+  <div class="card" style="margin-bottom: 15px;">
+    <div class="row">
+      <div class="col-md-8">
+        <p>
+          This Cloudron is currently on <b>{{ timeZone.currentTimeZone }}</b> time zone.
+          The setting is important for backup and update tasks to be performed at the intended time.
+        </p>
+        <p class="text-danger" ng-show="timeZone.error"><br/>{{ timeZone.error }}</p>
+      </div>
+      <div class="col-md-4">
+        <select class="form-control" ng-model="timeZone.timeZone" ng-disabled="timeZone.busy" ng-options="zone for zone in timeZone.availableTimeZones"></select>
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-6">
+        <span class="text-success text-bold" ng-show="timeZone.success && timeZone.timeZone === timeZone.currentTimeZone">Saved</span>
+      </div>
+
+      <div class="col-md-6 text-right">
+        <button class="btn btn-outline btn-primary pull-right" ng-click="timeZone.submit()" ng-disabled="timeZone.busy || timeZone.timeZone === timeZone.currentTimeZone"><i class="fa fa-circle-notch fa-spin" ng-show="timeZone.busy"></i>  Save</button>
+      </div>
+    </div>
+</div>
+
   <div class="text-left">
     <h3>App Updates</h3>
   </div>

src/views/settings.js

@@ -2,6 +2,7 @@
 
 /* global angular:false */
 /* global $:false */
+/* global moment */
 
 angular.module('Application').controller('SettingsController', ['$scope', '$location', '$rootScope', '$timeout', 'Client', function ($scope, $location, $rootScope, $timeout, Client) {
     Client.onReady(function () { if (!Client.getUserInfo().admin) $location.path('/'); });
@@ -257,6 +258,31 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         return provider === 's3' || provider === 'minio' || provider === 's3-v4-compat' || provider === 'exoscale-sos' || provider === 'digitalocean-spaces';
     };
 
+    $scope.timeZone = {
+        busy: false,
+        success: false,
+        error: '',
+        timeZone: '',
+        currentTimeZone: '',
+        availableTimeZones: moment.tz.names(),
+
+        submit: function () {
+            if ($scope.timeZone.timeZone === $scope.timeZone.currentTimeZone) return;
+
+            $scope.timeZone.error = '';
+            $scope.timeZone.busy = true;
+            $scope.timeZone.success = false;
+
+            Client.setTimeZone($scope.timeZone.timeZone, function (error) {
+                if (error) $scope.timeZone.error = error.message;
+                else $scope.timeZone.currentTimeZone = $scope.timeZone.timeZone;
+
+                $scope.timeZone.busy = false;
+                $scope.timeZone.success = true;
+            });
+        }
+    }
+
     $scope.autoUpdate = {
         busy: false,
         success: false,
@@ -291,6 +317,15 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
         }
     };
 
+    function getTimeZone() {
+        Client.getTimeZone(function (error, timeZone) {
+            if (error) return console.error(error);
+
+            $scope.timeZone.currentTimeZone = timeZone;
+            $scope.timeZone.timeZone = timeZone;
+        });
+    }
+
     function getAutoupdatePattern() {
         Client.getAppAutoupdatePattern(function (error, result) {
             if (error) return console.error(error);
@@ -458,6 +493,7 @@ angular.module('Application').controller('SettingsController', ['$scope', '$loca
     Client.onReady(function () {
         getAutoupdatePattern();
         getRegistryConfig();
+        getTimeZone();
 
         $scope.update.checkStatus();