import React from 'react'; import PropTypes from 'prop-types'; import moment from 'moment'; import {Col, Row, Grid } from 'react-bootstrap'; const styles = { container: { textAlign: 'left', maxWidth: '100%', maxHeight: '100%', overflow: 'hidden' }, header: { color: 'white', fontSize: '0.9em', fontWeight: 'bold', }, dateTime: { color: 'white' } }; export default class StatusCard extends React.Component { static propTypes = { latestData: PropTypes.array, }; static defaultProps = { }; constructor(props) { super(props); this.state = { startDateTime: moment(), currentTime: new Date() }; } componentDidMount() { setInterval(() => this.setState({ currentDate: new Date() }), 1000); } renderComms(data) { return data.slice(Math.max(data.length - 4, 1)).map((log, i) => ( <Row key={log.dateTime + i} style={styles.dateTime}> <Col md={12}> {`${moment(log.dateTime).format('YYYY-MM-DD HH:mm:ss.SSS')} ${log.size} bytes`} </Col> </Row> )); } render() { const data = this.props.latestData; let now = moment(); let currentTime = now.format('ll LTS'); const ms = moment(now, "DD/MM/YYYY HH:mm:ss").diff(moment(this.state.startDateTime, "DD/MM/YYYY HH:mm:ss")); const d = moment.duration(ms); const timeSinceStart = Math.floor(d.asHours()) + moment.utc(ms).format(":mm:ss"); let avgCommInterval = 0; if (data.length > 0) { avgCommInterval = moment(data[data.length - 1].dateTime).diff(moment(data[0].dateTime)) / data.length; } return ( <Grid style={ styles.container }> <Row style={styles.header}> <Col md={6}> Current time </Col> <Col md={6}> Elapsed Time </Col> </Row> <Row style={ styles.dateTime }> <Col md={6}> {currentTime} </Col> <Col md={6}> {timeSinceStart} </Col> </Row> <Row > <Col md={6} style={styles.header}> {this.props.latestData.length > 0 ? 'Comms' : ''} </Col> <Col hidden={avgCommInterval === 0} md={6} style={styles.dateTime}> { `Avg. interval ${parseInt(avgCommInterval)}`} </Col> </Row> <Row> <Col md={6}> {this.renderComms(this.props.latestData)} </Col> <Col md={6}> N/A </Col> </Row> </Grid> ); } }