Skip to content

Commit

Permalink
Error corrections
Browse files Browse the repository at this point in the history
  • Loading branch information
claus committed Jan 18, 2021
1 parent 1f1b619 commit e25bdda
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 99 deletions.
54 changes: 28 additions & 26 deletions web/themes/colors/chargePointList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ class ChargePointList {

// update if data has changed
update() {
console.log(wbdata);
this.updateValues();
this.table.selectAll("*").remove();

Expand Down Expand Up @@ -55,20 +56,20 @@ class ChargePointList {
.data(row => [
formatWatt(row.power) + " " + this.phaseSymbols[row.phasesInUse] + " " + row.targetCurrent + " A",
row.energy + " kWh / " + Math.round(row.energy / row.energyPer100km * 1000) / 10 + " km"
// row.soc + " %"
// row.soc + " %"
]).enter()
.append("td")
.attr("class", "tablecell px-1 py-1")
.attr("style", "vertical-align:middle;")
.text(data => data);
rows.append((row, i) => this.cpSocButtonCell(row, i));



// for debugging only
/* var body = d3.select("body");
this.footer
.text("Page Width:" + body.style("width")); */
/* var body = d3.select("body");
this.footer
.text("Page Width:" + body.style("width")); */
}

updateValues() {
Expand Down Expand Up @@ -112,26 +113,27 @@ class ChargePointList {
return cell.node();
}

cpSocButtonCell (row, index) {
cpSocButtonCell(row, index) {

const cell = d3.create("td")
.attr("class", "tablecell px-1 py-1")
.style("text-align", "center")
.style("vertical-align", "middle");

cell.text (row.soc + " %");
cell.append ("span").text(" ");
const button = cell
.append("button")
.attr("class", "btn btn-sm btn-outline-info px-2 pt-0 mt-0 pb-1")
.style("text-align", "center")
.style("vertical-align", "middle")
// .style("color", row.color)
.attr("onClick", (row, i) => ("socButtonClicked(" + i + ")"))
button.append("i")
.attr("class", "small reloadLpSoc fas fa-redo-alt")
.attr ("id", "soclabel-" + index)
;

if (row.isSocConfigured) {
cell.text(row.soc + " %");
cell.append("span").text(" ");
const button = cell
.append("button")
.attr("class", "btn btn-sm btn-outline-info px-2 pt-0 mt-0 pb-1")
.style("text-align", "center")
.style("vertical-align", "middle")
// .style("color", row.color)
.attr("onClick", (row, i) => ("socButtonClicked(" + i + ")"))
button.append("i")
.attr("class", "small reloadLpSoc fas fa-redo-alt")
.attr("id", "soclabel-" + index)
;
}
return cell.node();
}
}
Expand All @@ -148,8 +150,8 @@ function lpButtonClicked(i) {

function socButtonClicked(i) {
publish("1", "openWB/set/lp/" + (+i + 1) + "/ForceSoCUpdate");
d3.select ("i#soclabel-" + i)
.classed ("fa-spin", true)
d3.select("i#soclabel-" + i)
.classed("fa-spin", true)
}
var chargePointList = new ChargePointList();

var chargePointList = new ChargePointList();
21 changes: 11 additions & 10 deletions web/themes/colors/powermeter.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,16 +67,17 @@ class PowerMeter {
.style("font-size", "24")
;

svg.append("text")
.attr("x", 0)
.attr("y", 0)

.text("SOC (" + wbdata.chargePoint[0].name + "): " + (wbdata.chargePoint[0].soc) + " %")
.attr("fill", this.chargeColor)
.attr("backgroundcolor", this.bgColor)
.style("text-anchor", "middle")
.style("font-size", "24");

if (wbdata.chargePoint[0].isSocConfigured) {
svg.append("text")
.attr("x", 0)
.attr("y", 0)

.text("SOC (" + wbdata.chargePoint[0].name + "): " + (wbdata.chargePoint[0].soc) + " %")
.attr("fill", this.chargeColor)
.attr("backgroundcolor", this.bgColor)
.style("text-anchor", "middle")
.style("font-size", "24");
}
svg.append("text")
.attr("x", 0)
.attr("y", this.height / 8)
Expand Down
2 changes: 1 addition & 1 deletion web/themes/colors/setupMqttServices.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -371,7 +371,7 @@ var options = {
},
//Gets Called if the connection could not be established
onFailure: function (message) {
setTimeout(function() { client.conect(options); }, 5000);
setTimeout(function() { client.connect(options); }, 5000);
}
};

Expand Down
126 changes: 67 additions & 59 deletions web/themes/colors/smartHomeList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,70 +5,78 @@

class SmartHomeList {

div;

constructor() {
var consumers = [];
};

// initialize after document is created
init() { }
init() {
this.div = d3.select("div#smartHomeTable");
}

// update if data has changed
update() {

this.updateValues();
const table = d3.select("table#smartHomeTable");
table.selectAll("*").remove();

table.attr("class", "table table-borderless table-condensed p-0 m-0");
// table.attr("style", "border-spacing:0;")

const headers = ["Gerät", "Verbrauch", "Laufzeit", "Modus"];
const thead = table.append("thead")
.selectAll("headers")
.data(headers).enter()
.append("th")
.attr("style", "color:white;text-align:center;")
.attr("class", "tablecell ")
.text((data) => data)
;

const rows = table.append("tbody").selectAll("rows")
.data(this.consumers).enter()
.append("tr")
.attr("style", row => this.calcColor(row));

rows.append("td")
.attr("class", "tablecell py-1 px-1")
.append("button")
.attr ("id", (row,i) => "shbutton-" + i)
.attr("class", row => this.deviceClass(row))
.attr("style", row => this.calcColor(row))
.attr("onClick", (row, i) => "shDeviceClicked(" + i + ")")
.classed ("disabled", (row => (row.isAutomatic)))
.text(row => row.name);

rows.append("td")
.attr("class", "tablecell py-1 px-1")
.attr("style", "vertical-align: middle;")
.text(row => formatWatt(row.power) + " (" + row.energy + " kWh)",);



rows.append("td")
.attr("class", "tablecell py-1 px-1")
.attr("style", "vertical-align: middle;")
.text(row => formatTime(row.runningTime))

rows.append("td")
.attr("class", "tablecell py-1 px-1")
.append("button")
.attr ("id", (row,i) => "shmodebutton-" + i)
.attr("class", row => this.modeClass(row))
.attr("style", row => this.calcColor(row))
.attr("onClick", (row, i) => "shModeClicked(" + i + ")")
.classed ("disabled", false)
.text(row => row.isAutomatic ? "Automatik" : "Manuell");

this.div.selectAll("*").remove();

if (this.consumers.length > 0) {
var table = this.div.append("table")
.attr("class", "table table-borderless table-condensed p-0 m-0");
// table.attr("style", "border-spacing:0;")

const headers = ["Gerät", "Verbrauch", "Laufzeit", "Modus"];
const thead = table.append("thead")
.selectAll("headers")
.data(headers).enter()
.append("th")
.attr("style", "color:white;text-align:center;")
.attr("class", "tablecell ")
.text((data) => data)
;

const rows = table.append("tbody").selectAll("rows")
.data(this.consumers).enter()
.append("tr")
.attr("style", row => this.calcColor(row));

rows.append("td")
.attr("class", "tablecell py-1 px-1")
.append("button")
.attr("id", (row, i) => "shbutton-" + i)
.attr("class", row => this.deviceClass(row))
.attr("style", row => this.calcColor(row))
.attr("onClick", (row, i) => "shDeviceClicked(" + i + ")")
.classed("disabled", (row => (row.isAutomatic)))
.text(row => row.name);

rows.append("td")
.attr("class", "tablecell py-1 px-1")
.attr("style", "vertical-align: middle;")
.text(row => formatWatt(row.power) + " (" + row.energy + " kWh)",);

rows.append("td")
.attr("class", "tablecell py-1 px-1")
.attr("style", "vertical-align: middle;")
.text(row => formatTime(row.runningTime))

rows.append("td")
.attr("class", "tablecell py-1 px-1")
.append("button")
.attr("id", (row, i) => "shmodebutton-" + i)
.attr("class", row => this.modeClass(row))
.attr("style", row => this.calcColor(row))
.attr("onClick", (row, i) => "shModeClicked(" + i + ")")
.classed("disabled", false)
.text(row => row.isAutomatic ? "Automatik" : "Manuell");
}
else {
this.div.append("h4")
.attr("class", "tablecell text-white pt-3")
.attr("style", "text-align:center; vertical-align:middle;")
.text("Es sind keine Geräte konfiguriert");
}
}
calcColor(row) {
return ("color:" + row.color + "; text-align:center");
Expand Down Expand Up @@ -97,8 +105,8 @@ function shModeClicked(i) {
} else {
publish("0", "openWB/config/set/SmartHome/Devices/" + (+i + 1) + "/mode");
}
d3.select ("button#shmodebutton-" + i)
.classed ("disabled", true);
d3.select("button#shmodebutton-" + i)
.classed("disabled", true);
};

function shDeviceClicked(i) {
Expand All @@ -108,8 +116,8 @@ function shDeviceClicked(i) {
} else {
publish("1", "openWB/config/set/SmartHome/Device" + (+i + 1) + "/device_manual_control");
}
d3.select ("button#shbutton-" + i)
.classed ("disabled", true)
d3.select("button#shbutton-" + i)
.classed("disabled", true)
}
}

Expand Down
10 changes: 8 additions & 2 deletions web/themes/colors/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,17 @@ html{
}

body {
color: black;
color: lightgrey;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
/* Old browsers */
background: white;
}
body > .container {
padding: 55px 15px 0;
}

h3 {
color: black;
}
body > .container-fluid {
padding: 55px 15px 0;
}
Expand Down Expand Up @@ -102,6 +104,10 @@ body > .container-fluid {
text-decoration: line-through;
}

input[type=range]::-webkit-slider-runnable-track {
background: slategrey;

}
.text-green {
color: #006515;
}
Expand Down
2 changes: 1 addition & 1 deletion web/themes/colors/theme.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ <h3 class="mt-0">Ladepunkte</h3>
<div class="col-md-6 p-1 m-0">
<h3>Geräte</h3>
<div class="wb-widget pb-3 ">
<table id="smartHomeTable"></table>
<div id="smartHomeTable"></div>
</div>
</div>
</div>
Expand Down

0 comments on commit e25bdda

Please sign in to comment.