From d709857ac7057eae56a42dbbfcd625f9469209ed Mon Sep 17 00:00:00 2001
From: Marco H <myx00r@googlemail.com>
Date: Tue, 3 Jan 2023 14:04:07 +0100
Subject: [PATCH] View monthly health data per day via Web interface in table
 structure

---
 apps/health/interface.html | 82 +++++++++++++++++++++++++++++++++-----
 1 file changed, 72 insertions(+), 10 deletions(-)
diff --git a/apps/health/interface.html b/apps/health/interface.html
index a708e2645..0ffa20d76 100644
--- a/apps/health/interface.html
+++ b/apps/health/interface.html
@@ -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();
 }
