steuerung.js

let uiState;
const btn1 = document.getElementById('btn1'); // light
const btn2 = document.getElementById('btn2'); // water pump
const btn3 = document.getElementById('btn3'); // nutrition pump
const toggleSwitch = document.getElementById('toggleSwitch');
const timeSelector = document.getElementById('timeSelector');


// get/post state via http
function getState() {
  const Http = new XMLHttpRequest();
  Http.open('GET', '././getState');
  Http.responseType = 'json';
  Http.send();
  Http.onreadystatechange = (e) => {
    uiState = Http.response;  
  }
}
function sendState(state) {
  const Http = new XMLHttpRequest();
  Http.open("POST", '././setState');
  Http.setRequestHeader('Content-Type', 'application/json');
  Http.send(JSON.stringify(uiState));
}

// updates elements to current state
function refresh() {
  getState();
  btn1.textContent = uiState.light_status ? 'Licht an' : 'Licht aus';
  btn2.textContent = uiState.water_pump_status ? 'Wasserpumpe an' : 'Wasserpumpe aus';
  btn3.textContent = uiState.nutrition_pump_status ? 'Nährstoffpumpe an' : 'Nährstoffpumpe aus';

  toggleSwitch.checked = uiState.light_auto_mode ? true : false;
  timeSelector.style.display = uiState.light_auto_mode ? 'block' : 'none';
}

// event listener for buttons and interative gui elements
// light manual
btn1.addEventListener('click', function handleClick() {
  const initialText = 'Licht an';
  if (btn1.textContent.toLowerCase().includes(initialText.toLowerCase())) {
      btn1.textContent = 'Licht aus';
      uiState.light_status = 0;
  } else {
      btn1.textContent = initialText;
      uiState.light_status = 1;
  }
  sendState(uiState);
});
// water pump
btn2.addEventListener('click', function handleClick() {
    const initialText = 'Wasserpumpe an';
    if (btn2.textContent.toLowerCase().includes(initialText.toLowerCase())) {
        btn2.textContent = 'Wasserpumpe aus';
    } else {
        btn2.textContent = initialText;
        uiState.water_pump_status = 1;
    }
    sendState(uiState);
});
//nutrition pump
btn3.addEventListener('click', function handleClick() {
    const initialText = 'Nährstoffpumpe an';
    if (btn3.textContent.toLowerCase().includes(initialText.toLowerCase())) {
        btn3.textContent = 'Nährstoffpumpe aus';
    } else {
        btn3.textContent = initialText;
        uiState.nutrition_pump_status = 1;
    }
    sendState(uiState);
});
// light automatic
toggleSwitch.addEventListener('change', function() {
  if (this.checked) {
    timeSelector.style.display = 'block';
    uiState.light_auto_mode = 1;
  } else {
    timeSelector.style.display = 'none';
    uiState.light_auto_mode = 0;
  }
  sendState(uiState);
});


// get current status of growbot and refresh gui
getState(uiState);
setTimeout(() => { refresh(); }, 50);