<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/ico" href="https://huggingface.co/spaces/vk-ai-system/flask_inference_api3/resolve/main/list.ico">
		<title>My static Space</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<style>
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: inner-spin-button;
  opacity: 1;
}

input[type="number"] {
  -moz-appearance: textfield;
}

</style>

      
	</head>
<body>


<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="https://vk-ai-system-flask-inference-api3.hf.space/settings">
    <img src="https://huggingface.co/spaces/vk-ai-system/flask_inference_api3/resolve/main/list.png" width="30" height="30" class="d-inline-block align-top" alt="">
    MackorLab
  </a>
  <form class="form-inline">
    <button  id="st_onl" class="btn btn-outline-success" type="button" >Онлайн</button>
    <button   id="st_set" class="btn btn-success" type="button" >Настройки</button>
    <button id="st_graf" class="btn btn-outline-success" type="button" >Графики</button>
  </form>
</nav>





  
<div class="container mt-3">
   <div class="container text-center"> 
    <h1>Настройки системы</h1>
   </div> <br>



<div class="card-deck">
  <div class="card">
    
    <div class="card-body">
      <!-- Уровень - PH -->  <div class="container text-center"> 
      <h4>Уровень pH</h4>  </div>
        <p>EEPROM : <span id="pH_eep"></span></p>  
      <form>
        <label for="pH_set">Новое : </label>
        <input type="number"  id="pH_set" value="5.7" min="1" max="14" step="0.01">
      </form>
    </div>
    <div class="card-footer">
      <button id="pH_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
    </div>
  </div>
  <div class="card">
    
    <div class="card-body">
      <!-- PH ON - sec -->
      <h4>pH доз. ON sec.</h4>  
      <p>EEPROM : <span id="ph_on_eep"></span></p>
      <form>
        <label for="ph_on_set">Новое : </label>
        <input type="number"  id="ph_on_set" value="2.5" min="0.1" max="20" step="0.01">
     </form>
    </div>
    <div class="card-footer">
      <button id="ph_on_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
    </div>
  </div>
  <div class="card">
    
    <div class="card-body">
      <h4>Уровень EC</h4>  
  <p>EEPROM : <span id="ec_eep"></span></p>

<form>
   <label for="ec_set">Новое : </label>
   <input type="number"  id="ec_set" value="0.85" min="0.1" max="4" step="0.01">
</form>
    </div>
    <div class="card-footer">
      <button id="ec_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
    </div>
  </div>
</div>


<br>

<div class="card-deck">
  <div class="card">
    
    <div class="card-body">
      <h4>EC доз. A_ON sec.</h4>  
  <p>EEPROM : <span id="ec_A_eep"></span></p>

<form>
   <label for="ec_A_set">Новое : </label>
   <input type="number"  id="ec_A_set" value="1.5" min="0.1" max="20" step="0.01">
</form>
    </div>
    <div class="card-footer">
      <button id="ec_A_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
    </div>
  </div>
  <div class="card">
    
    <div class="card-body">
      <h4>EC доз. B_ON sec.</h4>  
  <p>EEPROM : <span id="ec_B_eep"></span></p>

<form>
   <label for="ec_B_set">Новое : </label>
   <input type="number"  id="ec_B_set" value="1.5" min="0.1" max="20" step="0.01">
</form> 
    </div>
    <div class="card-footer">
      <button id="ec_B_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
    </div>
  </div>
  <div class="card">
    
    <div class="card-body">
      <h4>EC доз. C_ON sec.</h4>  
  <p>EEPROM : <span id="ec_C_eep"></span></p>

<form>
   <label for="ec_C_set">Новое : </label>
   <input type="number"  id="ec_C_set" value="1.5" min="0.1" max="20" step="0.01">
</form> 
    </div>
    <div class="card-footer">
      <button id="ec_C_set_but" type="button" class="btn btn-success btn-lg">Записать</button>
    </div>
  </div>
</div>



<br>
  


<div class="card-deck">
  <div class="card">
    
    <div class="card-body">
      <h4>Свет ON </h4>  
  <p>EEPROM: <span id="l_ON_h_eep"></span> : <span id="l_ON_m_eep"></span></p>
<form>
   <label for="l_ON_h_set">Новое h : </label>
   <input type="number"  id="l_ON_h_set" value="12" min="0" max="23" step="1">
</form>  
<form>
   <label for="l_ON_m_set">Новое m : </label>
   <input type="number"  id="l_ON_m_set" value="30" min="0" max="59" step="1">
</form> 
    </div>
    <div class="card-footer">
      <button id="l_ON_set" type="button" class="btn btn-success btn-lg">Записать</button>
    </div>
  </div>
  <div class="card">
    
    <div class="card-body">
      <h4>Свет OFF </h4>  
  <p>EEPROM: <span id="l_OFF_h_eep"></span> : <span id="l_OFF_m_eep"></span></p>
<form>
   <label for="l_OFF_h_set">Новое h : </label>
   <input type="number"  id="l_OFF_h_set" value="12" min="0" max="23" step="1">
</form>  
<form>
   <label for="l_OFF_m_set">Новое m : </label>
   <input type="number"  id="l_OFF_m_set" value="30" min="0" max="59" step="1">
</form> 
    </div>
    <div class="card-footer">
      <button id="l_OFF_set" type="button" class="btn btn-success btn-lg">Записать</button>
    </div>
  </div>
  <div class="card">
    
    <div class="card-body">
      <h4>Тем. воздуха</h4>  
  <p>EEPROM : <span id="t_Voz_eep"></span></p>

<form>
   <label for="t_Voz_eep_set">Новое : </label>
   <input type="number"  id="t_Voz_eep_set" value="25" min="10" max="40" step="1">
</form> 
    </div>
    <div class="card-footer">
      <button id="t_Voz_set" type="button" class="btn btn-success btn-lg">Записать</button>
    </div>
  </div>
</div>


 
<br><br><br><br>



  
</div>


<script>
    document.getElementById("st_onl").addEventListener("click", function() {
        window.location.href = "https://vk-ai-system-flask-inference-api3.hf.space/online";
    });
</script>


<script>
    document.getElementById("st_set").addEventListener("click", function() {
        window.location.href = "https://vk-ai-system-flask-inference-api3.hf.space/settings";
    });
</script>


<script>
    document.getElementById("st_graf").addEventListener("click", function() {
        window.location.href = "https://vk-ai-system-flask-inference-api3.hf.space/settings";
    });
</script>





  

<script>
  // Функция, которая будет выполняться при загрузке страницы
  window.onload = function() {
    // Создаем запрос
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/set_res", true);
    // Отправляем запрос
    xhr.send();
  };
</script>









  
  
  <script>

    
    function updateValues(data) {
      document.getElementById("pH_eep").textContent = data.ph_eep;
      document.getElementById("ph_on_eep").textContent = data.ph_on_eep;
      document.getElementById("ec_eep").textContent = data.ec_eep;
      document.getElementById("ec_A_eep").textContent = data.ec_A_eep; 
      document.getElementById("ec_B_eep").textContent = data.ec_B_eep; 
      document.getElementById("ec_C_eep").textContent = data.ec_C_eep;       
      document.getElementById("l_ON_h_eep").textContent = data.l_ON_h_eep;
      document.getElementById("l_ON_m_eep").textContent = data.l_ON_m_eep;  
      document.getElementById("l_OFF_h_eep").textContent = data.l_OFF_h_eep;
      document.getElementById("l_OFF_m_eep").textContent = data.l_OFF_m_eep; 
      document.getElementById("t_Voz_eep").textContent = data.t_Voz_eep; 
      
    }
    
    function fetchValues() {
      var xhr = new XMLHttpRequest();
      xhr.open("GET", "/settings_api", true);
      xhr.setRequestHeader("Content-Type", "application/json");
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var response = JSON.parse(xhr.responseText);
          updateValues(response);
        }
      };
      xhr.send();
    }
    
    fetchValues();
    setInterval(fetchValues, 10000);
  </script>








  

  <script>
  document.getElementById("pH_set_but").addEventListener("click", function() {
    var pHValue = document.getElementById("pH_set").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/pH_set?value=" + pHValue, true);
    xhr.send();
});
  </script>


  <script>
  document.getElementById("ph_on_set_but").addEventListener("click", function() {
    var pH_onValue = document.getElementById("ph_on_set").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/ph_on_set?value=" + pH_onValue, true);
    xhr.send();
});
  </script>

  
  <script>
  document.getElementById("ec_set_but").addEventListener("click", function() {
    var ecValue = document.getElementById("ec_set").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/EC_set?value=" + ecValue, true);
    xhr.send();
});
  </script>
  
  <script>
  document.getElementById("ec_A_set_but").addEventListener("click", function() {
    var ec_A_setValue = document.getElementById("ec_A_set").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/ec_A_set?value=" + ec_A_setValue, true);
    xhr.send();
});
  </script>


  <script>
  document.getElementById("ec_B_set_but").addEventListener("click", function() {
    var ec_B_setValue = document.getElementById("ec_B_set").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/ec_B_set?value=" + ec_B_setValue, true);
    xhr.send();
});
  </script>


 <script>
  document.getElementById("ec_C_set_but").addEventListener("click", function() {
    var ec_C_setValue = document.getElementById("ec_C_set").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/ec_C_set?value=" + ec_C_setValue, true);
    xhr.send();
});
  </script>

 <script>
  document.getElementById("ec_C_set_but").addEventListener("click", function() {
    var ec_C_setValue = document.getElementById("ec_C_set").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/ec_C_set?value=" + ec_C_setValue, true);
    xhr.send();
});
  </script>



  <script>
  document.getElementById("l_ON_set").addEventListener("click", function() {
     var l_ON_h_set = document.getElementById("l_ON_h_set").value;
     var l_ON_m_set = document.getElementById("l_ON_m_set").value;
     var xhr = new XMLHttpRequest();
     xhr.open("GET", "/l_ON_set?l_ON_h_set=" + l_ON_h_set + "&l_ON_m_set=" + l_ON_m_set, true);
     xhr.send();
    });
  </script> 

  <script>
  document.getElementById("l_OFF_set").addEventListener("click", function() {
     var l_OFF_h_set = document.getElementById("l_OFF_h_set").value;
     var l_OFF_m_set = document.getElementById("l_OFF_m_set").value;
     var xhr = new XMLHttpRequest();
     xhr.open("GET", "/l_OFF_set?l_OFF_h_set=" + l_OFF_h_set + "&l_OFF_m_set=" + l_OFF_m_set, true);
     xhr.send();
    });
  </script> 
  
  <script>
  document.getElementById("t_Voz_set").addEventListener("click", function() {
    var t_Voz_eep_set = document.getElementById("t_Voz_eep_set").value;
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "/t_Voz_eep_set?value=" + t_Voz_eep_set, true);
    xhr.send();
});
  </script> 
</body>
</html>