modal view node instructions

index.html

@@ -116,6 +116,8 @@
     </div>
 </div>
 
+<div class="modal fade" id="genericModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true"></div>
+
 <div id="menuWrapper"><div id="menuHeader"></div><div id="menuContent"></div></div>
 <div id="scriptView"></div>
 <div id="navRibbon"></div>

js/main.js

@@ -92,6 +92,7 @@ require.config({
         navbar: 'menus/Navbar',
         navViewMenu: 'menus/NavViewMenu',//view dropdown
         ribbon: 'menus/Ribbon',
+        modalView: 'menus/ModalView',
         menuWrapper: 'menus/MenuWrapperView',
         menuParent: 'menus/MenuParentView',
         latticeMenu: 'menus/LatticeMenuView',

js/menus/ModalView.js

+/**
+ * Created by aghassaei on 6/17/15.
+ */
+
+
+define(['jquery', 'underscore', 'backbone'], function($, _, Backbone){
+
+    return Backbone.View.extend({
+
+        el: "#genericModal",
+
+        events: {
+            //on close - destroy
+        },
+
+        initialize: function(data){
+            this.render(data);
+        },
+
+        render: function(data){
+            this.$el.html(this.template(data));
+            this.$el.modal("show");
+        },
+
+        destroy: function(){
+            this.stopListening();
+            this.undelegateEvents();
+            this.$el.removeData().unbind();
+//            this.remove();//todo not convinced I have this right yet
+//            Backbone.View.prototype.remove.call(this);
+        },
+
+        template: _.template('\
+            <div class="modal-dialog modal-med">\
+                <div class="modal-content">\
+                    <div class="modal-header">\
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>\
+                    <p class="modal-title" ><%= title %></p>\
+                    </div>\
+                    <div class="modal-body">\
+                    <% if (typeof img !== "undefined") {%>\
+                    <img class="fullWidth" src="<%= img %>"><br/><br/>\
+                    <% } %>\
+                    <% if (text == ""){ %>\
+                    Need something here.\
+                    <% } else { %>\
+                        <%= text %>\
+                    <% } %>\
+                    </div>\
+                </div>\
+            </div>\
+        ')
+
+    });
+});
\ No newline at end of file

js/menus/SetupCommMenuView.js

@@ -12,7 +12,8 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'serialComm'], function($
 
         events: {
             "click #serialFlushBuffer":                         "_flushBuffer",
-            "click #sendTestMessage":                           "_sendTestMessage"
+            "click #sendTestMessage":                           "_sendTestMessage",
+            "click #nodeSetupInstructions":                     "_setupInstructions"
         },
 
 
@@ -32,6 +33,16 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'serialComm'], function($
             serialComm.flushBuffer();
         },
 
+        _setupInstructions: function(e){
+            e.preventDefault();
+            require(['modalView'], function(ModalView){
+                new ModalView({
+                    title: "myTitle",
+                    text: "some html"
+                });
+            })
+        },
+
         _makeTemplateJSON: function(){
             return _.extend(this.model.toJSON(), serialComm.toJSON(), {allBaudRates: [300, 600, 1200, 2400, 4800, 9600, 14400, 19200, 28800, 38400, 57600, 115200]});
         },
@@ -60,11 +71,13 @@ define(['jquery', 'underscore', 'menuParent', 'plist', 'serialComm'], function($
                         <% }); %>\
                     </ul>\
                 </div><br/><br/><br/>\
+        Stream: &nbsp;&nbsp;<span id="serialDataStream"></span>\
         <a href="#" id="sendTestMessage" class="btn btn-block btn-lg btn-default">Send Test Message:</a><br/>\
         <input id="seriallTestMessage" value="<%= testMessage %>" placeholder="Test Message" class="form-control fullWidth unresponsiveInput" type="text"><br/><br/>\
         <a href="#" id="serialFlushBuffer" class="btn btn-block btn-lg btn-danger">Flush Buffer</a><br/>\
         <% }else{ %>\
-        No node server found.\
+        No node server found.<br/><br/>\
+        <a href="#" id="nodeSetupInstructions" class="btn btn-block btn-lg btn-default">Setup Instructions</a><br/>\
         <% } %>\
             ')
 

js/models/SerialComm.js

@@ -42,7 +42,6 @@ define(['underscore', 'backbone', 'socketio'], function(_, Backbone, io){
     var serialComm = new SerialComm();
 
     socket.on('connected', function(data){
-        console.log(data);
         serialComm.set("connected", true, {silent:true});
         _.each(_.keys(data), function(key){
             if (data[key] !== null) serialComm.set(key, data[key], {silent:true});