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>