From ce0ce41aa178787567a0298086245e9c54d08b7e Mon Sep 17 00:00:00 2001
From: maexled <max@dasmaexle.de>
Date: Sun, 17 Jul 2022 20:58:14 +0200
Subject: [PATCH] update dependency, improve code

---
 mystrom/templates/base.html        |  7 ++--
 mystrom/templates/device_form.html | 12 +++---
 mystrom/templates/index.html       | 29 +++++++-------
 mystrom/templates/results.html     | 64 +++++++++++++++++-------------
 4 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/mystrom/templates/base.html b/mystrom/templates/base.html
index e392437..36435b6 100644
--- a/mystrom/templates/base.html
+++ b/mystrom/templates/base.html
@@ -8,13 +8,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <!-- Bootstrap CSS -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css">
 
     <script src="https://unpkg.com/htmx.org@1.6.1/dist/htmx.min.js"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
   </head>
 
diff --git a/mystrom/templates/device_form.html b/mystrom/templates/device_form.html
index 1cae913..ab8fa9c 100644
--- a/mystrom/templates/device_form.html
+++ b/mystrom/templates/device_form.html
@@ -30,19 +30,19 @@ <h5 class="modal-title" id="exampleModalLabel">Create device</h5>
 </form>
 {% endwith %}
 <script>
-  var submit_button = document.getElementById("modal-submit");
+  const submit_button = document.getElementById("modal-submit");
 	function onSubmit() {
-    submit_button.innerHTML = "Saving...."
-    submit_button.disabled = true
+    submit_button.innerHTML = "Saving....";
+    submit_button.disabled = true;
   }
   
 </script>
 {% if device %}
 <script>
-  var delete_button = document.getElementById("modal-delete");
+  const delete_button = document.getElementById("modal-delete");
 	function onDelete() {
-    delete_button.innerHTML = "Removing...."
-    delete_button.disabled = true
+    delete_button.innerHTML = "Removing....";
+    delete_button.disabled = true;
   }
 </script>
 {% endif %}
\ No newline at end of file
diff --git a/mystrom/templates/index.html b/mystrom/templates/index.html
index 6b00ff5..e452a08 100644
--- a/mystrom/templates/index.html
+++ b/mystrom/templates/index.html
@@ -33,7 +33,6 @@ <h1>MyStrom Devices</h1>
 </div>
 
 <!-- Placeholder for the modal -->
-<!-- Modal -->
 <div id="createModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div id="dialog" class="modal-dialog" role="document">
             
@@ -51,19 +50,19 @@ <h1>MyStrom Devices</h1>
         $("#createModal").modal('show');
       } else if (e.detail.requestConfig.path == "{% url 'devices' %}") {
         if (e.detail.requestConfig.verb == "post") {
-          let deviceName = e.detail.requestConfig.parameters.name
+          const deviceName = e.detail.requestConfig.parameters.name;
           $("#createModal").modal('hide');
-          toastr.success('Device ' + deviceName + ' created')
+          toastr.success('Device ' + deviceName + ' created');
         } else if (e.detail.requestConfig.verb == "delete") {
-          toastr.error('All devices deleted')
+          toastr.error('All devices deleted');
         }
       } else if (e.detail.requestConfig.path.startsWith("{% url 'devices' %}")) {
-        let deviceName = e.detail.requestConfig.parameters.name
+        const deviceName = e.detail.requestConfig.parameters.name;
         $("#createModal").modal('hide');
         if (e.detail.requestConfig.verb == "post") {
-          toastr.success('Device ' + deviceName + ' updated')
+          toastr.success('Device ' + deviceName + ' updated');
         } else if (e.detail.requestConfig.verb == "delete") {
-          toastr.error('Device ' + deviceName + ' deleted')
+          toastr.error('Device ' + deviceName + ' deleted');
         }
       }
     })
@@ -73,14 +72,14 @@ <h1>MyStrom Devices</h1>
         if (e.detail.requestConfig.verb == "post") {
           // when it contains invalid feedback, we do no want to swap and show error in form
           if (e.detail.xhr.response.includes("invalid-feedback")) {
-            e.detail.shouldSwap = false
-            let response = e.detail.xhr.response
-            document.getElementById("modal-body").innerHTML = response
+            e.detail.shouldSwap = false;
+            const response = e.detail.xhr.response;
+            document.getElementById("modal-body").innerHTML = response;
 
             // reset save buton from "Saving..." to "Save"
-            submit_button = document.getElementById("modal-submit")
-            submit_button.innerHTML = "Save"
-            submit_button.disabled = false
+            const submit_button = document.getElementById("modal-submit");
+            submit_button.innerHTML = "Save";
+            submit_button.disabled = false;
           }
         }
       }
@@ -88,8 +87,8 @@ <h1>MyStrom Devices</h1>
 
     // Remove dialog content after hiding
     htmx.on("hidden.bs.createModal", () => {
-      console.log("HIDDEN")
-      document.getElementById("dialog").innerHTML = ""
+      console.log("HIDDEN");
+      document.getElementById("dialog").innerHTML = "";
     })
   })()
 </script>
diff --git a/mystrom/templates/results.html b/mystrom/templates/results.html
index 27269d4..a39d713 100644
--- a/mystrom/templates/results.html
+++ b/mystrom/templates/results.html
@@ -67,49 +67,57 @@ <h1>MyStrom Results</h1>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js"></script>
 
 <script type="application/javascript">
-  var shown = []
+  let shown = [];
 
   function resetDates(el) {
-    id = String(el.id).split("-")[2]
-    document.getElementById("start-date-" + id).value = ""
-    document.getElementById("end-date-" + id).value = ""
+    const id = String(el.id).split("-")[2];
+    document.getElementById("start-date-" + id).value = "";
+    document.getElementById("end-date-" + id).value = "";
   }
 
   function toggleChart(id) {
-    startDateElement = document.getElementById("start-date-" + id)
-    endDateElement = document.getElementById("end-date-" + id)
-    elementId = "chart-" + id
+    const startDateElement = document.getElementById("start-date-" + id);
+    const endDateElement = document.getElementById("end-date-" + id);
+    const elementId = "chart-" + id;
     if (shown.includes(id)) {
-      document.getElementById(elementId).outerHTML = ""
+      document.getElementById(elementId).outerHTML = "";
 
-      document.getElementById(id).innerHTML = "Show Chart for Device " + id
-      shown = shown.filter(shownId => shownId != id)
+      document.getElementById(id).innerHTML = "Show Chart for Device " + id;
+      shown = shown.filter(shownId => shownId != id);
     } else {
-      createdElement = document.createElement("div")
-      createdElement.setAttribute("id", elementId)
-      document.getElementById("chartContainer").appendChild(createdElement)
+      const createdElement = document.createElement("div");
+      createdElement.setAttribute("id", elementId);
+      document.getElementById("chartContainer").appendChild(createdElement);
 
-      informationElement = document.createElement("div")
-      informationElement.setAttribute("id", elementId + "-information")
+      const informationElement = document.createElement("div");
+      informationElement.setAttribute("id", elementId + "-information");
       createdElement.appendChild(informationElement);
 
-      chartElement = document.createElement("div")
-      chartElement.setAttribute("id", elementId + "-chart")
-      createdElement.appendChild(chartElement)
+      const chartElement = document.createElement("div");
+      chartElement.setAttribute("id", elementId + "-chart");
+      createdElement.appendChild(chartElement);
 
-      chart = loadChart(id, elementId, startDateElement.value, endDateElement.value)
+      loadChart(id, elementId, startDateElement.value, endDateElement.value);
 
-      document.getElementById(id).innerHTML = "Hide Chart for Device " + id
-      shown.push(id)
+      document.getElementById(id).innerHTML = "Hide Chart for Device " + id;
+      shown.push(id);
     }
 
   }
 
   function loadChart(id, elementId, startDate, endDate) {
-    startQuery = startDate == "" ? "" : "?start=" + startDate
-    endQuery = endDate == "" ? "" : (startDate == "" ? "?" : "&") + "end=" + endDate
-    console.log("{% url 'rest_device_index' %}" + id + "/results/" + startQuery + endQuery)
+    const startQuery = startDate == "" ? "" : "?start=" + startDate;
+    const endQuery = endDate == "" ? "" : (startDate == "" ? "?" : "&") + "end=" + endDate;
+    console.log("Requesting REST: {% url 'rest_device_index' %}" + id + "/results/" + startQuery + endQuery);
     $.get("{% url 'rest_device_index' %}" + id + "/results/" + startQuery + endQuery, function (data) {
+      const chartElement = document.getElementById(elementId + "-chart");
+      const informationElement = document.getElementById(elementId + "-information");
+
+      if (data.length == 0) {
+        informationElement.innerHTML = '<h3 class="text-danger">Query of device ' + id + ' is empty</h3>';
+        console.log("Data is empty. Can not show any data");
+        return;
+      }
       const firstDate = new Date(data[0].date);
       const lastDate = new Date(data[data.length - 1].date);
       const differenceBetweenDates = lastDate - firstDate;
@@ -118,15 +126,15 @@ <h1>MyStrom Results</h1>
       const powerList = data.map(entry => entry.power);
       const WsList = data.map(entry => entry.ws);
       const temperatureList = data.map(entry => entry.temperature);
-      var total = 0;
+      let total = 0;
       for (var power of powerList) {
         total += power;
       }
       const average = total / powerList.length;
       const totalProducedkWh = (average * hoursDifferenceBetweedDates) / 1000;
 
-      document.getElementById(elementId + "-information").innerHTML = "<h5>Average of " + hoursDifferenceBetweedDates.toFixed(2) + " hours: " + average.toFixed(2) + "Wh</h5>"
-      document.getElementById(elementId + "-information").innerHTML += "<h5>Leads to <b>" + totalProducedkWh.toFixed(2) + "kWh</b> produced in " + hoursDifferenceBetweedDates.toFixed(2) + " hours</h5>";
+      informationElement.innerHTML = "<h5>Average of " + hoursDifferenceBetweedDates.toFixed(2) + " hours: " + average.toFixed(2) + "Wh</h5>";
+      informationElement.innerHTML += "<h5>Leads to <b>" + totalProducedkWh.toFixed(2) + "kWh</b> produced in " + hoursDifferenceBetweedDates.toFixed(2) + " hours</h5>";
 
       const options = {
         series: [{
@@ -176,7 +184,7 @@ <h1>MyStrom Results</h1>
         }
       };
 
-      const chart = new ApexCharts(document.querySelector("#" + elementId + "-chart"), options);
+      const chart = new ApexCharts(chartElement, options);
       chart.render();
 
     })