Initial commit

README.md

@@ -0,0 +1,61 @@
+state-switch
+============
+
+![state-switch mov](https://user-images.githubusercontent.com/1299821/48923691-05479700-eeb1-11e8-8c8b-91ea14cfecf1.gif)
+
+
+```yaml
+  - title: state-switch-card
+    cards:
+      - type: entities
+        entities:
+          - input_select.home_mode
+      - type: custom:state-switch
+        entity: input_select.home_mode
+        states:
+          Home:
+            type: vertical-stack
+            cards:
+              - type: entities
+                title: Lights
+                entities:
+                  - light.bed_light
+                  - light.ceiling_lights
+                  - light.kitchen_lights
+              - type: picture-glance
+                camera_image: camera.demo_camera
+                entities: []
+          Away:
+            type: alarm-panel
+            entity: alarm_control_panel.alarm
+          Guests:
+            type: glance
+            title: Lights
+            entities:
+              - light.bed_light
+              - light.ceiling_lights
+              - light.kitchen_lights
+
+      - type: custom:state-switch
+        entity: user
+        default: default
+        states:
+          A:
+            type: entities
+            title: User A stuff
+            entities:
+              - light.bed_light
+              - light.ceiling_lights
+              - light.kitchen_lights
+          B:
+            type: glance
+            title: User B stuff
+            entities:
+              - light.bed_light
+              - light.ceiling_lights
+              - light.kitchen_lights
+          default:
+            type: markdown
+            content: >
+              ## Unknown user
+```

state-switch.js

@@ -0,0 +1,50 @@
+class StateSwitch extends Polymer.Element{
+
+  setConfig(config) {
+    this.config = config;
+
+    this.root = document.createElement('div');
+    this.appendChild(this.root);
+
+    this.cardSize = 1;
+    this.cards = {}
+
+    for(var k in this.config.states) {
+      const conf = this.config.states[k];
+      let tag = conf.type;
+      tag = tag.startsWith("custom:")? tag.substr(7) : `hui-${tag}-card`;
+
+      const card = this.cards[k] = document.createElement(tag);
+      card.setConfig(conf);
+
+      this.cardSize = Math.max(this.cardSize, card.getCardSize());
+    }
+  }
+
+  set hass(hass) {
+    if(!hass) return;
+
+    const lastCard = this.currentCard;
+    if (this.config.entity === 'user') {
+      this.currentCard = this.cards[hass.user.name] || this.cards[this.config.default];
+    } else {
+      let state = hass.states[this.config.entity];
+      this.currentCard = (state)?this.cards[state.state]:null || this.cards[this.config.default];
+    }
+
+    if(this.currentCard != lastCard) {
+      while(this.root.firstChild) this.root.removeChild(this.root.firstChild);
+      this.root.appendChild(this.currentCard);
+    }
+
+    for(var k in this.cards)
+      this.cards[k].hass = hass;
+  }
+
+  getCardSize() {
+    return this.cardSize;
+  }
+
+}
+
+customElements.define('state-switch', StateSwitch);