From b1166236b7df0dfc7a0f615f6848a3977b3a8b2f Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Wed, 12 Apr 2023 19:14:53 +0200
Subject: [PATCH] continuing

---
 docs/HistogramView.js    |  2 ++
 docs/UIUtils.js          |  4 ++++
 docs/batchCodeTable.html |  2 ++
 docs/batchCodeTable.js   | 28 ++++++----------------------
 src/HtmlUtils.py         |  4 ++++
 5 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/docs/HistogramView.js b/docs/HistogramView.js
index e854a150554..487f2aaa660 100644
--- a/docs/HistogramView.js
+++ b/docs/HistogramView.js
@@ -6,6 +6,7 @@ class HistogramView {
         this.#uiContainer = uiContainer
     }
 
+    // FK-TODO: unbind all events here and in HistogramChartView
     displayHistogramView(batchcode) {
         this
             .#loadHistoDescrs(batchcode)
@@ -13,6 +14,7 @@ class HistogramView {
     }
 
     #loadHistoDescrs(batchcode) {
+        UIUtils.clear(this.#uiContainer);
         const loadingText = document.createTextNode('Loading...');
         this.#uiContainer.appendChild(loadingText);
         return HistoDescrsProvider
diff --git a/docs/UIUtils.js b/docs/UIUtils.js
index 106e4cd7cd0..4f818ff1530 100644
--- a/docs/UIUtils.js
+++ b/docs/UIUtils.js
@@ -8,6 +8,10 @@ class UIUtils {
         return UIUtils.instantiateTemplate('template-canvas');
     }
 
+    static clear(container) {
+        container.replaceChildren();
+    }
+
     static createChartViewElementWithHeading(heading) {
         const chartViewElement = UIUtils.instantiateTemplate('template-ChartView');
         chartViewElement.querySelector(".heading").textContent = heading;
diff --git a/docs/batchCodeTable.html b/docs/batchCodeTable.html
index 985317be0c6..58b56544d93 100644
--- a/docs/batchCodeTable.html
+++ b/docs/batchCodeTable.html
@@ -60,6 +60,7 @@
   </p>
   <p>
     <select id="batchCodeSelect" name="batchCode">
+      <option disabled="" hidden="" selected="" value="">Select Batch</option>
       <option value="FE6208">FE6208</option>
       <option value="FD6840">FD6840</option>
       <option value="FD4555">FD4555</option>
@@ -49764,6 +49765,7 @@
       <option value="RL8095">RL8095</option>
       <option value="Ø94F21A">Ø94F21A</option>
     </select>
+  <div id="batchCodeDetails"></div>
   </p>
   <table class="display" id="batchCodeTable">
     <thead>
diff --git a/docs/batchCodeTable.js b/docs/batchCodeTable.js
index 8d9de9fdf48..6ccb2c3e7fe 100644
--- a/docs/batchCodeTable.js
+++ b/docs/batchCodeTable.js
@@ -16,7 +16,6 @@ class BatchCodeTableInitializer {
         this.#initializeBatchCodeSelect();
         this.#display();
         this.#initializeHistogramView();
-        this.#trackSearchWithGoogleAnalytics();
     }
 
     #createEmptyBatchCodeTable() {
@@ -105,7 +104,6 @@ class BatchCodeTableInitializer {
             .then(json => {
                 this.#setTableRows(json.data);
                 this.#columnSearch.columnContentUpdated();
-                this.#selectInput();
             });
     }
 
@@ -121,20 +119,16 @@ class BatchCodeTableInitializer {
             .draw();
     }
 
-    #selectInput() {
-        const input = document.querySelector(".dataTables_filter input");
-        input.focus();
-        input.select();
-    }
-
     #initializeBatchCodeSelect() {
-        this.#batchCodeSelect.select2({ minimumInputLength: 3 });
+        this.#batchCodeSelect.select2({ minimumInputLength: 4 });
         this.#batchCodeSelect.on(
             'select2:select',
-            function (e) {
-                var data = e.params.data;
-                console.log(data.id);
+            function (event) {
+                const batchcode = event.params.data.id;
+                new HistogramView(document.querySelector("#batchCodeDetails")).displayHistogramView(batchcode);
+                GoogleAnalytics.click_batchcode(batchcode);
             });
+        this.#batchCodeSelect.select2('open');
     }
 
     #initializeHistogramView() {
@@ -159,14 +153,4 @@ class BatchCodeTableInitializer {
                     }
                 });
     }
-
-    #trackSearchWithGoogleAnalytics() {
-        const thisClassInstance = this;
-        $(`#${this.#batchCodeTableElement[0].id}`)
-            .on(
-                'search.dt',
-                function () {
-                    GoogleAnalytics.view_search_results(thisClassInstance.#batchCodeTable.search().toUpperCase());
-                });
-    }
 }
diff --git a/src/HtmlUtils.py b/src/HtmlUtils.py
index 30392ae8fdf..fee8b2d22af 100644
--- a/src/HtmlUtils.py
+++ b/src/HtmlUtils.py
@@ -3,6 +3,10 @@ def getBatchcodes(batchCodeTable):
 
 
 def getBatchcodeOptions(batchcodes):
+    return ['<option hidden disabled selected value>Select Batch</option>'] + _getBatchcodeOptions(batchcodes)
+
+
+def _getBatchcodeOptions(batchcodes):
     return [_getBatchcodeOption(batchcode) for batchcode in batchcodes]