Skip to content

Commit 828ae5f

Browse files
script0803script0803
committed
update UI
1 parent 3384c59 commit 828ae5f

File tree

1 file changed

+81
-41
lines changed

1 file changed

+81
-41
lines changed

‎custom_components/bituopmd/www/bituo_panel.js‎

Lines changed: 81 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -225,24 +225,25 @@ class BituoPanel extends HTMLElement {
225225
<h3>Device Setting</h3>
226226
<div class="button-group">
227227
<button id="zero-energy">Zero Energy</button>
228-
<button id="erase-factory">Erase Factory</button>
228+
<button id="erase-factory">Reset Device</button>
229229
<button id="restart">Restart</button>
230230
<button id="ota">OTA</button>
231231
</div>
232-
<label for="report-frequency" class="mqtt-report-frequency-label">MQTT Report Frequency (seconds):</label>
232+
<label for="report-frequency" class="mqtt-report-frequency-label">MQTT Report Interval (seconds):</label>
233233
<input id="report-frequency" type="number" min="1" />
234-
<button id="set-report-frequency">Set Report Frequency</button>
234+
<button id="set-report-frequency">Set Report Interval</button>
235235
</div>
236236
${this.getPostActionsHtml()}
237237
<div class="panel">
238-
<h3>Data Request Frequency</h3>
239-
<label for="data-frequency">Frequency (seconds):</label>
240-
<input id="data-frequency" type="number" min="1"/><br />
238+
<h3>Polling Interval (5-3600s)</h3>
239+
<label for="data-frequency">Interval (seconds):</label>
240+
<input id="data-frequency" type="number" min="5" max="3600"/><br /> <!-- 限制值为 5 到 3600 -->
241+
<small style="color: #555;">Notice: If you have paired multiple devices, it is recommended to increase the polling interval to avoid excessive network load.(default=10s)</small><br />
241242
<div class="checkbox-container">
242243
<input id="apply-to-all" type="checkbox">
243244
<label for="apply-to-all">Apply to all devices</label>
244245
</div>
245-
<button id="set-data-frequency">Set Data Request Frequency</button>
246+
<button id="set-data-frequency">Set Polling Interval</button> <!-- 按钮文本也可相应修改 -->
246247
</div>
247248
</div>
248249
</div>
@@ -294,9 +295,6 @@ class BituoPanel extends HTMLElement {
294295
{ id: '#restart', getConfig: () => ({ configType: "restart", EspRestart: "true" }) },
295296
{ id: '#erase-factory', getConfig: () => ({ configType: "erase", EraseMessage: "true" }) },
296297
{ id: '#set-report-frequency', getConfig: () => ({ configType: "report", ReportFrequency: parseInt(this.querySelector('#report-frequency').value) }) },
297-
{ id: '#set-baudrate', getConfig: this.getBaudRateConfig },
298-
{ id: '#set-parity-stop', getConfig: this.getParityStopConfig },
299-
{ id: '#set-modbus-address', getConfig: this.getModbusAddressConfig },
300298
{ id: '#set-topic', getConfig: this.getTopicConfig },
301299
{ id: '#set-udp', getConfig: this.getUdpConfig }
302300
];
@@ -331,6 +329,49 @@ class BituoPanel extends HTMLElement {
331329
this.hideOtaOverlay();
332330
});
333331
}
332+
333+
const setModbusButton = this.querySelector('#set-modbus');
334+
if (setModbusButton) {
335+
setModbusButton.addEventListener('click', async () => {
336+
this.showConfirmationDialog('Are you sure you want to set Modbus configuration?', async () => {
337+
const config = this.getModbusConfig();
338+
339+
// Validate Modbus address
340+
const modbusAddress = parseInt(config.Modbusaddress, 10);
341+
if (isNaN(modbusAddress) || modbusAddress < 1 || modbusAddress > 247) {
342+
this.showAlert('Modbus address must be between 1 and 247.');
343+
this.hideOtaOverlay();
344+
return; // Stop execution if invalid address
345+
}
346+
347+
this.showOtaOverlay();
348+
349+
try {
350+
// Send all Modbus POST requests in sequence
351+
await Promise.all([
352+
this.performPostAction('save-config', {
353+
configType: 'baudrate',
354+
baudrate: config.baudrate
355+
}),
356+
this.performPostAction('save-config', {
357+
configType: 'ParityStop',
358+
ParityStop: config.ParityStop
359+
}),
360+
this.performPostAction('save-config', {
361+
configType: 'Modbusaddress',
362+
Modbusaddress: config.Modbusaddress
363+
})
364+
]);
365+
366+
this.showAlert('Modbus configuration set successfully.');
367+
} catch (error) {
368+
this.showAlert(`Error: ${error.message}`);
369+
} finally {
370+
this.hideOtaOverlay();
371+
}
372+
});
373+
});
374+
}
334375
}
335376

336377
showConfirmationDialog(message, onConfirm) {
@@ -355,6 +396,12 @@ class BituoPanel extends HTMLElement {
355396

356397
async setDataRequestFrequency() {
357398
const frequency = parseInt(this.querySelector('#data-frequency').value);
399+
400+
if (isNaN(frequency) || frequency < 5 || frequency > 3600) {
401+
this.showAlert('Polling Interval must be between 5 and 3600 seconds.');
402+
this.hideOtaOverlay();
403+
return;
404+
}
358405
const applyToAll = this.querySelector('#apply-to-all').checked;
359406

360407
if (applyToAll) {
@@ -364,7 +411,11 @@ class BituoPanel extends HTMLElement {
364411
// 逐个发送请求，确保每个设备的设置被正确更新
365412
for (const option of options) {
366413
const deviceIp = option.value;
367-
await this.updateDeviceFrequency(deviceIp, frequency);
414+
try {
415+
await this.updateDeviceFrequency(deviceIp, frequency);
416+
} catch (error) {
417+
this.showAlert(`Error updating frequency for device ${deviceIp}: ${error.message}`);
418+
}
368419
}
369420
} else {
370421
const { deviceIp } = this.getSelectedDevice();
@@ -374,7 +425,7 @@ class BituoPanel extends HTMLElement {
374425
}
375426
await this.updateDeviceFrequency(deviceIp, frequency);
376427
}
377-
this.showAlert(`Data request frequency set successfully.`);
428+
this.showAlert(`Polling Interval set successfully.`);
378429
}
379430

380431
async updateDeviceFrequency(deviceIp, frequency) {
@@ -481,27 +532,29 @@ class BituoPanel extends HTMLElement {
481532
<button id="upload-ca-cert">Upload CA Certificate</button>
482533
</div>
483534
<div class="panel">
484-
<h3>Modbus Configuration</h3>
485-
<label for="baudrate">Baudrate:</label>
535+
<h3>Modbus Configuration(Optional)</h3>
536+
537+
<label for="baudrate">Baud Rate:</label>
486538
<select id="baudrate">
487539
<option value="2400">2400</option>
488540
<option value="4800">4800</option>
489541
<option value="9600">9600</option>
490542
<option value="19200">19200</option>
491543
<option value="38400">38400</option>
492544
</select><br />
493-
<button id="set-baudrate">Set Baudrate</button><br />
494-
<label for="parity-stop">Parity/Stop:</label>
545+
546+
<label for="parity-stop">Data Format:</label>
495547
<select id="parity-stop">
496548
<option value="N81">N81</option>
497549
<option value="E81">E81</option>
498550
<option value="O81">O81</option>
499551
<option value="N82">N82</option>
500552
</select><br />
501-
<button id="set-parity-stop">Set Parity/Stop</button><br />
502-
<label for="modbus-address">Modbus Address:</label>
553+
554+
<label for="modbus-address">Address (1-247):</label>
503555
<input id="modbus-address" type="number" min="1" max="247"/><br />
504-
<button id="set-modbus-address">Set Modbus Address</button>
556+
557+
<button id="set-modbus">Set Modbus Configuration</button>
505558
</div>
506559
<div class="panel">
507560
<h3>Topic Configuration</h3>
@@ -521,7 +574,7 @@ class BituoPanel extends HTMLElement {
521574
<input id="udp-ip" type="text" /><br />
522575
<label for="udp-port">Local UDP Port:</label>
523576
<input id="udp-port" type="number" /><br />
524-
<label for="udp-frequency">Frequency (seconds):</label>
577+
<label for="udp-frequency">Reporting interval (seconds):</label>
525578
<input id="udp-frequency" type="number" min="1000"/><br />
526579
<button id="set-udp">Set UDP</button>
527580
</div>
@@ -573,7 +626,6 @@ class BituoPanel extends HTMLElement {
573626

574627
} else {
575628
const response = await this._hass.callApi('POST', `bituopmd/proxy/${deviceIp}/${action}`, body);
576-
this.showAlert(`Response: ${JSON.stringify(response)}`);
577629
}
578630
} catch (error) {
579631
this.showAlert(`Error: ${error.message}`);
@@ -667,26 +719,14 @@ class BituoPanel extends HTMLElement {
667719
}
668720
}
669721

670-
getBaudRateConfig() {
671-
return {
672-
configType: 'baudrate',
673-
baudrate: this.querySelector('#baudrate').value.trim()
674-
};
675-
}
676-
677-
getParityStopConfig() {
678-
return {
679-
configType: 'ParityStop',
680-
ParityStop: this.querySelector('#parity-stop').value.trim()
681-
};
682-
}
683-
684-
getModbusAddressConfig() {
685-
return {
686-
configType: 'Modbusaddress',
687-
Modbusaddress: this.querySelector('#modbus-address').value.trim()
688-
};
689-
}
722+
getModbusConfig() {
723+
return {
724+
configType: 'modbus',
725+
baudrate: this.querySelector('#baudrate').value.trim(),
726+
ParityStop: this.querySelector('#parity-stop').value.trim(),
727+
Modbusaddress: this.querySelector('#modbus-address').value.trim()
728+
};
729+
}
690730

691731
getTopicConfig() {
692732
return {

0 commit comments

Comments
 (0)