Modules

perki · perki · commit ca316d099c78 · 2025-05-07T11:42:43.000+02:00
diff --git a/common-data-defs.js b/common-data-defs.js
@@ -141,8 +141,9 @@ const formHistoricalContent = [
   }
 ]
 
-questionnaires = {
+const questionnaires = {
   'demo-dr-forms-questionary-x': {
+    title: 'Demo with Profile and TTC-TTA',
     permissions: patientBasePermissions.map(perm => ({
       streamId: perm.id,
       level: 'read',
@@ -166,6 +167,6 @@ questionnaires = {
   }
 }
 
-const dataDefs = {
+export const dataDefs = {
   questionnaires
 };
diff --git a/dr-controler.js b/dr-controler.js
@@ -1,3 +1,6 @@
+import { drLib } from './dr-lib.js';
+import { exportCSVFile } from './exportToCSV.js';
+
 /**
  * UI management code. 
  * Relies on drLib for API calls and data management
diff --git a/dr-lib.js b/dr-lib.js
@@ -1,6 +1,8 @@
+import { dataDefs } from './common-data-defs.js';
+
 let drConnection = null;
 
-const drLib = {
+export const drLib = {
   showLoginButton,
   getSharingToken,
   getPatientsList,
diff --git a/dr.html b/dr.html
@@ -12,10 +12,7 @@
   <title>Demo Form - Dr's page</title>
 </head>
 <script src="https://pryv.github.io/lib-js/pryv.js"></script>
-<script src="common-data-defs.js"></script>
-<script src="dr-controler.js"></script>
-<script src="dr-lib.js"></script>
-<script src="exportToCSV.js"></script>
+<script type="module" src="dr-controler.js"></script>
 
 <body>
   <div class="container">
diff --git a/exportToCSV.js b/exportToCSV.js
@@ -16,15 +16,15 @@ function convertToCSV(objArray) {
   return str;
 }
 
-function exportCSVFile(headers, items, fileTitle) {
+export function exportCSVFile(headers, items, fileTitle) {
   if (headers) {
       items.unshift(headers);
   }
 
   // Convert Object to JSON
   var jsonObject = JSON.stringify(items);
 
-  var csv = this.convertToCSV(jsonObject);
+  var csv = convertToCSV(jsonObject);
 
   var exportedFilenmae = fileTitle + '.csv' || 'export.csv';
 
diff --git a/patient-history-controler.js b/patient-history-controler.js
@@ -1,3 +1,4 @@
+import { patientLib } from './patient-lib.js';
 /**
  * UI management code. 
  * Relies on patientLib for API calls and data management
diff --git a/patient-history.html b/patient-history.html
@@ -12,9 +12,7 @@
   <title>Demo Form - Patient's page</title>
 </head>
 <script src="https://api.pryv.com/lib-js/pryv.js"></script>
-<script src="common-data-defs.js"></script>
-<script src="patient-history-controler.js"></script>
-<script src="patient-lib.js"></script>
+<script type="module" src="patient-history-controler.js"></script>
 
 <body>
   <div class="container">
diff --git a/patient-home-controler.js b/patient-home-controler.js
@@ -1,3 +1,6 @@
+import { patientLib } from './patient-lib.js';
+import { patientHomeLib } from './patient-home-lib.js';
+
 /**
  * UI management code. 
  * Relies on patientLib for API calls and data management
@@ -53,7 +56,8 @@ async function showFormList(formsInfo) {
     // fill the table row
     const row = tbody.insertRow(-1);
     const cellQuestionnary = row.insertCell(-1);
-    cellQuestionnary.innerHTML = `<button type="button" class="btn btn-secondary mb-sm">${formInfo.questionaryId}</button>`;
+    const formTitle = patientLib.getFormTitle(formInfo.questionaryId);
+    cellQuestionnary.innerHTML = `<button type="button" class="btn btn-secondary mb-sm">${formTitle}</button>`;
     cellQuestionnary.onclick = function () {
       showFormDetails(formInfo);
     };
@@ -77,7 +81,7 @@ async function showFormDetails(formInfo) {
 
   // - form title
   const formTitle = document.getElementById('card-questionnary-details-title');
-  formTitle.innerHTML = formInfo.questionaryId;
+  formTitle.innerHTML = patientLib.getFormTitle(formInfo.questionaryId);
 
   // - permissions
   const tbody = document.getElementById('access-request').getElementsByTagName('tbody')[0];;
diff --git a/patient-home-lib.js b/patient-home-lib.js
@@ -1,4 +1,6 @@
-const patientHomeLib = {
+import { dataDefs } from './common-data-defs.js';
+
+export const patientHomeLib = {
   getForms,
   getQuestionnaryDetails,
   grantAccess,
diff --git a/patient-lib.js b/patient-lib.js
@@ -1,10 +1,14 @@
-const patientLib = {
+import { dataDefs } from './common-data-defs.js';
+
+export const patientLib = {
   handleFormSubmit,
+  getFormTitle,
   getFormContent,
   connect,
   getNavigationQueryParams
 }
 
+
 let connection = null;
 let _questionaryId = null;
 async function connect (apiEndpoint, questionaryId) {
@@ -21,6 +25,10 @@ function getNavigationQueryParams() {
 
 // ---------------- form content ---------------- //
 
+function getFormTitle (questionaryId) {
+  return dataDefs.questionnaires[questionaryId].title;
+}
+
 async function getFormContent (questionaryId, formKey) {
   const form = dataDefs.questionnaires[questionaryId].forms[formKey];
   console.log('## getFormContent', form, questionaryId, formKey);
diff --git a/patient-profile-controler copy.js b/patient-profile-controler copy.js
@@ -0,0 +1,98 @@
+/**
+ * UI management code. 
+ * Relies on patientLib for API calls and data management
+ * 
+ * @param {*} event 
+ */
+
+window.onload = async (event) => {
+  const { patientApiEndpoint, questionaryId } = getPatientApiEndpointAndFormId();
+  console.log('## patientApiEndpoint:', patientApiEndpoint);
+  await patientLib.connect(patientApiEndpoint, questionaryId);
+  // -- navigation
+  document.getElementById('nav-history').onclick = () => {
+    document.location.href = 'patient-history.html' + patientLib.getNavigationQueryParams();
+  };
+  // -- content
+  updateFormContent(questionaryId, 'profile');
+  document.getElementById('submit-button-profile').addEventListener("click", function () { 
+    submitForm(questionaryId, 'profile'); 
+  });
+  
+}
+
+
+// ------- Get Questionnary and endpoint info -------- //
+function getPatientApiEndpointAndFormId() {
+  const params = new URLSearchParams(document.location.search);
+  const patientApiEndpoint = params.get('patientApiEndpoint');
+  const questionaryId = params.get('questionaryId');
+  if (!patientApiEndpoint) {
+    alert('No patientApiEndpoint found in the URL');
+    return;
+  }
+  if (!questionaryId) {
+    alert('No questionaryId found in the URL');
+    return;
+  }
+  return { patientApiEndpoint, questionaryId };
+}
+
+
+// ------- Form -------- //
+
+/**
+ * Take the from content from the definition and actual values and create the HTML
+ */
+async function updateFormContent(questionaryId, formKey) {
+  const formData = await patientLib.getFormContent(questionaryId, formKey);
+  console.log('Form content:', formData);
+ 
+  document.getElementById('inputs-' + formKey).innerHTML = ''; // Clear previous content
+  for (let i = 0; i < formData.length; i++) {
+    const formField = formData[i];
+    const fieldId = formField.id;
+    const fieldValue = (formField.value != null) ? formField.value : '';
+    const fieldType = formField.type;
+    const fieldLabel = formField.label;
+    
+    // Create the HTML for the form field
+    let fieldHTML = `\n<BR><label for="${fieldId}">${fieldLabel}</label>`;
+    if (fieldType === 'text' || fieldType === 'number') {
+      fieldHTML += `<input type="${fieldType}" id="${fieldId}" value="${fieldValue}" class="form-control"/>`;
+    } else if (fieldType === 'select') {
+      fieldHTML += `<select id="${fieldId}" class="form-control">`;
+      fieldHTML += `<option value="">--</option>`;
+      for (const option of formField.options) {
+        const selected = (option.value === fieldValue) ? 'selected' : '';
+        fieldHTML += `<option value="${option.value}" ${selected}>${option.label}</option>`;
+      }
+      fieldHTML += `</select>`;
+    } else if (fieldType === 'date') {
+      fieldHTML += `<input type="date" id="${fieldId}" value="${fieldValue}" class="form-control"/>`;
+    }
+    // Append the HTML to the form
+    document.getElementById('inputs-' + formKey).innerHTML += fieldHTML;
+  }
+}
+
+/**
+ * Submit the form and send the data to the API
+ */
+async function submitForm(questionaryId, formKey) {
+  const values = {};
+  const formData = await patientLib.getFormContent(questionaryId, formKey);
+  for (let i = 0; i < formData.length; i++) {
+    const field = formData[i];
+    const fieldId = field.id;
+    const formField = document.getElementById(fieldId);
+    // Store the value in the values object
+    if (field.type === 'date') {
+      values[field.id] = formField.valueAsDate; 
+    } else {
+      values[field.id] = formField.value.trim(); 
+    }    
+  }
+  await patientLib.handleFormSubmit(questionaryId, formKey, values);
+  alert('Form submitted successfully');
+};
diff --git a/patient-profile-controler.js b/patient-profile-controler.js
@@ -1,3 +1,4 @@
+import { patientLib } from './patient-lib.js';
 /**
  * UI management code. 
  * Relies on patientLib for API calls and data management
@@ -8,7 +9,7 @@
 window.onload = async (event) => {
   const { patientApiEndpoint, questionaryId } = getPatientApiEndpointAndFormId();
   console.log('## patientApiEndpoint:', patientApiEndpoint);
-  await connect(patientApiEndpoint, questionaryId);
+  await patientLib.connect(patientApiEndpoint, questionaryId);
   // -- navigation
   document.getElementById('nav-history').onclick = () => {
     document.location.href = 'patient-history.html' + patientLib.getNavigationQueryParams();
diff --git a/patient-profile.html b/patient-profile.html
@@ -12,9 +12,7 @@
   <title>Demo Form - Patient's page</title>
 </head>
 <script src="https://api.pryv.com/lib-js/pryv.js"></script>
-<script src="common-data-defs.js"></script>
-<script src="patient-profile-controler.js"></script>
-<script src="patient-lib.js"></script>
+<script type="module" src="patient-profile-controler.js"></script>
 
 <body>
   <div class="container">
diff --git a/patient.html b/patient.html
@@ -12,9 +12,7 @@
   <title>Demo Form - Patient's page</title>
 </head>
 <script src="https://api.pryv.com/lib-js/pryv.js"></script>
-<script src="common-data-defs.js"></script>
-<script src="patient-home-controler.js"></script>
-<script src="patient-home-lib.js"></script>
+<script type="module" src="patient-home-controler.js"></script>
 
 <body>
   <div class="container">

Original file line number	Diff line number	Diff line change
`@@ -141,8 +141,9 @@ const formHistoricalContent = [`
`141`	`141`	`}`
`142`	`142`	`]`
`143`	`143`
`144`		`-questionnaires = {`
	`144`	`+const questionnaires = {`
`145`	`145`	`'demo-dr-forms-questionary-x': {`
	`146`	`+ title: 'Demo with Profile and TTC-TTA',`
`146`	`147`	`permissions: patientBasePermissions.map(perm => ({`
`147`	`148`	`streamId: perm.id,`
`148`	`149`	`level: 'read',`
`@@ -166,6 +167,6 @@ questionnaires = {`
`166`	`167`	`}`
`167`	`168`	`}`
`168`	`169`
`169`		`-const dataDefs = {`
	`170`	`+export const dataDefs = {`
`170`	`171`	`questionnaires`
`171`	`172`	`};`
Original file line number	Diff line number	Diff line change
`@@ -16,15 +16,15 @@ function convertToCSV(objArray) {`
`16`	`16`	`return str;`
`17`	`17`	`}`
`18`	`18`
`19`		`-function exportCSVFile(headers, items, fileTitle) {`
	`19`	`+export function exportCSVFile(headers, items, fileTitle) {`
`20`	`20`	`if (headers) {`
`21`	`21`	`items.unshift(headers);`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`// Convert Object to JSON`
`25`	`25`	`var jsonObject = JSON.stringify(items);`
`26`	`26`
`27`		`- var csv = this.convertToCSV(jsonObject);`
	`27`	`+ var csv = convertToCSV(jsonObject);`
`28`	`28`
`29`	`29`	`var exportedFilenmae = fileTitle + '.csv' \|\| 'export.csv';`
`30`	`30`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import { patientLib } from './patient-lib.js';`
`1`	`2`	`/**`
`2`	`3`	`* UI management code.`
`3`	`4`	`* Relies on patientLib for API calls and data management`