From 522da2968716c1a000f5e1bb5584abfde117df7e Mon Sep 17 00:00:00 2001
From: Hajar RAHMOUNI <hajar.rahmouni@etu.univ-lehavre.fr>
Date: Sat, 13 May 2023 16:00:20 +0200
Subject: [PATCH 1/3] Link changes color when it's clicked

---
 src/routes/rout.jsx | 42 ++++++++++++++++++++++++++++++++----------
 1 file changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/routes/rout.jsx b/src/routes/rout.jsx
index 6973314..6b06fb5 100644
--- a/src/routes/rout.jsx
+++ b/src/routes/rout.jsx
@@ -66,27 +66,49 @@ export default function Root() {
     }
     setIsConnected(true);
   };
-
+  function navLinkClicked(event) {
+    event.preventDefault();
+    const clickedLink = event.target;
+    clickedLink.style.color = '#87CEEB';
+    if (window.lastClickedNavbarLink && window.lastClickedNavbarLink !== clickedLink) {
+      window.lastClickedNavbarLink.style.color = '';
+    }
+    window.lastClickedNavbarLink = clickedLink;
+  }
+  
+  function sensorLinkClicked(event) {
+    const clickedSensorLink = event.target;
+    clickedSensorLink.style.color = '#87CEEB';
+    if (window.lastClickedSensorLink && window.lastClickedSensorLink !== clickedSensorLink) {
+      window.lastClickedSensorLink.style.color = '';
+    }
+    window.lastClickedSensorLink = clickedSensorLink;
+    // On recupère la dernière nav bar link et on mets à jour sa couleur
+    if (window.lastClickedNavbarLink) {
+      window.lastClickedNavbarLink.style.color = '#87CEEB';
+    }
+  }
+  
   return (
     <>
       <div className={styles.wrapper}>
         <div className={styles.header}>
           <div className={styles.navbar}>
-            <a href="">Real time sensors</a>
-            <a href={window.location.pathname}>Other</a>
-            <a href={window.location.pathname}>Foo</a>
+            <a href="/" onClick={navLinkClicked}>Real time sensors</a>
+            <a href="#" onClick={navLinkClicked}>Other</a>
+            <a href="#" onClick={navLinkClicked}>Foo</a>
           </div>
         </div>
         <div className={styles.sidebar}>
           <h1 className={styles.sensors}>Sensors</h1>
           <div className={styles.listSensors}>
             <nav>
-            {sensors.length ? (
-            <ul>
-              {sensors.map((sensor) => (
-                <li key={sensor.id}>
-                  <Link to={`/${sensor.name}`}>
-                    {sensor.name ? (
+              {sensors.length ? (
+                <ul>
+                  {sensors.map((sensor) => (
+                    <li key={sensor.id}>
+                      <Link onClick={sensorLinkClicked} to={`/${sensor.name}`}>
+                        {sensor.name ? (
                       <>
                         {sensor.name}
                       </>
-- 
GitLab


From 89ad6f808b712606336400a6b389a559784691e0 Mon Sep 17 00:00:00 2001
From: Hajar RAHMOUNI <hajar.rahmouni@etu.univ-lehavre.fr>
Date: Sat, 13 May 2023 16:05:58 +0200
Subject: [PATCH 2/3] Make the historique div scrollable

---
 src/index.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/index.module.css b/src/index.module.css
index 7870459..319db49 100644
--- a/src/index.module.css
+++ b/src/index.module.css
@@ -118,4 +118,8 @@ nav li a:hover {
 }
 .mqtt {
   font-weight: normal;
+}
+.historique {
+  max-height: 300px;
+  overflow-y: scroll;
 }
\ No newline at end of file
-- 
GitLab


From 26524cf8b4ddf9b945ec45393cdeae7a330808bc Mon Sep 17 00:00:00 2001
From: Hajar RAHMOUNI <hajar.rahmouni@etu.univ-lehavre.fr>
Date: Sat, 13 May 2023 16:37:36 +0200
Subject: [PATCH 3/3] Alternate background color of sensor values

---
 src/index.module.css  | 9 ++++++++-
 src/routes/rout.jsx   | 6 +++---
 src/routes/sensor.jsx | 2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/index.module.css b/src/index.module.css
index 319db49..33059c8 100644
--- a/src/index.module.css
+++ b/src/index.module.css
@@ -122,4 +122,11 @@ nav li a:hover {
 .historique {
   max-height: 300px;
   overflow-y: scroll;
-}
\ No newline at end of file
+}
+.listItem:nth-child(even) {
+  background-color: #cbc7c7;
+}
+
+.listItem:nth-child(odd) {
+  background-color: #ffffff;
+}
diff --git a/src/routes/rout.jsx b/src/routes/rout.jsx
index 6b06fb5..3ade942 100644
--- a/src/routes/rout.jsx
+++ b/src/routes/rout.jsx
@@ -94,9 +94,9 @@ export default function Root() {
       <div className={styles.wrapper}>
         <div className={styles.header}>
           <div className={styles.navbar}>
-            <a href="/" onClick={navLinkClicked}>Real time sensors</a>
-            <a href="#" onClick={navLinkClicked}>Other</a>
-            <a href="#" onClick={navLinkClicked}>Foo</a>
+            <Link onClick={navLinkClicked} to={`/`}>Real time sensors</Link>
+            <a href={window.location.pathname} onClick={navLinkClicked}>Other</a>
+            <a href={window.location.pathname} onClick={navLinkClicked}>Foo</a>
           </div>
         </div>
         <div className={styles.sidebar}>
diff --git a/src/routes/sensor.jsx b/src/routes/sensor.jsx
index eb2ef6b..7f0640e 100644
--- a/src/routes/sensor.jsx
+++ b/src/routes/sensor.jsx
@@ -22,7 +22,7 @@ export default function Sensor(){
         <h2>Historique</h2>
         <div className={styles.historique}>
             {getSensor(sensorName).map((value, index) => (
-                <div key={index}>{value}</div>
+                <div key={index}  className={styles.listItem}>{value}</div>
             ))}
         </div>
       </div>
-- 
GitLab