Add map and description to location step with layout adjustments
This commit is contained in:
Dana Lambert
parent
d7a97dfb1d
commit
096c534536
17 changed files with 181 additions and 199 deletions
154
frontend/package-lock.json
generated
154
frontend/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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": [
|
||||
"browserslist": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`.
|
||||
-->
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
|
||||
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
|
||||
crossorigin=""
|
||||
/>
|
||||
<title>Right Tree</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div className="App">
|
||||
<ThemeProvider theme={darkTheme}>
|
||||
<SamplePage />
|
||||
<MainPage />
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
4
frontend/src/assets/styles/map.scss
Normal file
4
frontend/src/assets/styles/map.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.map-container, .leaflet-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
10
frontend/src/assets/styles/step.scss
Normal file
10
frontend/src/assets/styles/step.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.step-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.step-overlay {
|
||||
background-color: #191919c2;
|
||||
height: 100%;
|
||||
padding-left: 3vw;
|
||||
padding-right: 3vw;
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<div style={stepStyle}>
|
||||
<div className='step-container mt-4 py-4' style={overlayStyle}>
|
||||
{props.contentComponent ? (
|
||||
<div>
|
||||
{props.contentComponent}
|
||||
</div>
|
||||
) : (
|
||||
<div className='d-flex justify-content-between'>
|
||||
<div>
|
||||
{props.informationComponent}
|
||||
</div>
|
||||
<div>
|
||||
{props.selectionComponent}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw' }}>
|
||||
<Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column"}}>
|
||||
<Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom:'2vw' }}>
|
||||
{steps.map((step, index) => {
|
||||
return (
|
||||
<Step key={step.label}>
|
||||
|
|
@ -47,7 +47,7 @@ export default function StepperWizard(props) {
|
|||
})}
|
||||
</Stepper>
|
||||
{activeStep === steps.length ? (
|
||||
<React.Fragment>
|
||||
<React.Fragment sx={{ flexGrow: 1 }}>
|
||||
<ResultsStep {...props} />
|
||||
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
|
||||
<Box sx={{ flex: '1 1 auto' }} />
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
export default function TopNav() {
|
||||
return (
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container-fluid">
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
<nav className="navbar navbar-expand-lg">
|
||||
<div className="container-fluid">
|
||||
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Advisory</a>
|
||||
<div className="collapse navbar-collapse" id="navbarNavDropdown">
|
||||
<ul className="navbar-nav">
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="https://www.b4c3.com">Advisory</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Ecology</a>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="https://www.b4c3.com">Ecology</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Renewables</a>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="https://www.b4c3.com">Renewables</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">About</a>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="https://www.b4c3.com">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="https://www.b4c3.com/contact">Contact</a>
|
||||
<li className="nav-item">
|
||||
<a className="nav-link" href="https://www.b4c3.com/contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
import Step from '../Step';
|
||||
|
||||
export default function LocationStep() {
|
||||
const locationInfoPanel = (
|
||||
<h1>Location Information</h1>
|
||||
)
|
||||
|
||||
const locationSelectionPanel = (
|
||||
<h1>Location Selection</h1>
|
||||
)
|
||||
|
||||
return (
|
||||
<Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
|
||||
)
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
// import React from 'react'
|
||||
import Step from '../Step';
|
||||
import Step from './Step';
|
||||
import { ListGroup, ListGroupItem } from 'reactstrap';
|
||||
|
||||
export default function Results(props) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import Step from '../Step';
|
||||
import Step from './Step';
|
||||
|
||||
export default function SoilVariantStep() {
|
||||
const soilVarientInfoPanel = (
|
||||
|
|
|
|||
29
frontend/src/components/steps/Step.js
Normal file
29
frontend/src/components/steps/Step.js
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { Row, Col } from 'reactstrap'
|
||||
import SampleBackground from '../../assets/img/sample-bg.jpg';
|
||||
|
||||
export default function Step(props) {
|
||||
const StepBackgroundImage = props.backgroundImage || SampleBackground
|
||||
const stepBackground = {
|
||||
backgroundImage: `url(${StepBackgroundImage})`
|
||||
};
|
||||
|
||||
return (
|
||||
<div className='step-container' style={stepBackground}>
|
||||
<div className='step-overlay'>
|
||||
{props.contentComponent ? (
|
||||
props.contentComponent
|
||||
) : (
|
||||
<Row style={{height: '100%'}}>
|
||||
<Col md="5" sm="12">
|
||||
{props.informationComponent}
|
||||
</Col>
|
||||
<Col md="7" sm="12">
|
||||
{props.selectionComponent}
|
||||
</Col>
|
||||
</Row>
|
||||
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
frontend/src/components/steps/location/Location.js
Normal file
22
frontend/src/components/steps/location/Location.js
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import Step from '../Step';
|
||||
import LocationSelectorMap from './Map';
|
||||
|
||||
export default function LocationStep() {
|
||||
const locationInfoPanel = (
|
||||
<div className='py-5'>
|
||||
<h4>Right Plant Right Place Plant Selector Tool for New Zealand.</h4>
|
||||
<br/>
|
||||
<p>
|
||||
Your native plant selection starts here! Use the map to select a planting site location within New Zealand. On the following pages you will provide more details on your project until the system has enough information to create your plant species list and planting plan. To start, click on the map and pan and zoom to the site location. Once the location is selected, click on the “next step” button to complete the process. Repeat this process for sites at different locations.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
const locationSelectionPanel = (
|
||||
<LocationSelectorMap />
|
||||
)
|
||||
|
||||
return (
|
||||
<Step informationComponent={locationInfoPanel} selectionComponent={locationSelectionPanel} />
|
||||
)
|
||||
}
|
||||
19
frontend/src/components/steps/location/Map.js
Normal file
19
frontend/src/components/steps/location/Map.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
|
||||
|
||||
export default function Map() {
|
||||
return (
|
||||
<div className="map-container">
|
||||
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
|
||||
<TileLayer
|
||||
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
|
||||
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
||||
/>
|
||||
<Marker position={[51.505, -0.09]}>
|
||||
<Popup>
|
||||
A pretty CSS3 popup. <br /> Easily customizable.
|
||||
</Popup>
|
||||
</Marker>
|
||||
</MapContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,7 +5,7 @@ import Header from '../components/Header'
|
|||
|
||||
import PlantRepsostory from '../repository/PlantRepository'
|
||||
|
||||
export default class SamplePage extends React.Component {
|
||||
export default class MainPage extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -31,12 +31,9 @@ export default class SamplePage extends React.Component {
|
|||
|
||||
render() {
|
||||
return (
|
||||
<Container fluid className='p-0'>
|
||||
<Container fluid className='main-container p-0'>
|
||||
<Header/>
|
||||
|
||||
<div className="pt-4">
|
||||
<Stepper plants={this.state.plants} />
|
||||
</div>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in a new issue