Add resources for webserver, frontplate, etc.

2023-08-22 14:10:26 +02:00
parent 9a4a8c2a7d
commit d4c7536408
25 changed files with 11983 additions and 1 deletions
--- a/res/webserver/fs.html
+++ b/res/webserver/fs.html
@@ -0,0 +1,80 @@
+
+<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
+<html lang="de">
+  <head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" href="style.css">
+	<title>Filesystem Manager</title>
+	<script>
+	  document.addEventListener('DOMContentLoaded', () => {
+		list(JSON.parse(localStorage.getItem('sortBy')));
+		btn.addEventListener('click', () => {
+		  if (!confirm(`Wirklich formatieren? Alle Daten gehen verloren.\nDu musst anschließend fs.html wieder laden.`)) event.preventDefault();
+		});
+	  });
+	  function list(to){
+		let myList = document.querySelector('main'), noted = '';
+		fetch(`?sort=${to}`).then( (response) => {
+          return response.json();
+        }).then((json) => {
+		  myList.innerHTML = '<nav><input type="radio" id="/" name="group" checked="checked"><label for="/"> &#128193;</label><span id="cr">+&#128193;</nav></span><span id="si"></span>';
+		  document.querySelector('form').setAttribute('action', '/upload?f=');
+          for (var i = 0; i < json.length - 1; i++) {
+		    let dir = '', f = json[i].folder, n = json[i].name;
+		    if (f != noted) {
+			  noted = f;
+			  dir = `<nav><input type="radio" id="${f}" name="group"><label for="${f}"></label> &#128193; ${f} <a href="?delete=/${f}">&#x1f5d1;&#xfe0f;</a></nav>`;
+			}
+            if (n != '') dir += `<li><a href="${f}/${n}">${n}</a><small> ${json[i].size}</small><a href="${f}/${n}"download="${n}"> Download</a> or<a href="?delete=${f}/${n}"> Delete</a>`;
+            myList.insertAdjacentHTML('beforeend', dir);
+          }
+          myList.insertAdjacentHTML('beforeend', `<li><b id="so">${to ? '&#9660;' : '&#9650;'} LittleFS</b> belegt ${json[i].usedBytes.replace(".00", "")} von ${json[i].totalBytes.replace(".00", "")}`);
+          var free = json[i].freeBytes;
+		  cr.addEventListener('click', () => {
+			document.getElementById('no').classList.toggle('no');
+		  });
+		  so.addEventListener('click', () => {
+			list(to=++to%2);
+			localStorage.setItem('sortBy', JSON.stringify(to));
+		  });
+		  document.addEventListener('change', (e) => {
+		    if (e.target.id == 'fs') {
+		  	  for (var bytes = 0, i = 0; i < event.target.files.length; i++) bytes += event.target.files[i].size;
+              for (var output = `${bytes} Byte`, i = 0, circa = bytes / 1024; circa > 1; circa /= 1024) output = circa.toFixed(2) + [' KB', ' MB', ' GB'][i++];
+              if (bytes > free) {
+                si.innerHTML = `<li><b> ${output}</b><strong> Ungenügend Speicher frei</strong></li>`;
+                up.setAttribute('disabled', 'disabled');
+              } 
+              else {
+			    si.innerHTML = `<li><b>Dateigröße:</b> ${output}</li>`;
+                up.removeAttribute('disabled');
+              }
+			}
+            document.querySelectorAll(`input[type=radio]`).forEach(el => { if (el.checked) document.querySelector('form').setAttribute('action', '/upload?f=' + el.id)});
+          });
+		  document.querySelectorAll('[href^="?delete=/"]').forEach(node => {
+            node.addEventListener('click', () => {
+	          if (!confirm('Sicher!')) event.preventDefault();
+			});
+		  });
+	    });
+      }
+	</script>
+  </head>
+  <body>
+	<h2>ESP8266 Filesystem Manager</h2>
+	<form method="post" enctype="multipart/form-data">
+	  <input id="fs" type="file" name="up[]" multiple>
+	  <button id="up" disabled>Upload</button>
+	</form>
+	<form id="no" class="no" method="POST">
+	  <input name="new" placeholder="Ordner Name" pattern="[^\x22/%&\\:;]{1,31}" title="Zeichen &#8220; % & / : ; \  sind nicht erlaubt." required="">
+	  <button>Create</button>
+	</form>
+	<main></main>
+	<form action="/format" method="POST">
+	  <button id="btn">Format LittleFS</button>
+	</form>
+  </body>
+</html>