From 89045d7d312599aeefe3e25a64cd540e6f3ab8bc Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Sat, 15 Apr 2023 23:24:12 +0200
Subject: [PATCH] refactoring

---
 docs/BatchCodeDetailsView.js                 |  5 +++--
 docs/BatchcodeCombinationSelection.js        | 16 +++++++---------
 docs/ElementWithSingleChangeEventListener.js | 18 ++++++++++++++++++
 docs/batchCodeTable.html                     |  3 ++-
 4 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 docs/ElementWithSingleChangeEventListener.js

diff --git a/docs/BatchCodeDetailsView.js b/docs/BatchCodeDetailsView.js
index a77e3951098..999500f9315 100644
--- a/docs/BatchCodeDetailsView.js
+++ b/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)
             });
diff --git a/docs/BatchcodeCombinationSelection.js b/docs/BatchcodeCombinationSelection.js
index ccd60aca310..8f914b18c16 100644
--- a/docs/BatchcodeCombinationSelection.js
+++ b/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) {
diff --git a/docs/ElementWithSingleChangeEventListener.js b/docs/ElementWithSingleChangeEventListener.js
new file mode 100644
index 00000000000..784e5b51a8c
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index a277ad0cdc7..b90c1ab9699 100644
--- a/docs/batchCodeTable.html
+++ b/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>