schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add account information

Browse Source
This commit is contained in:
Mario 2021-01-20 11:33:06 +01:00
parent 957ccd566e
commit 0d8c30c1ee
1 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/User/Account.js
View File

@ -16,15 +16,15 @@ 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 { faUser, faAt, faMapMarkerAlt, faCloudSunRain, faBox, faUserTag } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
export class Account extends Component {
render(){
const {user} = this.props;
return(
render() {
const { user } = this.props;
return (
<div>
<Breadcrumbs content={[{ link: '/user', title: 'Account' }]} />
@ -32,7 +32,7 @@ export class Account extends Component {
<Alert>
Alle Angaben stammen von <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> und können dort verwaltet werden.
</Alert>
<Paper style={{width: 'max-content', maxWidth: '100%'}}>
<Paper style={{ width: 'max-content', maxWidth: '100%' }}>
<List>
<ListItem>
<Tooltip title='Nutzername'>
@ -40,7 +40,7 @@ export class Account extends Component {
<FontAwesomeIcon icon={faUser} />
</ListItemIcon>
</Tooltip>
<ListItemText primary={user.name} />
<ListItemText primary={`Name: ${user.name}`} />
</ListItem>
<ListItem>
<Tooltip title='Email'>
@ -48,30 +48,36 @@ export class Account extends Component {
<FontAwesomeIcon icon={faAt} />
</ListItemIcon>
</Tooltip>
<ListItemText primary={user.email} />
<ListItemText primary={`Email: ${user.email}`} />
</ListItem>
<ListItem>
<ListItemIcon>
<FontAwesomeIcon icon={faUserTag} />
</ListItemIcon>
<ListItemText primary={`Userrolle: ${user.blocklyRole}`} />
</ListItem>
</List>
</Paper>
<Divider style={{marginBottom: '16px', marginTop: '16px'}}/>
<div style={{marginBottom: '8px'}}>
<Divider style={{ marginBottom: '16px', marginTop: '16px' }} />
<div style={{ marginBottom: '8px' }}>
{this.props.user.boxes.length < 1 ?
<Typography>
Du hast noch keine senseBox registriert. Besuche <Link color='primary' rel="noreferrer" target="_blank" href={'https://opensensemap.org/'}>openSenseMap</Link> um eine senseBox zu registrieren.
</Typography>
: <Typography style={{fontWeight: 'bold', fontSize: '1.1rem'}}>
: <Typography style={{ fontWeight: 'bold', fontSize: '1.1rem' }}>
Du hast {this.props.user.boxes.length} {this.props.user.boxes.length === 1 ? 'senseBox' : 'senseBoxen'} registriert:
</Typography>}
</div>
<Grid container spacing={2}>
{this.props.user.boxes.map((box, i) => {
var sensors = box.sensors.map(sensor => sensor.title );
var sensors = box.sensors.map(sensor => sensor.title);
return (
<Grid item xs={12} sm={6} md={4} xl={3} key={i}>
<Link rel="noreferrer" target="_blank" href={`https://opensensemap.org/explore/${box._id}`} color="primary" style={{ textDecoration: 'none', color: 'inherit' }}>
<Paper>
<List>
<ListItem>
<Typography style={{fontWeight: 'bold', fontSize: '1.6rem'}}>{box.name}</Typography>
<Typography style={{ fontWeight: 'bold', fontSize: '1.6rem' }}>{box.name}</Typography>
</ListItem>
<ListItem>
<Tooltip title='Modell'>
@ -80,7 +86,7 @@ export class Account extends Component {
</ListItemIcon>
</Tooltip>
<div>
<Typography style={{fontWeight: 'bold', marginRight: '4px'}}>Modell: </Typography>
<Typography style={{ fontWeight: 'bold', marginRight: '4px' }}>Modell: </Typography>
<Typography>{box.model}</Typography>
</div>
</ListItem>
@ -91,7 +97,7 @@ export class Account extends Component {
</ListItemIcon>
</Tooltip>
<div>
<Typography style={{fontWeight: 'bold', marginRight: '4px'}}>Standort: </Typography>
<Typography style={{ fontWeight: 'bold', marginRight: '4px' }}>Standort: </Typography>
<Typography>{`${box.exposure} (lon: ${box.currentLocation.coordinates[0]}, lat: ${box.currentLocation.coordinates[1]})`}</Typography>
</div>
</ListItem>
@ -102,7 +108,7 @@ export class Account extends Component {
</ListItemIcon>
</Tooltip>
<div>
<Typography style={{fontWeight: 'bold', marginRight: '4px'}}>Sensoren: </Typography>
<Typography style={{ fontWeight: 'bold', marginRight: '4px' }}>Sensoren: </Typography>
<Typography>{sensors.join(', ')}</Typography>
</div>
</ListItem>