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

More work and fixing stuf

Browse Source
This commit is contained in:
Alex Mikhalev 2017-05-04 20:26:51 -06:00
parent 9632d35e23
commit 6ed4099786
3 changed files with 55 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/index.html
View File

@ -6,7 +6,5 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<script src="/static/app.js"></script>
</body> </body>
</html> </html>

83
app/script/App.tsx
View File

@ -10,29 +10,70 @@ import "font-awesome/css/font-awesome.css"
import "app/style/app.css"; import "app/style/app.css";
@observer @observer
class SectionRow extends React.PureComponent<{ section: Section }, void> { class SectionTable extends React.PureComponent<{ sections: Section[] }, void> {
render() { static renderRow(section: Section, index: number) {
const { name, state } = this.props.section; const { name, state } = section;
return ( return (
<Table.Row> <Table.Row key={index}>
<Table.Cell className="section--name">Section {name}</Table.Cell> <Table.Cell className="section--name">Section {name}</Table.Cell>
<Table.Cell className="section--state">State: {state + ""}</Table.Cell> <Table.Cell className="section--state">State: {state + ""}</Table.Cell>
</Table.Row> </Table.Row>
); );
} }
render() {
return (<Table celled striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell colSpan="3">Sections</Table.HeaderCell>
</Table.Row>
<Table.Row>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>State</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{
this.props.sections.map(SectionTable.renderRow)
}
</Table.Body>
</Table>
);
}
} }
@observer @observer
class ProgramRow extends React.PureComponent<{ program: Program }, void> { class ProgramTable extends React.PureComponent<{ programs: Program[] }, void> {
render() { static renderRow(program: Program, i: number) {
const { name, running } = this.props.program; const { name, running } = program;
return ( return (
<Table.Row> <Table.Row key={i}>
<Table.Cell className="program--name">Program {name}</Table.Cell> <Table.Cell className="program--name">Program {name}</Table.Cell>
<Table.Cell className="program--running">running: {running + ""}</Table.Cell> <Table.Cell className="program--running">running: {running + ""}</Table.Cell>
</Table.Row> </Table.Row>
); );
} }
render() {
return (
<Table celled striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell colSpan="3">Programs</Table.HeaderCell>
</Table.Row>
<Table.Row>
<Table.HeaderCell>Name</Table.HeaderCell>
<Table.HeaderCell>Running</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{
this.props.programs.map(ProgramTable.renderRow)
}
</Table.Body>
</Table>
);
}
} }
@observer @observer
@ -58,30 +99,8 @@ class DeviceView extends React.PureComponent<{ device: SprinklersDevice }, void>
<Item.Meta> <Item.Meta>
</Item.Meta> </Item.Meta>
<Table celled striped> <SectionTable sections={sections} />
<Table.Header> <ProgramTable programs={programs} />
<Table.Row>
<Table.HeaderCell colSpan="3">Sections</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{
sections.map((s, i) => <SectionRow section={s} key={i} />)
}
</Table.Body>
</Table>
<Table celled striped>
<Table.Header>
<Table.Row>
<Table.HeaderCell colSpan="3">Programs</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{
programs.map((p, i) => <ProgramRow program={p} key={i} />)
}
</Table.Body>
</Table>
</Item.Content> </Item.Content>
</Item> </Item>
); );

4
app/style/app.css
View File

@ -12,4 +12,8 @@
.section--state { .section--state {
}
.program--name {
width: 200px;
} }