From 431dedf3eb0efc3bfad0dab6d45f8cd330077454 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 20 Mar 2023 01:28:12 +0100
Subject: [PATCH] BluetoothDevice moved to its own component, with device
 connect support.

---
 .../panels/Entities/BluetoothDevice.vue       | 74 ++++++++++++++++++-
 1 file changed, 73 insertions(+), 1 deletion(-)
 mode change 120000 => 100644 platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue b/platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue
deleted file mode 120000
index 792c7695..00000000
--- a/platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue
+++ /dev/null
@@ -1 +0,0 @@
-Device.vue
\ No newline at end of file
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue b/platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue
new file mode 100644
index 00000000..89d746fb
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/BluetoothDevice.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="entity device-container">
+    <div class="head">
+      <div class="col-1 icon">
+        <EntityIcon
+          :entity="value"
+          :loading="loading"
+          :error="error" />
+      </div>
+
+      <div class="col-2 connector">
+        <ToggleSwitch
+          :value="value.connected"
+          :disabled="loading" 
+          @input="connect"
+          @click.stop />
+      </div>
+
+      <div class="col-9 label">
+        <div class="name" v-text="value.name" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import EntityMixin from "./EntityMixin"
+import EntityIcon from "./EntityIcon"
+import ToggleSwitch from "@/components/elements/ToggleSwitch"
+
+export default {
+  name: 'BluetoothDevice',
+  components: {EntityIcon, ToggleSwitch},
+  mixins: [EntityMixin],
+
+  methods: {
+    async connect(event) {
+      event.stopPropagation()
+      this.$emit('loading', true)
+      const method = (
+        'bluetooth.' +
+        (this.value.connected ? 'disconnect' : 'connect')
+      )
+
+      try {
+        await this.request(method, {
+          device: this.value.address,
+        })
+      } finally {
+        this.$emit('loading', false)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "common";
+
+.device-container {
+  display: flex;
+  justify-content: center;
+
+  .icon {
+    margin-right: 1em;
+  }
+
+  .connector {
+    width: 4em;
+    margin: 0.25em 0 -0.25em 0.5em;
+  }
+}
+</style>