From 38c87ef39f3dcf6c4d35d39701f75fc88cafd84d Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 29 Apr 2023 11:37:21 +0200
Subject: [PATCH] Added frontend component for the `Variable` entity.

---
 .../backend/http/webapp/src/assets/icons.json |   3 +
 .../components/panels/Entities/Variable.vue   | 108 ++++++++++++++++++
 .../src/components/panels/Entities/meta.json  |   8 ++
 3 files changed, 119 insertions(+)
 create mode 100644 platypush/backend/http/webapp/src/components/panels/Entities/Variable.vue

diff --git a/platypush/backend/http/webapp/src/assets/icons.json b/platypush/backend/http/webapp/src/assets/icons.json
index 5f5350887..a0594746c 100644
--- a/platypush/backend/http/webapp/src/assets/icons.json
+++ b/platypush/backend/http/webapp/src/assets/icons.json
@@ -125,6 +125,9 @@
   "tv.samsung.ws": {
     "class": "fas fa-tv"
   },
+  "variable": {
+    "class": "fas fa-square-root-variable"
+  },
   "zigbee.mqtt": {
     "imgUrl": "/icons/zigbee.svg"
   },
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Variable.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Variable.vue
new file mode 100644
index 000000000..744ed1acf
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Variable.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="entity variable-container" v-if="value.value != null">
+    <div class="head" :class="{collapsed: collapsed}">
+      <div class="col-1 icon">
+        <EntityIcon :entity="value" :loading="loading" :error="error" />
+      </div>
+
+      <div class="col-s-6 col-m-7 label">
+        <div class="name" v-text="value.name" />
+      </div>
+
+      <div class="col-s-4 col-m-3 value-container" @click.stop="collapsed = !collapsed">
+        <span class="value" v-text="value.value" v-if="value?.value != null" />
+      </div>
+
+      <div class="col-1 collapse-toggler" @click.stop="collapsed = !collapsed">
+        <i class="fas" :class="{'fa-chevron-down': collapsed, 'fa-chevron-up': !collapsed}" />
+      </div>
+    </div>
+
+    <div class="body" v-if="!collapsed" @click.stop="prevent">
+      <div class="row">
+        <form @submit.prevent="setValue">
+          <div class="row">
+            <div class="col-9">
+              <input type="text" :value="value.value" placeholder="Variable value" :disabled="loading" ref="text" />
+            </div>
+            <div class="col-3 pull-right">
+              <button type="button" title="Clear" @click.stop="clearValue" :disabled="loading">
+                <i class="fas fa-trash" />
+              </button>
+              <button type="submit" title="Edit" :disabled="loading">
+                <i class="fas fa-check" />
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EntityMixin from "./EntityMixin"
+import EntityIcon from "./EntityIcon"
+
+export default {
+  name: 'Variable',
+  components: {EntityIcon},
+  mixins: [EntityMixin],
+  data: function() {
+    return {
+      collapsed: true,
+    }
+  },
+
+  computed: {
+    isCollapsed() {
+      return this.collapsed
+    },
+  },
+
+  methods: {
+    async clearValue() {
+      this.$emit('loading', true)
+      try {
+        await this.request('variable.unset', {name: this.value.name})
+      } finally {
+        this.$emit('loading', false)
+      }
+    },
+
+    async setValue() {
+      const value = this.$refs.text.value
+      if (!value?.length)
+        return await this.clearValue()
+
+      this.$emit('loading', true)
+      try {
+        const args = {}
+        args[this.value.name] = value
+        await this.request('variable.set', args)
+      } finally {
+        this.$emit('loading', false)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.head .value-container {
+  text-align: right;
+}
+
+form {
+  width: 100%;
+
+  .row {
+    width: 100%;
+    input[type=text] {
+      width: 100%;
+    }
+  }
+}
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/meta.json b/platypush/backend/http/webapp/src/components/panels/Entities/meta.json
index d0c504a62..41a050a03 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/meta.json
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/meta.json
@@ -343,6 +343,14 @@
     }
   },
 
+  "variable": {
+    "name": "Variable",
+    "name_plural": "Variables",
+    "icon": {
+      "class": "fas fa-square-root-variable"
+    }
+  },
+
   "voltage_sensor": {
     "name": "Sensor",
     "name_plural": "Sensors",