aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--modern/src/DeviceList.js57
-rw-r--r--modern/src/MainMap.js2
-rw-r--r--modern/src/MainPage.js2
-rw-r--r--modern/src/SocketContoller.js5
-rw-r--r--modern/src/reducers/index.js6
5 files changed, 70 insertions, 2 deletions
diff --git a/modern/src/DeviceList.js b/modern/src/DeviceList.js
new file mode 100644
index 00000000..602a6d9d
--- /dev/null
+++ b/modern/src/DeviceList.js
@@ -0,0 +1,57 @@
+import React, { Component, Fragment } from 'react';
+import { connect } from 'react-redux';
+import { updateDevices } from './actions';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import Avatar from '@material-ui/core/Avatar';
+import LocationOnIcon from '@material-ui/icons/LocationOn';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import IconButton from '@material-ui/core/IconButton';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import Divider from '@material-ui/core/Divider';
+
+const mapStateToProps = state => ({
+ devices: state.devices
+});
+
+class DeviceList extends Component {
+ componentDidMount() {
+ fetch('/api/devices').then(response => {
+ if (response.ok) {
+ response.json().then(devices => {
+ this.props.dispatch(updateDevices(devices));
+ });
+ }
+ });
+ }
+
+ render() {
+ const devices = this.props.devices.map(device =>
+ <Fragment key={device.id.toString()}>
+ <ListItem button>
+ <Avatar>
+ <LocationOnIcon />
+ </Avatar>
+ <ListItemText primary={device.name} secondary={device.uniqueId} />
+ <ListItemSecondaryAction>
+ <IconButton>
+ <MoreVertIcon />
+ </IconButton>
+ </ListItemSecondaryAction>
+ </ListItem>
+ <li>
+ <Divider inset />
+ </li>
+ </Fragment>
+ );
+
+ return (
+ <List>
+ {devices}
+ </List>
+ );
+ }
+}
+
+export default connect(mapStateToProps)(DeviceList);
diff --git a/modern/src/MainMap.js b/modern/src/MainMap.js
index 0e93ddba..7655aee8 100644
--- a/modern/src/MainMap.js
+++ b/modern/src/MainMap.js
@@ -16,7 +16,7 @@ class MainMap extends Component {
render() {
const position = [this.state.lat, this.state.lng]
- const markers = this.props.positions.map((position) =>
+ const markers = this.props.positions.map(position =>
<Marker key={position.id.toString()} position={{ lat: position.latitude, lng: position.longitude }}>
<Popup>
A pretty CSS3 popup. <br /> Easily customizable.
diff --git a/modern/src/MainPage.js b/modern/src/MainPage.js
index ce4c5771..c64665b5 100644
--- a/modern/src/MainPage.js
+++ b/modern/src/MainPage.js
@@ -6,6 +6,7 @@ import Drawer from '@material-ui/core/Drawer';
import withStyles from '@material-ui/core/styles/withStyles';
import SocketController from './SocketContoller';
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
+import DeviceList from './DeviceList';
const styles = theme => ({
root: {
@@ -73,6 +74,7 @@ class MainPage extends Component {
anchor={isWidthUp('sm', this.props.width) ? "left" : "bottom"}
variant="permanent"
classes={{ paper: classes.drawerPaper }}>
+ <DeviceList />
</Drawer>
<div className={classes.mapContainer}>
<ContainerDimensions>
diff --git a/modern/src/SocketContoller.js b/modern/src/SocketContoller.js
index 3cf7feb7..f65fc6c1 100644
--- a/modern/src/SocketContoller.js
+++ b/modern/src/SocketContoller.js
@@ -1,6 +1,6 @@
import { Component } from 'react';
import { connect } from 'react-redux';
-import { updatePositions } from './actions';
+import { updateDevices, updatePositions } from './actions';
const displayNotifications = events => {
if ("Notification" in window) {
@@ -30,6 +30,9 @@ class SocketController extends Component {
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
+ if (data.devices) {
+ this.props.dispatch(updateDevices(data.devices));
+ }
if (data.positions) {
this.props.dispatch(updatePositions(data.positions));
}
diff --git a/modern/src/reducers/index.js b/modern/src/reducers/index.js
index b9c94771..962d83c2 100644
--- a/modern/src/reducers/index.js
+++ b/modern/src/reducers/index.js
@@ -6,8 +6,14 @@ const initialState = {
function rootReducer(state = initialState, action) {
switch (action.type) {
+ case 'UPDATE_DEVICES':
+ return Object.assign({}, {
+ ...state,
+ devices: [...state.devices, ...action.devices]
+ });
case 'UPDATE_POSITIONS':
return Object.assign({}, {
+ ...state,
positions: [...state.positions, ...action.positions]
});
default: