events, bugs
events, bugs

--- a/assets/js/iotcc.js
+++ b/assets/js/iotcc.js
@@ -10,7 +10,7 @@
     }
     class iotCC {
         constructor(mqttConfig) {
-            this.mqttConfig = {
+            var mqttDefaultConfig = {
                 keepalive: 10,
                 protocolId: 'MQTT',
                 protocolVersion: 4,
@@ -23,17 +23,20 @@
                     qos: 2,
                     retain: true
                 },
-                rejectUnauthorized: false
+                rejectUnauthorized: false,
+                secure: false,
+                simulateDevices: false,
+                debug: false,
             };
-            this.mqttConfig = Object.assign(mqttConfig, this.mqttConfig);
+            mqttConfig = Object.assign(mqttDefaultConfig, mqttConfig);
             this.init();
-            if (this.mqttConfig.simulateDevices) {
+            if (mqttConfig.simulateDevices) {
                 this.simulateDevices();
             }
         }
 
         init() {
-            var client = this.client = mqtt.connect('ws' + (this.mqttConfig.secure?'s':'') + '://' + this.mqttConfig.host + ':' + this.mqttConfig.port, this.mqttConfig);
+            var client = this.client = mqtt.connect('ws' + (mqttConfig.secure==true?'s':'') + '://' + mqttConfig.host + ':' + mqttConfig.port, mqttConfig);
 
             this.client.on('error', function (err) {
                 console.log(err);
@@ -41,60 +44,86 @@
             });
 
             this.client.on('connect', function () {
-                console.log('client connected:' + mqttConfig.clientId);
+                if (mqttConfig.debug) console.log('client connected:' + mqttConfig.clientId);
             });
 
             this.client.subscribe('/iotcc/+/+/config', {qos: 1});
             this.client.subscribe('/iotcc/+/+/data', {qos: 1});
             this.client.subscribe('/iotcc/+/device', {qos: 1});
 
+            if (typeof(window['iotCCInitEvents']) != 'undefined') {
+                for(var i in iotCCInitEvents) {
+                    try {
+                        window[iotCCInitEvents[i]](this);
+                    } catch (err) {
+                        console.log (iotCCInitEvents[i] + 'is not defined');
+                        console.log (err);
+                    }
+                }
+            }
+
             this.client.on('message', function (topic, message, packet) {
-                //console.log('Received Message:= ' + message.toString() + '\nOn topic:= ' + topic);
-                var topicPath = topic.split('/');
+                try {
+                    var json = JSON.parse(message.toString());
+                } catch(err){
+                    console.log ('There was a problem decoding the JSON message:\n\t' + message.toString());
+                    console.log (err);
+                    return;
+                }
+                var topicPath = topic.split('/'),
+                widgetId = iotCC.formatTopic(topic),
+                widget, html;
+
+                if (mqttConfig.debug) {
+                    console.log('Received Topic:= ' + topic + '\n\tMessage:= ' + message.toString());
+                }
+
                 if (topicPath[4] == 'config') {
-                    console.log('Received config:= ' + message.toString() + '\nOn topic:= ' + topic);
-                    var json = JSON.parse(message.toString());
-                    var widgetClass = iotCC.formatTopic(json.topic);
                     if (json.widget == 'toggle') {
-                        if ($('.' + widgetClass).exists() == false) {
-                            var html = '<label class="switch"><input type="checkbox" class="' + widgetClass + 'click switch__input" ' + (json.checked==true?'checked="checked" status="1"':'status="0"') + '><div class="switch__toggle"><div class="switch__handle"></div></div></label>';
-                            iotCC.addList(json, html, widgetClass);
-                            $('.' + widgetClass + 'click').click(function(){
-                                if ($(this).attr('checked')) {
-                                    $(this).removeAttr('checked').attr('status', 0);
+                        if ($('input[name="' + widgetId + '"]').exists() == false) {
+                            html = '<label class="switch"><input name="' + widgetId + '" data-status="' + (json.checked==true?'1':'0') + '" data-widget="toggle" type="checkbox" class="switch__input" ' + (json.checked==true?'checked="checked"':'') + '><div class="switch__toggle"><div class="switch__handle"></div></div></label>';
+                            iotCC.addList(json, html, widgetId);
+                            $('input[name="' + widgetId + '"]').click(function(){
+                                if ($(this).prop('checked') == true) {
+                                    $(this).data('status', 1);
+                                    client.publish(json.topic + '/data', '{"status":1}', {qos: 1, retained: false});
+                                } else {
+                                    $(this).data('status', 0);
                                     client.publish(json.topic + '/data', '{"status":0}', {qos: 1, retained: false});
-                                } else {
-                                    $(this).attr('checked', 'checked').attr('status', 1);
-                                    client.publish(json.topic + '/data', '{"status":1}', {qos: 1, retained: false});
                                 }
                             });
                         }
-                    } else if (json.widget == 'list') {
-                        var html = '';
-                        $(json.options).each(function(k,v){
-                            html += '<label class="radio-button radio-button--material ' + widgetClass + 'click" data-status="' + v.status + '"><input type="radio" class="radio-button__input radio-button--material__input" name="r" ' + (v.checked==true?'checked="checked"':'') + '><div class="radio-button__checkmark radio-button--material__checkmark"></div>'+ v.label +'</label>';
+                    } else if (json.widget == 'radios') {
+                        html = '';
+                        $(json.options).each(function(k, v) {
+                            html += '<label class="radio-button radio-button--material"><input name="' + widgetId + '" data-status="' + v.status + '" data-widget="radios" type="radio" class="radio-button__input radio-button--material__input" name="r" ' + (v.checked==true?'checked="checked"':'') + '><div class="radio-button__checkmark radio-button--material__checkmark"></div>'+ v.label +'</label>';
                         });
-                        if ($('.' + widgetClass).exists() == false) {
-                            iotCC.addList(json, html, widgetClass);
-                            $('.' + widgetClass + 'click').click(function(){
+                        if ($('input[name="' + widgetId + '"]').exists() == false) {
+                            iotCC.addList(json, html, widgetId);
+                            $('input[name="' + widgetId + '"]').click(function() {
                                 client.publish(json.topic + '/data', '{"status":"' + $(this).data('status') + '"}', {qos: 1, retained: false});
                             });
                         }
                     }
                 } else if (topicPath[4] == 'data') {
-                    console.log('Received data:= ' + message.toString() + '\nOn topic:= ' + topic);
-                    var json = JSON.parse(message.toString());
-                    var widgetClass = iotCC.formatTopic(topic);
-                    if ($('.' + widgetClass + 'click').filter('[data-status="' + json.status + '"]').exists() == true) {
-                        $('.' + widgetClass + 'click').find('input').removeAttr('checked');
-                        $('.' + widgetClass + 'click').filter('[data-status="' + json.status + '"]').find('input').attr('checked', 'checked');
-                    } else if ($('.' + widgetClass + 'click').exists() == true) {
-                        $('.' + widgetClass + 'click').attr('checked', 'checked');
+                    widget = $('input[name="' + widgetId + '"]').first().data('widget');
+                    if (widget == 'toggle') {
+                        if ($('input[name="' + widgetId + '"]').exists() == true) {
+                            if (json.status == 1) {
+                                $('input[name="' + widgetId + '"]').prop('checked', true);
+                                $('input[name="' + widgetId + '"]').data('status', 1);
+                            } else {
+                                $('input[name="' + widgetId + '"]').prop('checked', false);
+                                $('input[name="' + widgetId + '"]').data('status', 0);
+                            }
+                        }
+                    } else if (widget == 'radios') {
+                        if ($('input[name="' + widgetId + '"]').filter('[data-status="' + json.status + '"]').exists() == true) {
+                            $('input[name="' + widgetId + '"]').filter('[data-status="' + json.status + '"]').prop('checked', true);
+                        }
                     }
                 } else if (topicPath[3] == 'device') {
-                    console.log('Received device:= ' + message.toString() + '\nOn topic:= ' + topic);
-                    var json = JSON.parse(message.toString());
-                    $(json.pages).each(function(k,page){
+                    $(json.pages).each(function(k, page) {
                         if ($('label.page' + page.pageId).exists() == false) {
                             $('.pages').append(iotCC.addPage(page));
                             $('.page').click(function(){
@@ -104,6 +133,16 @@
                         }
                     });
                 }
+                if (typeof(window['iotCCMessageEvents']) != 'undefined') {
+                    for(var i in iotCCMessageEvents) {
+                        try {
+                            window[iotCCMessageEvents[i]](this, topic, topicPath, json, widgetId);
+                        } catch (err) {
+                            console.log (iotCCMessageEvents[i] + 'is not defined');
+                            console.log (err);
+                        }
+                    }
+                }
             });
 
             this.client.on('close', function () {
@@ -118,20 +157,20 @@
             this.client.publish('/iotcc/relays/toggle1/config', '{"id":"1", "page": "Page 1", "pageId": 10, "widget":"toggle", "label":"Relay 1", "topic":"/iotcc/relays/toggle1", "checked":true}', {qos: 1, retained: false});
             this.client.publish('/iotcc/relays/toggle2/config', '{"id":"2", "page": "Page 2", "pageId": 20, "widget":"toggle", "label":"Relay 2", "topic":"/iotcc/relays/toggle2"}', {qos: 1, retained: false});
 
-            //this.client.publish('/iotcc/relays1/device', '{"name":"2 relays","desc":"on a board", "pages" : [{"pageId" : 10, "pageName" : "Page 1"}, {"pageId" : 20, "pageName" : "Page 2"}]}', {qos: 1, retained: false});
-            //this.client.publish('/iotcc/relays1/toggle1/config', '{"id":"10", "page": "Page 1", "pageId": 10, "widget":"toggle", "descr":"Relay 1", "topic":"/iotcc/relays1/toggle1"}', {qos: 1, retained: false});
-            //this.client.publish('/iotcc/relays1/toggle2/config', '{"id":"11", "page": "Page 2", "pageId": 20, "widget":"toggle", "descr":"Relay 2", "topic":"/iotcc/relays1/toggle2"}', {qos: 1, retained: false});
-            //
-            this.client.publish('/iotcc/heater1/heater1/config', '{"id":"100", "page": "Page 1", "pageId": 10, "widget":"list", "label":"Header 1", "topic":"/iotcc/relays/heater1", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}]}', {qos: 1, retained: false});
+            this.client.publish('/iotcc/relays1/device', '{"name":"2 relays","desc":"on a board", "pages" : [{"pageId" : 10, "pageName" : "Page 1"}, {"pageId" : 20, "pageName" : "Page 2"}]}', {qos: 1, retained: false});
+            this.client.publish('/iotcc/relays1/toggle1/config', '{"id":"10", "page": "Page 1", "pageId": 10, "widget":"toggle", "label":"Relay 1", "topic":"/iotcc/relays1/toggle1"}', {qos: 1, retained: false});
+            this.client.publish('/iotcc/relays1/toggle2/config', '{"id":"11", "page": "Page 2", "pageId": 20, "widget":"toggle", "label":"Relay 2", "topic":"/iotcc/relays1/toggle2"}', {qos: 1, retained: false});
+
+            this.client.publish('/iotcc/heater1/heater/config', '{"id":"100", "page": "Page 1", "pageId": 10, "widget":"radios", "label":"Header 1", "topic":"/iotcc/heater1/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}]}', {qos: 1, retained: false});
         }
 
         static formatTopic(topic) {
-            return topic.replace(/\//gi, '_').replace(/:/gi, '_').replace('_data', '');
-        }
-
-        static addList(json, content, widgetClass) {
+            return topic.replace(/\//gi, '_').replace(/:/gi, '_').replace('_data', '').replace('_config', '');
+        }
+
+        static addList(json, content, widgetId) {
             var html = '';
-            html += '<ul class="list pag pag' + json.pageId +' ' + widgetClass +'">';
+            html += '<ul class="list pag pag' + json.pageId +' ' + widgetId +'">';
             html += '<li class="list__item">';
             html += '<div class="list__item__center">';
             html += json.label;

file:a/bower.json -> file:b/bower.json
--- a/bower.json
+++ b/bower.json
@@ -16,6 +16,7 @@
     "tests"
   ],
   "dependencies": {
+    "jquery": "^3.1.1",
     "onsenui": "^2.0.5"
   }
 }

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -3,14 +3,12 @@
 <head>
     <title>IoT Control Center</title>
     <script type="text/javascript" src="assets/js/mqtt.min.js"></script>
-    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
     <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
     <script type="text/javascript" src="config.js"></script>
     <script type="text/javascript" src="assets/js/iotcc.js"></script>
     <script type="text/javascript" src="bower_components/onsenui/js/onsenui.min.js"></script>
-    <script type="text/javascript" src="bower_components/onsenui/js/angular-onsenui.min.js"></script>
     <script>
-      ons.bootstrap();
+      //ons.bootstrap();
     </script>
 
     <link rel="stylesheet" href="bower_components/onsenui/css/onsenui.css"/>

comments