diff --git a/ninja-store/app.js b/ninja-store/app.js index 8fbaa82..9352978 100644 --- a/ninja-store/app.js +++ b/ninja-store/app.js @@ -93,13 +93,7 @@ app.get('/logout', function(req, res) { app.listen(3000); console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env); -var emitdata = function(channel,data) { -io.sockets.on('connection', function (socket) { - io.sockets.emit(channel, data); - }); -}; - - + var io = require('socket.io'); io = io.listen(app); io.configure('development', function(){ @@ -117,14 +111,14 @@ io.sockets.on('connection', function(socket) { if (result) console.log('Added!' + result); }); }); - - // client add new employee -io.sockets.on('add employee', function(data) { - console.log("addemployee ") - addemployee(data); }); - - }); +function emitdata(channel,data) { + console.log('This Is What I should Emit ' +JSON.stringify(data)); + io.sockets.on('connection', function (socket) { + console.log('This Is What I Emit ' +JSON.stringify(data)); + socket.emit(channel, data); + }); +}; diff --git a/ninja-store/public/stylesheets/style.css b/ninja-store/public/stylesheets/style.css index 6856e1f..ce28b5e 100644 --- a/ninja-store/public/stylesheets/style.css +++ b/ninja-store/public/stylesheets/style.css @@ -42,3 +42,13 @@ input[type="text"] { border: 1px solid #ccc; vertical-align: middle; } +#Activity { + display: none; + position: absolute; + width: 70%; + padding: 10px; + background: #eee; + color: #000; + border: 1px solid #1a1a1a; + font-size: 90%; +} diff --git a/ninja-store/public/stylesheets/style.styl b/ninja-store/public/stylesheets/style.styl index bd78e37..d745f18 100644 --- a/ninja-store/public/stylesheets/style.styl +++ b/ninja-store/public/stylesheets/style.styl @@ -41,3 +41,14 @@ input[type="text"] padding-right:10px border:1px solid #cccccc vertical-align: middle + + +#Activity + display: none + position: absolute + width: 70% + padding: 10px + background: #eeeeee + color: #000000 + border: 1px solid #1a1a1a + font-size: 90% diff --git a/ninja-store/views/items.jade b/ninja-store/views/items.jade index 50ec77d..8341404 100644 --- a/ninja-store/views/items.jade +++ b/ninja-store/views/items.jade @@ -8,29 +8,30 @@ input(type='Button', id='AddAct', value='Add Activity') - div(id='Activity',style='display: none') + div(id='Activity',style='display: none',) form#myForm input(type='submit', id='save', value='Save') div(Class='ActivityBlock_T', style='display: none') - input(type='button', class='AddNeut', value='Add note Field', data-field='note_area', data-area='note_', data-limit='0', data-jsontag='activity.note') - input(type='button', class='AddNeut', value='Add exercise Field', data-field='exercise_area', data-area='exercise_', data-limit='0',data-jsontag='activity.exercise') - input(type='button', class='RemNeut', value='Remove note Field', data-field='note_area', data-area='note_', data-limit='0', data-jsontag='activity.note', disabled='disabled') - input(type='button', class='RemNeut', value='Remove exercise Field', data-field='exercise_area', data-area='exercise_', data-limit='0',data-jsontag='activity.exercise', disabled='disabled' ) - ul(class='Activity_area') - li(class='exercise_T', style='display: none') + input(type='button', class='AddNeut', value='Add note Field', data-field='note_area', data-area='note', data-limit='1') + input(type='button', class='AddNeut', value='Add exercise Field', data-field='exercise_area', data-area='exercise', data-limit='1') + input(type='button', class='RemNeut noterem', value='Remove note Field', data-field='note_area', data-area='note', data-limit='0', disabled='disabled') + input(type='button', class='RemNeut exerciserem', value='Remove exercise Field', data-field='exercise_area', data-area='exercise', data-limit='0', disabled='disabled' ) + ul(class='activity') + li(class='activity', style='display: none') label Activity input(type='text', name='activity.name', value='Name', disabled='disabled') - ul(class='note_area') + input(type='text', class='datefield', disabled='disabled' ) + ul(class='note') li(class='note_T', style='display: none') label Note - input(type='text', name='activity.note[]', value='Note', disabled='disabled') - ul(class='exercise_area') + input(type='text', name='activity.note[i]', value='Note', disabled='disabled') + ul(class='exercise') li(class='exercise_T', style='display: none') label Exercise - input(type='text', name='activity.exercise[].name', value='Name', disabled='disabled') - input(type='text', name='activity.exercise[].sets', value='Sets', disabled='disabled', class='numericonly') - input(type='text', name='activity.exercise[].reps', value='Reps', disabled='disabled') - input(type='text', name='activity.exercise[].weight', value='Weight', disabled='disabled') + input(type='text', name='activity.exercise[i].name', value='Name', disabled='disabled') + input(type='text', name='activity.exercise[i].sets', value='Sets', disabled='disabled', class='numericonly') + input(type='text', name='activity.exercise[i].reps', value='Reps', disabled='disabled') + input(type='text', name='activity.exercise[i].weight', value='Weight', disabled='disabled') ul#employees diff --git a/ninja-store/views/layout.jade b/ninja-store/views/layout.jade index 211aff7..664c45b 100644 --- a/ninja-store/views/layout.jade +++ b/ninja-store/views/layout.jade @@ -3,34 +3,77 @@ html head title= title link(rel='stylesheet', href='/stylesheets/style.css') - script(src='http://code.jquery.com/jquery-1.6.1.min.js') + script(src='/javascripts/jquery-1.7.2.min.js') + script(src='/javascripts/jquery-ui-1.8.20.custom.min.js') + script(src='/javascripts/jsrender.js') script(src='/socket.io/socket.io.js') script(src='/form2js/form2js.js') script(src='/form2js/jquery.toObject.js') script(src='/form2js/json2.js') + link(rel='stylesheet', href="stylesheets/smoothness/jquery-ui-1.8.20.custom.css") + script#movieTemplate1(type="text/x-jsrender"). + + {{:activity.name}} + {{:_id}} + {{:date}} + + {{for activity.note}} +
+ {{:name}} +
+ {{/for}} + + + {{for activity.exercise}} +
+ {{:name}}{{:sets}}{{:reps}}{{:weight}} +
+ {{/for}} + + + + + script $(function() { + //$( "#datepicker" ).datepicker(); var socket = io.connect('http://localhost:3000'); socket.on('populate', function(json) { var content = ""; $('#employees').empty(); //iterate activities - $.each (json, function (bb) { - var activity = json[bb].activity; - content += '

Activity - '+ bb + '

'; - $.each (activity.note, function (cc) { - content += '

Note - '+ cc + '

'; - }); - $.each (activity.exercise, function (cc) { - content += '

Exercise '+ cc +' - name:' + activity.exercise[cc].name +'

'; - content += '

Exercise '+ cc +' - sets:' + activity.exercise[cc].sets +'

'; - content += '

Exercise '+ cc +' - reps:' + activity.exercise[cc].reps +'

'; - content += '

Exercise '+ cc +' - weight:' + activity.exercise[cc].weight +'

'; - }); + // $.each (json, function (bb) { + // var activity = json[bb].activity; + // content += '

Activity - '+ bb + '

'; + // if (typeof activity.name !== 'undefined') { + // content += '

Name - '+ activity.name + '

'; + // }; + // if (typeof activity.note !== 'undefined') { + // $.each (activity.note, function (cc) { + // content += '

Note - '+ cc + '

'; + // }); + // }; + // if (typeof activity.exercise !== 'undefined') { + // $.each (activity.exercise, function (cc) { + // content += '

Exercise '+ cc +' - name:' + activity.exercise[cc].name +'

'; + // content += '

Exercise '+ cc +' - sets:' + activity.exercise[cc].sets +'

'; + // content += '

Exercise '+ cc +' - reps:' + activity.exercise[cc].reps +'

'; + // content += '

Exercise '+ cc +' - weight:' + activity.exercise[cc].weight +'

'; + // }); + // }; - }); - $(content).appendTo("#employees"); + // }); + // $(content).appendTo("#employees"); + // $.templates({ + // titleTemplate: "{{:activity.name}}{{:_id}}", + // detailTemplate: "{{:name}}Released: {{:releaseYear}}director: {{:director}}" + // }); + // content = $.render.titleTemplate( json ); + // $( "#employees" ).html( content ); + $( "#employees" ).html( + $( "#movieTemplate1" ).render( json ) + ); }); @@ -39,56 +82,60 @@ html $('#Activity').attr('style', 'display: block'); var last_item = $('.ActivityBlock').length; //if last_item = 0 - var newElem = $('.ActivityBlock_T').clone().attr('style', 'display: block'); + var newElem = $('.ActivityBlock_T').clone(true, true).attr('style', 'display: block'); $(newElem).attr('class', 'ActivityBlock'); $(newElem).attr('id', 'ActivityBlock' + (last_item + 1) ); - $(newElem).children('.AddNeut').attr('data-activity','ActivityBlock' + (last_item + 1)); - $(newElem).children('.RemNeut').attr('data-activity','ActivityBlock' + (last_item + 1)); - $(newElem).children('.AddNeut').attr('data-activity','ActivityBlock' + (last_item + 1)); + //$(newElem).children('.AddNeut').attr('data-activity','ActivityBlock_' + (last_item + 1)); + //$(newElem).children('.RemNeut').attr('data-activity','ActivityBlock_' + (last_item + 1)); + $(newElem).children('.AddNeut').attr('disabled',false); + //$(newElem).children('.RemNeut').attr('disabled',false); + $(newElem).find('ul.activity li').children('input').attr('disabled',false); + $(newElem).find('ul.activity li').attr('style', 'display: block'); + $(newElem).find('input.datefield').datepicker() $(newElem).appendTo('form#myForm'); }); //Add more fields dynamically. - $('.AddNeut').click(function() { + $('input.AddNeut').click(function() { var field = $(this).attr('data-field'); var area = $(this).attr('data-area'); var limit = $(this).attr('data-limit'); - var jsontag = $(this).attr('data-jsontag'); - var actblock = $(this).attr('data-activity'); - var last_item = $('.' + area ).length; - console.log('div#' + actblock + ' ul#' + field + ' li:first') - console.log('LastItem - ',last_item, 'next_Item - ', (last_item + 1) ); + var actblock = $(this).closest('div').attr('id'); + var last_item = $('#' + actblock + ' .' + area ).length; + console.log($(this).closest('div').attr('id')) + console.log('#' + actblock + ' ul.' + field + ' li:first - LastItem - ',last_item, 'next_Item - ', (last_item + 1) ); // create the new element via clone(), and manipulate it's ID using newNum value - var newElem = $('div#' + actblock + ' ul.' + field + ' li:first').clone().attr('style', 'display: block'); + var newElem = $('#' + actblock + ' ul.' + area + ' li:first').clone().attr('style', 'display: block'); $(newElem).attr('class', area); $(newElem).children('input').attr('disabled',false); - $(newElem).children('input').each(function(){ - var newName = $(this).attr('name').replace('[]','[' +(last_item + 1) + ']') - $(this).attr('name', newName); + $(newElem).children('input').each(function(){ + var newName = $(this).attr('name').replace('[i]','[' +(last_item) + ']'); console.log('name ' + newName); + $(this).attr('name', newName); }); - $(newElem).appendTo('ul#' +field); - $('#'+ area + 'rem').attr('disabled',false); + $(newElem).appendTo('div#' + actblock + ' ul.' +area); + console.log('enable #' + actblock + ' .'+ area + 'rem'); + $('#' + actblock + ' .'+ area + 'rem').attr('disabled',false); }); - $('.RemNeut').click(function() { + $('input.RemNeut').click(function() { var field = $(this).attr('data-field'); var area = $(this).attr('data-area'); var limit = $(this).attr('data-limit'); - var last_item = $('.' + area ).length; - var actblock = $(this).attr('data-activity'); + var actblock = $(this).closest('div').attr('id'); + var last_item = $('#' + actblock + ' .' + area ).length; console.log('.' + area + ' li') console.log('LastItem - ',last_item, 'next_Item - ', (last_item - 1) ); - if (last_item != 0) - $('div#' + actblock + ' ul.' + field + ' li:last').remove(); - - // enable the "add" button + if (last_item != 1) { + $('#' + actblock + ' ul.' + area + ' li:last').remove(); + }; + // enable the "add" button $('.AddNeut#' + area).attr('disabled',false); - // if only one element remains, disable the "remove" button - if ((last_item - 1) == 0) - $('#'+ area + 'rem').attr('disabled','disabled'); + // if only one element remains, disable the "remove" button + if (last_item == 2) + $('#' + actblock + ' .'+ area + 'rem').attr('disabled','disabled'); console.log('#'+ area + ' .RemNeut') @@ -97,14 +144,17 @@ html $('#save').click(function() { - var selector= "#myForm" + var selector= ".ActivityBlock" //var formDataFirst = $(selector).toObject({mode: 'first'}); var formDataAll = $(selector).toObject({mode: 'all'}); socket.emit('data', formDataAll); console.log('All ', JSON.stringify(formDataAll, null, '\t')); // to prevent the page from changing - //return false; + $('.ActivityBlock').remove(); + $('#Activity').attr('style', 'display: none'); + + return false; });