From ecc9a07c74e92d35d28dd3081764616f7875f6b5 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Wed, 25 Sep 2024 07:15:14 +0000 Subject: [PATCH 01/23] Change cursor to pointer for home page header links --- src/components/Header.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 641f489..6e940ab 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -31,11 +31,11 @@ const Header = () => { return (
-
+
☰

My Plant

-
+
🔍
From 553e4a9e5228ee6d9baf471839c6c2e34e7b3791 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Wed, 25 Sep 2024 07:47:06 +0000 Subject: [PATCH 02/23] Add prop handling of navigation to Navbar --- src/components/Navbar.jsx | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index e6f2c18..4bc01e9 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,12 +1,30 @@ import PropTypes from "prop-types"; +import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation // Navigation header - used for both detail and plants pages // (with different props values) function Navbar(props) { + const navigate = useNavigate(); // Initialize the navigation hook + + const handleSearchClick = () => { + navigate("/search"); // Navigate to the search page when the icon is clicked + }; + + const handleMenuClick = () => { + navigate("/login"); // Navigate to the login page when the icon is clicked + }; + + const handleBackClick = () => { + navigate(-1); + } + + const clickLeftFunction = props.left == "Back" ? handleBackClick : handleMenuClick; + const guideButton =

🔍

; + return ( ); } @@ -14,6 +32,7 @@ function Navbar(props) { Navbar.propTypes = { left: PropTypes.string, title: PropTypes.number, + showGuide: PropTypes.bool }; export default Navbar; From 0f1543a887f196a639a2991146162f150856e2a8 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Wed, 25 Sep 2024 07:47:43 +0000 Subject: [PATCH 03/23] Update Navbar initialisation for Detail page --- src/pages/Detail.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index ccadaed..05b23af 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -14,7 +14,7 @@ function Detail(props) { return (
- +
From 42b504a241051f8c159574ba04a9115d4ec5a4e2 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Sun, 29 Sep 2024 08:54:50 +0000 Subject: [PATCH 04/23] Reformat Homepage --- src/App.css | 5 ----- src/components/Header.jsx | 1 - src/components/Plant.css | 9 +++++++-- src/pages/HomePage.css | 2 -- 4 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/App.css b/src/App.css index e11e8b9..67ee580 100644 --- a/src/App.css +++ b/src/App.css @@ -1,8 +1,3 @@ -#root { - width: 100vw; - height: 100vh; -} - @font-face { font-family: "Pilser"; src: url("./assets/Pilser.otf") format("opentype"); diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 6e940ab..306a96a 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -14,7 +14,6 @@ // }; // export default Header; -import React from "react"; import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation import "../components/Header.css"; diff --git a/src/components/Plant.css b/src/components/Plant.css index 8506705..e11bb7f 100644 --- a/src/components/Plant.css +++ b/src/components/Plant.css @@ -3,7 +3,6 @@ display: flex; flex-direction: column; align-items: center; - margin: 2vh; /* Adjusted margin for better spacing */ } .plant-image { @@ -37,7 +36,13 @@ /* Responsive adjustments */ @media screen and (max-width: 768px) { .plant-grid { - grid-template-columns: repeat(3, 1fr); /* 2 columns on medium screens */ + grid-template-columns: repeat(3, 1fr); /* 3 columns on large screens */ + } +} + +@media screen and (max-width: 640px) { + .plant-grid { + grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */ } } diff --git a/src/pages/HomePage.css b/src/pages/HomePage.css index 720adb2..d1a5b59 100644 --- a/src/pages/HomePage.css +++ b/src/pages/HomePage.css @@ -1,5 +1,3 @@ .home-page { background-color: #fcffe0; - height: 100vh; - width: 100vw; } From 18d1715ad8748c36b8feee0b6d777ae28fd618b4 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 03:29:26 +0000 Subject: [PATCH 05/23] Change db.json to more current data format --- src/components/Navbar.css | 21 +++++++++++++++++++++ src/components/Navbar.jsx | 3 ++- src/pages/Detail.css | 10 ---------- 3 files changed, 23 insertions(+), 11 deletions(-) create mode 100644 src/components/Navbar.css diff --git a/src/components/Navbar.css b/src/components/Navbar.css new file mode 100644 index 0000000..e39d63c --- /dev/null +++ b/src/components/Navbar.css @@ -0,0 +1,21 @@ +.navbar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #bacd92; + padding: 1vh; + font-family: "PilserBold", sans-serif; +} + +.menu-icon, +.search-icon, +.back-icon { + font-size: 4vh; + margin: 0; +} + +.navbar-title { + font-size: 3vh; + font-weight: bold; + color: #7d9778; +} diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 4bc01e9..cb99e35 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,5 +1,6 @@ import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation +import "../components/Navbar.css" // Navigation header - used for both detail and plants pages // (with different props values) function Navbar(props) { @@ -24,7 +25,7 @@ function Navbar(props) { ); } diff --git a/src/pages/Detail.css b/src/pages/Detail.css index 2601267..ed6d71a 100644 --- a/src/pages/Detail.css +++ b/src/pages/Detail.css @@ -9,16 +9,6 @@ background-size: cover; display: inline-block; } */ -.navbar { - height: 4vh; - /* font-size: 3vh; */ - display: flex; - justify-content: space-between; - align-items: center; - background-color: #bacd92; - padding: 1vh; - font-family: "PilserBold", sans-serif; -} .detail { background-color: #fdfff2; From 8a974544992e2dcfe874fa5ce53c6114c082dacf Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 03:32:36 +0000 Subject: [PATCH 06/23] Change db.json data --- db.json | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/db.json b/db.json index e77f3a7..10560de 100644 --- a/db.json +++ b/db.json @@ -8,8 +8,10 @@ "id": "1", "name": "Orange Tree", "data": { - "sunlight": 25, + "timestamp": "2024-09-29 06:40:40", "moisture": 80, + "sunlight": 25, + "temperature": 50, "vibration": false } }, @@ -17,8 +19,21 @@ "id": "2", "name": "Tomato Plant", "data": { + "timestamp": "2024-09-30 12:32:40", + "moisture": 32, "sunlight": 78, + "temperature": 40, + "vibration": true + } + }, + { + "id": "2", + "name": "Tomato Plant", + "data": { + "timestamp": "2024-09-30 12:32:40", "moisture": 32, + "sunlight": 78, + "temperature": 40, "vibration": true } } From 062c68a41e522bc76914dd92ab4669a96e2875ac Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 06:25:31 +0000 Subject: [PATCH 07/23] Made navigation based on reads from db.json --- db.json | 2 +- src/App.jsx | 65 +++++++++++++++++++++++------------- src/components/Plant.jsx | 7 +++- src/components/PlantGrid.jsx | 17 +++++----- src/pages/Detail.jsx | 1 + src/pages/HomePage.jsx | 5 +-- 6 files changed, 61 insertions(+), 36 deletions(-) diff --git a/db.json b/db.json index 10560de..96c58c6 100644 --- a/db.json +++ b/db.json @@ -27,7 +27,7 @@ } }, { - "id": "2", + "id": "3", "name": "Tomato Plant", "data": { "timestamp": "2024-09-30 12:32:40", diff --git a/src/App.jsx b/src/App.jsx index 73528b0..3e27d86 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -13,7 +13,7 @@ // export default App; import { useEffect, useState } from "react"; -import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; +import { BrowserRouter as Router, Routes, Route, createBrowserRouter, RouterProvider } from "react-router-dom"; import Navbar from "./components/Navbar"; import HomePage from "./pages/HomePage"; import Detail from "./pages/Detail"; @@ -22,10 +22,11 @@ import "./pages/Detail.css"; import SearchPage from "./pages/SearchPage"; import SearchDetail from "./pages/SearchDetail"; import Login from "./pages/Login"; +//import { Device } from "@deco3801-mortein/mortein-sdk/services.gen"; function App() { const [userData, setUserData] = useState(null); - + // const devices = Device.getDevice(); // Function to toggle vibration function toggleVibration(event) { let newDevices = []; @@ -57,29 +58,47 @@ function App() { }) .catch((error) => console.error(error)); }, []); + console.log(userData); + let detailPages = []; + if (userData) { + detailPages = userData.devices.map((device) => ( + {path:`/detail/${device.id}`, + element: + }) + ) + } + + const router = createBrowserRouter([ + {path: "/", + element: + }, + { + path: "/login", + element: + }, + { + path: "/search", + element: + }, + { + path: "/search-detail/:id", + element: + }, + ...detailPages + ]) + console.log(detailPages); + + + + + return ( - - {/* */} - - } /> - } /> - } /> - } /> - 0 && ( - - ) - } - /> - - + + ); } diff --git a/src/components/Plant.jsx b/src/components/Plant.jsx index 183e978..8a57d0d 100644 --- a/src/components/Plant.jsx +++ b/src/components/Plant.jsx @@ -15,9 +15,14 @@ import { Link } from "react-router-dom"; import "./Plant.css"; -function PlantItem({ id, imageSrc, name }) { +function PlantItem(props) { + console.log(props); + const id = props.id; + const imageSrc = props.imageSrc; + const name = props.name; return (
+ {console.log(id)} {name}
{name}
diff --git a/src/components/PlantGrid.jsx b/src/components/PlantGrid.jsx index ee771a0..df098a4 100644 --- a/src/components/PlantGrid.jsx +++ b/src/components/PlantGrid.jsx @@ -1,20 +1,19 @@ import PlantItem from "../components/Plant"; import "../components/PlantGrid"; -const PlantGrid = () => { - const plants = [ - { id: 1, imageSrc: "./src/assets/img/1.1.gif", name: "Plant 1" }, - { id: 2, imageSrc: "./src/assets/img/5.gif", name: "Plant 2" }, - { id: 3, imageSrc: "./src/assets/img/4.gif", name: "Plant 3" }, - { id: 4, imageSrc: "/src/assets/img/1.1.gif", name: "Plant 4" }, - { id: 5, imageSrc: "/src/assets/img/5.gif", name: "Plant 5" }, - { id: 6, imageSrc: "/src/assets/img/4.gif", name: "Plant 6" }, +const PlantGrid = (props) => { + const plants = props.userData.devices; + console.log(plants); + const plantsImages = ["./src/assets/img/1.1.gif", "./src/assets/img/5.gif", "./src/assets/img/4.gif", + "/src/assets/img/1.1.gif", "/src/assets/img/5.gif", "/src/assets/img/4.gif" ]; + let currentImage = 0; return (
+ {console.log(plants[0].id)} {plants.map((plant) => ( - + ))}
); diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 05b23af..92f5614 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -6,6 +6,7 @@ import PropTypes from "prop-types"; // Function for main portion of detail page. function Detail(props) { + console.log("created"); const { id } = useParams(); // Data from API to be displayed const plantData = props.plantData; diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index 691a961..f01daf1 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -17,11 +17,12 @@ import Header from "../components/Header"; import PlantGrid from "../components/PlantGrid"; import "../pages/HomePage.css"; -const HomePage = () => { +const HomePage = (props) => { + console.log(props.userData); return (
- + {props.userData && }
); }; From 32fcc86152ca6c285404191300631d1f3ab46e2b Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 08:04:23 +0000 Subject: [PATCH 08/23] Add another plant to db.json --- db.json | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/db.json b/db.json index 96c58c6..73d6618 100644 --- a/db.json +++ b/db.json @@ -28,7 +28,7 @@ }, { "id": "3", - "name": "Tomato Plant", + "name": "Potato Plant", "data": { "timestamp": "2024-09-30 12:32:40", "moisture": 32, @@ -36,7 +36,19 @@ "temperature": 40, "vibration": true } + }, + { + "id": "4", + "name": "Lemon Tree", + "data": { + "timestamp": "2024-09-30 12:32:40", + "moisture": 32, + "sunlight": 50, + "temperature": 40, + "vibration": false + } } + ] } ] From 3d4364b78a7fe6f4cd1ad8b43ecb6e6fa33d825e Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 08:05:03 +0000 Subject: [PATCH 09/23] Add proptypes --- src/App.jsx | 20 +++++++++----------- src/components/Navbar.jsx | 2 +- src/components/Plant.jsx | 9 +++++++-- src/components/PlantGrid.jsx | 13 +++++++------ src/pages/Detail.jsx | 3 --- src/pages/HomePage.jsx | 6 +++++- 6 files changed, 29 insertions(+), 24 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 3e27d86..a6e4309 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -13,8 +13,7 @@ // export default App; import { useEffect, useState } from "react"; -import { BrowserRouter as Router, Routes, Route, createBrowserRouter, RouterProvider } from "react-router-dom"; -import Navbar from "./components/Navbar"; +import { createBrowserRouter, RouterProvider } from "react-router-dom"; import HomePage from "./pages/HomePage"; import Detail from "./pages/Detail"; import "./App.css"; @@ -29,6 +28,7 @@ function App() { // const devices = Device.getDevice(); // Function to toggle vibration function toggleVibration(event) { + console.log(event.target.value); let newDevices = []; for (let i = 0; i < userData.devices.length; i++) { let device = userData.devices[i]; @@ -42,6 +42,7 @@ function App() { }; } newDevices.push(device); + console.log(newDevices); } setUserData((prevData) => ({ ...prevData, @@ -58,19 +59,23 @@ function App() { }) .catch((error) => console.error(error)); }, []); - console.log(userData); + + const plantImages = ["./src/assets/img/1.1.gif", "./src/assets/img/3.gif", "./src/assets/img/4.gif"]; + let currentImage = 0; let detailPages = []; if (userData) { detailPages = userData.devices.map((device) => ( {path:`/detail/${device.id}`, element: }) ) } + // Create page routes const router = createBrowserRouter([ {path: "/", element: @@ -89,16 +94,9 @@ function App() { }, ...detailPages ]) - console.log(detailPages); - - - - - return ( - - + ); } diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index cb99e35..4b167c0 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -32,7 +32,7 @@ function Navbar(props) { Navbar.propTypes = { left: PropTypes.string, - title: PropTypes.number, + title: PropTypes.string, showGuide: PropTypes.bool }; diff --git a/src/components/Plant.jsx b/src/components/Plant.jsx index 8a57d0d..b22e171 100644 --- a/src/components/Plant.jsx +++ b/src/components/Plant.jsx @@ -12,17 +12,16 @@ // export default PlantItem; +import PropTypes from "prop-types"; import { Link } from "react-router-dom"; import "./Plant.css"; function PlantItem(props) { - console.log(props); const id = props.id; const imageSrc = props.imageSrc; const name = props.name; return (
- {console.log(id)} {name}
{name}
@@ -32,4 +31,10 @@ function PlantItem(props) { ); } +PlantItem.propTypes = { + id: PropTypes.string, + imageSrc: PropTypes.string, + name: PropTypes.string, +}; + export default PlantItem; diff --git a/src/components/PlantGrid.jsx b/src/components/PlantGrid.jsx index df098a4..dd15cae 100644 --- a/src/components/PlantGrid.jsx +++ b/src/components/PlantGrid.jsx @@ -1,24 +1,25 @@ +import PropTypes from "prop-types"; import PlantItem from "../components/Plant"; import "../components/PlantGrid"; const PlantGrid = (props) => { const plants = props.userData.devices; - console.log(plants); - const plantsImages = ["./src/assets/img/1.1.gif", "./src/assets/img/5.gif", "./src/assets/img/4.gif", - "/src/assets/img/1.1.gif", "/src/assets/img/5.gif", "/src/assets/img/4.gif" - ]; + const plantImages = ["./src/assets/img/1.1.gif", "./src/assets/img/5.gif", "./src/assets/img/4.gif"]; let currentImage = 0; return (
- {console.log(plants[0].id)} {plants.map((plant) => ( - + ))}
); }; +PlantGrid.propTypes = { + userData: PropTypes.object +}; + export default PlantGrid; // import React from 'react'; diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 92f5614..ecfd96d 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -1,4 +1,3 @@ -import { useParams } from "react-router-dom"; import Meter from "../components/Meter"; import "../pages/Detail.css"; import Navbar from "../components/Navbar"; @@ -6,8 +5,6 @@ import PropTypes from "prop-types"; // Function for main portion of detail page. function Detail(props) { - console.log("created"); - const { id } = useParams(); // Data from API to be displayed const plantData = props.plantData; const moistureData = props.plantData.data.moisture; diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index f01daf1..da3cada 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -13,12 +13,12 @@ // export default HomePage; +import PropTypes from "prop-types"; import Header from "../components/Header"; import PlantGrid from "../components/PlantGrid"; import "../pages/HomePage.css"; const HomePage = (props) => { - console.log(props.userData); return (
@@ -27,4 +27,8 @@ const HomePage = (props) => { ); }; +HomePage.propTypes = { + userData: PropTypes.object +}; + export default HomePage; From 52cfc2555889b1a818df6cc3ba07e51da9250620 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 08:08:37 +0000 Subject: [PATCH 10/23] Add prettier format --- db.json | 1 - src/App.jsx | 61 ++++++++++++++++++------------------ src/components/Header.jsx | 4 +-- src/components/Navbar.jsx | 22 ++++++++++--- src/components/PlantGrid.jsx | 15 +++++++-- src/pages/Detail.jsx | 2 +- src/pages/HomePage.jsx | 4 +-- 7 files changed, 65 insertions(+), 44 deletions(-) diff --git a/db.json b/db.json index 73d6618..dce16a3 100644 --- a/db.json +++ b/db.json @@ -48,7 +48,6 @@ "vibration": false } } - ] } ] diff --git a/src/App.jsx b/src/App.jsx index a6e4309..dddd960 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -60,44 +60,45 @@ function App() { .catch((error) => console.error(error)); }, []); - const plantImages = ["./src/assets/img/1.1.gif", "./src/assets/img/3.gif", "./src/assets/img/4.gif"]; + const plantImages = [ + "./src/assets/img/1.1.gif", + "./src/assets/img/3.gif", + "./src/assets/img/4.gif", + ]; let currentImage = 0; let detailPages = []; if (userData) { - detailPages = userData.devices.map((device) => ( - {path:`/detail/${device.id}`, - element: - }) - ) + detailPages = userData.devices.map((device) => ({ + path: `/detail/${device.id}`, + element: ( + + ), + })); } // Create page routes const router = createBrowserRouter([ - {path: "/", - element: - }, - { - path: "/login", - element: - }, - { - path: "/search", - element: - }, - { - path: "/search-detail/:id", - element: - }, - ...detailPages - ]) + { path: "/", element: }, + { + path: "/login", + element: , + }, + { + path: "/search", + element: , + }, + { + path: "/search-detail/:id", + element: , + }, + ...detailPages, + ]); - return ( - - ); + return ; } export default App; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 306a96a..51bebf1 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -30,11 +30,11 @@ const Header = () => { return (
-
+
☰

My Plant

-
+
🔍
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx index 4b167c0..7d0131b 100644 --- a/src/components/Navbar.jsx +++ b/src/components/Navbar.jsx @@ -1,6 +1,6 @@ import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation -import "../components/Navbar.css" +import "../components/Navbar.css"; // Navigation header - used for both detail and plants pages // (with different props values) function Navbar(props) { @@ -16,14 +16,26 @@ function Navbar(props) { const handleBackClick = () => { navigate(-1); - } + }; const clickLeftFunction = props.left == "Back" ? handleBackClick : handleMenuClick; - const guideButton =

🔍

; + const guideButton = ( +

+ 🔍 +

+ ); return ( @@ -33,7 +45,7 @@ function Navbar(props) { Navbar.propTypes = { left: PropTypes.string, title: PropTypes.string, - showGuide: PropTypes.bool + showGuide: PropTypes.bool, }; export default Navbar; diff --git a/src/components/PlantGrid.jsx b/src/components/PlantGrid.jsx index dd15cae..3907364 100644 --- a/src/components/PlantGrid.jsx +++ b/src/components/PlantGrid.jsx @@ -4,20 +4,29 @@ import "../components/PlantGrid"; const PlantGrid = (props) => { const plants = props.userData.devices; - const plantImages = ["./src/assets/img/1.1.gif", "./src/assets/img/5.gif", "./src/assets/img/4.gif"]; + const plantImages = [ + "./src/assets/img/1.1.gif", + "./src/assets/img/5.gif", + "./src/assets/img/4.gif", + ]; let currentImage = 0; return (
{plants.map((plant) => ( - + ))}
); }; PlantGrid.propTypes = { - userData: PropTypes.object + userData: PropTypes.object, }; export default PlantGrid; diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index ecfd96d..95f7fce 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -12,7 +12,7 @@ function Detail(props) { return (
- +
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index da3cada..fe20517 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -22,13 +22,13 @@ const HomePage = (props) => { return (
- {props.userData && } + {props.userData && }
); }; HomePage.propTypes = { - userData: PropTypes.object + userData: PropTypes.object, }; export default HomePage; From 869503e05cfe4df44ace59d3885277b1dc135012 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 08:44:18 +0000 Subject: [PATCH 11/23] Add header props and make searchpage use header component --- src/components/Header.jsx | 38 ++++++++++++++++++++++++++++++-------- src/pages/SearchPage.jsx | 17 +++-------------- 2 files changed, 33 insertions(+), 22 deletions(-) diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 51bebf1..c607591 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -14,10 +14,11 @@ // }; // export default Header; +import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation import "../components/Header.css"; -const Header = () => { +const Header = (props) => { const navigate = useNavigate(); // Initialize the navigation hook const handleSearchClick = () => { @@ -28,17 +29,38 @@ const Header = () => { navigate("/login"); // Navigate to the login page when the icon is clicked }; + const handleBackClick = () => { + navigate(-1); + }; + + const clickLeftFunction = props.left == "Back" ? handleBackClick : handleMenuClick; + const guideButton = ( +

+ 🔍 +

+ ); + return (
-
- ☰ -
-

My Plant

-
- 🔍 -
+ {props.left == "Back" ? ( +

+ < +

+ ) : ( +

+ ☰ +

+ )} +

{props.title}

+ {props.showGuide ? guideButton :
}
); }; +Header.propTypes = { + left: PropTypes.string, + title: PropTypes.string, + showGuide: PropTypes.bool, +}; + export default Header; diff --git a/src/pages/SearchPage.jsx b/src/pages/SearchPage.jsx index 685a955..4a82b46 100644 --- a/src/pages/SearchPage.jsx +++ b/src/pages/SearchPage.jsx @@ -1,7 +1,7 @@ -import React, { useState } from "react"; +import { useState } from "react"; import { useNavigate } from "react-router-dom"; import { SearchBar } from "../components/SearchBar"; -import Navbar from "../components/Navbar"; +import Header from "../components/Header"; import "../pages/SearchPage.css"; const SearchPage = () => { @@ -12,22 +12,11 @@ const SearchPage = () => { const handlePlantClick = (id) => { navigate(`/search-detail/${id}`); // Navigate to the renamed SearchDetail page }; - let new_results = []; return (
- +
- {/* {console.log(results)} - {console.log(results.map((plant) => plant.common_name))} -
    - {new_results = results.map((plant) => ( -
  • - {plant.common_name} -
    • - ))} - {new_results} -
*/}
    {results.map((plant) => (
  • Date: Mon, 30 Sep 2024 08:45:03 +0000 Subject: [PATCH 12/23] Remove underline from homepage links --- src/components/Plant.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Plant.css b/src/components/Plant.css index e11bb7f..79ae57e 100644 --- a/src/components/Plant.css +++ b/src/components/Plant.css @@ -14,8 +14,8 @@ .plant-name { align-items: center; - margin-top: 2vh; /* Adjusted margin for better spacing */ font-size: 1.5rem; + margin-bottom: 1vh; color: #75a47f; } @@ -23,6 +23,7 @@ display: flex; flex-direction: column; align-items: center; + text-decoration-line: none; } /* PlantGrid CSS */ From b6bb410b46c69dc6172be1744a7a0e669acd1868 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 08:46:06 +0000 Subject: [PATCH 13/23] Add props in header of homepage --- src/pages/HomePage.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index fe20517..b39acd7 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -21,7 +21,7 @@ import "../pages/HomePage.css"; const HomePage = (props) => { return (
    -
    +
    {props.userData && }
    ); From 8ead1ad9ac739148f2bde8b16c1e30afa625b235 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 08:46:37 +0000 Subject: [PATCH 14/23] Add image prop to detail component --- src/App.jsx | 10 ++++++---- src/pages/Detail.jsx | 8 +++++--- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index dddd960..aa5ffe1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -21,6 +21,10 @@ import "./pages/Detail.css"; import SearchPage from "./pages/SearchPage"; import SearchDetail from "./pages/SearchDetail"; import Login from "./pages/Login"; +import image1 from "./assets/img/1.1.gif"; +import image2 from "./assets/img/5.gif"; +import image3 from "./assets/img/4.gif"; + //import { Device } from "@deco3801-mortein/mortein-sdk/services.gen"; function App() { @@ -61,9 +65,7 @@ function App() { }, []); const plantImages = [ - "./src/assets/img/1.1.gif", - "./src/assets/img/3.gif", - "./src/assets/img/4.gif", + image1,image2,image3 ]; let currentImage = 0; let detailPages = []; @@ -73,7 +75,7 @@ function App() { element: ( ), diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 95f7fce..3ba0670 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -1,21 +1,22 @@ import Meter from "../components/Meter"; import "../pages/Detail.css"; -import Navbar from "../components/Navbar"; +import Header from "../components/Header"; import PropTypes from "prop-types"; // Function for main portion of detail page. function Detail(props) { // Data from API to be displayed + console.log(props.imageSrc); const plantData = props.plantData; const moistureData = props.plantData.data.moisture; const sunlightData = props.plantData.data.sunlight; return (
    - +
    - + Image of plant

    {plantData.name}

    @@ -42,6 +43,7 @@ function Detail(props) { Detail.propTypes = { plantData: PropTypes.object, toggleVibration: PropTypes.func, + imageSrc: PropTypes.string }; export default Detail; From 7f43a89241c87f500a9b90a22eb84e3d0fe5bc7f Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 08:47:58 +0000 Subject: [PATCH 15/23] Add prettier formatting --- src/App.jsx | 4 +--- src/pages/Detail.jsx | 2 +- src/pages/HomePage.jsx | 2 +- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index aa5ffe1..29b5d29 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -64,9 +64,7 @@ function App() { .catch((error) => console.error(error)); }, []); - const plantImages = [ - image1,image2,image3 - ]; + const plantImages = [image1, image2, image3]; let currentImage = 0; let detailPages = []; if (userData) { diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 3ba0670..07945b2 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -43,7 +43,7 @@ function Detail(props) { Detail.propTypes = { plantData: PropTypes.object, toggleVibration: PropTypes.func, - imageSrc: PropTypes.string + imageSrc: PropTypes.string, }; export default Detail; diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx index b39acd7..6332805 100644 --- a/src/pages/HomePage.jsx +++ b/src/pages/HomePage.jsx @@ -21,7 +21,7 @@ import "../pages/HomePage.css"; const HomePage = (props) => { return (
    -
    +
    {props.userData && }
    ); From b40d4a023a66948fcba4e7cd7acf029c4487aa50 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 09:11:14 +0000 Subject: [PATCH 16/23] Fix formatting --- src/App.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/App.css b/src/App.css index 67ee580..339c7ae 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,7 @@ +:root { + box-sizing: border-box; +} + @font-face { font-family: "Pilser"; src: url("./assets/Pilser.otf") format("opentype"); @@ -17,4 +21,5 @@ body { font-family: "Pilser", sans-serif; margin: 0; padding: 0; + background-color: #fcffe0; } From 96e781d753b9107ecd8bf3ab114f6561f1c1e3fe Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 14:47:10 +0000 Subject: [PATCH 17/23] Revert to dynamic routing and implement in detail page --- src/App.jsx | 78 ++++++++++++-------------------------------- src/pages/Detail.jsx | 29 +++++++++------- 2 files changed, 38 insertions(+), 69 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 29b5d29..3c7e535 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,19 +1,5 @@ -// import React from 'react'; -// import HomePage from './page/HomePage'; -// import './App.css'; - -// function App() { -// return ( -//
    -// -//
    -// ); -// } - -// export default App; - import { useEffect, useState } from "react"; -import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import HomePage from "./pages/HomePage"; import Detail from "./pages/Detail"; import "./App.css"; @@ -21,18 +7,12 @@ import "./pages/Detail.css"; import SearchPage from "./pages/SearchPage"; import SearchDetail from "./pages/SearchDetail"; import Login from "./pages/Login"; -import image1 from "./assets/img/1.1.gif"; -import image2 from "./assets/img/5.gif"; -import image3 from "./assets/img/4.gif"; - -//import { Device } from "@deco3801-mortein/mortein-sdk/services.gen"; function App() { const [userData, setUserData] = useState(null); - // const devices = Device.getDevice(); + // Function to toggle vibration function toggleVibration(event) { - console.log(event.target.value); let newDevices = []; for (let i = 0; i < userData.devices.length; i++) { let device = userData.devices[i]; @@ -46,7 +26,6 @@ function App() { }; } newDevices.push(device); - console.log(newDevices); } setUserData((prevData) => ({ ...prevData, @@ -64,41 +43,26 @@ function App() { .catch((error) => console.error(error)); }, []); - const plantImages = [image1, image2, image3]; - let currentImage = 0; - let detailPages = []; - if (userData) { - detailPages = userData.devices.map((device) => ({ - path: `/detail/${device.id}`, - element: ( - + {/* */} + + } /> + } /> + } /> + } /> + 0 && ( + + ) + } /> - ), - })); - } - - // Create page routes - const router = createBrowserRouter([ - { path: "/", element: }, - { - path: "/login", - element: , - }, - { - path: "/search", - element: , - }, - { - path: "/search-detail/:id", - element: , - }, - ...detailPages, - ]); - - return ; + + + ); } export default App; diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 07945b2..20baaaf 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -1,23 +1,29 @@ +import { useParams } from "react-router-dom"; import Meter from "../components/Meter"; import "../pages/Detail.css"; -import Header from "../components/Header"; +import Navbar from "../components/Navbar"; import PropTypes from "prop-types"; +import image1 from "../assets/img/1.1.gif"; +import image2 from "../assets/img/5.gif"; +import image3 from "../assets/img/4.gif"; // Function for main portion of detail page. function Detail(props) { + const { id } = useParams(); + const device = props.userData.devices[id - 1]; // Data from API to be displayed - console.log(props.imageSrc); - const plantData = props.plantData; - const moistureData = props.plantData.data.moisture; - const sunlightData = props.plantData.data.sunlight; + const moistureData = device.data.moisture; + const sunlightData = device.data.sunlight; + + const plantImages = [image1, image2, image3]; return (
    -
    +
    - Image of plant -

    {plantData.name}

    + +

    {device.name}

    @@ -28,10 +34,10 @@ function Detail(props) {

    Vibration

    @@ -41,9 +47,8 @@ function Detail(props) { } Detail.propTypes = { - plantData: PropTypes.object, + userData: PropTypes.array, toggleVibration: PropTypes.func, - imageSrc: PropTypes.string, }; export default Detail; From 34f8585f20a7bf2bcde917d33d172bb023a754c5 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 14:59:30 +0000 Subject: [PATCH 18/23] Change db.json data to floats --- db.json | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/db.json b/db.json index dce16a3..5044029 100644 --- a/db.json +++ b/db.json @@ -5,46 +5,46 @@ "username": "gardener", "devices": [ { - "id": "1", + "id": "0", "name": "Orange Tree", "data": { "timestamp": "2024-09-29 06:40:40", - "moisture": 80, - "sunlight": 25, - "temperature": 50, + "moisture": 80.0, + "sunlight": 25.5, + "temperature": 50.32, "vibration": false } }, { - "id": "2", + "id": "1", "name": "Tomato Plant", "data": { "timestamp": "2024-09-30 12:32:40", - "moisture": 32, - "sunlight": 78, - "temperature": 40, + "moisture": 32.89, + "sunlight": 78.56, + "temperature": 40.02, "vibration": true } }, { - "id": "3", + "id": "2", "name": "Potato Plant", "data": { "timestamp": "2024-09-30 12:32:40", - "moisture": 32, - "sunlight": 78, - "temperature": 40, + "moisture": 32.98, + "sunlight": 78.5, + "temperature": 40.32, "vibration": true } }, { - "id": "4", + "id": "3", "name": "Lemon Tree", "data": { "timestamp": "2024-09-30 12:32:40", - "moisture": 32, - "sunlight": 50, - "temperature": 40, + "moisture": 32.43, + "sunlight": 50.5, + "temperature": 40.23, "vibration": false } } From 5c4642523504b033174e4168b348ba1d73282e80 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 15:01:41 +0000 Subject: [PATCH 19/23] Add showGuide prop to header --- src/pages/Detail.jsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 20baaaf..2c6f7b6 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -19,10 +19,14 @@ function Detail(props) { return (
    - +
    - + Plant image

    {device.name}

    From c1bf66bf3b297657726ba9aa719acb97cdeabcc4 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Mon, 30 Sep 2024 15:02:18 +0000 Subject: [PATCH 20/23] Change navbar component to header --- src/pages/Detail.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 2c6f7b6..29be11c 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -1,7 +1,7 @@ import { useParams } from "react-router-dom"; import Meter from "../components/Meter"; import "../pages/Detail.css"; -import Navbar from "../components/Navbar"; +import Header from "../components/Navbar"; import PropTypes from "prop-types"; import image1 from "../assets/img/1.1.gif"; import image2 from "../assets/img/5.gif"; @@ -19,7 +19,7 @@ function Detail(props) { return (
    - +
    Date: Wed, 2 Oct 2024 06:44:46 +0000 Subject: [PATCH 21/23] Change image selection using id --- src/pages/Detail.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index 29be11c..e84573c 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -10,7 +10,7 @@ import image3 from "../assets/img/4.gif"; // Function for main portion of detail page. function Detail(props) { const { id } = useParams(); - const device = props.userData.devices[id - 1]; + const device = props.userData.devices[id]; // Data from API to be displayed const moistureData = device.data.moisture; const sunlightData = device.data.sunlight; @@ -23,7 +23,7 @@ function Detail(props) {
    Plant image From 59db988655906501d76b3de01235c67dcd434910 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Wed, 2 Oct 2024 06:48:00 +0000 Subject: [PATCH 22/23] Prettier format --- src/pages/Detail.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/Detail.jsx b/src/pages/Detail.jsx index e84573c..79624ec 100644 --- a/src/pages/Detail.jsx +++ b/src/pages/Detail.jsx @@ -22,11 +22,7 @@ function Detail(props) {
    - Plant image + Plant image

    {device.name}

    From 21b71165ba438c2286d6ab43d5a2250d2899ed81 Mon Sep 17 00:00:00 2001 From: Amelia Caddie Date: Wed, 2 Oct 2024 06:54:25 +0000 Subject: [PATCH 23/23] Import images to work when app is built --- src/components/PlantGrid.jsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/PlantGrid.jsx b/src/components/PlantGrid.jsx index 3907364..96ed6b8 100644 --- a/src/components/PlantGrid.jsx +++ b/src/components/PlantGrid.jsx @@ -1,14 +1,13 @@ import PropTypes from "prop-types"; import PlantItem from "../components/Plant"; import "../components/PlantGrid"; +import image1 from "../assets/img/1.1.gif"; +import image2 from "../assets/img/5.gif"; +import image3 from "../assets/img/4.gif"; const PlantGrid = (props) => { const plants = props.userData.devices; - const plantImages = [ - "./src/assets/img/1.1.gif", - "./src/assets/img/5.gif", - "./src/assets/img/4.gif", - ]; + const plantImages = [image1, image2, image3]; let currentImage = 0; return (