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

More work and fixing stuf

update-deps
Alex Mikhalev 8 years ago
parent
9632d35e23
commit
6ed4099786
3 changed files with 55 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      app/index.html
  2. 83
      app/script/App.tsx
  3. 4
      app/style/app.css

2
app/index.html
Unescape 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
Unescape 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
Unescape View File

@ -12,4 +12,8 @@
.section--state { .section--state {
}
.program--name {
width: 200px;
} }
Write Preview
Loading…
Cancel
Save