From d3df822886bb410ab8fac6304a9ab141a5a80969 Mon Sep 17 00:00:00 2001
From: ianmuchyri <ianmuchiri8@gmail.com>
Date: Sun, 17 Mar 2024 13:39:38 +0300
Subject: [PATCH] fix close and dismiss button to work the same

Signed-off-by: ianmuchyri <ianmuchiri8@gmail.com>
---
 ui/web/static/js/charts.js                  |  2 +-
 ui/web/templates/charts/linechartmodal.html | 20 ++++++++++----------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/ui/web/static/js/charts.js b/ui/web/static/js/charts.js
index 105f37ae..9e3e1611 100644
--- a/ui/web/static/js/charts.js
+++ b/ui/web/static/js/charts.js
@@ -922,7 +922,7 @@ class TimeSeriesLineChart extends Echart {
               }
             }
             xAxisArray.push(xAxis);
-            // Remove the previous element in the array;
+            // Remove the previous element in the array
             xAxisArray.shift();
             yAxisArray.push(yAxis);
           } else {
diff --git a/ui/web/templates/charts/linechartmodal.html b/ui/web/templates/charts/linechartmodal.html
index b0dc7be7..af110ce6 100644
--- a/ui/web/templates/charts/linechartmodal.html
+++ b/ui/web/templates/charts/linechartmodal.html
@@ -17,7 +17,7 @@
           <h5 class="modal-title" id="lineChartModalLabel">Time Series Line Chart</h5>
           <button
             type="button"
-            class="btn-close"
+            class="btn-close close-lineChart-button"
             data-bs-dismiss="modal"
             aria-label="Close"
           ></button>
@@ -235,8 +235,7 @@ <h5>Data Source</h5>
         <div class="modal-footer">
           <button
             type="button"
-            class="btn btn-secondary"
-            id="close-lineChart-button"
+            class="btn btn-secondary close-lineChart-button"
             data-bs-dismiss="modal"
           >
             Close
@@ -250,8 +249,8 @@ <h5>Data Source</h5>
   </div>
 <script>
   // line chart form
+  const form = document.getElementById("create-lineChart-form");
   document.getElementById("create-lineChart-button").addEventListener("click", function () {
-    const form = document.getElementById("create-lineChart-form");
     if (!form.checkValidity()) {
       form.classList.add("was-validated");
       return;
@@ -332,12 +331,13 @@ <h5>Data Source</h5>
 
   });
 
-  document.getElementById("close-lineChart-button").addEventListener("click", function () {
-    const form = document.getElementById("create-lineChart-form");
-    form.querySelector(".invalid-time").innerHTML = "";
-    form.querySelector("#stop-time").classList.remove("is-invalid");
-    form.reset();
-    form.classList.remove("was-validated");
+  document.querySelectorAll(".close-lineChart-button").forEach((element) => {
+    element.addEventListener("click", function () {
+      form.querySelector(".invalid-time").innerHTML = "";
+      form.querySelector("#stop-time").classList.remove("is-invalid");
+      form.reset();
+      form.classList.remove("was-validated");
+    })
   });
 
   function addRow() {