Skip to content

Commit

Permalink
update dependency, improve code
Browse files Browse the repository at this point in the history
  • Loading branch information
@maexled
maexled committed Jul 17, 2022
1 parent 4ed88d9 commit ce0ce41
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 53 deletions.
7 changes: 3 additions & 4 deletions mystrom/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/[email protected]/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/[email protected]/dist/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Expand Down
12 changes: 6 additions & 6 deletions mystrom/templates/device_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
29 changes: 14 additions & 15 deletions mystrom/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand All @@ -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');
}
}
})
Expand All @@ -73,23 +72,23 @@ <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;
}
}
}
})

// 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>
Expand Down
64 changes: 36 additions & 28 deletions mystrom/templates/results.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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: [{
Expand Down Expand Up @@ -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();

})
Expand Down

0 comments on commit ce0ce41

Please sign in to comment.