Updated to not load the basic update GUI and use one with a bit more …

…feedback Fixes OpenEVSE/ESP8266_WiFi_v2.x#235
OpenEVSE · Aug 23, 2019 · e0cff2c · e0cff2c
1 parent 339eaca
commit e0cff2c
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/src/home.htm b/src/home.htm
@@ -136,8 +136,21 @@ <h2>Administration</h2>
             <h2>WiFi Firmware</h2>
             <span class="small-text">ESP8266</span><br>
             <p><b>Version: </b><span data-bind="text: config.version"></span></p>
-            <iframe style="width:380px; height:50px;" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" data-bind="attr: {src: upgradeUrl}">
-            </iframe>
+            <div data-bind="visible: !updateFetching() && !updateComplete()">
+              <form action="#" method="post" enctype="multipart/form-data" id="upload_form" data-bind="submit: otaUpdate">
+                <input type="file" name="update">
+                <button data-bind="click: otaUpdate, text: (updateFetching() ? 'Updating...' : 'Update')">Update</button>
+              </form>
+            </div>
+            <div  data-bind="visible: updateFetching() && !updateComplete()">
+              Updating... <br/>
+              <div id="progressBack">
+                <div id="progressBar" data-bind="style: { width: updateProgress()+'%' }"></div>
+              </div>
+            </div>
+            <div  data-bind="visible: updateComplete">
+              Firmware update completed ok
+            </div>
             <p>
               <button data-bind="click: restart, text: (restartFetching() ? 'Restarting...' : 'Restart'), disable: restartFetching">Restart</button>
               <button data-bind="click: factoryReset, text: (factoryResetFetching() ? 'Resetting...' : 'Factory Reset'), disable: factoryResetFetching">Factory Reset</button>

diff --git a/src/style.css b/src/style.css
@@ -234,6 +234,7 @@ input[type="time"] {
   input[type="text"],
   input[type="number"],
   input[type="password"],
+  input[type="file"],
   select {
     width: 240px;
   }
@@ -488,3 +489,17 @@ border: none;
 .updateSlower {
   color: rgb(255,125,20);
 }
+
+#progressBack {
+  width: 100%;
+  border-color: #19a6ff;
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 4px
+}
+
+#progressBar {
+  width: 1%;
+  height: 30px;
+  background-color: #008080;
+}
diff --git a/src/view_models/OpenEvseWiFiViewModel.js b/src/view_models/OpenEvseWiFiViewModel.js
@@ -276,7 +276,7 @@ function OpenEvseWiFiViewModel(baseHost, basePort, baseProtocol)
         }).fail(function () {
           alert("Failed to restart");
         });
-      }  
+      }
     }).fail(function () {
       alert("Failed to save Advanced config");
     }).always(function () {
@@ -479,6 +479,56 @@ function OpenEvseWiFiViewModel(baseHost, basePort, baseProtocol)
     }
   };
 
+  // -----------------------------------------------------------------------
+  // Event: Update
+  // -----------------------------------------------------------------------
+
+  // Support for OTA update of the OpenEVSE
+  self.updateFetching = ko.observable(false);
+  self.updateComplete = ko.observable(false);
+  self.updateError = ko.observable("");
+  self.updateLoaded = ko.observable(0);
+  self.updateTotal = ko.observable(1);
+  self.updateProgress = ko.pureComputed(function () {
+    return (self.updateLoaded() / self.updateTotal()) * 100;
+  });
+
+  self.otaUpdate = function() {
+
+    self.updateFetching(true);
+    var form = $("#upload_form")[0];
+    var data = new FormData(form);
+
+    $.ajax({
+      url: "/update",
+      type: "POST",
+      data: data,
+      contentType: false,
+      processData:false,
+      xhr: function() {
+        var xhr = new window.XMLHttpRequest();
+        xhr.upload.addEventListener("progress", function(evt) {
+          if (evt.lengthComputable) {
+            self.updateLoaded(evt.loaded);
+            self.updateTotal(evt.total);
+          }
+        }, false);
+        return xhr;
+      }
+    }).done(function(msg) {
+      console.log(msg);
+      if("OK" == msg) {
+        self.updateComplete(true);
+      } else {
+        self.updateError(msg);
+      }
+    }).fail(function () {
+      self.updateError("HTTP Update failed");
+    }).always(function () {
+      self.updateFetching(false);
+    });
+  };
+
   // -----------------------------------------------------------------------
   // Receive events from the server
   // -----------------------------------------------------------------------