From 3027c119fe0977bdc22ad6d408465e39a8ec2e1d Mon Sep 17 00:00:00 2001
From: Johannes Zellner <johannes@cloudron.io>
Date: Wed, 29 Jul 2015 14:02:31 +0200
Subject: [PATCH] Use angular in update dialog and show errors

---
 webadmin/src/js/update.js | 23 ++++++++++++++++-------
 webadmin/src/update.html  | 14 ++++++++++----
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/webadmin/src/js/update.js b/webadmin/src/js/update.js
index c0d9a5e1d..40787cff3 100644
--- a/webadmin/src/js/update.js
+++ b/webadmin/src/js/update.js
@@ -4,20 +4,29 @@
 var app = angular.module('Application', []);
 
 app.controller('Controller', ['$scope', '$http', '$interval', function ($scope, $http, $interval) {
-    var apiOrigin = '';
+    $scope.title = 'Update in progress...';
+    $scope.percent = 0;
+    $scope.message = '';
+    $scope.error = false;
 
-    function loadWebadmin() {
+    $scope.loadWebadmin = function () {
         window.location.href = '/';
-    }
+    };
 
     function fetchProgress() {
-        $http.get(apiOrigin + '/api/v1/cloudron/progress').success(function(data, status) {
+        $http.get('/api/v1/cloudron/progress').success(function(data, status) {
             if (status === 404) return; // just wait until we create the progress.json on the server side
             if (status !== 200 || typeof data !== 'object') return console.error(status, data);
-            if (data.update === null) return loadWebadmin();
+            if (data.update === null) return $scope.loadWebadmin();
 
-            $('#updateProgressBar').css('width', data.update.percent + '%');
-            $('#updateProgressMessage').html(data.update.message);
+            if (data.update.percent === -1) {
+                $scope.title = 'Update Error';
+                $scope.error = true;
+                $scope.message = data.update.message;
+            } else {
+                $scope.percent = data.update.percent;
+                $scope.message = data.update.message;
+            }
         }).error(function (data, status) {
             console.error(status, data);
         });
diff --git a/webadmin/src/update.html b/webadmin/src/update.html
index 950f3ceda..b7d152f75 100644
--- a/webadmin/src/update.html
+++ b/webadmin/src/update.html
@@ -33,13 +33,19 @@
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
-                    <h4 class="modal-title" id="updateProgressModalLabel">Update in progress...</h4>
+                    <h4 class="modal-title">{{title}}</h4>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body" ng-show="!error">
                     <div class="progress progress-striped active">
-                        <div class="progress-bar progress-bar-success" role="progressbar" id="updateProgressBar" style="width: 0%"></div>
+                        <div class="progress-bar progress-bar-success" role="progressbar" style="width: {{percent}}%"></div>
                     </div>
-                    <span id="updateProgressMessage"></span>
+                    <span>{{message}}</span>
+                </div>
+                <div class="modal-body" ng-show="error">
+                    <span>{{message}}</span>
+                </div>
+                <div class="modal-footer" ng-show="error">
+                    <button type="button" class="btn btn-primary" ng-click="loadWebadmin()">Ok</button>
                 </div>
             </div>
         </div>