- Fix bug in GUI when no sensors added

- Fix voltage sensor missing
- Change device_state_attributes to extra_state_attributes
- Enhanced the frontend (look, translation, groups)
- New version oy pyShelly 0.3.5

custom_components/shelly/__init__.py

@@ -59,7 +59,7 @@
 
 _LOGGER = logging.getLogger(__name__)
 
-__version__ = "0.3.2"
+__version__ = "0.3.3"
 VERSION = __version__
 
 async def async_setup(hass, config):
@@ -132,7 +132,7 @@ def __init__(self, hass, config_entry, conf):
         self.conf = conf
         self.version_added = False
         self.discover = self.conf.get(CONF_DISCOVERY)
-        self.device_sensors = []  #Keep track dynamic device sensors is added
+        #self.device_sensors = []  #Removed, cause collisions
         self.block_sensors = []  #Keep track dynamic block sensors is added
         self.update_config_attributes()
         sensors = self.conf.get(CONF_SENSORS, {})
@@ -219,7 +219,7 @@ def set_config(self, id, value):
 
     def update_config_list(self, type, id, value):
         options = self.config_entry.options.copy()
-        list = options[type] = options[type].copy()
+        list = options[type] = options.get(type, []).copy()
         if value:
             if not id in list:
                 list.append(id)

custom_components/shelly/binary_sensor.py

@@ -130,8 +130,8 @@ def update(self):
             self._last_event = event
 
     @property
-    def device_state_attributes(self):
-        attrs = super().device_state_attributes
+    def extra_state_attributes(self):
+        attrs = super().extra_state_attributes
         if self._last_event:
             attrs[ATTRIBUTE_CLICK_TYPE] = self._last_event
             attrs[ATTRIBUTE_CLICK_CNT] = self._event_cnt

custom_components/shelly/block.py

@@ -73,7 +73,7 @@ def _updated(self, _block):
             self._update_ha_state()
 
     @property
-    def device_state_attributes(self):
+    def extra_state_attributes(self):
         """Show state attributes in HASS"""
         attrs = {'shelly_type': self._block.type_name(),
                  'shelly_id': self._block.id,

custom_components/shelly/const.py

@@ -102,32 +102,46 @@
 ]
 
 ALL_CONFIG = {
-    CONF_ENTITY_ID : { "type" : "str" },
-    CONF_LIGHT_SWITCH : { "type" : "bool" },
-    CONF_ADDITIONAL_INFO : { "type" : "bool" },
-    CONF_IGMPFIX : { "type" : "bool" },
-    CONF_MDNS : { "type" : "bool" },    
-    CONF_OBJECT_ID_PREFIX : { "type" : "str" },    
-    CONF_SHOW_ID_IN_NAME : { "type" : "bool" },
-    CONF_VERSION : { "type" : "bool" },
-    CONF_UPGRADE_SWITCH : { "type" : "bool" },
-    CONF_UPGRADE_BETA_SWITCH : { "type" : "bool" },
-    CONF_UNAVALABLE_AFTER_SEC : { "type" : "int" },
-    CONF_CLOUD_AUTH_KEY : { "type" : "txt" },
-    CONF_CLOUD_SERVER : { "type" : "str" },
-    CONF_TMPL_NAME : { "type" : "str" },
+    #CONF_ENTITY_ID : { "type" : "str" },
+    #CONF_LIGHT_SWITCH : { "type" : "bool" },
+    #CONF_OBJECT_ID_PREFIX : { "type" : "str" },    
     #CONF_DISCOVER_BY_IP : { "type" : "list" },
-    CONF_DISCOVERY : { "type" : "bool" },
-    CONF_HOST_IP : { "type" : "str" },
-    CONF_MQTT_PORT : { "type" : "int", "group" : "mqtt" },
-    CONF_MQTT_SERVER_HOST : { "type" : "str", "group" : "mqtt-server" },
-    CONF_MQTT_SERVER_PORT : { "type" : "int", "group" : "mqtt-server" },
-    CONF_MQTT_SERVER_USERNAME : { "type" : "str", "group" : "mqtt-server" },
-    CONF_MQTT_SERVER_PASSWORD : {"type" : "str", "group" : "mqtt-server" },
+
+    #General
+    CONF_VERSION : { "type" : "bool", "group": "general" },
+    CONF_UPGRADE_SWITCH : { "type" : "bool", "group": "general" },
+    CONF_UPGRADE_BETA_SWITCH : { "type" : "bool", "group": "general" },
+    CONF_ADDITIONAL_INFO : { "type" : "bool", "group": "general" },
+    CONF_UNAVALABLE_AFTER_SEC : { "type" : "int", "group": "general" },
+    CONF_SCAN_INTERVAL : { "type" : "int", "group" : "general" },
+
+    #Discovery
+    CONF_IGMPFIX : { "type" : "bool", "group": "discovery" },
+    CONF_MDNS : { "type" : "bool", "group": "discovery"  },    
+    CONF_DISCOVERY : { "type" : "bool", "group": "discovery"  },
+    CONF_HOST_IP : { "type" : "str", "group": "discovery"  },
+
+    #Name
+    CONF_SHOW_ID_IN_NAME : { "type" : "bool", "group": "name" },
+    CONF_TMPL_NAME : { "type" : "str", "group": "name"  },
+
+    #Cloud
+    CONF_CLOUD_AUTH_KEY : { "type" : "txt", "group": "cloud"  },
+    CONF_CLOUD_SERVER : { "type" : "str", "group": "cloud"  },
+
+    #MQTT integrated
+    CONF_MQTT_PORT : { "type" : "int", "group" : "mqtt-integrated" },
+
+    #MQTT broker
+    CONF_MQTT_SERVER_HOST : { "type" : "str", "group" : "mqtt-broker" },
+    CONF_MQTT_SERVER_PORT : { "type" : "int", "group" : "mqtt-broker" },
+    CONF_MQTT_SERVER_USERNAME : { "type" : "str", "group" : "mqtt-broker" },
+    CONF_MQTT_SERVER_PASSWORD : {"type" : "str", "group" : "mqtt-broker" },
+
+    #Debug
     CONF_LOCAL_PY_SHELLY : { "type" : "bool", "group" : "debug" },
     CONF_ONLY_DEVICE_ID : {"type" : "str", "group" : "debug" },
-    CONF_DEBUG_ENABLE_INFO : {"type" : "bool", "group" : "debug"},
-    CONF_SCAN_INTERVAL : { "type" : "int", "group" : "general" }
+    CONF_DEBUG_ENABLE_INFO : {"type" : "bool", "group" : "debug"}
 }
 
 DEFAULT_IGMPFIX = False

custom_components/shelly/device.py

@@ -58,11 +58,11 @@ def _updated(self, _block):
             self._update_ha_state()
 
         if self._dev.info_values is not None:
-            device_sensors = self.instance.device_sensors
+            block_sensors = self.instance.block_sensors
             for key, _value in self._dev.info_values.items():
                 ukey = self._dev.id + '-' + key
-                if not ukey in device_sensors:
-                    device_sensors.append(ukey)
+                if not ukey in block_sensors:
+                    block_sensors.append(ukey)
                     for sensor in self._sensor_conf:
                         if ALL_SENSORS[sensor].get('attr') == key:
                             attr = {'sensor_type':key,
@@ -113,7 +113,7 @@ def _debug_add_state_info(self, attrs):
             attrs['state_MQTT_status'] = self._dev.state_mqtt_status
 
     @property
-    def device_state_attributes(self):
+    def extra_state_attributes(self):
         """Show state attributes in HASS"""
         attrs = {'shelly_type': self._dev.type_name(),
                  'shelly_id': self._dev.id,

custom_components/shelly/frontend/rollup.config.js

@@ -8,6 +8,8 @@ import typescript from "rollup-plugin-typescript2";
 import { visualizer } from 'rollup-plugin-visualizer';
 import styles from "rollup-plugin-styles";
 
+const production = !process.env.ROLLUP_WATCH;
+
 export default {
   input: "src/index.ts",
   output: {
@@ -51,6 +53,6 @@ export default {
       host: "localhost",
       port: 3000,
     }),*/
-    //livereload({ watch: "dist" }),
+    !production && livereload({ watch: "dist" }),
   ]
 };

custom_components/shelly/frontend/src/components/ConfigEntry.tsx

@@ -28,21 +28,21 @@ export default class ShellyConfigEntry extends Component<Props> {
 
     if (config.type=="bool") {
       const val = config.value.toString().toLowerCase()=="true";
-      return <input title={config.name} type="checkbox" checked={val} onChange={this.update_config}></input>
+      return <input title={config.title} type="checkbox" checked={val} onChange={this.update_config}></input>
     }
     if (config.type=="str")
-      return <input type="text" title={config.name}
+      return <input type="text" title={config.title}
         value={config.value}
         onChange={this.update_config}
       ></input>
 
     if (config.type=="txt")
-      return <textarea title={config.name} rows={6}
+      return <textarea title={config.title} rows={6}
               value={config.value}
               onChange={this.update_config}></textarea>
 
     if (config.type=="int")
-      return <input type="number" title={config.name} 
+      return <input type="number" title={config.title} 
         value={config.value}
         onChange={this.update_config}
       ></input>

custom_components/shelly/frontend/src/components/setting/Checkbox.tsx

@@ -30,11 +30,11 @@ export default class ShellySettingCheckbox extends Component<Props> {
     const { setting, param } = this.props;
     return <div className={param}>
         {setting.has[param] ? 
-        <>
-          {param}:&nbsp;
-          <input type="checkbox" title={setting.name}
+        <>          
+          <input type="checkbox" title={setting.title}
             checked={setting.value[param]} 
             onChange={this.update_setting} />
+          &nbsp;{param}
         </>
         : ""}
 

custom_components/shelly/frontend/src/components/setting/TextField.tsx

@@ -32,7 +32,7 @@ export default class SettingTextField extends Component<Props> {
     return <div className={param}>
         {setting.has[param] ? 
           <><div className="label">{param}: </div>
-          <input type={type} title={setting.name} className={type}
+          <input type={type} title={setting.title} className={type}
             value={setting.value[param]} 
             placeholder={"Default: " + setting.default[param]}
             onChange={this.update_setting} /></>

custom_components/shelly/frontend/src/data.ts

@@ -10,16 +10,17 @@ export interface Instance {
 
 export interface Config {
   id : string,
-  name : string,
+  title : string,
+  desc: string,
+  group: string,
   type : string,
   value : string,
   def : string
 }
 
 export interface Setting {
   id : string,
-  name : string,
-  image : string,
+  title : string,
   value : {
     sensor : boolean,
     attrib: boolean,
@@ -47,7 +48,8 @@ export interface App {
 
 export const getConfiguration = async (hass: HomeAssistant) => {
   const response = await hass.connection.sendMessagePromise<App>({
-    type: "s4h/get_config"
+    type: "s4h/get_config",
+    language: hass.language
   });
   response.instances.map( i => { i.hass=hass })
   return response;

custom_components/shelly/frontend/src/panels/ConfigPanel.tsx

@@ -15,19 +15,27 @@ export default class ShellyConfigPanel extends Component<Props> {
       return <div>Loading!!!!!!</div>;
     const { app, instance } = this.props;
     const { configs } = instance;
+    const groups = [...new Set(configs.map( config => config.group ))];
+
     return (<>
       <div className="configpanel">
         <h2>Config</h2>
         <Masonry
           elementType={'div'}
         >
-          {configs.map( config => (
-            <Card key={config.id}>
-              <div className="name">{config.name}</div>
-              <div className="value">
-                <ShellyConfigEntry instance={instance} config={config} />
-              </div>
-            </Card>
+        {groups.map( group => (
+          <div className="group">
+              <div className="title">{group}</div>
+              {configs.filter( config => config.group==group).map( config => (                
+                <Card key={config.id}>
+                  <Card.Title>{config.title}</Card.Title>
+                  <div className="desc">{config.desc}</div>
+                  <div className="value">
+                    <ShellyConfigEntry instance={instance} config={config} />
+                  </div>
+                </Card>
+              ))}
+            </div>
           ))}
         </Masonry>
       </div>

custom_components/shelly/frontend/src/panels/Panel.scss

@@ -45,35 +45,72 @@ $card-bg : var(--secondary-background-color);
             padding: 0.8rem;
             margin: 0.1rem;
             position: relative;
+            vertical-align: top;
+            border-radius: 0.4rem;
         }
 
         .configpanel {
+            .group {
+                width: 19rem;
+                padding: 10px;
+                margin: 5px;
+                border: 1px solid var(--secondary-text-color);
+                border-radius: 10px;
+                .title {                    
+                    font-size: 18px;
+                    font-weight: bold;
+                    margin-bottom: 10px;
+                }
+            }
+            .card-title {
+                font-size: var(--ha-card-header-font-size);
+                font-weight: var(--ha-card-header-font-weight);
+            }
+            .desc {
+                color: var(--secondary-text-color);
+                margin-bottom: 10px;
+            }
             .value {
                 .bool {
                     position: absolute;
                     top: 1rem;
                     right: 1rem;
                 }
+                textarea {
+                    width: 95%;
+                }
             }
         }
         .settingpanel {
-            .name {
-                padding-bottom: 0.7rem;
-                font-weight: 500;
+            .card {
+                height: 11rem;
+                margin: 0.2rem;
+            }
+            .card-title {
+                font-size: var(--ha-card-header-font-size);
+                font-weight: var(--ha-card-header-font-weight);
             }
             .label {
-                width: 5rem;
+                padding-left: 0.5rem;
+                width: 5.5rem;
                 display: inline-block;
+                color: var(--secondary-text-color);
             }
             input[type="text"], input[type="number"] {
                 width: 8rem;
-                margin-top: 0.3rem;
+                margin-top: 0.5rem;
+            }
+            .decimals {
+                margin-top: 0.2rem;
             }
             .attrib {
                 display: inline-block;
+                vertical-align: top;
             }
-            .sensor {                
-                float: right;
+            .sensor {
+                margin-right: 1rem;
+                display: inline-block;
+                vertical-align: top;
             }
 
         }

custom_components/shelly/frontend/src/panels/SettingPanel.tsx

@@ -15,21 +15,17 @@ export default class ShellySettingPanel extends Component<Props> {
     const { instance } = this.props
     return (<div className="settingpanel">
       <h2>Settings</h2>
-      <Masonry
-        elementType={'div'}
-      >
         {instance.settings.map( setting => (
           <Card key={setting.id}>
-            <div className="name">{setting.name}</div>
-            Show:&nbsp;
+            <Card.Title>{setting.title}</Card.Title>
+            <div className="label">show:</div>
             <Checkbox instance={instance} setting={setting} param="sensor"></Checkbox>
             <Checkbox instance={instance} setting={setting} param="attrib"></Checkbox>
             <TextField instance={instance} setting={setting} param="decimals" type="number"></TextField>
             <TextField instance={instance} setting={setting} param="div" type="number"></TextField>
             <TextField instance={instance} setting={setting} param="unit" type="text"></TextField>
           </Card>
         ))}
-      </Masonry>
     </div>
     );
   }

custom_components/shelly/manifest.json

@@ -1,11 +1,11 @@
 {
   "domain": "shelly",
   "name": "Shelly smart home",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "config_flow": true,
   "documentation": "https://github.com/StyraHem/ShellyForHASS/blob/master/README.md",
   "dependencies": ["zeroconf"],
   "codeowners": ["@hakana","@StyraHem"],
-  "requirements": ["pyShelly==0.3.4", "paho-mqtt==1.5.1", "websocket-client"],
+  "requirements": ["pyShelly==0.3.5", "paho-mqtt==1.5.1", "websocket-client"],
   "iot_class": "local_push"
 }