edit interface.html

apps/phystrax/interface.html

@@ -10,46 +10,88 @@
 var dataElement = document.getElementById("data");
 
 function getHeartRateData() {
+  // show loading window
   Util.showModal("Loading...");
+  // get the data
   dataElement.innerHTML = "";
+  var promise = Promise.resolve();
   Puck.eval('require("Storage").list(/heart_rate_data\\.csv\\x01/)', files => {
-        console.log("Files found:", files); // Add this line to check files
+    console.log("Files found:", files); // Print files to console
     if (files.length == 0) {
       dataElement.innerHTML = "<p>No heart rate data found</p>";
     } else {
       files.forEach(fn => {
         fn = fn.slice(0, -1);
-                var link = document.createElement("a");
-                link.setAttribute("href", "#");
-                link.textContent = fn;
-                link.addEventListener("click", function() {
+        dataElement.innerHTML += `
+<div class="card">
+  <div class="card-header">
+    <div class="card-title h5">${fn}</div>
+  </div>
+  <div class="card-footer">
+    <button class="btn btn-primary" fn="${fn}" act="save">Save</button>
+    <button class="btn" fn="${fn}" act="delete">Delete</button>
+  </div>
+</div>`;
+        promise = promise.then(function() {
+          document.querySelector(`.btn[fn='${fn}'][act='save']`).addEventListener("click", function() {
             Util.showModal("Downloading...");
+            console.log("Downloaded file path:", fn); // Print file path to console
             Util.readStorageFile(fn, function(data) {
               Util.saveCSV(fn.slice(0, -4), data);
-                        console.log("Downloaded file path:", fn); // Print file path to console
-                        Util.hideModal();
             });
           });
-                dataElement.appendChild(link);
-                dataElement.appendChild(document.createElement("br"));
-            });
-        }
-        Util.hideModal();
-    });
-}
-
-      function deleteHeartRateData() {
+          document.querySelector(`.btn[fn='${fn}'][act='delete']`).addEventListener("click", function() {
             Util.showModal("Deleting...");
-        require("Storage").erase("heart_rate_data.csv", function() {
+            Util.eraseStorageFile(fn, function() {
               Util.hideModal();
               getHeartRateData();
             });
+          });
+          return new Promise(resolve=>{
+            Puck.eval(`require("Storage").read(${JSON.stringify(fn)})`, csv=>{
+              var el = document.querySelector(`.card-body[fn='${fn}']`);
+              el.innerHTML = '<canvas width="400" height="100"></canvas>';
+              var c = el.firstChild;
+              var ctx = c.getContext("2d");
+              var lines = csv.split("\n");
+              var y = 50, sx = 400/lines.length, sy = 50/8;
+              function plot(n) {
+                var last;
+                ctx.beginPath();
+                lines.map((l,x)=>{
+                  l = l.split(",");
+                  var yc = y + parseFloat(l[n])*sy;
+                  if (!last) {
+                    ctx.moveTo(0, yc);
+                  } else {
+                    ctx.lineTo(x*sx, yc);
+                  }
+                  last = l;
+                });
+                ctx.stroke();
+              };
+              ctx.strokeStyle = 'red';
+              plot(0);
+              ctx.strokeStyle = 'green';
+              plot(1);
+              ctx.strokeStyle = 'blue';
+              plot(2);
+              resolve();
+            });
+          });
+        });
+      });
+    }
+    // remove window
+    Util.hideModal();
+  });
 }
 
 // Called when app starts
 function onInit() {
   getHeartRateData();
 }
+
     </script>
   </body>
 </html>