Skip to content

T
toiletcoin
Commit e3599688 by Chaiwith Santaweesuk
Options

update map

parent 72949ed5
Showing with 30 additions and 14 deletions
src/Pages/Home.js
...@@ -162,7 +162,10 @@ class Home extends Component { ...@@ -162,7 +162,10 @@ class Home extends Component {
.collection('device') .collection('device')
.doc(allDevicesId[i]) .doc(allDevicesId[i])
.get(); .get();
allDeviceInfo.push(deviceInfo.data()); let devicedata = deviceInfo.data();
devicedata.deviceid = allDevicesId[i]
devicedata.position = [devicedata.location._long,devicedata.location._lat]
allDeviceInfo.push(devicedata);
if (i === allDevicesId.length - 1) { if (i === allDevicesId.length - 1) {
this.setState({ allDeviceInfo }); this.setState({ allDeviceInfo });
} }
...@@ -224,7 +227,7 @@ class Home extends Component { ...@@ -224,7 +227,7 @@ class Home extends Component {
currentLast: currentLast:
Math.round( Math.round(
response.data.queries[0].results[5].values[ response.data.queries[0].results[5].values[
response.data.queries[0].results[5].values.length - 1 response.data.queries[0].results[5].values.length - 1
][1] * 100 ][1] * 100
) / 100, ) / 100,
revenueTotal: Math.round(this.getTotal(response.data.queries[0].results[4].values) * 100) / 100, revenueTotal: Math.round(this.getTotal(response.data.queries[0].results[4].values) * 100) / 100,
...@@ -241,7 +244,7 @@ class Home extends Component { ...@@ -241,7 +244,7 @@ class Home extends Component {
remoteAvg: Math.round(this.getAvg(response.data.queries[0].results[2].values) * 100) / 100, remoteAvg: Math.round(this.getAvg(response.data.queries[0].results[2].values) * 100) / 100,
fingerPrintTotal: Math.round( fingerPrintTotal: Math.round(
response.data.queries[0].results[0].values[ response.data.queries[0].results[0].values[
response.data.queries[0].results[0].values.length - 1 response.data.queries[0].results[0].values.length - 1
][1] * 100 ][1] * 100
) / 100, ) / 100,
fingerPrintMax: Math.round(this.getMax(response.data.queries[0].results[0].values) * 100) / 100, fingerPrintMax: Math.round(this.getMax(response.data.queries[0].results[0].values) * 100) / 100,
...@@ -249,7 +252,7 @@ class Home extends Component { ...@@ -249,7 +252,7 @@ class Home extends Component {
fingerPrintAvg: Math.round(this.getAvg(response.data.queries[0].results[0].values) * 100) / 100, fingerPrintAvg: Math.round(this.getAvg(response.data.queries[0].results[0].values) * 100) / 100,
keycardTotal: Math.round( keycardTotal: Math.round(
response.data.queries[0].results[3].values[ response.data.queries[0].results[3].values[
response.data.queries[0].results[3].values.length - 1 response.data.queries[0].results[3].values.length - 1
][1] * 100 ][1] * 100
) / 100, ) / 100,
keycardMax: Math.round(this.getMax(response.data.queries[0].results[3].values) * 100) / 100, keycardMax: Math.round(this.getMax(response.data.queries[0].results[3].values) * 100) / 100,
...@@ -343,7 +346,7 @@ class Home extends Component { ...@@ -343,7 +346,7 @@ class Home extends Component {
/> />
</Row> </Row>
<Row> <Row>
<Mapbox /> <Mapbox allDeviceInfo={allDeviceInfo} />
</Row> </Row>
<Row> <Row>
<DataCard <DataCard
......
src/components/Mapbox.js
...@@ -14,12 +14,25 @@ const Data = [ ...@@ -14,12 +14,25 @@ const Data = [
{ id: 5, position: [100.679211, 13.826122], name: 'Fashion Island' }, { id: 5, position: [100.679211, 13.826122], name: 'Fashion Island' },
]; ];
export default class Mapbox extends React.Component { export default class Mapbox extends React.PureComponent {
state = { state = {
center: [100.523186, 13.736717], center: undefined,
active: undefined, active: undefined,
zoom: [5], zoom: [15],
data:[]
}; };
componentDidUpdate = () => {
if (this.props.allDeviceInfo) {
let data1 = this.props.allDeviceInfo;
this.setState({
data: data1,
center:data1[0].position,
active:data1[0]
});
}
};
render() { render() {
const { center, active, zoom } = this.state; const { center, active, zoom } = this.state;
return ( return (
...@@ -46,20 +59,20 @@ export default class Mapbox extends React.Component { ...@@ -46,20 +59,20 @@ export default class Mapbox extends React.Component {
'circle-stroke-opacity': 1, 'circle-stroke-opacity': 1,
}} }}
> >
{Object.keys(Data).map((item, index) => ( {Object.keys(this.state.data).map((item, index) => (
<Feature <Feature
key={item} key={item}
coordinates={Data[item].position} coordinates={this.state.data[item].position}
onMouseEnter={() => onMouseEnter={() =>
this.setState({ this.setState({
active: Data[item], active: this.state.data[item],
}) })
} }
onClick={() => onClick={() =>
this.setState({ this.setState({
center: Data[item].position, center: this.state.data[item].position,
zoom: [14], zoom: [15],
active: Data[item], active: this.state.data[item],
}) })
} }
/> />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment