Newer
Older
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';
uiState.light_status = 0;
} else {
btn1.textContent = initialText;
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);