updated app

ninja-store/views/input.jade

@@ -0,0 +1,14 @@
+#container
+    #logo
+        a(href='/')
+            img(src='/images/logo.png')
+    #display
+        #login        
+            form(method='post')
+                | Enter new Name and Salary
+                div
+                    input(type='text', name='name')
+                    input(type='text', name='salary')
+                    input(type='submit', value='Save')
+        
+    include footer

ninja-store/views/item.jade

@@ -3,8 +3,13 @@
         img(src='/images/logo.png')
     #display
         include userbar
-        
+
         p The #{name.toLowerCase()} is one of the must-have items for any aspiring ninja. It costs just $#{price} on our store.
-        p Buy it today!
-        
+      if name == 'admin'
+        p #{name} is an admin
+      else
+        p hmmm
+
+
+
     include footer

ninja-store/views/items.jade

@@ -4,9 +4,25 @@
     #display
         include userbar
             
-        -for (var id in items)
-            - var item = items[id]
-            div
-                a(href='/item/#{id}') #{item.name} - $#{item.price}
-        
-    include footer
+        div
+            table
+                thead
+                    - each itemfk in fieldkeys
+                        th= itemfk
+                tbody
+                    -for (var id in items)
+                        - var item = items[id]
+                        tr
+                         - each itemf in fieldkeys
+                                td= item[itemf]
+
+            ul#employees
+
+            form#myForm 
+                div.clonedInput#input1
+                    input(type='text', id='employee_name', value='name')
+                    input(type='text', id='employee_salary', value='salary')
+                div
+                    input(type='button', id='btnAdd', value='add another name')
+                    input(type='button', id='btnDel', value='remove name')
+                    input(type='button', id='save', value='Save')

ninja-store/views/layout.jade

@@ -3,6 +3,71 @@ html
   head
     title= title
     link(rel='stylesheet', href='/stylesheets/style.css')
-    <script src="http://localhost:3000/socket.io/socket.io.js"></script>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    script(src='http://code.jquery.com/jquery-1.6.1.min.js')
+    script(src='/socket.io/socket.io.js')
+    script
+             $(document).ready(function() {
+                var socket  = io.connect('http://localhost:3000');
+                
+                socket.on('populate', function(data) {
+                var out = "";
+                $.each(data, function(i, obj) {
+                  console.log('<li>'+obj.name+' is making '+obj.salary+'</li>');
+                  out += "<li>"+obj.name+" is making "+obj.salary+"</li>";
+                });
+                $('#employees').html(out);
+                });
+              
+                $('#btnAdd').click(function() {
+                var num     = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
+                var newNum  = new Number(num + 1);      // the numeric ID of the new input field being added
+ 
+                // create the new element via clone(), and manipulate it's ID using newNum value
+                var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);
+ 
+                // manipulate the name/id values of the input inside the new element
+                newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);
+ 
+                // insert the new element after the last "duplicatable" input field
+                $('#input' + num).after(newElem);
+ 
+                // enable the "remove" button
+                $('#btnDel').prop('disabled',false);
+ 
+                // business rule: you can only add 5 names
+                if (newNum == 12)
+                    $('#btnAdd').prop('disabled',true);
+             });
+ 
+             $('#btnDel').click(function() {
+                var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
+                $('#input' + num).remove();     // remove the last element
+ 
+                // enable the "add" button
+                $('#btnAdd').prop('disabled',false);
+ 
+                // if only one element remains, disable the "remove" button
+                if (num-1 == 1)
+                    $('#btnDel').prop('disabled',true);
+             });
+ 
+             $('#btnDel').attr('disabled',true);
+             
+             $('#save').click(function() {
+                
+                if ($('#employee_name').val() == '' || $('#employee_salary').val() == '') {
+                  return alert('Please enter both nam e/salary!');
+                }
+                var data = {
+                  name: $('#employee_name').val(),
+                  salary: $('#employee_salary').val()
+                };
+                console.log('socketpoking: ' + 'data');
+                socket.emit('add employee', data);
+                $('#employee_name').val('');
+                $('#employee_salary').val('');
+              });
+
+             });
+
   body!= body

ninja-store/views/userbar.jade

@@ -1,5 +1,6 @@
 #userbar
     | Welcome #{username} | 
     a(href='/items') Items 
+    a(href='/input') Input
     | |   
     a(href='/logout') Log Out