Bram
/
BangleApps
forked from FOSS/BangleApps
1
0
Fork 0
Code Pull Requests Activity

[sleeplog] Redesign interfacce.html

master
storm64 2022-05-24 23:13:03 +02:00
parent 71fc6f2859
commit 1a89f963ea
1 changed files with 107 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
apps/sleeplog/interface.html
View File

@ -4,46 +4,74 @@
<link rel="stylesheet" href="../../css/spectre-icons.min.css"> <link rel="stylesheet" href="../../css/spectre-icons.min.css">
</head> </head>
<body> <body>
<div id="table"></div> <div id="table"></div>
<div id="view"></div>
<script src="../../core/lib/interface.js"></script> <script src="../../core/lib/interface.js"></script>
<script> <script>
var domTable = document.getElementById("table"); var domTable = document.getElementById("table");
var domView = document.getElementById("view");
function viewLog(logData, title) { function viewLog(logData, filename) {
domView.innerHTML = "";
var html = ` var html = `
<div class="container">
<h4><b>Viewing data of:</b> ` + filename + `</h4>
</div>
<table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th>Date</th> <th>Date</th>
<th>Time</th>
<th>Duration</th>
<th>Status</th> <th>Status</th>
<th>Sleep</th>
</tr> </tr>
</thead> </thead>
<tbody>`; <tbody>`;
logData.forEach(entry => html += ` logData.forEach((entry, index, log) => {
<tr> var duration = ((log[index + 1] || [Math.floor(Date.now() / 6E5)])[0] - entry[0]) * 10;
<td>` + html += `
new Date(entry[0] * 6E5).toLocaleString(undefined) + ` <tr style="text-align: center">
<td style="text-align: right">` +
new Date(entry[0] * 6E5).toLocaleDateString(undefined) + `
</td> </td>
<td>` + <td>` +
"unknown ,non consec.,consecutive".split(",")[entry[2]] + " " + new Date(entry[0] * 6E5).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) + `
"unknown,not worn,awake,light sleep,deep sleep".split(",")[entry[1]] + `
</td> </td>
</tr>`); <td style="text-align: right"><div class="container"` +
html = ` (duration >= 60 ? ` style="background-color: hsl(192, 50%, ` +
</tbody>`; (duration > 480 ? 50 : 100 - Math.floor(duration / 60) * 50 / 8) +
document.getElementById("view").innerHTML = html; `%)">` : `>`) +
duration + ` min
</td>
<td><div class="container" style="background-color: ` +
["orange", "lightcoral", "lightgreen", "lightcyan", "lightskyblue"][entry[1]] + `">` +
["unknown", "not worn", "awake", "light sleep", "deep sleep"][entry[1]] + `
</div></td>
<td><div class="container" style="background-color: ` +
["orange", "lightgreen", "lightskyblue"][entry[2]] + `">` +
["unknown", "non consecutive", "consecutive"][entry[2]] + `
</div></td>
</tr>`
});
html += `
</tbody>
</table>`;
domView.innerHTML = html;
} }
function saveCSV(logData, title) { function saveCSV(logData, date0, date1) {
var timeFormat = document.getElementById("timeFormat").selectedIndex; var csvTime = document.getElementById("csvTime").selectedIndex;
var filename = "sleeplog_" +
new Date(date0).toISOString().substr(0, 10) + "_" +
new Date(date1).toISOString().substr(5, 5);
logData = logData.map(entry => { logData = logData.map(entry => {
entry[0] *= 6E5; entry[0] *= 6E5;
if (timeFormat === 1) entry[0] /= 1E3; if (csvTime === 1) entry[0] /= 1E3;
if (timeFormat === 2) entry[0] = entry[0] / 864E5 + 25569; if (csvTime === 2) entry[0] = entry[0] / 864E5 + 25569;
return entry.join(","); return entry.join(",");
}).join("\n"); }).join("\n");
Util.saveCSV(title, "time,sleep,consecutive\n" + logData); Util.saveCSV(filename, "time,sleep,consecutive\n" + logData);
} }
function readLog(date, callback) { function readLog(date, callback) {
@ -54,24 +82,34 @@ function readLog(date, callback) {
}); });
} }
function getFnList() { function deleteFile(filename, callback) {
if (window.confirm("Do you really want to remove " + filename)) {
Util.showModal("Deleting...");
if (filename.endsWith(" (StorageFile)")) {
Util.eraseStorageFile(filename, () => {
Util.hideModal();
callback();
});
} else {
Util.eraseStorage(filename, () => {
Util.hideModal();
callback();
});
}
}
}
function viewFiles() {
Util.showModal("Loading..."); Util.showModal("Loading...");
domTable.innerHTML = ""; domTable.innerHTML = "";
Puck.eval(`require("Storage").list(/^sleeplog_\\d\\d\\d\\d\\.log$/)`, files => { Puck.eval(`require("Storage").list(/^sleeplog_\\d\\d\\d\\d\\.log$/)`, files => {
// add this fortnight // add active log
files.push("" + Math.floor(Date.now() / 12096E5 - 0.25)); files.push("" + Math.floor(Date.now() / 12096E5 - 0.25));
files = files.map(file => { files = files.map(file => { return {
var ret = { filename: file.length === 4 ? "sleeplog.log (StorageFile)" : file,
bName: file, date: (parseInt(file.match(/\d{4}/)[0]) + 0.25) * 12096E5
date: (parseInt(file.match(/\d{4}/)[0]) + 0.25) * 12096E5, }});
}; files = files.sort((a, b) => a.date - b.date);
var thisDates = [new Date(ret.date), new Date(ret.date + 12096E5)];
ret.dName = thisDates[0].toISOString().substr(0, 10) + "_" + thisDates[1].toISOString().substr(5, 5);
ret.dateA = thisDates[0].toLocaleDateString(undefined);
ret.dateB = thisDates[1].toLocaleDateString(undefined);
return ret;
});
files = files.sort((a, b) => a.fortnigt - b.fortnigt);
var html = ` var html = `
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
@ -83,17 +121,21 @@ function getFnList() {
</tr> </tr>
</thead> </thead>
<tbody>`; <tbody>`;
files.forEach(file => { files.forEach(file => { html += `
html += `
<tr> <tr>
<td>${file.bName.endsWith(".log") ? file.bName : "active log"}</td> <td>${file.filename}</td>
<td>${file.dateA}</td> <td>${new Date(file.date).toLocaleDateString(undefined)}</td>
<td>${file.dateB}</td> <td>${new Date(file.date + 12096E5).toLocaleDateString(undefined)}</td>
<td> <td>
<button class="btn" task="view" date="${file.date}" dName="${file.dName}"><i class="icon icon-menu"></i></button> <button class="btn btn-sm tooltip" data-tooltip="view data" task="view" filename="${file.filename}" date="${file.date}">
<button class="btn btn-primary" task="csv" date="${file.date}" dName="${file.dName}">CSV</button>`; <i class="icon icon-caret"></i>
if (file.bName.endsWith(".log")) html += ` </button>
<button class="btn" task="del" bName="${file.bName}"><i class="icon icon-delete"></i></button>`; <button class="btn btn-sm tooltip btn-primary" data-tooltip="save csv-file" task="csv" filename="${file.filename}" date="${file.date}">
<i class="icon icon-download"></i>
</button>
<button class="btn btn-sm tooltip btn-error" data-tooltip="delete file" task="del" filename="${file.filename}" date="${file.date}">
<i class="icon icon-delete"></i>
</button>`;
html += ` html += `
</td> </td>
</tr>`; </tr>`;
@ -101,15 +143,22 @@ function getFnList() {
html += ` html += `
</tbody> </tbody>
</table> </table>
<p>csv time format: <div class="container">
<select id="timeFormat"> <form class="form-horizontal">
<option>JavaScript (msec since 1970)</option> <div class="form-group">
<option>UNIX (sec since 1970)</option> <div class="col-3 col-sm-12">
<label class="form-label"><b>csv time format</b></label>
</div>
<div class="col-9 col-sm-12">
<select class="form-select" id="csvTime">
<option>JavaScript (milliseconds since 1970)</option>
<option>UNIX (seconds since 1970)</option>
<option>Office (days since 1900)</option> <option>Office (days since 1900)</option>
</select> </select>
</p> </div>
<table id="view"> </div>
</table>`; </form>
</div>`;
domTable.innerHTML = html; domTable.innerHTML = html;
Util.hideModal(); Util.hideModal();
var buttons = domTable.querySelectorAll("button"); var buttons = domTable.querySelectorAll("button");
@ -117,33 +166,19 @@ function getFnList() {
buttons[i].addEventListener("click", event => { buttons[i].addEventListener("click", event => {
var button = event.currentTarget; var button = event.currentTarget;
var task = button.getAttribute("task"); var task = button.getAttribute("task");
if (!task) return; var filename = button.getAttribute("filename");
if (task=="view") { var date = button.getAttribute("date") - 0;
var date = button.getAttribute("date"); if (!task || !filename || !date) return;
var dName = button.getAttribute("dName"); if (task === "view") readLog(date, logData => viewLog(logData, filename));
if (!date || !dName) return; else if (task === "csv") readLog(date, logData => saveCSV(logData, date, date + 12096E5));
readLog(date, logData => viewLog(logData, dName)); else if (task === "del") deleteFile(filename, () => viewFiles());
} else if (task=="csv") {
var date = button.getAttribute("date");
var dName = button.getAttribute("dName");
if (!date || !dName) return;
readLog(date, logData => saveCSV(logData, dName));
} else if (task=="delete") {
var bName = button.getAttribute("bName");
if (!bName) return;
Util.showModal("Deleting...");
Util.eraseStorage(bName, () => {
Util.hideModal();
getTrackList();
});
}
}); });
} }
}); });
} }
function onInit() { function onInit() {
getFnList(); viewFiles();
} }
</script> </script>
</body> </body>