edit interface.html

apps/phystrax/interface.html

@@ -7,49 +7,91 @@
 
     <script src="../../core/lib/interface.js"></script>
     <script>
-      var dataElement = document.getElementById("data");
+var dataElement = document.getElementById("data");
 
-      function getHeartRateData() {
+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");
+        dataElement.innerHTML += `
-                link.setAttribute("href", "#");
+<div class="card">
-                link.textContent = fn;
+  <div class="card-header">
-                link.addEventListener("click", function() {
+    <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
+            });
+          });
+          document.querySelector(`.btn[fn='${fn}'][act='delete']`).addEventListener("click", function() {
+            Util.showModal("Deleting...");
+            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();
+            });
           });
         });
-                dataElement.appendChild(link);
-                dataElement.appendChild(document.createElement("br"));
       });
     }
+    // remove window
     Util.hideModal();
   });
 }
 
-      function deleteHeartRateData() {
+// Called when app starts
-        Util.showModal("Deleting...");
+function onInit() {
-        require("Storage").erase("heart_rate_data.csv", function() {
-          Util.hideModal();
   getHeartRateData();
-        });
+}
-      }
 
-      // Called when app starts
-      function onInit() {
-        getHeartRateData();
-      }
     </script>
   </body>
 </html>