0
0
mirror of https://github.com/Doodle3D/Doodle3D-API synced 2024-06-18 18:51:21 +02:00

update example

This commit is contained in:
casperlamboo 2017-11-30 17:57:22 +01:00
parent c4c9f0212d
commit 625198ee39
3 changed files with 57 additions and 12 deletions

View File

@ -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'));

View File

@ -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;

View File

@ -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'