66 lines
1.9 KiB
TypeScript
66 lines
1.9 KiB
TypeScript
import { createStyles, Card, CardContent, Typography } from "@mui/material";
|
|
import { withStyles, WithStyles } from "@mui/styles";
|
|
import React from "react";
|
|
//import { Theme } from "@material-ui/core/styles/createMuiTheme";
|
|
//import withStyles, { WithStyles } from "@material-ui/core/styles/withStyles";
|
|
import MapGL, { Coordinate } from "./MapGL";
|
|
|
|
const styles = () =>
|
|
createStyles({
|
|
card: {
|
|
position: "relative",
|
|
height: "100%",
|
|
minHeight: "350px"
|
|
},
|
|
cardContent: {
|
|
height: "100%",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
alignItems: "center"
|
|
},
|
|
currentLocation: {
|
|
width: "100%"
|
|
}
|
|
});
|
|
|
|
interface Props extends WithStyles<typeof styles> {
|
|
path: Array<Coordinate>;
|
|
}
|
|
|
|
interface State {}
|
|
|
|
class MapCard extends React.Component<Props, State> {
|
|
render() {
|
|
const { classes, path } = this.props;
|
|
let paths: Map<string, Array<Coordinate>> = new Map().set("path", path);
|
|
let approx = "Approximate location: Unknown";
|
|
if (path.length > 0) {
|
|
let sorted = path.sort((a: Coordinate, b: Coordinate) => {
|
|
if (a.timestamp < b.timestamp) return 1;
|
|
else if (b.timestamp < a.timestamp) return -1;
|
|
return 0;
|
|
});
|
|
let loc = sorted[0].latitude + ", " + sorted[0].longitude;
|
|
approx = "Approximate location: " + loc;
|
|
}
|
|
return (
|
|
// <Grid item xs={12} sm={12} md={6} lg={4} xl={3}>
|
|
<Card raised={true} className={classes.card}>
|
|
<CardContent className={classes.cardContent}>
|
|
<MapGL paths={paths} />
|
|
<Typography
|
|
className={classes.currentLocation}
|
|
color="textSecondary"
|
|
align="center"
|
|
variant="subtitle1">
|
|
{approx}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
//</Grid>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(MapCard);
|