Live data update

Author: perki

dr-controler.js

@@ -112,7 +112,6 @@ async function setPatientList(questionaryId) {
   const patientsData = [];
   for (const patient of Object.values(patients)) {
     const row = table.insertRow(-1);
-    console.log('>> patient', patient);
 
     const cellStatus = row.insertCell(-1);
     cellStatus.innerHTML = patient.status;

dr-patient-view-controler.js

@@ -10,8 +10,17 @@ import { exportCSVFile } from "./exportToCSV.js";
  */
 
 
+let infos;
 window.onload = async (event) => {
-  refresh();
+  const { patientApiEndpoint, questionaryId } = getRequestFrormApiEndPoint();
+  infos = drPatientLib.setRefresh(patientApiEndpoint, questionaryId, refresh)
+   // -- home button
+   document.getElementById('home-button').href= 'dr.html?questionaryId=' + questionaryId;
+
+   // -- set patient Id
+   const username = infos.user.username;
+   document.getElementById('patient-label').innerHTML = username;
+
 }
 
 const tableHeaders = {
@@ -28,32 +37,23 @@ const downloadHeaders = Object.assign({
   eventType: 'Event Type'
 }, tableHeaders);
 
-async function refresh () {
-  const { patientApiEndpoint, questionaryId } = getRequestFrormApiEndPoint();
-  const { infos, lines }  = await drPatientLib.getPatientData(patientApiEndpoint, questionaryId);
-  console.log('>> zz', infos);
-  // -- home button
-  document.getElementById('home-button').href= 'dr.html?questionaryId=' + questionaryId;
-
-  // -- set patient Id
-  const username = infos.user.username;
-  document.getElementById('patient-label').innerHTML = username;
-
+async function refresh (lines) {
   // -- set download button
   document.getElementById('button-download').onclick = () => {
     exportCSVFile(downloadHeaders, lines, username + '-' + questionaryId);
   };
 
   // -- update table
   const table = document.getElementById('patient-data-table');
+  table.innerHTML = '';
+  
   const headerRow = table.insertRow(-1);
   for (const thLabel of Object.values(tableHeaders)) {
     const headerCell = document.createElement("TH");
     headerCell.innerHTML = thLabel;
     headerRow.appendChild(headerCell);
   }
   for (const line of lines) {
-    console.log('>> line', line);
     const row = table.insertRow(-1);
     for (const key of Object.keys(tableHeaders)) {
       const cell = row.insertCell(-1);

dr-patient-view-lib.js

@@ -2,9 +2,31 @@
 import { dataDefs } from './common-data-defs.js';
 
 export const drPatientLib = {
-  getPatientData
+  setRefresh
 }
 
+let connection;
+async function setRefresh(patientApiEndoint, questionaryId, refreshCallBack) {
+  connection = new Pryv.Connection(patientApiEndoint);
+  const infos = await connection.accessInfo();
+
+  async function doRefresh () {
+    const lines = await getPatientData(questionaryId); 
+    refreshCallBack(lines);
+  }
+
+  await connection.socket.open();
+  connection.socket.on('eventsChanged', async () => {
+    console.log('>> refresh event');
+    await doRefresh();
+  });
+
+  // do it once
+  doRefresh();
+  return infos;
+}
+
+
 // prepare data for easy lookup 
 // map streamId/EventType with form data
 const eventMapByQuestionnary = {};
@@ -19,19 +41,17 @@ for (const [questionaryId, questionary] of Object.entries(dataDefs.questionnaire
     }
   }
 }
-console.log('>> eventMapByQuestionnary', eventMapByQuestionnary);
 
-async function getPatientData (patientApiEndoint, questionaryId) {
+async function getPatientData (questionaryId) {
   const patientData = [];
   const queryParams = { limit: 10000};
   function forEachEvent(event) {
     patientData.push(getLineForEvent (event, questionaryId));
   }
 
-  const connection = new Pryv.Connection(patientApiEndoint);
-  const infos = await connection.accessInfo();
+  
   await connection.getEventsStreamed(queryParams, forEachEvent);
-  return { infos, lines: patientData };
+  return patientData;
 }
 
 
@@ -46,15 +66,17 @@ function getLineForEvent (event, questionaryId) {
   }
 
   const field = eventMapByQuestionnary[questionaryId][event.streamId + ':' + event.type];
-  console.log('>> field', field, event);
   if (field) {
     Object.assign(line, field);
     if (field.type === 'date') {
       line.value = (new Date(event.time * 1000)).toISOString().split('T')[0];
     }
     if (field.type === 'select') {
       line.value = event.content;
-      
+      if (field.eventType === 'ratio/generic') {
+        line.value = event.content.value;
+      }
+
       const selected = field.options.find((o) => ( o.value === line.value ));
       line.description = selected?.label;
     }

dr-patient-view.html

@@ -12,6 +12,7 @@
   <title>Demo Form - Dr's page</title>
 </head>
 <script src="https://pryv.github.io/lib-js/pryv.js"></script>
+<script src="https://api.pryv.com/lib-js/pryv-socket.io.js"></script>
 <script type="module" src="dr-patient-view-controler.js"></script>
 
 <body>

patient-history-controler.js

@@ -61,12 +61,11 @@ async function refreshAll(dateStr) {
 
   updateFormContent(formData);
   document.getElementById("submit-button-list").onclick = function () {
-    submitForm(formData, dateStr);
+    submitForm(formData, new Date(dateStr));
   };
 }
 
 async function refreshDataTable(currentDateStr) {
-  console.log('>> refreshTable', currentDateStr);
   let currentValue = {};
   const { questionaryId, formKey } = navData;
   const tableData = await patientLib.getHistoricalContent(