From 33b62376a1b255b2f31b436bd7b54298306e19b8 Mon Sep 17 00:00:00 2001 From: LoopFruits Date: Sat, 30 Sep 2023 18:18:18 -0400 Subject: [PATCH 1/4] added react scroll to application --- Open-Source/package-lock.json | 47 +++++++++++++++++++----- Open-Source/package.json | 3 +- Open-Source/src/App.jsx | 12 ++++-- Open-Source/src/Components.css | 31 +++++++++++++++- Open-Source/src/Components/Building.jsx | 20 +++++----- Open-Source/src/Components/CampusMap.jsx | 13 +++++-- Open-Source/src/Components/NavBar.jsx | 16 ++++++++ 7 files changed, 114 insertions(+), 28 deletions(-) create mode 100644 Open-Source/src/Components/NavBar.jsx diff --git a/Open-Source/package-lock.json b/Open-Source/package-lock.json index 610dbee..819b419 100644 --- a/Open-Source/package-lock.json +++ b/Open-Source/package-lock.json @@ -12,7 +12,8 @@ "leaflet": "^1.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-leaflet": "^4.2.1" + "react-leaflet": "^4.2.1", + "react-scroll": "^1.8.9" }, "devDependencies": { "@types/react": "^18.2.15", @@ -2317,6 +2318,11 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "node_modules/lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -2374,7 +2380,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -2624,7 +2629,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -2686,8 +2690,7 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-leaflet": { "version": "4.2.1", @@ -2702,6 +2705,19 @@ "react-dom": "^18.0.0" } }, + "node_modules/react-scroll": { + "version": "1.8.9", + "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz", + "integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==", + "dependencies": { + "lodash.throttle": "^4.1.1", + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", @@ -4874,6 +4890,11 @@ "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", "dev": true }, + "lodash.throttle": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", + "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==" + }, "loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -4912,8 +4933,7 @@ "object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", - "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==" }, "object-inspect": { "version": "1.12.3", @@ -5083,7 +5103,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -5122,8 +5141,7 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "react-leaflet": { "version": "4.2.1", @@ -5133,6 +5151,15 @@ "@react-leaflet/core": "^2.1.0" } }, + "react-scroll": { + "version": "1.8.9", + "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.8.9.tgz", + "integrity": "sha512-9m7ztraiX/l6L7erzYAD3fhnveNckei6/NkWfqwN2e0FRdoE2W6Pk4oi2Nah7mWpPCPAeIgegfaqZACTimPOwg==", + "requires": { + "lodash.throttle": "^4.1.1", + "prop-types": "^15.7.2" + } + }, "reflect.getprototypeof": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.4.tgz", diff --git a/Open-Source/package.json b/Open-Source/package.json index fb15fd1..6c9a29c 100644 --- a/Open-Source/package.json +++ b/Open-Source/package.json @@ -14,7 +14,8 @@ "leaflet": "^1.9.4", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-leaflet": "^4.2.1" + "react-leaflet": "^4.2.1", + "react-scroll": "^1.8.9" }, "devDependencies": { "@types/react": "^18.2.15", diff --git a/Open-Source/src/App.jsx b/Open-Source/src/App.jsx index 1d882f0..4058fe7 100644 --- a/Open-Source/src/App.jsx +++ b/Open-Source/src/App.jsx @@ -1,5 +1,6 @@ import CampusMap from './Components/CampusMap' import Building from './Components/Building' +import NavBar from './Components/NavBar'; import './App.css' function App() { @@ -8,10 +9,13 @@ function App() { return ( <>
-

Interactive Map made with React and Leaflet

- - - + +
+ +
+
+ +
) diff --git a/Open-Source/src/Components.css b/Open-Source/src/Components.css index 0147aa0..141064b 100644 --- a/Open-Source/src/Components.css +++ b/Open-Source/src/Components.css @@ -134,4 +134,33 @@ header { /*Center's the building image */ .building { display: center; -} \ No newline at end of file +} + + +/* Nav Bar */ + +.navbar { + display: flex; + justify-content: center; + background-color: #333; + padding: 10px 0; +} + +.nav-item { + margin: 0 20px; +} + +.nav-item a { + text-decoration: none; + color: white; + font-weight: bold; + padding: 5px 10px; + border-radius: 5px; + transition: background-color 0.3s; +} + +.nav-item a:hover { + background-color: #555; +} + + diff --git a/Open-Source/src/Components/Building.jsx b/Open-Source/src/Components/Building.jsx index 7a01c49..276717c 100644 --- a/Open-Source/src/Components/Building.jsx +++ b/Open-Source/src/Components/Building.jsx @@ -1,4 +1,5 @@ import Floor from './Floor' +import { Element } from 'react-scroll'; function Building({buildingName, numberOfFloors}){ // numberOfFloors must be an array @@ -36,16 +37,17 @@ function Building({buildingName, numberOfFloors}){ }) return ( -
-
-

QC's {buildingName} Bathroom Status

- Issue? Report here -
-
- {floors} + +
+
+

QC's {buildingName} Bathroom Status

+ Issue? Report here +
+
+ {floors} +
- -
+ ) } diff --git a/Open-Source/src/Components/CampusMap.jsx b/Open-Source/src/Components/CampusMap.jsx index ed8da16..763485e 100644 --- a/Open-Source/src/Components/CampusMap.jsx +++ b/Open-Source/src/Components/CampusMap.jsx @@ -1,4 +1,4 @@ - +import { Link } from 'react-scroll'; import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'; import 'leaflet/dist/leaflet.css'; @@ -12,8 +12,15 @@ const CampusMap = () => { attribution='© OpenStreetMap contributors' /> - - A sample marker! + + Library + + Library + diff --git a/Open-Source/src/Components/NavBar.jsx b/Open-Source/src/Components/NavBar.jsx new file mode 100644 index 0000000..8a12fe7 --- /dev/null +++ b/Open-Source/src/Components/NavBar.jsx @@ -0,0 +1,16 @@ + + +function NavBar() { + return ( +
+
+ Campus Map +
+
+ Building +
+
+ ); +} + +export default NavBar; From 855e5d1867f7b7d01bfbe8b1adbde4914568a1b5 Mon Sep 17 00:00:00 2001 From: LoopFruits Date: Sat, 30 Sep 2023 19:54:45 -0400 Subject: [PATCH 2/4] updated floor visuals --- Open-Source/src/Components.css | 1 + Open-Source/src/Components/Building.jsx | 9 ++++++++- Open-Source/src/Components/Floor.jsx | 15 ++++++++++++--- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/Open-Source/src/Components.css b/Open-Source/src/Components.css index 141064b..632481e 100644 --- a/Open-Source/src/Components.css +++ b/Open-Source/src/Components.css @@ -75,6 +75,7 @@ h3 { } .floor-title { + color:black; padding-top: 0; margin-top: 0; margin-bottom: auto; diff --git a/Open-Source/src/Components/Building.jsx b/Open-Source/src/Components/Building.jsx index 276717c..10bd03d 100644 --- a/Open-Source/src/Components/Building.jsx +++ b/Open-Source/src/Components/Building.jsx @@ -1,5 +1,12 @@ import Floor from './Floor' import { Element } from 'react-scroll'; +import PropTypes from 'prop-types'; + + +Building.propTypes = { + buildingName: PropTypes.string.isRequired, + numberOfFloors: PropTypes.arrayOf(PropTypes.number).isRequired +}; function Building({buildingName, numberOfFloors}){ // numberOfFloors must be an array @@ -52,4 +59,4 @@ function Building({buildingName, numberOfFloors}){ } -export default Building \ No newline at end of file +export default Building; \ No newline at end of file diff --git a/Open-Source/src/Components/Floor.jsx b/Open-Source/src/Components/Floor.jsx index a2b77d4..39bee6e 100644 --- a/Open-Source/src/Components/Floor.jsx +++ b/Open-Source/src/Components/Floor.jsx @@ -1,6 +1,12 @@ import Button from './Button.jsx' +import PropTypes from 'prop-types'; + // import { useState } from 'react' +Floor.propTypes = { + floorNumber: PropTypes.number.isRequired, + hasBathrooms: PropTypes.bool.isRequired +}; function Floor({floorNumber, hasBathrooms}){ @@ -32,15 +38,16 @@ function Floor({floorNumber, hasBathrooms}){ return (
-

Floor {floorNumber}

+ +

Floor {console.log("Floor number:", floorNumber)}

-

Women's

+

Women’s

-

Men's:

+

Men’s:

@@ -57,7 +64,9 @@ function Floor({floorNumber, hasBathrooms}){
) } + } + export default Floor \ No newline at end of file From 591dde53c4605fcea8d9ee24aa94a0e0d41b6c3c Mon Sep 17 00:00:00 2001 From: LoopFruits Date: Sat, 30 Sep 2023 21:33:41 -0400 Subject: [PATCH 3/4] fixed womens and mens bathrooms issue --- Open-Source/src/Components.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Open-Source/src/Components.css b/Open-Source/src/Components.css index 632481e..a56d50d 100644 --- a/Open-Source/src/Components.css +++ b/Open-Source/src/Components.css @@ -70,6 +70,7 @@ img { } h3 { + color: black; padding-bottom: 0; margin-bottom: 0; } From 84cb0d63296af3fe541612bac74890ad70483a9d Mon Sep 17 00:00:00 2001 From: LoopFruits Date: Sat, 30 Sep 2023 23:03:42 -0400 Subject: [PATCH 4/4] added floor numbers --- Open-Source/src/Components/Floor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Open-Source/src/Components/Floor.jsx b/Open-Source/src/Components/Floor.jsx index 39bee6e..786b2a8 100644 --- a/Open-Source/src/Components/Floor.jsx +++ b/Open-Source/src/Components/Floor.jsx @@ -39,7 +39,7 @@ function Floor({floorNumber, hasBathrooms}){ return (
-

Floor {console.log("Floor number:", floorNumber)}

+

Floor {floorNumber}

Women’s