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

// activate water pump
function setStateWaterPump() {
  const Http  = new XMLHttpRequest();
  Http.open('POST', '././setState');
  Http.setRequestHeader('Content-Type', 'application/json');
  const state = { message: 'start water-pump'};
  Http.send(JSON.stringify(state));
}
//activiate nutrition pump
function setStateNutritionPump() {
  const Http  = new XMLHttpRequest();
  Http.open('POST', '././setState');
  Http.setRequestHeader('Content-Type', 'application/json');
  const state = { message: 'start nutrition-pump'};
  Http.send(JSON.stringify(state));
}
// activate light
function setStateLightOn() {
  const Http  = new XMLHttpRequest();
  Http.open('POST', '././setState');
  Http.setRequestHeader('Content-Type', 'application/json');
  const state = { message: 'activate light'};
  Http.send(JSON.stringify(state));
}
//deactivate light
function setStateLightOff() {
  const Http  = new XMLHttpRequest();
  Http.open('POST', '././setState');
  Http.setRequestHeader('Content-Type', 'application/json');
  const state = { message: 'deactivate light'};
  Http.send(JSON.stringify(state));
}

// updates elements to current state
function refresh() {
  btn1.textContent = uiState.light_status ? 'Licht an' : 'Licht aus';
  // btn2.textContent =
  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
btn1.addEventListener('click', function handleClick() {
  const initialText = 'Licht an';
  if (btn1.textContent.toLowerCase().includes(initialText.toLowerCase())) {
      btn1.textContent = 'Licht aus';
      setStateLightOff();
      uiState.light_status = 0;
  } else {
      btn1.textContent = initialText;
      setStateLightOn();
      uiState.light_status = 1;
  }
  sendState(uiState)
});

btn2.addEventListener('click', function handleClick() {
    const initialText = 'Wasserpumpe an';
    if (btn2.textContent.toLowerCase().includes(initialText.toLowerCase())) {
        btn2.textContent = 'Wasserpumpe aus';
    } else {
        btn2.textContent = initialText;
        setStateWaterPump();
    }
});
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;
        setStateNutritionPump();
    }
});

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