refactoring

docs/BatchCodeDetailsView.js

@@ -2,6 +2,7 @@ class BatchCodeDetailsView {
 
     #uiContainer;
     #headingElement;
+    #batchcodesSelectElement;
     #adverseReactionReportsChartView;
     #histogramChartView;
     #chartWithSlider;
@@ -9,6 +10,7 @@ class BatchCodeDetailsView {
     constructor(uiContainer) {
         this.#uiContainer = uiContainer
         this.#headingElement = this.#uiContainer.querySelector(".heading");
+        this.#batchcodesSelectElement = new ElementWithSingleChangeEventListener(this.#uiContainer.querySelector("#batchcodesSelect"));
         this.#adverseReactionReportsChartView = new AdverseReactionReportsChartView(this.#uiContainer.querySelector('#adverseReactionReportsChartView'));
         this.#chartWithSlider = this.#uiContainer.querySelector('.chartWithSlider');
         this.#histogramChartView = new HistogramChartView(this.#chartWithSlider.querySelector("canvas"));
@@ -67,10 +69,9 @@ class BatchCodeDetailsView {
     }
 
     #displaySelectBatchcodeCombination(histograms) {
-        const selectBatchcodeCombinationElement = this.#uiContainer.querySelector("#selectBatchcodeCombination");
         BatchcodeCombinationSelection.configureSelectBatchcodeCombinationElement(
             {
-                selectBatchcodeCombinationElement: selectBatchcodeCombinationElement,
+                batchcodesSelectElement: this.#batchcodesSelectElement,
                 histograms: histograms,
                 onSelect: histoDescr => this.#displayHistogram(histoDescr)
             });

docs/BatchcodeCombinationSelection.js

@@ -1,20 +1,18 @@
 class BatchcodeCombinationSelection {
 
-    static configureSelectBatchcodeCombinationElement({ selectBatchcodeCombinationElement, histograms, onSelect }) {
-        const batchcodesSelect = selectBatchcodeCombinationElement.querySelector('#batchcodesSelect');
-        this.#setBatchcodeCombinationOptions(batchcodesSelect, histograms);
-        batchcodesSelect.addEventListener(
-            'change',
+    static configureSelectBatchcodeCombinationElement({ batchcodesSelectElement, histograms, onSelect }) {
+        this.#setBatchcodeCombinationOptions(batchcodesSelectElement.element, histograms);
+        batchcodesSelectElement.setSingleChangeEventListener(
             event => {
                 const histoDescr = histograms[event.target.value];
                 onSelect(histoDescr);
             });
-            onSelect(histograms[0]);
+        onSelect(histograms[0]);
     }
 
-    static #setBatchcodeCombinationOptions(batchcodesSelect, histograms) {
-        UIUtils.clear(batchcodesSelect);
-        this.#getBatchcodeCombinationOptions(histograms).forEach(option => batchcodesSelect.add(option));
+    static #setBatchcodeCombinationOptions(batchcodesSelectElement, histograms) {
+        UIUtils.clear(batchcodesSelectElement);
+        this.#getBatchcodeCombinationOptions(histograms).forEach(option => batchcodesSelectElement.add(option));
     }
 
     static #getBatchcodeCombinationOptions(histograms) {

docs/ElementWithSingleChangeEventListener.js

@@ -0,0 +1,18 @@
+class ElementWithSingleChangeEventListener {
+
+    element;
+    #changeEventListenerOfElement;
+
+    constructor(element) {
+        this.element = element;
+    }
+
+    setSingleChangeEventListener(singleChangeEventListener) {
+        const eventType = 'change';
+        if (this.#changeEventListenerOfElement !== undefined) {
+            this.element.removeEventListener(eventType, this.#changeEventListenerOfElement);
+        }
+        this.element.addEventListener(eventType, singleChangeEventListener);
+        this.#changeEventListenerOfElement = singleChangeEventListener;
+    }
+}

docs/batchCodeTable.html

@@ -30,6 +30,7 @@
   <script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0/dist/chart.umd.min.js"></script>
   <script src="./Utils.js"></script>
   <script src="./UIUtils.js"></script>
+  <script src="./ElementWithSingleChangeEventListener.js"></script>
   <script src="./GoogleAnalytics.js"></script>
   <script src="./BatchCodeSelectInitializer.js"></script>
   <script src="./HistoDescrsProvider.js"></script>
@@ -49764,8 +49765,8 @@
   </p>
   <div id="batchCodeDetails" style="width: 50%">
     <h3 class="heading"></h3>
+    <canvas id="adverseReactionReportsChartView"></canvas>
     <div id="selectBatchcodeCombination">
-      <canvas id="adverseReactionReportsChartView"></canvas>
       <label>Select batchcode combination:
         <select id="batchcodesSelect" name="batchcodes">
         </select>