From 646254017c8b900b5f6d56a16423c57ebaef3d37 Mon Sep 17 00:00:00 2001 From: Delucse <46593742+Delucse@users.noreply.github.com> Date: Mon, 7 Dec 2020 20:12:33 +0100 Subject: [PATCH] display account information --- src/components/Alert.js | 34 +++++++++ src/components/Route/Routes.js | 20 +++-- src/components/User/Account.js | 129 +++++++++++++++++++++++++++++++++ src/components/User/Login.js | 6 +- 4 files changed, 180 insertions(+), 9 deletions(-) create mode 100644 src/components/Alert.js create mode 100644 src/components/User/Account.js diff --git a/src/components/Alert.js b/src/components/Alert.js new file mode 100644 index 0000000..ce10c87 --- /dev/null +++ b/src/components/Alert.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; + +import { withStyles } from '@material-ui/core/styles'; +import { fade } from '@material-ui/core/styles/colorManipulator'; + +import Typography from '@material-ui/core/Typography'; + +const styles = (theme) => ({ + alert: { + marginBottom: '20px', + border: `1px solid ${theme.palette.primary.main}`, + padding: '10px 20px', + borderRadius: '4px', + background: fade(theme.palette.primary.main, 0.3), + color: 'rgb(70,70,70)' + } +}); + + +export class Alert extends Component { + + render(){ + return( +
+ + {this.props.children} + +
+ ); + } +} + + +export default withStyles(styles, { withTheme: true })(Alert); diff --git a/src/components/Route/Routes.js b/src/components/Route/Routes.js index 8304dc3..25e9aff 100644 --- a/src/components/Route/Routes.js +++ b/src/components/Route/Routes.js @@ -20,6 +20,7 @@ import Settings from '../Settings/Settings'; import Impressum from '../Impressum'; import Privacy from '../Privacy'; import Login from '../User/Login'; +import Account from '../User/Account'; class Routes extends Component { @@ -33,34 +34,37 @@ class Routes extends Component {
- // Tutorials + {/* Tutorials */} - // Sharing + {/* Sharing */} - // Gallery-Projects + {/* Gallery-Projects */} - // User-Projects + {/* User-Projects */} - // User + {/* User */} - // settings + + + + {/* settings */} - // privacy + {/* privacy */} - // Not Found + {/* Not Found */}
diff --git a/src/components/User/Account.js b/src/components/User/Account.js new file mode 100644 index 0000000..09a9545 --- /dev/null +++ b/src/components/User/Account.js @@ -0,0 +1,129 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; + +import Breadcrumbs from '../Breadcrumbs'; +import Alert from '../Alert'; + +import Grid from '@material-ui/core/Grid'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemIcon from '@material-ui/core/ListItemIcon'; +import ListItemText from '@material-ui/core/ListItemText'; +import Divider from '@material-ui/core/Divider'; +import Paper from '@material-ui/core/Paper'; +import Link from '@material-ui/core/Link'; +import Typography from '@material-ui/core/Typography'; +import Tooltip from '@material-ui/core/Tooltip'; + +import { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; + + +export class Account extends Component { + + render(){ + const {user} = this.props; + return( +
+ + +

Account

+ + Alle Angaben stammen von openSenseMap und können dort verwaltet werden. + + + + + + + + + + + + + + + + + + + + + + +
+ {this.props.user.boxes.length < 1 ? + + Du hast noch keine senseBox registriert. Besuche openSenseMap um eine senseBox zu registrieren. + + : + Du hast {this.props.user.boxes.length} {this.props.user.boxes.length === 1 ? 'senseBox' : 'senseBoxen'} registriert: + } +
+ + {this.props.user.boxes.map((box, i) => { + var sensors = box.sensors.map(sensor => sensor.title ); + return ( + + + + + + {box.name} + + + + + + + +
+ Modell: + {box.model} +
+ + + + + + + +
+ Standort: + {`${box.exposure} (lon: ${box.currentLocation.coordinates[0]}, lat: ${box.currentLocation.coordinates[1]})`} +
+ + + + + + + +
+ Sensoren: + {sensors.join(', ')} +
+ + + + + + ) + })} + +
+ ); + } +} + +Account.propTypes = { + user: PropTypes.object.isRequired +}; + +const mapStateToProps = state => ({ + user: state.auth.user +}); + +export default connect(mapStateToProps, null)(Account); diff --git a/src/components/User/Login.js b/src/components/User/Login.js index d8dfc32..13d4497 100644 --- a/src/components/User/Login.js +++ b/src/components/User/Login.js @@ -7,6 +7,7 @@ import { clearMessages } from '../../actions/messageActions' import { withRouter } from 'react-router-dom'; import Snackbar from '../Snackbar'; +import Alert from '../Alert'; import Breadcrumbs from '../Breadcrumbs'; import Button from '@material-ui/core/Button'; @@ -89,6 +90,9 @@ export class Login extends Component {

Anmelden

+ + Zur Anmeldung ist ein Konto auf openSenseMap Voraussetzung. +

- Du hast noch kein Konto? Registrieren + Du hast noch kein Konto? Registriere dich auf openSenseMap.