custom templates
custom templates

--- a/assets/js/iotcc.js
+++ b/assets/js/iotcc.js
@@ -76,9 +76,11 @@
         this.mqttClient.subscribe('/+/+/+/config', {qos: 1});
         this.mqttClient.subscribe('/+/+/+/data', {qos: 1});
         this.mqttClient.subscribe('/+/+/device', {qos: 1});
+        this.mqttClient.subscribe('/+/+/confirm', {qos: 1});
 
         this.refreshDevices();
         this.customSubscriptions();
+        this.customTemplates();
 
         this.mqttClient.on('message', function(topic, message, packet) {
             iotCC.handleCustomSubscriptions(topic, message);
@@ -476,6 +478,50 @@
             iotCC.clearSession();
         });
     },
+    customTemplates: function() {
+        var config = JSON.parse(localStorage.getItem('iotCCConfig')) || {};
+        $('.templates-table').find('tr').remove();
+        for (i in config.customTemplates) {
+            var template = config.customTemplates[i];
+            var html = '<tr>';
+            html += '<td><a href="#" class="btn fa fa-edit"></a><a href="#" class="btn fa fa-remove"></a></td>';
+            html += '<td>' + i + '</td>';
+            html += '<td>' + template.title + '</td>';
+            html += '<td>' + template.active + '</td>';
+            html += '</tr>';
+            $('.templates-table').append(html);
+        }
+        $('.templates-table').find('a.fa-edit').click(function(e) {
+            e.preventDefault();
+            var tr = $(this).parent().parent();
+            $('input[name="index"]').val( $(tr).find('td:eq(1)').html() );
+            $('input[name="title"]').val( $(tr).find('td:eq(2)').html() );
+            $('input[name="active"]').prop('checked', $(tr).find('td:eq(3)').html()=='true'?true:false);
+            var config = JSON.parse(localStorage.getItem('iotCCConfig')) || {};
+            var data = config.customTemplates || [];
+            $('textarea[name="templateHtml"]').val( data[$(tr).find('td:eq(1)').html()].templateHtml );
+            $("#templateHtml").trigger('keyup');
+            iotCC.clearSession();
+        });
+        $('.templates-table').find('a.fa-remove').click(function(e) {
+            e.preventDefault();
+            var tr = $(this).parent().parent();
+            var index = $(tr).find('td:eq(1)').html();
+            try {
+                var config = JSON.parse(localStorage.getItem('iotCCConfig')) || {};
+                var data = config.customTemplates || [];
+                data.splice(index);
+                config.customTemplates = data;
+
+                localStorage.setItem('iotCCConfig', JSON.stringify(config));
+                iotCC.showNotification('Custom templates', 'Data deleted succesfully', 'templates-notification', 'info', 1.5);
+            } catch(ex) {
+                console.log (ex);
+                iotCC.showNotification('Custom templates', 'Cannot save data to local storage', 'templates-notification', 'danger', 3);
+            }
+            iotCC.clearSession();
+        });
+    },
     handleCustomSubscriptions: function(topic, message) {
         message = message.toString();
         var config = JSON.parse(localStorage.getItem('iotCCConfig')) || {};
@@ -672,7 +718,6 @@
         $('#widgetJson').val(JSON.stringify(json, null, 4));
     });
 
-
     $('#saveSubscription').click(function(e) {
         e.preventDefault();
         var form = $('#customSubscriptions').serializeObject();
@@ -698,6 +743,37 @@
         iotCC.clearSession();
     });
 
+    $('#saveTemplate').click(function(e) {
+        e.preventDefault();
+        var form = $('#customTemplates').serializeObject();
+        form.active = $('#active2').prop('checked');
+        try {
+            var config = JSON.parse(localStorage.getItem('iotCCConfig')) || {};
+            var data = config.customTemplates || [];
+            if (form.index) {
+                data[form.index] = form;
+            } else {
+                data.push(form);
+            }
+            config.customTemplates = data;
+
+            localStorage.setItem('iotCCConfig', JSON.stringify(config));
+            iotCC.showNotification('Custom templates', 'Data saved succesfully', 'templates-notification', 'info', 1.5);
+            $('#customTemplates')[0].reset();
+            $('.template-preview').html('');
+        } catch(ex) {
+            console.log (ex);
+            iotCC.showNotification('Custom templates', 'Cannot save data to local storage', 'templates-notification', 'danger', 3);
+        }
+        iotCC.clearSession();
+    });
+
+    $("#templateHtml").keyup(function() {
+        $('.template-preview').html('');
+        var val = $('#templateHtml').val();
+        $('.template-preview').html(val);
+    });
+
     $('#saveIoTCCConfig').click(function(e) {
         e.preventDefault();
         var config = $('#iotccconfig').val();

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -55,6 +55,11 @@
                     </a>
                 </li>
                 <li>
+                    <a href="#" class="navigation" data-section="custom-templates">
+                        <i class="fa fa-code"></i> <span>Custom templates</span>
+                    </a>
+                </li>
+                <li>
                     <a href="#" class="navigation" data-section="settings">
                         <i class="fa fa-gears"></i> <span>Settings</span>
                     </a>
@@ -81,6 +86,13 @@
             <h1>Custom subscriptions</h1>
             <ol class="breadcrumb">
                 <li class="active"><i class="fa fa-list"></i> Custom subscriptions</li>
+            </ol>
+        </section>
+
+        <section class="content-header hide" data-section="custom-templates">
+            <h1>Custom templates</h1>
+            <ol class="breadcrumb">
+                <li class="active"><i class="fa fa-code"></i> Custom templates</li>
             </ol>
         </section>
 
@@ -249,6 +261,79 @@
 
         </section>
 
+
+        <!-- Custom templates content -->
+        <section class="content hide" data-section="custom-templates">
+
+            <div class="row templates-notification">
+                <div class="col-md-9">
+                    <div class="box box-primary">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">Add new template</h3>
+                        </div>
+                        <form id="customTemplates">
+                            <div class="box-body">
+                                <div class="form-group">
+                                    <label for="title">Title</label>
+                                    <input type="text" class="form-control" id="title" name="title" placeholder="Title" />
+                                </div>
+                                <div class="form-group templateHtml">
+                                    <label for="templateHtml">HTML</label>
+                                    <textarea class="form-control" id="templateHtml" name="templateHtml" placeholder="Template HTML" rows="10"></textarea>
+                                    <span class="help-block templateHtml"></span>
+                                </div>
+                                <div class="checkbox">
+                                    <label for="active2">
+                                    <input type="checkbox" id="active2" name="active" /> Activate
+                                </label>
+                                </div>
+                            </div>
+                            <div class="box-footer">
+                                <button type="submit" class="btn btn-primary" id="saveTemplate">Save</button>
+                            </div>
+                            <input type="hidden" name="index" />
+                        </form>
+                    </div>
+                </div>
+
+                <div class="col-md-3">
+                    <div class="box box-primary">
+                        <div class="box-header with-border">
+                            <h3 class="box-title">Template Preview</h3>
+                        </div>
+                        <div class="box-body template-preview">
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row">
+                <div class="col-xs-12">
+                    <div class="box">
+                        <div class="box-header">
+                            <h3 class="box-title">Templates</h3>
+                        </div>
+                        <div class="box-body table-responsive no-padding">
+                            <table class="table table-hover">
+                                <thead>
+                                    <tr>
+                                        <th></th>
+                                        <th>ID</th>
+                                        <th>Title</th>
+                                        <th>Active</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="templates-table">
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </section>
+
         <!-- Settings content -->
         <section class="content hide" data-section="settings">
 

comments