add account overview, cleanup
Change-Id: I176af7a7688f38cb30eb7d65fa3e00e55f10da6f
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index 5b6ae28..5629ef0 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -1,63 +1,142 @@
import React from 'react';
-
-import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
+import { List, ListItem, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader, Switch, Typography, Grid, Paper, CardContent, Card } from '@material-ui/core';
+import { PhoneCallbackRounded, GroupRounded } from '@material-ui/icons';
import JamiIdCard from './JamiIdCard';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import Switch from '@material-ui/core/Switch';
-import PhoneCallbackIcon from '@material-ui/icons/PhoneCallback';
-import GroupRoundedIcon from '@material-ui/icons/GroupRounded';
import Account from '../../../model/Account';
+import ConversationsOverviewCard from './ConversationsOverviewCard';
-class AccountPreferences extends React.Component {
+const useStyles = makeStyles({
+ root: {
+ minWidth: 275,
+ },
+ bullet: {
+ display: 'inline-block',
+ margin: '0 2px',
+ transform: 'scale(0.8)',
+ },
+ title: {
+ fontSize: 14,
+ },
+ pos: {
+ marginBottom: 12,
+ },
+});
- render() {
- const account = this.props.account
- const isJamiAccount = account.getType() === Account.TYPE_JAMI
- return (
- <React.Fragment>
- <Typography variant="h2" component="h2">{isJamiAccount ? "Jami account" : "SIP account"}</Typography>
+const columns = [
+ { id: 'name', label: 'Name', minWidth: 170 },
+ { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 },
+ {
+ id: 'population',
+ label: 'Population',
+ minWidth: 170,
+ align: 'right',
+ format: (value) => value.toLocaleString('en-US'),
+ },
+ {
+ id: 'size',
+ label: 'Size\u00a0(km\u00b2)',
+ minWidth: 170,
+ align: 'right',
+ format: (value) => value.toLocaleString('en-US'),
+ },
+ {
+ id: 'density',
+ label: 'Density',
+ minWidth: 170,
+ align: 'right',
+ format: (value) => value.toFixed(2),
+ },
+];
- {isJamiAccount &&
- <JamiIdCard account={account} />}
-
- <List subheader={<ListSubheader>Settings</ListSubheader>}>
- <ListItem>
- <ListItemIcon>
- <GroupRoundedIcon />
- </ListItemIcon>
- <ListItemText id="switch-list-label-rendezvous" primary="Rendez-Vous point" />
- <ListItemSecondaryAction>
- <Switch
- edge="end"
- /*onChange={handleToggle('wifi')}*/
- checked={account.isRendezVous()}
- inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}
- />
- </ListItemSecondaryAction>
- </ListItem>
- <ListItem>
- <ListItemIcon>
- <PhoneCallbackIcon />
- </ListItemIcon>
- <ListItemText id="switch-list-label-publicin" primary="Allow connection from unkown peers" />
- <ListItemSecondaryAction>
- <Switch
- edge="end"
- /*onChange={handleToggle('bluetooth')}*/
- checked={account.isPublicIn()}
- inputProps={{ 'aria-labelledby': 'switch-list-label-bluetooth' }}
- />
- </ListItemSecondaryAction>
- </ListItem>
- </List>
- </React.Fragment>)
- }
+function createData(name, code, population, size) {
+ const density = population / size;
+ return { name, code, population, size, density };
}
-export default AccountPreferences;
\ No newline at end of file
+const rows = [
+ createData('India', 'IN', 1324171354, 3287263),
+ createData('China', 'CN', 1403500365, 9596961),
+ createData('Italy', 'IT', 60483973, 301340),
+ createData('United States', 'US', 327167434, 9833520),
+ createData('Canada', 'CA', 37602103, 9984670),
+ createData('Australia', 'AU', 25475400, 7692024),
+ createData('Germany', 'DE', 83019200, 357578),
+ createData('Ireland', 'IE', 4857000, 70273),
+ createData('Mexico', 'MX', 126577691, 1972550),
+ createData('Japan', 'JP', 126317000, 377973),
+ createData('France', 'FR', 67022000, 640679),
+ createData('United Kingdom', 'GB', 67545757, 242495),
+ createData('Russia', 'RU', 146793744, 17098246),
+ createData('Nigeria', 'NG', 200962417, 923768),
+ createData('Brazil', 'BR', 210147125, 8515767),
+];
+
+export default function AccountPreferences(props) {
+ const classes = useStyles()
+ const account = props.account
+ const isJamiAccount = account.getType() === Account.TYPE_JAMI
+ const alias = isJamiAccount ? "Jami account" : "SIP account"
+ return (
+ <React.Fragment>
+ <Typography variant="h2" component="h2" gutterBottom>{alias}</Typography>
+ <Grid container spacing={3} style={{marginBottom: 16}}>
+ {isJamiAccount &&
+ <Grid item xs={12}><JamiIdCard account={account} /></Grid>}
+
+ <Grid item xs={12} sm={6}>
+ <ConversationsOverviewCard accountId={account.getId()} />
+ </Grid>
+
+ <Grid item xs={12} sm={6}>
+ <Card>
+ <CardContent>
+ <Typography className={classes.title} color="textSecondary" gutterBottom>
+ Current calls
+ </Typography>
+ <Typography gutterBottom variant="h5" component="h2">
+ 0
+ </Typography>
+ </CardContent>
+ </Card>
+ </Grid>
+ </Grid>
+
+ <List subheader={<ListSubheader>Settings</ListSubheader>}>
+ <ListItem>
+ <ListItemIcon>
+ <GroupRounded />
+ </ListItemIcon>
+ <ListItemText id="switch-list-label-rendezvous" primary="Rendez-Vous point" />
+ <ListItemSecondaryAction>
+ <Switch
+ edge="end"
+ /*onChange={handleToggle('wifi')}*/
+ checked={account.isRendezVous()}
+ inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}
+ />
+ </ListItemSecondaryAction>
+ </ListItem>
+ <ListItem>
+ <ListItemIcon>
+ <PhoneCallbackRounded />
+ </ListItemIcon>
+ <ListItemText id="switch-list-label-publicin" primary="Allow connection from unkown peers" />
+ <ListItemSecondaryAction>
+ <Switch
+ edge="end"
+ /*onChange={handleToggle('bluetooth')}*/
+ checked={account.isPublicIn()}
+ inputProps={{ 'aria-labelledby': 'switch-list-label-bluetooth' }}
+ />
+ </ListItemSecondaryAction>
+ </ListItem>
+ </List>
+
+
+
+
+
+ </React.Fragment>)
+}