Revert "Revert "sort data by room ip (#35)" (#36)"

This reverts commit 48db262.

nextjs-interface/src/app/dashboard/esp/[espName]/page.tsx

@@ -1,17 +1,28 @@
 "use client";
 
 // import charts
-import { PieChartHumidity } from "@/app/ui/dashboard/PieChartHumidity";
-import { ChartElement } from "@/app/ui/dashboard/ChartElement";
-import { PieChartTemperature } from "@/app/ui/dashboard/PieChartTemperature";
-
-//import date range element
-import { DateRangeElement } from "@/app/ui/dashboard/CalendarElement";
+import {PieChartHumidity} from "@/app/ui/dashboard/PieChartHumidity";
+import {ChartElement} from "@/app/ui/dashboard/ChartElement";
+import {PieChartTemperature} from "@/app/ui/dashboard/PieChartTemperature";
+import {DateRangeElement} from "@/app/ui/dashboard/CalendarElement";
+import {useFetchData} from "@/lib/data";
+import {links} from "@/app/ui/dashboard/espLinks";
 
 const tempData = [{ name: "temperature", value: 23 }];
 const humiData = [{ name: "humidity", value: 38 }];
 
 export default function Page({ params }: { params: any }) {
+  const precision = "day";
+  //
+  // const monthData = useFetchData(precision);
+    function findIpByName(name: string) {
+        const link = links.find((link: { name: string }) => link.name === name);
+        return link ? link.ip : "IP non trouvée";
+    }
+
+    const ip = findIpByName(params.espName);
+    const allData = useFetchData(precision, ip)
+
   return (
     <div className="flex w-full min-w-[500px] flex-col gap-y-5 pt-2">
       <p className="text-2xl font-bold uppercase text-black">
@@ -23,8 +34,9 @@ export default function Page({ params }: { params: any }) {
         <PieChartHumidity data={humiData} />
       </div>
       <div>
-        <ChartElement />
+      <ChartElement data={allData} />
       </div>
+        {ip}
     </div>
   );
 }

nextjs-interface/src/app/dashboard/page.tsx

@@ -2,10 +2,8 @@
 import { PieChartTemperature } from "@/app/ui/dashboard/PieChartTemperature";
 import { PieChartHumidity } from "@/app/ui/dashboard/PieChartHumidity";
 import { useState, useEffect } from "react";
-
-import { useFetchData, useLastData } from "@/lib/data";
-import { useRouter } from "next/router";
-import { redirect } from "next/navigation";
+import {useLastData} from "@/lib/data";
+import { useRouter } from "next/navigation"; // Use useRouter instead of redirect for correct usage in client components
 
 const ESPList = [
   { name: "ESP N°1" },
@@ -21,37 +19,38 @@ const humiData = [{ name: "humidity", value: 35 }];
 
 export default function Page() {
   const [token, setToken] = useState<string | null>(null);
+  const router = useRouter();
 
-  const storedToken = window.localStorage.getItem("token");
-  if (!storedToken) {
-    redirect("/login");
-  }
+  useEffect(() => {
+    const storedToken = window.localStorage.getItem("token");
+    if (!storedToken) {
+      router.push("/login");
+    } else {
+      setToken(storedToken);
+    }
+  }, [router]);
 
-  const precision = "month";
-  const monthData = useFetchData(precision);
   const lasthumidity = useLastData("humidity");
   const lasttemperature = useLastData("temperature");
 
   return (
     <>
       <div className="px-auto grid h-fit w-full min-w-[500px] grid-cols-1 gap-10 xl:grid-cols-2 2xl:grid-cols-3">
-        {ESPList.map((esp, index) => {
-          return (
+        {ESPList.map((esp, index) => (
             <div
-              className="flex h-full flex-col items-center rounded-2xl border-2 text-center"
-              key={index}
+                className="flex h-full flex-col items-center rounded-2xl border-2 text-center"
+                key={index}
             >
               <h2 className="w-full border-b-2 pb-5 pt-5 text-center text-gray-800">
                 {esp.name}
               </h2>
               <div className="sm:py-auto flex h-full w-full flex-row py-14">
-                <PieChartTemperature data={tempData} />
-                <PieChartHumidity data={humiData} />
+                <PieChartTemperature data={tempData}/>
+                <PieChartHumidity data={humiData}/>
               </div>
             </div>
-          );
-        })}
-      </div>
+        ))}
+ </div>
     </>
   );
 }

nextjs-interface/src/app/ui/dashboard/ChartElement.tsx

@@ -12,40 +12,9 @@ import {
 } from "recharts";
 
 import React from "react";
+import { avgData } from "@/lib/context";
 
-export function ChartElement() {
-  const data = [
-    {
-      name: "01/06",
-      temperature: 27,
-      humidity: 24,
-    },
-    {
-      name: "02/06",
-      temperature: 30,
-      humidity: 38,
-    },
-    {
-      name: "03/06",
-      temperature: 25,
-      humidity: 48,
-    },
-    {
-      name: "04/06",
-      temperature: 27,
-      humidity: 39,
-    },
-    {
-      name: "05/06",
-      temperature: 18,
-      humidity: 48,
-    },
-    {
-      name: "06/06",
-      temperature: 23,
-      humidity: 38,
-    },
-  ];
+export function ChartElement({ data }: { data: avgData[] }) {
   return (
     <ResponsiveContainer width="100%" height={500}>
       <LineChart
@@ -58,7 +27,8 @@ export function ChartElement() {
           fontSize={16}
           tickLine={false}
           axisLine={false}
-          dataKey="name"
+          dataKey="date"
+          tickFormatter={(value: string)=> new Date(value).toLocaleDateString()}
           padding={{ left: 20, right: 50 }}
         />
         <YAxis
@@ -76,14 +46,14 @@ export function ChartElement() {
         <Legend />
         <Line
           type="monotone"
-          dataKey="humidity"
+          dataKey="avg_humidity"
           stroke="#8884d8"
           activeDot={{ r: 8 }}
           strokeWidth="2px"
         />
         <Line
           type="monotone"
-          dataKey="temperature"
+          dataKey="avg_temperature"
           strokeWidth="2px"
           stroke="#82ca9d"
         />

nextjs-interface/src/app/ui/dashboard/EspLinksElement.tsx

@@ -26,8 +26,8 @@ export default function EspLinksElement() {
 
   // links state
   const [links, setLinks] = useState([
-    { name: "chasseron", ip: "192.168.123.132" },
-    { name: "pleiades", ip: "192.168.123.132" },
+    { name: "chasseron", ip: "172.16.4.100" },
+    { name: "pleiades", ip: "172.16.5.178" },
   ]);
 
   // newLink state
@@ -55,9 +55,9 @@ export default function EspLinksElement() {
             key={link.name}
             href={href}
             className={clsx(
-              "flex items-center gap-3 rounded-lg text-sm text-gray-500 transition-all hover:text-primary md:py-2",
+              "flex items-center gap-3 rounded-lg text-sm text-zinc-500 transition-all hover:text-primary md:py-2",
               {
-                "": pathname === href,
+                "text-zinc-900": pathname === href,
               },
             )}
           >

nextjs-interface/src/app/ui/dashboard/espLinks.tsx

@@ -0,0 +1,4 @@
+export const links = [
+    { name: "chasseron", ip: "172.16.4.100" },
+    { name: "pleiades", ip: "172.16.5.178" },
+]

nextjs-interface/src/lib/context.tsx

@@ -19,3 +19,11 @@ export interface data {
   timestamp: string;
   ip: string;
 }
+
+export interface avgData {
+  avg_temperature: number;
+  avg_humidity: number;
+  date: string;
+  ip: string;
+  count: number;
+}

nextjs-interface/src/lib/data.ts

@@ -1,20 +1,25 @@
 import { useEffect, useState } from "react";
-import { SampleContext, getToken, AverageData, data } from "@/lib/context";
+import {
+  SampleContext,
+  getToken,
+  data,
+  avgData,
+} from "@/lib/context";
 
-export const useFetchData = (precision: string) => {
-  const [data, setData] = useState<AverageData[]>([]);
+export const useFetchData = (precision: string,ip:string) => {
+  const [data, setData] = useState<avgData[]>([]);
 
   useEffect(() => {
-    const url = `${SampleContext.urlData}/rpc/avg_date?delta=${precision}`;
+    const url = `${SampleContext.urlData}/rpc/avg_date?delta=${precision}&ip=eq.${ip}`;
     fetch(url, { headers: { Authorization: `Bearer ${getToken()}` } })
       .then((response) => response.json())
-      .then((apiData: AverageData[]) => {
+      .then((apiData: avgData[]) => {
         setData(apiData);
       })
       .catch((e) => {
         console.error("Une erreur s'est produite :", e);
       });
-  });
+  }, [ip, precision]);
   return data;
 };
 
@@ -37,4 +42,4 @@ export function useLastData(type: string) {
       });
   }, [type]);
   return temperature;
-}
+}