lights requests

2 years ago · 44477c79e6
4 changed files with 62 additions and 13 deletions
--- a/index.html
+++ b/index.html
@ -6,11 +6,33 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Domotique</title>
  </head>
-  <body>
+  <body class="bg-green-800">
    <header>
-      <marquee class="text-3xl text-red-400">DOMOTIQUE 3000</marquee>
+      <marquee class="text-8xl text-red-400 bg-purple-300">DOMOTIQUE</marquee>
    </header>
-    <p id="test">t</p>
+    <section class="flex justify-between mx-20 text-center">
+      <div class="temperature">
+        <h1>Temperature</h1>
+        <p><span id="temp"></span>°C</p>
+      </div>
+      <div class="radiateur">
+        <h1>Radiateur</h1>
+        <button onclick="setLightState(0)">Allumer</button>
+        <button onclick="setLightState(0)">Eteindre</button>
+      </div>
+
+      <div class="volet">
+        <h1>Volets roulants</h1>
+        <button onclick="setLightState(1)">Ouvrir</button>
+        <button onclick="setLightState(1)">Fermer</button>
+      </div>
+
+      <div class="eclairage">
+        <h1>Eclairage</h1>
+        <button onclick="setLightState(2)">Allumer</button>
+        <button onclick="setLightState(2)">Eteindre</button>
+      </div>
+    </section>
    <script type="module" src="/src/main.js"></script>
  </body>
 </html>
--- a/src/api_requests.js
+++ b/src/api_requests.js
@ -1,5 +0,0 @@
-import axios from "axios";
-
-export default async function getTemp(){
-    return await axios.get("/api/temp.php");
-}
--- a/src/main.js
+++ b/src/main.js
@ -1,6 +1,31 @@
 import './style.css';
-import getTemp from './api_requests.js';
-getTemp()
-.then((data) => {
-    document.getElementById("test").innerHTML = data;
+import axios from 'axios';
+
+function buttonSwitch(state, button){
+    button.innerText = state = 1 ? "Eteindre" : "Allumer";
+}
+
+async function getTemp(){
+    return await axios.get("/api/temp.php");
+}
+
+async function getLightState(light){
+    return await axios.get("/api/light_state.php?l="+light)
+}
+
+async function setLightState(light){
+    const pins = [7, 0, 2, 3, 12, 13, 14, 6];
+    const req = await axios.post("/api/set_light.php", {light: pins[light]})
+    console.log(req.data)
+}
+
+window.setLightState = setLightState
+
+/*getLightState(0).then((data) => {
+    const button = document.getElementById("button-radiateur")
+    buttonSwitch(data.data, button)
+})*/
+
+getTemp().then((data) => {
+    document.getElementById("temp").innerHTML = data.data;
 })
--- a/src/style.css
+++ b/src/style.css
@ -1,3 +1,10 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
+
+button{
+    @apply bg-slate-400 text-red-400;
+}
+h1{
+    @apply text-3xl bg-yellow-300 font-bold text-emerald-500;
+}