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';
+import axios from 'axios';
-getTemp()
+
-.then((data) => {
+function buttonSwitch(state, button){
-    document.getElementById("test").innerHTML = data;
+    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;
 }