73 lines
1.7 KiB
JavaScript
73 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import { render } from 'react-dom';
|
|
import { Doodle3DManager } from './src/index.js';
|
|
|
|
class Box extends React.Component {
|
|
state = {
|
|
status: {}
|
|
};
|
|
|
|
componentWillMount() {
|
|
const { box } = this.props;
|
|
box.setAutoUpdate(true, 1000);
|
|
|
|
box.addEventListener('update', ({ state }) => {
|
|
this.setState({ status: state });
|
|
});
|
|
}
|
|
|
|
componentWillUnMount() {
|
|
const { box } = this.props;
|
|
box.setAutoUpdate(false);
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div>
|
|
<p><b>name: {this.props.box.boxData.wifiboxid}</b></p>
|
|
<ul>
|
|
{Object.entries(this.state.status).map(([key, value]) => <li key={key}>{key}: {value}</li>)}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
class OverView extends React.Component {
|
|
state = {
|
|
boxes: []
|
|
};
|
|
|
|
componentWillMount() {
|
|
const doodle3DManager = new Doodle3DManager();
|
|
doodle3DManager.checkNonServerBoxes = false;
|
|
doodle3DManager.setAutoUpdate(true, 1000);
|
|
|
|
doodle3DManager.addEventListener('boxappeared', ({ box }) => {
|
|
this.setState({ boxes: [...this.state.boxes, <Box box={box} />] })
|
|
});
|
|
|
|
doodle3DManager.addEventListener('boxdisappeared', ({ box }) => {
|
|
this.setState({ boxes: this.state.boxes.filter(box => box.props.box.boxData.id !== box.boxData.id) })
|
|
});
|
|
|
|
this.setState({ doodle3DManager })
|
|
}
|
|
|
|
componentWillUnMount() {
|
|
const { doodle3DManager } = this.state;
|
|
if (doodle3DManager) doodle3DManager.setAutoUpdate(false);
|
|
}
|
|
|
|
render() {
|
|
const { boxes } = this.state;
|
|
return (
|
|
<div>
|
|
{boxes.map((box, i) => <span key={i}>{box}</span>)}
|
|
</div>
|
|
);
|
|
};
|
|
}
|
|
|
|
render(<OverView />, document.getElementById('app'));
|