Fixed connection state mobx updating
This commit is contained in:
parent
7a46e9d8a3
commit
f00c96efde
@ -8,7 +8,8 @@ import { ConnectionState as ConState, SprinklersDevice } from "@common/sprinkler
|
||||
import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
|
||||
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 classes = classNames({
|
||||
connectionState: true,
|
||||
@ -31,7 +32,7 @@ function ConnectionState({ connectionState, className }: { connectionState: ConS
|
||||
{connectionText}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
interface DeviceViewProps {
|
||||
deviceId: string;
|
||||
@ -62,11 +63,11 @@ class DeviceView extends React.Component<DeviceViewProps> {
|
||||
<Item.Meta>
|
||||
Raspberry Pi Grinklers Device
|
||||
</Item.Meta>
|
||||
<Grid>
|
||||
<Grid.Column mobile={16} largeScreen={8}>
|
||||
<Grid stackable>
|
||||
<Grid.Column width="8">
|
||||
<SectionTable sections={sections}/>
|
||||
</Grid.Column>
|
||||
<Grid.Column mobile={16} largeScreen={8}>
|
||||
<Grid.Column width="8">
|
||||
<RunSectionForm sections={sections}/>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
|
@ -27,7 +27,7 @@ function SectionRunView({ run, sections }:
|
||||
const duration = Duration.fromSeconds(run.duration);
|
||||
const cancel = run.cancel;
|
||||
return (
|
||||
<Segment inverted={current} color={current ? "olive" : undefined}>
|
||||
<Segment inverted={current} color={current ? "green" : undefined}>
|
||||
'{section.name}' for {duration.toString()}
|
||||
<Button onClick={cancel} icon><Icon name="remove" /></Button>
|
||||
</Segment>
|
||||
|
@ -6,7 +6,7 @@ import * as requests from "@common/sprinklers/requests";
|
||||
import * as schema from "@common/sprinklers/schema/index";
|
||||
import { seralizeRequest } from "@common/sprinklers/schema/requests";
|
||||
import * as ws from "@common/sprinklers/websocketData";
|
||||
import { autorun, observable } from "mobx";
|
||||
import { action, autorun, observable } from "mobx";
|
||||
|
||||
const log = logger.child({ source: "websocket" });
|
||||
|
||||
@ -102,15 +102,25 @@ export class WebSocketApiClient implements s.ISprinklersApi {
|
||||
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) {
|
||||
log.info({ reason: event.reason, wasClean: event.wasClean },
|
||||
"disconnected from websocket");
|
||||
this.connectionState.clientToServer = false;
|
||||
this.onDisconnect();
|
||||
}
|
||||
|
||||
private onError(event: Event) {
|
||||
log.error(event, "websocket error");
|
||||
this.connectionState.clientToServer = false;
|
||||
log.error({ event }, "websocket error");
|
||||
action(() => {
|
||||
this.connectionState.serverToBroker = null;
|
||||
this.connectionState.clientToServer = false;
|
||||
});
|
||||
this.onDisconnect();
|
||||
}
|
||||
|
||||
private onMessage(event: MessageEvent) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user