amikhalev/sprinklers3
1
1
Fork 0
Code Issues 9 Pull Requests 1 Releases Wiki Activity

Made routing able to view different devices

Browse Source
This commit is contained in:
Alex Mikhalev 2018-06-29 15:00:45 -06:00
parent ad6306ad6e
commit 472df851f4
3 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/components/App.tsx
View File

@ -1,7 +1,7 @@
import { observer } from "mobx-react";
// import DevTools from "mobx-react-devtools";
import * as React from "react";
import { Redirect, Route, Switch } from "react-router";
import { Redirect, Route, RouteComponentProps, Switch } from "react-router";
import { BrowserRouter as Router } from "react-router-dom";
import { Container } from "semantic-ui-react";
@ -12,9 +12,9 @@ import "font-awesome/css/font-awesome.css";
import "semantic-ui-css/semantic.css";
import "@app/styles/app.scss";
function DevicePage() {
function DevicePage({match}: RouteComponentProps<{deviceId: string}>) {
return (
<DevicesView/>
<DevicesView deviceId={match.params.deviceId}/>
);
}
@ -32,7 +32,7 @@ class App extends React.Component {
<NavBar/>
<Switch>
<Route path="/devices/grinklers" component={DevicePage}/>
<Route path="/devices/:deviceId" component={DevicePage}/>
<Route path="/messagesTest" component={MessagesTestPage}/>
<Redirect to="/"/>
</Switch>

4
app/components/DevicesView.tsx
View File

@ -4,11 +4,11 @@ import { Item } from "semantic-ui-react";
import DeviceView from "@app/components/DeviceView";
class DevicesView extends React.Component {
class DevicesView extends React.Component<{deviceId: string}> {
render() {
return (
<Item.Group divided>
<DeviceView deviceId="grinklers" />
<DeviceView deviceId={this.props.deviceId} />
</Item.Group>
);
}

3
common/sprinklers/mqtt/index.ts
View File

@ -147,6 +147,9 @@ class MqttSprinklersDevice extends s.SprinklersDevice {
const brokerConnected = apiClient.connected;
this.connectionState.serverToBroker = brokerConnected;
if (brokerConnected) {
if (this.connectionState.brokerToDevice == null) {
this.connectionState.brokerToDevice = false;
}
this.doSubscribe();
} else {
this.connectionState.brokerToDevice = false;