html_confMqtt.h 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. /* clang-format off */
  2. static const char html_confmqtt_script[] PROGMEM = R"=====(
  3. <script>
  4. function g(i) { return document.getElementById(i) };
  5. function sp(i){g(i).type=(g(i).type==='text'?'password':'text');}
  6. var xhttp, reqTime, reqFin;
  7. function setCbx(el, da) {
  8. if(da == '1') {
  9. el.checked = true;
  10. el.style.visibility = 'visible';
  11. }
  12. else {
  13. el.checked = false;
  14. el.style.visibility = 'visible';
  15. }
  16. }
  17. function updCbxVal(el) {
  18. if (el.checked) el.value = '1';
  19. else {
  20. el.checked = true;
  21. el.value = '0';
  22. el.style.visibility = 'hidden';
  23. }
  24. }
  25. function transmit(f) {
  26. if (!xhttp) {
  27. reqTime = 0;
  28. reqFin = false;
  29. updCbxVal(g('mqttEnable'));
  30. updCbxVal(g('outRet'));
  31. updCbxVal(g('outRetSens'));
  32. updCbxVal(g('willRet'));
  33. updCbxVal(g('hbEnable'));
  34. xhttp = new XMLHttpRequest();
  35. xhttp.timeout = 1000;
  36. xhttp.overrideMimeType('application/json');
  37. xhttp.open('POST', 'confDataMqtt');
  38. xhttp.send(f ? (new FormData(f)) : '');
  39. xhttp.onreadystatechange = function () {
  40. if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
  41. var data = JSON.parse(xhttp.responseText);
  42. setCbx(g('mqttEnable'), data.mqttEnable);
  43. g('mqttHost').value = data.mqttHost;
  44. g('mqttPort').value = data.mqttPort;
  45. g('mqttUser').value = data.mqttUser;
  46. g('mqttPass').value = data.mqttPass;
  47. g('inTop').value = data.inTop;
  48. g('outTop').value = data.outTop;
  49. g('willTop').value = data.willTop;
  50. g('willQos').value = data.willQos;
  51. setCbx(g('outRet'), data.outRet);
  52. setCbx(g('outRetSens'), data.outRetSens);
  53. g('outPubInt').value = data.outPubInt;
  54. g('outPubIntSens').value = data.outPubIntSens;
  55. setCbx(g('willRet'), data.willRet);
  56. g('willMsg').value = data.willMsg;
  57. g('connMsg').value = data.connMsg;
  58. setCbx(g('hbEnable'), data.hbEnable);
  59. g('hbReconn').value = data.hbReconn;
  60. g('hbReboot').value = data.hbReboot;
  61. xhttp = null;
  62. reqFin = true;
  63. }
  64. else {
  65. if(!reqFin && reqTime > 10) {
  66. xhttp = null;
  67. reqFin = true;
  68. }
  69. }
  70. }
  71. }
  72. return false;
  73. }
  74. //transmit();
  75. function saveConf() {
  76. updCbxVal(g('mqttEnable'));
  77. updCbxVal(g('outRet'));
  78. updCbxVal(g('outRetSens'));
  79. updCbxVal(g('willRet'));
  80. updCbxVal(g('hbEnable'));
  81. g('frmConf').submit();
  82. }
  83. function init() {
  84. transmit();
  85. setCbx(g('mqttPassSet'), 0);
  86. }
  87. setInterval(function () { ++reqTime; }, 1000);
  88. </script>
  89. )====="; // html_confmqtt_script
  90. static const char html_confmqtt_body[] PROGMEM = R"=====(
  91. <b>Configuration - MQTT</b>
  92. <div class='config'>
  93. <form id='frmConf' action='setConfMqtt' method='POST'>
  94. <br>
  95. <p><b>Enable MQTT *</b>&nbsp;<input type='checkbox' name='mqttEnable' id='mqttEnable'></p>
  96. <fieldset>
  97. <legend>Broker Connection</legend>
  98. <p><b>Hostname *</b><br><input type='text' name='mqttHost' id='mqttHost'></p>
  99. <p><b>Port *</b><br><input type='number' name='mqttPort' id='mqttPort'></p>
  100. <p><b>User *</b><br><input type='text' name='mqttUser' id='mqttUser'></p>
  101. <p><b>Password *</b><input type='checkbox' id='mqttPassSet' name='mqttPassSet' onclick='sp("mqttPass")'><br><input type='password' name='mqttPass' id='mqttPass'></p>
  102. </fieldset>
  103. <br>
  104. <fieldset>
  105. <legend>Last Will</legend>
  106. <p><b>Topic *</b><br><input type='text' name='willTop' id='willTop'></p>
  107. <p><b>Qos *</b><br><select name='willQos' id='willQos'><option>0</option><option>1</option><option selected='selected'>2</option></select></p>
  108. <p><b>Retain-Flag *</b>&nbsp;<input type='checkbox' name='willRet' id='willRet'></p>
  109. <p><b>Last Will Message *</b><br><input type='text' name='willMsg' id='willMsg'></p>
  110. <p><b>Connect Message *</b><br><input type='text' name='connMsg' id='connMsg'></p>
  111. </fieldset>
  112. <br>
  113. <fieldset>
  114. <legend>Base Topics</legend>
  115. <p><b>Base In-Topic *</b><br><input type='text' name='inTop' id='inTop'></p>
  116. <p class='n'>* Sub-Topics like cmd... are added automatically.</p>
  117. <div></div>
  118. <p><b>Out/State-Topic **</b><br><input type='text' name='outTop' id='outTop'></p>
  119. <p class='n'>** default output topic. Sub-Topics are added automatically.</p>
  120. <p><b>Retain (States) *</b>&nbsp;<input type='checkbox' name='outRet' id='outRet'></p>
  121. <p><b>Retain (Sensors) *</b>&nbsp;<input type='checkbox' name='outRetSens' id='outRetSens'></p>
  122. <p class='n'>* If Retain is enabled, data is only sent on change, <br>
  123. otherwise in intervals additionally. <br>
  124. Intervals can also be switched off without retain. <br>
  125. Just set them to 0 to disable.</p>
  126. <p><b>Interval States **</b><br><input type='number' name='outPubInt' id='outPubInt'></p>
  127. <p><b>Interval Sensors **</b><br><input type='number' name='outPubIntSens' id='outPubIntSens'></p>
  128. <p class='n'>** 0 to disable</p>
  129. </fieldset>
  130. <br>
  131. <fieldset>
  132. <legend>Heartbeat</legend>
  133. <p><b>Enable Heartbeat *</b>&nbsp;<input type='checkbox' name='hbEnable' id='hbEnable'></p>
  134. <div></div><div></div>
  135. <p class='n'>on missing Heartbeat:</p>
  136. <p><b>Reconnect after [min]</b><br><input type='text' name='hbReconn' id='hbReconn'></p>
  137. <p><b>Reboot after [min]</b><br><input type='text' name='hbReboot' id='hbReboot'></p>
  138. </fieldset>
  139. <div></div>
  140. </form>
  141. <div></div>
  142. <table style='width:100%'>
  143. <td style='width:50%'><button onclick='location="conf";' class='bgrey'>Cancel</button></td>
  144. <td style='width:50%'><button onclick='return saveConf()' class='bred'>Save</button></td>
  145. </tr></table>
  146. </div>
  147. )====="; // html_confmqtt_body