[light.hue] Support bridges with ungrouped lights.

blacklight · Dec 20, 2024 · 14f9790 · 14f9790
1 parent f3aa245
commit 14f9790
Show file tree

Hide file tree

Showing 4 changed files with 221 additions and 145 deletions.
diff --git a/platypush/backend/http/webapp/src/components/Light/Group.vue b/platypush/backend/http/webapp/src/components/Light/Group.vue
@@ -3,7 +3,7 @@
     <MenuPanel>
       <div class="panel-row header">
         <div class="col-3" v-if="group">
-          <button class="back-btn" title="Back" @click="close">
+          <button class="back-btn" title="Back" @click="close" v-if="withBackButton">
             <i class="fas fa-chevron-left" />
           </button>
         </div>
@@ -12,7 +12,7 @@
              v-text="groupName" @click="selectedView = selectedView === 'group' ? null : 'group'" />
 
         <div class="col-3 pull-right" v-if="group">
-          <ToggleSwitch :value="group.state.any_on" @input="$emit('group-toggle', group)" />
+          <ToggleSwitch :value="anyLightsOn" @input="$emit('group-toggle', group)" />
         </div>
       </div>
 
@@ -22,7 +22,7 @@
 
       <div class="lights-view" v-else>
         <div class="row view-selector">
-          <button :class="{selected: selectedView === 'lights'}" title="Lights" @click="selectedView = 'lights'">
+          <button :class="{selected: selectedView === 'lights'}" :title="title" @click="selectedView = 'lights'">
             <i class="icon fas fa-lightbulb" />
           </button>
           <button :class="{selected: selectedView === 'scenes'}" title="Scenes" @click="selectedView = 'scenes'">
@@ -98,6 +98,11 @@ export default {
       type: Object,
     },
 
+    title: {
+      type: String,
+      default: 'Lights',
+    },
+
     animations: {
       type: Object,
       default: () => {},
@@ -107,6 +112,11 @@ export default {
       type: Object,
       default: () => new ColorConverter(),
     },
+
+    withBackButton: {
+      type: Boolean,
+      default: true,
+    },
   },
 
   data() {
@@ -118,6 +128,13 @@ export default {
   },
 
   computed: {
+    anyLightsOn() {
+      if (this.group?.state?.any_on != null)
+        return this.group.state.any_on
+
+      return Object.values(this.lights).some(light => light.state.on)
+    },
+
     lightsSorted() {
       if (!this.lights)
         return []
@@ -151,7 +168,7 @@ export default {
         return this.group.name
       if (this.group?.id != null)
         return `[Group ${this.group.id}]`
-      return 'Lights'
+      return this.title
     },
   },
 
@@ -169,90 +186,6 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.light-group-container {
-  width: 100%;
-  min-height: 100%;
-
-  .row.panel-row {
-    flex-direction: column;
-
-    &.expanded,
-    &.selected {
-      background: $selected-bg;
-    }
-  }
-
-  .header {
-    padding: 0.5em !important;
-    display: flex;
-    align-items: center;
-
-    .back-btn {
-      border: 0;
-      background: none;
-
-      &:hover {
-        border: 0;
-        color: $default-hover-fg;
-      }
-    }
-
-    .name {
-      text-align: center;
-
-      &.selected {
-        color: $selected-fg;
-      }
-
-      &:hover {
-        color: $default-hover-fg;
-      }
-    }
-  }
-
-  .view-selector {
-    width: 100%;
-    border-radius: 0;
-
-    button {
-      width: 33.3%;
-      padding: 1.5em;
-      text-align: left;
-      opacity: 0.8;
-      box-shadow: $plugin-panel-entry-shadow;
-      border-right: 0;
-
-      &.selected {
-        background: $selected-bg;
-      }
-
-      &:hover {
-        background: $hover-bg;
-      }
-    }
-
-    .icon {
-      width: 100%;
-      text-align: center;
-      font-size: 1.2em;
-    }
-  }
-}
-</style>
-
-<style lang="scss">
-.light-group-container {
-  .group-controls {
-    margin: 0;
-    padding: 1em;
-    background-color: $default-bg-6;
-    border-radius: 0 0 1em 1em;
-
-    .controls {
-      margin: 0;
-      padding: 1em;
-    }
-  }
-}
+<style lang="scss" scoped>
+@import "./groups.scss";
 </style>
diff --git a/platypush/backend/http/webapp/src/components/Light/Groups.vue b/platypush/backend/http/webapp/src/components/Light/Groups.vue
@@ -1,27 +1,29 @@
 <template>
-  <MenuPanel>
-    <div class="panel-row header">
-      <div class="col-3">
-        <i class="icon fas fa-home" />
+  <div class="light-groups-container">
+    <MenuPanel>
+      <div class="panel-row header">
+        <div class="col-3">
+          <i class="icon fas fa-home" />
+        </div>
+        <div class="col-6 name">
+          Rooms
+        </div>
+        <div class="col-3 pull-right">
+          <ToggleSwitch :value="anyLightsOn" @input="$emit('toggle')" />
+        </div>
       </div>
-      <div class="col-6 name">
-        Rooms
-      </div>
-      <div class="col-3 pull-right">
-        <ToggleSwitch :value="anyLightsOn" @input="$emit('toggle')" />
-      </div>
-    </div>
 
-    <div class="panel-row row group" v-for="group in groupsSorted" :key="group.id" @click="$emit('select', group.id)">
-      <span class="name col-9">
-        {{ group.name || `[Group ${group.id}]` }}
-      </span>
-      <span class="controls col-3 pull-right">
-        <ToggleSwitch :value="group.state.any_on" :disabled="group.id in (loadingGroups || {})"
-                      @input="$emit('toggle', group)" />
-      </span>
-    </div>
-  </MenuPanel>
+      <div class="panel-row row group" v-for="group in groupsSorted" :key="group.id" @click="$emit('select', group.id)">
+        <span class="name col-9">
+          {{ group.name || `[Group ${group.id}]` }}
+        </span>
+        <span class="controls col-3 pull-right">
+          <ToggleSwitch :value="group.state.any_on" :disabled="group.id in (loadingGroups || {})"
+                        @input="$emit('toggle', group)" />
+        </span>
+      </div>
+    </MenuPanel>
+  </div>
 </template>
 
 <script>
@@ -74,23 +76,5 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.header {
-  display: flex;
-  align-items: center;
-  padding-top: 0.75em !important;
-  padding-bottom: 0.75em !important;
-
-  .icon {
-    margin-left: 0.5em;
-  }
-
-  .name {
-    text-align: center;
-  }
-}
-
-.group {
-  display: flex;
-  align-items: center;
-}
+@import "./groups.scss";
 </style>
diff --git a/platypush/backend/http/webapp/src/components/Light/groups.scss b/platypush/backend/http/webapp/src/components/Light/groups.scss
@@ -0,0 +1,105 @@
+.light-group-container {
+  width: 100%;
+  min-height: 100%;
+
+  .row.panel-row {
+    flex-direction: column;
+
+    &.expanded,
+    &.selected {
+      background: $selected-bg;
+    }
+  }
+
+  .header {
+    padding: 0.5em !important;
+    display: flex;
+    align-items: center;
+
+    .back-btn {
+      border: 0;
+      background: none;
+
+      &:hover {
+        border: 0;
+        color: $default-hover-fg;
+      }
+    }
+
+    .name {
+      text-align: center;
+
+      &.selected {
+        color: $selected-fg;
+      }
+
+      &:hover {
+        color: $default-hover-fg;
+      }
+    }
+  }
+
+  .view-selector {
+    width: 100%;
+    border-radius: 0;
+
+    button {
+      width: 33.3%;
+      padding: 1.5em;
+      text-align: left;
+      opacity: 0.8;
+      box-shadow: $plugin-panel-entry-shadow;
+      border-right: 0;
+
+      &.selected {
+        background: $selected-bg;
+      }
+
+      &:hover {
+        background: $hover-bg;
+      }
+    }
+
+    .icon {
+      width: 100%;
+      text-align: center;
+      font-size: 1.2em;
+    }
+  }
+}
+
+:deep(.light-group-container) {
+  .group-controls {
+    margin: 0;
+    padding: 1em;
+    background-color: $default-bg-6;
+    border-radius: 0 0 1em 1em;
+
+    .controls {
+      margin: 0;
+      padding: 1em;
+    }
+  }
+}
+
+.light-groups-container {
+  .header {
+    display: flex;
+    align-items: center;
+    padding-top: 0.75em !important;
+    padding-bottom: 0.75em !important;
+
+    .icon {
+      margin-left: 0.5em;
+    }
+
+    .name {
+      text-align: center;
+    }
+  }
+
+  .group {
+    display: flex;
+    align-items: center;
+  }
+}