Added colors and buttons

Author: perki

dr-controler.js

@@ -25,33 +25,30 @@ async function stateChange(state) {
   }
 }
 
+const questionnaryButtons = {};
 async function setQuestionnaries() {
-  const select = document.getElementById("select-questionnary");
-  const optionNull = document.createElement("option");
-  optionNull.text = '---';
-  optionNull.value = '';
-  select.add(optionNull);
+  // -- on load
+  const selectedQuestionnary = getQuestionnaryFromUrl();
+  
+
+  const tbody = document.getElementById('questionnary-table').getElementsByTagName('tbody')[0];
+  // clear previous content
+  while (tbody.firstChild) {
+    tbody.removeChild(tbody.firstChild);
+  }
 
   const quests = await drLib.getQuestionnaires();
   for (const [key, value] of Object.entries(quests)) {
-    const option = document.createElement("option");
-    option.text = value.title;
-    option.value = key;
-    select.add(option);
-  }
- 
-  // -- on change
-  select.onchange = function () {
-    if (select.value === '') {
-      showQuestionnary(null);
-      return;
-    }
-    showQuestionnary(select.value);
-  }
-  // -- on load
-  const selectedQuestionnary = getQuestionnaryFromUrl();
+    const row = tbody.insertRow(-1);
+    const cellQuestionnary = row.insertCell(-1);
+    cellQuestionnary.innerHTML = `<button type="button" class="btn btn-secondary mb-sm">${value.title}</button>`;
+    questionnaryButtons[key] = cellQuestionnary.getElementsByTagName('button')[0];
+    cellQuestionnary.onclick = function () {
+      showQuestionnary(key);
+    };
+  };
+
   if (selectedQuestionnary) {
-    select.value = selectedQuestionnary;
     showQuestionnary(selectedQuestionnary);
   }
 }
@@ -63,7 +60,15 @@ function getQuestionnaryFromUrl() {
   return questionaryId
 }
 
+function highlightQuestionnaryButton(questionaryId) {
+  for (const [key, button] of Object.entries(questionnaryButtons)) {
+    const color =  (questionaryId === key) ? "LightSeaGreen" : 'lightgrey';
+    button.style.backgroundColor = color;
+  }
+}
+
 async function showQuestionnary(questionaryId) {
+  highlightQuestionnaryButton(questionaryId);
   console.log('## showQuestionnary', questionaryId);
   if (questionaryId == null) {
     document.getElementById('questionnary-view').style.visibility = 'hidden';

dr.html

@@ -36,7 +36,15 @@ <h2 class="card-title">Welcome</h2>
       </div>
     </div>
     <div class="card" id="data-view" style="visibility: hidden;">
-      Select a questionnary: <select id="select-questionnary" class="form-control"></select>
+      <table id='questionnary-table' class="table">
+        <thead>
+          <th> Select a questionnary:</th>
+        </thead>
+        <tbody>
+          <!-- will be filled by getQuestionaires-->
+        </tbody>
+      </table>
+      
       <div id="questionnary-view">
         <div class="card">
           <h2 class="card-title">Sharing link</h2>

patient-home-controler.js

@@ -40,11 +40,12 @@ function getRequestFrormApiEndPoint() {
 }
 
 // --------- Update form list --------- //
+const questionnaryRows = {};
 async function showFormList(formsInfo) {
   console.log('## showFormList', formsInfo);
 
   // -- table
-  const tbody = document.getElementById('questionnary-table').getElementsByTagName('tbody')[0];;
+  const tbody = document.getElementById('questionnary-table').getElementsByTagName('tbody')[0];
 
   // clear previous content
   while (tbody.firstChild) {
@@ -57,6 +58,9 @@ async function showFormList(formsInfo) {
     const cellQuestionnary = row.insertCell(-1);
     const formTitle = patientLib.getFormTitle(formInfo.questionaryId);
     cellQuestionnary.innerHTML = `<button type="button" class="btn btn-secondary mb-sm">${formTitle}</button>`;
+    questionnaryRows[formInfo.questionaryId + ':' + formInfo.drUserId] = {
+      row, button: cellQuestionnary.getElementsByTagName('button')[0]
+    }
     cellQuestionnary.onclick = function () {
       showFormDetails(formInfo);
     };
@@ -69,8 +73,18 @@ async function showFormList(formsInfo) {
   }
 }
 
+function highlightQuestionnaryButton(buttonKey) {
+  for (const [key, entry] of Object.entries(questionnaryRows)) {
+    const colorButton =  (buttonKey === key) ? "LightSeaGreen" : 'lightgrey';
+    const colorRow =  (buttonKey === key) ? 'lightgrey' : '';
+    entry.button.style.backgroundColor = colorButton;
+    entry.row.style.backgroundColor = colorRow;
+  }
+}
+
 // ----------- Show form details ----------- //
 async function showFormDetails(formInfo) {
+  highlightQuestionnaryButton(formInfo?.questionaryId + ':' + formInfo?.drUserId);
   const show = !!formInfo;
   document.getElementById('card-questionnary-details-nothing').style.display = show ? 'none' : 'block';
   document.getElementById('card-questionnary-details-something').style.display= show ? 'block' : 'none';

patient.html

@@ -39,7 +39,7 @@ <h2 class="card-title">Welcome</h2>
       <h2>Questionnaries</h2>
       <table id='questionnary-table' class="table">
         <thead>
-          <th>Questionnary Id</th>
+          <th>Questionnary</th>
           <th>Dr username</th>
           <th>Status</th>
         </thead>