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

Fixed lots of lint issues

Browse Source
This commit is contained in:
Alex Mikhalev 2018-08-06 12:10:34 +03:00
parent 03f317c1ba
commit a3c6fa2b8e
8 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/components/DeviceView.tsx
View File

@ -13,7 +13,7 @@ import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".
import "@app/styles/DeviceView"; import "@app/styles/DeviceView";
const ConnectionState = observer(({ connectionState, className }: const ConnectionState = observer(({ connectionState, className }:
{ connectionState: ConState, className?: string }) => { { connectionState: ConState, className?: string }) => {
const connected = connectionState.isDeviceConnected; const connected = connectionState.isDeviceConnected;
let connectionText: string; let connectionText: string;
let iconName: SemanticICONS = "unlinkify"; let iconName: SemanticICONS = "unlinkify";
@ -37,7 +37,7 @@ const ConnectionState = observer(({ connectionState, className }:
const classes = classNames("connectionState", clazzName, className); const classes = classNames("connectionState", clazzName, className);
return ( return (
<div className={classes}> <div className={classes}>
<Icon name={iconName}/>&nbsp; <Icon name={iconName} />&nbsp;
{connectionText} {connectionText}
</div> </div>
); );
@ -57,26 +57,26 @@ class DeviceView extends React.Component<DeviceViewProps & RouteComponentProps<a
<React.Fragment> <React.Fragment>
<Grid> <Grid>
<Grid.Column mobile="16" tablet="16" computer="16" largeScreen="6"> <Grid.Column mobile="16" tablet="16" computer="16" largeScreen="6">
<SectionRunnerView sectionRunner={sectionRunner} sections={sections}/> <SectionRunnerView sectionRunner={sectionRunner} sections={sections} />
</Grid.Column> </Grid.Column>
<Grid.Column mobile="16" tablet="9" computer="9" largeScreen="6"> <Grid.Column mobile="16" tablet="9" computer="9" largeScreen="6">
<SectionTable sections={sections}/> <SectionTable sections={sections} />
</Grid.Column> </Grid.Column>
<Grid.Column mobile="16" tablet="7" computer="7" largeScreen="4"> <Grid.Column mobile="16" tablet="7" computer="7" largeScreen="4">
<RunSectionForm device={device} uiStore={uiStore}/> <RunSectionForm device={device} uiStore={uiStore} />
</Grid.Column> </Grid.Column>
</Grid> </Grid>
<ProgramTable device={device} routerStore={routerStore}/> <ProgramTable device={device} routerStore={routerStore} />
<Route path={rp.program(":deviceId", ":programId")} component={p.ProgramPage}/> <Route path={rp.program(":deviceId", ":programId")} component={p.ProgramPage} />
</React.Fragment> </React.Fragment>
); );
return ( return (
<Item> <Item>
<Item.Image src={require("@app/images/raspberry_pi.png")}/> <Item.Image src={require("@app/images/raspberry_pi.png")} />
<Item.Content className="device"> <Item.Content className="device">
<Header as="h1"> <Header as="h1">
<div>Device <kbd>{id}</kbd></div> <div>Device <kbd>{id}</kbd></div>
<ConnectionState connectionState={connectionState}/> <ConnectionState connectionState={connectionState} />
</Header> </Header>
<Item.Meta> <Item.Meta>
Raspberry Pi Grinklers Device Raspberry Pi Grinklers Device

12
app/components/ProgramTable.tsx
View File

@ -2,7 +2,7 @@ import { observer } from "mobx-react";
import { RouterStore } from "mobx-react-router"; import { RouterStore } from "mobx-react-router";
import * as React from "react"; import * as React from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { Button, ButtonProps, Icon, Table } from "semantic-ui-react"; import { Button, ButtonProps, Form, Icon, Table } from "semantic-ui-react";
import { ProgramSequenceView, ScheduleView } from "@app/components"; import { ProgramSequenceView, ScheduleView } from "@app/components";
import * as rp from "@app/routePaths"; import * as rp from "@app/routePaths";
@ -41,11 +41,11 @@ class ProgramRows extends React.Component<{
<Table.Cell> <Table.Cell>
{stopStartButton} {stopStartButton}
<Button as={Link} to={detailUrl} {...buttonStyle} primary> <Button as={Link} to={detailUrl} {...buttonStyle} primary>
<Icon name="edit"/> <Icon name="edit" />
Open Open
</Button> </Button>
<Button onClick={this.toggleExpanded} {...buttonStyle}> <Button onClick={this.toggleExpanded} {...buttonStyle}>
<Icon name="list"/> <Icon name="list" />
{expanded ? "Hide Details" : "Show Details"} {expanded ? "Hide Details" : "Show Details"}
</Button> </Button>
</Table.Cell> </Table.Cell>
@ -54,8 +54,10 @@ class ProgramRows extends React.Component<{
const detailRow = expanded && ( const detailRow = expanded && (
<Table.Row> <Table.Row>
<Table.Cell className="program--sequence" colSpan="5"> <Table.Cell className="program--sequence" colSpan="5">
<h4>Sequence: </h4> <ProgramSequenceView sequence={sequence} sections={sections}/> <Form>
<h4>Schedule: </h4> <ScheduleView schedule={schedule}/> <h4>Sequence: </h4> <ProgramSequenceView sequence={sequence} sections={sections} />
<ScheduleView schedule={schedule} label={<h4>Schedule: </h4>} />
</Form>
</Table.Cell> </Table.Cell>
</Table.Row> </Table.Row>
); );

4
app/components/ScheduleView/ScheduleDate.tsx
View File

@ -42,7 +42,7 @@ export default class ScheduleDate extends React.Component<ScheduleDateProps, Sch
if (date) { if (date) {
clearIcon = <Icon name="ban" link onClick={this.onClear} />; clearIcon = <Icon name="ban" link onClick={this.onClear} />;
} }
dayNode = <Input type="date" icon={clearIcon} value={this.state.rawValue} onChange={this.onChange}/>; dayNode = <Input type="date" icon={clearIcon} value={this.state.rawValue} onChange={this.onChange} />;
} else { } else {
let dayString: string; let dayString: string;
if (date) { if (date) {
@ -56,7 +56,7 @@ export default class ScheduleDate extends React.Component<ScheduleDateProps, Sch
let labelNode: React.ReactNode = null; let labelNode: React.ReactNode = null;
if (typeof label === "string") { if (typeof label === "string") {
labelNode = <label>{label}</label> labelNode = <label>{label}</label>;
} else if (label != null) { } else if (label != null) {
labelNode = label; labelNode = label;
} }

9
app/components/ScheduleView/ScheduleTimes.tsx
View File

@ -27,10 +27,11 @@ export default class ScheduleTimes extends React.Component<{
</span> </span>
); );
} }
return (<Form.Field inline className="scheduleTimes"> return (
<label>At</label> <Form.Field inline className="scheduleTimes">
{timesNode} <label>At</label> {timesNode}
</Form.Field>); </Form.Field>
);
} }
private onTimeChange = (newTime: TimeOfDay, index: number) => { private onTimeChange = (newTime: TimeOfDay, index: number) => {
const { times, onChange } = this.props; const { times, onChange } = this.props;

10
app/components/ScheduleView/TimeInput.tsx
View File

@ -28,18 +28,22 @@ export default class TimeInput extends React.Component<TimeInputProps, TimeInput
} }
return {}; return {};
} }
constructor(p: any) { constructor(p: any) {
super(p); super(p);
this.state = { rawValue: "", lastTime: null }; this.state = { rawValue: "", lastTime: null };
} }
render() { render() {
return <Input type="time" value={this.state.rawValue} onChange={this.onChange} onBlur={this.onBlur} />; return <Input type="time" value={this.state.rawValue} onChange={this.onChange} onBlur={this.onBlur} />;
} }
private onChange = (e: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => { private onChange = (e: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ this.setState({
rawValue: data.value, rawValue: data.value,
}); });
}; }
private onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => { private onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
const m = moment(this.state.rawValue, HTML_TIME_INPUT_FORMAT); const m = moment(this.state.rawValue, HTML_TIME_INPUT_FORMAT);
if (m.isValid()) { if (m.isValid()) {
@ -47,5 +51,5 @@ export default class TimeInput extends React.Component<TimeInputProps, TimeInput
} else { } else {
this.setState({ rawValue: timeOfDayToHtmlDateInput(this.props.value) }); this.setState({ rawValue: timeOfDayToHtmlDateInput(this.props.value) });
} }
}; }
} }

8
app/components/ScheduleView/WeekdaysView.tsx
View File

@ -31,9 +31,11 @@ export default class WeekdaysView extends React.Component<WeekdaysViewProps> {
} else { } else {
node = weekdays.map((weekday) => Weekday[weekday]).join(", "); node = weekdays.map((weekday) => Weekday[weekday]).join(", ");
} }
return (<Form.Group inline> return (
<label>On</label> {node} <Form.Group inline>
</Form.Group>); <label>On</label> {node}
</Form.Group>
);
} }
private toggleWeekday = (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => { private toggleWeekday = (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => {
const { weekdays, onChange } = this.props; const { weekdays, onChange } = this.props;

10
app/components/ScheduleView/index.tsx
View File

@ -23,7 +23,7 @@ export default class ScheduleView extends React.Component<ScheduleViewProps> {
let labelNode: React.ReactNode; let labelNode: React.ReactNode;
if (typeof label === "string") { if (typeof label === "string") {
labelNode = <label>{label}</label> labelNode = <label>{label}</label>;
} else if (label != null) { } else if (label != null) {
labelNode = label; labelNode = label;
} }
@ -31,10 +31,10 @@ export default class ScheduleView extends React.Component<ScheduleViewProps> {
return ( return (
<Form.Field className="scheduleView"> <Form.Field className="scheduleView">
{labelNode} {labelNode}
<ScheduleTimes times={schedule.times} editing={editing} onChange={this.updateTimes}/> <ScheduleTimes times={schedule.times} editing={editing} onChange={this.updateTimes} />
<WeekdaysView weekdays={schedule.weekdays} editing={editing} onChange={this.updateWeekdays}/> <WeekdaysView weekdays={schedule.weekdays} editing={editing} onChange={this.updateWeekdays} />
<ScheduleDate label="From" date={schedule.from} editing={editing} onChange={this.updateFromDate}/> <ScheduleDate label="From" date={schedule.from} editing={editing} onChange={this.updateFromDate} />
<ScheduleDate label="To" date={schedule.to} editing={editing} onChange={this.updateToDate}/> <ScheduleDate label="To" date={schedule.to} editing={editing} onChange={this.updateToDate} />
</Form.Field> </Form.Field>
); );
} }

10
app/pages/ProgramPage.tsx
View File

@ -71,7 +71,7 @@ class ProgramPage extends React.Component<ProgramPageProps> {
} else { } else {
editButtons = ( editButtons = (
<Button primary onClick={this.startEditing}> <Button primary onClick={this.startEditing}>
<Icon name="edit"/> <Icon name="edit" />
Edit Edit
</Button> </Button>
); );
@ -141,11 +141,15 @@ class ProgramPage extends React.Component<ProgramPageProps> {
readOnly={!editing} readOnly={!editing}
onChange={this.onEnabledChange} onChange={this.onEnabledChange}
/> />
<Form.Checkbox toggle label="Running" checked={running} readOnly={!editing}/> <Form.Checkbox toggle label="Running" checked={running} readOnly={!editing} />
</Form.Group> </Form.Group>
<Form.Field> <Form.Field>
<label><h4>Sequence</h4></label> <label><h4>Sequence</h4></label>
<ProgramSequenceView sequence={sequence} sections={this.device.sections} editing={editing}/> <ProgramSequenceView
sequence={sequence}
sections={this.device.sections}
editing={editing}
/>
</Form.Field> </Form.Field>
<ScheduleView schedule={schedule} editing={editing} label={<h4>Schedule</h4>} /> <ScheduleView schedule={schedule} editing={editing} label={<h4>Schedule</h4>} />
</Form> </Form>