bryan
/
BangleApps
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

View monthly health data per day via Web interface in table structure

master
Marco H 2023-01-03 14:04:07 +01:00
parent 1f1b8a20d5
commit d709857ac7
1 changed files with 72 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
apps/health/interface.html
View File

@ -3,7 +3,7 @@
<link rel="stylesheet" href="../../css/spectre.min.css"> <link rel="stylesheet" href="../../css/spectre.min.css">
</head> </head>
<body> <body>
<div id="table"></div> <div id="content"></div>
<script src="../../core/lib/interface.js"></script> <script src="../../core/lib/interface.js"></script>
<script> <script>
@ -14,7 +14,7 @@ const DB_RECORDS_PER_MONTH = DB_RECORDS_PER_DAY*31;
const DB_HEADER_LEN = 8; const DB_HEADER_LEN = 8;
const DB_FILE_LEN = DB_HEADER_LEN + DB_RECORDS_PER_MONTH*DB_RECORD_LEN; 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) { function saveCSV(data, date, title) {
// date = "2021-9"/ etc // date = "2021-9"/ etc
@ -59,7 +59,7 @@ function downloadHealth(filename, callback) {
} }
function getMonthList() { function getMonthList() {
Util.showModal("Loading..."); Util.showModal("Loading...");
domTable.innerHTML = ""; domContent.innerHTML = "";
Puck.eval(`require("Storage").list(/^health-.*\\.raw$/)`,files=>{ Puck.eval(`require("Storage").list(/^health-.*\\.raw$/)`,files=>{
files = files.map(f => { files = files.map(f => {
var m = f.match(/^health-([^\.]+)\.raw$/); var m = f.match(/^health-([^\.]+)\.raw$/);
@ -69,7 +69,7 @@ function getMonthList() {
str : new Date(m[1]).toLocaleString(undefined, {month:'long',year:'numeric'}) 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> <thead>
<tr> <tr>
<th>Month</th> <th>Month</th>
@ -78,30 +78,31 @@ function getMonthList() {
</thead> </thead>
<tbody>\n`; <tbody>\n`;
files.forEach(f => { files.forEach(f => {
html += ` htmlOverview += `
<tr> <tr>
<td>${f.str}</td> <td>${f.str}</td>
<td> <td>
<button class="btn btn-primary" filename="${f.filename}" date="${f.date}" task="downloadcsv">Download CSV</button> <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> </td>
</tr> </tr>
`; `;
}); });
if (files.length==0) { if (files.length==0) {
html += ` htmlOverview += `
<tr> <tr>
<td>No data recorded</td> <td>No data recorded</td>
<td></td> <td></td>
</tr> </tr>
`; `;
} }
html += ` htmlOverview += `
</tbody> </tbody>
</table>`; </table>`;
domTable.innerHTML = html; domContent.innerHTML = htmlOverview;
Util.hideModal(); Util.hideModal();
var buttons = domTable.querySelectorAll("button"); var buttons = domContent.querySelectorAll("button");
for (var i=0;i<buttons.length;i++) { for (var i=0;i<buttons.length;i++) {
buttons[i].addEventListener("click",event => { buttons[i].addEventListener("click",event => {
var button = event.currentTarget; var button = event.currentTarget;
@ -119,11 +120,72 @@ function getMonthList() {
if (task=="downloadcsv") { if (task=="downloadcsv") {
downloadHealth(filename, data => saveCSV(data, date, `Bangle.js Health ${date}`)); 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() { function onInit() {
getMonthList(); getMonthList();
} }