Skip to content

Commit ce0ce41

Browse files
maexledmaexled
committed
update dependency, improve code
1 parent 4ed88d9 commit ce0ce41

File tree

4 files changed

+59
-53
lines changed

4 files changed

+59
-53
lines changed

‎mystrom/templates/base.html

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,12 @@
88
<meta name="viewport" content="width=device-width, initial-scale=1" />
99

1010
<!-- Bootstrap CSS -->
11-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
1212
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/css/toastr.css">
1313

1414
<script src="https://unpkg.com/htmx.org@1.6.1/dist/htmx.min.js"></script>
15-
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
16-
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.6/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
17-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.2.1/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
15+
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" crossorigin="anonymous"></script>
16+
<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>
1817
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.0.1/js/toastr.js"></script>
1918
</head>
2019

‎mystrom/templates/device_form.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,19 @@ <h5 class="modal-title" id="exampleModalLabel">Create device</h5>
3030
</form>
3131
{% endwith %}
3232
<script>
33-
var submit_button = document.getElementById("modal-submit");
33+
const submit_button = document.getElementById("modal-submit");
3434
function onSubmit() {
35-
submit_button.innerHTML = "Saving...."
36-
submit_button.disabled = true
35+
submit_button.innerHTML = "Saving....";
36+
submit_button.disabled = true;
3737
}
3838

3939
</script>
4040
{% if device %}
4141
<script>
42-
var delete_button = document.getElementById("modal-delete");
42+
const delete_button = document.getElementById("modal-delete");
4343
function onDelete() {
44-
delete_button.innerHTML = "Removing...."
45-
delete_button.disabled = true
44+
delete_button.innerHTML = "Removing....";
45+
delete_button.disabled = true;
4646
}
4747
</script>
4848
{% endif %}

‎mystrom/templates/index.html

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ <h1>MyStrom Devices</h1>
3333
</div>
3434

3535
<!-- Placeholder for the modal -->
36-
<!-- Modal -->
3736
<div id="createModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
3837
<div id="dialog" class="modal-dialog" role="document">
3938

@@ -51,19 +50,19 @@ <h1>MyStrom Devices</h1>
5150
$("#createModal").modal('show');
5251
} else if (e.detail.requestConfig.path == "{% url 'devices' %}") {
5352
if (e.detail.requestConfig.verb == "post") {
54-
let deviceName = e.detail.requestConfig.parameters.name
53+
const deviceName = e.detail.requestConfig.parameters.name;
5554
$("#createModal").modal('hide');
56-
toastr.success('Device ' + deviceName + ' created')
55+
toastr.success('Device ' + deviceName + ' created');
5756
} else if (e.detail.requestConfig.verb == "delete") {
58-
toastr.error('All devices deleted')
57+
toastr.error('All devices deleted');
5958
}
6059
} else if (e.detail.requestConfig.path.startsWith("{% url 'devices' %}")) {
61-
let deviceName = e.detail.requestConfig.parameters.name
60+
const deviceName = e.detail.requestConfig.parameters.name;
6261
$("#createModal").modal('hide');
6362
if (e.detail.requestConfig.verb == "post") {
64-
toastr.success('Device ' + deviceName + ' updated')
63+
toastr.success('Device ' + deviceName + ' updated');
6564
} else if (e.detail.requestConfig.verb == "delete") {
66-
toastr.error('Device ' + deviceName + ' deleted')
65+
toastr.error('Device ' + deviceName + ' deleted');
6766
}
6867
}
6968
})
@@ -73,23 +72,23 @@ <h1>MyStrom Devices</h1>
7372
if (e.detail.requestConfig.verb == "post") {
7473
// when it contains invalid feedback, we do no want to swap and show error in form
7574
if (e.detail.xhr.response.includes("invalid-feedback")) {
76-
e.detail.shouldSwap = false
77-
let response = e.detail.xhr.response
78-
document.getElementById("modal-body").innerHTML = response
75+
e.detail.shouldSwap = false;
76+
const response = e.detail.xhr.response;
77+
document.getElementById("modal-body").innerHTML = response;
7978

8079
// reset save buton from "Saving..." to "Save"
81-
submit_button = document.getElementById("modal-submit")
82-
submit_button.innerHTML = "Save"
83-
submit_button.disabled = false
80+
const submit_button = document.getElementById("modal-submit");
81+
submit_button.innerHTML = "Save";
82+
submit_button.disabled = false;
8483
}
8584
}
8685
}
8786
})
8887

8988
// Remove dialog content after hiding
9089
htmx.on("hidden.bs.createModal", () => {
91-
console.log("HIDDEN")
92-
document.getElementById("dialog").innerHTML = ""
90+
console.log("HIDDEN");
91+
document.getElementById("dialog").innerHTML = "";
9392
})
9493
})()
9594
</script>

‎mystrom/templates/results.html

Lines changed: 36 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -67,49 +67,57 @@ <h1>MyStrom Results</h1>
6767
<script src="https://cdnjs.cloudflare.com/ajax/libs/apexcharts/3.35.3/apexcharts.min.js"></script>
6868

6969
<script type="application/javascript">
70-
var shown = []
70+
let shown = [];
7171

7272
function resetDates(el) {
73-
id = String(el.id).split("-")[2]
74-
document.getElementById("start-date-" + id).value = ""
75-
document.getElementById("end-date-" + id).value = ""
73+
const id = String(el.id).split("-")[2];
74+
document.getElementById("start-date-" + id).value = "";
75+
document.getElementById("end-date-" + id).value = "";
7676
}
7777

7878
function toggleChart(id) {
79-
startDateElement = document.getElementById("start-date-" + id)
80-
endDateElement = document.getElementById("end-date-" + id)
81-
elementId = "chart-" + id
79+
const startDateElement = document.getElementById("start-date-" + id);
80+
const endDateElement = document.getElementById("end-date-" + id);
81+
const elementId = "chart-" + id;
8282
if (shown.includes(id)) {
83-
document.getElementById(elementId).outerHTML = ""
83+
document.getElementById(elementId).outerHTML = "";
8484

85-
document.getElementById(id).innerHTML = "Show Chart for Device " + id
86-
shown = shown.filter(shownId => shownId != id)
85+
document.getElementById(id).innerHTML = "Show Chart for Device " + id;
86+
shown = shown.filter(shownId => shownId != id);
8787
} else {
88-
createdElement = document.createElement("div")
89-
createdElement.setAttribute("id", elementId)
90-
document.getElementById("chartContainer").appendChild(createdElement)
88+
const createdElement = document.createElement("div");
89+
createdElement.setAttribute("id", elementId);
90+
document.getElementById("chartContainer").appendChild(createdElement);
9191

92-
informationElement = document.createElement("div")
93-
informationElement.setAttribute("id", elementId + "-information")
92+
const informationElement = document.createElement("div");
93+
informationElement.setAttribute("id", elementId + "-information");
9494
createdElement.appendChild(informationElement);
9595

96-
chartElement = document.createElement("div")
97-
chartElement.setAttribute("id", elementId + "-chart")
98-
createdElement.appendChild(chartElement)
96+
const chartElement = document.createElement("div");
97+
chartElement.setAttribute("id", elementId + "-chart");
98+
createdElement.appendChild(chartElement);
9999

100-
chart = loadChart(id, elementId, startDateElement.value, endDateElement.value)
100+
loadChart(id, elementId, startDateElement.value, endDateElement.value);
101101

102-
document.getElementById(id).innerHTML = "Hide Chart for Device " + id
103-
shown.push(id)
102+
document.getElementById(id).innerHTML = "Hide Chart for Device " + id;
103+
shown.push(id);
104104
}
105105

106106
}
107107

108108
function loadChart(id, elementId, startDate, endDate) {
109-
startQuery = startDate == "" ? "" : "?start=" + startDate
110-
endQuery = endDate == "" ? "" : (startDate == "" ? "?" : "&") + "end=" + endDate
111-
console.log("{% url 'rest_device_index' %}" + id + "/results/" + startQuery + endQuery)
109+
const startQuery = startDate == "" ? "" : "?start=" + startDate;
110+
const endQuery = endDate == "" ? "" : (startDate == "" ? "?" : "&") + "end=" + endDate;
111+
console.log("Requesting REST: {% url 'rest_device_index' %}" + id + "/results/" + startQuery + endQuery);
112112
$.get("{% url 'rest_device_index' %}" + id + "/results/" + startQuery + endQuery, function (data) {
113+
const chartElement = document.getElementById(elementId + "-chart");
114+
const informationElement = document.getElementById(elementId + "-information");
115+
116+
if (data.length == 0) {
117+
informationElement.innerHTML = '<h3 class="text-danger">Query of device ' + id + ' is empty</h3>';
118+
console.log("Data is empty. Can not show any data");
119+
return;
120+
}
113121
const firstDate = new Date(data[0].date);
114122
const lastDate = new Date(data[data.length - 1].date);
115123
const differenceBetweenDates = lastDate - firstDate;
@@ -118,15 +126,15 @@ <h1>MyStrom Results</h1>
118126
const powerList = data.map(entry => entry.power);
119127
const WsList = data.map(entry => entry.ws);
120128
const temperatureList = data.map(entry => entry.temperature);
121-
var total = 0;
129+
let total = 0;
122130
for (var power of powerList) {
123131
total += power;
124132
}
125133
const average = total / powerList.length;
126134
const totalProducedkWh = (average * hoursDifferenceBetweedDates) / 1000;
127135

128-
document.getElementById(elementId + "-information").innerHTML = "<h5>Average of " + hoursDifferenceBetweedDates.toFixed(2) + " hours: " + average.toFixed(2) + "Wh</h5>"
129-
document.getElementById(elementId + "-information").innerHTML += "<h5>Leads to <b>" + totalProducedkWh.toFixed(2) + "kWh</b> produced in " + hoursDifferenceBetweedDates.toFixed(2) + " hours</h5>";
136+
informationElement.innerHTML = "<h5>Average of " + hoursDifferenceBetweedDates.toFixed(2) + " hours: " + average.toFixed(2) + "Wh</h5>";
137+
informationElement.innerHTML += "<h5>Leads to <b>" + totalProducedkWh.toFixed(2) + "kWh</b> produced in " + hoursDifferenceBetweedDates.toFixed(2) + " hours</h5>";
130138

131139
const options = {
132140
series: [{
@@ -176,7 +184,7 @@ <h1>MyStrom Results</h1>
176184
}
177185
};
178186

179-
const chart = new ApexCharts(document.querySelector("#" + elementId + "-chart"), options);
187+
const chart = new ApexCharts(chartElement, options);
180188
chart.render();
181189

182190
})

0 commit comments

Comments
 (0)