From 18dbefbdb728036b4c90ee059577d4008a22515b Mon Sep 17 00:00:00 2001 From: Alex Mikhalev Date: Wed, 6 Sep 2017 23:54:22 -0600 Subject: [PATCH] Started work on adding a server backend --- app/script/components/App.tsx | 6 +++--- app/script/components/DeviceView.tsx | 4 ++-- app/script/components/DurationInput.tsx | 3 ++- app/script/components/MessagesView.tsx | 3 ++- app/script/components/ProgramTable.tsx | 3 ++- app/script/components/RunSectionForm.tsx | 3 ++- app/script/components/SectionRunnerView.tsx | 3 ++- app/script/components/SectionTable.tsx | 4 ++-- app/script/index.tsx | 4 ++-- app/script/mqtt.ts | 7 ++++--- app/script/ui.ts | 3 ++- tsconfig.json => app/tsconfig.json | 7 ++++++- {app/script => common}/sprinklers.ts | 0 {app/script => common}/utils.ts | 0 webpack/base.config.js | 16 +++++++++++----- webpack/dev.config.js | 2 +- 16 files changed, 43 insertions(+), 25 deletions(-) rename tsconfig.json => app/tsconfig.json (69%) rename {app/script => common}/sprinklers.ts (100%) rename {app/script => common}/utils.ts (100%) diff --git a/app/script/components/App.tsx b/app/script/components/App.tsx index 4cf5524..b420d33 100644 --- a/app/script/components/App.tsx +++ b/app/script/components/App.tsx @@ -1,11 +1,11 @@ import { observer } from "mobx-react"; import DevTools from "mobx-react-devtools"; import * as React from "react"; - import { Item } from "semantic-ui-react"; + +import { UiStore } from "app/ui"; +import { SprinklersDevice } from "common/sprinklers"; import { DeviceView, MessagesView } from "."; -import { SprinklersDevice } from "../sprinklers"; -import { UiStore } from "../ui"; import "app/style/app.css"; import "font-awesome/css/font-awesome.css"; diff --git a/app/script/components/DeviceView.tsx b/app/script/components/DeviceView.tsx index cf6caa6..6b77335 100644 --- a/app/script/components/DeviceView.tsx +++ b/app/script/components/DeviceView.tsx @@ -1,11 +1,11 @@ import * as classNames from "classnames"; import { observer } from "mobx-react"; import * as React from "react"; +import FontAwesome = require("react-fontawesome"); import { Header, Item } from "semantic-ui-react"; import { ProgramTable, RunSectionForm, SectionRunnerView, SectionTable } from "."; -import { SprinklersDevice } from "../sprinklers"; -import FontAwesome = require("react-fontawesome"); +import { SprinklersDevice } from "common/sprinklers"; const ConnectionState = ({ connected }: { connected: boolean }) => { const classes = classNames({ diff --git a/app/script/components/DurationInput.tsx b/app/script/components/DurationInput.tsx index c1da564..0050e06 100644 --- a/app/script/components/DurationInput.tsx +++ b/app/script/components/DurationInput.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import { Input, InputOnChangeData } from "semantic-ui-react"; -import { Duration } from "../sprinklers"; + +import { Duration } from "common/sprinklers"; export default class DurationInput extends React.Component<{ duration: Duration, diff --git a/app/script/components/MessagesView.tsx b/app/script/components/MessagesView.tsx index 84e2c4f..26cff6c 100644 --- a/app/script/components/MessagesView.tsx +++ b/app/script/components/MessagesView.tsx @@ -1,7 +1,8 @@ import { observer } from "mobx-react"; import * as React from "react"; import { Message, MessageList, TransitionGroup } from "semantic-ui-react"; -import { Message as UiMessage, UiStore } from "../ui"; + +import { Message as UiMessage, UiStore } from "app/ui"; class MessageView extends React.Component<{ uiStore: UiStore, diff --git a/app/script/components/ProgramTable.tsx b/app/script/components/ProgramTable.tsx index 604f507..1754653 100644 --- a/app/script/components/ProgramTable.tsx +++ b/app/script/components/ProgramTable.tsx @@ -1,7 +1,8 @@ import { observer } from "mobx-react"; import * as React from "react"; import { Table } from "semantic-ui-react"; -import { Program, Schedule } from "../sprinklers"; + +import { Program, Schedule } from "common/sprinklers"; @observer export class ScheduleView extends React.Component<{ schedule: Schedule }> { diff --git a/app/script/components/RunSectionForm.tsx b/app/script/components/RunSectionForm.tsx index b4a6d82..5b10d0e 100644 --- a/app/script/components/RunSectionForm.tsx +++ b/app/script/components/RunSectionForm.tsx @@ -2,8 +2,9 @@ import {computed} from "mobx"; import {observer} from "mobx-react"; import * as React from "react"; import {DropdownItemProps, DropdownProps, Form, Header, Segment} from "semantic-ui-react"; + +import {Duration, Section} from "common/sprinklers"; import {DurationInput} from "."; -import {Duration, Section} from "../sprinklers"; @observer export default class RunSectionForm extends React.Component<{ diff --git a/app/script/components/SectionRunnerView.tsx b/app/script/components/SectionRunnerView.tsx index 88708dd..96a0b78 100644 --- a/app/script/components/SectionRunnerView.tsx +++ b/app/script/components/SectionRunnerView.tsx @@ -1,7 +1,8 @@ import {observer} from "mobx-react"; import * as React from "react"; import {Segment} from "semantic-ui-react"; -import {SectionRunner} from "../sprinklers"; + +import {SectionRunner} from "common/sprinklers"; @observer export default class SectionRunnerView extends React.Component<{ sectionRunner: SectionRunner }, {}> { diff --git a/app/script/components/SectionTable.tsx b/app/script/components/SectionTable.tsx index 1c6a00a..4bb4a06 100644 --- a/app/script/components/SectionTable.tsx +++ b/app/script/components/SectionTable.tsx @@ -1,10 +1,10 @@ import * as classNames from "classnames"; import { observer } from "mobx-react"; import * as React from "react"; +import FontAwesome = require("react-fontawesome"); import { Table } from "semantic-ui-react"; -import { Section } from "../sprinklers"; -import FontAwesome = require("react-fontawesome"); +import { Section } from "common/sprinklers"; /* tslint:disable:object-literal-sort-keys */ diff --git a/app/script/index.tsx b/app/script/index.tsx index 9317fbb..ae8dfed 100644 --- a/app/script/index.tsx +++ b/app/script/index.tsx @@ -25,8 +25,8 @@ const doRender = (Component: typeof App) => { doRender(App); if (module.hot) { - module.hot.accept("./components/App", () => { - const NextApp = require("./components/App").default as typeof App; + module.hot.accept("app/components/App", () => { + const NextApp = require("app/components/App").default as typeof App; doRender(NextApp); }); } diff --git a/app/script/mqtt.ts b/app/script/mqtt.ts index 8dbc11a..e9e37c8 100644 --- a/app/script/mqtt.ts +++ b/app/script/mqtt.ts @@ -1,5 +1,7 @@ import { EventEmitter } from "events"; import "paho-mqtt"; +import MQTT = Paho.MQTT; + import { Duration, ISprinklersApi, @@ -11,9 +13,8 @@ import { SectionRunner, SprinklersDevice, TimeOfDay, -} from "./sprinklers"; -import { checkedIndexOf } from "./utils"; -import MQTT = Paho.MQTT; +} from "common/sprinklers"; +import { checkedIndexOf, getRandomId } from "common/utils"; export class MqttApiClient implements ISprinklersApi { client: MQTT.Client; diff --git a/app/script/ui.ts b/app/script/ui.ts index 33ec45e..1dc096f 100644 --- a/app/script/ui.ts +++ b/app/script/ui.ts @@ -1,5 +1,6 @@ import {observable} from "mobx"; -import { getRandomId } from "./utils"; + +import { getRandomId } from "common/utils"; export class Message { id: string; diff --git a/tsconfig.json b/app/tsconfig.json similarity index 69% rename from tsconfig.json rename to app/tsconfig.json index caae317..ce60fe8 100644 --- a/tsconfig.json +++ b/app/tsconfig.json @@ -6,7 +6,12 @@ "target": "es5", "lib": ["es6", "dom"], "typeRoots": ["node_modules/@types"], - "strict": true + "strict": true, + "baseUrl": "..", + "paths": { + "common/*": [ "../common/*" ], + "app/*": [ "./*" ] + } }, "files": [ "./node_modules/@types/webpack-env/index.d.ts", diff --git a/app/script/sprinklers.ts b/common/sprinklers.ts similarity index 100% rename from app/script/sprinklers.ts rename to common/sprinklers.ts diff --git a/app/script/utils.ts b/common/utils.ts similarity index 100% rename from app/script/utils.ts rename to common/utils.ts diff --git a/webpack/base.config.js b/webpack/base.config.js index f4b1ebc..5da84c9 100644 --- a/webpack/base.config.js +++ b/webpack/base.config.js @@ -3,7 +3,7 @@ const webpack = require("webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { - devtool: "inline-source-map", + devtool: "eval-source-map", output: { path: path.resolve(__dirname, "..", "build"), filename: "bundle.js" @@ -11,14 +11,20 @@ module.exports = { resolve: { extensions: [".ts", ".tsx", ".js"], alias: { - app: path.resolve(__dirname, "..", "app") + app: path.resolve(__dirname, "..", "app"), + common: path.resolve(__dirname, "..", "common"), } }, module: { rules: [ - { test: /\.css$/, loader: "style-loader!css-loader" }, - { test: /\.(ttf|eot|svg|woff(2)?|png|jpg)(\?[a-z0-9=&.]+)?$/, loader: "file-loader" }, - { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, + { test: /\.css$/, use: "style-loader!css-loader" }, + { test: /\.(ttf|eot|svg|woff(2)?|png|jpg)(\?[a-z0-9=&.]+)?$/, use: "file-loader" }, + { + test: /\.tsx?$/, use: { + loader: "awesome-typescript-loader", + options: { configFileName: path.resolve(__dirname, "..", "app", "tsconfig.json") } + }, + }, ] }, plugins: [ diff --git a/webpack/dev.config.js b/webpack/dev.config.js index ea374fd..922d107 100644 --- a/webpack/dev.config.js +++ b/webpack/dev.config.js @@ -10,7 +10,7 @@ module.exports = webpackMerge.smart(base, { "core-js", "./app/script/index.tsx" ], - devtool: "inline-source-map", + devtool: "eval-source-map", plugins: [ new webpack.NamedModulesPlugin(), // new webpack.HotModuleReplacementPlugin(),