Added entities panel

platypush/backend/http/webapp/src/components/Nav.vue

@@ -6,7 +6,7 @@
     </div>
 
     <ul class="plugins">
-      <li v-for="name in Object.keys(panels).sort()" :key="name" class="entry" :class="{selected: name === selectedPanel}"
+      <li v-for="name in panelNames" :key="name" class="entry" :class="{selected: name === selectedPanel}"
           :title="name" @click="onItemClick(name)">
         <a :href="`/#${name}`">
         <span class="icon">
@@ -14,7 +14,7 @@
           <img :src="icons[name].imgUrl" v-else-if="icons[name]?.imgUrl"  alt="name"/>
           <i class="fas fa-puzzle-piece" v-else />
         </span>
-        <span class="name" v-if="!collapsed" v-text="name" />
+        <span class="name" v-if="!collapsed" v-text="name == 'entities' ? 'Home' : name" />
         </a>
       </li>
     </ul>
@@ -66,6 +66,16 @@ export default {
     },
   },
 
+  computed: {
+    panelNames() {
+      let panelNames = Object.keys(this.panels)
+      const homeIdx = panelNames.indexOf('entities')
+      if (homeIdx >= 0)
+        return ['entities'].concat((panelNames.slice(0, homeIdx).concat(panelNames.slice(homeIdx+1))).sort())
+      return panelNames.sort()
+    },
+  },
+
   methods: {
     onItemClick(name) {
       this.$emit('select', name)

platypush/backend/http/webapp/src/components/panels/Entities/Entity.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="row item entity">
+    <Loading v-if="loading" />
+    <Icon v-bind="value.meta?.icon || {}" />
+    <div class="component-container">
+      <component :is="component" :value="value" @input="$emit('input', $event)" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { defineAsyncComponent } from 'vue'
+import Utils from "@/Utils"
+import Loading from "@/components/Loading"
+import Icon from "@/components/elements/Icon";
+
+export default {
+  name: "Entity",
+  components: {Loading, Icon},
+  mixins: [Utils],
+  emits: ['input'],
+  props: {
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      component: null,
+    }
+  },
+
+  computed: {
+    type() {
+      let entityType = (this.value.type || '')
+      return entityType.charAt(0).toUpperCase() + entityType.slice(1)
+    },
+  },
+
+  mounted() {
+    if (this.type !== 'Entity')
+      this.component = defineAsyncComponent(
+        () => import(`@/components/panels/Entities/${this.type}`)
+      )
+  },
+}
+</script>
+
+<style lang="scss">
+@import "vars";
+
+.entity {
+  width: 100%;
+  display: table;
+
+  .icon-container,
+  .component-container {
+    height: 100%;
+    display: table-cell;
+    vertical-align: middle;
+  }
+
+  .component-container {
+    width: calc(100% - #{$icon-container-size});
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/panels/Entities/Index.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="row plugin entities-container">
+    <Loading v-if="loading" />
+
+    <div class="entity-selector-container">
+      <Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
+    </div>
+
+    <div class="groups-canvas">
+      <div class="groups-container">
+        <div class="group fade-in" v-for="group in displayGroups" :key="group.name">
+          <div class="frame">
+            <div class="header">
+              <span class="section left">
+                <Icon v-bind="entitiesMeta[group.name].icon || {}"
+                  v-if="selector.grouping === 'type' && entitiesMeta[group.name]" />
+                <Icon :class="pluginIcons[group.name]?.class" :url="pluginIcons[group.name]?.imgUrl"
+                  v-else-if="selector.grouping === 'plugin' && pluginIcons[group.name]" />
+              </span>
+
+              <span class="section center">
+                <div class="title" v-text="entitiesMeta[group.name].name_plural"
+                  v-if="selector.grouping === 'type' && entitiesMeta[group.name]"/>
+                <div class="title" v-text="group.name" v-else-if="selector.grouping === 'plugin'"/>
+              </span>
+
+              <span class="section right" />
+            </div>
+
+            <div class="body">
+              <div class="entity-frame" v-for="entity in group.entities" :key="entity.id">
+                <Entity :value="entity" @input="entities[entity.id] = $event" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Utils from "@/Utils"
+import Loading from "@/components/Loading";
+import Icon from "@/components/elements/Icon";
+import Entity from "./Entity.vue";
+import Selector from "./Selector.vue";
+import icons from '@/assets/icons.json'
+import meta from './meta.json'
+
+export default {
+  name: "Entities",
+  components: {Loading, Icon, Entity, Selector},
+  mixins: [Utils],
+
+  data() {
+    return {
+      loading: false,
+      entities: {},
+      selector: {
+        grouping: 'type',
+        selectedEntities: {},
+      },
+    }
+  },
+
+  computed: {
+    entitiesMeta() {
+      return meta
+    },
+
+    pluginIcons() {
+      return icons
+    },
+
+    entityGroups() {
+      return {
+        'id': Object.entries(this.groupEntities('id')).reduce((obj, [id, entities]) => {
+          obj[id] = entities[0]
+          return obj
+        }, {}),
+        'type': this.groupEntities('type'),
+        'plugin': this.groupEntities('plugin'),
+      }
+    },
+
+    displayGroups() {
+      return Object.entries(this.entityGroups[this.selector.grouping]).filter(
+        (entry) => entry[1].filter(
+          (e) => !!this.selector.selectedEntities[e.id]
+        ).length > 0
+      ).sort((a, b) => a[0].localeCompare(b[0])).map(
+        ([grouping, entities]) => {
+          return {
+            name: grouping,
+            entities: entities,
+          }
+        }
+      )
+    },
+  },
+
+  methods: {
+    groupEntities(attr) {
+      return Object.values(this.entities).reduce((obj, entity) => {
+        const entities = obj[entity[attr]] || {}
+        entities[entity.id] = entity
+        obj[entity[attr]] = Object.values(entities).sort((a, b) => {
+            return a.name.localeCompare(b.name)
+          })
+
+        return obj
+      }, {})
+    },
+
+    async refresh() {
+      this.loading = true
+
+      try {
+        this.entities = (await this.request('entities.get')).reduce((obj, entity) => {
+          entity.meta = {
+            ...(meta[entity.type] || {}),
+            ...(entity.meta || {}),
+          }
+
+          obj[entity.id] = entity
+          return obj
+        }, {})
+
+        this.selector.selectedEntities = this.entityGroups.id
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+
+  mounted() {
+    this.refresh()
+  },
+}
+</script>
+
+<style lang="scss">
+@import "vars";
+@import "~@/style/items";
+
+.entities-container {
+  --groups-per-row: 1;
+
+  @include from($desktop) {
+    --groups-per-row: 2;
+  }
+
+  @include from($fullhd) {
+    --groups-per-row: 3;
+  }
+
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  color: $default-fg-2;
+  font-weight: 400;
+
+  .entity-selector-container {
+    height: $selector-height;
+  }
+
+  .groups-canvas {
+    width: 100%;
+    height: calc(100% - #{$selector-height});
+    display: flex;
+    flex-direction: column;
+  }
+
+  .groups-container {
+    overflow: auto;
+    @include from($desktop) {
+      column-count: var(--groups-per-row);
+    }
+  }
+
+  .group {
+    width: 100%;
+    max-height: 100%;
+    position: relative;
+    padding: $main-margin 0;
+    display: flex;
+    break-inside: avoid;
+
+    @include from($tablet) {
+      padding: $main-margin;
+    }
+
+    .frame {
+      max-height: calc(100% - #{2 * $main-margin});
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      position: relative;
+      box-shadow: $group-shadow;
+      border-radius: 1em;
+    }
+
+    .header {
+      width: 100%;
+      height: $header-height;
+      display: table;
+      background: $header-bg;
+      box-shadow: $header-shadow;
+      border-radius: 1em 1em 0 0;
+
+      .section {
+        height: 100%;
+        display: table-cell;
+        vertical-align: middle;
+
+        &.left, &.right {
+          width: 10%;
+        }
+
+        &.center {
+          width: 80%;
+          text-align: center;
+        }
+      }
+    }
+
+    .body {
+      background: $default-bg-2;
+      max-height: calc(100% - #{$header-height});
+      overflow: auto;
+      flex-grow: 1;
+
+      .entity-frame:last-child {
+        border-radius: 0 0 1em 1em;
+      }
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="entities-selectors-container">
+    <div class="selector">
+      <Dropdown title="Group by" icon-class="fas fa-layer-group"
+          :text="prettifyGroupingName(value.grouping)" ref="groupingSelector">
+        <DropdownItem v-for="g in visibleGroupings" :key="g" :text="prettifyGroupingName(g)"
+          :item-class="{selected: value?.grouping === g}"
+          @click="onGroupingChanged(g)" />
+      </Dropdown>
+    </div>
+
+    <div class="selector" :class="{active: isGroupFilterActive}" v-if="value?.grouping">
+      <Dropdown title="Filter by" icon-class="fas fa-filter" ref="groupSelector"
+          keep-open-on-item-click>
+        <DropdownItem v-for="g in sortedGroups" :key="g" :text="g"
+          v-bind="iconForGroup(g)" :item-class="{selected: !!selectedGroups[g]}"
+          @click.stop="toggleGroup(g)" />
+      </Dropdown>
+    </div>
+  </div>
+</template>
+
+<script>
+import Utils from '@/Utils'
+import Dropdown from "@/components/elements/Dropdown";
+import DropdownItem from "@/components/elements/DropdownItem";
+import meta from './meta.json'
+import pluginIcons from '@/assets/icons.json'
+
+export default {
+  name: "Selector",
+  emits: ['input'],
+  mixins: [Utils],
+  components: {Dropdown, DropdownItem},
+  props: {
+    entityGroups: {
+      type: Object,
+      required: true,
+    },
+
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      selectedGroups: {},
+    }
+  },
+
+  computed: {
+    visibleGroupings() {
+      return Object.keys(this.entityGroups).filter(
+        (grouping) => grouping !== 'id'
+      )
+    },
+
+    sortedGroups() {
+      return Object.keys(this.entityGroups[this.value?.grouping] || {}).sort()
+    },
+
+    typesMeta() {
+      return meta
+    },
+
+    isGroupFilterActive() {
+      return Object.keys(this.selectedGroups).length !== this.sortedGroups.length
+    },
+
+    selectedEntities() {
+      return Object.values(this.entityGroups.id).filter((entity) =>
+         !!this.selectedGroups[entity[this.value?.grouping]]
+      ).reduce((obj,  entity) => {
+        obj[entity.id] = entity
+        return obj
+      }, {})
+    },
+  },
+
+  methods: {
+    prettifyGroupingName(name) {
+      return name ? this.prettify(name) + 's' : ''
+    },
+
+    iconForGroup(group) {
+      if (this.value.grouping === 'plugin' && pluginIcons[group]) {
+        const icon = pluginIcons[group]
+        return {
+          'icon-class': icon['class']?.length || !icon.imgUrl?.length ?
+              icon['class'] : 'fas fa-gears',
+          'icon-url': icon.imgUrl,
+        }
+      }
+
+      return {}
+    },
+
+    synchronizeSelectedEntities() {
+      const value = {...this.value}
+      value.selectedEntities = this.selectedEntities
+      this.$emit('input', value)
+    },
+
+    resetGroupFilter() {
+      this.selectedGroups = Object.keys(
+        this.entityGroups[this.value?.grouping] || {}
+      ).reduce(
+        (obj, group) => {
+          obj[group] = true
+          return obj
+        }, {}
+      )
+
+      this.synchronizeSelectedEntities()
+    },
+
+    toggleGroup(group) {
+      if (this.selectedGroups[group])
+        delete this.selectedGroups[group]
+      else
+        this.selectedGroups[group] = true
+
+      this.synchronizeSelectedEntities()
+    },
+
+    onGroupingChanged(grouping) {
+      if (!this.entityGroups[grouping] || grouping === this.value?.grouping)
+        return false
+
+      const value = {...this.value}
+      value.grouping = grouping
+      this.$emit('input', value)
+    },
+  },
+
+  mounted() {
+    this.resetGroupFilter()
+    this.$watch(() => this.value?.grouping, this.resetGroupFilter)
+    this.$watch(() => this.entityGroups, this.resetGroupFilter)
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.entities-selectors-container {
+  width: 100%;
+  background: $default-bg-2;
+  display: flex;
+  align-items: center;
+  box-shadow: $border-shadow-bottom;
+
+  .selector {
+    height: 100%;
+    display: inline-flex;
+
+    &.active {
+      ::v-deep(.dropdown-container) {
+        button {
+          color: $default-hover-fg;
+        }
+      }
+    }
+  }
+
+  ::v-deep(.dropdown-container) {
+    height: 100%;
+    display: flex;
+
+    button {
+      height: 100%;
+      background: $default-bg-2;
+      border: 0;
+      padding: 0.5em;
+
+      &:hover {
+        color: $default-hover-fg;
+      }
+    }
+
+    .item {
+      padding: 0.5em 4em 0.5em 0.5em;
+      border: 0;
+      box-shadow: none;
+
+      &.selected {
+        font-weight: bold;
+        background: #ffffff00;
+      }
+
+      &:hover {
+        background: $hover-bg;
+      }
+    }
+  }
+}
+</style>

platypush/backend/http/webapp/src/components/panels/Entities/Switch.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="switch">
+    <div class="col-10 label">
+      <div class="name" v-text="value.name" />
+    </div>
+
+    <div class="col-2 switch pull-right">
+      <ToggleSwitch :value="value.state" @input="toggle" />
+    </div>
+  </div>
+</template>
+
+<script>
+import ToggleSwitch from "@/components/elements/ToggleSwitch"
+import Utils from "@/Utils"
+
+export default {
+  name: 'Switch',
+  components: {ToggleSwitch},
+  emits: ['input'],
+  mixins: [Utils],
+  props: {
+    value: {
+      type: Object,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      component: null,
+    }
+  },
+
+  methods: {
+    async toggle() {
+      const response = await this.request('entities.execute', {
+        id: this.value.id,
+        action: 'toggle',
+      })
+
+      this.$emit('input', {
+        ...this.value,
+        state: response.on,
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+@import "vars";
+</style>

platypush/backend/http/webapp/src/components/panels/Entities/meta.json

@@ -0,0 +1,33 @@
+{
+  "entity": {
+    "name": "Entity",
+    "name_plural": "Entities",
+    "icon": {
+      "class": "fas fa-circle-question"
+    }
+  },
+
+  "device": {
+    "name": "Device",
+    "name_plural": "Devices",
+    "icon": {
+      "class": "fas fa-gear"
+    }
+  },
+
+  "switch": {
+    "name": "Switch",
+    "name_plural": "Switches",
+    "icon": {
+      "class": "fas fa-toggle-on"
+    }
+  },
+
+  "light": {
+    "name": "Light",
+    "name_plural": "Lights",
+    "icon": {
+      "class": "fas fa-lightbulb"
+    }
+  }
+}

platypush/backend/http/webapp/src/components/panels/Entities/vars.scss

@@ -0,0 +1,2 @@
+$main-margin: 1em;
+$selector-height: 2.5em;

platypush/backend/http/webapp/src/style/items.scss

@@ -1,3 +1,5 @@
+$header-height: 3.5em;
+
 .item {
   display: flex;
   align-items: center;

platypush/backend/http/webapp/src/style/themes/light.scss

@@ -10,6 +10,7 @@ $default-bg-7: #e4e4e4 !default;
 $default-fg: black !default;
 $default-fg-2: #23513a !default;
 $default-fg-3: #195331b3 !default;
+$header-bg: linear-gradient(0deg, #c0e8e4, #e4f8f4) !default;
 
 //// Notifications
 $notification-bg: rgba(185, 255, 193, 0.9) !default;
@@ -51,6 +52,8 @@ $border-shadow-bottom: 0 3px 2px -1px $default-shadow-color;
 $border-shadow-left: -2.5px 0 4px 0 $default-shadow-color;
 $border-shadow-right: 2.5px 0 4px 0 $default-shadow-color;
 $border-shadow-bottom-right: 2.5px 2.5px 3px 0 $default-shadow-color;
+$header-shadow: 0px 1px 3px 1px #bbb !default;
+$group-shadow: 3px -2px 6px 1px #98b0a0;
 
 //// Modals
 $modal-header-bg: #e0e0e0 !default;
@@ -141,5 +144,5 @@ $dropdown-shadow: 1px 1px 1px #bbb !default;
 //// Scrollbars
 $scrollbar-track-bg: $slider-bg !default;
 $scrollbar-track-shadow: inset 1px 0px 3px 0 $slider-track-shadow !default;
-$scrollbar-thumb-bg: #50ca80 !default;
+$scrollbar-thumb-bg: #a5a2a2 !default;
 

platypush/backend/http/webapp/src/views/Panel.vue

@@ -90,7 +90,7 @@ export default {
 
     initializeDefaultViews() {
       this.plugins.execute = {}
-      this.plugins.switches = {}
+      this.plugins.entities = {}
     },
   },