From 1501958fbdc70b89f3ea79abc6dc6125e64f0449 Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Mon, 30 Jan 2023 20:03:54 +0100
Subject: [PATCH] adding "Select batchcode combination"

---
 docs/HistogramView.js    | 62 ++++++++++++++++++++++++++++++----------
 docs/batchCodeTable.html |  9 ++++++
 docs/batchCodeTable.js   |  2 +-
 3 files changed, 57 insertions(+), 16 deletions(-)

diff --git a/docs/HistogramView.js b/docs/HistogramView.js
index 7ca20a9d98d..9bd70c9074e 100644
--- a/docs/HistogramView.js
+++ b/docs/HistogramView.js
@@ -1,15 +1,17 @@
 class HistogramView {
 
     #uiContainer;
+    #chartWithSlider;
+    #histogramChartView;
 
     constructor(uiContainer) {
         this.#uiContainer = uiContainer
     }
 
-    displayHistogramsForBatchcode(batchcode) {
+    displayHistogramViewForBatchcode(batchcode) {
         this
             .#loadHistoDescrsForBatchcode(batchcode)
-            .then(histoDescrs => this.#displayHistograms(histoDescrs));
+            .then(histoDescrs => this.#displayHistogramViewForHistoDescrs(histoDescrs));
     }
 
     #loadHistoDescrsForBatchcode(batchcode) {
@@ -22,29 +24,59 @@ class HistogramView {
             })
     }
 
-    #displayHistograms(histoDescrs) {
-        this.#uiContainer.appendChild(document.createTextNode(histoDescrs.batchcode));
-        for (const histoDescr of histoDescrs.histograms) {
-            this.#displayHistogram(histoDescr);
-        }
+    #displayHistogramViewForHistoDescrs(histoDescrs) {
+        this.#displaySelectBatchcodeCombination(histoDescrs.histograms);
+        this.#chartWithSlider = UIUtils.instantiateTemplate('template-chartWithSlider');
+        this.#uiContainer.appendChild(this.#chartWithSlider);
+        this.#histogramChartView = new HistogramChartView(this.#getCanvas());
+        this.#displayHistogram(histoDescrs.histograms[0]);
+    }
+
+    #getCanvas() {
+        return this.#chartWithSlider.querySelector("canvas");
+    }
+
+    #displaySelectBatchcodeCombination(histograms) {
+        const selectBatchcodeCombination = UIUtils.instantiateTemplate('template-selectBatchcodeCombination');
+        const batchcodesSelect = selectBatchcodeCombination.querySelector('#batchcodesSelect');
+        this.#addBatchcodeCombinationOptions(batchcodesSelect, histograms);
+        batchcodesSelect.addEventListener(
+            'change',
+            event => {
+                const histoDescr = histograms[event.target.value];
+                this.#displayHistogram(histoDescr);
+            });
+        this.#uiContainer.appendChild(selectBatchcodeCombination);
+    }
+
+    #addBatchcodeCombinationOptions(batchcodesSelect, histograms) {
+        this.#getBatchcodeCombinationOptions(histograms).forEach(option => batchcodesSelect.add(option));
+    }
+
+    #getBatchcodeCombinationOptions(histograms) {
+        // FK-TODO: zuerst das Histogramm für den einzelnen batchcode, dann batchcodes-Array-Länge 2, 3, 4, ...
+        return histograms.map(this.#getBatchcodeCombinationOption);
+    }
+
+    #getBatchcodeCombinationOption(histoDescr, index) {
+        const option = document.createElement("option");
+        option.text = histoDescr.batchcodes.join(', ');
+        option.value = index;
+        return option;
     }
 
     #displayHistogram(histoDescr) {
-        const chartWithSlider = UIUtils.instantiateTemplate('template-chartWithSlider');
-        this.#uiContainer.appendChild(chartWithSlider);
-        const canvas = chartWithSlider.querySelector("canvas");
-        const histogramChartView = new HistogramChartView(canvas);
-        histogramChartView.displayChart(histoDescr);
+        this.#histogramChartView.displayChart(histoDescr);
         this.#createSlider(
             {
-                sliderElement: chartWithSlider.querySelector(".slider"),
+                sliderElement: this.#chartWithSlider.querySelector(".slider"),
                 range: {
                     min: 0,
                     max: Object.keys(histoDescr.histogram).length
                 },
                 orientation: 'vertical',
-                height: canvas.style.height,
-                onUpdate: range => histogramChartView.setData(this.#slice(histoDescr, range))
+                height: this.#getCanvas().style.height,
+                onUpdate: range => this.#histogramChartView.setData(this.#slice(histoDescr, range))
             });
     }
 
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index 569e57a234c..88f556a927a 100644
--- a/docs/batchCodeTable.html
+++ b/docs/batchCodeTable.html
@@ -186,6 +186,15 @@
     <canvas></canvas>
   </template>
 
+  <template id="template-selectBatchcodeCombination">
+    <div>
+      <label>Select batchcode combination:
+        <select id="batchcodesSelect" name="batchcodes">
+        </select>
+      </label>
+    </div>
+  </template>
+
   <template id="template-chartWithSlider">
     <div class="chartWithSlider">
       <div class="chartContainer">
diff --git a/docs/batchCodeTable.js b/docs/batchCodeTable.js
index bdfd7a5ed73..bf827216bff 100644
--- a/docs/batchCodeTable.js
+++ b/docs/batchCodeTable.js
@@ -142,7 +142,7 @@ class BatchCodeTableInitializer {
                     row.child(uiContainer).show();
                     tr.addClass('shown');
                     const batchcode = row.data()[thisClassInstance.#getColumnIndex('Batch')];
-                    new HistogramView(uiContainer).displayHistogramsForBatchcode(batchcode);
+                    new HistogramView(uiContainer).displayHistogramViewForBatchcode(batchcode);
                 }
             });
     }