latest data of product details arranged in table

public/i18n/de.json

@@ -3,7 +3,7 @@
         "datafield_ERR": "Fehler",
         "datafield_FW": "Firmwareversion",
         "datafield_FWE": "Firmwareversion",
-        "datafield_H19": "Gesamtertrag seit letztem Reset",
+        "datafield_H19": "Gesamtertrag",
         "datafield_H20": "Ertrag aktuellster Tag",
         "datafield_H21": "max. Leistung aktuellster Tag",
         "datafield_H22": "Ertrag Vortag",

public/i18n/en.json

@@ -3,7 +3,7 @@
 	"datafield_ERR": "error",
 	"datafield_FW": "firmware version",
 	"datafield_FWE": "firmware version",
-	"datafield_H19": "total yield since last reset",
+	"datafield_H19": "total yield",
 	"datafield_H20": "yield latest day",
 	"datafield_H21": "max. power latest day",
 	"datafield_H22": "yield yesterday",

public/main.css

@@ -28,9 +28,13 @@ img { float: left; padding: 0px; margin: 0px; margin-right: 5px; }
 .mainView {  min-width: 600px; background-color: #660; margin: 5px; flex-grow: 1; }
 
 .productImageSmall { height: 50px; }
-.productList { width: 300px; overflow: auto; background-color: #00a; margin: 5px; }
+.productList { min-width: 300px; overflow: auto; background-color: #00a; margin: 5px; }
+.productListItem { min-height: 50px; }
 .padding { padding: 5px; }
 
+.right { text-align: right; }
+
 table { border-collapse: collapse; border-width: 0px; }
+td { padding-left: 0px; padding-right: 10px; }
 
 [id^="li"] { cursor: pointer;  }

public/main.js

@@ -151,6 +151,7 @@ function renderDeviceList() {
 		let classStyle = (i % 2) ? 'bright' : 'dark'
 
 		let block = document.createElement('div')
+		block.classList.add('productListItem')
 		block.classList.add('padding')
 		block.classList.add(classStyle)
 		block.id = 'li' + devices[i]
@@ -218,26 +219,39 @@ function showDeviceData() {
 	//parse latest datapoint regarding system power, system voltage, solar power, solar voltage
 	let latestDataSet = deviceDataSet[latestYear][latestMonth][latestDay][latestTimestamp]
 	let latestPowerData = document.createElement('table')
-	if(latestDataSet['PPV'])
+
-		latestPowerData.innerHTML += '<tr><td>' + i18n[lang]['datafield_PPV'] + ': ' + latestDataSet['PPV'] + 'W' + '</td></tr>'
+	//solar panel data
-	if(latestDataSet['VPV'])
+	latestPowerData.innerHTML += '<tr><td></td><td></td><td class="right">' + 
-		latestPowerData.innerHTML += '<tr><td>' + i18n[lang]['datafield_VPV'] + ': ' + parseInt(latestDataSet['VPV']) / 1000 + 'V' + '</td></tr>'
+		i18n[lang]['datafield_VPV'] + ':</td><td>' + ( (latestDataSet['VPV']) ? parseInt(latestDataSet['VPV']) / 1000 : '---' ) + 'V' +
-	if(latestDataSet['V'])
+		'</td><td class="right">' + 
-		latestPowerData.innerHTML += '<tr><td>' + i18n[lang]['datafield_V'] + ': ' + parseInt(latestDataSet['V']) / 1000 + 'V' + '</td></tr>'
+		i18n[lang]['datafield_PPV'] + ':</td><td>' + ( (latestDataSet['PPV']) ? latestDataSet['PPV'] : '---' ) + 'W' +
-	if(latestDataSet['I'])
+		'</td></tr>'
-		latestPowerData.innerHTML += '<tr><td>' + i18n[lang]['datafield_I'] + ': ' + parseInt(latestDataSet['I']) / 1000 + 'A' + '</td></tr>'
+
-	if(latestDataSet['P'])
+	//battery / channel 1 data
-		latestPowerData.innerHTML += '<tr><td>' + i18n[lang]['datafield_P'] + ': ' + latestDataSet['P'] + 'W' + '</td></tr>'
+	latestPowerData.innerHTML += '<tr><td class="right">' + 
-	if(latestDataSet['H20'])
+		i18n[lang]['datafield_I'] + ':</td><td>' + ( (latestDataSet['I']) ? parseInt(latestDataSet['I']) / 1000 : '---' ) + 'A' +
-		latestPowerData.innerHTML += '<tr><td>' + i18n[lang]['datafield_H20'] + ': ' + parseInt(latestDataSet['H20']) * 0.01 + 'kWh' + '</td></tr>'
+		'</td><td class="right">' +
-	if(latestDataSet['H22'])
+		i18n[lang]['datafield_V'] + ':</td><td>' + ( (latestDataSet['V']) ? parseInt(latestDataSet['V']) / 1000  : '---' ) + 'V' +
-		latestPowerData.innerHTML += '<tr><td>' + i18n[lang]['datafield_H22'] + ': ' + parseInt(latestDataSet['H22']) / 100 + 'kWh' + '</td></tr>'
+		'</td><td class="right">' +
-	if(latestDataSet['H19'])
+		 i18n[lang]['datafield_P'] + ':</td><td>' + ( (latestDataSet['P']) ? latestDataSet['P'] : ( ( latestDataSet['I'] && latestDataSet['V'] ) ?  parseInt(latestDataSet['I']) * parseInt(latestDataSet['V']) /1000000 : '---' ) ) + 'W' +
-		latestPowerData.innerHTML += '<tr><td>' + i18n[lang]['datafield_H19'] + ': ' + parseInt(latestDataSet['H19']) / 100 + 'kWh' + '</td></tr>'
+		'</td></tr>'
-	if(latestDataSet['H21'])
+
-		latestPowerData.innerHTML += '<tr><td>' + i18n[lang]['datafield_H21'] + ': ' + parseInt(latestDataSet['H21']) + 'W' + '</td></tr>'
+	//yield data
-	if(latestDataSet['H23'])
+	latestPowerData.innerHTML += '<tr><td class="right">' +
-		latestPowerData.innerHTML += '<tr><td>' + i18n[lang]['datafield_H23'] + ': ' + parseInt(latestDataSet['H23']) + 'W' + '</td></tr>'
+		i18n[lang]['datafield_H20'] + ':</td><td>' + ( (latestDataSet['H20']) ? parseInt(latestDataSet['H20']) * 0.01 : '---' ) + 'kWh' +
+		'</td><td class="right">' +
+		i18n[lang]['datafield_H22'] + ':</td><td>' + ( (latestDataSet['H22']) ? parseInt(latestDataSet['H22']) / 100 : '---' ) + 'kWh' +
+		'</td><td class="right">' +
+		i18n[lang]['datafield_H19'] + ':</td><td>' + ( ( latestDataSet['H19'] ) ? parseInt(latestDataSet['H19']) / 100 : '---' ) + 'kWh' +
+		'</td></tr>'
+
+	//power data
+	latestPowerData.innerHTML += '<tr><td class="right">' +
+		i18n[lang]['datafield_H21'] + ':</td><td>' + parseInt(latestDataSet['H21']) + 'W' +
+		'</td><td class="right">' +
+		i18n[lang]['datafield_H23'] + ':</td><td> ' + parseInt(latestDataSet['H23']) + 'W' +
+		'</td></tr>'
+
 
 	document.getElementById('deviceDetails').appendChild(latestPowerData)
 }