sprinklers3/client/pages/ProgramPage.tsx

import { assign } from "lodash";
import { observer } from "mobx-react";
import * as qs from "query-string";
import * as React from "react";
import { RouteComponentProps } from "react-router";
import { Button, CheckboxProps, Form, Icon, Input, InputOnChangeData, Menu, Modal } from "semantic-ui-react";

import { ProgramSequenceView, ScheduleView } from "@client/components";
import * as route from "@client/routePaths";
import { AppState, injectState } from "@client/state";
import { ISprinklersDevice } from "@common/httpApi";
import log from "@common/logger";
import { Program, SprinklersDevice } from "@common/sprinklersRpc";
import { action } from "mobx";

interface ProgramPageProps extends RouteComponentProps<{ deviceId: string, programId: string }> {
    appState: AppState;
}

@observer
class ProgramPage extends React.Component<ProgramPageProps> {
    get isEditing(): boolean {
        return qs.parse(this.props.location.search).editing != null;
    }

    deviceInfo: ISprinklersDevice | null = null;
    device: SprinklersDevice | null = null;
    program: Program | null = null;
    programView: Program | null = null;

    componentWillUnmount() {
        if (this.device) {
            this.device.release();
        }
    }

    updateProgram() {
        const { userStore, sprinklersRpc } = this.props.appState;
        const devId = Number(this.props.match.params.deviceId);
        const programId = Number(this.props.match.params.programId);
        // tslint:disable-next-line:prefer-conditional-expression
        if (this.deviceInfo == null || this.deviceInfo.id !== devId) {
            this.deviceInfo = userStore.findDevice(devId);
        }
        if (!this.deviceInfo || !this.deviceInfo.deviceId) {
            if (this.device) {
                this.device.release();
                this.device = null;
            }
            return;
        } else {
            if (this.device == null || this.device.id !== this.deviceInfo.deviceId) {
                if (this.device) {
                    this.device.release();
                }
                this.device = sprinklersRpc.acquireDevice(this.deviceInfo.deviceId);
            }
        }
        if (!this.program || this.program.id !== programId) {
            if (this.device.programs.length > programId && programId >= 0) {
                this.program = this.device.programs[programId];
            } else {
                return;
            }
        }
        if (this.isEditing) {
            if (this.programView == null && this.program) {
                // this.programView = createViewModel(this.program);
                // this.programView = observable(toJS(this.program));
                this.programView = this.program.clone();
            }
        } else {
            if (this.programView != null) {
                // this.programView.reset();
                this.programView = null;
            }
        }
    }

    renderName(program: Program) {
        const { name } = program;
        if (this.isEditing) {
            return (
                <Menu.Item header>
                    <Form>
                        <Form.Group inline>
                            <Form.Field inline>
                                <label><h4>Program</h4></label>
                                <Input
                                    placeholder="Program Name"
                                    type="text"
                                    value={name}
                                    onChange={this.onNameChange}
                                />
                            </Form.Field>
                            ({program.id})
                        </Form.Group>
                    </Form>
                </Menu.Item>
            );
        } else {
            return <Menu.Item header as="h4">Program {name} ({program.id})</Menu.Item>;
        }
    }

    renderActions(program: Program) {
        const { running } = program;
        const editing = this.isEditing;
        let editButtons;
        if (editing) {
            editButtons = (
                <React.Fragment>
                    <Button primary onClick={this.save}>
                        <Icon name="save" />
                        Save
                    </Button>
                    <Button negative onClick={this.stopEditing}>
                        <Icon name="cancel" />
                        Cancel
                    </Button>
                </React.Fragment>
            );
        } else {
            editButtons = (
                <Button primary onClick={this.startEditing}>
                    <Icon name="edit" />
                    Edit
                </Button>
            );
        }
        const stopStartButton = (
            <Button onClick={this.cancelOrRun} positive={!running} negative={running}>
                <Icon name={running ? "stop" : "play"} />
                {running ? "Stop" : "Run"}
            </Button>
        );
        return (
            <Modal.Actions>
                {stopStartButton}
                {editButtons}
                <Button onClick={this.close}>
                    <Icon name="arrow left" />
                    Close
                </Button>
            </Modal.Actions>
        );
    }

    render() {
        this.updateProgram();

        const program = this.programView || this.program;
        if (!this.device || !program) {
            return null;
        }
        const editing = this.isEditing;

        const { running, enabled, schedule, sequence } = program;

        return (
            <Modal open onClose={this.close} className="programEditor">
                <Modal.Header>{this.renderName(program)}</Modal.Header>
                <Modal.Content>
                    <Form>
                        <Form.Group>
                            <Form.Checkbox
                                toggle
                                label="Enabled"
                                checked={enabled}
                                readOnly={!editing}
                                onChange={this.onEnabledChange}
                            />
                            <Form.Checkbox toggle label="Running" checked={running} readOnly={!editing} />
                        </Form.Group>
                        <Form.Field>
                            <label><h4>Sequence</h4></label>
                            <ProgramSequenceView
                                sequence={sequence}
                                sections={this.device.sections}
                                editing={editing}
                            />
                        </Form.Field>
                        <ScheduleView schedule={schedule} editing={editing} label={<h4>Schedule</h4>} />
                    </Form>
                </Modal.Content>
                {this.renderActions(program)}
            </Modal>
        );
    }

    @action.bound
    private cancelOrRun() {
        if (!this.program) {
            return;
        }
        this.program.running ? this.program.cancel() : this.program.run();
    }

    @action.bound
    private startEditing() {
        this.props.history.push({ search: qs.stringify({ editing: true }) });
    }

    @action.bound
    private save() {
        if (!this.programView || !this.program) {
            return;
        }
        assign(this.program, this.programView);
        this.program.update()
            .then((data) => {
                log.info({ data }, "Program updated");
            }, (err) => {
                log.error({ err }, "error updating Program");
            });
        this.stopEditing();
    }

    @action.bound
    private stopEditing() {
        this.props.history.push({ search: "" });
    }

    @action.bound
    private close() {
        const { deviceId } = this.props.match.params;
        this.props.history.push({ pathname: route.device(deviceId), search: "" });
    }

    @action.bound
    private onNameChange(e: any, p: InputOnChangeData) {
        if (this.programView) {
            this.programView.name = p.value;
        }
    }

    @action.bound
    private onEnabledChange(e: any, p: CheckboxProps) {
        if (this.programView) {
            this.programView.enabled = p.checked!;
        }
    }
}

const DecoratedProgramPage = injectState(observer(ProgramPage));
export default DecoratedProgramPage;