diff --git a/web/themes/colors/chargePointList.js b/web/themes/colors/chargePointList.js index 01c51ce13..1a6198173 100644 --- a/web/themes/colors/chargePointList.js +++ b/web/themes/colors/chargePointList.js @@ -25,6 +25,7 @@ class ChargePointList { // update if data has changed update() { + console.log(wbdata); this.updateValues(); this.table.selectAll("*").remove(); @@ -55,7 +56,7 @@ 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") @@ -63,12 +64,12 @@ class ChargePointList { .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() { @@ -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(); } } @@ -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(); diff --git a/web/themes/colors/powermeter.js b/web/themes/colors/powermeter.js index 005eb5d56..3a801134e 100644 --- a/web/themes/colors/powermeter.js +++ b/web/themes/colors/powermeter.js @@ -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) diff --git a/web/themes/colors/setupMqttServices.js b/web/themes/colors/setupMqttServices.js index 8d081f017..70864ed95 100644 --- a/web/themes/colors/setupMqttServices.js +++ b/web/themes/colors/setupMqttServices.js @@ -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); } }; diff --git a/web/themes/colors/smartHomeList.js b/web/themes/colors/smartHomeList.js index e79f52600..c2b92b741 100644 --- a/web/themes/colors/smartHomeList.js +++ b/web/themes/colors/smartHomeList.js @@ -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"); @@ -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) { @@ -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) } } diff --git a/web/themes/colors/style.css b/web/themes/colors/style.css index 22b9f8b23..7c043910b 100644 --- a/web/themes/colors/style.css +++ b/web/themes/colors/style.css @@ -10,7 +10,7 @@ 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; @@ -18,7 +18,9 @@ body { body > .container { padding: 55px 15px 0; } - +h3 { + color: black; +} body > .container-fluid { padding: 55px 15px 0; } @@ -102,6 +104,10 @@ body > .container-fluid { text-decoration: line-through; } +input[type=range]::-webkit-slider-runnable-track { + background: slategrey; + +} .text-green { color: #006515; } diff --git a/web/themes/colors/theme.html b/web/themes/colors/theme.html index 4f426bd38..92add7903 100644 --- a/web/themes/colors/theme.html +++ b/web/themes/colors/theme.html @@ -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>