From b94764436de1e00437718b64eff099fb30783e6a Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Tue, 8 May 2018 09:59:43 +0200
Subject: [PATCH] Added WeMo switch plugin for web panel

---
 .../backend/http/static/css/switch.wemo.css   | 29 +++++++
 .../backend/http/static/js/switch.wemo.js     | 78 +++++++++++++++++++
 .../http/templates/plugins/switch.wemo.html   |  5 ++
 platypush/plugins/switch/wemo/__init__.py     | 11 +--
 4 files changed, 118 insertions(+), 5 deletions(-)
 create mode 100644 platypush/backend/http/static/css/switch.wemo.css
 create mode 100644 platypush/backend/http/static/js/switch.wemo.js
 create mode 100644 platypush/backend/http/templates/plugins/switch.wemo.html

diff --git a/platypush/backend/http/static/css/switch.wemo.css b/platypush/backend/http/static/css/switch.wemo.css
new file mode 100644
index 0000000000..ba849c87ac
--- /dev/null
+++ b/platypush/backend/http/static/css/switch.wemo.css
@@ -0,0 +1,29 @@
+#wemo-container {
+    background-color: #f8f8f8;
+    padding: 12px;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 400;
+    line-height: 38px;
+    letter-spacing: .1rem;
+}
+
+.wemo-device {
+    padding: 1.5em 1em .2em .5em;
+    border-radius: 10px;
+}
+
+    .wemo-device:nth-of-type(odd) {
+        background-color: #ececec;
+    }
+
+    .wemo-device:hover {
+        background-color: #daf8e2 !important;
+    }
+
+.toggle-container {
+    text-align: right;
+    padding-right: 1em;
+}
+
diff --git a/platypush/backend/http/static/js/switch.wemo.js b/platypush/backend/http/static/js/switch.wemo.js
new file mode 100644
index 0000000000..693eb710bd
--- /dev/null
+++ b/platypush/backend/http/static/js/switch.wemo.js
@@ -0,0 +1,78 @@
+$(document).ready(function() {
+    var switches,
+        $wemoContainer = $('#wemo-container');
+
+    var createPowerToggleElement = function(dev) {
+        var $powerToggle = $('<div></div>').addClass('toggle toggle--push switch-ctrl-container');
+        var $input = $('<input></input>').attr('type', 'checkbox')
+            .attr('name', dev.name).addClass('toggle--checkbox switch-ctrl');
+
+        var $label = $('<label></label>').attr('for', id).addClass('toggle--btn');
+
+        $input.appendTo($powerToggle);
+        $label.appendTo($powerToggle);
+
+        if (dev.state == 1) {
+            $input.prop('checked', true);
+        }
+
+        return $powerToggle;
+    };
+
+    var updateDevices = function(devices) {
+        for (var dev of devices) {
+            var $dev = $('<div></div>').addClass('row wemo-device').data('name', dev.name);
+            var $devName = $('<div></div>').addClass('ten columns name').text(dev.name);
+            var $toggleContainer = $('<div></div>').addClass('two columns toggle-container');
+            var $toggle = createPowerToggleElement(dev);
+
+            $toggle.appendTo($toggleContainer);
+            $devName.appendTo($dev);
+            $toggleContainer.appendTo($dev);
+            $dev.appendTo($wemoContainer);
+        }
+    };
+
+    var initWidget = function() {
+        execute(
+            {
+                type: 'request',
+                action: 'switch.wemo.get_devices'
+            },
+
+            onSuccess = function(response) {
+                updateDevices(response.response.output.devices);
+            }
+        );
+    };
+
+    var initBindings = function() {
+        $wemoContainer.on('click touch', '.switch-ctrl-container', function() {
+            var $input = $(this).find('.switch-ctrl');
+            var devName = $input.attr('name');
+
+            execute(
+                {
+                    type: 'request',
+                    action: 'switch.wemo.toggle',
+                    args: {
+                        device: devName
+                    }
+                },
+
+                onSuccess = function(response) {
+                    var state = response.response.output.state;
+                    $input.prop('checked', !!state);
+                }
+            );
+        });
+    };
+
+    var init = function() {
+        initWidget();
+        initBindings();
+    };
+
+    init();
+});
+
diff --git a/platypush/backend/http/templates/plugins/switch.wemo.html b/platypush/backend/http/templates/plugins/switch.wemo.html
new file mode 100644
index 0000000000..94b5754f8a
--- /dev/null
+++ b/platypush/backend/http/templates/plugins/switch.wemo.html
@@ -0,0 +1,5 @@
+<script type="text/javascript" src="{{ url_for('static', filename='js/switch.wemo.js') }}"></script>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/switch.wemo.css') }}"></script>
+
+<div id="wemo-container" class="row"></div>
+
diff --git a/platypush/plugins/switch/wemo/__init__.py b/platypush/plugins/switch/wemo/__init__.py
index 8608630f72..28164ef04d 100644
--- a/platypush/plugins/switch/wemo/__init__.py
+++ b/platypush/plugins/switch/wemo/__init__.py
@@ -7,8 +7,8 @@ from platypush.message.response import Response
 from .. import SwitchPlugin
 
 class SwitchWemoPlugin(SwitchPlugin):
-    def __init__(self, discovery_seconds=3):
-        super().__init__()
+    def __init__(self, discovery_seconds=3, *args, **kwargs):
+        super().__init__(*args, **kwargs)
 
         self.discovery_seconds=discovery_seconds
         self.env = Environment()
@@ -23,15 +23,16 @@ class SwitchWemoPlugin(SwitchPlugin):
     def get_devices(self):
         self.refresh_devices()
         return Response(
-            output = { 'devices': {
-                name: {
+            output = { 'devices': [
+                {
                     'host': dev.host,
+                    'name': dev.name,
                     'state': dev.get_state(),
                     'model': dev.model,
                     'serialnumber': dev.serialnumber,
                 }
                 for (name, dev) in self.devices.items()
-            } }
+            ] }
         )
 
     def _exec(self, method, device, *args, **kwargs):