esp-pixelprojektor/homie-esp8266-v1-setup-sources/app/js/app.js

141 lines
4.0 KiB
JavaScript
Raw Permalink Normal View History

2016-12-18 21:17:09 +00:00
'use strict';
import 'whatwg-fetch';
import React from 'react';
import ReactDOM from 'react-dom';
import ConnectionStep from './steps/connection';
import InfoStep from './steps/info';
import WifiStep from './steps/wifi';
import MqttStep from './steps/mqtt';
import DetailsStep from './steps/details';
import SendingStep from './steps/sending';
const BASE_API = 'http://homie.config';
const STEP_CONNECTION = 1;
const STEP_INFO = 2;
const STEP_WIFI = 3;
const STEP_MQTT = 4;
const STEP_DETAILS = 5;
const STEP_SENDING = 6;
class App extends React.Component {
constructor (props) {
super(props);
this.state = {
step: STEP_CONNECTION,
name: null,
deviceId: null,
wifi: { },
mqtt: { },
ota: { }
};
}
nextStep () {
this.setState({ step: this.state.step + 1 });
}
setName (name) {
this.setState({ name });
}
setDeviceId (deviceId) {
this.setState({ deviceId });
}
setWifiCreds (creds) {
this.setState({ wifi: creds });
}
setMqttCreds (creds) {
this.setState({ mqtt: creds });
}
setOtaCreds (creds) {
this.setState({ ota: creds });
}
sendConfig () {
let body = {
name: this.state.name,
wifi: this.state.wifi,
mqtt: this.state.mqtt,
ota: this.state.ota
};
if (this.state.deviceId !== null) body['device_id'] = this.state.deviceId;
let options = {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
};
return new Promise((resolve, reject) => {
window.fetch(`${BASE_API}/config`, options).then((res) => {
return res.json();
}).then((json) => {
if (json.success) {
resolve();
} else {
reject();
}
}).catch(() => {
reject();
});
});
}
render () {
let Step;
switch (this.state.step) {
case STEP_CONNECTION:
Step = ConnectionStep;
break;
case STEP_INFO:
Step = InfoStep;
break;
case STEP_WIFI:
Step = WifiStep;
break;
case STEP_MQTT:
Step = MqttStep;
break;
case STEP_DETAILS:
Step = DetailsStep;
break;
case STEP_SENDING:
Step = SendingStep;
break;
}
return (
<div className='container'>
<h1 className='title'>Homie for ESP8266</h1>
<h2 className='subtitle'>Set up your device.</h2>
<div className='tabs is-centered'>
<ul>
<li className={this.state.step === STEP_CONNECTION ? 'is-active' : ''}><a href='' onClick={(e) => { e.preventDefault(); } }><i className='fa fa-heartbeat'></i></a></li>
<li className={this.state.step === STEP_INFO ? 'is-active' : ''}><a href='' onClick={(e) => { e.preventDefault(); } }><i className='fa fa-info'></i></a></li>
<li className={this.state.step === STEP_WIFI ? 'is-active' : ''}><a href='' onClick={(e) => { e.preventDefault(); } }><i className='fa fa-wifi'></i></a></li>
<li className={this.state.step === STEP_MQTT ? 'is-active' : ''}><a href='' onClick={(e) => { e.preventDefault(); } }><i className='fa fa-signal'></i></a></li>
<li className={this.state.step === STEP_DETAILS ? 'is-active' : ''}><a href='' onClick={(e) => { e.preventDefault(); } }><i className='fa fa-cogs'></i></a></li>
<li className={this.state.step === STEP_SENDING ? 'is-active' : ''}><a href='' onClick={(e) => { e.preventDefault(); } }><i className='fa fa-rocket'></i></a></li>
</ul>
</div>
<Step baseApi={BASE_API} mqttConfig={this.state.mqtt} nextStep={() => this.nextStep()} setWifiCreds={(creds) => this.setWifiCreds(creds)} setMqttCreds={(creds) => this.setMqttCreds(creds)} setName={(name) => this.setName(name)} setDeviceId={(deviceId) => this.setDeviceId(deviceId)} setOtaCreds={(creds) => this.setOtaCreds(creds)} sendConfig={() => this.sendConfig()} />
</div>
);
}
}
ReactDOM.render(<App/>, document.getElementById('app'));