From a8435680dbfadddda0575dc9f208b923ec649359 Mon Sep 17 00:00:00 2001 From: mingjiagong Date: Thu, 2 Feb 2023 15:38:32 -0500 Subject: [PATCH 01/42] Create branch --- .gitignore | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 4d29575..7f7f068 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. - +.idea # dependencies /node_modules /.pnp From e7190ff83354ec572c7e0df527f185f5e791f5c5 Mon Sep 17 00:00:00 2001 From: mingjiagong Date: Sat, 4 Feb 2023 19:05:07 -0500 Subject: [PATCH 02/42] Roates --- package-lock.json | 40 +++++++++++++++++++ package.json | 2 + src/App.js | 23 +++++------ src/parking-garage-automation/index.js | 14 +++++++ .../parking-information/index.js | 10 +++++ 5 files changed, 75 insertions(+), 14 deletions(-) create mode 100644 src/parking-garage-automation/index.js create mode 100644 src/parking-garage-automation/parking-information/index.js diff --git a/package-lock.json b/package-lock.json index 17ebeab..0d636a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,8 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router": "^6.8.0", + "react-router-dom": "^6.8.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3077,6 +3079,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.1.tgz", + "integrity": "sha512-+eun1Wtf72RNRSqgU7qM2AMX/oHp+dnx7BHk1qhK5ZHzdHTUU4LA1mGG1vT+jMc8sbhG3orvsfOmryjzx2PzQw==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14226,6 +14236,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.8.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.0.tgz", + "integrity": "sha512-760bk7y3QwabduExtudhWbd88IBbuD1YfwzpuDUAlJUJ7laIIcqhMvdhSVh1Fur1PE8cGl84L0dxhR3/gvHF7A==", + "dependencies": { + "@remix-run/router": "1.3.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.8.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.0.tgz", + "integrity": "sha512-hQouduSTywGJndE86CXJ2h7YEy4HYC6C/uh19etM+79FfQ6cFFFHnHyDlzO4Pq0eBUI96E4qVE5yUjA00yJZGQ==", + "dependencies": { + "@remix-run/router": "1.3.1", + "react-router": "6.8.0" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 90884b6..6443fb2 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,8 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router": "^6.8.0", + "react-router-dom": "^6.8.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.js b/src/App.js index 3784575..420f0b6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,18 @@ import logo from './logo.svg'; import './App.css'; +import {Routes, Route} from "react-router"; +import {BrowserRouter} from "react-router-dom"; +import ParkingGarageAutomation from "./parking-garage-automation"; function App() { return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+ + + + }/> + +
); } diff --git a/src/parking-garage-automation/index.js b/src/parking-garage-automation/index.js new file mode 100644 index 0000000..7317bb2 --- /dev/null +++ b/src/parking-garage-automation/index.js @@ -0,0 +1,14 @@ +import ParkingInformationComponent from "./parking-information"; +import {Route, Routes} from "react-router"; + + +function ParkingGarageAutomation(){ + return ( + + }/> + + ) + +} + +export default ParkingGarageAutomation; \ No newline at end of file diff --git a/src/parking-garage-automation/parking-information/index.js b/src/parking-garage-automation/parking-information/index.js new file mode 100644 index 0000000..f49b52b --- /dev/null +++ b/src/parking-garage-automation/parking-information/index.js @@ -0,0 +1,10 @@ +const ParkingInformationComponent = () =>{ + return( +
+abc +
+ ) +} + + +export default ParkingInformationComponent; \ No newline at end of file From e39cd56b662c3f73099c32715866e36e3a5e6634 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 11 Feb 2023 10:30:34 -0500 Subject: [PATCH 03/42] Update Login page --- src/pages/Login.jsx | 74 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 src/pages/Login.jsx diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx new file mode 100644 index 0000000..8ec2c07 --- /dev/null +++ b/src/pages/Login.jsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react' + +export const Login = () => { + //[current state, function is used to update state] + // useState(initial state to empty string) + const [contact, setContact] = useState({ + fName: "", + lName: "", + email: "" + }); + + const [isMouseOver, setMouseOver] = useState(false); + + function handleChange(event) { + const { name, value } = event.target; + + setContact((preValue) => { + return { + // spread operator(...) : allows us to copy existing array/object into another array/object + ...preValue, + [name]: value + }; + }); + } + + function handleMouseOver() { + setMouseOver(true); + } + function handleMouseOut() { + setMouseOver(false); + } + + return ( +
+ {/* useState to update first and last name */} +

+ Hello {contact.fName} + {contact.lName} +

+

{contact.email}

+
+ + + + +
+
+ ); +} +// export default Login; From 98e90f200f4e7efa2beb36a10f53b9f4e801a713 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 11 Feb 2023 10:31:53 -0500 Subject: [PATCH 04/42] Remove unused image --- public/favicon.ico | Bin 3870 -> 0 bytes public/logo192.png | Bin 5347 -> 0 bytes public/logo512.png | Bin 9664 -> 0 bytes 3 files changed, 0 insertions(+), 0 deletions(-) delete mode 100644 public/favicon.ico delete mode 100644 public/logo192.png delete mode 100644 public/logo512.png diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index a11777cc471a4344702741ab1c8a588998b1311a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3870 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 baj7?x%VD!5Cxk2YbYLNVeiXvvpMCWYo=by@ diff --git a/public/logo192.png b/public/logo192.png deleted file mode 100644 index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5347 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 b{|{}U^kRn2wo}j7|0ATu<;8xA7zX}7|B6mN From 57f536ba7cc6860a7af4cdbe4aa2f14d7d90d26d Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 11 Feb 2023 10:32:55 -0500 Subject: [PATCH 05/42] Init Car Page --- package-lock.json | 39 ++++++++++++++++++++++ package.json | 1 + src/App.css | 74 +++++++++++++++++++++++++++--------------- src/App.js | 38 ++++++++++++---------- src/pages/InputCar.jsx | 58 +++++++++++++++++++++++++++++++++ 5 files changed, 165 insertions(+), 45 deletions(-) create mode 100644 src/pages/InputCar.jsx diff --git a/package-lock.json b/package-lock.json index 17ebeab..0e4bbe5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -3077,6 +3078,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.2.tgz", + "integrity": "sha512-t54ONhl/h75X94SWsHGQ4G/ZrCEguKSRQr7DrjTciJXW0YU1QhlwYeycvK5JgkzlxmvrK7wq1NB/PLtHxoiDcA==", + "engines": { + "node": ">=14" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14226,6 +14235,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.8.1.tgz", + "integrity": "sha512-Jgi8BzAJQ8MkPt8ipXnR73rnD7EmZ0HFFb7jdQU24TynGW1Ooqin2KVDN9voSC+7xhqbbCd2cjGUepb6RObnyg==", + "dependencies": { + "@remix-run/router": "1.3.2" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.8.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.8.1.tgz", + "integrity": "sha512-67EXNfkQgf34P7+PSb6VlBuaacGhkKn3kpE51+P6zYSG2kiRoumXEL6e27zTa9+PGF2MNXbgIUHTVlleLbIcHQ==", + "dependencies": { + "@remix-run/router": "1.3.2", + "react-router": "6.8.1" + }, + "engines": { + "node": ">=14" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index 90884b6..f6e28ee 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.8.1", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css index 74b5e05..a9dae31 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,58 @@ -.App { - text-align: center; +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-weight: 300; } -.App-logo { - height: 40vmin; - pointer-events: none; +body { + font-family: "Source Sans Pro", sans-serif; + color: white; + font-weight: 300; + background: #50a3a2; + width: 100%; + height: 100%; } -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } +.container { + margin: 10% auto; + padding: 80px 0; + text-align: center; } -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; +.container h1 { + font-size: 40px; + font-weight: 200; + margin-bottom: 5px; } -.App-link { - color: #61dafb; +p { + margin-bottom: 2%; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +input { + border: 1px solid rgba(252, 252, 252, 0.4); + background-color: rgba(252, 252, 252, 0.2); + width: 250px; + border-radius: 3px; + font-family: "Source Sans Pro", sans-serif; + padding: 10px 15px; + margin: 0 auto 10px auto; + display: block; + text-align: center; + font-size: 18px; + color: white; + font-weight: 300; } + +button { + appearance: none; + outline: 0; + background-color: white; + border: 0; + padding: 10px 15px; + color: #50a3a2; + border-radius: 3px; + width: 250px; + font-size: 18px; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..c430c30 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,26 @@ -import logo from './logo.svg'; -import './App.css'; +import './App.css'; +import { Login } from './pages/Login'; +import { InputCar } from './pages/InputCar'; +import { + BrowserRouter as Router, + Routes, + Route, + Link +} from "react-router-dom"; function App() { return ( - + <> + + + + {/* */} + } /> + } /> + + + + ); } diff --git a/src/pages/InputCar.jsx b/src/pages/InputCar.jsx new file mode 100644 index 0000000..5745658 --- /dev/null +++ b/src/pages/InputCar.jsx @@ -0,0 +1,58 @@ +import React, {useState} from 'react' + +export const InputCar = () => { + //[current state, function is used to update state] + // useState(initial state to empty string) + const [contact, setContact] = useState({ + carNumber: "", + }); + + const [isMouseOver, setMouseOver] = useState(false); + + function handleChange(event) { + const { name, value } = event.target; + + setContact((preValue) => { + return { + // spread operator(...) : allows us to copy existing array/object into another array/object + ...preValue, + [name]: value + }; + }); + } + + function handleMouseOver() { + setMouseOver(true); + } + function handleMouseOut() { + setMouseOver(false); + } + + return ( +
+ {/* useState to update first and last name */} +

+ Hello {contact.carNumber} +

+

{contact.carNumber}

+
+ + +
+
+ ); +} From 716822c6373f2a2513bd183ea686878115ec913b Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 11 Feb 2023 10:34:19 -0500 Subject: [PATCH 06/42] Delete Login Oage --- src/App.js | 2 -- src/pages/Login.jsx | 74 --------------------------------------------- 2 files changed, 76 deletions(-) delete mode 100644 src/pages/Login.jsx diff --git a/src/App.js b/src/App.js index c430c30..2e200e5 100644 --- a/src/App.js +++ b/src/App.js @@ -14,9 +14,7 @@ function App() { - {/* */} } /> - } /> diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx deleted file mode 100644 index 8ec2c07..0000000 --- a/src/pages/Login.jsx +++ /dev/null @@ -1,74 +0,0 @@ -import React, { useState } from 'react' - -export const Login = () => { - //[current state, function is used to update state] - // useState(initial state to empty string) - const [contact, setContact] = useState({ - fName: "", - lName: "", - email: "" - }); - - const [isMouseOver, setMouseOver] = useState(false); - - function handleChange(event) { - const { name, value } = event.target; - - setContact((preValue) => { - return { - // spread operator(...) : allows us to copy existing array/object into another array/object - ...preValue, - [name]: value - }; - }); - } - - function handleMouseOver() { - setMouseOver(true); - } - function handleMouseOut() { - setMouseOver(false); - } - - return ( -
- {/* useState to update first and last name */} -

- Hello {contact.fName} - {contact.lName} -

-

{contact.email}

-
- - - - -
-
- ); -} -// export default Login; From 9b9858213248c25958b4417909481a9ca812c24f Mon Sep 17 00:00:00 2001 From: Your Name Date: Sat, 11 Feb 2023 10:51:13 -0500 Subject: [PATCH 07/42] Delete import Login and Link --- src/App.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/App.js b/src/App.js index 2e200e5..66dca70 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,9 @@ - import './App.css'; -import { Login } from './pages/Login'; import { InputCar } from './pages/InputCar'; import { BrowserRouter as Router, Routes, Route, - Link } from "react-router-dom"; function App() { return ( From 22e810ed24e3a094f28df1b0c5226ed06843ca8c Mon Sep 17 00:00:00 2001 From: mingjiagong Date: Sun, 12 Feb 2023 16:53:50 -0500 Subject: [PATCH 08/42] payment page --- package-lock.json | 210 ++++++++++++++++++ package.json | 2 + src/index.js | 1 + src/parking-garage-automation/index.js | 5 + .../navBar/index.css | 10 + src/parking-garage-automation/navBar/index.js | 12 + .../navBar/navBar.js | 26 +++ .../parking-information/index.css | 25 +++ .../parking-information/index.js | 15 +- .../parking-information/parking-info.js | 83 +++++++ .../parking-payment/index.css | 21 ++ .../parking-payment/index.js | 15 ++ .../parking-payment/parking-pay.js | 92 ++++++++ 13 files changed, 512 insertions(+), 5 deletions(-) create mode 100644 src/parking-garage-automation/navBar/index.css create mode 100644 src/parking-garage-automation/navBar/index.js create mode 100644 src/parking-garage-automation/navBar/navBar.js create mode 100644 src/parking-garage-automation/parking-information/index.css create mode 100644 src/parking-garage-automation/parking-information/parking-info.js create mode 100644 src/parking-garage-automation/parking-payment/index.css create mode 100644 src/parking-garage-automation/parking-payment/index.js create mode 100644 src/parking-garage-automation/parking-payment/parking-pay.js diff --git a/package-lock.json b/package-lock.json index 0d636a6..e4f9d82 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,9 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "bootstrap": "^5.2.3", "react": "^18.2.0", + "react-bootstrap": "^2.7.0", "react-dom": "^18.2.0", "react-router": "^6.8.0", "react-router-dom": "^6.8.0", @@ -3079,6 +3081,26 @@ } } }, + "node_modules/@popperjs/core": { + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz", + "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, + "node_modules/@react-aria/ssr": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.4.1.tgz", + "integrity": "sha512-NmhoilMDyIfQiOSdQgxpVH2tC2u85Y0mVijtBNbI9kcDYLEiW/r6vKYVKtkyU+C4qobXhGMPfZ70PTc0lysSVA==", + "dependencies": { + "@swc/helpers": "^0.4.14" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, "node_modules/@remix-run/router": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.1.tgz", @@ -3087,6 +3109,37 @@ "node": ">=14" } }, + "node_modules/@restart/hooks": { + "version": "0.4.8", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.8.tgz", + "integrity": "sha512-Ivvp1FZ0Lja80iUTYAhbzy+stxwO7FbPHP95ypCtIh0wyOLiayQywXhVJ2ZYP5S1AjW2GmKHeRU4UglMwTG2sA==", + "dependencies": { + "dequal": "^2.0.2" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.5.4", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.5.4.tgz", + "integrity": "sha512-ziNtXY2PrjXrRUfR1D/ry1v1i5IF+kfMcH9d1kIcU2lOELfmDsVb+fzbyEDz3yKvKuqkphTunVDuLdYRJ0YsAg==", + "dependencies": { + "@babel/runtime": "^7.20.7", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.4.1", + "@restart/hooks": "^0.4.7", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -3405,6 +3458,14 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.4.14", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz", + "integrity": "sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@testing-library/dom": { "version": "8.20.0", "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.20.0.tgz", @@ -4083,6 +4144,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-juKD/eiSM3/xZYzjuzH6ZwpP+/lejltmiS3QEzV/vmb/Q8+HfDmxu+Baga8UEMGBqV88Nbg4l2hY/K2DkyaLLA==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -4149,6 +4218,11 @@ "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.2.tgz", "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" }, + "node_modules/@types/warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.0.tgz", + "integrity": "sha512-t/Tvs5qR47OLOr+4E9ckN8AmP2Tf16gWq+/qA4iUGS/OOyHVO8wv2vjJuX8SNOUTJyWb+2t7wJm6cXILFnOROA==" + }, "node_modules/@types/ws": { "version": "8.5.4", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.4.tgz", @@ -5366,6 +5440,24 @@ "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" }, + "node_modules/bootstrap": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz", + "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/twbs" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/bootstrap" + } + ], + "peerDependencies": { + "@popperjs/core": "^2.11.6" + } + }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -5622,6 +5714,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz", "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -6443,6 +6540,14 @@ "node": ">= 0.8" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "engines": { + "node": ">=6" + } + }, "node_modules/destroy": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", @@ -6579,6 +6684,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -8974,6 +9088,14 @@ "node": ">= 0.4" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ipaddr.js": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz", @@ -13909,6 +14031,23 @@ "react-is": "^16.13.1" } }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, + "node_modules/prop-types-extra/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==" + }, "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -14089,6 +14228,35 @@ "node": ">=14" } }, + "node_modules/react-bootstrap": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.7.0.tgz", + "integrity": "sha512-Jcrn6aUuRVBeSB6dzKODKZU1TONOdhAxu0IDm4Sv74SJUm98dMdhSotF2SNvFEADANoR+stV+7TK6SNX1wWu5w==", + "dependencies": { + "@babel/runtime": "^7.17.2", + "@restart/hooks": "^0.4.6", + "@restart/ui": "^1.4.1", + "@types/react-transition-group": "^4.4.4", + "classnames": "^2.3.1", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.2", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -14228,6 +14396,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -14338,6 +14511,21 @@ } } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -16005,6 +16193,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz", @@ -16213,6 +16415,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/package.json b/package.json index 6443fb2..dfa0036 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "bootstrap": "^5.2.3", "react": "^18.2.0", + "react-bootstrap": "^2.7.0", "react-dom": "^18.2.0", "react-router": "^6.8.0", "react-router-dom": "^6.8.0", diff --git a/src/index.js b/src/index.js index d563c0f..06f12b9 100644 --- a/src/index.js +++ b/src/index.js @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import 'bootstrap/dist/css/bootstrap.min.css'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( diff --git a/src/parking-garage-automation/index.js b/src/parking-garage-automation/index.js index 7317bb2..efe2f1a 100644 --- a/src/parking-garage-automation/index.js +++ b/src/parking-garage-automation/index.js @@ -1,11 +1,16 @@ import ParkingInformationComponent from "./parking-information"; + + + import {Route, Routes} from "react-router"; +import ParkingPaymentComponent from "./parking-payment"; function ParkingGarageAutomation(){ return ( }/> + }/> ) diff --git a/src/parking-garage-automation/navBar/index.css b/src/parking-garage-automation/navBar/index.css new file mode 100644 index 0000000..7133058 --- /dev/null +++ b/src/parking-garage-automation/navBar/index.css @@ -0,0 +1,10 @@ +.textColor{ + color: #50A3A2; +} + +#logInButton{ + width : 5%; + font-size: small; + color: #50A3A2; +} + diff --git a/src/parking-garage-automation/navBar/index.js b/src/parking-garage-automation/navBar/index.js new file mode 100644 index 0000000..4f24562 --- /dev/null +++ b/src/parking-garage-automation/navBar/index.js @@ -0,0 +1,12 @@ +import NavBar from "./navBar"; + + +const NavBarComponent = () =>{ + return(<> + + + ) +} + + +export default NavBarComponent; \ No newline at end of file diff --git a/src/parking-garage-automation/navBar/navBar.js b/src/parking-garage-automation/navBar/navBar.js new file mode 100644 index 0000000..555d32e --- /dev/null +++ b/src/parking-garage-automation/navBar/navBar.js @@ -0,0 +1,26 @@ +import {Container, Navbar, Nav, Button} from "react-bootstrap"; + +const NavBar = () =>{ + return(<> + + + +
Victory Eight
+ + + + + + + + + + + ) +} + + +export default NavBar; diff --git a/src/parking-garage-automation/parking-information/index.css b/src/parking-garage-automation/parking-information/index.css new file mode 100644 index 0000000..bca80e5 --- /dev/null +++ b/src/parking-garage-automation/parking-information/index.css @@ -0,0 +1,25 @@ +.textColor{ + color: #50A3A2; +} + +#payButton{ + width : 10%; + font-size: xx-large; +} + +.backG{ + text-align: center; + position:fixed; + width: 100%; + height: 60%; + background-size: cover; + background: #50A3A2 center; +} + +.textRight{ + text-align: right; +} + +.textLeft{ + text-align: left; +} \ No newline at end of file diff --git a/src/parking-garage-automation/parking-information/index.js b/src/parking-garage-automation/parking-information/index.js index f49b52b..6e47878 100644 --- a/src/parking-garage-automation/parking-information/index.js +++ b/src/parking-garage-automation/parking-information/index.js @@ -1,9 +1,14 @@ +import './index.css' +import ParkingInformation from "./parking-info"; +import NavBarComponent from "../navBar"; + + const ParkingInformationComponent = () =>{ - return( -
-abc -
- ) + return(<> + + + + ) } diff --git a/src/parking-garage-automation/parking-information/parking-info.js b/src/parking-garage-automation/parking-information/parking-info.js new file mode 100644 index 0000000..49382b6 --- /dev/null +++ b/src/parking-garage-automation/parking-information/parking-info.js @@ -0,0 +1,83 @@ +import {Button} from "react-bootstrap"; +import './index.css' + +const ParkingInformation = () =>{ + return(<> +
+ +
+ +
+
+

Parking Information

+
+
+ +
+
+

Plate Number:

+
+
+

XXXXXX

+
+
+ +
+
+

Parking Location:

+
+
+

Boston

+
+
+ +
+
+

Enter Time:

+
+
+

2023-01-01 19:00:00

+
+
+ +
+
+

Departure Time:

+
+
+

2023-01-01 20:30:00

+
+
+ +
+
+

Total Parking Time:

+
+
+

1 hour 30 minutes

+
+
+ +
+
+

Parking Fee:

+
+
+

10.00 USD

+
+
+ +
+
+ +
+ + +
+ + + ) +} + + +export default ParkingInformation; \ No newline at end of file diff --git a/src/parking-garage-automation/parking-payment/index.css b/src/parking-garage-automation/parking-payment/index.css new file mode 100644 index 0000000..1052fa7 --- /dev/null +++ b/src/parking-garage-automation/parking-payment/index.css @@ -0,0 +1,21 @@ +#payButton{ + width : 10%; + font-size: xx-large; +} + +.backG{ + text-align: center; + position:fixed; + min-width: 100%; + min-height: 80%; + background-size: cover; + background: #50A3A2 center; +} + +.textRight{ + text-align: right; +} + +.textLeft{ + text-align: left; +} \ No newline at end of file diff --git a/src/parking-garage-automation/parking-payment/index.js b/src/parking-garage-automation/parking-payment/index.js new file mode 100644 index 0000000..95e7bcb --- /dev/null +++ b/src/parking-garage-automation/parking-payment/index.js @@ -0,0 +1,15 @@ +import './index.css' +import NavBarComponent from "../navBar"; +import ParkingPayment from "./parking-pay"; + + +const ParkingPaymentComponent = () =>{ + return(<> + + + + ) +} + + +export default ParkingPaymentComponent; \ No newline at end of file diff --git a/src/parking-garage-automation/parking-payment/parking-pay.js b/src/parking-garage-automation/parking-payment/parking-pay.js new file mode 100644 index 0000000..c8df010 --- /dev/null +++ b/src/parking-garage-automation/parking-payment/parking-pay.js @@ -0,0 +1,92 @@ +import {Button,Form} from "react-bootstrap"; +import './index.css' +import {useState} from "react"; + +const ParkingPayment = () =>{ + let [credit, setCredit] = useState(1); + + const creditPayClickHandler = () =>{ + setCredit(1) + } + const debitPayClickHandler = () =>{ + setCredit(0) + } + + const payButtonClickHandler = () =>{ + + } + + + return(<> +
+
+
+
+

Payment

+
+
+ +
+
+ +
+
+ + +
+
+ + + { + credit == 0 &&
+ debit +
+ } + { + credit == 1 &&
+
+
+ +
+
+ First Name: +
+
+ +
+
+ + + +
+
+ Last Name: +
+
+ +
+
+ +
+ + +
+
+ } + + +
+
+ + +
+ + +
+ + + ) +} + + +export default ParkingPayment; \ No newline at end of file From 327aff76f80abcb006f1b4a8a62806d47be34181 Mon Sep 17 00:00:00 2001 From: mingjiagong Date: Sun, 12 Feb 2023 17:12:35 -0500 Subject: [PATCH 09/42] merge file --- src/App.js | 4 ++-- .../InputCar}/InputCar.jsx | 0 src/parking-garage-automation/index.js | 2 ++ 3 files changed, 4 insertions(+), 2 deletions(-) rename src/{pages => parking-garage-automation/InputCar}/InputCar.jsx (100%) diff --git a/src/App.js b/src/App.js index fcb859a..cacea52 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,5 @@ import './App.css'; -import { InputCar } from './pages/InputCar'; +import { InputCar } from './parking-garage-automation/InputCar/InputCar'; import {Routes, Route} from "react-router"; import {BrowserRouter} from "react-router-dom"; import ParkingGarageAutomation from "./parking-garage-automation"; @@ -11,7 +11,7 @@ function App() { }/> - } /> + diff --git a/src/pages/InputCar.jsx b/src/parking-garage-automation/InputCar/InputCar.jsx similarity index 100% rename from src/pages/InputCar.jsx rename to src/parking-garage-automation/InputCar/InputCar.jsx diff --git a/src/parking-garage-automation/index.js b/src/parking-garage-automation/index.js index efe2f1a..1b5b149 100644 --- a/src/parking-garage-automation/index.js +++ b/src/parking-garage-automation/index.js @@ -4,6 +4,7 @@ import ParkingInformationComponent from "./parking-information"; import {Route, Routes} from "react-router"; import ParkingPaymentComponent from "./parking-payment"; +import {InputCar} from "./InputCar/InputCar"; function ParkingGarageAutomation(){ @@ -11,6 +12,7 @@ function ParkingGarageAutomation(){ }/> }/> + } /> ) From 3d0c3b0fc806ebffe7dc4ba9d099b61bfa745c00 Mon Sep 17 00:00:00 2001 From: mingjiagong Date: Sun, 12 Feb 2023 21:32:46 -0500 Subject: [PATCH 10/42] CSS change --- src/App.css | 76 +++++------- src/parking-garage-automation/index.js | 3 - .../navBar/navBar.js | 3 +- .../navBar/{index.css => navBar.module.css} | 0 .../parking-information/index.js | 2 +- .../parking-information/parking-info.js | 111 +++++++++--------- .../{index.css => parking-info.module.css} | 11 +- .../parking-payment/index.js | 2 +- .../parking-payment/parking-pay.js | 83 ++++++++++--- .../{index.css => parking-pay.module.css} | 12 +- 10 files changed, 167 insertions(+), 136 deletions(-) rename src/parking-garage-automation/navBar/{index.css => navBar.module.css} (100%) rename src/parking-garage-automation/parking-information/{index.css => parking-info.module.css} (69%) rename src/parking-garage-automation/parking-payment/{index.css => parking-pay.module.css} (66%) diff --git a/src/App.css b/src/App.css index a9dae31..7cb85a6 100644 --- a/src/App.css +++ b/src/App.css @@ -1,58 +1,42 @@ -* { - box-sizing: border-box; - margin: 0; - padding: 0; - font-weight: 300; +.App { + text-align: center; } -body { - font-family: "Source Sans Pro", sans-serif; - color: white; - font-weight: 300; - background: #50a3a2; - width: 100%; - height: 100%; +.App-logo { + height: 40vmin; + pointer-events: none; } -.container { - margin: 10% auto; - padding: 80px 0; - text-align: center; +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } } -.container h1 { - font-size: 40px; - font-weight: 200; - margin-bottom: 5px; +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; } -p { - margin-bottom: 2%; +.App-link { + color: #61dafb; } -input { - border: 1px solid rgba(252, 252, 252, 0.4); - background-color: rgba(252, 252, 252, 0.2); - width: 250px; - border-radius: 3px; - font-family: "Source Sans Pro", sans-serif; - padding: 10px 15px; - margin: 0 auto 10px auto; - display: block; - text-align: center; - font-size: 18px; - color: white; - font-weight: 300; +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } -button { - appearance: none; - outline: 0; - background-color: white; - border: 0; - padding: 10px 15px; - color: #50a3a2; - border-radius: 3px; - width: 250px; - font-size: 18px; -} \ No newline at end of file + + + diff --git a/src/parking-garage-automation/index.js b/src/parking-garage-automation/index.js index 1b5b149..40d366a 100644 --- a/src/parking-garage-automation/index.js +++ b/src/parking-garage-automation/index.js @@ -1,7 +1,4 @@ import ParkingInformationComponent from "./parking-information"; - - - import {Route, Routes} from "react-router"; import ParkingPaymentComponent from "./parking-payment"; import {InputCar} from "./InputCar/InputCar"; diff --git a/src/parking-garage-automation/navBar/navBar.js b/src/parking-garage-automation/navBar/navBar.js index 555d32e..bf2f8aa 100644 --- a/src/parking-garage-automation/navBar/navBar.js +++ b/src/parking-garage-automation/navBar/navBar.js @@ -1,11 +1,12 @@ import {Container, Navbar, Nav, Button} from "react-bootstrap"; +import styles from './navBar.module.css' const NavBar = () =>{ return(<> -
Victory Eight
+
Victory Eight
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-