WiFiThermostat/src/WiFiThermostat/html_redTemps.ino

static const char html_redTemps_script[] PROGMEM = R"=====(
<script>
  function g(i) { return document.getElementById(i) };
  var xhttp, updateTime, reqTime, reqFin;
  function sendBtn(btn, conf) {
  var frmn='BtnFrm'+btn;
  var form = g(frmn);
  if(conf !== undefined) {
  if(confirm(conf)) return transmit(form);
    else return false;
    }
    else return transmit(form);
  }
  function transmit(f) {
    if (!xhttp) { 
      reqTime = 0;
      reqFin = false;
      xhttp = new XMLHttpRequest();
      xhttp.timeout = 1000;
      xhttp.overrideMimeType("application/json");
      xhttp.open('POST', 'api');
      xhttp.send(f ? (new FormData(f)) : '');
      xhttp.onreadystatechange = function () {
        if (xhttp.readyState === XMLHttpRequest.DONE && xhttp.status === 200) {
          var data = JSON.parse(xhttp.responseText);
          if(data.tempLow !== undefined) g('tempLow').innerHTML = data.tempLow.toFixed(1) + '&deg;';
          if(data.tempLow2 !== undefined) g('tempLow2').innerHTML = data.tempLow2.toFixed(1) + '&deg;';
          xhttp = null;
          updateTime = 0;
          reqFin = true;
          }
        else {
          if(!reqFin && reqTime > 10) {
            xhttp = null;
            reqFin = true;
          }
        }
      }
    }
    return false;
  }
  function init() {
    transmit();
  }
  setInterval(transmit, 2500);
</script>
)====="; // html_redTemps_script

static const char html_redTemps_body[] PROGMEM = R"=====(
<p><b>Reduction 1 - Temperature</b></p>
<div id='tempLow' style='text-align:center;font-weight:bold;font-size:40px'></div>
<div></div>
<table style='width:100%'><tr>
<td style='width:50%'><form id='BtnFrmL1Minus'><input type='hidden' name='BtnL1Minus' value='1'><button onclick='return sendBtn("L1Minus")'>-</button></form></td>
<td style='width:50%'><form id='BtnFrmL1Plus'><input type='hidden' name='BtnL1Plus' value='1'><button onclick='return sendBtn("L1Plus")'>+</button></form></td>
</tr></table>

<p><b>Reduction 2 - Temperature</b></p>
<div id='tempLow2' style='text-align:center;font-weight:bold;font-size:40px'></div>
<div></div>
<table style='width:100%'><tr>
<td style='width:50%'><form id='BtnFrmL2Minus'><input type='hidden' name='BtnL2Minus' value='1'><button onclick='return sendBtn("L2Minus")'>-</button></form></td>
<td style='width:50%'><form id='BtnFrmL2Plus'><input type='hidden' name='BtnL2Plus' value='1'><button onclick='return sendBtn("L2Plus")'>+</button></form></td>
</tr></table>

<div></div>
<table style='width:100%'><tr>
<td style='width:100%'><form action='.' method='get'><button class='bgrey'>Main Menu</button></form></td>
</tr></table>

)====="; // html_redTemps_body