From 78ff239f9392a9e030152f3df64c42074d5db420 Mon Sep 17 00:00:00 2001
From: luc <luc.lebosse@tech-hunters.com>
Date: Tue, 27 Oct 2015 13:16:42 +0800
Subject: [PATCH] Fix launching upload if no file selected

Add moving progress bar when uploading
Add meter bar for disk occupation
Add better hide parameter
---
 esp8266/data/settings.tpl | 10 +++++++---
 esp8266/webinterface.cpp  |  4 ++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/esp8266/data/settings.tpl b/esp8266/data/settings.tpl
index 884fd901..e4270620 100644
--- a/esp8266/data/settings.tpl
+++ b/esp8266/data/settings.tpl
@@ -39,7 +39,7 @@ $SUCCESS_MSG$
 <div class="panel-heading">Filesystem</div>
 <div class="panel-body">
 <input type="file" id="file-select" name="myfiles[]" multiple />
-<input class="btn btn-primary" type="button" id="upload-button" onclick="Sendfile();" value="Upload"/><br><br>
+<input class="btn btn-primary" type="button" id="upload-button" onclick="Sendfile();" value="Upload"/>&nbsp;&nbsp;<progress style="visibility:hidden;" name='prg' id='prg'></progress>
 <table class="table table-striped" style="border:1px;solid #dddddd;margin-bottom:20px;" ><thead><tr><th>Name</th><th>size</th><th width='0%'></th></tr></thead><tbody id="file_list"><tbody></table>
 <label class="text-info" id="status"></label>
 </div>
@@ -51,7 +51,8 @@ var content ="";
 content ="Status: "+jsonresponse.status;
 content +="&nbsp;&nbsp;Total space: "+jsonresponse.total;
 content +="&nbsp;&nbsp;Used space: "+jsonresponse.used;
-content +="&nbsp;&nbsp;Occupation: "+jsonresponse.occupation;
+content +="&nbsp;&nbsp;Occupation: ";
+content +="<meter min='0' max='100' high='90' value='"+jsonresponse.occupation +"'></meter>"+jsonresponse.occupation +"%";
 document.getElementById('status').innerHTML=content;
 content ="";
 for (var i=0;i <jsonresponse.files.length;i++){
@@ -82,8 +83,10 @@ xmlhttp.open("GET", url, true);
 xmlhttp.send();
 }
 function Sendfile(){
-document.getElementById('upload-button').value = "Uploading...";
 var files = document.getElementById('file-select').files;
+if (files.length==0)return;
+document.getElementById('upload-button').value = "Uploading...";
+document.getElementById('prg').style.visibility = "visible";
 var formData = new FormData();
 for (var i = 0; i < files.length; i++) {
 var file = files[i];
@@ -93,6 +96,7 @@ xmlhttp.open('POST', '/FILES', true);
 xmlhttp.onload = function () {
  if (xmlhttp.status === 200) {
 document.getElementById('upload-button').value = 'Upload';
+document.getElementById('prg').style.visibility = "hidden";
 document.getElementById('file-select').value="";
 var jsonresponse = JSON.parse(xmlhttp.responseText);
 dispatchstatus(jsonresponse);
diff --git a/esp8266/webinterface.cpp b/esp8266/webinterface.cpp
index 37dc2c92..3ecfb7e0 100644
--- a/esp8266/webinterface.cpp
+++ b/esp8266/webinterface.cpp
@@ -63,7 +63,7 @@ const char VALUE_CONNECTION_FAILED2[] PROGMEM = "Connection failed! (Wrong Passw
 const char VALUE_IDLE[] PROGMEM = "Idle";
 const char VALUE_DISCONNECTED[] PROGMEM = "Disconnected";
 const char VALUE_ITEM_VISIBLE[] PROGMEM = "visibility:visible;";
-const char VALUE_ITEM_HIDDEN[] PROGMEM ="visibility:hidden;height:0px;width:0px;";
+const char VALUE_ITEM_HIDDEN[] PROGMEM ="visibility:hidden;height:0px;width:0px;padding:0px";
 const char KEY_IP[] PROGMEM ="$IP$";
 const char KEY_WEB_ADDRESS[] PROGMEM ="$WEB_ADDRESS$";
 const char KEY_HOSTNAME[] PROGMEM ="$HOSTNAME$";
@@ -2402,7 +2402,7 @@ void handleFileList() {
 	jsonfile+="\"used\":\"" + formatBytes(used) + "\",";
 	jsonfile+="\"occupation\":\"" ;
 	jsonfile+= intTostr(100*used/total);
-	jsonfile+="%\"";
+	jsonfile+="\"";
 	jsonfile+="}";
 	path = "";
 	web_interface->WebServer.send(200, "application/json", jsonfile);