feat: push production ready version to main (#52)

fix: change dockerfile to work with next js

refactor: added new Ip adresse, rounded data, moved getColor file and changed build output dir (#45)

refactor: added new Ip adresse

refactor: removed output and added distdir to out

refactor: reformated file

refactor: rounded data to two decimals

refactor: changed test Ip to add new one

refactor: removed function param to use react-router params

refactor: moved file to lib folder

refactor: Rounded data  (#42)

refactor: moved file position

fix: fixed import errors

refactor: rounded data to two decimal

refactor: reformated files

refactor: translated comment in english

---------

Co-authored-by: jordyBSK <125542402+jordyBSK@users.noreply.github.com>

fix: tofixed temperature in espmap

feat: added Workflow to check the format and lint  (#46)

refactor: added new Ip adresse

refactor: removed output and added distdir to out

refactor: reformated file

feat: created workflow file to check if the code is correctly formated

refactor: resolve conflit

feat: serve interface using a nodejs server (#48)

fix: allow program to compile by fixing syntaxe error

feat: build the interface on docker start

feat: start nodejs server

feat: serve node server through ngnix

fix: logout redirection (#49)

refactor: reformat code

fix: redirects the user to the login from any page if there is no token

refactor: changed workflow execution type  (#47)

refactor: added new Ip adresse

refactor: removed output and added distdir to out

refactor: reformated file

feat: created workflow file to check if the code is correctly formated

refactor: moved .github directory to root

fix: added change directory to interface

fix: changed on which branch in execute name

refactor: added execution of workflow for new change in commit  (test purpose)

fix: remove useless ip adress

fix: remove github action from next interface folder

---------

Co-authored-by: jordyBSK <125542402+jordyBSK@users.noreply.github.com>

style: properly format code

fix: fix bugs to prepare for release (#50)

---------

Co-authored-by: Alex-zReeZ <145986307+Alex-zReeZ@users.noreply.github.com>
Co-authored-by: Nils Hofstetter <119439839+Rignchen@users.noreply.github.com>

.github/workflows/formating.yml

@@ -0,0 +1,44 @@
+name: Check formatting of project files with Prettier
+
+on:
+  pull_request:
+    types: [ opened, edited, synchronize ]
+    branches:
+      - Dev
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  prettier:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - name: Go to interface
+        run: cd nextjs-interface
+      - name: Install dependencies
+        run: npm install -D
+      - name: Check code style with Prettier
+        run: npm run format
+
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "npm"
+      - name: Go to interface
+        run: cd nextjs-interface
+      - name: Install dependencies
+        run: npm install
+      - name: Lint code with Eslint
+        run: npm run lint

Dockerfile/Dockerfile.Nginx

@@ -1,14 +1,6 @@
-# node 20, build the application
-FROM node:20.12.2-alpine3.19
-COPY ../Interface .
-RUN npm install
-RUN npm run build
-
-
 # nginx 1.26 on port 80, keep the build output, nginx config
 FROM nginx:1.26-alpine-otel
 EXPOSE 80
-COPY --from=0 ../dist /var/www/memoires-info/html
 COPY ../.env /var/www/memoires-info/html/.env
 
 # copy the nginx config

Dockerfile/Dockerfile.Node

@@ -0,0 +1,18 @@
+FROM node:20.12.2-alpine3.19 as base
+
+# node 20, build the application
+FROM base
+WORKDIR /app
+COPY ../nextjs-interface .
+COPY ../.env .
+RUN npm install
+RUN node_modules/.bin/next build
+
+# serve the application
+FROM base
+WORKDIR /var/www/memoires-info/html
+COPY --from=1 /app/out ./out
+COPY --from=1 /app/node_modules/ ./node_modules/
+COPY --from=1 /app/next.config.mjs .
+CMD ["node_modules/.bin/next", "start"]
+

README.md

@@ -40,7 +40,8 @@ sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin
 ## Installation
 First thing you need to do is to clone the repository from GitHub on the server
 ```bash
-git clone https://github.com/museebolo/climat-guardian.git && cd climat-guardian
+git clone https://github.com/museebolo/climat_guardian.git
+cd climat-guardian
 ```
 
 ---
@@ -50,11 +51,10 @@ git clone https://github.com/museebolo/climat-guardian.git && cd climat-guardian
 Once the repository is cloned you can remove the `.example` at the end of the following files:
 - .env.example
 - esp32/config/secrets.yaml.example
-- Interface/src/contexts/SampleContext.example.tsx
+- nextjs-interface/src/contexts/SampleContext.example.tsx
 ```bash
 cp .env.example .env
 cp esp32/config/secrets.yaml.example esp32/config/secrets.yaml
-cp Interface/src/contexts/SampleContext.example.tsx Interface/src/contexts/SampleContext.tsx
 ```
 
 ---
@@ -74,7 +74,7 @@ It is recommended to let the other environment variables as they are
 
 ---
 Finally, you **have to** fill the Wi-Fi credentials in `esp32/config/secrets.yaml`\
-You also **have to** change the `127.0.0.1` in `Interface/src/contexts/SampleContext.tsx` and `esp32/config/secrets.yaml` by the ip address of the server
+You also **have to** change the `127.0.0.1` in `esp32/config/secrets.yaml` by the ip address of the server
 
 ## Start the project
 Once everything is configured on the server, you can start the project by running the docker compose on the server
@@ -97,7 +97,7 @@ This project uses [esp home](https://github.com/esphome/esphome) to manage the e
 - Select the device with ``/dev/ttyUSB0`` as path
 - Wait for the installation to finish\
 Be sure to memorize the ip address of the esp32 (you can find it in the logs)
-$${\color{gray} \text{[15:39:12]} \color{magenta} \text{[C][wifi:416]:   IP Address: 172.16.5.65}}$$
+$${\color{gray} \text{[15:39:12]} \color{magenta} \text{[C]\[wifi:416\]:   IP Address: 172.16.5.65}}$$
 - You can now unplug the esp32 and plug it to any other power source
 - Press `Edit` at the bottom of the logs
 - Copy everything from the line 31 of the file `esp32/esp32.yaml` on the server and paste it at the end of your esp32's configuration file

docker-compose.prod.yml

@@ -57,6 +57,12 @@ services:
     depends_on:
       - postg-rest
 
+  interface:
+    build:
+      context: .
+      dockerfile: Dockerfile/Dockerfile.Node
+    image: interface-memoires-info
+
   web:
     build:
       context: .
@@ -68,3 +74,4 @@ services:
       - php
       - postg-rest
       - esphome
+      - interface

nextjs-interface/next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+  distDir: "out",
+};
 
 export default nextConfig;

nextjs-interface/package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "format": "prettier . --write"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.6.0",

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

@@ -1,34 +1,38 @@
+// import components
 "use client";
+
 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/DateRangeElement";
-import findIpByName, {useFetchData, useLastData} from "@/lib/data";
+
 import { endOfMonth, format, startOfMonth } from "date-fns";
 import { DateRange } from "react-day-picker";
+import findIpByName, { useFetchData, useLastData } from "@/lib/data";
+
 import React from "react";
+import { useParams } from "react-router";
 
+export default function Page() {
+  const params = useParams<{ espName: string }>();
 
-export default function Page({ params }: { params: any }) {
   const [date, setDate] = React.useState<DateRange | undefined>(() => {
     const now = new Date();
     return {
       from: startOfMonth(now),
       to: endOfMonth(now),
     };
   });
-
   const from = date?.from ? format(date.from, "yyyy-MM-dd") : "";
   const to = date?.to ? format(date.to, "yyyy-MM-dd") : "";
   const precision = "day";
 
-  const ip = findIpByName(params.espName);
+  const ip = findIpByName(params.espName || "Loading");
   const allData = useFetchData(precision, ip, from, to);
-    const temperature = useLastData("temperature", ip);
-    const humidity = useLastData("humidity", ip);
-
+  const temperature = useLastData("temperature", ip);
+  const humidity = useLastData("humidity", ip);
 
-    return (
+  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">
         {params.espName}

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

@@ -1,46 +1,24 @@
 "use client";
-
-// import hooks
-import { useState, useEffect } from "react";
-
 // import components
 import DataCircle from "@/app/ui/dashboard/DataCircle";
 
-// import functions
-import { useRouter } from "next/navigation";
-
-
 const ESPList = [
-  { name: "ESP N°1", ip:"172.16.5.178" },
-  { name: "ESP N°2" ,ip:"172.16.4.100"},
-  { name: "ESP N°3" ,ip:"172.16.5.178"},
-  { name: "ESP N°4", ip:"172.16.4.100" },
-  { name: "ESP N°5", ip:"172.16.5.178" },
-  { name: "ESP N°6", ip:"172.16.4.100"},
+  { name: "ESP N°1", ip: "172.16.5.178" },
+  { name: "ESP N°2", ip: "172.16.4.100" },
+  { name: "ESP N°3", ip: "172.16.5.178" },
+  { name: "ESP N°4", ip: "172.16.4.100" },
+  { name: "ESP N°5", ip: "172.16.5.178" },
+  { name: "ESP N°6", ip: "172.16.4.100" },
 ];
 
 export default function Page() {
-  const [token, setToken] = useState<string | null>(null);
-  const router = useRouter();
-
-  useEffect(() => {
-    const storedToken = window.localStorage.getItem("token");
-    if (!storedToken) {
-      router.push("/login");
-    } else {
-      setToken(storedToken);
-      router.push("/dashboard");
-    }
-  }, [router]);
-
   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) => (
-              <DataCircle key={index} esp={esp} />
-
-          ))}
-        </div>
-      </>
+    <>
+      <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) => (
+          <DataCircle key={index} esp={esp} />
+        ))}
+      </div>
+    </>
   );
-}
+}

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

@@ -1,21 +1,21 @@
-import {useLastData} from "@/lib/data";
-import {PieChartTemperature} from "@/app/ui/dashboard/PieChartTemperature";
-import {PieChartHumidity} from "@/app/ui/dashboard/PieChartHumidity";
+import { useLastData } from "@/lib/data";
+import { PieChartTemperature } from "@/app/ui/dashboard/PieChartTemperature";
+import { PieChartHumidity } from "@/app/ui/dashboard/PieChartHumidity";
 
 export default function DataCircle({ esp }: { esp: any }) {
-    const ip = esp.ip;
-    const temperature = useLastData("temperature", ip);
-    const humidity = useLastData("humidity", ip);
+  const ip = esp.ip;
+  const temperature = useLastData("temperature", ip);
+  const humidity = useLastData("humidity", ip);
 
-    return (
-        <div className="flex h-full flex-col items-center rounded-2xl border-2 text-center">
-            <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={temperature} />
-                <PieChartHumidity data={humidity} />
-            </div>
-        </div>
-    );
+  return (
+    <div className="flex h-full flex-col items-center rounded-2xl border-2 text-center">
+      <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={temperature} />
+        <PieChartHumidity data={humidity} />
+      </div>
+    </div>
+  );
 }

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

@@ -14,11 +14,10 @@ import {
 } from "@/components/ui/dropdown-menu";
 
 import { CircleUser, Landmark, Menu } from "lucide-react";
-import { redirect } from "next/navigation";
 
 const logout = () => {
+  window.location.href = "/";
   localStorage.clear();
-  redirect("/login");
 };
 export function HeaderElement() {
   return (