forked from FOSS/BangleApps
View monthly health data per day via Web interface in table structure
Marco H
parent
1f1b8a20d5
commit
d709857ac7
|
|
@ -3,7 +3,7 @@
|
|||
<link rel="stylesheet" href="../../css/spectre.min.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="table"></div>
|
||||
<div id="content"></div>
|
||||
|
||||
<script src="../../core/lib/interface.js"></script>
|
||||
<script>
|
||||
|
|
@ -14,7 +14,7 @@ const DB_RECORDS_PER_MONTH = DB_RECORDS_PER_DAY*31;
|
|||
const DB_HEADER_LEN = 8;
|
||||
const DB_FILE_LEN = DB_HEADER_LEN + DB_RECORDS_PER_MONTH*DB_RECORD_LEN;
|
||||
|
||||
var domTable = document.getElementById("table");
|
||||
var domContent = document.getElementById("content");
|
||||
|
||||
function saveCSV(data, date, title) {
|
||||
// date = "2021-9"/ etc
|
||||
|
|
@ -59,7 +59,7 @@ function downloadHealth(filename, callback) {
|
|||
}
|
||||
function getMonthList() {
|
||||
Util.showModal("Loading...");
|
||||
domTable.innerHTML = "";
|
||||
domContent.innerHTML = "";
|
||||
Puck.eval(`require("Storage").list(/^health-.*\\.raw$/)`,files=>{
|
||||
files = files.map(f => {
|
||||
var m = f.match(/^health-([^\.]+)\.raw$/);
|
||||
|
|
@ -69,7 +69,7 @@ function getMonthList() {
|
|||
str : new Date(m[1]).toLocaleString(undefined, {month:'long',year:'numeric'})
|
||||
}
|
||||
})
|
||||
var html = `<table class="table table-striped table-hover">
|
||||
var htmlOverview = `<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Month</th>
|
||||
|
|
@ -78,30 +78,31 @@ function getMonthList() {
|
|||
</thead>
|
||||
<tbody>\n`;
|
||||
files.forEach(f => {
|
||||
html += `
|
||||
htmlOverview += `
|
||||
<tr>
|
||||
<td>${f.str}</td>
|
||||
<td>
|
||||
<button class="btn btn-primary" filename="${f.filename}" date="${f.date}" task="downloadcsv">Download CSV</button>
|
||||
<button class="btn btn-default" filename="${f.filename}" date="${f.date}" task="delete">Delete</button>
|
||||
<button class="btn btn-primary" filename="${f.filename}" date="${f.date}" task="viewmonth">View</button>
|
||||
<button class="btn btn-error" filename="${f.filename}" date="${f.date}" task="delete" style="float: right;margin-right: 5px;">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
if (files.length==0) {
|
||||
html += `
|
||||
htmlOverview += `
|
||||
<tr>
|
||||
<td>No data recorded</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
`;
|
||||
}
|
||||
html += `
|
||||
htmlOverview += `
|
||||
</tbody>
|
||||
</table>`;
|
||||
domTable.innerHTML = html;
|
||||
domContent.innerHTML = htmlOverview;
|
||||
Util.hideModal();
|
||||
var buttons = domTable.querySelectorAll("button");
|
||||
var buttons = domContent.querySelectorAll("button");
|
||||
for (var i=0;i<buttons.length;i++) {
|
||||
buttons[i].addEventListener("click",event => {
|
||||
var button = event.currentTarget;
|
||||
|
|
@ -119,11 +120,72 @@ function getMonthList() {
|
|||
if (task=="downloadcsv") {
|
||||
downloadHealth(filename, data => saveCSV(data, date, `Bangle.js Health ${date}`));
|
||||
}
|
||||
if (task=="viewmonth") {
|
||||
viewMonthlyData(filename, date);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function viewMonthlyData(filename, date) {
|
||||
Util.showModal("Reading Health info...");
|
||||
Util.readStorage(
|
||||
filename, data => {
|
||||
Util.hideModal();
|
||||
|
||||
var htmlOverview = `<h1> Month ` + date + `: </ h1>
|
||||
<button class="btn btn-primary" id="backtomonth" style="float: right;margin-right: 5px;">Back</button>
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Day</th>
|
||||
<th>Steps</th>
|
||||
<th>BPM</th>
|
||||
<th>Movement</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>\n`;
|
||||
|
||||
var idx = DB_HEADER_LEN;
|
||||
for (var day = 0; day < 31; day++) {
|
||||
var dayData = {steps: 0, bpm: 0, movement: 0};
|
||||
for (var hr = 0; hr < 24; hr++) { // actually 25, see below
|
||||
for (var m = 0; m < DB_RECORDS_PER_HR; m++) {
|
||||
var h = data.substr(idx, DB_RECORD_LEN);
|
||||
if (h != "\xFF\xFF\xFF\xFF") {
|
||||
var h = {
|
||||
day : day + 1,
|
||||
hr : hr,
|
||||
min : m * 10,
|
||||
steps : (h.charCodeAt(0) << 8) | h.charCodeAt(1),
|
||||
bpm : h.charCodeAt(2),
|
||||
movement : h.charCodeAt(3)
|
||||
};
|
||||
dayData.steps += h.steps; // sum
|
||||
dayData.bpm = (dayData.bpm + h.bpm) / 2; // average
|
||||
dayData.movement += h.movement; // sum
|
||||
}
|
||||
idx += DB_RECORD_LEN;
|
||||
}
|
||||
}
|
||||
idx += DB_RECORD_LEN; // +1 because we have an extra record with totals
|
||||
// for the end of the day
|
||||
|
||||
htmlOverview += `<tr>
|
||||
<td>${day + 1}</td>
|
||||
<td>${dayData.steps}</td>
|
||||
<td>${Math.round(dayData.bpm)}</td>
|
||||
<td>${dayData.movement}</td></tr>`
|
||||
}
|
||||
htmlOverview += `</tbody></table>`;
|
||||
domContent.innerHTML = htmlOverview;
|
||||
domContent.querySelector("#backtomonth").addEventListener("click",event => {
|
||||
getMonthList();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function onInit() {
|
||||
getMonthList();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue