feat: implement logout (#32)

museebolo · Jun 19, 2024 · e095c1b · e095c1b
1 parent d94906a
commit e095c1b
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 102 deletions.
diff --git a/esp32/esp32.yaml b/esp32/esp32.yaml
@@ -28,7 +28,7 @@ wifi:
     password: "xxxxxxxxxxxx"
 
 captive_portal:
-    
+
 i2c:
   sda: 21
   scl: 22
@@ -48,12 +48,12 @@ sensor:
     id: wifi_strength
     name: "WiFi Signal Sensor"
     update_interval: 10s
-    
+
 font:
-  - file: 'Comic_Sans_MS.ttf'
+  - file: "Comic_Sans_MS.ttf"
     id: font1
     size: 16
-  - file: 'Comic_Sans_MS.ttf'
+  - file: "Comic_Sans_MS.ttf"
     id: font2
     size: 8
 
@@ -62,7 +62,7 @@ graph:
     sensor: temperature
     duration: 60min
     x_grid: 5min
-    y_grid: 5.0 
+    y_grid: 5.0
     width: 151
     height: 51
   - id: humidity_graph
@@ -72,7 +72,7 @@ graph:
     y_grid: 5.0
     width: 151
     height: 51
-  
+
 spi:
   clk_pin: 18
   mosi_pin: 23

diff --git a/nextjs-interface/src/app/dashboard/page.tsx b/nextjs-interface/src/app/dashboard/page.tsx
@@ -2,9 +2,10 @@
 import { PieChartTemperature } from "@/app/ui/dashboard/PieChartTemperature";
 import { PieChartHumidity } from "@/app/ui/dashboard/PieChartHumidity";
 import { useState, useEffect } from "react";
-import { redirect } from "next/navigation";
-import { getToken } from "@/lib/context";
+
 import { useFetchData, useLastData } from "@/lib/data";
+import { useRouter } from "next/router";
+import { redirect } from "next/navigation";
 
 const ESPList = [
   { name: "ESP N°1" },
@@ -21,19 +22,16 @@ const humiData = [{ name: "humidity", value: 35 }];
 export default function Page() {
   const [token, setToken] = useState<string | null>(null);
 
-  useEffect(() => {
-    if (getToken) {
-      setToken(getToken);
-    } else {
-      redirect("/login");
-    }
-  }, []);
-  const precision = "month";
+  const storedToken = window.localStorage.getItem("token");
+  if (!storedToken) {
+    redirect("/login");
+  }
 
+  const precision = "month";
   const monthData = useFetchData(precision);
-  const humidity = useLastData("humidity");
+  const lasthumidity = useLastData("humidity");
+  const lasttemperature = useLastData("temperature");
 
-  const temperature = 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">

diff --git a/nextjs-interface/src/app/globals.css b/nextjs-interface/src/app/globals.css
@@ -74,3 +74,27 @@
     @apply bg-background text-foreground;
   }
 }
+
+.barrier,
+.wall {
+  fill: none;
+  stroke: currentcolor;
+  stroke-width: 0.4px;
+  opacity: 0.6;
+}
+.barrier {
+  opacity: 0.3;
+  stroke-width: 0.2px;
+  stroke-dasharray: 0 200 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2
+    0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75
+    0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2
+    0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2;
+  stroke-dashoffset: 200;
+  transition: all 0.8s ease 0s;
+}
+text {
+  transition: all 1.5s ease;
+}
+svg {
+  transition: all 0.5s ease;
+}
diff --git a/nextjs-interface/src/app/ui/dashboard/HeaderElement.tsx b/nextjs-interface/src/app/ui/dashboard/HeaderElement.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import Link from "next/link";
 
@@ -9,13 +10,14 @@ import EspLinksElement from "@/app/ui/dashboard/EspLinksElement";
 import {
   DropdownMenu,
   DropdownMenuContent,
-  DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 
-// import icons etc..
 import { CircleUser, Landmark, Menu } from "lucide-react";
 
+const logout = () => {
+  localStorage.clear();
+};
 export function HeaderElement() {
   return (
     <div className="flex flex-col">
@@ -53,8 +55,8 @@ export function HeaderElement() {
               <span className="sr-only">Toggle user menu</span>
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem>Logout</DropdownMenuItem>
+          <DropdownMenuContent>
+            <Button onClick={logout}>log out</Button>
           </DropdownMenuContent>
         </DropdownMenu>
       </header>

diff --git a/nextjs-interface/src/app/ui/dashboard/PieChartHumidity.tsx b/nextjs-interface/src/app/ui/dashboard/PieChartHumidity.tsx
@@ -20,15 +20,16 @@ export function PieChartHumidity({ data }: { data: any }) {
   // Fonction pour rendre le libellé au centre du cercle
   const renderCustomizedLabel = ({ cx, cy, index }: CustomizedLabelProps) => {
     return (
-        <text x={cx}
-              y={cy}
-              fill="black"
-              textAnchor="middle"
-              dominantBaseline="central"
-              fontSize={24}
-        >
-          {`${data[index].value}%`}
-        </text>
+      <text
+        x={cx}
+        y={cy}
+        fill="black"
+        textAnchor="middle"
+        dominantBaseline="central"
+        fontSize={24}
+      >
+        {`${data[index].value}%`}
+      </text>
     );
   };
 
@@ -38,23 +39,23 @@ export function PieChartHumidity({ data }: { data: any }) {
   };
 
   return (
-      <div className="flex h-full w-full flex-col justify-center">
-        <h2 className="pr-5">Humidité :</h2>
-        <PieChart width={200} height={200}>
-          <Pie
-              innerRadius={60}
-              dataKey="value"
-              startAngle={270}
-              endAngle={calculateEndAngle(data[0].value)}
-              data={data}
-              cx={100}
-              cy={110}
-              outerRadius={80}
-              fill={newFade}
-              label={renderCustomizedLabel}
-              labelLine={false}
-          />
-        </PieChart>
-      </div>
+    <div className="flex h-full w-full flex-col justify-center">
+      <h2 className="pr-5">Humidité :</h2>
+      <PieChart width={200} height={200}>
+        <Pie
+          innerRadius={60}
+          dataKey="value"
+          startAngle={270}
+          endAngle={calculateEndAngle(data[0].value)}
+          data={data}
+          cx={100}
+          cy={110}
+          outerRadius={80}
+          fill={newFade}
+          label={renderCustomizedLabel}
+          labelLine={false}
+        />
+      </PieChart>
+    </div>
   );
 }
diff --git a/nextjs-interface/src/app/ui/dashboard/PieChartTemperature.tsx b/nextjs-interface/src/app/ui/dashboard/PieChartTemperature.tsx
@@ -20,42 +20,42 @@ export function PieChartTemperature({ data }: { data: any }) {
   // Fonction pour rendre le libellé au centre du cercle
   const renderCustomizedLabel = ({ cx, cy, index }: CustomizedLabelProps) => {
     return (
-        <text
-            x={cx}
-            y={cy}
-            fill="black"
-            textAnchor="middle"
-            dominantBaseline="central"
-            fontSize={24}
-        >
-          {`${data[index].value} °C`}
-        </text>
+      <text
+        x={cx}
+        y={cy}
+        fill="black"
+        textAnchor="middle"
+        dominantBaseline="central"
+        fontSize={24}
+      >
+        {`${data[index].value} °C`}
+      </text>
     );
   };
   const calculateEndAngle = (temperature: number) => {
     return 270 - temperature * 8;
   };
 
   return (
-      <div className="flex h-full w-full flex-col justify-center">
-        <h2 className="pr-5">Température :</h2>
-        <PieChart width={200} height={200}>
-          <Pie
-              innerRadius={60}
-              dataKey="value"
-              startAngle={270}
-              endAngle={calculateEndAngle(data[0].value)}
-              data={data}
-              cx={100}
-              cy={110}
-              outerRadius={80}
-              fill={newColor}
-              label={renderCustomizedLabel}
-              labelLine={false}
-          />
-          <stop offset="5%" stopColor={"#FFF"} stopOpacity={0.8} />
-          <stop offset="95%" stopColor={newColor} stopOpacity={0} />
-        </PieChart>
-      </div>
+    <div className="flex h-full w-full flex-col justify-center">
+      <h2 className="pr-5">Température :</h2>
+      <PieChart width={200} height={200}>
+        <Pie
+          innerRadius={60}
+          dataKey="value"
+          startAngle={270}
+          endAngle={calculateEndAngle(data[0].value)}
+          data={data}
+          cx={100}
+          cy={110}
+          outerRadius={80}
+          fill={newColor}
+          label={renderCustomizedLabel}
+          labelLine={false}
+        />
+        <stop offset="5%" stopColor={"#FFF"} stopOpacity={0.8} />
+        <stop offset="95%" stopColor={newColor} stopOpacity={0} />
+      </PieChart>
+    </div>
   );
 }
diff --git a/nextjs-interface/src/app/ui/plan/Plan.tsx b/nextjs-interface/src/app/ui/plan/Plan.tsx
@@ -56,29 +56,6 @@ export default function Plan() {
 
   return (
     <div>
-      <style>
-        {`
-          .barrier,
-          .wall {
-            fill: none;
-            stroke: currentcolor;
-            stroke-width: 0.4px;
-            opacity: 0.6;
-          }
-          .barrier {
-            opacity: 0.3;
-            stroke-width: 0.2px;
-            stroke-dasharray: 0 200 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2
-              0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75
-              0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2 0.75 0.2
-              0.75 0.2 0.75 0.2 0.75 0.2;
-            stroke-dashoffset: 200;
-            transition: all .8s ease 0s;
-          }
-          text { transition: all 1.5s ease; }
-          svg { transition: all .5s ease; }
-        `}
-      </style>
       <Popover open={open}>
         <PopoverTrigger>
           <Button variant="outline" onClick={() => setOpen(true)}>