feat: plan canvas (#8)

* feat: add new plan card * feat: differentiate the different ip's in the database * feat: add a new room in database * feat: dislay name of room in api * feat: sorted all data by ip * feat: put the data in cardPlanElement * feat:change button for selected month, change function add room, change plan style * feat: add floor plan elements with sensors * feat: add a circle to the svg with the esp coordinates in the database
museebolo · Jun 3, 2024 · 7752bef · 7752bef
1 parent 308e75f
commit 7752bef
Show file tree

Hide file tree

Showing 17 changed files with 462 additions and 52 deletions.
diff --git a/Interface/.gitignore b/Interface/.gitignore
@@ -1,4 +1,3 @@
-/src/contexts/SampleContext.tsx
 /test.http
 
 # Logs

diff --git a/Interface/floor-plan.svg b/Interface/floor-plan.svg
diff --git a/Interface/index.html b/Interface/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title></title>
   </head>
-  <body class="bg-gray-50">
-    <div class="bg-gray-50 p-0 m-0" id="root"></div>
+  <body class="">
+    <div class="p-0 m-0" id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/Interface/src/App.tsx b/Interface/src/App.tsx
@@ -8,13 +8,14 @@ function App() {
 
     const toggleDarkTheme = () => {
         document.documentElement.classList.toggle("dark")
-        const bodyColor = document.querySelector("body");
+        const body = document.querySelector("body");
         setDarkTheme(!darkTheme);
-        if (bodyColor) {
+        if (body) {
+            console.log(body)
             if (darkTheme) {
-                bodyColor.style.backgroundColor = "#F9F9F9";
+                body.style.backgroundColor = "#F9F9F9";
             } else {
-                bodyColor.style.backgroundColor = "rgb(12 23 42)";
+                body.style.backgroundColor = "rgb(12 23 42)";
             }
         }
     };
@@ -25,8 +26,7 @@ function App() {
                 <Outlet/>
 
             <div className="">
-                <button className="w-28 h-28" onClick={() => toggleDarkTheme()}>
-
+                <button className="w-28 h-28 ml-24" onClick={() => toggleDarkTheme()}>
                     <img className="w-8" src={darkTheme ? "/icons8-sun (1).svg" : "/icons8-moon-50.png"}
                          alt={"theme button"}/>
                 </button>

diff --git a/Interface/src/contexts/SampleContext.tsx b/Interface/src/contexts/SampleContext.tsx
@@ -0,0 +1,4 @@
+export const SampleContext = {
+    urlData: "http://postgrest.memoires-info.com",
+    urlLogin: "http://login.memoires-info.com"
+};
diff --git a/Interface/src/contexts/lib.tsx b/Interface/src/contexts/lib.tsx
@@ -10,7 +10,6 @@ export function getToken(){
 }
 export function error401(response:Response){
     if (response.status === 401) {
-
         window.location.href = "http://localhost:5173/login";
     }
 }
@@ -25,4 +24,11 @@ export interface Data {
     temperature: number;
     humidity: number;
     timestamp: string;
+    ip:number;
 }
+export interface Esp{
+    x:number;
+    y:number;
+    ip:number;
+    "name": "test"
+}
diff --git a/Interface/src/elements/CircularElement.tsx b/Interface/src/elements/CircularElement.tsx
@@ -18,7 +18,7 @@ export default function CircularElement({data, unity, color}: { data: number | s
 
     return (
         <div className="flex">
-            <h1 className=" text-center font-bold text-xl mr-16 dark:text-white">
+            <h1 className=" text-center font-bold text-xl mr-8 dark:text-white">
                 {data} {unity}
             </h1>
             <svg className="w-32 h-32 " viewBox="0 0 100 100">

diff --git a/Interface/src/elements/DashboardElement.tsx b/Interface/src/elements/DashboardElement.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import CircularElementData from "./CircularElementData.tsx";
 import MonthlyAverageStore, { AverageStore } from "./AverageStore.tsx";
 import CardElement from "@/elements/CardElement.tsx";
@@ -8,22 +8,18 @@ import SideBarElement from "@/elements/SideBarElement.tsx";
 
 export default function DashboardElement() {
     const d = new Date();
+    const currentYear = d.getFullYear();
 
     const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
     const [monthSelected, setMonthSelected] = useState<string>(monthNames[d.getMonth()]);
-
     const [startDate, setStartDate] = useState<Date | null>(null);
     const [endDate, setEndDate] = useState<Date | null>(null);
 
+
     const handleMonthClick = (month: string) => {
         setMonthSelected(month);
     };
 
-    useEffect(() => {
-        setStartDate(null);
-        setEndDate(null)
-    }, [monthSelected]);
-
 
     return (
         <div className="grid grid-cols-4 gap-4">
@@ -35,13 +31,13 @@ export default function DashboardElement() {
                 <nav className="w-full top-0 start-0">
                     <div className="max-w-screen-xl mx-auto">
                         <div className="flex justify-center p-4">
-                            <ul className="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 font-medium rounded-lg bg-white dark:bg-slate-800">
+                            <ul className="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-8 font-medium rounded-lg ">
                                 {monthNames.map(month => (
-                                    <li className="block py-2 px-3 text-black dark:text-white rounded"
-                                        key={month}
-                                        onClick={() => handleMonthClick(month)}>
+                                    <button className={`bg-gray-50 hover:bg-gray-200 focus:bg-gray-200 font-medium rounded-xl dark:text-white text-sm px-5 py-2.5 me-2 mb-2 dark:bg-slate-800 focus:outline-none dark:focus:ring-blue-800 ${month === monthSelected ? 'bg-blue-200' : ''}`}
+                                            key={month}
+                                            onClick={() => handleMonthClick(month)}>
                                         {month}
-                                    </li>
+                                    </button>
                                 ))}
                             </ul>
                         </div>
@@ -51,9 +47,9 @@ export default function DashboardElement() {
                 <div className="flex flex-col md:flex-row text-center align-middle gap-4 mt-12 ">
                     <div className="">
                         <input
+                            value={startDate ? startDate.toISOString().split('T')[0] : ''}
                             className="bg-white font-bold h-12 pl-10 pr-8 w-full md:w-80 shadow-lg rounded-xl dark:bg-slate-800 dark:text-white"
                             type="date"
-                            value={startDate ? startDate.toISOString().split('T')[0] : ''}
                             onChange={e => setStartDate(new Date(e.target.value))} />
                     </div>
 
@@ -89,11 +85,13 @@ export default function DashboardElement() {
                                                               end={endDate.toDateString()} />}
                             /> : ""
                         }
+
                     </div>
                 </div>
                 <div className="flex-row h-12">
-                    <AverageStore precision={'month'} beginning={'2024-01-01'} end={'2025-01-01'} />
+                    <AverageStore precision={'month'} beginning={`${currentYear}-01-01`} end={`${currentYear + 1}-01-01`} />
                 </div>
+
             </div>
         </div>
     )

diff --git a/Interface/src/elements/LoginElement.tsx b/Interface/src/elements/LoginElement.tsx
@@ -21,11 +21,9 @@ export default function LoginElement() {
                     setError(reponse.error);
                 }
                 if (reponse.token) {
-                    console.log(reponse.token)
                     localStorage.setItem('token', reponse.token);
                     localStorage.setItem('username', username);
-                    window.location.href = window.location.href.concat("dashboard");
-
+                    window.location.replace("http://localhost:5173/dashboard");
                 }
             })
             .catch(e => {

diff --git a/Interface/src/elements/PlanElement.tsx b/Interface/src/elements/PlanElement.tsx
diff --git a/Interface/src/elements/SideBarElement.tsx b/Interface/src/elements/SideBarElement.tsx
@@ -13,7 +13,7 @@ export default function SideBarElement() {
             <div className="h-full flex flex-col justify-between px-3 py-4 overflow-y-auto bg-white rounded-2xl dark:bg-slate-800">
                 <div className="space-y-2 font-medium">
                     <Link
-                        className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-400 group" to="/dashboard">
+                        className="flex items-center p-2 text-gray-900 rounded-xl dark:text-white hover:bg-gray-100 dark:hover:bg-slate-950 group" to="/dashboard">
                         <svg
                             className="w-5 h-5 text-gray-500 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                             aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
@@ -26,18 +26,13 @@ export default function SideBarElement() {
                         <span className="flex-1 ms-3 whitespace-nowrap">Dashboard</span>
                     </Link>
                     <Link
-                        className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-400 group" to="/plan">
-                        <svg
-                            className="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
-                            aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
-                            viewBox="0 0 20 20">
-                            <path
-                                d="m17.418 3.623-.018-.008a6.713 6.713 0 0 0-2.4-.569V2h1a1 1 0 1 0 0-2h-2a1 1 0 0 0-1 1v2H9.89A6.977 6.977 0 0 1 12 8v5h-2V8A5 5 0 1 0 0 8v6a1 1 0 0 0 1 1h8v4a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-4h6a1 1 0 0 0 1-1V8a5 5 0 0 0-2.582-4.377ZM6 12H4a1 1 0 0 1 0-2h2a1 1 0 0 1 0 2Z"/>
-                        </svg>
-                        <span className="flex-1 ms-3 whitespace-nowrap">Inbox</span>
+                        className="flex items-center p-2 text-gray-900 rounded-xl dark:text-white hover:bg-gray-100 dark:hover:bg-slate-950 group"
+                        to="/plan">
+                        <img src="floor-plan.svg" className="w-5" alt="floor plan icon"/>
+                        <span className="flex-1 ms-3 whitespace-nowrap">Plan</span>
                     </Link>
                     <Link
-                        className="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-400 group" to="/plan">
+                        className="flex items-center p-2 text-gray-900 rounded-xl dark:text-white hover:bg-gray-100 dark:hover:bg-slate-950 group" to="/plan">
                         <svg
                             className="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-white group-hover:text-gray-900 dark:group-hover:text-white"
                             aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
@@ -49,7 +44,7 @@ export default function SideBarElement() {
                     </Link>
                 </div>
                 <div className="p-2">
-                    <button onClick={logout} className="w-full py-2 bg-gray-100 rounded-xl text-dark dark:text-white hover:bg-gray-200 dark:hover:bg-gray-400">Mon Bouton</button>
+                    <button onClick={logout} className="w-full py-2 rounded-xl text-dark dark:text-white hover:bg-gray-200 dark:hover:bg-slate-950">log out</button>
                 </div>
             </div>
         </aside>

diff --git a/Interface/src/elements/plan/AddRoomElement.tsx b/Interface/src/elements/plan/AddRoomElement.tsx
@@ -0,0 +1,70 @@
+import {useState} from "react";
+import {SampleContext} from "@/contexts/SampleContext.tsx";
+import {getToken} from "@/contexts/lib.tsx";
+
+export default function AddRoomElement() {
+    const apiAuthToken = getToken();
+
+    const [roomName, setRoomName] = useState('');
+    const [newIp, setNewIp] = useState('');
+    const [error, setError] = useState<string>("");
+
+    const addRoom = () => {
+        if (roomName && newIp) {
+            fetch(`${SampleContext.urlData}/esp`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${apiAuthToken}`,
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    ip: newIp,
+                    name: roomName
+                })
+            })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error('Erreur lors de la requête');
+                    }
+                    console.log('Requête POST réussie');
+                })
+                .catch(error => {
+                    console.error('Une erreur s\'est produite:', error);
+                });
+            setNewIp("")
+            setRoomName("")
+            setError("")
+        } else setError("veuillez remplir le champ")
+
+    }
+
+    return (
+        <>
+            <form className="flex gap-8 h-8" onSubmit={(e) => {
+                e.preventDefault();
+                addRoom();
+            }}>
+                <input
+                    value={roomName}
+                    autoComplete={"roomName"}
+                    onChange={(e) => setRoomName(e.target.value)}
+                    className="mt-5 tracking-wide font-semibold text-white-500 w-full px-4 py-4 rounded-lg transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
+                    type="text" placeholder="Room name"/>
+
+                <input
+                    value={newIp}
+                    autoComplete={"newIp"}
+                    onChange={(e) => setNewIp(e.target.value)}
+                    className="mt-5 tracking-wide font-semibold text-white-500 w-full px-4 py-4 rounded-lg transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
+                    type="text" placeholder="New IP"/>
+
+                <button
+                    type="submit"
+                    className="mt-5 tracking-wide font-semibold bg-blue-400 text-white-500 w-full py-4 rounded-lg hover:bg-blue-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none">
+                    Add a room
+                </button>
+            </form>
+            {error}
+        </>
+    )
+}