diff --git a/frontend/package-lock.json b/frontend/package-lock.json index ce71d07..331b3eb 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -16,9 +16,11 @@ "@testing-library/user-event": "^12.8.3", "axios": "^0.22.0", "bootstrap": "^5.1.2", + "leaflet": "^1.7.1", "node-sass": "^6.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-leaflet": "^3.2.2", "react-scripts": "4.0.3", "reactstrap": "^8.10.0", "web-vitals": "^1.1.2" @@ -3223,6 +3225,16 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-leaflet/core": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz", + "integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==", + "peerDependencies": { + "leaflet": "^1.7.1", + "react": "^17.0.1", + "react-dom": "^17.0.1" + } + }, "node_modules/@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -5933,15 +5945,6 @@ "node": ">=8" } }, - "node_modules/bindings": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", - "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "optional": true, - "dependencies": { - "file-uri-to-path": "1.0.0" - } - }, "node_modules/bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -9771,12 +9774,6 @@ "url": "https://opencollective.com/webpack" } }, - "node_modules/file-uri-to-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "optional": true - }, "node_modules/filesize": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz", @@ -10213,19 +10210,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, - "node_modules/fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -14155,6 +14139,11 @@ "webpack-sources": "^1.1.0" } }, + "node_modules/leaflet": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz", + "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==" + }, "node_modules/leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -17939,6 +17928,19 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-leaflet": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.2.tgz", + "integrity": "sha512-5W7iWjI9+CdTGVAICe8RUyK0n+uLshr+eLQa8eBCbmstPNpCHZJTUSbju4Ws5dkS/PUCr9t5VmoIE9CXuSBEhw==", + "dependencies": { + "@react-leaflet/core": "^1.1.1" + }, + "peerDependencies": { + "leaflet": "^1.7.1", + "react": "^17.0.1", + "react-dom": "^17.0.1" + } + }, "node_modules/react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", @@ -21950,24 +21952,6 @@ "node": ">=0.10.0" } }, - "node_modules/watchpack-chokidar2/node_modules/fsevents": { - "version": "1.2.13", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", - "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "dependencies": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - }, - "engines": { - "node": ">= 4.0" - } - }, "node_modules/watchpack-chokidar2/node_modules/glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", @@ -22405,24 +22389,6 @@ "node": ">=6" } }, - "node_modules/webpack-dev-server/node_modules/fsevents": { - "version": "1.2.13", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", - "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "deprecated": "fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.", - "hasInstallScript": true, - "optional": true, - "os": [ - "darwin" - ], - "dependencies": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - }, - "engines": { - "node": ">= 4.0" - } - }, "node_modules/webpack-dev-server/node_modules/glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", @@ -25905,6 +25871,12 @@ "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz", "integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==" }, + "@react-leaflet/core": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-1.1.1.tgz", + "integrity": "sha512-7PGLWa9MZ5x/cWy8EH2VzI4T8q5WpuHbixzCDXqixP/WyqwIrg5NDUPgYuFnB4IEIZF+6nA265mYzswFo/h1Pw==", + "requires": {} + }, "@rollup/plugin-node-resolve": { "version": "7.1.3", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", @@ -28002,15 +27974,6 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "optional": true }, - "bindings": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", - "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", - "optional": true, - "requires": { - "file-uri-to-path": "1.0.0" - } - }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -30982,12 +30945,6 @@ } } }, - "file-uri-to-path": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", - "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", - "optional": true - }, "filesize": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz", @@ -31330,12 +31287,6 @@ "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" }, - "fsevents": { - "version": "2.3.2", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", - "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", - "optional": true - }, "function-bind": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", @@ -34251,6 +34202,11 @@ "webpack-sources": "^1.1.0" } }, + "leaflet": { + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.7.1.tgz", + "integrity": "sha512-/xwPEBidtg69Q3HlqPdU3DnrXQOvQU/CCHA1tcDQVzOwm91YMYaILjNp7L4Eaw5Z4sOYdbBz6koWyibppd8Zqw==" + }, "leven": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", @@ -37235,6 +37191,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "react-leaflet": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-leaflet/-/react-leaflet-3.2.2.tgz", + "integrity": "sha512-5W7iWjI9+CdTGVAICe8RUyK0n+uLshr+eLQa8eBCbmstPNpCHZJTUSbju4Ws5dkS/PUCr9t5VmoIE9CXuSBEhw==", + "requires": { + "@react-leaflet/core": "^1.1.1" + } + }, "react-lifecycles-compat": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", @@ -40428,16 +40392,6 @@ } } }, - "fsevents": { - "version": "1.2.13", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", - "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } - }, "glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", @@ -41023,16 +40977,6 @@ "locate-path": "^3.0.0" } }, - "fsevents": { - "version": "1.2.13", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", - "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } - }, "glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index 0ea086b..fa1f739 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -11,9 +11,11 @@ "@testing-library/user-event": "^12.8.3", "axios": "^0.22.0", "bootstrap": "^5.1.2", + "leaflet": "^1.7.1", "node-sass": "^6.0.1", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-leaflet": "^3.2.2", "react-scripts": "4.0.3", "reactstrap": "^8.10.0", "web-vitals": "^1.1.2" @@ -30,16 +32,9 @@ "react-app/jest" ] }, - "browserslist": { - "production": [ - ">0.2%", - "not dead", - "not op_mini all" - ], - "development": [ - "last 1 chrome version", - "last 1 firefox version", - "last 1 safari version" - ] - } + "browserslist": [ + ">0.2%", + "not dead", + "not op_mini all" + ] } diff --git a/frontend/public/index.html b/frontend/public/index.html index 80663d2..52ae504 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -22,6 +22,12 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + Right Tree diff --git a/frontend/src/App.js b/frontend/src/App.js index 9b9406a..4089c63 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,4 +1,4 @@ -import SamplePage from './pages/SamplePage'; +import MainPage from './pages/MainPage'; import { createTheme, ThemeProvider } from '@mui/material/styles'; function App() { @@ -11,7 +11,7 @@ function App() { return (
- +
); diff --git a/frontend/src/assets/styles/main.scss b/frontend/src/assets/styles/main.scss index bec6429..454a75b 100644 --- a/frontend/src/assets/styles/main.scss +++ b/frontend/src/assets/styles/main.scss @@ -1,10 +1,17 @@ @import "./theme.scss"; @import "./header.scss"; +@import "./map.scss"; +@import "./step.scss"; // Global styles here... -html, body, #root, .App { +html, body, #root, .App, .main-container { height: 100%; font-family: $primary-font; color: $text-color-primary; background-color: $background-color-primary; } + +.main-container { + display: flex; + flex-direction: column; +} diff --git a/frontend/src/assets/styles/map.scss b/frontend/src/assets/styles/map.scss new file mode 100644 index 0000000..fd881df --- /dev/null +++ b/frontend/src/assets/styles/map.scss @@ -0,0 +1,4 @@ +.map-container, .leaflet-container { + height: 100%; + width: 100%; +} diff --git a/frontend/src/assets/styles/step.scss b/frontend/src/assets/styles/step.scss new file mode 100644 index 0000000..aa01cc5 --- /dev/null +++ b/frontend/src/assets/styles/step.scss @@ -0,0 +1,10 @@ +.step-container { + flex-grow: 1; +} + +.step-overlay { + background-color: #191919c2; + height: 100%; + padding-left: 3vw; + padding-right: 3vw; +} diff --git a/frontend/src/components/Step.js b/frontend/src/components/Step.js deleted file mode 100644 index 64fbd85..0000000 --- a/frontend/src/components/Step.js +++ /dev/null @@ -1,35 +0,0 @@ -import SampleBackground from '../assets/img/sample-bg.jpg'; - -export default function Step(props) { - const overlayStyle = { - backgroundColor: "#3b3b3b74", - paddingRight: '3vw', - paddingLeft: '3vw' - }; - - const StepBackgroundImage = props.backgroundImage || SampleBackground - const stepStyle = { - backgroundImage: `url(${StepBackgroundImage})` - }; - - return ( -
-
- {props.contentComponent ? ( -
- {props.contentComponent} -
- ) : ( -
-
- {props.informationComponent} -
-
- {props.selectionComponent} -
-
- )} -
-
- ); -} diff --git a/frontend/src/components/Stepper.js b/frontend/src/components/Stepper.js index f31de05..51b6278 100644 --- a/frontend/src/components/Stepper.js +++ b/frontend/src/components/Stepper.js @@ -5,7 +5,7 @@ import Step from '@mui/material/Step'; import StepLabel from '@mui/material/StepLabel'; import Button from '@mui/material/Button'; -import LocationStep from './steps/Location' +import LocationStep from './steps/location/Location' import SoilStep from './steps/Soil' import ResultsStep from './steps/Results' @@ -36,8 +36,8 @@ export default function StepperWizard(props) { let CurrentStep = activeStep >= steps.length ? steps[steps.length-1].component : steps[activeStep].component; return ( - - + + {steps.map((step, index) => { return ( @@ -47,7 +47,7 @@ export default function StepperWizard(props) { })} {activeStep === steps.length ? ( - + diff --git a/frontend/src/components/TopNav.js b/frontend/src/components/TopNav.js index cef9643..a06fd87 100644 --- a/frontend/src/components/TopNav.js +++ b/frontend/src/components/TopNav.js @@ -1,26 +1,26 @@ export default function TopNav() { return ( -