mirror of
https://github.com/Doodle3D/Doodle3D-API
synced 2024-12-22 13:53:48 +01:00
update example
This commit is contained in:
parent
c4c9f0212d
commit
625198ee39
65
index.js
65
index.js
@ -2,26 +2,71 @@ import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
import { Doodle3DManager } from './src/index.js';
|
||||
|
||||
class Mananger extends React.Component {
|
||||
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: []
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
componentWillMount() {
|
||||
const doodle3DManager = new Doodle3DManager();
|
||||
doodle3DManager.checkNonServerBoxes = false;
|
||||
doodle3DManager.setAutoUpdate(true, 1000);
|
||||
doodle3DManager.addEventListener('boxeschanged', ({ boxes }) => {
|
||||
this.setState({ boxes });
|
||||
})
|
||||
|
||||
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 })
|
||||
}
|
||||
|
||||
render = () => {
|
||||
componentWillUnMount() {
|
||||
const { doodle3DManager } = this.state;
|
||||
if (doodle3DManager) doodle3DManager.setAutoUpdate(false);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { boxes } = this.state;
|
||||
return (<ul>
|
||||
{boxes.map((box) => <li key={box.boxData.wifiboxid}>{box.boxData.wifiboxid}</li>)}
|
||||
</ul>);
|
||||
return (
|
||||
<div>
|
||||
{boxes.map((box, i) => <span key={i}>{box}</span>)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
render(<Mananger />, document.getElementById('app'));
|
||||
render(<OverView />, document.getElementById('app'));
|
||||
|
@ -48,7 +48,7 @@ export default class Network {
|
||||
}
|
||||
async alive() {
|
||||
try {
|
||||
await fecth(`${this.api}network/alive`, { method: 'GET' }).then(parseFetch);
|
||||
await fetch(`${this.api}network/alive`, { method: 'GET' }).then(parseFetch);
|
||||
return true;
|
||||
} catch(error) {
|
||||
return false;
|
||||
|
@ -41,7 +41,7 @@ module.exports = {
|
||||
},
|
||||
plugins: [
|
||||
new HTMLWebpackPlugin({
|
||||
title: 'Doodle3D Slicer - Simple example',
|
||||
title: 'Doodle3D API - Simple example',
|
||||
template: require('html-webpack-template'),
|
||||
inject: false,
|
||||
appMountId: 'app'
|
||||
|
Loading…
Reference in New Issue
Block a user