sprinklers3/app/components/ProgramTable.tsx

import { observer } from "mobx-react";
import * as React from "react";
import { Button, Table } from "semantic-ui-react";

import { Duration } from "@common/Duration";
import { Program, Schedule } from "@common/sprinklers";

@observer
export class ScheduleView extends React.Component<{ schedule: Schedule }> {
    render() {
        return (
            <div>{JSON.stringify(this.props.schedule)}</div>
        );
    }
}

@observer
export default class ProgramTable extends React.Component<{ programs: Program[] }> {
    private static renderRows(program: Program, i: number): JSX.Element[] | null {
        if (!program) {
            return null;
        }
        const { name, running, enabled, schedule, sequence } = program;
        const sequenceItems = sequence.map((item, index) => {
            const duration = Duration.fromSeconds(item.duration);
            return (
                <li key={index}>Section {item.section + 1 + ""} for {duration.toString()}</li>
            );
        });
        const cancelOrRun = () => running ? program.cancel() : program.run();
        return [(
            <Table.Row key={i}>
                <Table.Cell className="program--number">{"" + (i + 1)}</Table.Cell>
                <Table.Cell className="program--name">{name}</Table.Cell>
                <Table.Cell className="program--running">
                    {running ? "Running" : "Not running"}
                    <Button onClick={cancelOrRun}>
                        {running ? "Cancel" : "Run"}
                    </Button>
                </Table.Cell>
                <Table.Cell className="program--enabled">{enabled ? "Enabled" : "Not enabled"}</Table.Cell>
            </Table.Row>
        ), (
            <Table.Row key={i + .5}>
                <Table.Cell className="program--sequence" colSpan="4">
                    <ul>
                        {sequenceItems}
                    </ul>
                    <ScheduleView schedule={schedule} />
                </Table.Cell>
            </Table.Row>
        )];
    }

    render() {
        const programRows = Array.prototype.concat.apply([],
            this.props.programs.map(ProgramTable.renderRows));

        return (
            <Table celled>
                <Table.Header>
                    <Table.Row>
                        <Table.HeaderCell colSpan="7">Programs</Table.HeaderCell>
                    </Table.Row>
                    <Table.Row>
                        <Table.HeaderCell className="program--number">#</Table.HeaderCell>
                        <Table.HeaderCell className="program--name">Name</Table.HeaderCell>
                        <Table.HeaderCell className="program--running">Running?</Table.HeaderCell>
                        <Table.HeaderCell className="program--enabled">Enabled?</Table.HeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {programRows}
                </Table.Body>
            </Table>
        );
    }
}