cleaned up systems listing

This commit is contained in:
Luke Berndt
2023-02-04 09:22:10 -05:00
parent 02417e617f
commit 480ac1050c

View File

@@ -19,13 +19,43 @@ class SystemCard extends Component {
description = description.substring(0, 96) + "...";
}
if (system.callAvg) {
callAvg = Math.round(system.callAvg * 10) / 10 + " call/min"
callAvg = Math.round(system.callAvg * 10) / 10 + "/min"
}
if (system.clientCount === 1) {
clientCount = "1 listener";
} else if (system.clientCount > 1) {
clientCount = system.clientCount + " listeners"
}
let status = (<></>)
if (system.active) {
status = (
<Grid >
<Grid.Row>
<Grid.Column width="8">
{clientCount && <div><Icon name='headphones' />{clientCount}</div>}
</Grid.Column>
<Grid.Column width="8">
{callAvg && <div><Icon name='file audio outline' />{callAvg}</div>}
</Grid.Column>
</Grid.Row>
</Grid>
)
} else {
const lastActive = new Date(system.lastActive);
status = (
<Grid >
<Grid.Row>
<Grid.Column>
<Icon name="calendar times outline"/> Last Active {lastActive.toLocaleDateString()}
</Grid.Column>
</Grid.Row>
</Grid>
)
}
if (system) {
switch (system.systemType) {
case "state":
@@ -48,20 +78,24 @@ class SystemCard extends Component {
<Card link onClick={this.props.onClick} raised={true} centered={true} >
<Card.Content>
<Card.Header >{system.name}</Card.Header>
<Card.Meta>{system.screenName && <Label size="mini"><Icon name='user' /> {system.screenName}</Label>}</Card.Meta>
<Card.Meta>{location} </Card.Meta>
<Card.Description>
<Grid >
<Grid.Row>
<Grid.Column >
{system.screenName && <Label size="mini"><Icon name='user' /> {system.screenName}</Label>}
</Grid.Column>
</Grid.Row>
<Grid.Row>
<Grid.Column>
{description}
</Grid.Column>
</Grid.Row>
</Grid>
</Card.Description>
</Card.Content>
<Card.Content description={description} />
<Card.Content extra>
<Icon name='marker' />
{location}
<Grid columns={2}>
<Grid.Column>
{clientCount && <div><Icon name='headphones' />{clientCount}</div>}
</Grid.Column>
<Grid.Column>
{callAvg && <div><Icon name='file audio outline' />{callAvg}</div>}
</Grid.Column>
</Grid>
{status}
</Card.Content>
</Card>
);