Skip to content
Snippets Groups Projects
Commit 73ab66ac authored by Karl-Luca Roth's avatar Karl-Luca Roth
Browse files

Merge branch 'steuerung' into 'main'

Nutrition button + Steuerung.js added

See merge request !24
parents ebe35e79 e753154d
No related branches found
No related tags found
1 merge request!24Nutrition button + Steuerung.js added
No preview for this file type
let uiState;
const btn1 = document.getElementById('btn1'); // light
const btn2 = document.getElementById('btn2'); // pump
const btn2 = document.getElementById('btn2'); // water pump
const btn3 = document.getElementById('btn3'); // nutrition pump
const toggleSwitch = document.getElementById('toggleSwitch');
const timeSelector = document.getElementById('timeSelector');
......@@ -22,7 +23,38 @@ function sendState(state) {
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() {
......@@ -39,20 +71,32 @@ 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 = 'Pumpe an';
const initialText = 'Wasserpumpe an';
if (btn2.textContent.toLowerCase().includes(initialText.toLowerCase())) {
btn2.textContent = 'Pumpe aus';
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();
}
});
......
......@@ -108,6 +108,18 @@ body {
color: #4D4B4B;
}
.button3 {
background-color: white;
color: black;
border-color: black;
border-radius: 10px;
}
.button3:hover {
background-color: #7691c9;
color: #4D4B4B;
}
.button1:active {
background-color: #5570a7;
transform: translate(4px);
......@@ -117,6 +129,12 @@ body {
background-color: #5570a7;
transform: translate(4px);
}
.button3:active {
background-color: #5570a7;
transform: translate(4px);
}
.move-right{
margin-left: 50px;
}
......
......@@ -28,10 +28,13 @@
<label style="margin-left: 500px">Pumpe:</label>
</font></h1>
<!--Licht-->
<div class="left"><button id="btn1" class="button button1 move-right" style="margin-left: 200px">Licht an</button></div>
<div class="left"><button id="btn1" class="button button1 move-right" style="margin-left: 50px">Licht an</button></div>
<!--Wasser-->
<div class="left"><button id="btn2" class="button button2 move-right" style="margin-left: 435px">Pumpe an</button></div>
<div class="left"><button id="btn2" class="button button2 move-right" style="margin-left: 235px">Wasserpumpe an</button></div>
<!--Nährstoffe-->
<div class="left"><button id="btn3" class="button button3 move-right" style="margin-left: 100px">Nährstoffpumpe an</button></div>
</br></br></br></br>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment