From 2a7e92217c064808b5f792c3df2f1e51e8596c86 Mon Sep 17 00:00:00 2001
From: frankknoll <Knoll_Frank@web.de>
Date: Fri, 1 Apr 2022 10:45:44 +0200
Subject: [PATCH] adding slider4freeBeds

---
 docs/FreeBedsChartView.js   |  6 ++++
 docs/intensivstationen.html |  2 ++
 docs/intensivstationen.js   | 59 ++++++++++++++++++++++++-------------
 3 files changed, 47 insertions(+), 20 deletions(-)

diff --git a/docs/FreeBedsChartView.js b/docs/FreeBedsChartView.js
index 849bbf22b5f..129490b5e97 100644
--- a/docs/FreeBedsChartView.js
+++ b/docs/FreeBedsChartView.js
@@ -48,6 +48,12 @@ class FreeBedsChartView {
         return { beforeDraw: drawTrafficLights };
     }
 
+    setData(data) {
+        this.#chart.config.data.datasets[0].data = data;
+        this.#chart.config.data.datasets[1].data = data;
+        this.#chart.update();
+    }
+
     #getData(data, label) {
         return {
             datasets: [
diff --git a/docs/intensivstationen.html b/docs/intensivstationen.html
index 8fabfa441bc..ed1c286dfe9 100644
--- a/docs/intensivstationen.html
+++ b/docs/intensivstationen.html
@@ -58,6 +58,7 @@
       displayFreeBedsChart(
         {
           freeBedsChartView: freeBedsChartView,
+          sliderElement: document.getElementById('slider4freeBeds'),
           kreisText: selectedOption.text,
           kreisValue: selectedOption.value
         });
@@ -524,6 +525,7 @@
                     <option value="Zwickau">Zwickau</option>
                   </select>
                   <canvas id="freeBeds"></canvas>
+                  <div id="slider4freeBeds"></div>
                 </div>
               </div>
             </div>
diff --git a/docs/intensivstationen.js b/docs/intensivstationen.js
index bc93d971ac7..4e02c47feba 100644
--- a/docs/intensivstationen.js
+++ b/docs/intensivstationen.js
@@ -4,31 +4,47 @@ function displayIntensiveCareCapacitiesChart(
     headingElement.textContent = kreisText
     fetch(`data/intensivstationen/intensivstationen-${kreisValue}.json`)
         .then(response => response.json())
-        .then(json => {
-            populationElement.textContent = new Intl.NumberFormat().format(json.population);
-            intensiveCareCapacitiesChartView.displayChart({ data: json.data, title: kreisText });
-            createSlider(
-                {
-                    sliderElement: sliderElement,
-                    range: {
-                        min: 0,
-                        max: json.data.length - 1
-                    },
-                    orientation: 'horizontal',
-                    onUpdate: ([start, end]) => intensiveCareCapacitiesChartView.setData(json.data.slice(start, end + 1))
-                });
+        .then(json => _displayIntensiveCareCapacitiesChart({ intensiveCareCapacitiesChartView, sliderElement, populationElement, kreisText, json }));
+}
+
+function _displayIntensiveCareCapacitiesChart({ intensiveCareCapacitiesChartView, sliderElement, populationElement, kreisText, json }) {
+    populationElement.textContent = new Intl.NumberFormat().format(json.population);
+    intensiveCareCapacitiesChartView.displayChart({ data: json.data, title: kreisText });
+    createSlider(
+        {
+            sliderElement: sliderElement,
+            range: {
+                min: 0,
+                max: json.data.length - 1
+            },
+            orientation: 'horizontal',
+            onUpdate: ([start, end]) => intensiveCareCapacitiesChartView.setData(json.data.slice(start, end + 1))
         });
 }
 
-function displayFreeBedsChart({ freeBedsChartView, kreisText, kreisValue }) {
+function displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, kreisValue }) {
     fetch(`data/intensivstationen/intensivstationen-${kreisValue}.json`)
         .then(response => response.json())
-        .then(json =>
-            freeBedsChartView.displayChart(
-                {
-                    data: getDataDicts(json.data),
-                    title: kreisText
-                }));
+        .then(json => _displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, json }));
+}
+
+function _displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, json }) {
+    const data = getDataDicts(json.data);
+    freeBedsChartView.displayChart(
+        {
+            data: data,
+            title: kreisText
+        });
+    createSlider(
+        {
+            sliderElement: sliderElement,
+            range: {
+                min: 0,
+                max: data.length - 1
+            },
+            orientation: 'horizontal',
+            onUpdate: ([start, end]) => freeBedsChartView.setData(data.slice(start, end + 1))
+        });
 }
 
 function getDataDicts(data) {
@@ -79,6 +95,9 @@ function _displayMedianOfFreeBedsByKreisChart(canvas, sliderElement, data) {
 }
 
 function createSlider({ sliderElement, range, orientation, height = null, onUpdate }) {
+    if ('noUiSlider' in sliderElement) {
+        sliderElement.noUiSlider.destroy();
+    }
     noUiSlider.create(
         sliderElement,
         {