135 lines
6.1 KiB
HTML
135 lines
6.1 KiB
HTML
<!--
|
|
***************************************************************************
|
|
** Program : FSexplorer.html, part of ESP_ticker
|
|
** Version : v1.4.0 (02-01-2021)
|
|
**
|
|
** Copyright (c) 2021 Willem Aandewiel
|
|
**
|
|
** TERMS OF USE: MIT License. See bottom of file.
|
|
***************************************************************************
|
|
-->
|
|
<!DOCTYPE HTML>
|
|
<html lang="en">
|
|
<head>
|
|
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
|
<link rel="stylesheet" href="FSexplorer.css">
|
|
<title>FSexplorer ESP</title>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
let span = document.querySelector('span');
|
|
let main = document.querySelector('main');
|
|
let fileSize = document.querySelector('fileSize');
|
|
let elem = document.querySelectorAll('input');
|
|
//fetch('json').then(function (response) {
|
|
fetch('api/listfiles').then(function (response) {
|
|
return response.json();
|
|
}).then(function (json) {
|
|
let dir = '<table width=90%>';
|
|
for (var i = 0; i < json.length - 1; i++) {
|
|
dir += "<tr>";
|
|
if (json[i].name.indexOf("More files not") > -1)
|
|
{
|
|
dir += `<td width=20% nowrap>${json[i].name}</td>`;
|
|
dir += `<td width=10% nowrap></td>`;
|
|
dir += `<td width=10% nowrap></td>`;
|
|
}
|
|
else
|
|
{
|
|
dir += `<td width=20% nowrap><a href ="${json[i].name}" target="_blank">${json[i].name}</a></td>`;
|
|
dir += `<td width=10% nowrap><small>${json[i].size}</small></td>`;
|
|
dir += `<td width=10% nowrap><a href ="${json[i].name}"download="${json[i].name}"> Download </a></td>`;
|
|
if ( json[i].name != 'FSexplorer.html' && json[i].name != 'FSexplorer.css' && json[i].name != 'FSexplorer.png'
|
|
&& json[i].name != 'index.html' && json[i].name != 'index.js' && json[i].name != 'index.css'
|
|
&& json[i].name != 'settings.png'
|
|
)
|
|
{
|
|
dir += `<td width=10% nowrap><a href ="${json[i].name}?delete=/${json[i].name}"> Delete </a></td>`;
|
|
if (json[i].name == '!format')
|
|
{
|
|
document.getElementById('FormatLittleFS').disabled = false;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
dir += `<td width=10% nowrap> </td>`;
|
|
}
|
|
}
|
|
dir += "<td width=50%> </td></tr>";
|
|
} // for ..
|
|
main.insertAdjacentHTML('beforeend', dir);
|
|
document.querySelectorAll('[href*=delete]').forEach((node) => {
|
|
node.addEventListener('click', () => {
|
|
if (!confirm('Weet je zeker dat je dit bestand wilt verwijderen?!')) event.preventDefault();
|
|
});
|
|
});
|
|
main.insertAdjacentHTML('beforeend', '</table>');
|
|
main.insertAdjacentHTML('beforeend', `<p><b>LittleFS</b> gebruikt ${json[i].usedBytes} van ${json[i].totalBytes}`);
|
|
free = json[i].freeBytes;
|
|
fileSize.innerHTML = "<b> </b><p>"; // spacer
|
|
|
|
}); // function(json)
|
|
elem[0].addEventListener('change', () => {
|
|
let nBytes = elem[0].files[0].size, output = `${nBytes} Byte`;
|
|
for (var aMultiples = [
|
|
' KB',
|
|
' MB'
|
|
], i = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, i++) {
|
|
output = nApprox.toFixed(2) + aMultiples[i];
|
|
}
|
|
if (nBytes > free) {
|
|
fileSize.innerHTML = `<p><small> Bestand Grootte: ${output}</small><strong style="color: red;"> niet genoeg ruimte! </strong><p>`;
|
|
elem[1].setAttribute('disabled', 'disabled');
|
|
}
|
|
else {
|
|
fileSize.innerHTML = `<b>Bestand grootte:</b> ${output}<p>`;
|
|
elem[1].removeAttribute('disabled');
|
|
}
|
|
});
|
|
//elem[6].addEventListener('click', () => {
|
|
document.getElementById('FormatLittleFS').addEventListener('click', () => {
|
|
if (!confirm(`Weet je zeker dat je deze functie wilt uitvoeren?\nAls je doorgaat moet je zelf FSexplorer.html en álle andere systeem bestanden weer uploaden!!.`)) event.preventDefault();
|
|
});
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h2>FSexplorer ESP</h2>
|
|
<div>
|
|
<main></main>
|
|
</div>
|
|
<form action="/upload" method="POST" enctype="multipart/form-data"><input type="file" name="upload">
|
|
<input type="submit" value="Upload" disabled>
|
|
</form>
|
|
<span></span>
|
|
<fileSize></fileSize>
|
|
<hr>
|
|
<div style='width: 40%'>
|
|
<span>
|
|
<form style='float: left;' action='/update' method='GET'>
|
|
<input type='submit' class='button' name='SUBMIT' value='Update Firmware' ENABLED/>
|
|
</form>
|
|
<form style='float: right;' action='/'>
|
|
<input type='submit' class='button' name='SUBMIT' value='Exit FSexplorer'>
|
|
</form>
|
|
</span>
|
|
|
|
</div>
|
|
<div style='width: 40%'>
|
|
<span>
|
|
<form style='float: left;' action='/ReBoot'>
|
|
<input type='submit' class='button' name='SUBMIT' value='ReBoot'>
|
|
</form>
|
|
|
|
</div>
|
|
<div style='width: 40%'>
|
|
<span>
|
|
<form style='float right;' action="/LittleFSformat" method="POST">
|
|
<input id='FormatLittleFS' type='submit' class='button' name='SUBMIT' value='Format LittleFS' DISABLED/>
|
|
</form>
|
|
</span>
|
|
</div>
|
|
</body>
|
|
</html>
|