Testing on Range Input and P-tag id synchronisation

Kumar-laxmi · Feb 28, 2024 · 5a68aae · 5a68aae
1 parent 03be70d
commit 5a68aae
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 72 deletions.
diff --git a/app/templates/elements/RightVerticalNavBar/volume.html b/app/templates/elements/RightVerticalNavBar/volume.html
@@ -1,13 +1,13 @@
 <div class="bg-secondary text-center rounded px-2 py-2 gy-1">
     <div class="row">
         <div class="col-4">
-            <button type="button" name="mute_volume" id="mute_volume" class="btn btn-link btn-outline-danger btn-square-md" data-mdb-ripple-color="dark">Mute All</button>
+            <button type="submit" name="mute_volume" id="mute_volume" class="btn btn-link btn-outline-danger btn-square-md" data-mdb-ripple-color="dark">Mute All</button>
         </div>
         <div class="col-4">
-            <button type="button" name="default_volume" id="default_volume" class="btn btn-link btn-outline-danger btn-square-md" data-mdb-ripple-color="dark">Default</button>
+            <button type="submit" name="default_volume" id="default_volume" class="btn btn-link btn-outline-danger btn-square-md" data-mdb-ripple-color="dark">Default</button>
         </div>
         <div class="col-4">
-            <button type="button" name="full_volume" id="full_volume" class="btn btn-link btn-outline-danger btn-square-md" data-mdb-ripple-color="dark">Max Volume</button>
+            <button type="submit" name="full_volume" id="full_volume" class="btn btn-link btn-outline-danger btn-square-md" data-mdb-ripple-color="dark">Max Volume</button>
         </div>
     </div>
 </div>
diff --git a/app/templates/elements/Scripts/volumeRangeControl.html b/app/templates/elements/Scripts/volumeRangeControl.html
@@ -69,7 +69,7 @@
         RLL: 'Right Lower Lobe'
     }
 
-    // Javascript Range IDs
+    // Javascript Input -> Range IDs
     const mitralRangeID = ["normal_heart_sound_mitral_valve_range","split_first_heart_sound_mitral_valve_range","split_second_heart_sound_mitral_valve_range","third_heart_sound_mitral_valve_range","fourth_heart_sound_mitral_valve_range","functional_murmur_sound_mitral_valve_range","diastolic_murmur_sound_mitral_valve_range","opening_snap_sound_mitral_valve_range","holosystolic_murmur_sound_mitral_valve_range","early_systolic_murmur_sound_mitral_valve_range","mid_systolic_murmur_sound_mitral_valve_range","continuous_murmur_sound_mitral_valve_range","austin_flint_murmur_sound_mitral_valve_range","pericardial_rub_sound_mitral_valve_range","graham_steell_murmur_sound_mitral_valve_range","aortic_valve_regurgitation_sound_mitral_valve_range","aortic_valve_stenosis_sound_mitral_valve_range","aortic_valve_stenosis_regurgitation_sound_mitral_valve_range","congenital_aortic_stenosis_sound_mitral_valve_range","mitral_valve_regurgitation_sound_mitral_valve_range","mitral_valve_stenosis_sound_mitral_valve_range","mitral_valve_prelapse_sound_mitral_valve_range","mitral_stenosis_regurgitation_sound_mitral_valve_range","mitral_stenosis_tricuspid_regurgitation_sound_mitral_valve_range","pulmonary_valve_stenosis_sound_mitral_valve_range","pulmonary_valve_regurgitation_sound_mitral_valve_range","tricuspid_valve_regurgitation_sound_mitral_valve_range","coarctation_of_the_aorta_sound_mitral_valve_range","hypertrophic_cardiomyopathy_sound_mitral_valve_range","patent_ductus_arteriosus_sound_mitral_valve_range","atrial_septal_defect_sound_mitral_valve_range","ventricular_septal_defect_sound_mitral_valve_range","acute_myocardial_infarction_sound_mitral_valve_range","congestive_heart_failure_sound_mitral_valve_range","systemic_hypertension_sound_mitral_valve_range","acute_pericarditis_sound_mitral_valve_range","dilated_cardiomyopathy_sound_mitral_valve_range","pulmonary_hypertension_sound_mitral_valve_range","tetralogy_of_fallot_sound_mitral_valve_range","ventricular_aneurysm_sound_mitral_valve_range","ebstein_anomaly_sound_mitral_valve_range"];
     const aorticRangeID = ["normal_heart_sound_aortic_valve_range","split_first_heart_sound_aortic_valve_range","split_second_heart_sound_aortic_valve_range","third_heart_sound_aortic_valve_range","fourth_heart_sound_aortic_valve_range","functional_murmur_sound_aortic_valve_range","diastolic_murmur_sound_aortic_valve_range","opening_snap_sound_aortic_valve_range","holosystolic_murmur_sound_aortic_valve_range","early_systolic_murmur_sound_aortic_valve_range","mid_systolic_murmur_sound_aortic_valve_range","continuous_murmur_sound_aortic_valve_range","austin_flint_murmur_sound_aortic_valve_range","pericardial_rub_sound_aortic_valve_range","graham_steell_murmur_sound_aortic_valve_range","aortic_valve_regurgitation_sound_aortic_valve_range","aortic_valve_stenosis_sound_aortic_valve_range","aortic_valve_stenosis_regurgitation_sound_aortic_valve_range","congenital_aortic_stenosis_sound_aortic_valve_range","mitral_valve_regurgitation_sound_aortic_valve_range","mitral_valve_stenosis_sound_aortic_valve_range","mitral_valve_prelapse_sound_aortic_valve_range","mitral_stenosis_regurgitation_sound_aortic_valve_range","mitral_stenosis_tricuspid_regurgitation_sound_aortic_valve_range","pulmonary_valve_stenosis_sound_aortic_valve_range","pulmonary_valve_regurgitation_sound_aortic_valve_range","tricuspid_valve_regurgitation_sound_aortic_valve_range","coarctation_of_the_aorta_sound_aortic_valve_range","hypertrophic_cardiomyopathy_sound_aortic_valve_range","patent_ductus_arteriosus_sound_aortic_valve_range","atrial_septal_defect_sound_aortic_valve_range","ventricular_septal_defect_sound_aortic_valve_range","acute_myocardial_infarction_sound_aortic_valve_range","congestive_heart_failure_sound_aortic_valve_range","systemic_hypertension_sound_aortic_valve_range","acute_pericarditis_sound_aortic_valve_range","dilated_cardiomyopathy_sound_aortic_valve_range","pulmonary_hypertension_sound_aortic_valve_range","tetralogy_of_fallot_sound_aortic_valve_range","ventricular_aneurysm_sound_aortic_valve_range","ebstein_anomaly_sound_aortic_valve_range"];
     const pulmonaryRangeID = ["normal_heart_sound_pulmonary_valve_range","split_first_heart_sound_pulmonary_valve_range","split_second_heart_sound_pulmonary_valve_range","third_heart_sound_pulmonary_valve_range","fourth_heart_sound_pulmonary_valve_range","functional_murmur_sound_pulmonary_valve_range","diastolic_murmur_sound_pulmonary_valve_range","opening_snap_sound_pulmonary_valve_range","holosystolic_murmur_sound_pulmonary_valve_range","early_systolic_murmur_sound_pulmonary_valve_range","mid_systolic_murmur_sound_pulmonary_valve_range","continuous_murmur_sound_pulmonary_valve_range","austin_flint_murmur_sound_pulmonary_valve_range","pericardial_rub_sound_pulmonary_valve_range","graham_steell_murmur_sound_pulmonary_valve_range","aortic_valve_regurgitation_sound_pulmonary_valve_range","aortic_valve_stenosis_sound_pulmonary_valve_range","aortic_valve_stenosis_regurgitation_sound_pulmonary_valve_range","congenital_aortic_stenosis_sound_pulmonary_valve_range","mitral_valve_regurgitation_sound_pulmonary_valve_range","mitral_valve_stenosis_sound_pulmonary_valve_range","mitral_valve_prelapse_sound_pulmonary_valve_range","mitral_stenosis_regurgitation_sound_pulmonary_valve_range","mitral_stenosis_tricuspid_regurgitation_sound_pulmonary_valve_range","pulmonary_valve_stenosis_sound_pulmonary_valve_range","pulmonary_valve_regurgitation_sound_pulmonary_valve_range","tricuspid_valve_regurgitation_sound_pulmonary_valve_range","coarctation_of_the_aorta_sound_pulmonary_valve_range","hypertrophic_cardiomyopathy_sound_pulmonary_valve_range","patent_ductus_arteriosus_sound_pulmonary_valve_range","atrial_septal_defect_sound_pulmonary_valve_range","ventricular_septal_defect_sound_pulmonary_valve_range","acute_myocardial_infarction_sound_pulmonary_valve_range","congestive_heart_failure_sound_pulmonary_valve_range","systemic_hypertension_sound_pulmonary_valve_range","acute_pericarditis_sound_pulmonary_valve_range","dilated_cardiomyopathy_sound_pulmonary_valve_range","pulmonary_hypertension_sound_pulmonary_valve_range","tetralogy_of_fallot_sound_pulmonary_valve_range","ventricular_aneurysm_sound_pulmonary_valve_range","ebstein_anomaly_sound_pulmonary_valve_range"];
@@ -87,7 +87,7 @@
     mitralRanges.forEach(range => {
         range.addEventListener('input', () => {
             const value = range.value;
-            ranges.forEach(otherRange => {
+            mitralRanges.forEach(otherRange => {
                 if (otherRange !== range) {
                     otherRange.value = value;
                 }
@@ -99,7 +99,7 @@
     aorticRanges.forEach(range => {
         range.addEventListener('input', () => {
             const value = range.value;
-            ranges.forEach(otherRange => {
+            aorticRanges.forEach(otherRange => {
                 if (otherRange !== range) {
                     otherRange.value = value;
                 }
@@ -111,7 +111,7 @@
     pulmonaryRanges.forEach(range => {
         range.addEventListener('input', () => {
             const value = range.value;
-            ranges.forEach(otherRange => {
+            pulmonaryRanges.forEach(otherRange => {
                 if (otherRange !== range) {
                     otherRange.value = value;
                 }
@@ -123,7 +123,7 @@
     tricuspidRanges.forEach(range => {
         range.addEventListener('input', () => {
             const value = range.value;
-            ranges.forEach(otherRange => {
+            tricuspidRanges.forEach(otherRange => {
                 if (otherRange !== range) {
                     otherRange.value = value;
                 }
@@ -135,7 +135,7 @@
     erbRanges.forEach(range => {
         range.addEventListener('input', () => {
             const value = range.value;
-            ranges.forEach(otherRange => {
+            erbRanges.forEach(otherRange => {
                 if (otherRange !== range) {
                     otherRange.value = value;
                 }

diff --git a/app/templates/elements/Scripts/volumeUpdate.html b/app/templates/elements/Scripts/volumeUpdate.html
@@ -216,72 +216,60 @@
 
     // Update Volume - Mute all Speakers
     $(document).ready(function () {
-        const muteVolume = ["mute_volume"];
-
-        muteVolume.forEach(function (identifier) {
-            $('#' + identifier).on('input', function () {
-                // Make an AJAX POST request
-                $.ajax({
-                    url: 'muteVolume/', // Replace with your backend endpoint
-                    method: 'POST',
-                    data: { 'csrfmiddlewaretoken': '{{ csrf_token }}'}, // Send the range value as data
-                    success: function (response) {
-                        // Handle success response
-                        console.log('POST request successful for ' + identifier + ':', response);
-                    },
-                    error: function (error) {
-                        // Handle error response
-                        console.error('Error in POST request for ' + identifier + ':', error);
-                    }
-                });
+        $('#mute_volume').click(function () {
+            // Make an AJAX POST request
+            $.ajax({
+                url: 'muteVolume/', // Replace with your backend endpoint
+                method: 'POST',
+                data: { 'csrfmiddlewaretoken': '{{ csrf_token }}'}, // Send the range value as data
+                success: function (response) {
+                    // Handle success response
+                    console.log('POST request successful for mute_volume' + ':', response);
+                },
+                error: function (error) {
+                    // Handle error response
+                    console.error('Error in POST request for mute_volume' + ':', error);
+                }
             });
         });
     });
 
     // Update Volume - Default Volume to Speakers
     $(document).ready(function () {
-        const defaultVolume = ["default_volume"];
-
-        defaultVolume.forEach(function (identifier) {
-            $('#' + identifier).on('input', function () {
-                // Make an AJAX POST request
-                $.ajax({
-                    url: 'defaultVolume/', // Replace with your backend endpoint
-                    method: 'POST',
-                    data: { 'csrfmiddlewaretoken': '{{ csrf_token }}'}, // Send the range value as data
-                    success: function (response) {
-                        // Handle success response
-                        console.log('POST request successful for ' + identifier + ':', response);
-                    },
-                    error: function (error) {
-                        // Handle error response
-                        console.error('Error in POST request for ' + identifier + ':', error);
-                    }
-                });
+        $('#default_volume').click(function () {
+            // Make an AJAX POST request
+            $.ajax({
+                url: 'defaultVolume/', // Replace with your backend endpoint
+                method: 'POST',
+                data: { 'csrfmiddlewaretoken': '{{ csrf_token }}'}, // Send the range value as data
+                success: function (response) {
+                    // Handle success response
+                    console.log('POST request successful for default_volume' + ':', response);
+                },
+                error: function (error) {
+                    // Handle error response
+                    console.error('Error in POST request for default_volume' + ':', error);
+                }
             });
         });
     });
 
     // Update Volume - Full Volume to Speakers
     $(document).ready(function () {
-        const fullVolume = ["full_volume"];
-
-        fullVolume.forEach(function (identifier) {
-            $('#' + identifier).on('input', function () {
-                // Make an AJAX POST request
-                $.ajax({
-                    url: 'fullVolume/', // Replace with your backend endpoint
-                    method: 'POST',
-                    data: { 'csrfmiddlewaretoken': '{{ csrf_token }}'}, // Send the range value as data
-                    success: function (response) {
-                        // Handle success response
-                        console.log('POST request successful for ' + identifier + ':', response);
-                    },
-                    error: function (error) {
-                        // Handle error response
-                        console.error('Error in POST request for ' + identifier + ':', error);
-                    }
-                });
+        $('#full_volume').click(function () {
+            // Make an AJAX POST request
+            $.ajax({
+                url: 'fullVolume/', // Replace with your backend endpoint
+                method: 'POST',
+                data: { 'csrfmiddlewaretoken': '{{ csrf_token }}'}, // Send the range value as data
+                success: function (response) {
+                    // Handle success response
+                    console.log('POST request successful for full_volume' + ':', response);
+                },
+                error: function (error) {
+                    // Handle error response
+                    console.error('Error in POST request for full_volume' + ':', error);
+                }
             });
         });
     });

diff --git a/db.sqlite3 b/db.sqlite3
diff --git a/temp.html b/temp.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Sync Range Inputs</title>
+  <title>Sync Values</title>
   <style>
     input {
       margin: 10px;
@@ -14,23 +14,33 @@
 
   <label for="range1">Range 1:</label>
   <input type="range" id="range1" min="0" max="100" value="50">
+  <p id="range1_value">50</p>
 
   <label for="range2">Range 2:</label>
   <input type="range" id="range2" min="0" max="100" value="50">
+  <p id="range2_value">50</p>
 
   <label for="range3">Range 3:</label>
   <input type="range" id="range3" min="0" max="100" value="50">
+  <p id="range3_value">50</p>
 
   <script>
     const rangeIds = ['range1', 'range2', 'range3'];
-    const ranges = rangeIds.map(id => document.getElementById(id));
-
-    ranges.forEach(range => {
-      range.addEventListener('input', () => {
-        const value = range.value;
-        ranges.forEach(otherRange => {
-          if (otherRange !== range) {
-            otherRange.value = value;
+    const pValueIds = rangeIds.map(id => id + '_value');
+
+    rangeIds.forEach((id, index) => {
+      const rangeInput = document.getElementById(id);
+      const valueParagraph = document.getElementById(pValueIds[index]);
+
+      rangeInput.addEventListener('input', () => {
+        const value = rangeInput.value;
+        valueParagraph.textContent = value;
+
+        // Sync values among range inputs
+        rangeIds.forEach((otherId, otherIndex) => {
+          if (otherIndex !== index) {
+            document.getElementById(pValueIds[otherIndex]).textContent = value;
+            document.getElementById(otherId).value = value;
           }
         });
       });