zhangyi
/
linux_transfer_box_2.0


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>WDKL NET BRIDGE</title> 
</head>
<style>
  fieldset{
    margin-top: 30px;
    border-radius: 15px;
    border: 1px solid #ccc;
  }
  label{
    display: inline-block;
    width: 100px;
    text-align: right;
    margin-right: 30px;
  }
  input{
    margin-top: 10px;
  }
  input[type=submit] {
    margin-left: 10%;
  width: 200px;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}
</style>
<body>
  <div>
    <h1>WDKL NET BRIDGE</h1>
    <p>mac : %s</p>
  </div>

  <form action="/setting" method="POST" onsubmit="return validate();">
    <fieldset>
      <legend>DEVICE</legend>
      <label>DHCP?</label>
      YES<input onclick="ipSetting(false);" type="radio" name="dhcp" value="1" style="margin-right: 1rem;" checked>
      NO<input onclick="ipSetting(true);" type="radio" name="dhcp" value="0">
      <br>
      <div id="ip_panel" style="display: none;">
        <label>IP</label>
        <input type="text" name="ip" id="ip" value="%s">
        <br>
        <label>NETMASK</label>
        <input type="text" name="netmask" id="netmask" value="%s">
        <br>
        <label>GATEWAY</label>
        <input type="text" name="gateway" id="gateway" value="%s">
        <br>
        <label>DNS1</label>
        <input type="text" name="dns1" id="dns1" value="%s">
        <br>
        <label>DNS2</label>
        <input type="text" name="dns2" id="dns2" value="%s">
      </div>
    </fieldset>

    <fieldset>
      <legend>SERVER</legend>
      <label>SERVER IP</label>
      <input type="text" name="server_ip" id="server_ip" value="%s">
    </fieldset>


    <fieldset>
      <legend>TCP</legend>
      <label>TCP PORT</label>
      5086<input type="radio" name="tcp_port" value="5086" style="margin-right: 1rem;" checked>
      5089<input type="radio" name="tcp_port" value="5089">
      <br>
    </fieldset>

    <fieldset>
      <legend>LORA</legend>
      <label>LORA CMD</label>
      STATE<input onclick="loraCmd(1);" type="radio" name="lora_cmd" value="1" style="margin-right: 1rem;" checked>
      MODEL<input onclick="loraCmd(0);" type="radio" name="lora_cmd" value="0">
      DELETE<input onclick="loraCmd(2);" type="radio" name="lora_cmd" value="2">

      <div id="lora_state" style="display: block;">
        <label>LORA STATE</label>
        WORK<input type="radio" name="lora_state" value="1" style="margin-right: 1rem;" checked>
        LEARN<input type="radio" name="lora_state" value="0">
      </div>

      <div id="lora_learn" style="display: none;">
        <label>LORA LEARN</label>
        YES<input type="radio" name="lora_learn" value="1" style="margin-right: 1rem;" checked>
        NO<input type="radio" name="lora_learn" value="0">
      </div>

      <div id="lora_delete" style="display: none;">
        <label>LORA DEL</label>
        ALL<input onclick="loraDelete(0);" type="radio" name="lora_delete" value="0" style="margin-right: 1rem;" checked>
        ONE<input onclick="loraDelete(1);" type="radio" name="lora_delete" value="1">
      </div>

      
      <div id="lora_delete_mac" style="display: none;">
        <label>MAC</label>
        <input type="text" name="lora_delete_mac" id="lora_delete_mac" value="">
      </div>
    </fieldset>
    
    <input type="submit" value="submit">
  </form>
  <script>
    function ipSetting(show){
      console.log("xxx" + show);
      document.getElementById("ip_panel").style.display = show?"block":"none";
    }
    function validate() {
      console.log(document.getElementById("ip_panel").style.display);
      var regexIP = /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9]).){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])$/;
      var regexNetmask = /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(254|252|248|240|224|192|128|0)$/;

      var ip = document.getElementById("ip").value;
      var netmask = document.getElementById("netmask").value;
      var gateway = document.getElementById("gateway").value;
      var dns1 = document.getElementById("dns1").value;
      var dns2 = document.getElementById("dns2").value;
      var server_ip = document.getElementById("server_ip").value;

      var tcp_port = document.getElementById("tcp_port").value;

      var lora_cmd = document.getElementById("lora_cmd").value;
      var lora_state = document.getElementById("lora_state").value;
      var lora_learn = document.getElementById("lora_learn").value;

      if (document.getElementById("ip_panel").style.display == "none"){
        if (server_ip == ""){
          alert("server ip must input");
          document.getElementById("server_ip").focus();
          return false;
        } else if (!regexIP.test(server_ip)){
          alert("server ip wrong input");
          document.getElementById("server_ip").focus();
          return false;
        }
        return true;
      } else {
        if (ip == ""){
          alert("ip must input");
          document.getElementById("ip").focus();
          return false;
        } else if (netmask == ""){
          alert("netmask must input");
          document.getElementById("netmask").focus();
          return false;
        } else if (gateway == ""){
          alert("gateway must input");
          document.getElementById("gateway").focus();
          return false;
        } else if (server_ip == ""){
          alert("server_ip must input");
          document.getElementById("server_ip").focus();
          return false;
        }

        if (!regexIP.test(ip)){
          alert("ip wrong input");
          document.getElementById("ip").focus();
          return false;
        } else if (!regexNetmask.test(netmask)){
          alert("netmask wrong input");
          document.getElementById("netmask").focus();
          return false;
        } else if (!regexIP.test(gateway)){
          alert("gateway wrong input");
          document.getElementById("gateway").focus();
          return false;
        } else if (!regexIP.test(server_ip)){
          alert("server_ip wrong input");
          document.getElementById("server_ip").focus();
          return false;
        } else if (dns1!="" && !regexIP.test(dns1)){
          alert("dns1 wrong input");
          document.getElementById("dns1").focus();
          return false;
        } else if (dns2!="" && !regexIP.test(dns2)){
          alert("dns2 wrong input");
          document.getElementById("dns2").focus();
          return false;
        }

        return true;
      }
    }
    function loraCmd(cmd) {
      console.log("lora state or learn: " + cmd);
      if (cmd == 1) {
        document.getElementById("lora_state").style.display = "block";
        document.getElementById("lora_learn").style.display = "none";
        document.getElementById("lora_delete").style.display = "none";
      }
      else if (cmd == 0) {
        document.getElementById("lora_learn").style.display = "block";
        document.getElementById("lora_state").style.display = "none";
        document.getElementById("lora_delete").style.display = "none";
      }
      else if (cmd == 2) {
        document.getElementById("lora_delete").style.display = "block";
        document.getElementById("lora_state").style.display = "none";
        document.getElementById("lora_learn").style.display = "none";
      }
    }
    function loraDelete(del) {
      console.log("lora delete: " + del);
      if (del == 0) {
        document.getElementById("lora_delete_mac").style.display = "none";
      }
      else if (del == 1) {
        document.getElementById("lora_delete_mac").style.display = "block";
      }
    }
  </script>
</body>
</html>