Added power station table and reduced code size.

highcharts · May 20, 2024 · c702c5d · c702c5d
1 parent 9c39e27
commit c702c5d
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 59 deletions.
diff --git a/samples/dashboards/demo/mqtt/demo.css b/samples/dashboards/demo/mqtt/demo.css
@@ -444,7 +444,7 @@ div#connect-bar button:hover {
     text-align: justify;
 }
 
-#el-info table.intake {
+#el-info table.info-field {
     margin-top: 10px;
     background-color: var(--color-table-bg);
     width: 100%;
@@ -484,9 +484,14 @@ div#connect-bar button:hover {
         background-color: var(--color-table-td);
         color: var(--color-text);
     }
+
+    & td:first-of-type {
+        color: var(--color-table-caption);
+        text-transform: capitalize;
+    }
 }
 
-#el-info h3.intake {
+#el-info h3.info-field {
     padding: 10px;
     color: var(--color-custom);
     font-size: var(--text-font-size);

diff --git a/samples/dashboards/demo/mqtt/demo.js b/samples/dashboards/demo/mqtt/demo.js
@@ -332,7 +332,7 @@ async function dashboardCreate() {
     }
 
     // Datagrid displaying the history of generated power
-    // over the last 'n' hours. Latest measurement at the top.
+    // over the last 'n' hours.
     function createDatagridComponent(connId, pgIdx) {
         return {
             type: 'DataGrid',
@@ -484,34 +484,21 @@ async function dashboardsComponentUpdate(powerStationData) {
         return colHtml;
     }
 
-    function getIntakeHtml(powerStationData) {
-        if (powerStationData.intakes.length === 0) {
-            const str = lang.tr('No intakes');
-
-            return `<h3 class="intake">${str}</h3>`;
-        }
-
-        // Description
-        let html = '';
-        if (powerStationData.description !== null) {
-            html = `<span class="pw-descr">
-            ${powerStationData.description}</span>`;
-
-        }
-        const intake = lang.tr('intakes');
+    function createInfoTable(header, fields, data) {
+        const caption = lang.tr(header);
         const name = lang.tr('Name');
 
         // Fields to display
-        const fields = intakeConfig.infoFields;
+        // const fields = stationConfig.infoFields;
         let colHtml = getHeaderFields(fields);
         const colHtmlUnit = getUnitFields(fields);
 
-        html += `<table class="intake"><caption>${intake}</caption>
+        let html = `<table class="info-field"><caption>${caption}</caption>
             <tr><th>${name}</th>${colHtml}</tr>
             <tr class="unit"><th></th>${colHtmlUnit}</tr>`;
 
         // Populate fields
-        powerStationData.intakes.forEach(item => {
+        data.forEach(item => {
             const name = item.name.replace('_', ' ');
 
             colHtml = getDataFields(item, fields);
@@ -522,33 +509,40 @@ async function dashboardsComponentUpdate(powerStationData) {
         return html;
     }
 
-    function getReservoirHtml(data) {
-        if (data.reservoirs.length === 0) {
-            const str = lang.tr('No connected reservoirs');
-
-            return `<h3 class="intake">${str}</h3>`;
+    function createPowerStationTable(data) {
+        // Description
+        let html = '';
+        if (data.description !== null) {
+            html = `<span class="pw-descr">
+            ${data.description}</span>`;
         }
+        html += createInfoTable(
+            'Power station', stationConfig.infoFields, data.aggs
+        );
+        return html;
+    }
 
-        // Fields to display in table
-        const fields = reservoirConfig.infoFields;
-        let colHtml = getHeaderFields(fields);
-        const colHtmlUnit = getUnitFields(fields);
-        const name = lang.tr('Name');
-        const res = lang.tr('reservoirs');
+    function createIntakeTable(data) {
+        if (data.intakes.length === 0) {
+            const str = lang.tr('No intakes');
 
-        let html = `<table class="intake"><caption>${res}</caption>
-            <tr><th>${name}</th>${colHtml}</tr>
-            <tr class="unit"><th></th>${colHtmlUnit}</tr>`;
+            return `<h3 class="info-field">${str}</h3>`;
+        }
+        return createInfoTable(
+            'intakes', intakeConfig.infoFields, data.intakes
+        );
+    }
 
-        // Populate fields
-        data.reservoirs.forEach(item => {
-            colHtml = getDataFields(item, fields);
+    function createReservoirTable(data) {
+        if (data.reservoirs.length === 0) {
+            const str = lang.tr('No connected reservoirs');
 
-            html += `<tr><td>${item.name}</td>${colHtml}</tr>`;
-        });
-        html += '</table>';
+            return `<h3 class="info-field">${str}</h3>`;
+        }
 
-        return html;
+        return createInfoTable(
+            'reservoirs', reservoirConfig.infoFields, data.reservoirs
+        );
     }
 
     async function addIntakeMarkers(mapComp, data) {
@@ -629,33 +623,32 @@ async function dashboardsComponentUpdate(powerStationData) {
     }
 
     async function updateInfoHtml(data) {
-        // Information
-        const stationName = data.name;
-
+        // Component title
         const infoComp = getComponent(dashboard, 'el-info');
         await infoComp.update({
-            title: stationName
+            title: data.name
         });
 
-        const intakeHtml = getIntakeHtml(data);
-        const reservoirHtml = getReservoirHtml(data);
-
-        const el = document.querySelector(
-            'div#el-info .highcharts-dashboards-component-content'
-        );
-
+        // Location info
         let posInfo = '';
         if (data.location) {
-            const location = data.location;
-            posInfo = `${location.lon} (lon.), ${location.lat} (lat.)`;
+            const loc = data.location;
+            posInfo = `${loc.lon} (lon.), ${loc.lat} (lat.)`;
         }
 
+        // Information tables
+        const powerStHtml = createPowerStationTable(data);
+        const intakeHtml = createIntakeTable(data);
+        const reservoirHtml = createReservoirTable(data);
+
+        // Render HTML
+        const el = document.querySelector(
+            'div#el-info .highcharts-dashboards-component-content'
+        );
         el.innerHTML = `<div id="info-container">
     <h3>${posInfo}</h3>
-    ${intakeHtml}
-    ${reservoirHtml}
-    </div>
-    `;
+    ${powerStHtml}${intakeHtml}${reservoirHtml}
+    </div>`;
 
     }