Merge branch 'master' into feature/Contexts
This commit is contained in:
commit
41bf14a4e5
@ -1,8 +1,6 @@
|
|||||||
import { Box, Container, IconButton, Menu, MenuItem, MenuList, Paper, Grow, Popper } from '@material-ui/core';
|
import { Box, Container, IconButton, Menu, MenuItem, MenuList, Paper, Grow, Popper } from '@material-ui/core';
|
||||||
import AccountCircle from '@material-ui/icons/AccountCircle';
|
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 orange from '@material-ui/core/colors/orange';
|
|
||||||
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 +13,19 @@ 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';
|
||||||
|
import { blueGrey, blue, orange, grey } from '@material-ui/core/colors';
|
||||||
|
|
||||||
|
|
||||||
const theme = createMuiTheme({
|
const theme = createMuiTheme({
|
||||||
palette: {
|
palette: {
|
||||||
primary: {
|
primary: {
|
||||||
main: blue[900],
|
main: blue[900],
|
||||||
|
dark: blueGrey[50],
|
||||||
},
|
},
|
||||||
secondary: {
|
secondary: {
|
||||||
main: orange[200],
|
main: orange[200],
|
||||||
|
dark: blueGrey[50],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@ -49,7 +51,7 @@ function App() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const DevicesComponent = () => {
|
const DevicesComponent = () => {
|
||||||
return <Typography>Devices</Typography>;
|
return <Devices/>;
|
||||||
|
|
||||||
};
|
};
|
||||||
const HeatmapComponent = () => {
|
const HeatmapComponent = () => {
|
||||||
@ -180,7 +182,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 +191,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',
|
||||||
|
@ -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();
|
||||||
|
@ -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"}
|
@ -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();
|
||||||
|
@ -0,0 +1,99 @@
|
|||||||
|
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';
|
||||||
|
import { withRouter } from "react-router";
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
this.state = {
|
||||||
|
expanded: "",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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] };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const id = this.props.match.params.id;
|
||||||
|
this.setState({ expanded: id });
|
||||||
|
}
|
||||||
|
|
||||||
|
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}>{sensor.id}</Typography>
|
||||||
|
</Grid>
|
||||||
|
));
|
||||||
|
|
||||||
|
const handleChange = (panel) => (event, isExpanded) => {
|
||||||
|
this.setState({ expanded: isExpanded ? panel : "" });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Accordion expanded={this.state.expanded === this.props.device.id} onChange={handleChange(this.props.device.id)}>
|
||||||
|
<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 withRouter(withStyles(styles)(DeviceComponent));
|
@ -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
@ -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;
|
||||||
|
@ -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',
|
||||||
|
backgroundColor: theme.palette.primary.dark,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
@ -0,0 +1,15 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import AccordionDetails from '@material-ui/core/AccordionDetails';
|
||||||
|
|
||||||
|
|
||||||
|
export default class SensorComponent extends Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -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 };
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user