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

<div id="loadingSpinner" class="spinner-container" style="display: none;">
  <div class="spinner"></div>
  <p id="loadingText">Saving Configuration Please wait (<span id="countdown">15s</span>)</p>
</div>
</div>
<form enctype="multipart/form-data" id="config_form" onsubmit="send_config(event)">
  <h1>ESPMega PRO</h1>
  <h3>Device Configurations</h3>
  <p class="config_title">IP Address</p>
  <input type="text" id="ip_address" name="ip_address" class="conf_txt" value="$(ip_address)$"><br>
  <p class="config_title">Network Mask</p>
  <input type="text" id="netmask" name="netmask" class="conf_txt" value="$(netmask)$"><br>
  <p class="config_title">Gateway</p>
  <input type="text" id="gateway" name="gateway" class="conf_txt" value="$(gateway)$"><br>
  <p class="config_title">DNS Server</p>
  <input type="text" id="dns" name="dns" class="conf_txt" value="$(dns)$"><br>
  <p class="config_title">Hostname</p>
  <input type="text" id="hostname" name="hostname" class="conf_txt" value="$(hostname)$"><br>
  <p class="config_title">BMS Server - IP Address</p>
  <input type="text" id="bms_ip" name="bms_ip" class="conf_txt" value="$(bms_ip)$"><br>
  <p class="config_title">BMS Server - Port</p>
  <input type="text" id="bms_port" name="bms_port" class="conf_txt" value="$(bms_port)$"><br>
  <label class="container">Authentication
    <input type="checkbox" name="bms_useauth" id="bms_useauth" $(bms_use_auth)$ value="yes">
    <span class="checkmark"></span>
  </label>
  <p class="config_title">BMS Server - Username</p>
  <input type="text" id="bms_username" name="bms_username" class="conf_txt" value="$(bms_username)$"><br>
  <p class="config_title">BMS Server - Password</p>
  <input type="password" id="bms_password" name="bms_password" class="conf_txt" value="$(bms_password)$"><br>
  <p class="config_title">BMS Server - Endpoint</p>
  <input type="text" id="bms_endpoint" name="bms_endpoint" class="conf_txt" value="$(bms_endpoint)$"><br>
  <p class="config_title">Web Interface - Username</p>
  <input type="text" id="web_username" name="web_username" class="conf_txt" value="$(web_username)$"><br>
  <p class="config_title">Web Interface - Password</p>
  <input type="password" id="web_password" name="web_password" class="conf_txt" value="$(web_password)$"><br>
  <input type="submit" class="btn" value="Save">
  <button type="button" class="conf" onclick="window.location.href='/'">Back</button><br /><br />
  <b>SIWAT SYSTEM 2023</b>
</form>
<script>
  function send_config() {
    event.preventDefault();
    // Get the form data
    var formData = {
      ip_address: document.getElementById("ip_address").value,
      netmask: document.getElementById("netmask").value,
      gateway: document.getElementById("gateway").value,
      dns: document.getElementById("dns").value,
      hostname: document.getElementById("hostname").value,
      bms_ip: document.getElementById("bms_ip").value,
      bms_port: document.getElementById("bms_port").value,
      bms_useauth: document.getElementById("bms_useauth").checked,
      bms_username: document.getElementById("bms_username").value,
      bms_password: document.getElementById("bms_password").value,
      bms_endpoint: document.getElementById("bms_endpoint").value,
      web_username: document.getElementById("web_username").value,
      web_password: document.getElementById("web_password").value
    };

    // Send the POST request
    fetch("/save_config", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify(formData)
      })
      .then(response => response.json())
      .then(data => {
        // Handle the response data
        console.log(data);
      })
      .catch(error => {
        // Handle any errors
        console.error(error);
      });
    // Show the loading spinner
    document.getElementById('loadingSpinner').style.display = 'block';

    // Start the countdown
    var countdown = document.getElementById('countdown');
    var timeLeft = 15;
    var countdownTimer = setInterval(function () {
      timeLeft--;
      countdown.textContent = timeLeft+"s";
      if (timeLeft <= 0) clearInterval(countdownTimer);
    }, 1000);

    // Wait for 15 seconds
    setTimeout(function () {
      // Redirect user to homepage based on Form's IP
      window.location.replace("http://"+formData.ip_address);
    }, 15000);
  }
</script>
<style>
  p.config_title {
    font-size: 12;
    font-weight: bold;
    text-align: left;
    align-self: left;
    margin-bottom: 0;
    margin-top: 0;
  }

  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;
  }

  .conf_txt {
    background-color: #e2e2e2;
  }

  .checkbox {
    size: 4;
    display: inline-block;
  }

  .container {
    display: block;
    position: relative;
    padding-left: 0px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
  }

  .container:hover input~.checkmark {
    background-color: #ccc;
  }

  .container input:checked~.checkmark {
    background-color: #2196F3;
  }

  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  .container input:checked~.checkmark:after {
    display: block;
  }

  .container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .spinner {
    position: fixed;
    top: 40%;
    left: 44%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  #loadingText {
    color: #fff;
    font-size: 40px;
    text-align: center;
    position: fixed;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .spinner-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9); /* semi-transparent black background */
}
</style>