implement update checking and firmware updates through the UI

data/web/index.html

@@ -96,6 +96,20 @@
       font-size: 1.25em;
       margin-left: 0.5em;
     }
+    .glyphicon.spinning {
+      animation: spin 1s infinite linear;
+      -webkit-animation: spin2 1s infinite linear;
+    }
+    
+    @keyframes spin {
+      from { transform: scale(1) rotate(0deg); }
+      to { transform: scale(1) rotate(360deg); }
+    }
+    
+    @-webkit-keyframes spin2 {
+      from { -webkit-transform: rotate(0deg); }
+      to { -webkit-transform: rotate(360deg); }
+    }
   </style>
 </head>
 
@@ -320,6 +334,105 @@
       });
     };
     
+    var parseVersion = function(v) {
+      var matches = v.match(/(\d+)\.(\d+)\.(\d+)(-(.*))?/);
+      
+      return {
+        major: matches[1],
+        minor: matches[2],
+        patch: matches[3],
+        revision: matches[5],
+        parts: [matches[1], matches[2], matches[3], matches[5]]
+      };
+    };
+    
+    var isNewerVersion = function(a, b) {
+      var va = parseVersion(a)
+        , vb = parseVersion(b);
+        
+      return va.parts > vb.parts;
+    };
+    
+    var handleCheckForUpdates = function() {
+      var currentVersion = null
+        , latestRelease = null;
+        
+      var handleReceiveData = function() {
+        if (currentVersion != null) {
+          $('#current-version').html(currentVersion.version + " (" + currentVersion.variant + ")");
+        }
+        
+        if (latestRelease != null) {
+          $('#latest-version .info-key').each(function() {
+            var value = latestRelease[$(this).data('key')];
+            var prop = $(this).data('prop');
+            
+            if (prop) {
+              $(this).prop(prop, value);
+            } else {
+              $(this).html(value);
+            }
+          });
+        }
+        
+        if (currentVersion != null && latestRelease != null) {
+          $('#latest-version .status').html('');
+          $('#latest-version-info').show();
+          
+          var summary;
+          if (isNewerVersion(latestRelease.tag_name, currentVersion.version)) {
+            summary = "New version available!";
+          } else {
+            summary = "You're on the most recent version.";
+          }
+          $('#version-summary').html(summary);
+          
+          var releaseAsset = latestRelease.assets.filter(function(x) {
+            return x.name.indexOf(currentVersion.variant) != -1;
+          });
+          
+          if (releaseAsset.length > 0) {
+            console.log(releaseAsset[0].url);
+            $('#firmware-link').prop('href', releaseAsset[0].browser_download_url);
+          }
+        }
+        
+        console.log(latestRelease);
+      }
+      
+      var handleError = function(e, d) {
+        console.log(e);
+        console.log(d);
+      }
+      
+      $('#current-version,#latest-version .status').html('<i class="spinning glyphicon glyphicon-refresh"></i>');
+      $('#version-summary').html('');
+      $('#latest-version-info').hide();
+      $('#updates-modal').modal();
+      
+      $.ajax(
+        '/about',
+        {
+          success: function(data) {
+            currentVersion = JSON.parse(data);
+            handleReceiveData();
+          },
+          failure: handleError
+        }
+      );
+      
+      $.ajax(
+        '/latest_release',
+        {
+          success: function(data) {
+            latestRelease = data;
+            handleReceiveData();
+          },
+          failure: handleError
+        }
+      );
+    };
+    
     $(function() {
       $('.radio-option').click(function() {
         $(this).prev().prop('checked', true);
@@ -485,11 +598,97 @@
         $(this).append(elmt);
       });
       
+      $('#updates-btn').click(handleCheckForUpdates);
+      
       loadSettings();
       updateModeOptions();
     });
   </script>
   
+  <div id="update-firmware-modal" class="modal fade" role="dialog">
+    <div class="modal-dialog">
+      <!-- Modal content-->
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h2 class="modal-title">Update Firmware</h2>
+        </div>
+        <div class="modal-body">
+          <div class="alert alert-warning">
+            <p>
+            Download firmware binaries from the
+            <a href="https://github.com/sidoh/esp8266_milight_hub/releases">GitHub releases page</a>.
+            Check for a new version by clicking on the "Check for Updates" button.
+            </p>
+            
+            <p>
+              <b>Make sure the binary you're uploading was compiled for your board!</b>
+              Firmware with incompatible settings could prevent boots. If this happens, 
+              reflash the board with USB.
+            </p>
+          </div>
+          <form action="/firmware" method="post" enctype="multipart/form-data">
+            <input type="file" name="file"/>
+            <p>&nbsp;</p>
+            <input type="submit" name="submit" class="btn btn-success"/>
+          </form>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  
+  <div id="updates-modal" class="modal fade" role="dialog">
+    <div class="modal-dialog">
+      <!-- Modal content-->
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal">&times;</button>
+          <h2 class="modal-title">Update</h2>
+        </div>
+        <div class="modal-body">
+          <div id="version-summary"></div>
+          
+          <hr />
+          
+          <h4>Current Version</h4>
+          <div id="current-version"></div>
+          
+          <div id="latest-version">
+            <h4>Latest Version</h4>
+            <div class="status"></div>
+            <div id="latest-version-info">
+              <label>Version</label>
+              <div class="info-key" data-key="tag_name"></div>
+              
+              <label>Release Date</label>
+              <div class="info-key" data-key="published_at"></div>
+              
+              <label>Release Notes</label>
+              <pre class="info-key" data-key="body"></pre>
+              
+              <div>
+                <a class="info-key" data-prop="href" data-key="html_url">View on GitHub</a>
+              </div>
+              
+              <div>
+                <a class="info-key" id="firmware-link">Download Firmware</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <a href="/download_update/web" class="btn btn-primary">Update Web UI</a>
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+  
   <div class="container">
     <div class="row header-row">
       <div class="col-sm-12">
@@ -784,6 +983,14 @@
         <button type="button" class="btn btn-danger system-btn" data-command="restart">
           Restart
         </button>
+        
+        <button type="button" id="updates-btn" class="btn btn-primary">
+          Check for Updates
+        </button>
+        
+        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#update-firmware-modal">
+          Update Firmware
+        </button>
       </div>
     </div>
   </div>