Started work on adding a server backend

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";

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 { SprinklersDevice } from "common/sprinklers";
-import FontAwesome = require("react-fontawesome");
 
 const ConnectionState = ({ connected }: { connected: boolean }) => {
     const classes = classNames({

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,

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,

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 }> {

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<{

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 }, {}> {

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 { Section } from "common/sprinklers";
-import FontAwesome = require("react-fontawesome");
 
 /* tslint:disable:object-literal-sort-keys */
 

app/script/index.tsx

@@ -25,8 +25,8 @@ const doRender = (Component: typeof App) => {
 doRender(App);
 
 if (module.hot) {
-    module.hot.accept("./components/App", () => {
+    module.hot.accept("app/components/App", () => {
-        const NextApp = require<any>("./components/App").default as typeof App;
+        const NextApp = require<any>("app/components/App").default as typeof App;
         doRender(NextApp);
     });
 }

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";
+} from "common/sprinklers";
-import { checkedIndexOf } from "./utils";
+import { checkedIndexOf, getRandomId } from "common/utils";
-import MQTT = Paho.MQTT;
 
 export class MqttApiClient implements ISprinklersApi {
     client: MQTT.Client;

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;

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",

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: /\.css$/, use: "style-loader!css-loader" },
-            { test: /\.(ttf|eot|svg|woff(2)?|png|jpg)(\?[a-z0-9=&.]+)?$/, loader: "file-loader" },
+            { test: /\.(ttf|eot|svg|woff(2)?|png|jpg)(\?[a-z0-9=&.]+)?$/, use: "file-loader" },
-            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
+            {
+                test: /\.tsx?$/, use: {
+                    loader: "awesome-typescript-loader",
+                    options: { configFileName: path.resolve(__dirname, "..", "app", "tsconfig.json") }
+                },
+            },
         ]
     },
     plugins: [

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(),