page order
page order

 Binary files /dev/null and b/assets/images/mqtt-off.png differ
 Binary files /dev/null and b/assets/images/mqtt-on.png differ
--- a/assets/js/iotcc.js
+++ b/assets/js/iotcc.js
@@ -216,15 +216,15 @@
             //$(section).find('div[data-page="' + json.pageId + '"]').append('<div class="clearfix visible-sm-block" data-order="' + json.order + '"></div>');
         }
 
-        $(section).find('div[data-page="' + json.pageId + '"]').append(html);
+        $(section).find('div.page[data-page="' + json.pageId + '"]').append(html);
         if (json.callback != undefined) {
             $(json.selector + '[name="' + json.widgetId + '"]').click(json.callback);
         }
-        $(section).find('div[data-page="' + json.pageId + '"]').find('div.widgetcontainer').sort(function(a,b) {
+        $(section).find('div.page[data-page="' + json.pageId + '"]').find('div.widgetcontainer').sort(function(a,b) {
              return $(a).data('order') > $(b).data('order');
-        }).appendTo('div[data-page="' + json.pageId + '"]');
-        $(section).find('div[data-page="' + json.pageId + '"]').find('div.visible-sm-block').remove();
-        $(section).find('div[data-page="' + json.pageId + '"]').find('div.widgetcontainer').each(function(k,v){
+        }).appendTo('div.page[data-page="' + json.pageId + '"]');
+        $(section).find('div.page[data-page="' + json.pageId + '"]').find('div.visible-sm-block').remove();
+        $(section).find('div.page[data-page="' + json.pageId + '"]').find('div.widgetcontainer').each(function(k,v){
             if ((k+1)%2 == 0) {
                 $(v).after('<div class="clearfix visible-sm-block"></div>');
             }
@@ -234,12 +234,12 @@
         $('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 page" data-page="' + page.pageId + '"></div>';
+                var html = '<div class="row page" data-page="' + page.pageId + '" data-order="' + page.order + '"></div>';
             } else {
-                var html = '<div class="row page hide" data-page="' + page.pageId + '"></div>';
+                var html = '<div class="row page hide" data-page="' + page.pageId + '" data-order="' + page.order + '"></div>';
             }
             if (appOptions.pageContainer) {
-                var html2 = '<div class="box page {class}" data-pagecontainer="' + page.pageId + '">';
+                var html2 = '<div class="box pagecontainer {class}" data-page="' + page.pageId + '" data-order="' + page.order + '">';
                 html2 += '<div class="box-header with-border {class1}">';
                 html2 += '<h3 class="box-title {class2}">' + page.pageName + '</h3>';
                 if (page.icon) html2 += '<div class="box-tools pull-right ' + page.icon + '"></div>';
@@ -249,13 +249,19 @@
                 html2 += '</div>';
                 html2 += '</div>';
                 html2 = this.parseTemplate(page, html2);
-                $('section.content').filter('[data-section="dashboard"]').append(html2);
+                $('section.content[data-section="dashboard"]').append(html2);
+                $('section.content[data-section="dashboard"]').find('div.pagecontainer').sort(function(a,b) {
+                     return $(a).data('order') > $(b).data('order');
+                }).appendTo('section.content[data-section="dashboard"]');
             } else {
                 $('section.content').filter('[data-section="dashboard"]').append(html);
+                $('section.content').find('div.page').sort(function(a,b) {
+                     return $(a).data('order') > $(b).data('order');
+                }).appendTo('section.content[data-section="dashboard"]');
             }
         }
         if ($('div.pagination').find('label').filter('[data-pagination="' + page.pageId + '"]').exists() == false) {
-            var html = '<label class="tab-bar__item tab-bar--material__item" data-pagination="' + page.pageId + '">';
+            var html = '<label class="tab-bar__item tab-bar--material__item" data-pagination="' + page.pageId + '" data-order="' + page.order + '">';
             html += '<input type="radio" name="tab-bar-material-a">';
             html += '<button class="tab-bar__button tab-bar--material__button">';
             html += '<i class="tab-bar__icon tab-bar--material__icon ' + page.icon + '"></i>';
@@ -265,10 +271,17 @@
             $('.pagination').append(html);
             $('label').filter('[data-pagination="' + page.pageId + '"]').click(function(e){
                 var pageId = $(this).data('pagination');
-                $('div.page').addClass('hide');
-                $('div.page').filter('[data-page="' + pageId + '"]').removeClass('hide');
-                $('div.page').filter('[data-pagecontainer="' + pageId + '"]').removeClass('hide');
+                if (appOptions.pageContainer) {
+                    $('div.pagecontainer').addClass('hide');
+                    $('div.pagecontainer').filter('[data-page="' + pageId + '"]').removeClass('hide');
+                } else {
+                    $('div.page').addClass('hide');
+                    $('div.page').filter('[data-page="' + pageId + '"]').removeClass('hide');
+                }
             });
+            $('div.pagination').find('label').sort(function(a, b) {
+                 return $(a).data('order') > $(b).data('order');
+            }).appendTo('div.pagination');
         }
     },
     saveConfig: function() {
@@ -362,7 +375,11 @@
     });
 
     $('label').filter('[data-pagination="0"]').click(function(e){
-         $('div.page').removeClass('hide');
+        if (appOptions.pageContainer) {
+            $('div.pagecontainer').removeClass('hide');
+        } else {
+            $('div.page').removeClass('hide');
+        }
     });
 
     $('#saveMqttConfig').click(function(e){

--- a/assets/js/simulateDevices.js
+++ b/assets/js/simulateDevices.js
@@ -10,35 +10,35 @@
         return;
     }
     if (topicPath[2] == 'device') {
-        iotCC.mqttClient.publish('/iotcc/heater1/device', '{"name":"House heating 1","desc":"", "pages" : [{"pageId": 10, "pageName": "House heating", "icon": "ion-ios-home", "class1":"bg-blue"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/heater1/device', '{"name":"House heating 1","desc":"", "pages" : [{"pageId": 10, "pageName": "House heating", "icon": "ion-ios-home", "class1":"bg-blue", "order": "10"}]}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/heater1/heater/config', '{"pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Hollway Heater", "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"}], "template": "template-3", "icon": "ion-ios-home", "class": "bg-blue", "order": 40}', {qos: 1, retained: false});
 
-        iotCC.mqttClient.publish('/iotcc/heater2/device', '{"name":"House heating 2","desc":"", "pages" : [{"pageId": 10, "pageName": "House heating", "icon": "ion-ios-home", "class1":"bg-blue"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/heater2/device', '{"name":"House heating 2","desc":"", "pages" : [{"pageId": 10, "pageName": "House heating", "icon": "ion-ios-home", "class1":"bg-blue", "order": "10"}]}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/heater2/heater/config', '{"pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Kitchen Heater", "topic":"/iotcc/heater2/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "class": "bg-blue", "order": 30}', {qos: 1, retained: false});
 
-        iotCC.mqttClient.publish('/iotcc/heater3/device', '{"name":"House heating 3","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home", "class1":"bg-blue"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/heater3/device', '{"name":"House heating 3","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home", "class1":"bg-blue", "order": "10"}]}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/heater3/heater/config', '{"pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Bedroom Heater", "topic":"/iotcc/heater3/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "class": "bg-blue", "order": 10}', {qos: 1, retained: false});
 
-        iotCC.mqttClient.publish('/iotcc/heater4/device', '{"name":"House heating 4","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home", "class1":"bg-blue"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/heater4/device', '{"name":"House heating 4","desc":"", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home", "class1":"bg-blue", "order": "10"}]}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/heater4/heater/config', '{"pageName": "House heating", "pageId": 10, "widget":"radios", "title":"Living Heater", "topic":"/iotcc/heater4/heater", "options":[{"checked":true, "label": "Off", "status":"1"}, {"label": "Confort", "status":"2"}, {"label": "Anti freeze", "status":"3"}, {"label": "Confort -2", "status":"4"}], "template": "template-3", "icon": "ion-ios-home", "class": "bg-blue", "order": 20}', {qos: 1, retained: false});
 
-        iotCC.mqttClient.publish('/iotcc/dogsheating/device', '{"name":"Dogs heating","desc":"", "pages" : [{"pageId" : 20, "pageName" : "Dogs heating", "icon": "ion-ios-paw", "class1":"bg-green"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/dogsheating/device', '{"name":"Dogs heating","desc":"", "pages" : [{"pageId" : 20, "pageName" : "Dogs heating", "icon": "ion-ios-paw", "class1":"bg-green", "order": "40"}]}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/dogsheating/toggle1/config', '{"pageName": "Dogs heating", "pageId": 20, "widget":"toggle", "title":"Mara", "topic":"/iotcc/dogsheating/toggle1", "checked":true, "template": "template-1", "icon": "ion-ios-paw", "class": "bg-green", "order" : 10}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/dogsheating/toggle2/config', '{"pageName": "Dogs Heating", "pageId": 20, "widget":"toggle", "title":"Linda", "topic":"/iotcc/dogsheating/toggle2", "template": "template-1", "icon": "ion-ios-paw", "class": "bg-green", "order" : 20}', {qos: 1, retained: false});
 
-        iotCC.mqttClient.publish('/iotcc/outdoorlights1/device', '{"name":"Outdoor lighting 1","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home", "class1":"bg-orange"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/outdoorlights1/device', '{"name":"Outdoor lighting 1","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home", "class1":"bg-orange", "order": "20"}]}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/outdoorlights1/garage/config', '{"pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"Garage", "topic":"/iotcc/outdoorlights1/garage", "checked":true, "template": "template-1", "icon": "ion-model-s", "class": "bg-orange", "order": 40}', {qos: 1, retained: false});
 
-        iotCC.mqttClient.publish('/iotcc/outdoorlights2/device', '{"name":"Outdoor lighting 2","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home", "class1":"bg-green"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/outdoorlights2/device', '{"name":"Outdoor lighting 2","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home", "class1":"bg-green", "order": "20"}]}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/outdoorlights2/house1/config', '{"pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House front", "topic":"/iotcc/outdoorlights2/house1", "template": "template-1", "icon": "ion-ios-home", "class": "bg-orange", "order": 10}', {qos: 1, retained: false});
 
-        iotCC.mqttClient.publish('/iotcc/outdoorlights3/device', '{"name":"Outdoor lighting 3","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home", "class1":"bg-green"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/outdoorlights3/device', '{"name":"Outdoor lighting 3","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home", "class1":"bg-green", "order": "20"}]}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/outdoorlights3/house2/config', '{"pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House back", "topic":"/iotcc/outdoorlights3/house2", "template": "template-1", "icon": "ion-ios-home", "class": "bg-orange", "order": 20}', {qos: 1, retained: false});
 
-        iotCC.mqttClient.publish('/iotcc/outdoorlights4/device', '{"name":"Outdoor lighting 4","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home", "class1":"bg-green"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/outdoorlights4/device', '{"name":"Outdoor lighting 4","desc":"", "pages" : [{"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home", "class1":"bg-green", "order": "20"}]}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/outdoorlights4/house3/config', '{"pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House sides", "topic":"/iotcc/outdoorlights4/house3", "template": "template-1", "icon": "ion-ios-home", "class": "bg-orange", "order": 30}', {qos: 1, retained: false});
 
-        iotCC.mqttClient.publish('/iotcc/greenhouse/device', '{"name":"Greenhouse","desc":"", "pages" : [{"pageId" : 40, "pageName" : "Greenhouse", "icon": "ion-ios-home", "class1":"bg-green"}]}', {qos: 1, retained: false});
+        iotCC.mqttClient.publish('/iotcc/greenhouse/device', '{"name":"Greenhouse","desc":"", "pages" : [{"pageId" : 40, "pageName" : "Greenhouse", "icon": "ion-ios-home", "class1":"bg-green", "order": "30"}]}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/greenhouse/tempsensor1/config', '{"pageName": "Greenhouse", "pageId": 40, "widget":"data", "format":"int", "title":"Temp sensor 1", "topic":"/iotcc/greenhouse/tempsensor1", "value": "22", "valuedescription": "degrees C", "template": "template-1", "icon": "ion-ios-home", "class": "bg-green", "order": 30}', {qos: 1, retained: false});
         iotCC.mqttClient.publish('/iotcc/greenhouse/tempsensor1/data', '{"value":"' + (Math.floor(Math.random() * (10)) + 20) + '"}');
         iotCC.mqttClient.publish('/iotcc/greenhouse/heater/config', '{"pageName": "Greenhouse", "pageId": 40, "widget":"data-control", "format":"int", "title":"Heater", "topic":"/iotcc/greenhouse/heater", "value": "22", "valuedescription": "degrees C", "template": "template-3", "icon": "ion-ios-home", "class": "bg-green", "class2": "text-center", "order": 30}', {qos: 1, retained: false});

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -103,7 +103,7 @@
             <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">
+                        <label class="tab-bar__item tab-bar--material__item" data-pagination="0" data-order="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>

comments