Improve app backup view

src/views/app.html

@@ -200,7 +200,9 @@
             <fieldset>
               <form role="form" name="locationForm" ng-submit="location.submit()" autocomplete="off">
                 <div class="form-group" ng-class="{ 'has-error': (locationForm.location.$dirty && locationForm.location.$invalid) || (!locationForm.location.$dirty && location.error.location)  }">
-                  <label class="control-label" for="locationLocationInput">{{ location.error.location }} </label>
+                  <label class="control-label">Location</label>
+                  <div class="has-error" ng-show="location.error.location">{{ location.error.location }}</div>
+
                   <div class="input-group form-inline">
                     <input type="text" class="form-control" ng-model="location.location" id="locationLocationInput" name="location" placeholder="{{ 'Leave empty to use bare domain' }}" autofocus>
 
@@ -456,15 +458,16 @@
         <div class="row">
           <div class="col-md-12">
             Last updated <span class="app-info-meta text-small">{{ app.updateTime | prettyDate }}</span>
+            <br/>
+            Automatic Updates <span class="app-info-meta text-small">{{ updates.enableAutomaticUpdate ? 'Enabled' : 'Disabled' }}</span>
+            <br/>
+            <br/>
           </div>
         </div>
         <div class="row">
-          <div class="col-md-6">
-            <input type="checkbox" id="updatesEnableAutomaticUpdate" ng-model="updates.enableAutomaticUpdate">
-            <label class="control-label" for="updatesEnableAutomaticUpdate">Enable automatic updates</label>
-          </div>
-          <div class="col-md-6 text-right">
-            <button class="btn btn-outline btn-primary pull-right" ng-click="updates.submit()" ng-disabled="updates.enableAutomaticUpdate === updates.currentEnableAutomaticUpdate || updates.busy"><i class="fa fa-circle-notch fa-spin" ng-show="updates.busy"></i> Save</button>
+          <div class="col-md-12">
+            <button class="btn btn-danger" ng-click="updates.toggleAutomaticUpdates()" ng-disabled="updates.busy"><i class="fa fa-circle-notch fa-spin" ng-show="updates.busy"></i> {{ updates.enableAutomaticUpdate ? 'Disable' : 'Enable' }} Automatic Updates</button>
+            <button class="btn btn-primary pull-right" ng-click="updates.check()" ng-disabled="updates.busyCheck"><i class="fa fa-circle-notch fa-spin" ng-show="updates.busyCheck"></i> Check for Updates</button>
           </div>
         </div>
       </div>
@@ -504,8 +507,16 @@
             <br/>
           </div>
         </div>
+        <hr/>
         <div class="row">
-          <div class="col-md-6">
+          <div class="col-md-12">
+            <button class="btn btn-danger" ng-click="backups.toggleAutomaticBackups()" ng-disabled="backups.busy"><i class="fa fa-circle-notch fa-spin" ng-show="backups.busy"></i> {{ backups.enableBackup ? 'Disable' : 'Enable' }} Automatic Daily Backups</button>
+            <button type="button" class="btn btn-primary pull-right" ng-click="backups.createBackup()" ng-disabled="app.taskId"><i class="fa fa-circle-notch fa-spin" ng-show="app.installationState === 'pending_backup'"></i> Create Backup</button>
+          </div>
+        </div>
+        <br/>
+        <div class="row">
+          <div class="col-md-12">
             <div ng-show="app.installationState === 'pending_backup'">
               <div class="progress progress-striped active animateMe" style="margin-bottom: 10px;">
                 <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ app.progress }}%"></div>
@@ -513,19 +524,6 @@
               <div><center>{{ app.message }}</center></div>
             </div>
           </div>
-          <div class="col-md-6 text-right">
-            <button type="button" class="btn btn-primary pull-right" ng-click="backups.createBackup()" ng-disabled="app.taskId"><i class="fa fa-circle-notch fa-spin" ng-show="app.installationState === 'pending_backup'"></i> Create Backup</button>
-          </div>
-        </div>
-        <hr/>
-        <div class="row">
-          <div class="col-md-6">
-            <input type="checkbox" id="backupsEnableBackup" ng-model="backups.enableBackup">
-            <label class="control-label" for="backupsEnableBackup">Enable automatic daily backups</label>
-          </div>
-          <div class="col-md-6 text-right">
-            <button type="button" class="btn btn-primary" ng-click="backups.submit()" ng-disabled="backups.enableBackup === backups.currentEnableBackup || backups.busy"><i class="fa fa-circle-notch fa-spin" ng-show="backups.busy"></i> Save</button>
-          </div>
         </div>
       </div>
 

src/views/app.js

@@ -406,29 +406,36 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
 
     $scope.updates = {
         busy: false,
-        error: {},
-        success: false,
+        busyCheck: false,
 
-        currentEnableAutomaticUpdate: false,
         enableAutomaticUpdate: false,
 
         show: function () {
             var app = $scope.app;
 
             $scope.updates.enableAutomaticUpdate = app.enableAutomaticUpdate;
-            $scope.updates.currentEnableAutomaticUpdate = app.enableAutomaticUpdate;
         },
 
-        submit: function () {
+        toggleAutomaticUpdates: function () {
             $scope.updates.busy = true;
-            $scope.updates.error = {};
 
-            Client.configureApp($scope.app.id, 'automatic_update', { enable: $scope.updates.enableAutomaticUpdate }, function (error) {
+            Client.configureApp($scope.app.id, 'automatic_update', { enable: !$scope.updates.enableAutomaticUpdate }, function (error) {
                 if (error) return Client.error(error);
 
-                $scope.updates.currentEnableAutomaticUpdate = $scope.updates.enableAutomaticUpdate;
-                $scope.updates.success = true;
-                $scope.updates.busy = false;
+                $timeout(function () {
+                    $scope.updates.enableAutomaticUpdate = !$scope.updates.enableAutomaticUpdate;
+                    $scope.updates.busy = false;
+                }, 1000);
+            });
+        },
+
+        check: function () {
+            $scope.updates.busyCheck = true;
+
+            Client.checkForUpdates(function (error) {
+                if (error) Client.error(error);
+
+                $scope.updates.busyCheck = false;
             });
         }
     };
@@ -436,10 +443,8 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
     $scope.backups = {
         busy: false,
         error: {},
-        success: false,
         copyBackupIdDone: false,
 
-        currentEnableBackup: false,
         enableBackup: false,
         backups: [],
 
@@ -459,14 +464,17 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
             Client.backupApp($scope.app.id, function (error) {
                 if (error) Client.error(error);
 
-                trackAppTask();
+                trackAppTask(function (error) {
+                    if (error) return Client.error(error);
+
+                    $scope.backups.show();
+                });
             });
         },
 
         show: function () {
             var app = $scope.app;
 
-            $scope.backups.currentEnableBackup = app.enableBackup;
             $scope.backups.enableBackup = app.enableBackup;
 
             Client.getAppBackups(app.id, function (error, backups) {
@@ -476,16 +484,17 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
             });
         },
 
-        submit: function () {
+        toggleAutomaticBackups: function () {
             $scope.backups.busy = true;
             $scope.backups.error = {};
 
-            Client.configureApp($scope.app.id, 'automatic_backup', { enable: $scope.backups.enableBackup }, function (error) {
+            Client.configureApp($scope.app.id, 'automatic_backup', { enable: !$scope.backups.enableBackup }, function (error) {
                 if (error) return Client.error(error);
 
-                $scope.backups.currentEnableBackup = $scope.backups.enableBackup;
-                $scope.backups.success = true;
-                $scope.backups.busy = false;
+                $timeout(function () {
+                    $scope.backups.enableBackup = !$scope.backups.enableBackup;
+                    $scope.backups.busy = false;
+                }, 1000);
             });
         },
 
@@ -674,12 +683,15 @@ angular.module('Application').controller('AppController', ['$scope', '$location'
         });
     }
 
-    function trackAppTask() {
+    function trackAppTask(callback) {
+        callback = callback || function (error) { if (error) Client.error(error); };
+
         Client.getApp(appId, function (error, app) {
-            if (error) Client.error(error);
+            if (error) return callback(error);
             else $scope.app = app;
 
-            if ($scope.app.taskId) $timeout(trackAppTask, 2000); // not yet done
+            if ($scope.app.taskId) $timeout(trackAppTask.bind(null, callback), 2000); // not yet done
+            else callback();
         });
     }