more real simulated devices, added order to devices
more real simulated devices, added order to devices

--- a/assets/css/iotcc.css
+++ b/assets/css/iotcc.css
@@ -687,3 +687,244 @@
 .tab-bar--material__icon + .tab-bar--material__label {
   font-size: 10px;
 }
+
+.list__item__left {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding: 12px 14px 12px 0;
+  -webkit-box-ordinal-group: 1;
+  -webkit-order: 0;
+  -moz-box-ordinal-group: 1;
+  -ms-flex-order: 0;
+  order: 0;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  line-height: 1.2em;
+  min-height: 44px;
+}
+.list__item__left:empty {
+  width: 0;
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+}
+.list__item__center {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -moz-box-flex: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -moz-box-orient: horizontal;
+  -moz-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-ordinal-group: 2;
+  -webkit-order: 1;
+  -moz-box-ordinal-group: 2;
+  -ms-flex-order: 1;
+  order: 1;
+  margin-right: auto;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  margin-left: 0;
+  border-bottom: none;
+  -webkit-background-size: 100% 1px;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-image: -webkit-linear-gradient(90deg, #ccc, #ccc 100%);
+  background-image: -moz-linear-gradient(90deg, #ccc, #ccc 100%);
+  background-image: -o-linear-gradient(90deg, #ccc, #ccc 100%);
+  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
+  padding: 12px 6px 12px 0;
+  line-height: 1.2em;
+  min-height: 44px;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .list__item__center {
+    background-image: -webkit-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: -moz-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: -o-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
+  }
+}
+.list__item__right {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  margin-left: auto;
+  padding: 12px 12px 12px 0;
+  -webkit-box-ordinal-group: 3;
+  -webkit-order: 2;
+  -moz-box-ordinal-group: 3;
+  -ms-flex-order: 2;
+  order: 2;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-align-self: stretch;
+  -ms-flex-item-align: stretch;
+  align-self: stretch;
+  border-bottom: none;
+  -webkit-background-size: 100% 1px;
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+  background-image: -webkit-linear-gradient(90deg, #ccc, #ccc 100%);
+  background-image: -moz-linear-gradient(90deg, #ccc, #ccc 100%);
+  background-image: -o-linear-gradient(90deg, #ccc, #ccc 100%);
+  background-image: linear-gradient(0deg, #ccc, #ccc 100%);
+  line-height: 1.2em;
+  min-height: 44px;
+}
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+  .list__item__right {
+    background-image: -webkit-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: -moz-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: -o-linear-gradient(90deg, #ccc, #ccc 50%, transparent 50%);
+    background-image: linear-gradient(0deg, #ccc, #ccc 50%, transparent 50%);
+  }
+}
+.list__header {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: left;
+  display: block;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 20px 0 0 15px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #1f1f21;
+  text-shadow: none;
+  border-top: none;
+  border-bottom: 1px solid #ccc;
+  -webkit-box-shadow: 0px 1px 0px 0px #fff;
+  box-shadow: 0px 1px 0px 0px #fff;
+  min-height: 24px;
+  line-height: 24px;
+  margin-top: -1px;
+  text-transform: uppercase;
+  position: relative;
+}
+.list__header:not(:first-of-type) {
+  border-top: 1px solid #ccc;
+}
+.list {
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  line-height: normal;
+  cursor: default;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  font-family: -apple-system, 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-weight: 400;
+  font-size: 17px;
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  text-align: left;
+  overflow: auto;
+  display: block;
+  -webkit-overflow-scrolling: touch;
+  border-bottom: 1px solid #ccc;
+  overflow: hidden;
+}
+.list__item {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  position: relative;
+  list-style: none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: row;
+  -moz-box-orient: horizontal;
+  -moz-box-direction: normal;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-box-pack: start;
+  -webkit-justify-content: flex-start;
+  -moz-box-pack: start;
+  -ms-flex-pack: start;
+  justify-content: flex-start;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 0 0 14px;
+  margin: 1px 0 -1px 0;
+  color: #1f1f21;
+  background-color: #fff;
+}
+.list__item:first-child {
+  -webkit-box-shadow: inset 0px 1px 0px 0px #ccc;
+  box-shadow: inset 0px 1px 0px 0px #ccc;
+  margin-top: 0;
+}
+.list__item_active:active {
+  background-color: #d9d9d9;
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  transition: none;
+}
+

--- a/assets/js/iotcc.js
+++ b/assets/js/iotcc.js
@@ -161,19 +161,6 @@
             console.log(mqttConfig.clientId + ' disconnected');
         });
     },
-    simulateDevices: function() {
-        //this.client.subscribe('/iotcc/+/+/data', {qos: 1});
-        this.mqttClient.publish('/iotcc/' + mqttConfig.clientId + '/device', '{"command":"getDevice","param":""}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/relays/device', '{"name":"2 relays","desc":"on a board", "pages" : [{"pageId" : 10, "pageName" : "Page 1"}, {"pageId" : 20, "pageName" : "Page 2"}]}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/relays/toggle1/config', '{"id":"1", "page": "Page 1", "pageId": 10, "widget":"toggle", "title":"Relay 1", "topic":"/iotcc/relays/toggle1", "checked":true, "template": "info-box", "icon": "ion-toggle-filled"}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/relays/toggle2/config', '{"id":"2", "page": "Page 2", "pageId": 10, "widget":"toggle", "title":"Relay 2", "topic":"/iotcc/relays/toggle2", "template": "info-box", "icon": "ion-toggle-filled"}', {qos: 1, retained: false});
-
-        this.mqttClient.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.mqttClient.publish('/iotcc/relays1/toggle1/config', '{"id":"10", "page": "Page 1", "pageId": 20, "widget":"toggle", "title":"Relay 1", "topic":"/iotcc/relays1/toggle1", "template": "info-box", "icon": "ion-toggle-filled"}', {qos: 1, retained: false});
-        this.mqttClient.publish('/iotcc/relays1/toggle2/config', '{"id":"11", "page": "Page 2", "pageId": 20, "widget":"toggle", "title":"Relay 2", "topic":"/iotcc/relays1/toggle2", "template": "info-box", "icon": "ion-toggle-filled"}', {qos: 1, retained: false});
-
-        this.mqttClient.publish('/iotcc/heater1/heater/config', '{"id":"100", "page": "Page 1", "pageId": 20, "widget":"radios", "title":"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"}], "template": "info-box", "icon": "ion-levels"}', {qos: 1, retained: false});
-    },
     formatTopic: function(topic) {
         return topic.replace(/\//gi, '_').replace(/:/gi, '_').replace('_data', '').replace('_config', '');
     },
@@ -197,10 +184,13 @@
         if (widgets > 0 && widgets%2 == 0) {
             $(section).find('div[data-page="' + json.pageId + '"]').append('<div class="clearfix visible-sm-block"></div>');
         }
-        $(section).find('div[data-page="' + json.pageId + '"]').append('<div class="col-md-3 col-sm-6 col-xs-12 widgetcontainer">' + html + '</div>');
+        $(section).find('div[data-page="' + json.pageId + '"]').append(html);
         if (json.callback != undefined) {
             $('input[name="' + json.widgetId + '"]').click(json.callback);
         }
+        $(section).find('div[data-page="' + json.pageId + '"]').find('div.widgetcontainer').sort(function(a,b) {
+             return $(a).data('order') > $(b).data('order');
+        }).appendTo('div[data-page="' + json.pageId + '"]');
     },
     addTabPage: function(page){
         if ($('div.pagination').find('label').filter('[data-pagination="' + page.pageId + '"]').exists() == false) {
@@ -218,7 +208,24 @@
                 $('div.row').filter('[data-page="' + pageId + '"]').removeClass('hide');
             });
         }
-    }
+    },
+    simulateDevices: function() {
+        this.mqttClient.publish('/iotcc/' + mqttConfig.clientId + '/device', '{"command":"getDevice","param":""}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/relays/device', '{"name":"2 relays","desc":"on a board", "pages" : [{"pageId" : 10, "pageName" : "House heating", "icon": "ion-ios-home"}, {"pageId" : 20, "pageName" : "Dogs heating", "icon": "ion-ios-paw"}, {"pageId" : 30, "pageName" : "Outdoor Lights", "icon": "ion-ios-home"}]}', {qos: 1, retained: false});
+
+        this.mqttClient.publish('/iotcc/heater1/heater/config', '{"id":"100", "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", "bgcolor": "bg-yellow", "order": 40}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/heater2/heater/config', '{"id":"101", "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", "bgcolor": "bg-yellow", "order": 30}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/heater3/heater/config', '{"id":"102", "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", "bgcolor": "bg-yellow", "order": 10}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/heater4/heater/config', '{"id":"103", "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", "bgcolor": "bg-yellow", "order": 20}', {qos: 1, retained: false});
+
+        this.mqttClient.publish('/iotcc/dogsheating/toggle1/config', '{"id":"200", "pageName": "Dogs heating", "pageId": 20, "widget":"toggle", "title":"Mara", "topic":"/iotcc/dogsheating/toggle1", "checked":true, "template": "template-1", "icon": "ion-ios-paw", "order" : 10}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/dogsheating/toggle2/config', '{"id":"201", "pageName": "Dogs Heating", "pageId": 20, "widget":"toggle", "title":"Linda", "topic":"/iotcc/dogsheating/toggle2", "template": "template-1", "icon": "ion-ios-paw", "order" : 20}', {qos: 1, retained: false});
+
+        this.mqttClient.publish('/iotcc/outdoorlights/garage/config', '{"id":"300", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"Garage", "topic":"/iotcc/outdoorlights/garage", "checked":true, "template": "template-1", "icon": "ion-model-s", "order": 40}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/outdoorlights/house1/config', '{"id":"301", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House front", "topic":"/iotcc/outdoorlights/house1", "template": "template-1", "icon": "ion-ios-home", "order": 10}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/outdoorlights/house2/config', '{"id":"302", "pageName": "Outdoor lightling", "pageId": 30, "widget":"toggle", "title":"House back", "topic":"/iotcc/outdoorlights/house2", "template": "template-1", "icon": "ion-ios-home", "order": 20}', {qos: 1, retained: false});
+        this.mqttClient.publish('/iotcc/outdoorlights/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", "order": 30}', {qos: 1, retained: false});
+    },
 }
 
 jQuery.fn.exists = function(){return ($(this).length > 0);}

file:a/template/info-box.html (deleted)
--- a/template/info-box.html
+++ /dev/null
@@ -1,11 +1,1 @@
-<div class="info-box widget">
-    <span class="info-box-icon bg-aqua {bgcolor}"><i class="ion {icon}"></i></span>
-    <div class="info-box-content">
-        <span class="info-box-text"><b>{title}</b></span>
-        <span class="">
-            {content}
-        </span>
-        <span class="info-box-text">{description}</span>
-    </div>
-</div>
 

--- /dev/null
+++ b/template/template-1.html
@@ -1,1 +1,12 @@
-
+<div class="col-md-3 col-sm-6 col-xs-12 widgetcontainer" data-order="{order}">
+    <div class="info-box widget">
+        <span class="info-box-icon {bgcolor}"><i class="ion {icon}"></i></span>
+        <div class="info-box-content">
+            <span class="info-box-text"><b>{title}</b></span>
+            <span class="">
+                {content}
+            </span>
+            <span class="info-box-text">{description}</span>
+        </div>
+    </div>
+</div>

--- /dev/null
+++ b/template/template-2.html
@@ -1,1 +1,11 @@
-
+<div class="col-lg-3 col-xs-6 widgetcontainer" data-order="{order}">
+    <div class="small-box {bgcolor}">
+        <div class="inner">
+            <h3>{title}</h3>
+            <p>{content}</p>
+        </div>
+        <div class="icon">
+            <i class="ion {icon}"></i>
+        </div>
+    </div>
+</div>

--- /dev/null
+++ b/template/template-3.html
@@ -1,1 +1,15 @@
-
+<div class="col-md-3 col-sm-6 col-xs-12 widgetcontainer" data-order="{order}">
+    <div class="info-box box {bgcolor}">
+        <div class="box-header with-border">
+            <span class="info-box-text"><b>{title}</b></span>
+            <div class="box-tools pull-right">
+                <div class="icon">
+                    <i class="ion {icon}"></i>
+                </div>
+            </div>
+        </div>
+        <div class="box-body">
+            {content}
+        </div>
+    </div>
+</div>

comments