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

Fixed connection state mobx updating

Browse Source
This commit is contained in:
Alex Mikhalev 2018-06-17 01:04:30 -06:00
parent 7a46e9d8a3
commit f00c96efde
3 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
app/components/DeviceView.tsx
View File

@ -8,7 +8,8 @@ import { ConnectionState as ConState, SprinklersDevice } from "@common/sprinkler
import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from "."; import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
import "./DeviceView.scss"; import "./DeviceView.scss";
function ConnectionState({ connectionState, className }: { connectionState: ConState, className?: string }) { const ConnectionState = observer(({ connectionState, className }:
{ connectionState: ConState, className?: string }) => {
const connected = connectionState.isConnected; const connected = connectionState.isConnected;
const classes = classNames({ const classes = classNames({
connectionState: true, connectionState: true,
@ -31,7 +32,7 @@ function ConnectionState({ connectionState, className }: { connectionState: ConS
{connectionText} {connectionText}
</div> </div>
); );
} });
interface DeviceViewProps { interface DeviceViewProps {
deviceId: string; deviceId: string;
@ -62,11 +63,11 @@ class DeviceView extends React.Component<DeviceViewProps> {
<Item.Meta> <Item.Meta>
Raspberry Pi Grinklers Device Raspberry Pi Grinklers Device
</Item.Meta> </Item.Meta>
<Grid> <Grid stackable>
<Grid.Column mobile={16} largeScreen={8}> <Grid.Column width="8">
<SectionTable sections={sections}/> <SectionTable sections={sections}/>
</Grid.Column> </Grid.Column>
<Grid.Column mobile={16} largeScreen={8}> <Grid.Column width="8">
<RunSectionForm sections={sections}/> <RunSectionForm sections={sections}/>
</Grid.Column> </Grid.Column>
</Grid> </Grid>

2
app/components/SectionRunnerView.tsx
View File

@ -27,7 +27,7 @@ function SectionRunView({ run, sections }:
const duration = Duration.fromSeconds(run.duration); const duration = Duration.fromSeconds(run.duration);
const cancel = run.cancel; const cancel = run.cancel;
return ( return (
<Segment inverted={current} color={current ? "olive" : undefined}> <Segment inverted={current} color={current ? "green" : undefined}>
'{section.name}' for {duration.toString()} '{section.name}' for {duration.toString()}
<Button onClick={cancel} icon><Icon name="remove" /></Button> <Button onClick={cancel} icon><Icon name="remove" /></Button>
</Segment> </Segment>

18
app/sprinklers/websocket.ts
View File

@ -6,7 +6,7 @@ import * as requests from "@common/sprinklers/requests";
import * as schema from "@common/sprinklers/schema/index"; import * as schema from "@common/sprinklers/schema/index";
import { seralizeRequest } from "@common/sprinklers/schema/requests"; import { seralizeRequest } from "@common/sprinklers/schema/requests";
import * as ws from "@common/sprinklers/websocketData"; import * as ws from "@common/sprinklers/websocketData";
import { autorun, observable } from "mobx"; import { action, autorun, observable } from "mobx";
const log = logger.child({ source: "websocket" }); const log = logger.child({ source: "websocket" });
@ -102,15 +102,25 @@ export class WebSocketApiClient implements s.ISprinklersApi {
this.connectionState.clientToServer = true; this.connectionState.clientToServer = true;
} }
/* tslint:disable-next-line:member-ordering */
private onDisconnect = action(() => {
this.connectionState.serverToBroker = null;
this.connectionState.clientToServer = false;
});
private onClose(event: CloseEvent) { private onClose(event: CloseEvent) {
log.info({ reason: event.reason, wasClean: event.wasClean }, log.info({ reason: event.reason, wasClean: event.wasClean },
"disconnected from websocket"); "disconnected from websocket");
this.connectionState.clientToServer = false; this.onDisconnect();
} }
private onError(event: Event) { private onError(event: Event) {
log.error(event, "websocket error"); log.error({ event }, "websocket error");
this.connectionState.clientToServer = false; action(() => {
this.connectionState.serverToBroker = null;
this.connectionState.clientToServer = false;
});
this.onDisconnect();
} }
private onMessage(event: MessageEvent) { private onMessage(event: MessageEvent) {