From cb44f864ccc4083fa6533da2936636d9eec88710 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <blacklight86@gmail.com>
Date: Mon, 9 Apr 2018 15:45:14 +0200
Subject: [PATCH] Added ZeroBorg plugin web UI for motors control

---
 .../backend/http/static/css/gpio.zeroborg.css |  9 +++
 .../backend/http/static/js/gpio.zeroborg.js   | 67 +++++++++++++++++++
 .../http/templates/plugins/gpio.zeroborg.html | 33 +++++++++
 3 files changed, 109 insertions(+)
 create mode 100644 platypush/backend/http/static/css/gpio.zeroborg.css
 create mode 100644 platypush/backend/http/static/js/gpio.zeroborg.js
 create mode 100644 platypush/backend/http/templates/plugins/gpio.zeroborg.html

diff --git a/platypush/backend/http/static/css/gpio.zeroborg.css b/platypush/backend/http/static/css/gpio.zeroborg.css
new file mode 100644
index 0000000000..57344a793d
--- /dev/null
+++ b/platypush/backend/http/static/css/gpio.zeroborg.css
@@ -0,0 +1,9 @@
+.zb-controls-container {
+    margin: auto;
+    width: 25%;
+}
+
+.zb-ctrl-btn.selected {
+    color: #78ff00 !important;
+}
+
diff --git a/platypush/backend/http/static/js/gpio.zeroborg.js b/platypush/backend/http/static/js/gpio.zeroborg.js
new file mode 100644
index 0000000000..1df5cd2bc6
--- /dev/null
+++ b/platypush/backend/http/static/js/gpio.zeroborg.js
@@ -0,0 +1,67 @@
+$(document).ready(function() {
+    var $container = $('#zb-container'),
+        $controlsContainer = $('.zb-controls-container');
+
+    var execute = function(request, onSuccess, onError, onComplete) {
+        request['target'] = 'localhost';
+        return $.ajax({
+            type: 'POST',
+            url: '/execute',
+            contentType: 'application/json',
+            dataType: 'json',
+            data: JSON.stringify(request),
+            complete: function() {
+                if (onComplete) {
+                    onComplete();
+                }
+            },
+            error: function(xhr, status, error) {
+                if (onError) {
+                    onError(xhr, status, error);
+                }
+            },
+            success: function(response, status, xhr) {
+                if (onSuccess) {
+                    onSuccess(response, status, xhr);
+                }
+            },
+            beforeSend: function(xhr) {
+                if (window.token) {
+                    xhr.setRequestHeader('X-Token', window.token);
+                }
+            },
+        });
+    };
+
+    var initBindings = function() {
+        $controlsContainer.on('mousedown touchstart', '.zb-ctrl-btn[data-direction]', function() {
+            console.log($(this).data('direction') + ' press start');
+
+            $(this).addClass('selected');
+            execute({
+                type: 'request',
+                action: 'gpio.zeroborg.drive',
+                args: {
+                    direction: $(this).data('direction')
+                }
+            });
+        });
+
+        $controlsContainer.on('mouseup touchend', '.zb-ctrl-btn[data-direction]', function() {
+            console.log($(this).data('direction') + ' press end');
+
+            $(this).removeClass('selected');
+            execute({
+                type: 'request',
+                action: 'gpio.zeroborg.stop',
+            });
+        });
+    };
+
+    var init = function() {
+        initBindings();
+    };
+
+    init();
+});
+
diff --git a/platypush/backend/http/templates/plugins/gpio.zeroborg.html b/platypush/backend/http/templates/plugins/gpio.zeroborg.html
new file mode 100644
index 0000000000..2f0a4cb3b8
--- /dev/null
+++ b/platypush/backend/http/templates/plugins/gpio.zeroborg.html
@@ -0,0 +1,33 @@
+<script type="text/javascript" src="{{ url_for('static', filename='js/gpio.zeroborg.js') }}"></script>
+<link rel="stylesheet" href="{{ url_for('static', filename='css/gpio.zeroborg.css') }}"></script>
+
+<div id="zb-container" class="row">
+    <div class="zb-controls-container">
+        <div class="row">
+            <div class="four columns">&nbsp;</div>
+            <button data-direction="up" class="zb-ctrl-btn four columns">
+                <i class="fa fa-sort-up"></i>
+            </button>
+            <div class="four columns">&nbsp;</div>
+        </div>
+
+        <div class="row">
+            <button data-direction="left" class="zb-ctrl-btn four columns">
+                <i class="fa fa-caret-left"></i>
+            </button>
+            <div class="four columns">&nbsp;</div>
+            <button data-direction="right" class="zb-ctrl-btn four columns">
+                <i class="fa fa-caret-right"></i>
+            </button>
+        </div>
+
+        <div class="row">
+            <div class="four columns">&nbsp;</div>
+            <button data-direction="down" class="zb-ctrl-btn four columns">
+                <i class="fa fa-sort-down"></i>
+            </button>
+            <div class="four columns">&nbsp;</div>
+        </div>
+    </div>
+</div>
+