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