From 14f979049bd97ff96f37a9f2a50d0193ae784aa8 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 20 Dec 2024 22:28:03 +0100
Subject: [PATCH] [light.hue] Support bridges with ungrouped lights.

---
 .../webapp/src/components/Light/Group.vue     | 113 ++++--------------
 .../webapp/src/components/Light/Groups.vue    |  64 ++++------
 .../webapp/src/components/Light/groups.scss   | 105 ++++++++++++++++
 .../src/components/panels/Light/Index.vue     |  84 ++++++++++---
 4 files changed, 221 insertions(+), 145 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/Light/groups.scss

diff --git a/platypush/backend/http/webapp/src/components/Light/Group.vue b/platypush/backend/http/webapp/src/components/Light/Group.vue
index e5397fff10..00c99a0a1f 100644
--- 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
index 0de4aab46e..a3c7e90788 100644
--- 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
new file mode 100644
index 0000000000..473a261ee5
--- /dev/null
+++ 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;
+  }
+}
diff --git a/platypush/backend/http/webapp/src/components/panels/Light/Index.vue b/platypush/backend/http/webapp/src/components/panels/Light/Index.vue
index 17a052a252..6af150b952 100644
--- a/platypush/backend/http/webapp/src/components/panels/Light/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Light/Index.vue
@@ -1,17 +1,46 @@
 <template>
   <div class="plugin lights-plugin">
-    <div class="panel" v-if="selectedGroup == null && groups && Object.keys(groups).length">
-      <Groups :groups="groups" :loading-groups="loadingGroups" :color-converter="colorConverter"
-              @select="selectedGroup = $event" @toggle="$emit('group-toggle', $event)" />
-    </div>
-    <div class="panel" v-else>
-      <Group :group="groups[selectedGroup]" :lights="displayedLights" :scenes="scenesByGroup[selectedGroup]"
-             :color-converter="colorConverter" :animations="animationsByGroup[selectedGroup]" @close="selectedGroup = null"
-             @light-toggle="$emit('light-toggle', $event)" @group-toggle="$emit('group-toggle', $event)"
-             @set-light="$emit('set-light', $event)"
-             @set-group="$emit('set-group', {groupId: selectedGroup, value: $event})"
-             @select-scene="$emit('select-scene', {groupId: selectedGroup, sceneId: $event})"
-             @start-animation="$emit('start-animation', $event)" @stop-animation="$emit('stop-animation', $event)" />
+    <div class="panel">
+      <div class="groups lights-container" v-if="selectedGroup == null && Object.keys(groups || {}).length">
+        <Groups :groups="groups"
+                :loading-groups="loadingGroups"
+                :color-converter="colorConverter"
+                @select="selectedGroup = $event"
+                @toggle="$emit('group-toggle', $event)" />
+      </div>
+
+      <div class="lights-container ungrouped-lights"
+           v-if="Object.keys(ungroupedLights || {}).length && selectedGroup == null">
+          <Group :group="ungroupedLights"
+                 :lights="ungroupedLights"
+                 :scenes="scenesByGroup[selectedGroup]"
+                 :color-converter="colorConverter" 
+                 :animations="animationsByGroup[selectedGroup]"
+                 :with-back-button="false"
+                 title="Ungrouped Lights"
+                 @close="selectedGroup = null"
+                 @light-toggle="$emit('light-toggle', $event)"
+                 @select-scene="$emit('select-scene', {groupId: selectedGroup, sceneId: $event})"
+                 @set-light="$emit('set-light', $event)"
+                 @start-animation="$emit('start-animation', $event)"
+                 @stop-animation="$emit('stop-animation', $event)" />
+      </div>
+
+      <div class="group" v-if="groups?.[selectedGroup]">
+        <Group :group="groups[selectedGroup]"
+               :lights="displayedLights"
+               :scenes="scenesByGroup[selectedGroup]"
+               :color-converter="colorConverter" 
+               :animations="animationsByGroup[selectedGroup]"
+               @close="selectedGroup = null"
+               @group-toggle="$emit('group-toggle', $event)"
+               @light-toggle="$emit('light-toggle', $event)"
+               @select-scene="$emit('select-scene', {groupId: selectedGroup, sceneId: $event})"
+               @set-group="$emit('set-group', {groupId: selectedGroup, value: $event})"
+               @set-light="$emit('set-light', $event)"
+               @start-animation="$emit('start-animation', $event)"
+               @stop-animation="$emit('stop-animation', $event)" />
+      </div>
     </div>
   </div>
 </template>
@@ -27,9 +56,12 @@ import {ColorConverter} from "@/components/panels/Light/color";
  * Generic component for light plugins panels.
  */
 export default {
-  name: "Light",
-  components: {Group, Groups},
   mixins: [Utils, Panel],
+  components: {
+    Group,
+    Groups,
+  },
+
   emits: [
     'group-toggle',
     'light-changed',
@@ -113,6 +145,15 @@ export default {
       }, {})
     },
 
+    ungroupedLights() {
+      return Object.keys(this.lights || {})
+        .filter((lightId) => !this.groupsByLight[lightId])
+        .reduce((obj, lightId) => {
+          obj[lightId] = this.lights[lightId]
+          return obj
+        }, {})
+    },
+
     scenesByGroup() {
       if (!this.scenes)
         return {}
@@ -120,10 +161,16 @@ export default {
       const self = this
       return Object.entries(this.scenes).reduce((obj, [sceneId, scene]) => {
         scene.lights.forEach((lightId) => {
+          if (!self.groupsByLight[lightId]) {
+            if (!obj[-1])
+              obj[-1] = {}
+            obj[-1][sceneId] = scene
+            return
+          }
+
           Object.keys(self.groupsByLight[lightId]).forEach((groupId) => {
             if (!obj[groupId])
               obj[groupId] = {}
-
             obj[groupId][sceneId] = scene
           })
         })
@@ -152,6 +199,10 @@ export default {
                 obj[group.id] = {}
               obj[group.id][lightId] = animation
             }
+          } else {
+            if (!obj[-1])
+              obj[-1] = {}
+            obj[-1][lightId] = animation
           }
 
           return obj
@@ -229,6 +280,7 @@ export default {
   width: 100%;
   height: 100%;
   display: flex;
+  flex-direction: column;
 }
 
 .panel {
@@ -240,6 +292,8 @@ export default {
 </style>
 
 <style lang="scss">
+@import "@/components/Light/groups.scss";
+
 .lights-plugin {
   .menu-panel {
     ul {