Browse Source

reformat html (#124)

seregaxvm 4 years ago
parent
commit
f13a10a01f
10 changed files with 573 additions and 192 deletions
  1. 17 19
      http/cars.html
  2. 1 1
      http/cars.lua
  3. 20 22
      http/counter.html
  4. 2 2
      http/file_list.lua
  5. 30 31
      http/garage_door.html
  6. 24 20
      http/garage_door_control.html
  7. 22 17
      http/index.html
  8. 77 0
      http/upload.css
  9. 0 80
      http/upload.html
  10. 380 0
      http/upload.js

+ 17 - 19
http/cars.html

@@ -1,21 +1,19 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!doctype html>
 <html lang="en">
-   <head>
-      <meta http-equiv="content-type" content="text/html; charset=utf-8">
-      <title>Nice cars</title>
-   </head>
-   <body>
-      <h1>Nice cars!</h1>
-      <p>
-         This page loads "large" images of fancy cars. It is meant to serve as a stress test for nodemcu-httpserver.<br>
-         It works with three embedded images of cars, but the server crashes with four. Edit this file and try it yourself.<br>
-         Whoever manages to modify nodemcu-httpserver to load all four images without crashing wins a prize!
-      </p>
-      <figure><img src="cars-ferrari.jpg" /><figcaption>Ferrari</figcaption></figure>
-      <figure><img src="cars-lambo.jpg" /><figcaption>Lamborghini</figcaption></figure>
-      <figure><img src="cars-mas.jpg" /><figcaption>Maserati</figcaption></figure>
-      <figure><img src="cars-porsche.jpg" /><figcaption>Porsche</figcaption></figure>
-   </body>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>Nice cars</title>
+  </head>
+  <body>
+    <h1>Nice cars!</h1>
+    <p>
+      This page loads "large" images of fancy cars. It is meant to serve as a stress test for nodemcu-httpserver.<br>
+      It works with three embedded images of cars, but the server crashes with four. Edit this file and try it yourself.<br>
+      Whoever manages to modify nodemcu-httpserver to load all four images without crashing wins a prize!
+    </p>
+    <figure><img src="cars-ferrari.jpg" /><figcaption>Ferrari</figcaption></figure>
+    <figure><img src="cars-lambo.jpg" /><figcaption>Lamborghini</figcaption></figure>
+    <figure><img src="cars-mas.jpg" /><figcaption>Maserati</figcaption></figure>
+    <figure><img src="cars-porsche.jpg" /><figcaption>Porsche</figcaption></figure>
+  </body>
 </html>
-
-

+ 1 - 1
http/cars.lua

@@ -18,7 +18,7 @@ return function (connection, req, args)
 
    dofile("httpserver-header.lc")(connection, 200, 'html')
    connection:send([===[
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<!doctype html>
 <html lang="en">
    <head>
       <meta http-equiv="content-type" content="text/html; charset=utf-8">

+ 20 - 22
http/counter.html

@@ -1,24 +1,22 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<script>
-			document.addEventListener("DOMContentLoaded", function ()
-				{
-					var number = window.location.search;
-					if ( number == '')  number = 0;
-					else number = number.substring(1,);
-
-					number = parseInt(number) + 1;
-					document.getElementById('count').innerHTML = number;
-					window.location.search = '?' + number;
-				}
-			)
-		</script>
-	</head>
-	<body>
-		<br>This page reloads itself as fast as it can to test the server.</br>
-		<br>It is meant as a stress test to see when and if the server fails.</br>
-		<h1 id="count" class="countclass">
-		</h1>
-	</body>
+<html lang="en">
+  <head>
+    <title>Counter</title>
+    <script>
+      document.addEventListener("DOMContentLoaded", function ()
+      {
+      var number = window.location.search;
+      if ( number == '')  number = 0;
+      else number = number.substring(1,);
+      number = parseInt(number) + 1;
+      document.getElementById('count').innerHTML = number;
+      window.location.search = '?' + number;
+      })
+    </script>
+  </head>
+  <body>
+    <br>This page reloads itself as fast as it can to test the server.<br>
+    <br>It is meant as a stress test to see when and if the server fails.<br>
+    <h1 id="count" class="countclass">-</h1>
+  </body>
 </html>

+ 2 - 2
http/file_list.lua

@@ -16,7 +16,7 @@ return function (connection, req, args)
    connection:send("<b>Flash Address: </b> " .. flashAddress .. " bytes<br/>\n" ..
                    "<b>Flash Size: </b> " .. flashSize .. " bytes<br/>\n")
 
-   connection:send("<p>\n<b>Files:</b><br/>\n<ul>\n")
+   connection:send("<b>Files:</b><br/>\n<ul>\n")
    for name, size in pairs(file.list()) do
       local isHttpFile = string.match(name, "(http/)") ~= nil
       if isHttpFile then
@@ -24,6 +24,6 @@ return function (connection, req, args)
          connection:send('   <li><a href="' .. url .. '">' .. url .. "</a> (" .. size .. " bytes)</li>\n")
       end
    end
-   connection:send("</ul>\n</p>\n</body></html>")
+   connection:send("</ul>\n</body></html>")
 end
 

+ 30 - 31
http/garage_door.html

@@ -1,32 +1,31 @@
-<html>
-   <head>
-     <title>Garage control</title>
-   </head>
-   <body>
-
-      <div align="center">
-
-         <h2>Door 1</h2>
-
-         <form action="garage_door.lua" method="post"/>
-           <input type="hidden" name="door" value="1"/>
-           <input type="submit" name="action" value="status"/>
-           <input type="submit" name="action" value="open"/>
-           <input type="submit" name="action" value="close"/>
-           <input type="submit" name="action" value="toggle"/>
-         </form>
-
-         <h2>Door 2</h2>
-
-         <form action="garage_door.lua" method="post"/>
-           <input type="hidden" name="door" value="2"/>
-           <input type="submit" name="action" value="status"/>
-           <input type="submit" name="action" value="open"/>
-           <input type="submit" name="action" value="close"/>
-           <input type="submit" name="action" value="toggle"/>
-         </form>
-
-      </div>
-
-   </body>
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Garage control</title>
+    <style>
+      div{
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <h2>Door 1</h2>
+      <form action="garage_door.lua" method="post">
+        <input type="hidden" name="door" value="1">
+        <input type="submit" name="action" value="status">
+        <input type="submit" name="action" value="open">
+        <input type="submit" name="action" value="close">
+        <input type="submit" name="action" value="toggle">
+      </form>
+      <h2>Door 2</h2>
+      <form action="garage_door.lua" method="post">
+        <input type="hidden" name="door" value="2">
+        <input type="submit" name="action" value="status">
+        <input type="submit" name="action" value="open">
+        <input type="submit" name="action" value="close">
+        <input type="submit" name="action" value="toggle">
+      </form>
+    </div>
+  </body>
 </html>

+ 24 - 20
http/garage_door_control.html

@@ -1,12 +1,11 @@
 <!DOCTYPE html>
-<html>
-   <head>
-      <link rel="stylesheet" type="text/css" href="garage_door_control.css">
-      <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
-      <meta charset="UTF-8">
-      <title>Garage Remote</title>
-   </head>
-   <script>
+<html lang="en">
+  <head>
+    <link rel="stylesheet" type="text/css" href="garage_door_control.css">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <meta charset="UTF-8">
+    <title>Garage Remote</title>
+    <script>
       var xmlHttp = null;
 
       function pushTheButton(door)
@@ -68,17 +67,22 @@
          }
       }
    </script>
-   <body bgcolor="#777777">
-   <div id="remote">
-      <div id="label" class="start"></div>
-      <a href="#" onclick="pushTheButton(1);" class="button button-1">
-          <span>I</span>
-      </a>
-      <a href="#" onclick="pushTheButton(2); " class="button button-2">
-          <span>II</span>
-      </a>
-      <div id="spacer"></div>
-   </div>
+   <style>
+     body {
+       background-color: #777;
+     }
+   </style>
+   </head>
+   <body>
+     <div id="remote">
+       <div id="label" class="start"></div>
+       <a href="#" onclick="pushTheButton(1);" class="button button-1">
+         <span>I</span>
+       </a>
+       <a href="#" onclick="pushTheButton(2); " class="button button-2">
+         <span>II</span>
+       </a>
+       <div id="spacer"></div>
+     </div>
    </body>
 </html>
-

+ 22 - 17
http/index.html

@@ -1,24 +1,29 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-   <meta charset="utf-8">
-   <title>Served by an ESP8266</title>
-</head>
-<body>
-   <h1>Hello World!</h1>
-   <div align="center">
-   <img src="underconstruction.gif">
-   </div>
-   <p>
+  <head>
+    <meta charset="utf-8">
+    <title>Served by an ESP8266</title>
+    <style>
+      div{
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hello World!</h1>
+    <div>
+      <img alt="under construction" src="underconstruction.gif">
+    </div>
+    <p>
       This page is served by <b>nodemcu-httpserver</b> running on an ESP8266 that uses the <a href="https://github.com/nodemcu/nodemcu-firmware">NodeMCU</a> firmware.
       NodeMCU puts a <a href="http://www.lua.org">Lua</a> interpreter inside the ESP8266. This is surely one of the smallest web servers to date!
-   </p>
+    </p>
 
-   <h3>Where's the source code?</h3>
-   <p>You can find the Lua code for nodemcu-httpserver in <a href="https://github.com/marcoskirsch/nodemcu-httpserver">GitHub</a></p>
+    <h3>Where's the source code?</h3>
+    <p>You can find the Lua code for nodemcu-httpserver in <a href="https://github.com/marcoskirsch/nodemcu-httpserver">GitHub</a></p>
 
-   <h3>Serve me some pages!</h3>
-   <ul>
+    <h3>Serve me some pages!</h3>
+    <ul>
       <li><a href="index.html">Index</a>: This page (static)</li>
       <li><a href="hello_world.txt">A text file</a>: Simple text, to verify MIME type is ok. (static)</li>
       <li><a href="cars.html">Nice cars</a>: Stress test, loads several "large" images. Makes the chip panic and restart :( (static)</li>
@@ -33,6 +38,6 @@
       <li><a href="file_list.lua">List all server files</a>: Displays a list of all the server files. (Lua)</li>
       <li><a href="upload.html">Upload</a>: Update, remove, list files on the server. Beware security implications. By <a href="https://github.com/ATAMAH">ATAMAH</a>.</li>
       <li><a href="foo.html">Foo</a>: A file that doesn't exist. Should error (404 error)</li>
-   </ul>
-</body>
+    </ul>
+  </body>
 </html>

File diff suppressed because it is too large
+ 77 - 0
http/upload.css


File diff suppressed because it is too large
+ 0 - 80
http/upload.html


+ 380 - 0
http/upload.js

@@ -0,0 +1,380 @@
+var files = [];
+var sendingOffset = 0;
+var lastRequest = '';
+var dataView;
+var filesCount = 0;
+var currentUploadingFile = 0;
+var uploadOrder = [];
+var uploadingInProgress = 0;
+var fileUploadRequest;
+
+var chunkSize = 128;
+var totalUploaded = 0;
+
+var tpl = '<li class="working" id="file%filenum%"><div class="chart" id="graph%filenum%" data-percent="0"></div><p>%filename%<i>%filesize%</i></p><span class="delete" id="fileStatus%filenum%" onclick="DeleteFiles(%filenum%);"></span></li>';
+
+document.addEventListener("DOMContentLoaded", function() {
+    var dropbox;
+
+    dropbox = document.getElementById("dropbox");
+    dropbox.addEventListener("dragenter", dragenter, false);
+    dropbox.addEventListener("dragover", dragover, false);
+    dropbox.addEventListener("drop", drop, false);
+
+    UpdateFileList();
+
+    UploadDir("http");
+});
+
+function dragenter(e) {
+    e.stopPropagation();
+    e.preventDefault();
+}
+
+function dragover(e) {
+    e.stopPropagation();
+    e.preventDefault();
+}
+
+function drop(e) {
+    e.stopPropagation();
+    e.preventDefault();
+
+    var dt = e.dataTransfer;
+
+    handleFiles(dt.files);
+}
+
+function handleFiles(tfiles) {
+    var filesCount = tfiles.length;
+    files = tfiles;
+    currentUploadingFile = 0;
+    uploadOrder = [];
+
+    sendingOffset = 0;
+    lastRequest = '';
+
+    document.getElementById('fileList').innerHTML = '';
+
+    var fileNames = {};
+
+    for (var i = 0; i < filesCount; i++) {
+        fileNames[uploadDir + tfiles[i].name] = i;
+    }
+
+    Keys(fileNames).sort(function(a,b){var c=a.toLowerCase(),d=b.toLowerCase();return c<d?-1:c>d?1:0}).forEach(function(item) {
+        var i = fileNames[item];
+
+        var append = tpl.replace(/%filename%/g, uploadDir + tfiles[i].name);
+        append = append.replace(/%filesize%/g, formatFileSize(tfiles[i].size));
+        append = append.replace(/%filenum%/g, i);
+
+        document.getElementById('fileList').insertAdjacentHTML('beforeend', append);
+
+        UpdateGraph(0, i);
+
+        uploadOrder.push(i);
+    });
+}
+
+function DeleteFiles(filenum) {
+    var elem = document.getElementById('file' + filenum.toString());
+    elem.parentNode.removeChild(elem);
+
+    if (uploadingInProgress) {
+        if (parseInt(filenum) != uploadOrder[currentUploadingFile]) {
+            for (var i = 0; i < uploadOrder.length; i++) {
+                if (uploadOrder[i] == filenum) {
+                    delete uploadOrder[i];
+                }
+            }
+        }
+        else {
+            uploadingInProgress = 0;
+
+            RemoveFile(files[uploadOrder[currentUploadingFile]].name + '.dnl');
+
+            for (var i = 0; i < uploadOrder.length; i++) {
+                if (uploadOrder[i] == filenum) {
+                    delete uploadOrder[i];
+                }
+            }
+
+            currentUploadingFile++;
+            totalUploaded = 0;
+            sendingOffset = 0;
+
+            lastRequest = '';
+            fileUploadRequest.abort();
+            fileUploadRequest = 0;
+
+            UploadFiles();
+        }
+    }
+    else {
+        for (var i = 0; i < uploadOrder.length; i++) {
+            if (uploadOrder[i] == filenum) {
+                delete uploadOrder[i];
+            }
+        }
+    }
+}
+
+function UploadFiles() {
+    if (uploadOrder[currentUploadingFile] === undefined) {
+        uploadingInProgress = 0;
+
+        if (currentUploadingFile < files.length - 1) {
+            currentUploadingFile++;
+
+            UploadFiles();
+        }
+
+        return;
+    }
+
+    var fileNum = uploadOrder[currentUploadingFile];
+    var file = files[fileNum];
+    var chunkLen = 0;
+    var filedata = '';
+
+    uploadingInProgress = 1;
+
+    var fr = new FileReader();
+
+    fr.onload = function() {
+        dataView = null;
+        dataView = new Uint8Array(fr.result);
+
+        if (file.size <= chunkSize) {
+            sendingOffset = 0;
+            chunkLen = file.size;
+
+            for (var i = 0; i < dataView.length; i++) {
+                if (dataView[i] < 16) {
+                    filedata += '0';
+                }
+
+                filedata += dataView[i].toString(16).toUpperCase();
+            }
+        }
+        else {
+            if (dataView.length - sendingOffset > chunkSize) {
+                chunkLen = chunkSize;
+            }
+            else {
+                chunkLen = dataView.length - sendingOffset;
+            }
+
+
+            for (var i = sendingOffset; i < sendingOffset + chunkLen; i++) {
+                if (dataView[i] < 16) {
+                    filedata += '0';
+                }
+
+                filedata += dataView[i].toString(16).toUpperCase();
+            }
+        }
+
+        fileUploadRequest = new XMLHttpRequest();
+
+        fileUploadRequest.onreadystatechange = function() {
+            if (fileUploadRequest.readyState != 4) return;
+
+            if (fileUploadRequest.status == 200) {
+                if (chunkLen + sendingOffset < dataView.length) {
+                    totalUploaded += chunkSize;
+
+                    UpdateGraph(Math.round((totalUploaded / file.size) * 100), uploadOrder[currentUploadingFile]);
+
+                    sendingOffset += chunkSize;
+                    UploadFiles();
+                }
+                else {
+                    var statusElement = document.getElementById('fileStatus' + uploadOrder[currentUploadingFile]);
+
+                    sendingOffset = 0;
+
+                    UpdateGraph(100, uploadOrder[currentUploadingFile]);
+
+                    uploadingInProgress = 0;
+
+                    UpdateFileList();
+
+                    totalUploaded = 0;
+
+                    if (statusElement) {
+                        statusElement.classList.add("uploaded");
+                    }
+
+                    if (currentUploadingFile < files.length) {
+                        currentUploadingFile++;
+                        UploadFiles();
+                    }
+                }
+            }
+            else {
+                UploadFiles();
+            }
+
+            fileUploadRequest = 0;
+        }
+
+        lastRequest = 'upload.lua?cmd=upload&filename=' + uploadDir + file.name + '&filesize=' + file.size + '&len=' + chunkLen + '&offset=' + sendingOffset + '&data=' + filedata;
+
+        fileUploadRequest.timeout = 5000;
+        fileUploadRequest.open('GET', lastRequest, true);
+        fileUploadRequest.send();
+    };
+
+    fr.readAsArrayBuffer(file);
+}
+
+function UploadDir(dir) {
+    if (uploadingInProgress == 0) {
+        document.getElementById('dir').innerHTML = "/" + dir;
+        uploadDir = dir;
+        if (!(uploadDir == "")) {
+            uploadDir += "/";
+        }
+    }
+}
+
+function formatFileSize(bytes) {
+    if (typeof bytes !== 'number') {
+        return '';
+    }
+
+    if (bytes >= 1073741824) {
+        return (bytes / 1073741824).toFixed(2) + ' GB';
+    }
+
+    if (bytes >= 1048576) {
+        return (bytes / 1048576).toFixed(2) + ' MB';
+    }
+
+    return (bytes / 1024).toFixed(2) + ' KB';
+}
+
+function UpdateGraph(percent, id) {
+    var el = document.getElementById('graph' + id); // get canvas
+
+    if (!el) {
+        return;
+    }
+
+    var options = {
+        percent:  el.getAttribute('data-percent') || 0,
+        size: el.getAttribute('data-size') || 48,
+        lineWidth: el.getAttribute('data-line') || 8,
+        rotate: el.getAttribute('data-rotate') || 0
+    }
+
+    var canvas = document.createElement('canvas');
+
+    if (typeof(G_vmlCanvasManager) !== 'undefined') {
+        G_vmlCanvasManager.initElement(canvas);
+    }
+
+    var ctx = canvas.getContext('2d');
+    canvas.width = canvas.height = options.size;
+
+    el.appendChild(canvas);
+
+    ctx.translate(options.size / 2, options.size / 2); // change center
+    ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
+
+    var radius = (options.size - options.lineWidth) / 2;
+
+    function drawCircle(color, lineWidth, percent) {
+        if (percent) {
+            percent = Math.min(Math.max(0, percent), 1);
+            ctx.beginPath();
+            ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
+            ctx.strokeStyle = color;
+            ctx.lineCap = 'round'; // butt, round or square
+            ctx.lineWidth = lineWidth
+            ctx.stroke();
+        }
+    };
+
+    options.percent = percent;
+
+    drawCircle('#2e3134', options.lineWidth + 1, 100 / 100);
+    drawCircle('#007a96', options.lineWidth, options.percent / 100);
+}
+
+function Keys(obj) {
+    var keys = [];
+
+    for(var key in obj){
+        if(obj.hasOwnProperty(key)){
+            keys.push(key);
+        }
+    }
+
+    return keys;
+}
+
+function UpdateFileList() {
+    var fileListRequest = new XMLHttpRequest();
+
+    fileListRequest.onreadystatechange = function() {
+        if (fileListRequest.readyState != 4) return;
+
+        if (fileListRequest.status == 200) {
+            var fileInfo = JSON.parse(fileListRequest.responseText);
+            var fileList = fileInfo['files'];
+
+            document.getElementById('fileInfo').innerHTML = '';
+
+            var tpl = '<li class="working"><p style="left: 30px;">%filenamelink%<i>%filesize%</i></p><span class="delete" id="fileStatus" onclick="RemoveFile(\'%filename%\');"></span></li>';
+            var tplTotal = '<li class="working"><p style="left: 30px;">Used:<i>%used%</i></p></li><li class="working"><p style="left: 30px;">Free:<i>%free%</i></p></li><li class="working"><p style="left: 30px;">Total:<i>%total%</i></p></li>';
+
+            var append, link;
+
+            Keys(fileList).sort(function(a,b){var c=a.toLowerCase(),d=b.toLowerCase();return c<d?-1:c>d?1:0}).forEach(function(item) {
+                if (!item.match(/\.lc$/ig) && item.match(/^http\//ig)) {
+                    link = item.replace(/\.gz$/g, '').replace(/^http\//g, '');
+                    append = tpl.replace(/%filenamelink%/g, '<a href="' + link + '" target="_blank">' + item + '</a>');
+                }
+                else {
+                    append = tpl.replace(/%filenamelink%/g, item);
+                }
+
+                append = append.replace(/%filename%/g, item);
+                append = append.replace(/%filesize%/g, formatFileSize(parseInt(fileList[item])));
+                document.getElementById('fileInfo').insertAdjacentHTML('beforeend', append);
+            });
+
+            append = tplTotal.replace(/%used%/g, formatFileSize(parseInt(fileInfo['used'])));
+            append = append.replace(/%free%/g,   formatFileSize(parseInt(fileInfo['free'])));
+            append = append.replace(/%total%/g,  formatFileSize(parseInt(fileInfo['total'])));
+
+            document.getElementById('fileInfo').insertAdjacentHTML('beforeend', append);
+        }
+        else {
+
+        }
+
+        fileListRequest = null;
+    }
+
+    fileListRequest.open('GET', 'upload.lua?cmd=list', true);
+    fileListRequest.send();
+}
+
+function RemoveFile(name) {
+    var fileRemoveRequest = new XMLHttpRequest();
+
+    fileRemoveRequest.onreadystatechange = function() {
+        if (fileRemoveRequest.readyState != 4) return;
+
+        if (fileRemoveRequest.status == 200) {
+            UpdateFileList();
+        }
+    }
+
+    fileRemoveRequest.open('GET', 'upload.lua?cmd=remove&filename=' + name, true);
+    fileRemoveRequest.send();
+}

Some files were not shown because too many files changed in this diff