Browse Source

lights requests

master
Kalyax 2 years ago
parent
commit
44477c79e6
  1. 28
      index.html
  2. 5
      src/api_requests.js
  3. 33
      src/main.js
  4. 7
      src/style.css

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

5
src/api_requests.js

@ -1,5 +0,0 @@
import axios from "axios";
export default async function getTemp(){
return await axios.get("/api/temp.php");
}

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

7
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;
}
Loading…
Cancel
Save