130 lines
3.7 KiB
JavaScript
130 lines
3.7 KiB
JavaScript
import Grid from '@mui/material/Grid';
|
|
import GoogleMapReact from 'google-map-react';
|
|
import React from 'react';
|
|
import { Scrollbars } from 'react-custom-scrollbars';
|
|
import DrivesTable from './tabPane';
|
|
|
|
function DeviceLastSeenMap() {
|
|
return (
|
|
<div style={{ height: '500px', width: 'calc(100%)' }}>
|
|
|
|
<GoogleMapReact
|
|
height="100px"
|
|
bootstrapURLKeys={{ key: process.env.REACT_APP_GMAPS_API_KEY }}
|
|
defaultCenter={{
|
|
lat: 51.501134,
|
|
lng: -0.142318,
|
|
}}
|
|
defaultZoom={17}
|
|
options={{
|
|
styles: [
|
|
{ elementType: 'geometry', stylers: [{ color: '#242f3e' }] },
|
|
{ elementType: 'labels.text.stroke', stylers: [{ color: '#242f3e' }] },
|
|
{ elementType: 'labels.text.fill', stylers: [{ color: '#746855' }] },
|
|
{
|
|
featureType: 'administrative.locality',
|
|
elementType: 'labels.text.fill',
|
|
stylers: [{ color: '#d59563' }],
|
|
},
|
|
{
|
|
featureType: 'poi',
|
|
elementType: 'labels.text.fill',
|
|
stylers: [{ color: '#d59563' }],
|
|
},
|
|
{
|
|
featureType: 'poi.park',
|
|
elementType: 'geometry',
|
|
stylers: [{ color: '#263c3f' }],
|
|
},
|
|
{
|
|
featureType: 'poi.park',
|
|
elementType: 'labels.text.fill',
|
|
stylers: [{ color: '#6b9a76' }],
|
|
},
|
|
{
|
|
featureType: 'road',
|
|
elementType: 'geometry',
|
|
stylers: [{ color: '#38414e' }],
|
|
},
|
|
{
|
|
featureType: 'road',
|
|
elementType: 'geometry.stroke',
|
|
stylers: [{ color: '#212a37' }],
|
|
},
|
|
{
|
|
featureType: 'road',
|
|
elementType: 'labels.text.fill',
|
|
stylers: [{ color: '#9ca5b3' }],
|
|
},
|
|
{
|
|
featureType: 'road.highway',
|
|
elementType: 'geometry',
|
|
stylers: [{ color: '#746855' }],
|
|
},
|
|
{
|
|
featureType: 'road.highway',
|
|
elementType: 'geometry.stroke',
|
|
stylers: [{ color: '#1f2835' }],
|
|
},
|
|
{
|
|
featureType: 'road.highway',
|
|
elementType: 'labels.text.fill',
|
|
stylers: [{ color: '#f3d19c' }],
|
|
},
|
|
{
|
|
featureType: 'transit',
|
|
elementType: 'geometry',
|
|
stylers: [{ color: '#2f3948' }],
|
|
},
|
|
{
|
|
featureType: 'transit.station',
|
|
elementType: 'labels.text.fill',
|
|
stylers: [{ color: '#d59563' }],
|
|
},
|
|
{
|
|
featureType: 'water',
|
|
elementType: 'geometry',
|
|
stylers: [{ color: '#17263c' }],
|
|
},
|
|
{
|
|
featureType: 'water',
|
|
elementType: 'labels.text.fill',
|
|
stylers: [{ color: '#515c6d' }],
|
|
},
|
|
{
|
|
featureType: 'water',
|
|
elementType: 'labels.text.stroke',
|
|
stylers: [{ color: '#17263c' }],
|
|
},
|
|
],
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SignIn(props) {
|
|
return (
|
|
<div style={{
|
|
height: '100%',
|
|
width: '100%',
|
|
}}
|
|
>
|
|
|
|
<Scrollbars autoHeightMin="100%" autoHeightMax="100%">
|
|
<Grid container style={{ padding: 30 }}>
|
|
<Grid item xs={12}>
|
|
<DeviceLastSeenMap />
|
|
</Grid>
|
|
|
|
<Grid item xs={12}>
|
|
<DrivesTable dongleId={props.device.dongle_id} />
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</Scrollbars>
|
|
</div>
|
|
|
|
);
|
|
}
|