Merge branch 'steuerung' into 'main'

Nutrition button + Steuerung.js added

See merge request !24

static/steuerung.js

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

static/style.css

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

templates/steuerung.html

@@ -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>