sstent/node
1
0
Fork 0
mirror of https://github.com/sstent/node.git synced 2026-01-25 14:42:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

moving to jsrender

Browse Source
This commit is contained in:
Stuiart Stent
2012-06-05 22:56:03 -04:00
parent 5c7e20793a
commit fa67a502a1
5 changed files with 137 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ninja-store/app.js
View File

@@ -93,13 +93,7 @@ app.get('/logout', function(req, res) {
app.listen(3000); app.listen(3000);
console.log("Express server listening on port %d in %s mode", app.address().port, app.settings.env); 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'); var io = require('socket.io');
io = io.listen(app); io = io.listen(app);
io.configure('development', function(){ io.configure('development', function(){
@@ -117,14 +111,14 @@ io.sockets.on('connection', function(socket) {
if (result) console.log('Added!' + result); 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);
});
};

10
ninja-store/public/stylesheets/style.css
View File

@@ -42,3 +42,13 @@ input[type="text"] {
border: 1px solid #ccc; border: 1px solid #ccc;
vertical-align: middle; vertical-align: middle;
} }
#Activity {
display: none;
position: absolute;
width: 70%;
padding: 10px;
background: #eee;
color: #000;
border: 1px solid #1a1a1a;
font-size: 90%;
}

11
ninja-store/public/stylesheets/style.styl
View File

@@ -41,3 +41,14 @@ input[type="text"]
padding-right:10px padding-right:10px
border:1px solid #cccccc border:1px solid #cccccc
vertical-align: middle vertical-align: middle
#Activity
display: none
position: absolute
width: 70%
padding: 10px
background: #eeeeee
color: #000000
border: 1px solid #1a1a1a
font-size: 90%

29
ninja-store/views/items.jade
View File

@@ -8,29 +8,30 @@
input(type='Button', id='AddAct', value='Add Activity') input(type='Button', id='AddAct', value='Add Activity')
div(id='Activity',style='display: none') div(id='Activity',style='display: none',)
form#myForm form#myForm
input(type='submit', id='save', value='Save') input(type='submit', id='save', value='Save')
div(Class='ActivityBlock_T', style='display: none') 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 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='0',data-jsontag='activity.exercise') input(type='button', class='AddNeut', value='Add exercise Field', data-field='exercise_area', data-area='exercise', data-limit='1')
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 noterem', value='Remove note Field', data-field='note_area', data-area='note', data-limit='0', 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' ) 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_area') ul(class='activity')
li(class='exercise_T', style='display: none') li(class='activity', style='display: none')
label Activity label Activity
input(type='text', name='activity.name', value='Name', disabled='disabled') 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') li(class='note_T', style='display: none')
label Note label Note
input(type='text', name='activity.note[]', value='Note', disabled='disabled') input(type='text', name='activity.note[i]', value='Note', disabled='disabled')
ul(class='exercise_area') ul(class='exercise')
li(class='exercise_T', style='display: none') li(class='exercise_T', style='display: none')
label Exercise label Exercise
input(type='text', name='activity.exercise[].name', value='Name', disabled='disabled') input(type='text', name='activity.exercise[i].name', value='Name', disabled='disabled')
input(type='text', name='activity.exercise[].sets', value='Sets', disabled='disabled', class='numericonly') input(type='text', name='activity.exercise[i].sets', value='Sets', disabled='disabled', class='numericonly')
input(type='text', name='activity.exercise[].reps', value='Reps', disabled='disabled') input(type='text', name='activity.exercise[i].reps', value='Reps', disabled='disabled')
input(type='text', name='activity.exercise[].weight', value='Weight', disabled='disabled') input(type='text', name='activity.exercise[i].weight', value='Weight', disabled='disabled')
ul#employees ul#employees

136
ninja-store/views/layout.jade
View File

@@ -3,34 +3,77 @@ html
head head
title= title title= title
link(rel='stylesheet', href='/stylesheets/style.css') 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='/socket.io/socket.io.js')
script(src='/form2js/form2js.js') script(src='/form2js/form2js.js')
script(src='/form2js/jquery.toObject.js') script(src='/form2js/jquery.toObject.js')
script(src='/form2js/json2.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").
<tr>
<td colspan=3>{{:activity.name}}</td>
<td>{{:_id}}</td>
<td>{{:date}}</td>
<td>
{{for activity.note}}
<div>
<em>{{:name}}</em>
</div>
{{/for}}
</td>
<td>
{{for activity.exercise}}
<div>
<em>{{:name}}</em><em>{{:sets}}</em><em>{{:reps}}</em><em>{{:weight}}</em>
</div>
{{/for}}
</td>
</td>
</tr>
script script
$(function() { $(function() {
//$( "#datepicker" ).datepicker();
var socket = io.connect('http://localhost:3000'); var socket = io.connect('http://localhost:3000');
socket.on('populate', function(json) { socket.on('populate', function(json) {
var content = ""; var content = "";
$('#employees').empty(); $('#employees').empty();
//iterate activities //iterate activities
$.each (json, function (bb) { // $.each (json, function (bb) {
var activity = json[bb].activity; // var activity = json[bb].activity;
content += '<p>Activity - '+ bb + '</p>'; // content += '<p>Activity - '+ bb + '</p>';
$.each (activity.note, function (cc) { // if (typeof activity.name !== 'undefined') {
content += '<p>Note - '+ cc + '</p>'; // content += '<p>Name - '+ activity.name + '</p>';
}); // };
$.each (activity.exercise, function (cc) { // if (typeof activity.note !== 'undefined') {
content += '<p>Exercise '+ cc +' - name:' + activity.exercise[cc].name +'</p>'; // $.each (activity.note, function (cc) {
content += '<p>Exercise '+ cc +' - sets:' + activity.exercise[cc].sets +'</p>'; // content += '<p>Note - '+ cc + '</p>';
content += '<p>Exercise '+ cc +' - reps:' + activity.exercise[cc].reps +'</p>'; // });
content += '<p>Exercise '+ cc +' - weight:' + activity.exercise[cc].weight +'</p>'; // };
}); // if (typeof activity.exercise !== 'undefined') {
// $.each (activity.exercise, function (cc) {
// content += '<p>Exercise '+ cc +' - name:' + activity.exercise[cc].name +'</p>';
// content += '<p>Exercise '+ cc +' - sets:' + activity.exercise[cc].sets +'</p>';
// content += '<p>Exercise '+ cc +' - reps:' + activity.exercise[cc].reps +'</p>';
// content += '<p>Exercise '+ cc +' - weight:' + activity.exercise[cc].weight +'</p>';
// });
// };
}); // });
$(content).appendTo("#employees"); // $(content).appendTo("#employees");
// $.templates({
// titleTemplate: "<tr><td colspan=3>{{:activity.name}}</td><td>{{:_id}}</td><td></td></tr>",
// detailTemplate: "<tr><td>{{:name}}</td><td>Released: {{:releaseYear}}</td><td>director: {{:director}}</td></tr>"
// });
// content = $.render.titleTemplate( json );
// $( "#employees" ).html( content );
$( "#employees" ).html(
$( "#movieTemplate1" ).render( json )
);
}); });
@@ -39,56 +82,60 @@ html
$('#Activity').attr('style', 'display: block'); $('#Activity').attr('style', 'display: block');
var last_item = $('.ActivityBlock').length; var last_item = $('.ActivityBlock').length;
//if last_item = 0 //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('class', 'ActivityBlock');
$(newElem).attr('id', 'ActivityBlock' + (last_item + 1) ); $(newElem).attr('id', '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('.RemNeut').attr('data-activity','ActivityBlock_' + (last_item + 1));
$(newElem).children('.AddNeut').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'); $(newElem).appendTo('form#myForm');
}); });
//Add more fields dynamically. //Add more fields dynamically.
$('.AddNeut').click(function() { $('input.AddNeut').click(function() {
var field = $(this).attr('data-field'); var field = $(this).attr('data-field');
var area = $(this).attr('data-area'); var area = $(this).attr('data-area');
var limit = $(this).attr('data-limit'); var limit = $(this).attr('data-limit');
var jsontag = $(this).attr('data-jsontag'); var actblock = $(this).closest('div').attr('id');
var actblock = $(this).attr('data-activity'); var last_item = $('#' + actblock + ' .' + area ).length;
var last_item = $('.' + area ).length; console.log($(this).closest('div').attr('id'))
console.log('div#' + actblock + ' ul#' + field + ' li:first') console.log('#' + actblock + ' ul.' + field + ' li:first - LastItem - ',last_item, 'next_Item - ', (last_item + 1) );
console.log('LastItem - ',last_item, 'next_Item - ', (last_item + 1) );
// create the new element via clone(), and manipulate it's ID using newNum value // 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).attr('class', area);
$(newElem).children('input').attr('disabled',false); $(newElem).children('input').attr('disabled',false);
$(newElem).children('input').each(function(){ $(newElem).children('input').each(function(){
var newName = $(this).attr('name').replace('[]','[' +(last_item + 1) + ']') var newName = $(this).attr('name').replace('[i]','[' +(last_item) + ']');
$(this).attr('name', newName);
console.log('name ' + newName); console.log('name ' + newName);
$(this).attr('name', newName);
}); });
$(newElem).appendTo('ul#' +field); $(newElem).appendTo('div#' + actblock + ' ul.' +area);
$('#'+ area + 'rem').attr('disabled',false); 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 field = $(this).attr('data-field');
var area = $(this).attr('data-area'); var area = $(this).attr('data-area');
var limit = $(this).attr('data-limit'); var limit = $(this).attr('data-limit');
var last_item = $('.' + area ).length; var actblock = $(this).closest('div').attr('id');
var actblock = $(this).attr('data-activity'); var last_item = $('#' + actblock + ' .' + area ).length;
console.log('.' + area + ' li') console.log('.' + area + ' li')
console.log('LastItem - ',last_item, 'next_Item - ', (last_item - 1) ); console.log('LastItem - ',last_item, 'next_Item - ', (last_item - 1) );
if (last_item != 0) if (last_item != 1) {
$('div#' + actblock + ' ul.' + field + ' li:last').remove(); $('#' + actblock + ' ul.' + area + ' li:last').remove();
};
// enable the "add" button // enable the "add" button
$('.AddNeut#' + area).attr('disabled',false); $('.AddNeut#' + area).attr('disabled',false);
// if only one element remains, disable the "remove" button // if only one element remains, disable the "remove" button
if ((last_item - 1) == 0) if (last_item == 2)
$('#'+ area + 'rem').attr('disabled','disabled'); $('#' + actblock + ' .'+ area + 'rem').attr('disabled','disabled');
console.log('#'+ area + ' .RemNeut') console.log('#'+ area + ' .RemNeut')
@@ -97,14 +144,17 @@ html
$('#save').click(function() { $('#save').click(function() {
var selector= "#myForm" var selector= ".ActivityBlock"
//var formDataFirst = $(selector).toObject({mode: 'first'}); //var formDataFirst = $(selector).toObject({mode: 'first'});
var formDataAll = $(selector).toObject({mode: 'all'}); var formDataAll = $(selector).toObject({mode: 'all'});
socket.emit('data', formDataAll); socket.emit('data', formDataAll);
console.log('All ', JSON.stringify(formDataAll, null, '\t')); console.log('All ', JSON.stringify(formDataAll, null, '\t'));
// to prevent the page from changing // to prevent the page from changing
//return false; $('.ActivityBlock').remove();
$('#Activity').attr('style', 'display: none');
return false;
}); });