jeka/OTGateway
1
0
Fork 0
mirror of https://github.com/Laxilef/OTGateway.git synced 2025-12-10 18:24:27 +05:00
Code Issues Packages Projects Releases Wiki Activity

feat: display sensor values on dashboard page

Browse Source
This commit is contained in:
Yurii
2024-12-01 05:26:14 +03:00
parent 222ea4feaa
commit 1bb9b61017
16 changed files with 347 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src_data/fonts/iconly.eot
View File

Binary file not shown.

18
src_data/fonts/iconly.svg
View File

@@ -49,6 +49,12 @@
<glyph glyph-name="wifi-strength-2-1"
unicode="&#x77;&#x69;&#x66;&#x69;&#x5F;&#x73;&#x74;&#x72;&#x65;&#x6E;&#x67;&#x74;&#x68;&#x5F;&#x32;"
horiz-adv-x="1022.9733303792667" d="M511.4866651896334 768.1283337025917C332.0397604864727 768.1283337025917 157.7087214326013 708.0286505428097 16.1967447318741 597.6324456402496C187.9713494571903 381.9559014844185 336.3024823621839 198.2472739029395 511.4866651896334 -20.4132754656288C685.3921313541088 196.1154134663874 862.7071756207173 416.9078232715078 1008.0553023103668 597.6324456402497C866.1177527202434 708.0286505428097 691.3591427821901 768.1283337025917 511.4866651896334 768.1283337025917M511.4866651896334 682.8808891701171C642.3423366997788 682.8808891701171 771.0661477733722 646.2236788332648 882.7410693389065 578.4516956956384L745.9183864006797 408.8089514068742C693.0644313319532 438.2194346552781 612.505281564586 469.7607793428413 511.4866651896334 469.7607793428413C410.0414769278917 469.7607793428413 329.9088990473136 437.7928627684892 277.0549439785871 408.8089514068743L139.3801162641751 578.8782675824273C251.9071826058945 646.6502507200537 380.6309936794878 682.8808891701171 511.4866651896334 682.8808891701171z" />
<glyph glyph-name="error"
unicode="&#xE007;"
horiz-adv-x="1024" d="M512 810.667C747.605 810.667 938.667 619.605 938.667 384C938.667 148.395 747.6049999999999 -42.6669999999999 511.9999999999999 -42.6669999999999C276.395 -42.6669999999999 85.333 148.3950000000001 85.333 384.0000000000001C85.333 619.605 276.395 810.667 512 810.667zM512 725.333C323.7970000000001 725.333 170.667 572.203 170.667 384C170.667 195.797 323.797 42.6669999999999 512 42.6669999999999C700.203 42.6669999999999 853.3330000000001 195.7969999999999 853.3330000000001 384C853.3330000000001 572.203 700.2030000000001 725.3330000000001 512 725.3330000000001zM609.835 542.165L670.1650000000001 481.835L572.33 384L670.1650000000001 286.165L609.835 225.8349999999999L512 323.67L414.165 225.8349999999999L353.8350000000001 286.165L451.67 384L353.8350000000001 481.835L414.165 542.165L512 444.33L609.835 542.165z" />
<glyph glyph-name="error-1"
unicode="&#x65;&#x72;&#x72;&#x6F;&#x72;"
horiz-adv-x="1024" d="M512 810.667C747.605 810.667 938.667 619.605 938.667 384C938.667 148.395 747.6049999999999 -42.6669999999999 511.9999999999999 -42.6669999999999C276.395 -42.6669999999999 85.333 148.3950000000001 85.333 384.0000000000001C85.333 619.605 276.395 810.667 512 810.667zM512 725.333C323.7970000000001 725.333 170.667 572.203 170.667 384C170.667 195.797 323.797 42.6669999999999 512 42.6669999999999C700.203 42.6669999999999 853.3330000000001 195.7969999999999 853.3330000000001 384C853.3330000000001 572.203 700.2030000000001 725.3330000000001 512 725.3330000000001zM609.835 542.165L670.1650000000001 481.835L572.33 384L670.1650000000001 286.165L609.835 225.8349999999999L512 323.67L414.165 225.8349999999999L353.8350000000001 286.165L451.67 384L353.8350000000001 481.835L414.165 542.165L512 444.33L609.835 542.165z" />
<glyph glyph-name="wifi-strength-3"
unicode="&#xE008;"
horiz-adv-x="1022.9733303792667" d="M511.4866651896334 768.1283337025917C332.0397604864727 768.1283337025917 157.7087214326013 708.0286505428097 16.1967447318741 597.6324456402496C187.9713494571903 381.9559014844185 336.3024823621839 198.2472739029395 511.4866651896334 -20.4132754656288C685.3921313541088 196.1154134663874 862.7071756207173 416.9078232715078 1008.0553023103668 597.6324456402497C866.1177527202434 708.0286505428097 691.3591427821901 768.1283337025917 511.4866651896334 768.1283337025917M511.4866651896334 682.8808891701171C642.3423366997788 682.8808891701171 771.0661477733722 646.2236788332648 882.7410693389065 578.4516956956384L800.0500591349871 474.8756459947375C735.688653096887 512.385001107775 634.2434648351453 555.0092228727087 511.4866651896334 555.0092228727087C383.614998892225 555.0092228727087 284.7272439564316 512.385001107775 222.0701274707015 476.5809345445006L139.3801162641751 578.8782675824273C251.9071826058945 646.6502507200537 380.6309936794878 682.8808891701171 511.4866651896334 682.8808891701171z" />
@@ -67,12 +73,24 @@
<glyph glyph-name="wifi-strength-4-1"
unicode="&#x77;&#x69;&#x66;&#x69;&#x5F;&#x73;&#x74;&#x72;&#x65;&#x6E;&#x67;&#x74;&#x68;&#x5F;&#x34;"
horiz-adv-x="1022.9733303792667" d="M511.4866651896334 768.1283337025917C332.0397604864727 768.1283337025917 157.7087214326013 708.0286505428097 16.1967447318741 597.6324456402496C187.9713494571903 381.9559014844185 336.3024823621839 198.2472739029395 511.4866651896334 -20.4132754656288C685.3921313541088 196.1154134663874 862.7071756207173 416.9078232715078 1008.0553023103668 597.6324456402497C866.1177527202434 708.0286505428097 691.3591427821901 768.1283337025917 511.4866651896334 768.1283337025917z" />
<glyph glyph-name="success"
unicode="&#xE00B;"
horiz-adv-x="1024" d="M512 810.667C276.36 810.667 85.333 619.64 85.333 384C85.333 148.36 276.3590000000001 -42.6669999999999 512 -42.6669999999999C747.64 -42.6669999999999 938.667 148.3590000000002 938.667 384.0000000000001C938.667 619.64 747.64 810.667 512 810.667zM512 42.667C323.79 42.667 170.667 195.789 170.667 384.0000000000001C170.667 572.21 323.789 725.3330000000001 512 725.3330000000001C700.21 725.3330000000001 853.3330000000001 572.211 853.3330000000001 384.0000000000001C853.3330000000001 195.7900000000001 700.211 42.667 512 42.667zM672.672 536.437L733.005 476.104L469.333 211.328L311.167 369.495L371.5 429.828L469.333 331.995L672.673 536.438z" />
<glyph glyph-name="success-1"
unicode="&#x73;&#x75;&#x63;&#x63;&#x65;&#x73;&#x73;"
horiz-adv-x="1024" d="M512 810.667C276.36 810.667 85.333 619.64 85.333 384C85.333 148.36 276.3590000000001 -42.6669999999999 512 -42.6669999999999C747.64 -42.6669999999999 938.667 148.3590000000002 938.667 384.0000000000001C938.667 619.64 747.64 810.667 512 810.667zM512 42.667C323.79 42.667 170.667 195.789 170.667 384.0000000000001C170.667 572.21 323.789 725.3330000000001 512 725.3330000000001C700.21 725.3330000000001 853.3330000000001 572.211 853.3330000000001 384.0000000000001C853.3330000000001 195.7900000000001 700.211 42.667 512 42.667zM672.672 536.437L733.005 476.104L469.333 211.328L311.167 369.495L371.5 429.828L469.333 331.995L672.673 536.438z" />
<glyph glyph-name="up"
unicode="&#xE00C;"
horiz-adv-x="893.7641930109211" d="M69.6258266430383 317.8562626928574L25.3366188643721 362.1454704715236C6.5835308860179 380.8985584498777 6.5835308860179 411.2227007127483 25.3366188643721 429.7762877551625L412.9669373956711 817.6021172036826C431.7200253740253 836.3552051820368 462.0441676368958 836.3552051820368 480.59775467931 817.6021172036826L868.2280732106092 429.9717986723836C886.9811611889633 411.2187106940295 886.9811611889633 380.894568431159 868.2280732106092 362.3409813887447L823.938865431943 318.0517736100786C804.9862765176489 299.0991846957845 774.0636314469585 299.4981865676644 755.5100444045443 318.8497773538383L526.6824708814356 559.0528942442421V-14.3127956471388C526.6824708814356 -40.8464201271506 505.3358707358623 -62.1930202727239 478.8022462558506 -62.1930202727239H414.9619467550705C388.4283222750588 -62.1930202727239 367.0817221294855 -40.8464201271506 367.0817221294855 -14.3127956471388V559.0528942442422L138.0546476704369 318.6542664366173C119.5010606280227 299.1031747145034 88.5784155573324 298.7041728426234 69.6258266430383 317.8562626928575z" />
<glyph glyph-name="up-1"
unicode="&#x75;&#x70;"
horiz-adv-x="893.7641930109211" d="M69.6258266430383 317.8562626928574L25.3366188643721 362.1454704715236C6.5835308860179 380.8985584498777 6.5835308860179 411.2227007127483 25.3366188643721 429.7762877551625L412.9669373956711 817.6021172036826C431.7200253740253 836.3552051820368 462.0441676368958 836.3552051820368 480.59775467931 817.6021172036826L868.2280732106092 429.9717986723836C886.9811611889633 411.2187106940295 886.9811611889633 380.894568431159 868.2280732106092 362.3409813887447L823.938865431943 318.0517736100786C804.9862765176489 299.0991846957845 774.0636314469585 299.4981865676644 755.5100444045443 318.8497773538383L526.6824708814356 559.0528942442421V-14.3127956471388C526.6824708814356 -40.8464201271506 505.3358707358623 -62.1930202727239 478.8022462558506 -62.1930202727239H414.9619467550705C388.4283222750588 -62.1930202727239 367.0817221294855 -40.8464201271506 367.0817221294855 -14.3127956471388V559.0528942442422L138.0546476704369 318.6542664366173C119.5010606280227 299.1031747145034 88.5784155573324 298.7041728426234 69.6258266430383 317.8562626928575z" />
<glyph glyph-name="alarm"
unicode="&#xE00D;"
horiz-adv-x="1024" d="M512 810.667C747.22 810.667 938.667 619.22 938.667 384C938.667 148.78 747.2199999999999 -42.6669999999999 511.9999999999999 -42.6669999999999C276.78 -42.667 85.333 148.78 85.333 384C85.333 619.22 276.78 810.667 512 810.667zM512 725.333C323.082 725.333 170.667 572.918 170.667 384C170.667 195.082 323.082 42.6669999999999 512 42.6669999999999C700.918 42.6669999999999 853.3330000000001 195.0819999999999 853.3330000000001 384C853.3330000000001 572.918 700.9180000000001 725.3330000000001 512 725.3330000000001zM512 266.581C542.476 266.581 565.333 244.054 565.333 213.3340000000001S542.476 160.085 512 160.085C480.83 160.085 458.667 182.6130000000001 458.667 214.015C458.667 244.053 481.524 266.581 512 266.581zM554.667 640V341.3330000000001H469.333V640H554.667z" />
<glyph glyph-name="alarm-1"
unicode="&#x61;&#x6C;&#x61;&#x72;&#x6D;"
horiz-adv-x="1024" d="M512 810.667C747.22 810.667 938.667 619.22 938.667 384C938.667 148.78 747.2199999999999 -42.6669999999999 511.9999999999999 -42.6669999999999C276.78 -42.667 85.333 148.78 85.333 384C85.333 619.22 276.78 810.667 512 810.667zM512 725.333C323.082 725.333 170.667 572.918 170.667 384C170.667 195.082 323.082 42.6669999999999 512 42.6669999999999C700.918 42.6669999999999 853.3330000000001 195.0819999999999 853.3330000000001 384C853.3330000000001 572.918 700.9180000000001 725.3330000000001 512 725.3330000000001zM512 266.581C542.476 266.581 565.333 244.054 565.333 213.3340000000001S542.476 160.085 512 160.085C480.83 160.085 458.667 182.6130000000001 458.667 214.015C458.667 244.053 481.524 266.581 512 266.581zM554.667 640V341.3330000000001H469.333V640H554.667z" />
</font>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
src_data/fonts/iconly.ttf
View File

Binary file not shown.

BIN
src_data/fonts/iconly.woff
View File

Binary file not shown.

BIN
src_data/fonts/iconly.woff2
View File

Binary file not shown.

9
src_data/locales/en.json
View File

@@ -117,6 +117,15 @@
"mDhwTargetTemp": "DHW target temp",
"mDhwCurrTemp": "DHW current temp",
"mDhwRetTemp": "DHW return temp"
},
"sensors": {
"values": {
"temp": "Temperature",
"humidity": "Humidity",
"battery": "Battery",
"rssi": "RSSI"
}
}
},

9
src_data/locales/ru.json
View File

@@ -117,6 +117,15 @@
"mDhwTargetTemp": "ГВС, целевая температура",
"mDhwCurrTemp": "ГВС, текущая температура",
"mDhwRetTemp": "ГВС, температура обратки"
},
"sensors": {
"values": {
"temp": "Температура",
"humidity": "Влажность",
"battery": "Уровень заряда",
"rssi": "RSSI"
}
}
},

183
src_data/pages/dashboard.html
View File

@@ -11,12 +11,13 @@
<header class="container">
<nav>
<ul>
<li><a href="/">
<li>
<a href="/">
<div class="logo" data-i18n>logo</div>
</a></li>
</a>
</li>
</ul>
<ul>
<!--<li><a href="https://github.com/Laxilef/OTGateway/wiki" role="button" class="secondary" target="_blank">Help</a></li>-->
<li>
<select id="lang" aria-label="Lang">
<option value="en" selected>EN</option>
@@ -80,43 +81,43 @@
<tbody>
<tr>
<th scope="row" data-i18n>dashboard.states.mNetworkConnected</th>
<td><input type="radio" class="mNetworkConnected" aria-invalid="false" checked disabled /></td>
<td><i class="mNetworkConnected"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.mMqttConnected</th>
<td><input type="radio" class="mMqttConnected" aria-invalid="false" checked disabled /></td>
<td><i class="mMqttConnected"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.mEmergencyState</th>
<td><input type="radio" class="mEmergencyState" aria-invalid="false" checked disabled /></td>
<td><i class="mEmergencyState"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.mExtPumpState</th>
<td><input type="radio" class="mExtPumpState" aria-invalid="false" checked disabled /></td>
<td><i class="mExtPumpState"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.mCascadeControlInput</th>
<td><input type="radio" id="mCascadeControlInput" aria-invalid="false" checked disabled /></td>
<td><i class="mCascadeControlInput"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.mCascadeControlOutput</th>
<td><input type="radio" id="mCascadeControlOutput" aria-invalid="false" checked disabled /></td>
<td><i class="mCascadeControlOutput"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.sConnected</th>
<td><input type="radio" class="sConnected" aria-invalid="false" checked disabled /></td>
<td><i class="sConnected"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.sFlame</th>
<td><input type="radio" class="sFlame" aria-invalid="false" checked disabled /></td>
<td><i class="sFlame"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.sFaultActive</th>
<td><input type="radio" class="sFaultActive" aria-invalid="false" checked disabled /></td>
<td><i class="sFaultActive"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.sFaultCode</th>
@@ -124,7 +125,7 @@
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.sDiagActive</th>
<td><input type="radio" class="sDiagActive" aria-invalid="false" checked disabled /></td>
<td><i class="sDiagActive"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.sDiagCode</th>
@@ -134,15 +135,15 @@
<tr>
<th scope="row" data-i18n>dashboard.states.mHeatEnabled</th>
<td><input type="radio" class="mHeatEnabled" aria-invalid="false" checked disabled /></td>
<td><i class="mHeatEnabled"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.mHeatBlocking</th>
<td><input type="radio" class="mHeatBlocking" aria-invalid="false" checked disabled /></td>
<td><i class="mHeatBlocking"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.sHeatActive</th>
<td><input type="radio" class="sHeatActive" aria-invalid="false" checked disabled /></td>
<td><i class="sHeatActive"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.mHeatTargetTemp</th>
@@ -172,11 +173,11 @@
<tr>
<th scope="row" data-i18n>dashboard.states.mDhwEnabled</th>
<td><input type="radio" class="mDhwEnabled" aria-invalid="false" checked disabled /></td>
<td><i class="mDhwEnabled"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.sDhwActive</th>
<td><input type="radio" class="sDhwActive" aria-invalid="false" checked disabled /></td>
<td><i class="sDhwActive"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>dashboard.states.mDhwTargetTemp</th>
@@ -196,6 +197,25 @@
<hr />
<details>
<summary><b data-i18n>dashboard.section.sensors</b></summary>
<table>
<tbody class="sensors">
<tr class="sensor template hidden">
<td style="width: 1.35rem">
<span class="sStatusContainer">
<i class="sStatus"></i>
</span>
</td>
<th scope="row" class="sName"></th>
<td class="sValue"></td>
</tr>
</tbody>
</table>
</details>
<hr />
<details>
<summary><b data-i18n>dashboard.section.diag</b></summary>
<pre><b>Vendor:</b> <span class="sVendor"></span>
@@ -335,6 +355,8 @@
});
setTimeout(async function onLoadPage() {
let unitSystem = null;
if (modifiedTime) {
if ((Date.now() - modifiedTime) < 5000) {
setTimeout(onLoadPage, 1000);
@@ -372,6 +394,7 @@
const result = await response.json();
noRegulators = !result.opentherm.nativeHeatingControl && !result.equitherm.enabled && !result.pid.enabled;
prevSettings = result;
unitSystem = result.system.unitSystem;
newSettings.heating.enabled = result.heating.enabled;
newSettings.heating.turbo = result.heating.turbo;
newSettings.heating.target = result.heating.target;
@@ -391,9 +414,9 @@
setCheckboxValue('#tDhwEnabled', result.dhw.enabled);
setValue('#tDhwTargetTemp', result.dhw.target);
setValue('.tempUnit', temperatureUnit(result.system.unitSystem));
setValue('.pressureUnit', pressureUnit(result.system.unitSystem));
setValue('.volumeUnit', volumeUnit(result.system.unitSystem));
setValue('.tempUnit', temperatureUnit(unitSystem));
setValue('.pressureUnit', pressureUnit(unitSystem));
setValue('.volumeUnit', volumeUnit(unitSystem));
} catch (error) {
console.log(error);
@@ -424,7 +447,11 @@
setValue('.sAppVersion', result.slave.appVersion);
setValue('.sProtocolVersion', result.slave.protocolVersion);
setState('.sConnected', result.slave.connected);
setStatus(
'.sConnected',
result.slave.connected ? "success" : "error",
result.slave.connected ? "green" : "red"
);
setState('.sFlame', result.slave.flame);
setValue('.sModMin', result.slave.modulation.min);
@@ -441,26 +468,38 @@
setValue('.sDhwMinTemp', result.slave.dhw.minTemp);
setValue('.sDhwMaxTemp', result.slave.dhw.maxTemp);
setState('.sFaultActive', result.slave.fault.active);
setStatus(
'.sFaultActive',
result.slave.fault.active ? "success" : "error",
result.slave.fault.active ? "red" : "green"
);
setValue(
'.sFaultCode',
result.slave.fault.active
? (result.slave.fault.code + " (0x" + dec2hex(result.slave.fault.code) + ")")
? `${result.slave.fault.code} (0x${dec2hex(result.slave.fault.code)})`
: "-"
);
setState('.sDiagActive', result.slave.diag.active);
setStatus(
'.sDiagActive',
result.slave.diag.active ? "success" : "error",
result.slave.diag.active ? "red" : "green"
);
setValue(
'.sDiagCode',
result.slave.diag.active
? (result.slave.diag.code + " (0x" + dec2hex(result.slave.diag.code) + ")")
? `${result.slave.diag.code} (0x${dec2hex(result.slave.diag.code)})`
: "-"
);
// MASTER
setState('.mHeatEnabled', result.master.heating.enabled);
setState('.mHeatBlocking', result.master.heating.blocking);
setStatus(
'.mHeatBlocking',
result.master.heating.blocking ? "success" : "error",
result.master.heating.blocking ? "red" : "green"
);
setState('.mHeatIndoorTempControl', result.master.heating.indoorTempControl);
setValue('.mHeatSetpointTemp', result.master.heating.setpointTemp);
setValue('.mHeatTargetTemp', result.master.heating.targetTemp);
@@ -478,9 +517,17 @@
setValue('.mDhwMinTemp', result.master.dhw.minTemp);
setValue('.mDhwMaxTemp', result.master.dhw.maxTemp);
setState('.mNetworkConnected', result.master.network.connected);
setStatus(
'.mNetworkConnected',
result.master.network.connected ? "success" : "error",
result.master.network.connected ? "green" : "red"
);
setState('.mMqttConnected', result.master.mqtt.connected);
setState('.mEmergencyState', result.master.emergency.state);
setStatus(
'.mEmergencyState',
result.master.emergency.state ? "success" : "error",
result.master.emergency.state ? "red" : "green"
);
setState('.mExtPumpState', result.master.externalPump.state);
setState('.mCascadeControlInput', result.master.cascadeControl.input);
setState('.mCascadeControlOutput', result.master.cascadeControl.output);
@@ -491,6 +538,84 @@
console.log(error);
}
// sensors
try {
const response = await fetch("/api/sensors?detailed=1", { cache: "no-cache" });
if (!response.ok) {
throw new Error("Response not valid");
}
const container = document.querySelector(".sensors");
const templateNode = container.querySelector(".template");
const result = await response.json();
for (const sensorId in result) {
let sensorNode = container.querySelector(`.sensor[data-id='${sensorId}']`);
if (sensorNode) {
continue;
}
sensorNode = templateNode.cloneNode(true);
sensorNode.dataset.id = sensorId;
sensorNode.classList.remove("template");
container.appendChild(sensorNode);
}
for (const sensorId in result) {
const sensorNode = container.querySelector(`.sensor[data-id='${sensorId}']`);
if (!sensorNode) {
continue;
}
const sData = result[sensorId];
if (sData.purpose == 255) {
sensorNode.classList.add("hidden");
continue;
}
sensorNode.classList.remove("hidden");
setStatus(
".sStatus",
sData.connected ? "success" : "error",
sData.connected ? "green" : "red",
sensorNode
);
setValue(".sName", sData.name, sensorNode);
setValue(".sValue", "", sensorNode);
const statusNode = sensorNode.querySelector(`.sStatusContainer`);
if (statusNode) {
statusNode.dataset.tooltip = `${sData.signalQuality}%`;
}
if (sData.value !== undefined) {
const sUnit = purposeUnit(sData.purpose, unitSystem);
appendValue(".sValue", `<b>${sData.value.toFixed(2)}</b> ${sUnit !== null ? sUnit : ``}`, `<br />`, sensorNode);
}
if (sData.temperature !== undefined) {
const sUnit = temperatureUnit(unitSystem);
appendValue(".sValue", `${i18n('dashboard.sensors.values.temp')}: <b>${sData.temperature.toFixed(2)}</b> ${sUnit !== null ? sUnit : ``}`, `<br />`, sensorNode);
}
if (sData.humidity !== undefined) {
appendValue(".sValue", `${i18n('dashboard.sensors.values.humidity')}: <b>${sData.humidity.toFixed(2)}</b> %`, `<br />`, sensorNode);
}
if (sData.battery !== undefined) {
appendValue(".sValue", `${i18n('dashboard.sensors.values.battery')}: <b>${sData.battery.toFixed(2)}</b> %`, `<br />`, sensorNode);
}
if (sData.rssi !== undefined) {
appendValue(".sValue", `${i18n('dashboard.sensors.values.rssi')}: <b>${sData.rssi.toFixed(0)}</b> ${i18n('dbm')}`, `<br />`, sensorNode);
}
}
} catch (error) {
console.log(error);
}
setTimeout(onLoadPage, 10000);
}, 1000);
});

15
src_data/pages/index.html
View File

@@ -11,12 +11,13 @@
<header class="container">
<nav>
<ul>
<li><a href="/">
<li>
<a href="/">
<div class="logo" data-i18n>logo</div>
</a></li>
</a>
</li>
</ul>
<ul>
<!--<li><a href="https://github.com/Laxilef/OTGateway/wiki" role="button" class="secondary" target="_blank">Help</a></li>-->
<li>
<select id="lang" aria-label="Lang">
<option value="en" selected>EN</option>
@@ -48,7 +49,7 @@
</tr>
<tr>
<th scope="row" data-i18n>network.wifi.connected</th>
<td><input type="radio" id="network-connected" aria-invalid="false" checked disabled /></td>
<td><i id="network-connected"></i></td>
</tr>
<tr>
<th scope="row" data-i18n>network.wifi.ssid</th>
@@ -184,7 +185,11 @@
setValue('#network-hostname', result.network.hostname);
setValue('#network-mac', result.network.mac);
setState('#network-connected', result.network.connected);
setStatus(
'#network-connected',
result.network.connected ? "success" : "error",
result.network.connected ? "green" : "red"
);
setValue('#network-ssid', result.network.ssid);
setValue('#network-signal', result.network.signalQuality);
setValue('#network-ip', result.network.ip);

7
src_data/pages/network.html
View File

@@ -11,12 +11,13 @@
<header class="container">
<nav>
<ul>
<li><a href="/">
<li>
<a href="/">
<div class="logo" data-i18n>logo</div>
</a></li>
</a>
</li>
</ul>
<ul>
<!--<li><a href="https://github.com/Laxilef/OTGateway/wiki" role="button" class="secondary" target="_blank">Help</a></li>-->
<li>
<select id="lang" aria-label="Lang">
<option value="en" selected>EN</option>

9
src_data/pages/sensors.html
View File

@@ -11,12 +11,13 @@
<header class="container">
<nav>
<ul>
<li><a href="/">
<li>
<a href="/">
<div class="logo" data-i18n>logo</div>
</a></li>
</a>
</li>
</ul>
<ul>
<!--<li><a href="https://github.com/Laxilef/OTGateway/wiki" role="button" class="secondary" target="_blank">Help</a></li>-->
<li>
<select id="lang" aria-label="Lang">
<option value="en" selected>EN</option>
@@ -300,7 +301,7 @@
}
});
setupForm(".sensor[data-id='" + sensorId + "'] form", fillData, ['address']);
setupForm(`.sensor[data-id='${sensorId}'] form`, fillData, ['address']);
}
} catch (error) {

7
src_data/pages/settings.html
View File

@@ -11,12 +11,13 @@
<header class="container">
<nav>
<ul>
<li><a href="/">
<li>
<a href="/">
<div class="logo" data-i18n>logo</div>
</a></li>
</a>
</li>
</ul>
<ul>
<!--<li><a href="https://github.com/Laxilef/OTGateway/wiki" role="button" class="secondary" target="_blank">Help</a></li>-->
<li>
<select id="lang" aria-label="Lang">
<option value="en" selected>EN</option>

7
src_data/pages/upgrade.html
View File

@@ -11,12 +11,13 @@
<header class="container">
<nav>
<ul>
<li><a href="/">
<li>
<a href="/">
<div class="logo" data-i18n>logo</div>
</a></li>
</a>
</li>
</ul>
<ul>
<!--<li><a href="https://github.com/Laxilef/OTGateway/wiki" role="button" class="secondary" target="_blank">Help</a></li>-->
<li>
<select id="lang" aria-label="Lang">
<option value="en" selected>EN</option>

109
src_data/scripts/utils.js
View File

@@ -143,8 +143,8 @@ const setupNetworkScanForm = (formSelector, tableSelector) => {
input.focus();
};
row.insertCell().textContent = "#" + (i + 1);
row.insertCell().innerHTML = result[i].hidden ? ("<i>" + result[i].bssid + "</i>") : result[i].ssid;
row.insertCell().textContent = `#${i + 1}`;
row.insertCell().innerHTML = result[i].hidden ? `<i>${result[i].bssid}</i>` : result[i].ssid;
// info cell
let infoCell = row.insertCell();
@@ -164,7 +164,7 @@ const setupNetworkScanForm = (formSelector, tableSelector) => {
}
let signalQualityContainer = document.createElement("span");
signalQualityContainer.setAttribute('data-tooltip', result[i].signalQuality + "%");
signalQualityContainer.setAttribute('data-tooltip', `${result[i].signalQuality}%`);
signalQualityContainer.appendChild(signalQualityIcon);
infoCell.appendChild(signalQualityContainer);
@@ -427,7 +427,7 @@ const setupUpgradeForm = (formSelector) => {
resItem.classList.add('failed');
if (result.firmware.error != "") {
resItem.textContent += ": " + result.firmware.error;
resItem.textContent += `: ${result.firmware.error}`;
}
}
}
@@ -445,7 +445,7 @@ const setupUpgradeForm = (formSelector) => {
resItem.classList.add('failed');
if (result.filesystem.error != "") {
resItem.textContent += ": " + result.filesystem.error;
resItem.textContent += `: ${result.filesystem.error}`;
}
}
}
@@ -526,8 +526,8 @@ const setBusy = (busySelector, contentSelector, value, parent = undefined) => {
}
}
const setState = (selector, value, parent = undefined) => {
if (parent == undefined) {
const setAriaState = (selector, value, parent = undefined) => {
if (parent === undefined) {
parent = document;
}
@@ -539,8 +539,40 @@ const setState = (selector, value, parent = undefined) => {
item.setAttribute('aria-invalid', !value);
}
const setStatus = (selector, state, color = undefined, parent = undefined) => {
if (parent === undefined) {
parent = document;
}
let item = parent.querySelector(selector);
if (!item) {
return;
}
item.classList.forEach(cName => {
if (cName.indexOf("icons-") === 0) {
item.classList.remove(cName);
}
});
item.classList.add(`icons-${state}`);
if (color !== undefined) {
item.classList.add(`icons-color-${color}`);
}
}
const setState = (selector, state, parent = undefined) => {
return setStatus(
selector,
state ? "success" : "error",
state ? "green" : "gray",
parent
);
}
const setValue = (selector, value, parent = undefined) => {
if (parent == undefined) {
if (parent === undefined) {
parent = document;
}
@@ -554,8 +586,32 @@ const setValue = (selector, value, parent = undefined) => {
}
}
const appendValue = (selector, value, nl = null, parent = undefined) => {
if (parent === undefined) {
parent = document;
}
let items = parent.querySelectorAll(selector);
if (!items.length) {
return;
}
for (let item of items) {
if (item.innerHTML.trim().length > 0) {
if (nl !== null) {
item.innerHTML += nl;
}
item.innerHTML += value;
} else {
item.innerHTML = value;
}
}
}
const setCheckboxValue = (selector, value, parent = undefined) => {
if (parent == undefined) {
if (parent === undefined) {
parent = document;
}
@@ -568,7 +624,7 @@ const setCheckboxValue = (selector, value, parent = undefined) => {
}
const setRadioValue = (selector, value, parent = undefined) => {
if (parent == undefined) {
if (parent === undefined) {
parent = document;
}
@@ -583,7 +639,7 @@ const setRadioValue = (selector, value, parent = undefined) => {
}
const setInputValue = (selector, value, attrs = {}, parent = undefined) => {
if (parent == undefined) {
if (parent === undefined) {
parent = document;
}
@@ -604,7 +660,7 @@ const setInputValue = (selector, value, attrs = {}, parent = undefined) => {
}
const setSelectValue = (selector, value, parent = undefined) => {
if (parent == undefined) {
if (parent === undefined) {
parent = document;
}
@@ -619,7 +675,7 @@ const setSelectValue = (selector, value, parent = undefined) => {
}
const show = (selector, parent = undefined) => {
if (parent == undefined) {
if (parent === undefined) {
parent = document;
}
@@ -636,7 +692,7 @@ const show = (selector, parent = undefined) => {
}
const hide = (selector, parent = undefined) => {
if (parent == undefined) {
if (parent === undefined) {
parent = document;
}
@@ -679,6 +735,29 @@ const volumeUnit = (unitSystem) => {
});
}
const purposeUnit = (purpose, unitSystem) => {
const tUnit = temperatureUnit(unitSystem);
return unit2str(purpose, {
0: tUnit,
1: tUnit,
2: tUnit,
3: tUnit,
4: tUnit,
5: tUnit,
6: `${volumeUnit(unitSystem)}/${i18n('time.min')}`,
7: tUnit,
8: "%",
248: "%",
249: i18n('kw'),
250: "RPM",
251: "ppm",
252: pressureUnit(unitSystem),
253: "%",
254: tUnit
}, null);
}
const memberIdToVendor = (memberId) => {
// https://github.com/Jeroen88/EasyOpenTherm/blob/main/src/EasyOpenTherm.h
// https://github.com/Evgen2/SmartTherm/blob/v0.7/src/Web.cpp
@@ -757,7 +836,7 @@ function form2json(data, noCastItems = []) {
function dec2hex(i) {
let hex = parseInt(i).toString(16);
if (hex.length % 2 != 0) {
hex = "0" + hex;
hex = `0${hex}`;
}
return hex.toUpperCase();

23
src_data/styles/app.css
View File

@@ -59,7 +59,7 @@ footer {
/*nav li a:has(> div.logo) {
margin-bottom: 0;
}*/
nav li :where(a,[role=link]) {
nav li :where(a, [role=link]) {
margin: 0;
}
@@ -71,6 +71,11 @@ pre {
padding: 0.5rem;
}
:nth-last-child(1 of table tr:not(.hidden)) th,
:nth-last-child(1 of table tr:not(.hidden)) td {
border-bottom: 0 !important;
}
.hidden {
display: none !important;
@@ -200,4 +205,20 @@ tr.network:hover {
[data-tooltip]:has(> [class*=" icons-"], > [class=icons], > [class^=icons-]) {
border: 0 !important;
}
.icons-color-green {
color: var(--pico-form-element-valid-active-border-color);
}
.icons-color-yellow {
color: #c89048;
}
.icons-color-gray {
color: var(--pico-form-element-placeholder-color);
}
.icons-color-red {
color: var(--pico-form-element-invalid-active-border-color);
}

16
src_data/styles/iconly.css
View File

@@ -7,8 +7,8 @@
font-family: "Icons";
font-style: normal;
font-weight: 400;
src: url("/static/fonts/iconly.eot?1718563596894");
src: url("/static/fonts/iconly.eot?#iefix") format("embedded-opentype"), url("/static/fonts/iconly.woff2?1718563596894") format("woff2"), url("/static/fonts/iconly.woff?1718563596894") format("woff"), url("/static/fonts/iconly.ttf?1718563596894") format("truetype"), url("/static/fonts/iconly.svg?1718563596894#Icons") format("svg");
src: url("/static/fonts/iconly.eot?1732913937966");
src: url("/static/fonts/iconly.eot?#iefix") format("embedded-opentype"), url("/static/fonts/iconly.woff2?1732913937966") format("woff2"), url("/static/fonts/iconly.woff?1732913937966") format("woff"), url("/static/fonts/iconly.ttf?1732913937966") format("truetype"), url("/static/fonts/iconly.svg?1732913937966#Icons") format("svg");
}
[class="icons"], [class^="icons-"], [class*=" icons-"] {
@@ -51,6 +51,10 @@
content: "\e006";
}
.icons-error:before {
content: "\e007";
}
.icons-wifi-strength-3:before {
content: "\e008";
}
@@ -63,6 +67,14 @@
content: "\e00a";
}
.icons-success:before {
content: "\e00b";
}
.icons-up:before {
content: "\e00c";
}
.icons-alarm:before {
content: "\e00d";
}