Add esper statistics

config/rzl.js

@@ -7,7 +7,8 @@ const config : Config = {
     color: "orange",
     mqtt: "ws://map.rzl:1884"
   },
-  topics: {
+  topics: [
+    {
       led_stahltraeger: {
         state: "/service/openhab/out/pca301_ledstrips/state",
         command: "/service/openhab/in/pca301_ledstrips/command",
@@ -119,6 +120,9 @@ const config : Config = {
         values: { on: "ON", off: "OFF" }
       }
     },
+    utils.esper_topics("afba40", "flyfry"),
+    utils.esper_topics("afba45", "alarm")
+  ],
   controls: {
     led_stahltrager: {
       name: "LED Stahlträger",
@@ -221,14 +225,14 @@ const config : Config = {
       position: [450, 590],
       icon: "fire",
       iconColor: ({flyfry}) => flyfry == "on" ? "#6666FF" : "#000000",
-      ui: [
+      ui: utils.esper_statistics("flyfry", [
         {
           type: "toggle",
           text: "Fliegenbratgerät",
           topic: "flyfry",
           icon: "power"
         }
-      ]
+      ])
     },
     artnet: {
       name: "Artnet",
@@ -362,6 +366,13 @@ const config : Config = {
         }
       ]
     },
+    alarm: {
+      name: "Alarm",
+      position: [340, 250],
+      icon: "alarm-bell",
+      iconColor: () => "#000000",
+      ui: utils.esper_statistics("alarm")
+    },
     door: {
       name: "Tür",
       position: [455,350],
@@ -378,7 +389,7 @@ const config : Config = {
     infoscreen: {
       name: "Infoscreen",
       position: [255, 495],
-      icon: "television-guide",
+      icon: "television-guide flip-v",
       iconColor: ({infoscreen}) => infoscreen == "on" ? "#4444FF" : "#000000",
       ui: [
         {

config/utils.js

@@ -3,27 +3,81 @@
 export const rainbow = "rgba(200,120,120,0.5);"
       + "--before-background: linear-gradient(40deg, #FF0000 0%, #00FF00 50%, #0000FF 70%, #FFFF00 100%);";
 
-export const esper_topics = (chip_id: string) => ({
+export const esper_topics = (chip_id: string, name: string) => ({
-  [ `esper_${chip_id}_version` ]: {
+  [ `esper_${name}_version` ]: {
     state: `/service/esper/${chip_id}/info`,
     command: "",
     defaultValue: "UNKNOWN",
     values: {},
     parseState: msg => JSON.parse(msg.toString()).version.esper
+  },
+  [ `esper_${name}_ip` ]: {
+    state: `/service/esper/${chip_id}/info`,
+    command: "",
+    defaultValue: "UNKNOWN",
+    values: {},
+    parseState: msg => JSON.parse(msg.toString()).network.ip
+  },
+  [ `esper_${name}_rssi` ]: {
+    state: `/service/esper/${chip_id}/info`,
+    command: "",
+    defaultValue: "UNKNOWN",
+    values: {},
+    parseState: msg => JSON.parse(msg.toString()).wifi.rssi
+  },
+  [ `esper_${name}_uptime` ]: {
+    state: `/service/esper/${chip_id}/info`,
+    command: "",
+    defaultValue: "UNKNOWN",
+    values: {},
+    parseState: msg => new Date(JSON.parse(msg.toString()).time.startup * 1000)
+                          .toLocaleString()
+  },
+  [ `esper_${name}_device` ]: {
+    state: `/service/esper/${chip_id}/info`,
+    command: "",
+    defaultValue: "UNKNOWN",
+    values: {},
+    parseState: msg => JSON.parse(msg.toString()).device
   }
 });
 
-export const esper_statistics = (chip_id: string,
+export const esper_statistics = (name: string,
     prev_ui: Array<ControlUI> = []) => (
       prev_ui.concat([
         {
           type: "section",
           text: "Funkdose"
         },
+        {
+          type: "text",
+          text: "Device Variant",
+          icon: "chart-donut",
+          topic: `esper_${name}_device`
+        },
         {
           type: "text",
           text: "Version",
-          topic: `esper_${chip_id}_version`
+          icon: "source-branch",
+          topic: `esper_${name}_version`
+        },
+        {
+          type: "text",
+          text: "IP",
+          icon: "access-point-network",
+          topic: `esper_${name}_ip`
+        },
+        {
+          type: "text",
+          text: "RSSI",
+          icon: "wifi",
+          topic: `esper_${name}_rssi`
+        },
+        {
+          type: "text",
+          text: "Running since…",
+          icon: "av-timer",
+          topic: `esper_${name}_uptime`
         }
       ])
     );

src/components/App.js

@@ -35,7 +35,7 @@ class App extends React.Component<AppProps & Classes, AppState> {
     this.state = {
       selectedControl: null,
       drawerOpened: false,
-      mqttState: _.mapValues(props.config.topics, (topic) => ({
+      mqttState: _.mapValues(this.topics, (topic) => ({
         actual: topic.defaultValue,
         internal: keyOf(topic.values, topic.defaultValue)
       })),
@@ -44,12 +44,17 @@ class App extends React.Component<AppProps & Classes, AppState> {
         onConnect: () => this.setState({ mqttConnected: true }),
         onReconnect: () => this.setState({ mqttConnected: false }),
         onDisconnect: () => this.setState({ mqttConnected: false }),
-        subscribe: _.map(props.config.topics, (x) => x.state)
+        subscribe: _.map(this.topics, (x) => x.state)
       }),
       mqttConnected: false
     };
   }
 
+  get topics(): Topics {
+    return Array.isArray(this.props.config.topics) ?
+      Object.assign({}, ...this.props.config.topics) : this.props.config.topics;
+  }
+
   static styles(_theme: Object) {
     return {
       drawerPaper: {
@@ -67,21 +72,24 @@ class App extends React.Component<AppProps & Classes, AppState> {
   }
 
   receiveMessage(rawTopic: string, message: Object) {
-    const topic = _.findKey(
+    const topics = _.filter(
-      this.props.config.topics,
+      _.keys(this.topics),
-      (v) => v.state === rawTopic
+      (k) => this.topics[k].state === rawTopic
     );
-    if (topic == null) {
+    if (topics.length === 0) {
       return;
     }
-    const parseValue = this.props.config.topics[topic].parseState;
+    for (let i in topics) {
-    const value = parseValue == null ? message.toString() : parseValue(message);
+      const topic = topics[i];
+      const parseValue = this.topics[topic].parseState;
+      const val = parseValue == null ? message.toString() : parseValue(message);
       this.setState({mqttState: _.merge(this.state.mqttState,
         { [topic]: {
-        actual: value,
+          actual: val,
-        internal: keyOf(this.props.config.topics[topic].values, value) || value
+          internal: keyOf(this.topics[topic].values, val) || val
         }})});
     }
+  }
 
   changeControl(control: ?Control = null) {
     this.setState({selectedControl: control, drawerOpened: control != null});
@@ -92,13 +100,13 @@ class App extends React.Component<AppProps & Classes, AppState> {
   }
 
   changeState(topic: string, value: Actual) {
-    const rawTopic = this.props.config.topics[topic].command;
+    const rawTopic = this.topics[topic].command;
     if (rawTopic == null) {
       return;
     }
     this.state.mqttSend(
       rawTopic,
-      String(this.props.config.topics[topic].values[value] || value)
+      String(this.topics[topic].values[value] || value)
     );
   }
 

src/components/UiItemList/UiItem.js

@@ -209,8 +209,8 @@ export class Section extends UiItem<UISection> {
 export class Text extends UiControl<UIText> {
   render() {
     return [
-      <ListItemText key="label" primary={this.props.item.text} />,
+      <ListItemText key="label" secondary={this.props.item.text} />,
-      <ListItemText key="val" secondary={this.getValue().internal} />
+      <ListItemText key="vr" primary={this.getValue().internal} align="right" />
     ];
   }
 }

types/types.js

@@ -111,7 +111,7 @@ declare type Controls = Map<string,Control>;
 
 declare type Config = {
   space: Space,
-  topics: Topics,
+  topics: Topics | Array<Topics>,
   controls: Controls,
   layers: Array<Layer>
 };