Partial Dr view implemented

Author: perki

dr-controler.js

@@ -99,6 +99,12 @@ async function setPatientList(questionaryId) {
   const patientsData = [];
   for (const patient of Object.values(patients)) {
     const row = table.insertRow(-1);
+    console.log('>> patient', patient);
+    row.onclick = function () {
+      document.location.href = `dr-patient-view.html?patientApiEndpoint=${patient.apiEndpoint}&questionaryId=${questionaryId}`
+    }
+
+
     const cellStatus = row.insertCell(-1);
     cellStatus.innerHTML = patient.status;
     const cellUsername = row.insertCell(-1);

dr-patient-view-controler.js

@@ -0,0 +1,54 @@
+import { drPatientLib  } from "./dr-patient-view-lib.js";
+
+/**
+ * Based on 
+ * - drApiConnecion
+ * - patientApiConnection
+ * - questionnaryId
+ * 
+ * Display live update of data
+ */
+
+
+window.onload = async (event) => {
+  refresh();
+}
+
+const tableHeaders = {
+  time: 'Date',
+  formLabel: 'Questionnary',
+  formType: 'Type',
+  label: 'Label',
+  value: 'Value',
+  description: 'Description'
+}
+
+async function refresh () {
+  const { patientApiEndpoint, questionaryId } = getRequestFrormApiEndPoint();
+  console.log('>> zz', patientApiEndpoint, questionaryId);
+  const lines = await drPatientLib.getPatientData(patientApiEndpoint, questionaryId);
+  const table = document.getElementById('patient-data-table');
+  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);
+      const v = line[key];
+      cell.innerHTML = v != null ? v : '' ;
+    }
+  }
+}
+
+// ------- Get Dr's info -------- //
+function getRequestFrormApiEndPoint() {
+  const params = new URLSearchParams(document.location.search);
+  const patientApiEndpoint = params.get('patientApiEndpoint');
+  const questionaryId = params.get('questionaryId');
+  return { patientApiEndpoint, questionaryId };
+}

dr-patient-view-lib.js

@@ -0,0 +1,62 @@
+
+import { dataDefs } from './common-data-defs.js';
+
+export const drPatientLib = {
+  getPatientData
+}
+
+// prepare data for easy lookup 
+// map streamId/EventType with form data
+const eventMapByQuestionnary = {};
+for (const [questionaryId, questionary] of Object.entries(dataDefs.questionnaires)) {
+  eventMapByQuestionnary[questionaryId] = {};
+  for (const form of Object.values(questionary.forms)) {
+    for (const field of form.content) {
+      eventMapByQuestionnary[questionaryId][field.streamId + ':' + field.eventType] = Object.assign({
+        formLabel: form.name,
+        formType: form.type
+      }, field);
+    }
+  }
+}
+console.log('>> eventMapByQuestionnary', eventMapByQuestionnary);
+
+async function getPatientData (patientApiEndoint, questionaryId) {
+  const patientData = [];
+  const queryParams = { limit: 10000};
+  function forEachEvent(event) {
+    patientData.push(getLineForEvent (event, questionaryId));
+  }
+
+  const connection = new Pryv.Connection(patientApiEndoint);
+  await connection.getEventsStreamed(queryParams, forEachEvent);
+  return patientData;
+}
+
+
+function getLineForEvent (event, questionaryId) {
+  const line = {
+    time: (new Date(event.time * 1000)).toISOString(),
+    formLabel: 'Unkown',
+    formType: 'Unkown',
+    label: event.streamId + ' - ' + event.type,
+    value: JSON.stringify(event.content),
+    description: ''
+  }
+  
+  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;
+      
+      const selected = field.options.find((o) => ( o.value === line.value ));
+      line.description = selected?.label;
+    }
+  }
+  return line;
+}

dr-patient-view.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <link rel="icon" href="https://healthdatasafe.github.io/style/images/Favicon/favicon.ico" type="image/x-icon">
+  <link rel="stylesheet" type="text/css" href="https://healthdatasafe.github.io/style/hds.min.css">
+  <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Inter:300,400">
+  <title>Demo Form - Dr's page</title>
+</head>
+<script src="https://pryv.github.io/lib-js/pryv.js"></script>
+<script type="module" src="dr-patient-view-controler.js"></script>
+
+<body>
+  <div class="container">
+    <img src="https://healthdatasafe.github.io/style/images/Horizontal/hds-logo-hz-1024x400-hz-color.png" alt="Logo" width="300px">
+    <h1>Demo Form - Dr's Patient View</h1>
+    <div class="card">
+      <div class="card-patient">
+        Patient: <h2 class="patient-label">Patient X</h2>
+      </div>
+    </div>
+    <div class="card" id="data-view">
+      <table id="patient-data-table" class="table">
+
+      </table>
+    </div>
+  </div>
+</body>
+
+</html>