Merge remote-tracking branch master into patch-10 to resolve merge conflicts

config/rzl.js

@@ -102,7 +102,7 @@ const config : Config = {
         defaultValue: "",
         values: { mpd: "NPR01", kohina: "NPR02", somafm_dronezone: "NPR03", somafm_thetrip: "NPR04",
                   querfunk: "NPR05", somafm_defconradio: "NPR06", somafm_secretagent: "NPR07", somafm_lush: "NPR08",
-                  somafm_beatblender: "NPR09"}
+                  somafm_beatblender: "NPR09", ponyville: "NPR0a"}
       },
       rundumleuchte: {
         state: "/service/openhab/out/pca301_rundumleuchte/state",
@@ -175,6 +175,12 @@ const config : Config = {
         command: "/service/openhab/in/kitchen_light_all_brightness/command",
         defaultValue: "0",
         values: {}
+      },
+      kitchen_sink_light_brightness: {
+        state: "/service/openhab/out/tradfri_0100_gwb8d7af2b448f_65545_brightness/state",
+        command: "/service/openhab/in/tradfri_0100_gwb8d7af2b448f_65545_brightness/command",
+        defaultValue: "0",
+        values: {}
       }
     },
     //Kuechen-Floalts
@@ -408,7 +414,8 @@ const config : Config = {
             somafm_defconradio: "Defcon Radio (SomaFM)",
             somafm_secretagent: "Secret Agent (SomaFM)",
             somafm_lush: "Lush (SomaFM)",
-            somafm_beatblender: "Beat Blender (Soma FM)"
+            somafm_beatblender: "Beat Blender (Soma FM)",
+            ponyville: "Ponyville FM"
           },
           icon: "radio",
           enableCondition: (a, b, state) => state.onkyo_connection.internal == "connected" && state.onkyo_inputs.internal == "netzwerk"
@@ -649,6 +656,31 @@ const config : Config = {
         }
       ]
     },
+    kitchen_sink_light: {
+      name: "Licht Spüle",
+      position: [300, 348],
+      icon: "ceiling-light",
+      ui: [
+        {
+          type: "toggle",
+          on: 50,
+          off: 0,
+          toggled: n => parseInt(n) > 0,
+          topic: "kitchen_sink_light_brightness",
+          text: "Ein/Ausschalten",
+          icon: "power"
+        },
+        {
+          type: "slider",
+          min: 0,
+          max: 100,
+          text: "Helligkeit",
+          icon: "brightness-7",
+          topic: "kitchen_sink_light_brightness",
+          delayedApply: true
+        }
+      ]
+    },
     kitchen_counter_light: {
       name: "Deckenlicht Theke",
       position: [400, 440],

config/utils.js

@@ -79,7 +79,7 @@ export const tradfri_remote = {
 }
 
 export const esper_statistics = (name: string,
-    prev_ui: Array<ControlUI> = []) => (
+    prev_ui: Array<ControlUI> = []): Array<ControlUI> => (
       prev_ui.concat([
         {
           type: "section",

package.json

@@ -12,11 +12,11 @@
     "precommit": "yarn lint"
   },
   "dependencies": {
+    "@material-ui/core": "^1.2.1",
+    "@material-ui/lab": "^1.0.0-alpha.5",
     "babel-preset-env": "^1.6.0",
     "leaflet": "^1.3.1",
     "lodash-es": "^4.17.4",
-    "material-ui": "npm:material-ui@next",
-    "material-ui-old": "npm:material-ui@latest",
     "mdi": "^2.0.46",
     "mqtt": "^2.14.0",
     "react": "^16.0.0",
@@ -40,14 +40,14 @@
     "extract-text-webpack-plugin": "next",
     "file-loader": "^1.1.5",
     "flow": "^0.2.3",
-    "flow-bin": "^0.69.0",
+    "flow-bin": "^0.70.0",
     "flow-typed": "^2.3.0",
     "html-webpack-plugin": "^3.1.0",
     "husky": "^0.14.3",
     "lodash-webpack-plugin": "^0.11.4",
-    "style-loader": "^0.20.1",
+    "style-loader": "^0.21.0",
     "webpack": "^4.3.0",
-    "webpack-cli": "^2.0.13",
+    "webpack-cli": "^3.0.0",
     "webpack-dev-server": "^3.1.1",
     "webpack-merge": "^4.1.1",
     "webpack-shell-plugin": "^0.5.0"

src/components/App.js

@@ -8,10 +8,10 @@ import merge from "lodash/merge";
 
 import type { Config, Control, Topics } from "config/flowtypes";
 
-import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
+import MuiThemeProvider from "@material-ui/core/styles/MuiThemeProvider";
-import createMuiTheme from "material-ui/styles/createMuiTheme";
+import createMuiTheme from "@material-ui/core/styles/createMuiTheme";
-import withStyles from "material-ui/styles/withStyles";
+import withStyles from "@material-ui/core/styles/withStyles";
-import * as Colors from "material-ui/colors";
+import * as Colors from "@material-ui/core/colors";
 
 import SideBar from "components/SideBar";
 import ControlMap from "components/ControlMap";

src/components/SideBar.js

@@ -1,13 +1,13 @@
 // @flow
 import * as React from "react";
 
-import withStyles from "material-ui/styles/withStyles";
+import withStyles from "@material-ui/core/styles/withStyles";
-import Drawer from "material-ui/Drawer";
+import Drawer from "@material-ui/core/Drawer";
-import Typography from "material-ui/Typography";
+import Typography from "@material-ui/core/Typography";
-import IconButton from "material-ui/IconButton";
+import IconButton from "@material-ui/core/IconButton";
-import AppBar from "material-ui/AppBar";
+import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "material-ui/Toolbar";
+import Toolbar from "@material-ui/core/Toolbar";
-import List from "material-ui/List";
+import List from "@material-ui/core/List";
 import { renderIcon } from "utils/parseIconName";
 
 import type { Control } from "config/flowtypes";

src/components/TopBar.js

@@ -1,10 +1,10 @@
 // @flow
 import React from "react";
 
-import AppBar from "material-ui/AppBar";
+import AppBar from "@material-ui/core/AppBar";
-import Toolbar from "material-ui/Toolbar";
+import Toolbar from "@material-ui/core/Toolbar";
-import Typography from "material-ui/Typography";
+import Typography from "@material-ui/core/Typography";
-import { CircularProgress } from "material-ui/Progress";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 export type TopBarProps = {
   title: string,

src/components/UiItemList/UiItem.js

@@ -6,18 +6,19 @@ import {
   ListItemSecondaryAction,
   ListItemText,
   ListSubheader
-} from "material-ui/List";
+} from "@material-ui/core/List";
-import Switch from "material-ui/Switch";
+import Switch from "@material-ui/core/Switch";
-import Input, { InputLabel } from "material-ui/Input";
+import Input, { InputLabel } from "@material-ui/core/Input";
-import { FormControl } from "material-ui/Form";
+import FormControl from "@material-ui/core/FormControl";
-import Select from "material-ui/Select";
+import Select from "@material-ui/core/Select";
-import { MenuItem } from "material-ui/Menu";
+import { MenuItem } from "@material-ui/core/Menu";
-import Button from "material-ui/Button";
+import Button from "@material-ui/core/Button";
-import { LinearProgress } from "material-ui/Progress";
+import LinearProgress from "@material-ui/core/LinearProgress";
+import SliderComponent from "@material-ui/lab/Slider";
 
 import type {
   UIControl, UIToggle, UIDropDown, UILink,
-  UISection, UIText, UIProgress
+  UISection, UIText, UIProgress, UISlider
 } from "config/flowtypes";
 
 import keyOf from "utils/keyOf";
@@ -184,6 +185,27 @@ export class DropDown extends UiControl<UIDropDown> {
   }
 }
 
+export class Slider extends UiControl<UISlider> {
+  runPrimaryAction = (_e: ?any, v: ?number) => {
+    if (v != null) {
+      this.changeState(v);
+    }
+  }
+
+  render() {
+    return [
+      <ListItemText key="label" secondary={this.props.item.text} />,
+      <SliderComponent key="slidercomponent"
+        value={this.getValue().internal || this.getValue().actual}
+        min={this.props.item.min || 0} max={this.props.item.max || 0}
+        step={this.props.item.step || 0}
+        onChange={() => this.props.item.delayedApply || this.runPrimaryAction()}
+        onDragEnd={this.runPrimaryAction}
+        disabled={!this.isEnabled()} />
+    ];
+  }
+}
+
 export class Link extends UiItem<UILink> {
   runPrimaryAction = () => {
     const control = this.props.item;
@@ -242,3 +264,4 @@ export class Progress extends UiControl<UIProgress> {
     ];
   }
 }
+

src/components/UiItemList/index.js

@@ -2,19 +2,14 @@
 import React from "react";
 import {
   ListItem,
-  ListItemIcon,
+  ListItemIcon
-  ListItemSecondaryAction,
+} from "@material-ui/core/List";
-  ListItemText
-} from "material-ui/List";
 import { renderIcon } from "utils/parseIconName";
 
-import type { ControlUI, UIControl, UISlider } from "config/flowtypes";
+import type { ControlUI } from "config/flowtypes";
 
-// TODO: Use something else
+import { Toggle, DropDown, Link,
-import Slider from "material-ui-old/Slider";
+        Section, Text, Progress, Slider } from "./UiItem";
-import MuiThemeProvider from "material-ui-old/styles/MuiThemeProvider";
-
-import { Toggle, DropDown, Link, Section, Text, Progress } from "./UiItem";
 
 export type UiItemListProps = {
   controls: Array<ControlUI>,
@@ -70,7 +65,9 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
         onChangeState={this.props.onChangeState} />;
     }
     case "slider": {
-      return this.renderSlider(control);
+      return <Slider item={control}
+        state={this.props.state}
+        onChangeState={this.props.onChangeState} />;
     }
     case "text": {
       return <Text item={control}
@@ -89,43 +86,4 @@ export default class UiItemList extends React.PureComponent<UiItemListProps> {
     }
     }
   }
-
-  getValue(control: UIControl) {
-    const value = this.props.state[control.topic];
-    if (value == null) {
-      throw new Error(
-        `Unknown topic "${control.topic}" in ${control.type} "${control.text}"`
-      );
-    }
-    return value;
-  }
-
-  renderSlider(control: UISlider) {
-    const value = this.getValue(control);
-    const on = (dontApply: ?boolean) => () => {
-      if (dontApply == null || dontApply === false) {
-        this.props.onChangeState(control.topic,
-          // $FlowFixMe
-          this.val);
-      }
-    };
-    return [
-      <ListItemText primary={control.text} key="text" />,
-      <ListItemSecondaryAction key="action">
-        <MuiThemeProvider>
-          <Slider value={value.internal || value.actual}
-            min={control.min || 0}
-            max={control.max || 100}
-            step={control.step || 1}
-            onChange={(_event, next) => {
-              // $FlowFixMe
-              this.val = next;
-              on(control.delayedApply)();
-            }}
-            onDragStop={on(false)}
-            style={{width: 100}}
-          /></MuiThemeProvider>
-      </ListItemSecondaryAction>
-    ];
-  }
 }