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

Fixed lots of lint issues

update-deps
Alex Mikhalev 7 years ago
parent
03f317c1ba
commit
a3c6fa2b8e
8 changed files with 47 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. 18
      app/components/DeviceView.tsx
  2. 12
      app/components/ProgramTable.tsx
  3. 4
      app/components/ScheduleView/ScheduleDate.tsx
  4. 9
      app/components/ScheduleView/ScheduleTimes.tsx
  5. 10
      app/components/ScheduleView/TimeInput.tsx
  6. 8
      app/components/ScheduleView/WeekdaysView.tsx
  7. 10
      app/components/ScheduleView/index.tsx
  8. 10
      app/pages/ProgramPage.tsx

18
app/components/DeviceView.tsx
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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>

Write Preview
Loading…
Cancel
Save