Add restore and backup logic to app view

src/views/app.html

@@ -419,27 +419,13 @@
 
   <div id="updates"><h3>Updates</h3></div>
   <div class="card">
-    <div class="row">
-      <div class="col-md-12">
-        <fieldset>
-          <form role="form" name="updatesForm" ng-submit="updates.submit()" autocomplete="off">
-            <div class="form-group">
-              <input type="checkbox" id="updatesEnableAutomaticUpdate" ng-model="updates.enableAutomaticUpdate">
-              <label class="control-label" for="updatesEnableAutomaticUpdate">Enable automatic updates</label>
-            </div>
-
-            <input class="ng-hide" type="submit" ng-disabled="updatesForm.$invalid || updates.busy"/>
-          </form>
-        </fieldset>
-      </div>
-    </div>
     <div class="row">
       <div class="col-md-6">
-        <span class="text-success text-bold" ng-show="updates.success">Saved</span>
+        <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.$invalid || updates.busy"><i class="fa fa-circle-notch fa-spin" ng-show="updates.busy"></i> Save</button>
+        <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>
     </div>
   </div>
@@ -448,25 +434,59 @@
   <div class="card">
     <div class="row">
       <div class="col-md-12">
-        <fieldset>
-          <form role="form" name="backupsForm" ng-submit="backups.submit()" autocomplete="off">
-            <div class="form-group">
-              <input type="checkbox" id="backupsEnableBackup" ng-model="backups.enableBackup">
-              <label class="control-label" for="backupsEnableBackup">Enable automatic daily backups</label>
-            </div>
+        <!-- backup id copy helper -->
+        <input type="text" class="offscreen" aria-hidden="true" id="backupIdHelper" value="">
 
-            <input class="ng-hide" type="submit" ng-disabled="backupsForm.$invalid || backups.busy"/>
-          </form>
-        </fieldset>
+        <table class="table table-hover" style="margin: 0;">
+          <thead>
+            <tr>
+              <th width="25px">&nbsp;</th>
+              <th>Created</th>
+              <th>Version</th>
+              <th class="text-right" width="180px">Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr ng-hide="backups.backups.length">
+              <td colspan="4" class="text-center">This app has no backups yet.</td>
+            </tr>
+            <tr ng-repeat="backup in backups.backups">
+              <td><div ng-click="backups.copyBackupId(backup)" class="hand" uib-tooltip="{{ backups.copyBackupIdDone ? 'Copied to clipboard' : 'Click to copy backup id' }}" tooltip-placement="right"><i class="fa fa-copy"></i></div></td>
+              <td>{{ backup.creationTime | prettyDate }}</td>
+              <td>v{{ backup.version }}</td>
+              <td class="text-right no-wrap" style="vertical-align: bottom">
+                <button class="btn btn-xs btn-default" ng-hide="backup.ackRestore" ng-click="clone.show(backup)" uib-tooltip="Clone from this Backup"><i class="far fa-clone"></i></button>
+                <button class="btn btn-xs btn-danger" ng-hide="backup.ackRestore" ng-disabled="app.taskId" ng-click="backup.ackRestore = true" uib-tooltip="Restore to this Backup"><i class="fas fa-history"></i></button>
+                <button class="btn btn-xs btn-danger" ng-show="backup.ackRestore" ng-click="backups.restore(backup)">Yes restore now</button>
+                <button class="btn btn-xs btn-default" ng-show="backup.ackRestore" ng-click="backup.ackRestore = false">Back</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <br/>
       </div>
     </div>
     <div class="row">
       <div class="col-md-6">
-        <span class="text-success text-bold" ng-show="backups.success">Saved</span>
+        <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>
+          </div>
+          <div><center>{{ app.message }}</center></div>
+        </div>
       </div>
-
       <div class="col-md-6 text-right">
-        <button class="btn btn-outline btn-primary pull-right" ng-click="backups.submit()" ng-disabled="backupsForm.$invalid || backups.busy"><i class="fa fa-circle-notch fa-spin" ng-show="backups.busy"></i> Save</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>
+    <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>
@@ -475,8 +495,8 @@
   <div class="card">
     <div class="row">
       <div class="col-md-12">
-        <button class="btn btn-danger" ng-show="app.taskId" ng-click="stopAppTask(app.taskId)">Cancel Current Task</button>
-        <button class="btn btn-danger" ng-hide="app.taskId" ng-click="restartApp()" ng-disabled="appIsRestarting"><i class="fa fa-circle-notch fa-spin" ng-show="appIsRestarting"></i> Restart App</button>
+        <button class="btn btn-danger" ng-click="debug.stopAppTask(app.taskId)" ng-disabled="!app.taskId">Cancel Current Task</button>
+        <button class="btn btn-danger" ng-click="debug.restartApp()" ng-disabled="app.taskId || appIsRestarting"><i class="fa fa-circle-notch fa-spin" ng-show="appIsRestarting"></i> Restart App</button>
         <a class="btn btn-primary pull-right" ng-href="{{ '/terminal.html?id=' + app.id }}" target="_blank">Terminal</a>
         <a class="btn btn-primary pull-right" ng-href="{{ '/logs.html?appId=' + app.id }}" target="_blank">Logs</a>
       </div>