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";
const ConnectionState = observer(({ connectionState, className }:
{ connectionState: ConState, className?: string }) => {
{ connectionState: ConState, className?: string }) => {
const connected = connectionState.isDeviceConnected;
let connectionText: string;
let iconName: SemanticICONS = "unlinkify";
@ -37,7 +37,7 @@ const ConnectionState = observer(({ connectionState, className }:
const classes = classNames("connectionState", clazzName, className);
return (
<div className={classes}>
<Icon name={iconName}/>&nbsp;
<Icon name={iconName} />&nbsp;
{connectionText}
</div>
);
@ -57,26 +57,26 @@ class DeviceView extends React.Component<DeviceViewProps & RouteComponentProps<a
<React.Fragment>
<Grid>
<Grid.Column mobile="16" tablet="16" computer="16" largeScreen="6">
<SectionRunnerView sectionRunner={sectionRunner} sections={sections}/>
<SectionRunnerView sectionRunner={sectionRunner} sections={sections} />
</Grid.Column>
<Grid.Column mobile="16" tablet="9" computer="9" largeScreen="6">
<SectionTable sections={sections}/>
<SectionTable sections={sections} />
</Grid.Column>
<Grid.Column mobile="16" tablet="7" computer="7" largeScreen="4">
<RunSectionForm device={device} uiStore={uiStore}/>
<RunSectionForm device={device} uiStore={uiStore} />
</Grid.Column>
</Grid>
<ProgramTable device={device} routerStore={routerStore}/>
<Route path={rp.program(":deviceId", ":programId")} component={p.ProgramPage}/>
<ProgramTable device={device} routerStore={routerStore} />
<Route path={rp.program(":deviceId", ":programId")} component={p.ProgramPage} />
</React.Fragment>
);
return (
<Item>
<Item.Image src={require("@app/images/raspberry_pi.png")}/>
<Item.Image src={require("@app/images/raspberry_pi.png")} />
<Item.Content className="device">
<Header as="h1">
<div>Device <kbd>{id}</kbd></div>
<ConnectionState connectionState={connectionState}/>
<ConnectionState connectionState={connectionState} />
</Header>
<Item.Meta>
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 * as React from "react";
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 * as rp from "@app/routePaths";
@ -41,11 +41,11 @@ class ProgramRows extends React.Component<{
<Table.Cell>
{stopStartButton}
<Button as={Link} to={detailUrl} {...buttonStyle} primary>
<Icon name="edit"/>
<Icon name="edit" />
Open
</Button>
<Button onClick={this.toggleExpanded} {...buttonStyle}>
<Icon name="list"/>
<Icon name="list" />
{expanded ? "Hide Details" : "Show Details"}
</Button>
</Table.Cell>
@ -54,8 +54,10 @@ class ProgramRows extends React.Component<{
const detailRow = expanded && (
<Table.Row>
<Table.Cell className="program--sequence" colSpan="5">
<h4>Sequence: </h4> <ProgramSequenceView sequence={sequence} sections={sections}/>
<h4>Schedule: </h4> <ScheduleView schedule={schedule}/>
<Form>
<h4>Sequence: </h4> <ProgramSequenceView sequence={sequence} sections={sections} />
<ScheduleView schedule={schedule} label={<h4>Schedule: </h4>} />
</Form>
</Table.Cell>
</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) {
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 {
let dayString: string;
if (date) {
@ -56,7 +56,7 @@ export default class ScheduleDate extends React.Component<ScheduleDateProps, Sch
let labelNode: React.ReactNode = null;
if (typeof label === "string") {
labelNode = <label>{label}</label>
labelNode = <label>{label}</label>;
} else if (label != null) {
labelNode = label;
}

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

@ -27,10 +27,11 @@ export default class ScheduleTimes extends React.Component<{
</span>
);
}
return (<Form.Field inline className="scheduleTimes">
<label>At</label>
{timesNode}
</Form.Field>);
return (
<Form.Field inline className="scheduleTimes">
<label>At</label> {timesNode}
</Form.Field>
);
}
private onTimeChange = (newTime: TimeOfDay, index: number) => {
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 {};
}
constructor(p: any) {
super(p);
this.state = { rawValue: "", lastTime: null };
}
render() {
return <Input type="time" value={this.state.rawValue} onChange={this.onChange} onBlur={this.onBlur} />;
}
private onChange = (e: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({
rawValue: data.value,
});
};
}
private onBlur: React.FocusEventHandler<HTMLInputElement> = (e) => {
const m = moment(this.state.rawValue, HTML_TIME_INPUT_FORMAT);
if (m.isValid()) {
@ -47,5 +51,5 @@ export default class TimeInput extends React.Component<TimeInputProps, TimeInput
} else {
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 {
node = weekdays.map((weekday) => Weekday[weekday]).join(", ");
}
return (<Form.Group inline>
<label>On</label> {node}
</Form.Group>);
return (
<Form.Group inline>
<label>On</label> {node}
</Form.Group>
);
}
private toggleWeekday = (event: React.FormEvent<HTMLInputElement>, data: CheckboxProps) => {
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;
if (typeof label === "string") {
labelNode = <label>{label}</label>
labelNode = <label>{label}</label>;
} else if (label != null) {
labelNode = label;
}
@ -31,10 +31,10 @@ export default class ScheduleView extends React.Component<ScheduleViewProps> {
return (
<Form.Field className="scheduleView">
{labelNode}
<ScheduleTimes times={schedule.times} editing={editing} onChange={this.updateTimes}/>
<WeekdaysView weekdays={schedule.weekdays} editing={editing} onChange={this.updateWeekdays}/>
<ScheduleDate label="From" date={schedule.from} editing={editing} onChange={this.updateFromDate}/>
<ScheduleDate label="To" date={schedule.to} editing={editing} onChange={this.updateToDate}/>
<ScheduleTimes times={schedule.times} editing={editing} onChange={this.updateTimes} />
<WeekdaysView weekdays={schedule.weekdays} editing={editing} onChange={this.updateWeekdays} />
<ScheduleDate label="From" date={schedule.from} editing={editing} onChange={this.updateFromDate} />
<ScheduleDate label="To" date={schedule.to} editing={editing} onChange={this.updateToDate} />
</Form.Field>
);
}

10
app/pages/ProgramPage.tsx
View File

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