mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-06 19:46:54 +03:00
add data export (CSV files) (#3537)
* Update backup.html * Add files via upload * Update data_export.html --------- Co-authored-by: CaCO3 <caco3@ruinelli.ch>
This commit is contained in:
SybexX
207
sd-card/html/data_export.html
Normal file
207
sd-card/html/data_export.html
Normal file
@@ -0,0 +1,207 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xml:lang="en">
|
||||
<head>
|
||||
<title>Data Export (CSV)</title>
|
||||
<meta charset="UTF-8"/>
|
||||
|
||||
<style>
|
||||
h1 {font-size: 2em;}
|
||||
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
|
||||
h3 {font-size: 1.2em;}
|
||||
p {font-size: 1em;}
|
||||
|
||||
input[type=number] {
|
||||
width: 138px;
|
||||
padding: 10px 5px;
|
||||
display: inline-block;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 5px 10px;
|
||||
width: 300px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body style="font-family: arial; padding: 0px 10px;">
|
||||
<h2>Data Export(CSV)</h2>
|
||||
<p>With the following action the <a href="/fileserver/log/data/" target="_self">data</a> folder on the SD-card gets zipped and provided as a download.</p>
|
||||
<button class="button" id="startExportData" type="button" onclick="startExportData()">Export Data</button>
|
||||
<p></p>
|
||||
<hr>
|
||||
<p id=progress></p>
|
||||
|
||||
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>
|
||||
<script type="text/javascript" src="jszip.min.js?v=$COMMIT_HASH"></script>
|
||||
<script type="text/javascript" src="FileSaver.min.js?v=$COMMIT_HASH"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
function startExportData() {
|
||||
document.getElementById("progress").innerHTML = "Creating Export Data...<br>\n";
|
||||
|
||||
// Get hostname
|
||||
try {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.open("GET", getDomainname() + "/info?type=Hostname", false);
|
||||
xhttp.send();
|
||||
hostname = xhttp.responseText;
|
||||
}
|
||||
catch(err) {
|
||||
setStatus("<span style=\"color: red\">Failed to fetch hostname: " + err.message + "!</span>");
|
||||
return;
|
||||
}
|
||||
|
||||
// get date/time
|
||||
var dateTime = new Date().toJSON().slice(0,10) + "_" + new Date().toJSON().slice(11,19).replaceAll(":", "-");
|
||||
|
||||
zipFilename = hostname + "_" + dateTime + "_csv" + ".zip";
|
||||
console.log(zipFilename);
|
||||
|
||||
// Get files list
|
||||
setStatus("Fetching File List...");
|
||||
try {
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.open("GET", getDomainname() + "/fileserver/log/data/", false);
|
||||
xhttp.send();
|
||||
|
||||
var parser = new DOMParser();
|
||||
var content = parser.parseFromString(xhttp.responseText, 'text/html');
|
||||
}
|
||||
catch(err) {
|
||||
setStatus("Failed to fetch files list: " + err.message);
|
||||
return;
|
||||
}
|
||||
|
||||
const list = content.querySelectorAll("a");
|
||||
|
||||
var urls = [];
|
||||
|
||||
for (a of list) {
|
||||
url = a.getAttribute("href");
|
||||
urls.push(getDomainname() + url);
|
||||
}
|
||||
|
||||
// Pack as zip and download
|
||||
try {
|
||||
startExportZip(urls, zipFilename);
|
||||
}
|
||||
catch(err) {
|
||||
setStatus("<span style=\"color: red\">Failed to zip files: " + err.message + "!</span>");
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
function fetchFiles(urls, filesData, index, retry, zipFilename) {
|
||||
url = urls[index];
|
||||
|
||||
if (retry == 0) {
|
||||
setStatus(" - " + getFilenameFromUrl(urls[index]) + " (" + (index+1) + "/" + urls.length + ")...");
|
||||
}
|
||||
else {
|
||||
setStatus("<span style=\"color: gray\"> Retrying (" + retry + ")...</span>");
|
||||
}
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.responseType = "blob";
|
||||
|
||||
if (retry == 0) { // Short timeout on first retry
|
||||
xhr.timeout = 2000; // time in milliseconds
|
||||
}
|
||||
else if (retry == 1) { // longer timeout
|
||||
xhr.timeout = 5000;
|
||||
}
|
||||
else if (retry == 2) { // longer timeout
|
||||
xhr.timeout = 10000;
|
||||
}
|
||||
else if (retry == 3) { // longer timeout
|
||||
xhr.timeout = 20000;
|
||||
}
|
||||
else { // very long timeout
|
||||
xhr.timeout = 30000;
|
||||
}
|
||||
|
||||
xhr.onload = () => { // Request finished
|
||||
//console.log(url + " done");
|
||||
|
||||
filesData[index] = xhr.response;
|
||||
|
||||
if (index == urls.length - 1) {
|
||||
setStatus("Fetched all files");
|
||||
generateZipFile(urls, filesData, zipFilename);
|
||||
return;
|
||||
}
|
||||
else { // Next file
|
||||
fetchFiles(urls, filesData, index+1, 0, zipFilename);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.onprogress = (e) => { // XMLHttpRequest progress ... extend timeout
|
||||
xhr.timeout = xhr.timeout + 500;
|
||||
};
|
||||
|
||||
xhr.onerror = (e) => { // XMLHttpRequest error loading
|
||||
console.log("Error on fetching " + url + "!");
|
||||
if (retry > 5) {
|
||||
setStatus("<span style=\"color: red\">Data Export failed, please restart the device and try again!</span>");
|
||||
}
|
||||
else {
|
||||
fetchFiles(urls, filesData, index, retry+1, zipFilename);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.ontimeout = (e) => { // XMLHttpRequest timed out
|
||||
console.log("Timeout on fetching " + url + "!");
|
||||
if (retry > 5) {
|
||||
setStatus("<span style=\"color: red\">Data Export failed, please restart the device and try again!</span>");
|
||||
}
|
||||
else {
|
||||
fetchFiles(urls, filesData, index, retry+1, zipFilename);
|
||||
}
|
||||
};
|
||||
|
||||
xhr.send(null);
|
||||
}
|
||||
|
||||
function generateZipFile(urls, filesData, zipFilename) {
|
||||
setStatus("Creating Zip File...");
|
||||
|
||||
var zip = new JSZip();
|
||||
|
||||
for (var i = 0; i < urls.length; i++) {
|
||||
zip.file(getFilenameFromUrl(urls[i]), filesData[i]);
|
||||
}
|
||||
|
||||
zip.generateAsync({type:"blob"})
|
||||
.then(function(content) {
|
||||
saveAs(content, zipFilename);
|
||||
});
|
||||
|
||||
setStatus("Data Export completed");
|
||||
}
|
||||
|
||||
const startExportZip = (urls, zipFilename) => {
|
||||
if(!urls) { return; }
|
||||
|
||||
console.log(urls);
|
||||
|
||||
urlIndex = 0;
|
||||
setStatus("Fetching files...");
|
||||
fetchFiles(urls, [], 0, 0, zipFilename);
|
||||
};
|
||||
|
||||
function setStatus(status) {
|
||||
console.log(status);
|
||||
document.getElementById("progress").innerHTML += status + "<br>\n";
|
||||
}
|
||||
|
||||
function getFilenameFromUrl(url) {
|
||||
return filename = url.substring(url.lastIndexOf('/')+1);
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -142,6 +142,7 @@
|
||||
<li><a href="#" onclick="loadPage('graph.html?v=$COMMIT_HASH');">Data Graph</a></li>
|
||||
<li><a href="#" onclick="loadPage('data.html?v=$COMMIT_HASH');">Data Table</a></li>
|
||||
<li><a href="#" onclick="loadPage(getDomainname() + '/fileserver/log/data/');">Data Files</a></li>
|
||||
<li><a href="#" onclick="loadPage('data_export.html?v=$COMMIT_HASH');">Data Export</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user