config data to local storage, notifications
config data to local storage, notifications

--- a/assets/js/iotcc.js
+++ b/assets/js/iotcc.js
@@ -21,31 +21,33 @@
     mqttConfig: {},
     mqttClient: null,
     templates : [],
-    setConfig: function(mqttConfig) {
-        this.mqttConfig = Object.assign(this.mqttDefaultConfig, mqttConfig);
-    },
-    getConfig: function() {
-        return this.mqttConfig;
-    },
     init: function(mqttConfig) {
-        if ((typeof(window['mqttConfig']) == 'undefined')) {
-            console.log ('mqttConfig is not defined in config.js. see config.sample.js');
+        if (typeof jQuery == 'undefined') {
+            this.showNotification('jQuery', 'IoT Control Center requires jQuery', 'dashboard', 'danger');
+            logger.log ('IoT Control center requires jQuery');
             return;
-        } else if (typeof jQuery == 'undefined') {
-            console.log ('IoT Control center requires jQuery');
+        }
+        var config = this.getConfig();
+        if (typeof config == 'undefined') {
+            this.showNotification('MQTT connection data', 'Please set the MQTT connection data in Settings', 'dashboard', 'danger');
+            logger.log ('MQTT conection data is not set');
             return;
         }
-        this.setConfig(mqttConfig);
+        // TODO: check for localStorage object
+        this.mqttConfig = Object.assign(this.mqttDefaultConfig, config);
+
+        this.showNotification('Connecting to MQTT server', 'Trying to connect to ' + this.mqttConfig.host + ':' + this.mqttConfig.port, 'dashboard', 'info');
 
         this.mqttClient = mqtt.connect('ws' + (this.mqttConfig.secure==true?'s':'') + '://' + this.mqttConfig.host + ':' + this.mqttConfig.port, this.mqttConfig);
 
         this.mqttClient.on('error', function (err) {
-            console.log(err);
+            logger.log('Error' + err);
             iotCC.mqttClient.end();
         });
 
         this.mqttClient.on('connect', function () {
-            if (iotCC.mqttConfig.debug) console.log('client connected:' + iotCC.mqttConfig.clientId);
+            if (iotCC.mqttConfig.debug) logger.log('client connected:' + iotCC.mqttConfig.clientId);
+            iotCC.showNotification('Connected to MQTT server' + iotCC.mqttConfig.host + ':' + iotCC.mqttConfig.port, 'Waiting to receive data from devices.', 'dashboard', 'info');
         });
 
         this.mqttClient.subscribe('/iotcc/+/+/config', {qos: 1});
@@ -57,8 +59,8 @@
                 try {
                     window[iotCCInitEvents[i]](this);
                 } catch (err) {
-                    console.log (iotCCInitEvents[i] + 'is not defined');
-                    console.log (err);
+                    logger.log (iotCCInitEvents[i] + 'is not defined');
+                    logger.log (err);
                 }
             }
         }
@@ -71,16 +73,16 @@
             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);
+                logger.log ('There was a problem decoding the JSON message:\n\t' + message.toString());
+                logger.log (err);
                 return;
             }
             var topicPath = topic.split('/'),
             widgetId = iotCC.formatTopic(topic),
             widget, html;
-
+            $('.notification-dashboard').addClass('hide');
             if (iotCC.mqttConfig.debug) {
-                console.log('Received Topic:= ' + topic + '\n\tMessage:= ' + message.toString());
+                logger.log('Received Topic:= ' + topic + '\n\tMessage:= ' + message.toString());
             }
 
             if (topicPath[4] == 'config') {
@@ -147,15 +149,15 @@
                     try {
                         window[iotCCMessageEvents[i]](this, topic, topicPath, json);
                     } catch (err) {
-                        console.log (iotCCMessageEvents[i] + 'is not defined');
-                        console.log (err);
+                        logger.log (iotCCMessageEvents[i] + 'is not defined');
+                        logger.log (err);
                     }
                 }
             }
         });
 
-        iotCC.mqttClient.on('close', function () {
-            console.log(mqttConfig.clientId + ' disconnected');
+        this.mqttClient.on('close', function () {
+            logger.log(iotCC.mqttConfig.clientId + ' disconnected');
         });
     },
     formatTopic: function(topic) {
@@ -192,11 +194,12 @@
         }).appendTo('div[data-page="' + json.pageId + '"]');
     },
     addPage: function(page) {
+        $('label').filter('[data-pagination="0"]').parent().removeClass('hide');
         if ($('div').filter('[data-page="' + page.pageId + '"]').exists() == false) {
             if ($('label').filter('[data-pagination="0"]').find('input').prop('checked') == true) {
-                var html = '<div class="row" data-page="' + page.pageId + '"></div>';
+                var html = '<div class="row page" data-page="' + page.pageId + '"></div>';
             } else {
-                var html = '<div class="row hide" data-page="' + page.pageId + '"></div>';
+                var html = '<div class="row page hide" data-page="' + page.pageId + '"></div>';
             }
             $('section.content').filter('[data-section="dashboard"]').append(html);
         }
@@ -211,8 +214,8 @@
             $('.pagination').append(html);
             $('label').filter('[data-pagination="' + page.pageId + '"]').click(function(e){
                 var pageId = $(this).data('pagination');
-                $('div.row').addClass('hide');
-                $('div.row').filter('[data-page="' + pageId + '"]').removeClass('hide');
+                $('div.page').addClass('hide');
+                $('div.page').filter('[data-page="' + pageId + '"]').removeClass('hide');
             });
         }
     },
@@ -246,11 +249,56 @@
         this.mqttClient.publish('/iotcc/outdoorlights4/device', '{"name":"Outdoor lighting 4","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
         this.mqttClient.publish('/iotcc/outdoorlights4/house3/config', '{"id":"302", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House sides", "topic":"/iotcc/outdoorlights/house3", "template": "template-1", "icon": "ion-ios-home", "bgcolor": "bg-orange", "order": 30}', {qos: 1, retained: false});
     },
+    saveConfig: function() {
+        var config = {
+            'clientId': $('#mqttClientId').val(),
+            'host': $('#mqttHost').val(),
+            'port': $('#mqttPort').val(),
+            'username': $('#mqttUser').val(),
+            'password': $('#mqttPass').val(),
+            'secure': $('#mqttSecure').prop('checked'),
+            'debug': $('#mqttDebug').prop('checked'),
+            'simulateDevices': $('#mqttSimulateDevices').prop('checked'),
+        };
+
+        try {
+            localStorage.setItem('mqttConfig', JSON.stringify(config));
+            iotCC.showNotification('MQTT connection data', 'Data saved succesfully', 'settings', 'info', 3);
+        } catch(ex) {
+            iotCC.showNotification('MQTT connection data', 'Cannot save data to local storage', 'settings', 'danger', 5);
+        }
+    },
+    getConfig: function() {
+        try {
+            var config = JSON.parse(localStorage.getItem('mqttConfig'));
+            $('#mqttClientId').val(config.clientId);
+            $('#mqttHost').val(config.host);
+            $('#mqttPort').val(config.port);
+            $('#mqttUser').val(config.username);
+            $('#mqttPass').val(config.password);
+            $('#mqttSecure').prop('checked', config.secure);
+            $('#mqttDebug').prop('checked', config.debug);
+            $('#mqttSimulateDevices').prop('checked', config.simulateDevices);
+        } catch(ex){
+            return;
+        }
+        return config;
+    },
+    showNotification: function(title, content, section, cls, timer) {
+        $('div.notification-' + section).removeClass('hide').addClass('callout-' + cls);
+        $('div.notification-' + section).find('span').html(content);
+        $('div.notification-' + section).find('h4').html(title);
+        if (timer != undefined) {
+            setTimeout(function(){
+                $('div.notification-' + section).addClass('hide');
+            }, timer * 1000)
+        }
+    }
 }
 
 jQuery.fn.exists = function(){return ($(this).length > 0);}
  $(document).ready(function(){
-    iotCC.init(mqttConfig);
+    iotCC.init();
 
     $('.navigation').click(function(e){
         e.preventDefault();
@@ -260,18 +308,20 @@
         $('section.content,section.content-header').addClass('hide');
         $('section.content,section.content-header').filter('[data-section="' + section + '"]').removeClass('hide');
     });
+
     $('label').filter('[data-pagination="0"]').click(function(e){
-        $('div.row').removeClass('hide');
+         $('div.page').removeClass('hide');
+    });
+
+    $('#saveMqttConfig').click(function(e){
+        e.preventDefault();
+        iotCC.saveConfig();
     });
 });
 
 // custom console
-console = new Object();
-console.log = function(log) {
+logger = new Object();
+logger.log = function(log) {
     $('.console').prepend(log + '<br />');
 };
-console.debug = console.log;
-console.info = console.log;
-console.warn = console.log;
-console.error = console.log;
-
+

file:a/config.sample.js (deleted)
--- a/config.sample.js
+++ /dev/null
@@ -1,7 +1,1 @@
-var mqttConfig = {}
-mqttConfig.clientId = '';
-mqttConfig.host = '';
-mqttConfig.port = '';
-mqttConfig.user = '';
-mqttConfig.pass = '';
-mqttConfig.secure = 0;
+

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -78,17 +78,6 @@
         <ol class="breadcrumb">
             <li class="active"><i class="fa fa-dashboard"></i> Dashboard</li>
         </ol>
-        <div class="">
-          <div class="tab-bar tab-bar--top tab-bar--material pagination">
-            <label class="tab-bar__item tab-bar--material__item" data-pagination="0">
-              <input type="radio" name="tab-bar-material-a" checked="checked">
-              <button class="tab-bar__button tab-bar--material__button">
-                <i class="tab-bar__icon tab-bar--material__icon ion-drag"></i>
-                <div class="tab-bar__label tab-bar--material__label">All</div>
-              </button>
-            </label>
-          </div>
-        </div>
     </section>
 
     <section class="content-header hide" data-section="settings">
@@ -108,11 +97,98 @@
     <!-- Dashboard content -->
     <section class="content" data-section="dashboard">
 
+        <div class="row">
+          <div class="col-md-12">
+            <div class="tab-bar tab-bar--top tab-bar--material pagination hide">
+              <label class="tab-bar__item tab-bar--material__item" data-pagination="0">
+                <input type="radio" name="tab-bar-material-a" checked="checked">
+                <button class="tab-bar__button tab-bar--material__button">
+                  <i class="tab-bar__icon tab-bar--material__icon ion-drag"></i>
+                  <div class="tab-bar__label tab-bar--material__label">All</div>
+                </button>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-md-12">
+            <div class="callout notification-dashboard hide">
+              <h4></h4>
+              <span></span>
+            </div>
+          </div>
+        </div>
+
     </section>
 
     <!-- Settings content -->
     <section class="content hide" data-section="settings">
 
+      <div class="row">
+        <div class="col-md-12">
+          <div class="callout notification-settings hide">
+            <h4></h4>
+            <span></span>
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-12">
+          <div class="box box-primary">
+            <div class="box-header with-border">
+              <h3 class="box-title">MQTT connection data</h3>
+            </div>
+            <!-- /.box-header -->
+            <!-- form start -->
+            <form id="mqttConfig">
+              <div class="box-body">
+                <div class="form-group">
+                  <label for="mqttClientId">Client ID</label>
+                  <input type="text" class="form-control" id="mqttClientId" name="mqttClientId" placeholder="Client ID" />
+                </div>
+                <div class="form-group">
+                  <label for="mqttHost">Host</label>
+                  <input type="text" class="form-control" id="mqttHost" name="mqttHost" placeholder="Host" />
+                </div>
+                <div class="form-group">
+                  <label for="mqttHost">Port</label>
+                  <input type="text" class="form-control" id="mqttPort" name="mqttPort" placeholder="Port" />
+                </div>
+                <div class="form-group">
+                  <label for="mqttUser">Username</label>
+                  <input type="text" class="form-control" id="mqttUser" name="mqttUser" placeholder="Username" />
+                </div>
+                <div class="form-group">
+                  <label for="mqttPass">Password</label>
+                  <input type="text" class="form-control" id="mqttPass" name="mqttPass" placeholder="Password" />
+                </div>
+                <div class="checkbox">
+                  <label for="mqttSecure">
+                    <input type="checkbox" id="mqttSecure" name="mqttSecure" /> Secure
+                  </label>
+                </div>
+                <div class="checkbox">
+                  <label for="mqttDebug">
+                    <input type="checkbox" id="mqttDebug" name="mqttDebug" /> Debug
+                  </label>
+                </div>
+                <div class="checkbox">
+                  <label for="mqttSimulateDevices">
+                    <input type="checkbox" id="mqttSimulateDevices" name="mqttSimulateDevices" /> Simulate devices
+                  </label>
+                </div>
+              </div>
+              <!-- /.box-body -->
+
+              <div class="box-footer">
+                <button type="submit" class="btn btn-primary" id="saveMqttConfig">Save</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
     </section>
     <!-- /.content -->
 

comments