ESPMegaPRO-v3-SDK/ESPMegaPRO-OS-SDK/lib/ESPMegaPRO/html/ota.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form method="POST" action="#" enctype="multipart/form-data" id="upload_form">
  <h1>ESPMega PRO</h1>
  <h3>Device Information</h3>
  <p style="text-align: left">
    Hostname
    <span style="float: right" id="hostname">Loading ...</span>
  </p>
  <p style="text-align: left">
    IP Address
    <span style="float: right" id="ip_address">Loading ...</span>
  </p>
  <p style="text-align: left">
    MAC Address
    <span style="float: right" id="mac_address">Loading ...</span>
  </p>
  <p style="text-align: left">
    Uptime
    <span style="float: right" id="uptime">Loading ...</span>
  </p>
  <p style="text-align: left">
    Model
    <span style="float: right" id="model">Loading ...</span>
  </p>
  <p style="text-align: left">
    FW Version
    <span style="float: right" id="fw_version">Loading ...</span>
  </p>
  <p style="text-align: left">
    SDK Version
    <span style="float: right" id="sdk_version">Loading ...</span>
  </p>
  <p style="text-align: left">
    IDF Version
    <span style="float: right" id="idf_version">Loading ...</span>
  </p>
  <p style="text-align: left">
    API Server
    <span style="float: right" id="api_server">Loading ...</span>
  </p>
  <p style="text-align: left">
    API Endpoint
    <span style="float: right" id="api_endpoint">Loading ...</span>
  </p>
  <p style="text-align: left">
    Centrally Managed
    <span style="float: right" id="centrally_managed">Loading ...</span>
  </p>
  <button type="button" class="conf" onclick="window.location.href='config'">Settings</button><br /><br />
  <hr>
  <h3>Upload Software Package</h3>
  <input type="file" name="update" id="file" onchange="sub(this)" style="display: none" accept=".bin" />
  <label id="file-input" for="file">Choose file...</label>
  <input type="submit" class="btn" value="Program" /><br /><br />
  <div id="prg"></div>
  <br />
  <div id="prgbar">
    <div id="bar"></div>
  </div>
  <br />
  <hr>
  <h3>Device Control</h3>
  <input type="button" class="btn" value="Reboot" onclick="window.location.href='/reboot'" />
  <b>SIWAT SYSTEM 2023</b>
</form>
<script>
  window.onload = function () {
    fetch("/get_device_info")
      .then(response => response.json())
      .then(data => {
        console.log(data);
        document.getElementById("hostname").innerHTML = data.hostname;
        document.getElementById("ip_address").innerHTML = data.ip_address;
        document.getElementById("mac_address").innerHTML = data.mac_address;
        document.getElementById("model").innerHTML = data.model;
        document.getElementById("fw_version").innerHTML = data.software_version;
        document.getElementById("sdk_version").innerHTML = data.sdk_version;
        document.getElementById("idf_version").innerHTML = data.idf_version;
        document.getElementById("api_server").innerHTML = data.mqtt_server + ":" + data.mqtt_port;
        document.getElementById("api_endpoint").innerHTML = data.base_topic;
        document.getElementById("centrally_managed").innerHTML = data.mqtt_connected;
        var uptime = data.uptime;
        var uptime_string = "";
        // Uptime is in seconds, convert it to X days, HH:MM:SS
        var days = Math.floor(uptime / (24 * 3600));
        uptime -= days * 24 * 3600;
        var hours = Math.floor(uptime / 3600);
        uptime -= hours * 3600;
        var minutes = Math.floor(uptime / 60);
        uptime -= minutes * 60;
        var seconds = uptime;
        if (days > 0) uptime_string += days + " days, ";
        uptime_string += hours.toString().padStart(2, "0") + ":" + minutes.toString().padStart(2, "0") + ":" + seconds.toString().padStart(2, "0");
        document.getElementById("uptime").innerHTML = uptime_string;
      }).catch(error => {
        console.error(error);
      });
  };
  function sub(obj) {
    var fileName = obj.value.split("\\");
    document.getElementById("file-input").innerHTML =
      "   " + fileName[fileName.length - 1];
  }
  $("form").submit(function (e) {
    e.preventDefault();
    var form = $("#upload_form")[0];
    var data = new FormData(form);
    $.ajax({
      url: "/ota_update",
      type: "POST",
      data: data,
      contentType: false,
      processData: false,
      xhr: function () {
        var xhr = new window.XMLHttpRequest();
        xhr.upload.addEventListener(
          "progress",
          function (evt) {
            if (evt.lengthComputable) {
              var per = evt.loaded / evt.total;
              if (Math.round(per * 100) < 100) {
                $("#prg").html("Updating . . . (" + Math.round(per * 100) + "%)");
              }
              else {
                $("#prg").html("Update Completed, Rebooting . . .");
              }
              $("#bar").css("width", Math.round(per * 100) + "%");
            }
          },
          false
        );
        return xhr;
      },
      success: function (d, s) {
        console.log("success!");
      },
      error: function (a, b, c) { },
    });
  });
</script>
<style>
  hr {
    display: block;
    color: #aaaaaa;
    background-color: #aaaaaa;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 0px;
    height: 3px;
  }

  #file-input,
  input {
    width: 100%;
    height: 44px;
    border-radius: 4px;
    margin: 10px auto;
    font-size: 15px;
  }

  input {
    background: #f1f1f1;
    border: 0;
    padding: 0 15px;
  }

  body {
    background-image: url("https://fs.siwatsystem.com/arona_bg.png");
    background-size: cover;
    font-family: sans-serif;
    font-size: 14px;
    color: #777;
  }

  #file-input {
    background-color: #CCCCCC;
    color: #5E5E5E;
    padding: 0;
    border: 1px solid #ddd;
    line-height: 44px;
    text-align: center;
    display: block;
    cursor: pointer;
  }

  #bar,
  #prgbar {
    background-color: #D9D9D9;
    border-radius: 10px;
  }

  #bar {
    background-color: #29CD1F;
    width: 0%;
    height: 10px;
  }

  form {
    background: rgba(255, 255, 255, 0.95);
    max-width: 258px;
    margin: 75px auto;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
  }

  .btn {
    background: #CA3D3D;
    color: #fff;
    cursor: pointer;
  }

  .conf {
    background: #417df3;
    color: #fff;
    cursor: pointer;
    width: 100%;
    height: 44px;
    border-radius: 4px;
    margin: 10px auto;
    font-size: 15px;
    border: 0;
  }
</style>