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() {
-    Util.showModal("Loading...");
+  // show loading window
-    dataElement.innerHTML = "";
+  Util.showModal("Loading...");
-    Puck.eval('require("Storage").list(/heart_rate_data\\.csv\\x01/)', files => {
+  // get the data
-        console.log("Files found:", files); // Add this line to check files
+  dataElement.innerHTML = "";
-        if (files.length == 0) {
+  var promise = Promise.resolve();
-            dataElement.innerHTML = "<p>No heart rate data found</p>";
+  Puck.eval('require("Storage").list(/heart_rate_data\\.csv\\x01/)', files => {
-        } else {
+    console.log("Files found:", files); // Print files to console
-            files.forEach(fn => {
+    if (files.length == 0) {
-                fn = fn.slice(0, -1);
+      dataElement.innerHTML = "<p>No heart rate data found</p>";
-                var link = document.createElement("a");
+    } else {
-                link.setAttribute("href", "#");
+      files.forEach(fn => {
-                link.textContent = fn;
+        fn = fn.slice(0, -1);
-                link.addEventListener("click", function() {
+        dataElement.innerHTML += `
-                    Util.showModal("Downloading...");
+<div class="card">
-                    Util.readStorageFile(fn, function(data) {
+  <div class="card-header">
-                        Util.saveCSV(fn.slice(0, -4), data);
+    <div class="card-title h5">${fn}</div>
-                        console.log("Downloaded file path:", fn); // Print file path to console
+  </div>
-                        Util.hideModal();
+  <div class="card-footer">
-                    });
+    <button class="btn btn-primary" fn="${fn}" act="save">Save</button>
-                });
+    <button class="btn" fn="${fn}" act="delete">Delete</button>
-                dataElement.appendChild(link);
+  </div>
-                dataElement.appendChild(document.createElement("br"));
+</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);
             });
-        }
+          });
-        Util.hideModal();
+          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();
+            });
+          });
+        });
+      });
+    }
+    // remove window
+    Util.hideModal();
+  });
 }
 
-      function deleteHeartRateData() {
+// Called when app starts
-        Util.showModal("Deleting...");
+function onInit() {
-        require("Storage").erase("heart_rate_data.csv", function() {
+  getHeartRateData();
-          Util.hideModal();
+}
-          getHeartRateData();
-        });
-      }
 
-      // Called when app starts
-      function onInit() {
-        getHeartRateData();
-      }
     </script>
   </body>
 </html>