Made things look better

2017-10-31 17:23:27 -06:00 · 2017-10-31 17:23:27 -06:00 · 19d973ee71
commit 19d973ee71
parent 5ff2825fb1
9 changed files with 875 additions and 120 deletions
--- a/app/components/DeviceView.scss
+++ b/app/components/DeviceView.scss
@ -0,0 +1,24 @@
+.device {
+    .header {
+        display: flex !important;
+        flex-direction: column;
+        @media only screen and (min-width : 768px) {
+            flex-direction: row;
+        }
+    }
+    .connectionState {
+        @media only screen and (min-width : 768px) {
+            margin-left: .75em;
+        }
+        font-size: .75em;
+        font-weight: lighter;
+
+        &.connected {
+            color: #13D213;
+        }
+
+        &.disconnected {
+            color: #D20000;
+        }
+    }
+}
--- a/app/components/DeviceView.tsx
+++ b/app/components/DeviceView.tsx
@ -6,12 +6,13 @@ import { Grid, Header, Icon, Item } from "semantic-ui-react";
 import { injectState, StateBase } from "@app/state";
 import { SprinklersDevice } from "@common/sprinklers";
 import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from ".";
+import "./DeviceView.scss";

 function ConnectionState({ connected, className }: { connected: boolean, className?: string }) {
    const classes = classNames({
-        "device--connectionState": true,
-        "device--connectionState-connected": connected,
-        "device--connectionState-disconnected": !connected,
+        connectionState: true,
+        connected: connected, /* tslint:disable-line:object-literal-shorthand */
+        disconnected: !connected,
    }, className);
    return (
        <div className={classes}>
@ -42,13 +43,13 @@ class DeviceView extends React.Component<DeviceViewProps> {
        return (
            <Item>
                <Item.Image src={require("@app/images/raspberry_pi.png")} />
-                <Item.Content>
+                <Item.Content className="device">
                    <Header as="h1">
                        <div>Device <kbd>{id}</kbd></div>
                        <ConnectionState connected={connected} />
                    </Header>
                    <Item.Meta>
-                        Raspberry Pi Grinklers Instance
+                        Raspberry Pi Grinklers Device
                    </Item.Meta>
                    <Grid>
                        <Grid.Column mobile={16} largeScreen={8}>
@ -58,7 +59,7 @@ class DeviceView extends React.Component<DeviceViewProps> {
                            <RunSectionForm sections={sections} />
                        </Grid.Column>
                    </Grid>
-                    <ProgramTable programs={programs} />
+                    <ProgramTable programs={programs} sections={sections} />
                    <SectionRunnerView sectionRunner={sectionRunner} sections={sections} />
                </Item.Content>
            </Item>
--- a/app/components/DurationInput.tsx
+++ b/app/components/DurationInput.tsx
@ -16,7 +16,7 @@ export default class DurationInput extends React.Component<{
        return (
            <div className={className}>
                <label>Duration</label>
-                <div className="fields">
+                <div className="ui two fields">
                    <Input
                        type="number"
                        className="field durationInput--minutes"
--- a/app/components/ProgramTable.tsx
+++ b/app/components/ProgramTable.tsx
@ -1,60 +1,49 @@
+import { flatMap } from "lodash";
 import { observer } from "mobx-react";
+import * as moment from "moment";
 import * as React from "react";
 import { Button, Table } from "semantic-ui-react";

 import { Duration } from "@common/Duration";
-import { Program, Schedule } from "@common/sprinklers";
+import { Program, Schedule, TimeOfDay, Weekday, DateOfYear, Section } from "@common/sprinklers";
+
+function timeToString(time: TimeOfDay) {
+    return moment(time).format("LTS");
+}
+
+function formatDateOfYear(day: DateOfYear | null, prefix: string) {
+    if (day == null) {
+        return null;
+    }
+    return prefix + moment(day).format("l");
+}

@observer
 export class ScheduleView extends React.Component<{ schedule: Schedule }> {
    render() {
+        const { schedule } = this.props;
+        const times = schedule.times.map((time, i) => timeToString(time))
+            .join(", ");
+        const weekdays = schedule.weekdays.map((weekday) =>
+            Weekday[weekday]).join(", ");
+        const from = formatDateOfYear(schedule.from, "From ");
+        const to = formatDateOfYear(schedule.to, "To ");
        return (
-            <div>{JSON.stringify(this.props.schedule)}</div>
+            <div>
+                At {times} <br />
+                On {weekdays} <br />
+                {from} <br />
+                {to}
+            </div>
        );
    }
 }

@observer
-export default class ProgramTable extends React.Component<{ programs: Program[] }> {
-    private static renderRows(program: Program, i: number): JSX.Element[] | null {
-        if (!program) {
-            return null;
-        }
-        const { name, running, enabled, schedule, sequence } = program;
-        const sequenceItems = sequence.map((item, index) => {
-            const duration = Duration.fromSeconds(item.duration);
-            return (
-                <li key={index}>Section {item.section + 1 + ""} for {duration.toString()}</li>
-            );
-        });
-        const cancelOrRun = () => running ? program.cancel() : program.run();
-        return [(
-            <Table.Row key={i}>
-                <Table.Cell className="program--number">{"" + (i + 1)}</Table.Cell>
-                <Table.Cell className="program--name">{name}</Table.Cell>
-                <Table.Cell className="program--running">
-                    {running ? "Running" : "Not running"}
-                    <Button onClick={cancelOrRun}>
-                        {running ? "Cancel" : "Run"}
-                    </Button>
-                </Table.Cell>
-                <Table.Cell className="program--enabled">{enabled ? "Enabled" : "Not enabled"}</Table.Cell>
-            </Table.Row>
-        ), (
-            <Table.Row key={i + .5}>
-                <Table.Cell className="program--sequence" colSpan="4">
-                    <ul>
-                        {sequenceItems}
-                    </ul>
-                    <ScheduleView schedule={schedule} />
-                </Table.Cell>
-            </Table.Row>
-        )];
-    }
-
+export default class ProgramTable extends React.Component<{ programs: Program[], sections: Section[] }> {
    render() {
        const programRows = Array.prototype.concat.apply([],
-            this.props.programs.map(ProgramTable.renderRows));
+            this.props.programs.map(this.renderRows));

        return (
            <Table celled>
@ -75,4 +64,39 @@ export default class ProgramTable extends React.Component<{ programs: Program[]
            </Table>
        );
    }
+
+    private renderRows = (program: Program, i: number): JSX.Element[] | null => {
+        if (!program) {
+            return null;
+        }
+        const { name, running, enabled, schedule, sequence } = program;
+        const sequenceItems = flatMap(sequence, (item, index) => {
+            const section = this.props.sections[item.section];
+            const duration = Duration.fromSeconds(item.duration);
+            return [
+                <em key={index}>"{section.name}"</em>, ` for ${duration.toString()}, `,
+            ];
+        });
+        const cancelOrRun = () => running ? program.cancel() : program.run();
+        return [(
+            <Table.Row key={i}>
+                <Table.Cell className="program--number">{"" + (i + 1)}</Table.Cell>
+                <Table.Cell className="program--name">{name}</Table.Cell>
+                <Table.Cell className="program--running">
+                    {running ? "Running" : "Not running"}
+                    <Button className="program--runningButton" onClick={cancelOrRun}>
+                        {running ? "Cancel" : "Run"}
+                    </Button>
+                </Table.Cell>
+                <Table.Cell className="program--enabled">{enabled ? "Enabled" : "Not enabled"}</Table.Cell>
+            </Table.Row>
+        ), (
+            <Table.Row key={i + .5}>
+                <Table.Cell className="program--sequence" colSpan="4">
+                    <h4>Sequence: </h4> {sequenceItems}
+                    <h4>Schedule: </h4> <ScheduleView schedule={schedule} />
+                </Table.Cell>
+            </Table.Row>
+        )];
+    }
 }
--- a/app/components/RunSectionForm.tsx
+++ b/app/components/RunSectionForm.tsx
@ -29,28 +29,26 @@ export default class RunSectionForm extends React.Component<{
            <Segment>
                <Header>Run Section</Header>
                <Form>
-                    <Form.Group className="doubling stackable three column ui grid">
-                        <Form.Select
-                            label="Section"
-                            placeholder="Section"
-                            options={this.sectionOptions}
-                            value={section}
-                            onChange={this.onSectionChange}
-                        />
-                        <DurationInput
-                            duration={duration}
-                            onDurationChange={this.onDurationChange}
-                        />
-                        {/*Label must be &nbsp; to align it properly*/}
-                        <Form.Button
-                            label="&nbsp;"
-                            primary
-                            onClick={this.run}
-                            disabled={!this.isValid}
-                        >
-                            Run
-                        </Form.Button>
-                    </Form.Group>
+                    <Form.Select
+                        label="Section"
+                        placeholder="Section"
+                        options={this.sectionOptions}
+                        value={section}
+                        onChange={this.onSectionChange}
+                    />
+                    <DurationInput
+                        duration={duration}
+                        onDurationChange={this.onDurationChange}
+                    />
+                    {/*Label must be &nbsp; to align it properly*/}
+                    <Form.Button
+                        label="&nbsp;"
+                        primary
+                        onClick={this.run}
+                        disabled={!this.isValid}
+                    >
+                        Run
+                    </Form.Button>
                </Form>
            </Segment>
        );
--- a/app/styles/app.css
+++ b/app/styles/app.css
@ -2,20 +2,6 @@
    margin-top: 1em;
 }

-.device--connectionState {
-    margin-left: .75em;
-    font-size: .75em;
-    font-weight: lighter;
-}
-
-.device--connectionState-connected {
-    color: #13D213;
-}
-
-.device--connectionState-disconnected {
-    color: #D20000;
-}
-
 .sectionRunner--pausedState {
    padding-left: .75em;
    font-size: .75em;
@ -45,6 +31,10 @@

 }

+.program--runningButton {
+    margin-left: 1em !important;
+}
+
 .section--state-true {
    color: green;
 }
@ -53,9 +43,13 @@

 }

-.durationInput--minutes > input,
-.durationInput--seconds > input {
-    width: 6em !important;
+.durationInput--minutes,
+.durationInput--seconds {
+    min-width: 6em !important;
+}
+
+.durationInput .ui.labeled.input > .label {
+    width: 3em;
 }

 .messages {
--- a/app/webpack.config.js
+++ b/app/webpack.config.js
@ -1,4 +1,3 @@
-const autoprefixer = require("autoprefixer");
 const path = require("path");
 const webpack = require("webpack");

@ -8,6 +7,7 @@ const CaseSensitivePathsPlugin = require("case-sensitive-paths-webpack-plugin");
 const WatchMissingNodeModulesPlugin = require("react-dev-utils/WatchMissingNodeModulesPlugin");
 // const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const MinifyPlugin = require("babel-minify-webpack-plugin");
+const cssnext = require("postcss-cssnext");

 const { getClientEnvironment } = require("../env");
 const paths = require("../paths");
@ -38,7 +38,7 @@ const postCssConfig = {
        ident: "postcss",
        plugins: () => [
            require("postcss-flexbugs-fixes"),
-            autoprefixer({
+            cssnext({
                browsers: [
                    ">1%",
                    "last 4 versions",
@ -51,6 +51,11 @@ const postCssConfig = {
    },
 };

+const sassConfig = {
+    loader: require.resolve("sass-loader"),
+    options: {},
+};
+
 const rules = (env) => {
    // "postcss" loader applies autoprefixer to our CSS.
    // "css" loader resolves paths in CSS and adds assets as dependencies.
@ -95,6 +100,44 @@ const rules = (env) => {
                    publicPath,
            })
        };
+    const sassRule = (env === "dev") ?
+        {
+            test: /\.scss$/,
+            use: [
+                require.resolve("style-loader"),
+                {
+                    loader: require.resolve("css-loader"),
+                    options: {
+                        importLoaders: 1,
+                    },
+                },
+                sassConfig,
+            ],
+        } :
+        {
+            test: /\.css$/,
+            loader: ExtractTextPlugin.extract({
+                fallback: require.resolve('style-loader'),
+                use: [
+                    {
+                        loader: require.resolve('css-loader'),
+                        options: {
+                            importLoaders: 1,
+                            minimize: true,
+                            sourceMap: shouldUseSourceMap,
+                        },
+                    },
+                    sassConfig
+                ],
+                // ExtractTextPlugin expects the build output to be flat.
+                // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
+                // However, our output is structured with css, js and media folders.
+                // To have this structure working with relative paths, we have to use custom options.
+                publicPath: shouldUseRelativeAssetPaths ?
+                    Array(cssFilename.split("/").length).join("../") :
+                    publicPath,
+            })
+        };
    return [
        {
            test: /\.tsx?$/,
@ -119,6 +162,7 @@ const rules = (env) => {
                    },
                },
                cssRule,
+                sassRule,
                // Process TypeScript with TSC.
                {
                    test: /\.tsx?$/, use: {
--- a/package.json
+++ b/package.json
@ -21,7 +21,8 @@
    "lint": "run-p lint:*"
  },
  "files": [
-    "dist", "public"
+    "dist",
+    "public"
  ],
  "repository": {
    "type": "git",
@ -38,8 +39,10 @@
    "express-pino-logger": "^2.0.0",
    "mobx": "^3.1.11",
    "module-alias": "^2.0.1",
+    "moment": "^2.19.1",
    "mqtt": "^2.13.0",
    "pino": "^4.7.2",
+    "postcss-cssnext": "^3.0.2",
    "serializr": "^1.1.13"
  },
  "devDependencies": {
@ -74,6 +77,7 @@
    "lodash": "^4.17.4",
    "mobx-react": "^4.2.1",
    "mobx-react-devtools": "^4.2.13",
+    "node-sass": "^4.5.3",
    "nodemon": "^1.12.1",
    "npm-run-all": "^4.1.1",
    "object-assign": "^4.1.1",
@ -85,6 +89,7 @@
    "react-dev-utils": "^4.1.0",
    "react-dom": "^16.0.0",
    "react-hot-loader": "^3.0.0-beta.6",
+    "sass-loader": "^6.0.6",
    "semantic-ui-css": "^2.2.10",
    "semantic-ui-react": "^0.74.2",
    "source-map-loader": "^0.2.1",
--- a/yarn.lock
+++ b/yarn.lock