Added VariableModal to set variables from the dashboard.

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

@@ -7,10 +7,12 @@
         <Selector :entity-groups="entityGroups" :value="selector" @input="selector = $event" />
       </div>
 
-      <div class="col-1 right">
+      <div class="col-1 actions-container right">
-        <button title="Refresh" @click="refresh">
+        <Dropdown title="Actions" icon-class="fas fa-ellipsis">
-          <i class="fa fa-sync-alt" />
+          <DropdownItem  icon-class="fa fa-sync-alt" text="Refresh" @click="refresh" />
-        </button>
+          <DropdownItem  icon-class="fa fa-square-root-variable"
+            text="Set Variable" @click="variableModalVisible = true" />
+        </Dropdown>
       </div>
     </header>
 
@@ -26,6 +28,7 @@
         v-if="modalEntityId && entities[modalEntityId]"
       />
 
+      <VariableModal :visible="variableModalVisible" @close="variableModalVisible = false" />
       <NoItems v-if="!Object.keys(displayGroups || {})?.length">No entities found</NoItems>
 
       <div class="groups-container" v-else>
@@ -75,6 +78,8 @@
 </template>
 
 <script>
+import Dropdown from "@/components/elements/Dropdown";
+import DropdownItem from "@/components/elements/DropdownItem";
 import Utils from "@/Utils"
 import Loading from "@/components/Loading";
 import Icon from "@/components/elements/Icon";
@@ -82,14 +87,25 @@ import NoItems from "@/components/elements/NoItems";
 import Entity from "./Entity.vue";
 import Selector from "./Selector.vue";
 import EntityModal from "./Modal"
+import VariableModal from "./VariableModal"
 import { bus } from "@/bus";
 import icons from '@/assets/icons.json'
 import meta from './meta.json'
 
 export default {
   name: "Entities",
-  components: {Loading, Icon, Entity, Selector, NoItems, EntityModal},
   mixins: [Utils],
+  components: {
+    Dropdown,
+    DropdownItem,
+    Entity,
+    EntityModal,
+    Icon,
+    Loading,
+    NoItems,
+    Selector,
+    VariableModal,
+  },
 
   props: {
     // Entity scan timeout in seconds
@@ -108,6 +124,7 @@ export default {
       entities: {},
       modalEntityId: null,
       modalVisible: false,
+      variableModalVisible: false,
       selector: {
         grouping: 'category',
         selectedEntities: {},
@@ -205,10 +222,10 @@ export default {
       const entities = (group ? group.entities : this.entities) || {}
       const args = {}
       if (group)
-        args.plugins = Object.keys(entities.reduce((obj, entity) => {
+        args.plugins = Object.values(entities).reduce((obj, entity) => {
           obj[entity.plugin] = true
           return obj
-        }, {}))
+        }, {})
 
       this.loadingEntities = Object.values(entities).reduce((obj, entity) => {
           if (this._shouldSkipLoading(entity))
@@ -419,12 +436,44 @@ export default {
       right: 0;
       text-align: right;
       margin-right: 0.5em;
-      padding-right: 0.5em;
+      padding-right: 0;
 
       button {
         padding: 0.5em 0;
       }
     }
+
+    :deep(.right) {
+      .dropdown-container {
+        .dropdown {
+          min-width: 10em;
+
+          .item {
+            box-shadow: none;
+
+            .text {
+              text-align: left;
+              margin-left: 0.75em;
+            }
+          }
+        }
+
+        button {
+          margin-right: 0;
+          text-align: center;
+          background: transparent;
+          border: 0;
+
+          &:hover {
+            color: $default-hover-fg;
+          }
+
+          i {
+            margin-left: 0.5em;
+          }
+        }
+      }
+    }
   }
 
   .groups-canvas {

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

@@ -0,0 +1,145 @@
+<template>
+  <Modal :visible="visible" title="Set Variable" ref="modal" @open="onOpen">
+    <div class="variable-modal-container">
+      <form @submit.prevent="setValue">
+        <div class="row">
+          <div class="col-s-12 col-m-4 label">
+            <label for="name">Variable Name</label>
+          </div>
+          <div class="col-s-12 col-m-8 value">
+            <input type="text" id="variable-name" v-model="varName"
+              placeholder="Variable Name" :disabled="loading" ref="varName" />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-s-12 col-m-4 label">
+            <label for="name">Variable Value</label>
+          </div>
+          <div class="col-s-12 col-m-8 value">
+            <input type="text" id="variable-value" v-model="varValue" ref="varValue"
+              placeholder="Variable Value" :disabled="loading" />
+          </div>
+        </div>
+
+        <div class="row button-container">
+          <button type="submit" title="Set" :disabled="loading">
+            <i class="fas fa-check" />
+          </button>
+        </div>
+      </form>
+    </div>
+  </Modal>
+</template>
+
+<script>
+import Modal from "@/components/Modal";
+import Utils from "@/Utils";
+
+export default {
+  name: "VariableModal",
+  components: {Modal},
+  mixins: [Utils],
+  emits: ['close'],
+  props: {
+    visible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      varName: null,
+      varValue: null,
+    };
+  },
+
+  methods: {
+    async clearValue() {
+      this.loading = true
+      try {
+        await this.request('variable.unset', {name: this.varName.trim()})
+      } finally {
+        this.loading = false
+      }
+    },
+
+    async setValue() {
+      const varName = this.varName.trim()
+      if (!varName?.length) {
+        this.notifyWarning('No variable name has been specified')
+      }
+
+      const value = this.varValue
+      if (!value?.length) {
+        await this.clearValue()
+      } else {
+        this.loading = true
+        try {
+          const args = {}
+          args[varName] = value
+          await this.request('variable.set', args)
+        } finally {
+          this.loading = false
+        }
+      }
+
+      this.$refs.varName.value = ''
+      this.$refs.varValue.value = ''
+      this.$refs.modal.close()
+    },
+
+    onOpen() {
+      this.$nextTick(() => {
+        this.$refs.varName.focus()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.variable-modal-container {
+  form {
+    padding: 1em 0;
+
+    label {
+      font-weight: bold;
+    }
+
+    .row {
+      padding: 0.25em 1em;
+      display: flex;
+      align-items: center;
+    }
+
+    .button-container {
+      display: flex;
+      justify-content: center;
+      margin-top: 0.5em;
+      margin-bottom: -0.75em;
+      padding-top: 0.5em;
+      border-top: 1px solid $border-color-1;
+
+      button {
+        min-width: 10em;
+        background: none;
+        border-radius: 1.5em;
+
+        &:hover {
+          background: $hover-bg;
+        }
+      }
+    }
+
+    @include from($tablet) {
+      .value {
+        text-align: right;
+      }
+    }
+  }
+}
+</style>