Refactoring for stability, etc. Add new animation.
This commit is contained in:
@@ -1,80 +1,83 @@
|
||||
|
||||
<!DOCTYPE HTML> <!-- For more information visit: https://fipsok.de -->
|
||||
<html lang="de">
|
||||
<head>
|
||||
|
||||
<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="/"> 📁</label><span id="cr">+📁</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> 📁 ${f} <a href="?delete=/${f}">🗑️</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 ? '▼' : '▲'} 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();
|
||||
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="/"> 📁</label><span id="cr">+📁</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> 📁 ${f} <a href="?delete=/${f}">🗑️</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 ? '▼' : '▲'} 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>
|
||||
</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>
|
||||
<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 “ % & / : ; \ sind nicht erlaubt." required="">
|
||||
<button>Create</button>
|
||||
<input name="new" placeholder="Ordner Name" pattern="[^\x22/%&\\:;]{1,31}"
|
||||
title="Zeichen “ % & / : ; \ sind nicht erlaubt." required="">
|
||||
<button>Create</button>
|
||||
</form>
|
||||
<main></main>
|
||||
<form action="/format" method="POST">
|
||||
<button id="btn">Format LittleFS</button>
|
||||
<button id="btn">Format LittleFS</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
71
res/webserver/icons/hearts.svg
Normal file
71
res/webserver/icons/hearts.svg
Normal file
@@ -0,0 +1,71 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
width="50mm"
|
||||
height="50mm"
|
||||
version="1.1"
|
||||
viewBox="0 0 50 50"
|
||||
id="svg4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/">
|
||||
<defs
|
||||
id="defs4" />
|
||||
<metadata
|
||||
id="metadata1">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
transform="translate(-60.99,-59.667)"
|
||||
display="none"
|
||||
id="g1">
|
||||
<rect
|
||||
x="-30.238001"
|
||||
y="-2.0789001"
|
||||
width="265.14999"
|
||||
height="146.28"
|
||||
fill="#1b2131"
|
||||
fill-rule="evenodd"
|
||||
opacity="0.998"
|
||||
id="rect1" />
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-158.51 -1.487)"
|
||||
stroke="#fff"
|
||||
id="g2">
|
||||
<rect
|
||||
x="159.51"
|
||||
y="2.487"
|
||||
width="48"
|
||||
height="48"
|
||||
ry="6.8036"
|
||||
fill="none"
|
||||
opacity=".998"
|
||||
stroke="#fff"
|
||||
stroke-dashoffset="37.795"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
id="rect2" />
|
||||
</g>
|
||||
<g
|
||||
transform="translate(-60.944598,-60.498371)"
|
||||
fill="none"
|
||||
stroke="#ffffff"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
id="g4">
|
||||
<path
|
||||
d="m 98.493049,73.311072 c -1.567368,-1.782803 -3.642384,-2.757209 -5.857002,-2.757209 -2.214619,0 -4.29598,0.981624 -5.863346,2.764427 l -0.818584,0.9311 -0.831275,-0.945536 c -1.567366,-1.782803 -3.655074,-2.771645 -5.869692,-2.771645 -2.208273,0 -4.289634,0.981625 -5.850654,2.757209 -1.567366,1.782803 -2.43037,4.15025 -2.424025,6.669271 0,2.519022 0.86935,4.87925 2.436716,6.662054 l 11.91706,13.555077 c 0.164986,0.18766 0.387082,0.28871 0.602834,0.28871 0.21575,0 0.437847,-0.0938 0.602832,-0.28149 l 11.94244,-13.533427 c 1.567367,-1.782803 2.430367,-4.150249 2.430367,-6.66927 0.006,-2.519021 -0.85031,-4.886468 -2.417671,-6.669271 z M 97.274689,85.271009 85.935081,98.118738 74.620853,85.249355 c -1.24374,-1.414693 -1.929067,-3.291328 -1.929067,-5.290666 0,-1.999337 0.678982,-3.875972 1.922721,-5.283447 1.237395,-1.407477 2.887254,-2.187003 4.638643,-2.187003 1.757735,0 3.413939,0.779526 4.657679,2.19422 l 1.43411,1.631228 c 0.336317,0.382545 0.875694,0.382545 1.212012,0 l 1.421416,-1.616792 c 1.24374,-1.414695 2.899945,-2.194219 4.651334,-2.194219 1.751392,0 3.401248,0.779524 4.644988,2.187001 1.24374,1.414694 1.922718,3.291328 1.922718,5.290666 0.0064,1.999337 -0.678978,3.875972 -1.922718,5.290666 z"
|
||||
id="path1"
|
||||
style="fill:#ffffff;stroke-width:0.067677" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
File diff suppressed because it is too large
Load Diff
@@ -1,4 +1,3 @@
|
||||
|
||||
/* For more information visit:https://fipsok.de */
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
@@ -7,72 +6,89 @@ body {
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
}
|
||||
h1,h2 {
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
color: #e1e1e1;
|
||||
text-shadow: 2px 2px 2px black;
|
||||
}
|
||||
|
||||
li {
|
||||
background-color: #feb1e2;
|
||||
list-style-type: none;
|
||||
margin-bottom: 10px;
|
||||
padding: 2px 5px 1px 0;
|
||||
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
li a:first-child, li b {
|
||||
|
||||
li a:first-child,
|
||||
li b {
|
||||
background-color: #8f05a5;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
text-decoration:none;
|
||||
text-decoration: none;
|
||||
padding: 2px 5px;
|
||||
text-shadow: 2px 2px 1px black;
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li strong {
|
||||
color: red;
|
||||
}
|
||||
|
||||
input {
|
||||
height:35px;
|
||||
font-size:14px;
|
||||
height: 35px;
|
||||
font-size: 14px;
|
||||
padding-left: .3em;
|
||||
}
|
||||
label + a {
|
||||
|
||||
label+a {
|
||||
text-decoration: none;
|
||||
}
|
||||
h1 + main {
|
||||
|
||||
h1+main {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.2em;
|
||||
}
|
||||
|
||||
button {
|
||||
height:40px;
|
||||
width:130px;
|
||||
font-size:16px;
|
||||
height: 40px;
|
||||
width: 130px;
|
||||
font-size: 16px;
|
||||
margin-top: 1em;
|
||||
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
div button {
|
||||
background-color: #7bff97;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#left {
|
||||
align-items:flex-end;
|
||||
align-items: flex-end;
|
||||
text-shadow: 0.5px 0.5px 1px #757474;
|
||||
}
|
||||
|
||||
#cr {
|
||||
font-weight: bold;
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#up {
|
||||
width: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.note {
|
||||
background-color: #fecdee;
|
||||
padding: 0.5em;
|
||||
@@ -81,31 +97,39 @@ nav {
|
||||
max-width: 320px;
|
||||
border-radius: 0.5em;
|
||||
}
|
||||
|
||||
.no {
|
||||
display: none;
|
||||
}
|
||||
|
||||
form [title] {
|
||||
background-color: skyblue;
|
||||
font-size: 16px;
|
||||
width: 125px;
|
||||
}
|
||||
|
||||
form:nth-of-type(2) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
[value*=Format] {
|
||||
margin-top: 1em;
|
||||
box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
|
||||
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
[name="group"] {
|
||||
display: none;
|
||||
}
|
||||
[name="group"] + label {
|
||||
|
||||
[name="group"]+label {
|
||||
font-size: 1.5em;
|
||||
margin-right: 5px;
|
||||
}
|
||||
[name="group"] + label::before {
|
||||
|
||||
[name="group"]+label::before {
|
||||
content: "\002610";
|
||||
}
|
||||
[name="group"]:checked + label::before {
|
||||
content: '\002611\0027A5';
|
||||
}
|
||||
|
||||
[name="group"]:checked+label::before {
|
||||
content: '\002611\0027A5';
|
||||
}
|
||||
Reference in New Issue
Block a user