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

179
apps/sleeplog/interface.html
View File

@ -4,46 +4,74 @@
<link rel="stylesheet" href="../../css/spectre-icons.min.css">
</head>
<body>
<div id="table"></div>
<div id="view"></div>
<script src="../../core/lib/interface.js"></script>
<script>
var domTable = document.getElementById("table");
var domView = document.getElementById("view");
function viewLog(logData, title) {
function viewLog(logData, filename) {
domView.innerHTML = "";
var html = `
<div class="container">
<h4><b>Viewing data of:</b> ` + filename + `</h4>
</div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Duration</th>
<th>Status</th>
<th>Sleep</th>
</tr>
</thead>
<tbody>`;
logData.forEach(entry => html += `
<tr>
<td>` +
new Date(entry[0] * 6E5).toLocaleString(undefined) + `
logData.forEach((entry, index, log) => {
var duration = ((log[index + 1] || [Math.floor(Date.now() / 6E5)])[0] - entry[0]) * 10;
html += `
<tr style="text-align: center">
<td style="text-align: right">` +
new Date(entry[0] * 6E5).toLocaleDateString(undefined) + `
</td>
<td>` +
"unknown ,non consec.,consecutive".split(",")[entry[2]] + " " +
"unknown,not worn,awake,light sleep,deep sleep".split(",")[entry[1]] + `
new Date(entry[0] * 6E5).toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}) + `
</td>
</tr>`);
html = `
</tbody>`;
document.getElementById("view").innerHTML = html;
<td style="text-align: right"><div class="container"` +
(duration >= 60 ? ` style="background-color: hsl(192, 50%, ` +
(duration > 480 ? 50 : 100 - Math.floor(duration / 60) * 50 / 8) +
`%)">` : `>`) +
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) {
var timeFormat = document.getElementById("timeFormat").selectedIndex;
function saveCSV(logData, date0, date1) {
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 => {
entry[0] *= 6E5;
if (timeFormat === 1) entry[0] /= 1E3;
if (timeFormat === 2) entry[0] = entry[0] / 864E5 + 25569;
if (csvTime === 1) entry[0] /= 1E3;
if (csvTime === 2) entry[0] = entry[0] / 864E5 + 25569;
return entry.join(",");
}).join("\n");
Util.saveCSV(title, "time,sleep,consecutive\n" + logData);
Util.saveCSV(filename, "time,sleep,consecutive\n" + logData);
}
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...");
domTable.innerHTML = "";
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 = files.map(file => {
var ret = {
bName: file,
date: (parseInt(file.match(/\d{4}/)[0]) + 0.25) * 12096E5,
};
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);
files = files.map(file => { return {
filename: file.length === 4 ? "sleeplog.log (StorageFile)" : file,
date: (parseInt(file.match(/\d{4}/)[0]) + 0.25) * 12096E5
}});
files = files.sort((a, b) => a.date - b.date);
var html = `
<table class="table table-striped table-hover">
<thead>
@ -83,17 +121,21 @@ function getFnList() {
</tr>
</thead>
<tbody>`;
files.forEach(file => {
html += `
files.forEach(file => { html += `
<tr>
<td>${file.bName.endsWith(".log") ? file.bName : "active log"}</td>
<td>${file.dateA}</td>
<td>${file.dateB}</td>
<td>${file.filename}</td>
<td>${new Date(file.date).toLocaleDateString(undefined)}</td>
<td>${new Date(file.date + 12096E5).toLocaleDateString(undefined)}</td>
<td>
<button class="btn" task="view" date="${file.date}" dName="${file.dName}"><i class="icon icon-menu"></i></button>
<button class="btn btn-primary" task="csv" date="${file.date}" dName="${file.dName}">CSV</button>`;
if (file.bName.endsWith(".log")) html += `
<button class="btn" task="del" bName="${file.bName}"><i class="icon icon-delete"></i></button>`;
<button class="btn btn-sm tooltip" data-tooltip="view data" task="view" filename="${file.filename}" date="${file.date}">
<i class="icon icon-caret"></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 += `
</td>
</tr>`;
@ -101,15 +143,22 @@ function getFnList() {
html += `
</tbody>
</table>
<p>csv time format:
<select id="timeFormat">
<option>JavaScript (msec since 1970)</option>
<option>UNIX (sec since 1970)</option>
<option>Office (days since 1900)</option>
</select>
</p>
<table id="view">
</table>`;
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<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>
</select>
</div>
</div>
</form>
</div>`;
domTable.innerHTML = html;
Util.hideModal();
var buttons = domTable.querySelectorAll("button");
@ -117,34 +166,20 @@ function getFnList() {
buttons[i].addEventListener("click", event => {
var button = event.currentTarget;
var task = button.getAttribute("task");
if (!task) return;
if (task=="view") {
var date = button.getAttribute("date");
var dName = button.getAttribute("dName");
if (!date || !dName) return;
readLog(date, logData => viewLog(logData, dName));
} 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();
});
}
var filename = button.getAttribute("filename");
var date = button.getAttribute("date") - 0;
if (!task || !filename || !date) return;
if (task === "view") readLog(date, logData => viewLog(logData, filename));
else if (task === "csv") readLog(date, logData => saveCSV(logData, date, date + 12096E5));
else if (task === "del") deleteFile(filename, () => viewFiles());
});
}
});
}
function onInit() {
getFnList();
viewFiles();
}
</script>
</body>
</html>
</html>