Added Devices Accordions

This commit is contained in:
kunkliricsi 2020-11-17 21:51:53 +01:00
parent 2a83856622
commit 0e3eb8720f
12 changed files with 171 additions and 17 deletions

View File

@ -3,6 +3,7 @@ import AccountCircle from '@material-ui/icons/AccountCircle';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@material-ui/core/AppBar';
import blue from '@material-ui/core/colors/blue'; import blue from '@material-ui/core/colors/blue';
import orange from '@material-ui/core/colors/orange'; import orange from '@material-ui/core/colors/orange';
import grey from '@material-ui/core/colors/grey';
import { positions } from '@material-ui/system'; import { positions } from '@material-ui/system';
import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import { createMuiTheme, createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from '@material-ui/core/Toolbar';
@ -15,15 +16,18 @@ import Auth from './components/auth/Auth';
import AuthService from './components/auth/AuthService'; import AuthService from './components/auth/AuthService';
import { ClickAwayListener } from '@material-ui/core'; import { ClickAwayListener } from '@material-ui/core';
import MapContainer from './components/heatmap/Heatmap'; import MapContainer from './components/heatmap/Heatmap';
import Devices from './components/devices/Devices';
const theme = createMuiTheme({ const theme = createMuiTheme({
palette: { palette: {
primary: { primary: {
main: blue[900], main: blue[900],
dark: grey[400],
}, },
secondary: { secondary: {
main: orange[200], main: orange[200],
dark: grey[400],
} }
}, },
}); });
@ -49,7 +53,7 @@ function App() {
}; };
const DevicesComponent = () => { const DevicesComponent = () => {
return <Typography>Devices</Typography>; return <Devices/>;
}; };
const HeatmapComponent = () => { const HeatmapComponent = () => {
@ -180,7 +184,7 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
</Typography> </Typography>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
<Box zIndex="modal"> <Box zIndex="modal" className={classes.box_root}>
<Component isAdmin={IsAdmin} {...rest} /> <Component isAdmin={IsAdmin} {...rest} />
</Box> </Box>
</React.Fragment> </React.Fragment>
@ -189,6 +193,9 @@ const DefaultLayout = ({ component: Component, authenticated: Authenticated, isA
const useDefaultLayoutStyles = makeStyles((theme: Theme) => const useDefaultLayoutStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
box_root: {
color: theme.palette.secondary.dark,
},
typo: { typo: {
marginLeft: 'auto', marginLeft: 'auto',
color: 'white', color: 'white',

View File

@ -20,7 +20,7 @@ exports.default = {
}); });
return service.authenticate(request) return service.authenticate(request)
.then(function (response) { .then(function (response) {
console.log(response); //console.log(response);
sessionStorage.setItem('user', response.tokenType + " " + response.accessToken); sessionStorage.setItem('user', response.tokenType + " " + response.accessToken);
sessionStorage.setItem('role', response.userRole); sessionStorage.setItem('role', response.userRole);
return Promise.resolve(); return Promise.resolve();

View File

@ -1 +1 @@
{"version":3,"file":"AuthService.js","sourceRoot":"","sources":["AuthService.ts"],"names":[],"mappings":";;AAAA,2CAA+D;AAE/D,kBAAe;IACX,eAAe;QACX,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IACnG,CAAC;IAED,OAAO;QACH,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IACtD,CAAC;IAED,MAAM;QACF,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAClC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,KAAK,EAAL,UAAM,QAAgB,EAAE,QAAgB;QACpC,IAAM,OAAO,GAAG,IAAI,oBAAU,EAAE,CAAC;QAEjC,IAAI,OAAO,GAAG,IAAI,gCAAmB,CAAC;YAClC,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;aAC/B,IAAI,CAAC,UAAA,QAAQ;YACV,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACtB,cAAc,CAAC,OAAO,CAAC,MAAM,EAAK,QAAQ,CAAC,SAAS,SAAI,QAAQ,CAAC,WAAa,CAAC,CAAC;YAChF,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAClD,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACX,CAAC;CACJ,CAAA"} {"version":3,"file":"AuthService.js","sourceRoot":"","sources":["AuthService.ts"],"names":[],"mappings":";;AAAA,2CAA+D;AAE/D,kBAAe;IACX,eAAe;QACX,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC;IACnG,CAAC;IAED,OAAO;QACH,OAAO,cAAc,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC;IACtD,CAAC;IAED,MAAM;QACF,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QAClC,cAAc,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,KAAK,EAAL,UAAM,QAAgB,EAAE,QAAgB;QACpC,IAAM,OAAO,GAAG,IAAI,oBAAU,EAAE,CAAC;QAEjC,IAAI,OAAO,GAAG,IAAI,gCAAmB,CAAC;YAClC,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,QAAQ;SACrB,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;aAC/B,IAAI,CAAC,UAAA,QAAQ;YACV,wBAAwB;YACxB,cAAc,CAAC,OAAO,CAAC,MAAM,EAAK,QAAQ,CAAC,SAAS,SAAI,QAAQ,CAAC,WAAa,CAAC,CAAC;YAChF,cAAc,CAAC,OAAO,CAAC,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;YAClD,OAAO,OAAO,CAAC,OAAO,EAAE,CAAC;QAC7B,CAAC,CAAC,CAAC;IACX,CAAC;CACJ,CAAA"}

View File

@ -24,7 +24,7 @@ export default {
return service.authenticate(request) return service.authenticate(request)
.then(response => { .then(response => {
console.log(response); //console.log(response);
sessionStorage.setItem('user', `${response.tokenType} ${response.accessToken}`); sessionStorage.setItem('user', `${response.tokenType} ${response.accessToken}`);
sessionStorage.setItem('role', response.userRole); sessionStorage.setItem('role', response.userRole);
return Promise.resolve(); return Promise.resolve();

View File

@ -0,0 +1,85 @@
import React, { Component } from 'react';
import Accordion from '@material-ui/core/Accordion';
import { blue, red, yellow } from '@material-ui/core/colors';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Grid, Typography, Paper } from '@material-ui/core';
import { withStyles } from '@material-ui/styles';
const styles = theme => ({
grid_typo: {
fontSize: theme.typography.pxToRem(20),
fontWeight: theme.typography.fontWeightRegular,
},
grid_typo_2: {
marginLeft: '5px',
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
color: theme.palette.text.secondary,
},
grid_item: {
width: '100%',
marginLeft: '5px',
},
grid_item_typo: {
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
},
grid_item_typo_2: {
marginLeft: '5px',
fontSize: theme.typography.pxToRem(15),
fontWeight: theme.typography.fontWeightRegular,
color: theme.palette.text.secondary,
}
});
class DeviceComponent extends Component {
constructor(props) {
super(props);
}
getColor(status) {
if (status == "Online") {
return { color: blue[800] };
} else if (status == "Offline") {
return { color: yellow[800] };
} else /* if (device.status == "unknown") */ {
return { color: red[800] };
}
}
render() {
const { classes } = this.props;
const Sensors = this.props.device.sensors.map((sensor, index) => (
<Grid item className={classes.grid_item} key={sensor.id}>
<Typography className={classes.grid_item_typo}>Sensor {index}</Typography>
<Typography className={classes.grid_item_typo_2}>S{sensor.id}</Typography>
</Grid>
));
return (
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls={"device-panel-/" + this.props.device.id}
id={"device-panel-/" + this.props.device.id}>
<Typography className={classes.grid_typo}>Device {this.props.index}</Typography>
<Typography className={classes.grid_typo_2}>{this.props.device.id}</Typography>
</AccordionSummary>
<AccordionDetails>
<Grid className={classes.grid_item}
container
spacing={3}
direction="column"
justify="center"
alignItems="flex-start">
{Sensors}
</Grid>
</AccordionDetails>
</Accordion>
);
}
}
export default withStyles(styles)(DeviceComponent);

View File

@ -21,7 +21,7 @@ var __extends = (this && this.__extends) || (function () {
}; };
})(); })();
Object.defineProperty(exports, "__esModule", { value: true }); Object.defineProperty(exports, "__esModule", { value: true });
exports.ApiException = exports.SensorStatus = exports.Coordinates = exports.DeviceStatus = exports.Sensor = exports.Device = exports.DeviceService = void 0; exports.ApiException = exports.SensorStatus = exports.Coordinates = exports.DeviceStatus = exports.Sensor = exports.Device = void 0;
var DeviceService = /** @class */ (function () { var DeviceService = /** @class */ (function () {
function DeviceService(baseUrl, http) { function DeviceService(baseUrl, http) {
this.jsonParseReviver = undefined; this.jsonParseReviver = undefined;
@ -462,7 +462,7 @@ var DeviceService = /** @class */ (function () {
}; };
return DeviceService; return DeviceService;
}()); }());
exports.DeviceService = DeviceService; exports.default = DeviceService;
var Device = /** @class */ (function () { var Device = /** @class */ (function () {
function Device(data) { function Device(data) {
if (data) { if (data) {

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,7 @@
//---------------------- //----------------------
// ReSharper disable InconsistentNaming // ReSharper disable InconsistentNaming
export class DeviceService { export default class DeviceService {
private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> }; private http: { fetch(url: RequestInfo, init?: RequestInit): Promise<Response> };
private baseUrl: string; private baseUrl: string;
protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined; protected jsonParseReviver: ((key: string, value: any) => any) | undefined = undefined;

View File

@ -1,5 +1,48 @@
import React, { Component } from 'react' import React, { Component } from 'react'
import DeviceService from './DeviceService'
import Accordion from '@material-ui/core/Accordion';
import DeviceComponent from './DeviceComponent'
import SensorComponent from './DeviceComponent'
import { withStyles } from '@material-ui/styles';
import { Box } from '@material-ui/core';
import { grey } from '@material-ui/core/colors';
export default class Devices extends React.Component { const styles = theme => ({
root: {
padding: '64px',
color: theme.palette.primary.main,
} }
});
class Devices extends React.Component {
constructor(props) {
super(props);
this.state = {
devices: [],
};
}
componentDidMount() {
new DeviceService().getall().then(result => {
this.setState({ devices: result });
}).catch(ex => {
console.log(ex);
});
}
render() {
const { classes } = this.props;
const Devices = this.state.devices.map((device, index) => (
<DeviceComponent device={device} index={index} key={device.id}/>
));
return (
<Box className={classes.root}>
{Devices}
</Box>
);
}
}
export default withStyles(styles)(Devices);

View File

@ -0,0 +1,21 @@
import React, { Component } from 'react';
import AccordionDetails from '@material-ui/core/AccordionDetails';
export default class SensorComponent extends Component {
constructor(props) {
super(props);
}
render() {
const Sensors = this.props.device.sensors.map((sensor, index) => (
<Typography>Sensor {this.props.index}</Typography>
));
return (
<AccordionDetails>
{Sensors}
</AccordionDetails>
);
}
}

View File

@ -1,7 +1,7 @@
/*global google*/ /*global google*/
import GoogleMapReact from 'google-map-react'; import GoogleMapReact from 'google-map-react';
import React, { Component } from 'react'; import React, { Component } from 'react';
import DevicesService, { DeviceService } from '../devices/DeviceService' import DeviceService from '../devices/DeviceService'
import DeviceMarker from './DeviceMarker' import DeviceMarker from './DeviceMarker'
import { HubConnectionBuilder } from '@microsoft/signalr'; import { HubConnectionBuilder } from '@microsoft/signalr';
@ -22,7 +22,6 @@ export default class MapContainer extends Component {
center: { center: {
lat: 48.275939, lng: 21.469640 lat: 48.275939, lng: 21.469640
}, },
points: [],
heatmapPoints: [], heatmapPoints: [],
connection: null, connection: null,
} }
@ -30,7 +29,7 @@ export default class MapContainer extends Component {
handleAllDevicesUpdated(service = null) { handleAllDevicesUpdated(service = null) {
if (service === null) { if (service === null) {
service = new DevicesService(); service = new DeviceService();
} }
service.getall().then(result => { service.getall().then(result => {
this.setState({ devices: result }); this.setState({ devices: result });
@ -55,8 +54,7 @@ export default class MapContainer extends Component {
console.log('Hub Connected!'); console.log('Hub Connected!');
newConnection.on(probability_method_name, (id, date, prob) => { newConnection.on(probability_method_name, (id, date, prob) => {
this.state.points.push({ id, date, prob }); //console.log(probability_method_name + " recieved: [id: " + id + ", date: " + date + ", prob: " + prob + "]");
//console.log(method_name + " recieved: [id: " + id + ", date: " + date + ", prob: " + prob + "]");
if (prob > 0.5) { if (prob > 0.5) {
var device = this.state.devices.filter(function (x) { return x.id === id })[0] var device = this.state.devices.filter(function (x) { return x.id === id })[0]
var newPoint = { lat: device.coordinates.latitude, lng: device.coordinates.longitude }; var newPoint = { lat: device.coordinates.latitude, lng: device.coordinates.longitude };

View File

@ -10,7 +10,7 @@ namespace Birdmap.BLL.Services
{ {
public class DummyDeviceAndInputService : DeviceAndInputServiceBase public class DummyDeviceAndInputService : DeviceAndInputServiceBase
{ {
private const int numberOfDevices = 10; private const int numberOfDevices = 15;
private const double centerLong = 21.469640; private const double centerLong = 21.469640;
private const double centerLat = 48.275939; private const double centerLat = 48.275939;