add list of devices in settings
Change-Id: Ib8e8f11647d96049fbd14f8c55dd885856930656
diff --git a/client/src/components/AccountPreferences.js b/client/src/components/AccountPreferences.js
index edf1588..0c62204 100644
--- a/client/src/components/AccountPreferences.js
+++ b/client/src/components/AccountPreferences.js
@@ -24,149 +24,220 @@
}
export default function AccountPreferences(props) {
- const account = props.account
- const isJamiAccount = account.getType() === Account.TYPE_JAMI
- const alias = isJamiAccount ? "Jami account" : "SIP account"
- const moderators = account.getDefaultModerators()
- const [defaultModeratorUri, setDefaultModeratorUri] = useState('')
+ const account = props.account;
+ let devices = [];
+ for (var i in account.devices) devices.push([i, account.devices[i]]);
- const [details, setDetails] = useState(account.getDetails())
+ console.log(devices)
+
+ const isJamiAccount = account.getType() === Account.TYPE_JAMI;
+ const alias = isJamiAccount ? "Jami account" : "SIP account";
+ const moderators = account.getDefaultModerators();
+ const [defaultModeratorUri, setDefaultModeratorUri] = useState("");
+
+ const [details, setDetails] = useState(account.getDetails());
const addModerator = () => {
if (defaultModeratorUri) {
- authManager.fetch(`/api/accounts/${account.getId()}/defaultModerators/${defaultModeratorUri}`, {method: "PUT"})
- setDefaultModeratorUri('')
+ authManager.fetch(
+ `/api/accounts/${account.getId()}/defaultModerators/${defaultModeratorUri}`,
+ { method: "PUT" }
+ );
+ setDefaultModeratorUri("");
}
- }
+ };
const removeModerator = (uri) =>
- authManager.fetch(`/api/accounts/${account.getId()}/defaultModerators/${uri}`, {method: "DELETE"})
+ authManager.fetch(
+ `/api/accounts/${account.getId()}/defaultModerators/${uri}`,
+ { method: "DELETE" }
+ );
const handleToggle = (key, value) => {
- console.log(`handleToggle ${key} ${value}`)
- const newDetails = {}
- newDetails[key] = value ? "true" : "false"
- console.log(newDetails)
+ console.log(`handleToggle ${key} ${value}`);
+ const newDetails = {};
+ newDetails[key] = value ? "true" : "false";
+ console.log(newDetails);
authManager.fetch(`/api/accounts/${account.getId()}`, {
method: "POST",
headers: {
- 'Accept': 'application/json',
- 'Content-Type': 'application/json'
+ Accept: "application/json",
+ "Content-Type": "application/json",
},
- body: JSON.stringify(newDetails)
- })
- setDetails({...account.updateDetails(newDetails)})
- }
+ body: JSON.stringify(newDetails),
+ });
+ setDetails({ ...account.updateDetails(newDetails) });
+ };
return (
<motion.div
- initial="initial"
- animate="enter"
- exit="exit"
- variants={{
- enter: { transition: { staggerChildren: 0.05 } },
- exit: { transition: { staggerChildren: 0.02 } }
- }}
- >
- <motion.div variants={thumbnailVariants}><Typography variant="h2" component="h2" gutterBottom>{alias}</Typography></motion.div>
+ initial="initial"
+ animate="enter"
+ exit="exit"
+ variants={{
+ enter: { transition: { staggerChildren: 0.05 } },
+ exit: { transition: { staggerChildren: 0.02 } },
+ }}
+ >
+ <motion.div variants={thumbnailVariants}>
+ <Typography variant="h2" component="h2" gutterBottom>
+ {alias}
+ </Typography>
+ </motion.div>
<Grid container spacing={3} style={{ marginBottom: 16 }}>
- {isJamiAccount &&
- <Grid item xs={12}><motion.div variants={thumbnailVariants}><JamiIdCard account={account} /></motion.div></Grid>}
+ {isJamiAccount && (
+ <Grid item xs={12}>
+ <motion.div variants={thumbnailVariants}>
+ <JamiIdCard account={account} />
+ </motion.div>
+ </Grid>
+ )}
<Grid item xs={12} sm={6}>
- <motion.div variants={thumbnailVariants}>
- <ConversationsOverviewCard accountId={account.getId()} />
+ <motion.div variants={thumbnailVariants}>
+ <ConversationsOverviewCard accountId={account.getId()} />
</motion.div>
</Grid>
<Grid item xs={12} sm={6}>
- <motion.div variants={thumbnailVariants}>
- <Card>
- <CardContent>
- <Typography color="textSecondary" gutterBottom>
- Current calls
- </Typography>
- <Typography gutterBottom variant="h5" component="h2">
- 0
- </Typography>
- </CardContent>
- </Card>
+ <motion.div variants={thumbnailVariants}>
+ <Card>
+ <CardContent>
+ <Typography color="textSecondary" gutterBottom>
+ Current calls
+ </Typography>
+ <Typography gutterBottom variant="h5" component="h2">
+ 0
+ </Typography>
+ </CardContent>
+ </Card>
</motion.div>
</Grid>
+ <Grid item xs={12} sm={6}>
+ <motion.div variants={thumbnailVariants}>
+ <Card>
+ <CardContent>
+ <Typography color="textSecondary" gutterBottom>
+ Appareils associés
+ </Typography>
+ <Typography gutterBottom variant="h5" component="h2">
+ {devices.map((device) => (
+ <ListItem>
+ <GroupRounded />
+ <ListItemText
+ id="switch-list-label-rendezvous"
+ primary={device[1]}
+ secondary={device[0]}
+ />
+ </ListItem>
+ ))}
+ {/* <ListItemTextsion> */}
+ </Typography>
+ </CardContent>
+ </Card>
+ </motion.div>
+ </Grid>
</Grid>
- <List subheader={<motion.div variants={thumbnailVariants}><ListSubheader>Settings</ListSubheader></motion.div>}>
- <motion.div variants={thumbnailVariants}>
- <ListItem>
- <ListItemIcon>
- <GroupRounded />
- </ListItemIcon>
- <ListItemText id="switch-list-label-rendezvous" primary="Rendez-Vous point" />
- <ListItemSecondaryAction>
- <Switch
- edge="end"
- onChange={e => handleToggle('Account.rendezVous', e.target.checked)}
- checked={details['Account.rendezVous'] === 'true'}
- inputProps={{ 'aria-labelledby': 'switch-list-label-rendezvous' }}
+ <List
+ subheader={
+ <motion.div variants={thumbnailVariants}>
+ <ListSubheader>Settings</ListSubheader>
+ </motion.div>
+ }
+ >
+ <motion.div variants={thumbnailVariants}>
+ <ListItem>
+ <ListItemIcon>
+ <GroupRounded />
+ </ListItemIcon>
+ <ListItemText
+ id="switch-list-label-rendezvous"
+ primary="Rendez-Vous point"
/>
- </ListItemSecondaryAction>
- </ListItem>
+ <ListItemSecondaryAction>
+ <Switch
+ edge="end"
+ onChange={(e) =>
+ handleToggle("Account.rendezVous", e.target.checked)
+ }
+ checked={details["Account.rendezVous"] === "true"}
+ inputProps={{
+ "aria-labelledby": "switch-list-label-rendezvous",
+ }}
+ />
+ </ListItemSecondaryAction>
+ </ListItem>
</motion.div>
<motion.div variants={thumbnailVariants}>
- <ListItem>
- <ListItemIcon>
- <PhoneCallbackRounded />
- </ListItemIcon>
- <ListItemText id="switch-list-label-publicin" primary="Allow connection from unkown peers" />
- <ListItemSecondaryAction>
- <Switch
- edge="end"
- onChange={e => handleToggle('DHT.PublicInCalls', e.target.checked)}
- checked={details['DHT.PublicInCalls'] === 'true'}
- inputProps={{ 'aria-labelledby': 'switch-list-label-publicin' }}
+ <ListItem>
+ <ListItemIcon>
+ <PhoneCallbackRounded />
+ </ListItemIcon>
+ <ListItemText
+ id="switch-list-label-publicin"
+ primary="Allow connection from unkown peers"
/>
- </ListItemSecondaryAction>
- </ListItem>
+ <ListItemSecondaryAction>
+ <Switch
+ edge="end"
+ onChange={(e) =>
+ handleToggle("DHT.PublicInCalls", e.target.checked)
+ }
+ checked={details["DHT.PublicInCalls"] === "true"}
+ inputProps={{ "aria-labelledby": "switch-list-label-publicin" }}
+ />
+ </ListItemSecondaryAction>
+ </ListItem>
</motion.div>
<motion.div variants={thumbnailVariants}>
- <Paper>
- <Toolbar>
- <Typography variant="h6">
- Default moderators
- </Typography>
- </Toolbar>
- <List>
- <ListItem key="add">
- <TextField variant="outlined"
- value={defaultModeratorUri}
- onChange={e => setDefaultModeratorUri(e.target.value)}
- label="Add new default moderator"
- placeholder="Enter new moderator name or URI"
- fullWidth />
- <ListItemSecondaryAction>
- <IconButton onClick={addModerator} size="large"><AddCircle /></IconButton>
- </ListItemSecondaryAction>
- </ListItem>
- {!moderators || moderators.length === 0 ?
- <ListItem key="placeholder">
- <ListItemText primary="No default moderator" /></ListItem> :
- moderators.map((moderator) => (
- <ListItem key={moderator.uri}>
- <ListItemAvatar>
- <ConversationAvatar name={moderator.getDisplayName()} />
- </ListItemAvatar>
- <ListItemText primary={moderator.getDisplayName()} />
- <ListItemSecondaryAction>
- <IconButton onClick={e => removeModerator(moderator.uri)} size="large"><DeleteRounded /></IconButton>
- </ListItemSecondaryAction>
+ <Paper>
+ <Toolbar>
+ <Typography variant="h6">Default moderators</Typography>
+ </Toolbar>
+ <List>
+ <ListItem key="add">
+ <TextField
+ variant="outlined"
+ value={defaultModeratorUri}
+ onChange={(e) => setDefaultModeratorUri(e.target.value)}
+ label="Add new default moderator"
+ placeholder="Enter new moderator name or URI"
+ fullWidth
+ />
+ <ListItemSecondaryAction>
+ <IconButton onClick={addModerator} size="large">
+ <AddCircle />
+ </IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ {!moderators || moderators.length === 0 ? (
+ <ListItem key="placeholder">
+ <ListItemText primary="No default moderator" />
</ListItem>
- ))}
- </List>
- </Paper>
+ ) : (
+ moderators.map((moderator) => (
+ <ListItem key={moderator.uri}>
+ <ListItemAvatar>
+ <ConversationAvatar name={moderator.getDisplayName()} />
+ </ListItemAvatar>
+ <ListItemText primary={moderator.getDisplayName()} />
+ <ListItemSecondaryAction>
+ <IconButton
+ onClick={(e) => removeModerator(moderator.uri)}
+ size="large"
+ >
+ <DeleteRounded />
+ </IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ ))
+ )}
+ </List>
+ </Paper>
</motion.div>
</List>
-
</motion.div>
);
}