lightweight/right-tree
1
0
Fork 0
Code Issues 17 Pull requests Projects Releases Packages Wiki Activity Actions

Add map and description to location step with layout adjustments

Browse source
This commit is contained in:
Dana Lambert 2021-10-18 15:46:18 +13:00
parent d7a97dfb1d
commit 096c534536
17 changed files with 181 additions and 199 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

154
frontend/package-lock.json generated
View file

@ -16,9 +16,11 @@
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^12.8.3",
"axios": "^0.22.0", "axios": "^0.22.0",
"bootstrap": "^5.1.2", "bootstrap": "^5.1.2",
"leaflet": "^1.7.1",
"node-sass": "^6.0.1", "node-sass": "^6.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-leaflet": "^3.2.2",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"reactstrap": "^8.10.0", "reactstrap": "^8.10.0",
"web-vitals": "^1.1.2" "web-vitals": "^1.1.2"
@ -3223,6 +3225,16 @@
"url": "https://opencollective.com/popperjs" "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": { "node_modules/@rollup/plugin-node-resolve": {
"version": "7.1.3", "version": "7.1.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@ -5933,15 +5945,6 @@
"node": ">=8" "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": { "node_modules/bluebird": {
"version": "3.7.2", "version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz",
@ -9771,12 +9774,6 @@
"url": "https://opencollective.com/webpack" "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": { "node_modules/filesize": {
"version": "6.1.0", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz", "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", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" "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": { "node_modules/function-bind": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@ -14155,6 +14139,11 @@
"webpack-sources": "^1.1.0" "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": { "node_modules/leven": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", "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", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" "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": { "node_modules/react-lifecycles-compat": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
@ -21950,24 +21952,6 @@
"node": ">=0.10.0" "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": { "node_modules/watchpack-chokidar2/node_modules/glob-parent": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@ -22405,24 +22389,6 @@
"node": ">=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": { "node_modules/webpack-dev-server/node_modules/glob-parent": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", "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", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
"integrity": "sha512-IXf3XA7+XyN7CP9gGh/XB0UxVMlvARGEgGXLubFICsUMGz6Q+DU+i4gGlpOxTjKvXjkJDJC8YdqdKkDj9qZHEQ==" "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": { "@rollup/plugin-node-resolve": {
"version": "7.1.3", "version": "7.1.3",
"resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz", "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz",
@ -28002,15 +27974,6 @@
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"optional": true "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": { "bluebird": {
"version": "3.7.2", "version": "3.7.2",
"resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", "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": { "filesize": {
"version": "6.1.0", "version": "6.1.0",
"resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz", "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", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" "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": { "function-bind": {
"version": "1.1.1", "version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
@ -34251,6 +34202,11 @@
"webpack-sources": "^1.1.0" "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": { "leven": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", "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", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" "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": { "react-lifecycles-compat": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "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": { "glob-parent": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
@ -41023,16 +40977,6 @@
"locate-path": "^3.0.0" "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": { "glob-parent": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",

11
frontend/package.json
View file

@ -11,9 +11,11 @@
"@testing-library/user-event": "^12.8.3", "@testing-library/user-event": "^12.8.3",
"axios": "^0.22.0", "axios": "^0.22.0",
"bootstrap": "^5.1.2", "bootstrap": "^5.1.2",
"leaflet": "^1.7.1",
"node-sass": "^6.0.1", "node-sass": "^6.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-leaflet": "^3.2.2",
"react-scripts": "4.0.3", "react-scripts": "4.0.3",
"reactstrap": "^8.10.0", "reactstrap": "^8.10.0",
"web-vitals": "^1.1.2" "web-vitals": "^1.1.2"
@ -30,16 +32,9 @@
"react-app/jest" "react-app/jest"
] ]
}, },
"browserslist": { "browserslist": [
"production": [
">0.2%", ">0.2%",
"not dead", "not dead",
"not op_mini all" "not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
] ]
}
} }

6
frontend/public/index.html
View file

@ -22,6 +22,12 @@
work correctly both with client-side routing and a non-root public URL. 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`. 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> <title>Right Tree</title>
</head> </head>
<body> <body>

4
frontend/src/App.js
View file

@ -1,4 +1,4 @@
import SamplePage from './pages/SamplePage'; import MainPage from './pages/MainPage';
import { createTheme, ThemeProvider } from '@mui/material/styles'; import { createTheme, ThemeProvider } from '@mui/material/styles';
function App() { function App() {
@ -11,7 +11,7 @@ function App() {
return ( return (
<div className="App"> <div className="App">
<ThemeProvider theme={darkTheme}> <ThemeProvider theme={darkTheme}>
<SamplePage /> <MainPage />
</ThemeProvider> </ThemeProvider>
</div> </div>
); );

9
frontend/src/assets/styles/main.scss
View file

@ -1,10 +1,17 @@
@import "./theme.scss"; @import "./theme.scss";
@import "./header.scss"; @import "./header.scss";
@import "./map.scss";
@import "./step.scss";
// Global styles here... // Global styles here...
html, body, #root, .App { html, body, #root, .App, .main-container {
height: 100%; height: 100%;
font-family: $primary-font; font-family: $primary-font;
color: $text-color-primary; color: $text-color-primary;
background-color: $background-color-primary; background-color: $background-color-primary;
} }
.main-container {
display: flex;
flex-direction: column;
}

4
frontend/src/assets/styles/map.scss Normal file
View file

@ -0,0 +1,4 @@
.map-container, .leaflet-container {
height: 100%;
width: 100%;
}

10
frontend/src/assets/styles/step.scss Normal file
View file

@ -0,0 +1,10 @@
.step-container {
flex-grow: 1;
}
.step-overlay {
background-color: #191919c2;
height: 100%;
padding-left: 3vw;
padding-right: 3vw;
}

35
frontend/src/components/Step.js
View file

@ -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>
);
}

8
frontend/src/components/Stepper.js
View file

@ -5,7 +5,7 @@ import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel'; import StepLabel from '@mui/material/StepLabel';
import Button from '@mui/material/Button'; import Button from '@mui/material/Button';
import LocationStep from './steps/Location' import LocationStep from './steps/location/Location'
import SoilStep from './steps/Soil' import SoilStep from './steps/Soil'
import ResultsStep from './steps/Results' 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; let CurrentStep = activeStep >= steps.length ? steps[steps.length-1].component : steps[activeStep].component;
return ( return (
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%', height: '100%', display: "flex", flexDirection: "column"}}>
<Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw' }}> <Stepper activeStep={activeStep} sx={{ paddingRight: '3vw', paddingLeft: '3vw', marginBottom:'2vw' }}>
{steps.map((step, index) => { {steps.map((step, index) => {
return ( return (
<Step key={step.label}> <Step key={step.label}>
@ -47,7 +47,7 @@ export default function StepperWizard(props) {
})} })}
</Stepper> </Stepper>
{activeStep === steps.length ? ( {activeStep === steps.length ? (
<React.Fragment> <React.Fragment sx={{ flexGrow: 1 }}>
<ResultsStep {...props} /> <ResultsStep {...props} />
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}> <Box sx={{ display: 'flex', flexDirection: 'row', pt: 2, pb: 2, paddingRight: '3vw', paddingLeft: '3vw' }}>
<Box sx={{ flex: '1 1 auto' }} /> <Box sx={{ flex: '1 1 auto' }} />

32
frontend/src/components/TopNav.js
View file

@ -1,26 +1,26 @@
export default function TopNav() { export default function TopNav() {
return ( return (
<nav class="navbar navbar-expand-lg"> <nav className="navbar navbar-expand-lg">
<div class="container-fluid"> <div className="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"> <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 class="navbar-toggler-icon"></span> <span className="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNavDropdown"> <div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav"> <ul className="navbar-nav">
<li class="nav-item"> <li className="nav-item">
<a class="nav-link" href="#">Advisory</a> <a className="nav-link" href="https://www.b4c3.com">Advisory</a>
</li> </li>
<li class="nav-item"> <li className="nav-item">
<a class="nav-link" href="#">Ecology</a> <a className="nav-link" href="https://www.b4c3.com">Ecology</a>
</li> </li>
<li class="nav-item"> <li className="nav-item">
<a class="nav-link" href="#">Renewables</a> <a className="nav-link" href="https://www.b4c3.com">Renewables</a>
</li> </li>
<li class="nav-item"> <li className="nav-item">
<a class="nav-link" href="#">About</a> <a className="nav-link" href="https://www.b4c3.com">About</a>
</li> </li>
<li class="nav-item"> <li className="nav-item">
<a class="nav-link" href="https://www.b4c3.com/contact">Contact</a> <a className="nav-link" href="https://www.b4c3.com/contact">Contact</a>
</li> </li>
</ul> </ul>
</div> </div>

15
frontend/src/components/steps/Location.js
View file

@ -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} />
)
}

3
frontend/src/components/steps/Results.js
View file

@ -1,5 +1,4 @@
// import React from 'react' import Step from './Step';
import Step from '../Step';
import { ListGroup, ListGroupItem } from 'reactstrap'; import { ListGroup, ListGroupItem } from 'reactstrap';
export default function Results(props) { export default function Results(props) {

2
frontend/src/components/steps/Soil.js
View file

@ -1,4 +1,4 @@
import Step from '../Step'; import Step from './Step';
export default function SoilVariantStep() { export default function SoilVariantStep() {
const soilVarientInfoPanel = ( const soilVarientInfoPanel = (

29
frontend/src/components/steps/Step.js Normal file
View 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
View 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
View 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='&copy; <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>
)
}

7
frontend/src/pages/SamplePage.js → frontend/src/pages/MainPage.js
View file

@ -5,7 +5,7 @@ import Header from '../components/Header'
import PlantRepsostory from '../repository/PlantRepository' import PlantRepsostory from '../repository/PlantRepository'
export default class SamplePage extends React.Component { export default class MainPage extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -31,12 +31,9 @@ export default class SamplePage extends React.Component {
render() { render() {
return ( return (
<Container fluid className='p-0'> <Container fluid className='main-container p-0'>
<Header/> <Header/>
<div className="pt-4">
<Stepper plants={this.state.plants} /> <Stepper plants={this.state.plants} />
</div>
</Container> </Container>
) )
} }