diff --git a/index.js b/index.js
index 6e05fca..a283c70 100644
--- a/index.js
+++ b/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 (
+
+
name: {this.props.box.boxData.wifiboxid}
+
+ {Object.entries(this.state.status).map(([key, value]) => - {key}: {value}
)}
+
+
+ );
+ };
+}
+
+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, ] })
+ });
+
+ 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 (
- {boxes.map((box) => - {box.boxData.wifiboxid}
)}
-
);
+ return (
+
+ {boxes.map((box, i) => {box})}
+
+ );
};
}
-render(, document.getElementById('app'));
+render(, document.getElementById('app'));
diff --git a/src/api/network.js b/src/api/network.js
index 0d6d1c3..ec5e2ff 100644
--- a/src/api/network.js
+++ b/src/api/network.js
@@ -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;
diff --git a/webpack.config.js b/webpack.config.js
index 7937f60..beb32bd 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -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'