From 801627194ffc9e1deb785dd5940c385b99ba6e4e Mon Sep 17 00:00:00 2001 From: Stuart Stent Date: Fri, 1 Jun 2012 18:25:05 -0400 Subject: [PATCH] added form2js, and mongodb --- ninja-store/app.js | 42 +- ninja-store/app.js~ | 121 +++++ ninja-store/public/form2js/form2js.js | 325 ++++++++++++ ninja-store/public/form2js/jquery.toObject.js | 66 +++ ninja-store/public/form2js/js2form.js | 309 +++++++++++ ninja-store/public/form2js/json2.js | 482 ++++++++++++++++++ ninja-store/public/stylesheets/style.css | 21 +- ninja-store/public/stylesheets/style.styl | 23 +- ninja-store/public/stylesheets/style.styl~ | 43 ++ ninja-store/routes/db_helper.js | 10 +- ninja-store/routes/db_helper.js~ | 67 +++ ninja-store/views/items.jade | 41 +- ninja-store/views/items.jade~ | 30 ++ ninja-store/views/layout.jade | 89 ++-- ninja-store/views/layout.jade~ | 67 +++ 15 files changed, 1630 insertions(+), 106 deletions(-) create mode 100644 ninja-store/app.js~ create mode 100644 ninja-store/public/form2js/form2js.js create mode 100644 ninja-store/public/form2js/jquery.toObject.js create mode 100644 ninja-store/public/form2js/js2form.js create mode 100644 ninja-store/public/form2js/json2.js create mode 100644 ninja-store/public/stylesheets/style.styl~ create mode 100644 ninja-store/routes/db_helper.js~ create mode 100644 ninja-store/views/items.jade~ create mode 100644 ninja-store/views/layout.jade~ diff --git a/ninja-store/app.js b/ninja-store/app.js index d71e48c..be651d8 100644 --- a/ninja-store/app.js +++ b/ninja-store/app.js @@ -5,9 +5,12 @@ var express = require('express'); var store = require('./routes/store'); -var db_helper = module.exports = require("./routes/db_helper.js"); +//var db_helper = module.exports = require("./routes/db_helper.js"); var app = module.exports = express.createServer(); +var db = require('mongoskin').db('localhost:27017/test'); +var testcollection = db.collection('testcollection'); + // Configuration app.configure(function(){ @@ -50,19 +53,20 @@ app.post('/input', store.input_post_handler); app.get('/items', function(req, res) { - var items = db_helper.get_all('employees', function(err, items, fields) { - if (err) { - console.log("async1: " + err); - } - var keys = Object.keys( items ); - var fieldkeys = Object.keys( fields ); - var employees = items; - emitdata('populate',employees); + testcollection.find({}, function(err, result) { + result.each(function(err, data) { + console.log(data); + emitdata('populate',data); + }); + }); if (typeof req.session.username == 'undefined') res.redirect('/'); - else res.render('items', { title: 'Ninja Store - Items', username: req.session.username, items:items, keys:keys, fieldkeys:fieldkeys }); - }); + else res.render('items', { title: 'Ninja Store - Items'}); + // else res.render('items', { title: 'Ninja Store - Items', username: req.session.username, items:items, keys:keys, fieldkeys:fieldkeys }); + // }); }); + + // show individual item //app.get('/items', store.items); @@ -86,18 +90,6 @@ io.sockets.on('connection', function (socket) { }); }; -var addemployee = function(data) { - db_helper.add_employee(data, function(lastId) { - }); - db_helper.get_all('employees', function(err, items, fields) { - if (err) { - console.log("async1: " + err); - } - emitdata('populate',items); - }); - - }; - var io = require('socket.io'); io = io.listen(app); @@ -116,6 +108,10 @@ io.sockets.on('connection', function(client) { }); client.on('data', function(data) { console.log("data" + JSON.stringify(data)) + testcollection.insert(data, function(err, result) { + if (err) throw err; + if (result) console.log('Added!'); + }); }); }); diff --git a/ninja-store/app.js~ b/ninja-store/app.js~ new file mode 100644 index 0000000..2607152 --- /dev/null +++ b/ninja-store/app.js~ @@ -0,0 +1,121 @@ + +/** + * Module dependencies. + */ + +var express = require('express'); +var store = require('./routes/store'); +//var db_helper = module.exports = require("./routes/db_helper.js"); +var app = module.exports = express.createServer(); + +var db = require('mongoskin').db('localhost:27017/test'); +var testcollection = db.collection('testcollection'); + +// Configuration + +app.configure(function(){ + app.set('views', __dirname + '/views'); + app.set('view engine', 'jade'); + app.set('view options', { pretty: true }); + //app.set('view options', { debug: true }); + app.use(express.bodyParser()); + app.use(express.methodOverride()); + app.use(express.cookieParser()); + app.use(express.session({ secret: 'your secret here' })); + app.use(require('stylus').middleware({ src: __dirname + '/public' })); + app.use(app.router); + app.use(express.static(__dirname + '/public')); +}); + +app.configure('development', function(){ + app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); +}); + +app.configure('production', function(){ + app.use(express.errorHandler()); +}); + +// Routes + +app.get('/', function(req, res) { + // if user is not logged in, ask them to login + if (typeof req.session.username == 'undefined') res.render('home', { title: 'Ninja Store'}); + // if user is logged in already, take them straight to the items list + else res.redirect('/items'); +}); + +app.post('/', store.home_post_handler); + +app.get('/input', store.input); +app.post('/input', store.input_post_handler); + +// display the list of item + + +app.get('/items', function(req, res) { + testcollection.find({}, function(err, result) { + result.each(function(err, data) { + console.log(data); + emitdata('populate',JSON.stringify(data)); + }); + }); + if (typeof req.session.username == 'undefined') res.redirect('/'); + else res.render('items', { title: 'Ninja Store - Items'}); + // else res.render('items', { title: 'Ninja Store - Items', username: req.session.username, items:items, keys:keys, fieldkeys:fieldkeys }); + // }); +}); + + + +// show individual item +//app.get('/items', store.items); + +// show individual item +app.get('/item/:id', store.item); +// show general pages +app.get('/page', store.page); +app.get('/logout', function(req, res) { + // delete the session variable + delete req.session.username; + // redirect user to homepage + res.redirect('/'); +}); + +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(){ + io.set('close timeout', '50'); +}); + +io.sockets.on('connection', function(client) { + + console.log('Client connected'); + + // client add new employee + client.on('add employee', function(data) { + console.log("addemployee ") + addemployee(data); + }); + client.on('data', function(data) { + console.log("data" + JSON.stringify(data)) + testcollection.insert(data, function(err, result) { + if (err) throw err; + if (result) console.log('Added!'); + }); + }); + + }); + + + + diff --git a/ninja-store/public/form2js/form2js.js b/ninja-store/public/form2js/form2js.js new file mode 100644 index 0000000..c41106d --- /dev/null +++ b/ninja-store/public/form2js/form2js.js @@ -0,0 +1,325 @@ +/** + * Copyright (c) 2010 Maxim Vasiliev + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + * @author Maxim Vasiliev + * Date: 09.09.2010 + * Time: 19:02:33 + */ + + +var form2js = (function() +{ + "use strict"; + + /** + * Returns form values represented as Javascript object + * "name" attribute defines structure of resulting object + * + * @param rootNode {Element|String} root form element (or it's id) or array of root elements + * @param delimiter {String} structure parts delimiter defaults to '.' + * @param skipEmpty {Boolean} should skip empty text values, defaults to true + * @param nodeCallback {Function} custom function to get node value + * @param useIdIfEmptyName {Boolean} if true value of id attribute of field will be used if name of field is empty + */ + function form2js(rootNode, delimiter, skipEmpty, nodeCallback, useIdIfEmptyName) + { + if (typeof skipEmpty == 'undefined' || skipEmpty == null) skipEmpty = true; + if (typeof delimiter == 'undefined' || delimiter == null) delimiter = '.'; + if (arguments.length < 5) useIdIfEmptyName = false; + + rootNode = typeof rootNode == 'string' ? document.getElementById(rootNode) : rootNode; + + var formValues = [], + currNode, + i = 0; + + /* If rootNode is array - combine values */ + if (rootNode.constructor == Array || (typeof NodeList != "undefined" && rootNode.constructor == NodeList)) + { + while(currNode = rootNode[i++]) + { + formValues = formValues.concat(getFormValues(currNode, nodeCallback, useIdIfEmptyName)); + } + } + else + { + formValues = getFormValues(rootNode, nodeCallback, useIdIfEmptyName); + } + + return processNameValues(formValues, skipEmpty, delimiter); + } + + /** + * Processes collection of { name: 'name', value: 'value' } objects. + * @param nameValues + * @param skipEmpty if true skips elements with value == '' or value == null + * @param delimiter + */ + function processNameValues(nameValues, skipEmpty, delimiter) + { + var result = {}, + arrays = {}, + i, j, k, l, + value, + nameParts, + currResult, + arrNameFull, + arrName, + arrIdx, + namePart, + name, + _nameParts; + + for (i = 0; i < nameValues.length; i++) + { + value = nameValues[i].value; + + if (skipEmpty && (value === '' || value === null)) continue; + + name = nameValues[i].name; + _nameParts = name.split(delimiter); + nameParts = []; + currResult = result; + arrNameFull = ''; + + for(j = 0; j < _nameParts.length; j++) + { + namePart = _nameParts[j].split(']['); + if (namePart.length > 1) + { + for(k = 0; k < namePart.length; k++) + { + if (k == 0) + { + namePart[k] = namePart[k] + ']'; + } + else if (k == namePart.length - 1) + { + namePart[k] = '[' + namePart[k]; + } + else + { + namePart[k] = '[' + namePart[k] + ']'; + } + + arrIdx = namePart[k].match(/([a-z_]+)?\[([a-z_][a-z0-9_]+?)\]/i); + if (arrIdx) + { + for(l = 1; l < arrIdx.length; l++) + { + if (arrIdx[l]) nameParts.push(arrIdx[l]); + } + } + else{ + nameParts.push(namePart[k]); + } + } + } + else + nameParts = nameParts.concat(namePart); + } + + for (j = 0; j < nameParts.length; j++) + { + namePart = nameParts[j]; + + if (namePart.indexOf('[]') > -1 && j == nameParts.length - 1) + { + arrName = namePart.substr(0, namePart.indexOf('[')); + arrNameFull += arrName; + + if (!currResult[arrName]) currResult[arrName] = []; + currResult[arrName].push(value); + } + else if (namePart.indexOf('[') > -1) + { + arrName = namePart.substr(0, namePart.indexOf('[')); + arrIdx = namePart.replace(/(^([a-z_]+)?\[)|(\]$)/gi, ''); + + /* Unique array name */ + arrNameFull += '_' + arrName + '_' + arrIdx; + + /* + * Because arrIdx in field name can be not zero-based and step can be + * other than 1, we can't use them in target array directly. + * Instead we're making a hash where key is arrIdx and value is a reference to + * added array element + */ + + if (!arrays[arrNameFull]) arrays[arrNameFull] = {}; + if (arrName != '' && !currResult[arrName]) currResult[arrName] = []; + + if (j == nameParts.length - 1) + { + if (arrName == '') + { + currResult.push(value); + arrays[arrNameFull][arrIdx] = currResult[currResult.length - 1]; + } + else + { + currResult[arrName].push(value); + arrays[arrNameFull][arrIdx] = currResult[arrName][currResult[arrName].length - 1]; + } + } + else + { + if (!arrays[arrNameFull][arrIdx]) + { + if ((/^[a-z_]+\[?/i).test(nameParts[j+1])) currResult[arrName].push({}); + else currResult[arrName].push([]); + + arrays[arrNameFull][arrIdx] = currResult[arrName][currResult[arrName].length - 1]; + } + } + + currResult = arrays[arrNameFull][arrIdx]; + } + else + { + arrNameFull += namePart; + + if (j < nameParts.length - 1) /* Not the last part of name - means object */ + { + if (!currResult[namePart]) currResult[namePart] = {}; + currResult = currResult[namePart]; + } + else + { + currResult[namePart] = value; + } + } + } + } + + return result; + } + + function getFormValues(rootNode, nodeCallback, useIdIfEmptyName) + { + var result = extractNodeValues(rootNode, nodeCallback, useIdIfEmptyName); + return result.length > 0 ? result : getSubFormValues(rootNode, nodeCallback, useIdIfEmptyName); + } + + function getSubFormValues(rootNode, nodeCallback, useIdIfEmptyName) + { + var result = [], + currentNode = rootNode.firstChild; + + while (currentNode) + { + result = result.concat(extractNodeValues(currentNode, nodeCallback, useIdIfEmptyName)); + currentNode = currentNode.nextSibling; + } + + return result; + } + + function extractNodeValues(node, nodeCallback, useIdIfEmptyName) { + var callbackResult, fieldValue, result, fieldName = getFieldName(node, useIdIfEmptyName); + + callbackResult = nodeCallback && nodeCallback(node); + + if (callbackResult && callbackResult.name) { + result = [callbackResult]; + } + else if (fieldName != '' && node.nodeName.match(/INPUT|TEXTAREA/i)) { + fieldValue = getFieldValue(node); + result = [ { name: fieldName, value: fieldValue} ]; + } + else if (fieldName != '' && node.nodeName.match(/SELECT/i)) { + fieldValue = getFieldValue(node); + result = [ { name: fieldName.replace(/\[\]$/, ''), value: fieldValue } ]; + } + else { + result = getSubFormValues(node, nodeCallback, useIdIfEmptyName); + } + + return result; + } + + function getFieldName(node, useIdIfEmptyName) + { + if (node.name && node.name != '') return node.name; + else if (useIdIfEmptyName && node.id && node.id != '') return node.id; + else return ''; + } + + + function getFieldValue(fieldNode) + { + if (fieldNode.disabled) return null; + + switch (fieldNode.nodeName) { + case 'INPUT': + case 'TEXTAREA': + switch (fieldNode.type.toLowerCase()) { + case 'radio': + case 'checkbox': + if (fieldNode.checked && fieldNode.value === "true") return true; + if (!fieldNode.checked && fieldNode.value === "true") return false; + if (fieldNode.checked) return fieldNode.value; + break; + + case 'button': + case 'reset': + case 'submit': + case 'image': + return ''; + break; + + default: + return fieldNode.value; + break; + } + break; + + case 'SELECT': + return getSelectedOptionValue(fieldNode); + break; + + default: + break; + } + + return null; + } + + function getSelectedOptionValue(selectNode) + { + var multiple = selectNode.multiple, + result = [], + options, + i, l; + + if (!multiple) return selectNode.value; + + for (options = selectNode.getElementsByTagName("option"), i = 0, l = options.length; i < l; i++) + { + if (options[i].selected) result.push(options[i].value); + } + + return result; + } + + return form2js; + +})(); diff --git a/ninja-store/public/form2js/jquery.toObject.js b/ninja-store/public/form2js/jquery.toObject.js new file mode 100644 index 0000000..3e5c9de --- /dev/null +++ b/ninja-store/public/form2js/jquery.toObject.js @@ -0,0 +1,66 @@ +/** + * Copyright (c) 2010 Maxim Vasiliev + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + * @author Maxim Vasiliev + * Date: 29.06.11 + * Time: 20:09 + */ + +(function($){ + + /** + * jQuery wrapper for form2object() + * Extracts data from child inputs into javascript object + */ + $.fn.toObject = function(options) + { + var result = [], + settings = { + mode: 'first', // what to convert: 'all' or 'first' matched node + delimiter: ".", + skipEmpty: true, + nodeCallback: null, + useIdIfEmptyName: false + }; + + if (options) + { + $.extend(settings, options); + } + + switch(settings.mode) + { + case 'first': + return form2js(this.get(0), settings.delimiter, settings.skipEmpty, settings.nodeCallback, settings.useIdIfEmptyName); + break; + case 'all': + this.each(function(){ + result.push(form2js(this, settings.delimiter, settings.skipEmpty, settings.nodeCallback, settings.useIdIfEmptyName)); + }); + return result; + break; + case 'combine': + return form2js(Array.prototype.slice.call(this), settings.delimiter, settings.skipEmpty, settings.nodeCallback, settings.useIdIfEmptyName); + break; + } + } + +})(jQuery); \ No newline at end of file diff --git a/ninja-store/public/form2js/js2form.js b/ninja-store/public/form2js/js2form.js new file mode 100644 index 0000000..78f4fd5 --- /dev/null +++ b/ninja-store/public/form2js/js2form.js @@ -0,0 +1,309 @@ +/** + * Copyright (c) 2010 Maxim Vasiliev + * + * Permission is hereby granted, free of charge, to any person obtaining a copy + * of this software and associated documentation files (the "Software"), to deal + * in the Software without restriction, including without limitation the rights + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + * copies of the Software, and to permit persons to whom the Software is + * furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + * THE SOFTWARE. + * + * @author Maxim Vasiliev + * Date: 19.09.11 + * Time: 23:40 + */ + +var js2form = (function() +{ + "use strict"; + + var _subArrayRegexp = /^\[\d+?\]/, + _subObjectRegexp = /^[a-zA-Z_][a-zA-Z_0-9]+/, + _arrayItemRegexp = /\[[0-9]+?\]$/, + _lastIndexedArrayRegexp = /(.*)(\[)([0-9]*)(\])$/, + _arrayOfArraysRegexp = /\[([0-9]+)\]\[([0-9]+)\]/g, + _inputOrTextareaRegexp = /INPUT|TEXTAREA/i; + + /** + * + * @param rootNode + * @param data + * @param delimiter + * @param nodeCallback + * @param useIdIfEmptyName + */ + function js2form(rootNode, data, delimiter, nodeCallback, useIdIfEmptyName) + { + if (arguments.length < 3) delimiter = '.'; + if (arguments.length < 4) nodeCallback = null; + if (arguments.length < 5) useIdIfEmptyName = false; + + var fieldValues, + formFieldsByName; + + fieldValues = object2array(data); + formFieldsByName = getFields(rootNode, useIdIfEmptyName, delimiter, {}, true); + + for (var i = 0; i < fieldValues.length; i++) + { + var fieldName = fieldValues[i].name, + fieldValue = fieldValues[i].value; + + if (typeof formFieldsByName[fieldName] != 'undefined') + { + setValue(formFieldsByName[fieldName], fieldValue); + } + else if (typeof formFieldsByName[fieldName.replace(_arrayItemRegexp, '[]')] != 'undefined') + { + setValue(formFieldsByName[fieldName.replace(_arrayItemRegexp, '[]')], fieldValue); + } + } + } + + function setValue(field, value) + { + var children, i, l; + + if (field instanceof Array) + { + for(i = 0; i < field.length; i++) + { + if (field[i].value == value) field[i].checked = true; + } + } + else if (_inputOrTextareaRegexp.test(field.nodeName)) + { + field.value = value; + } + else if (/SELECT/i.test(field.nodeName)) + { + children = field.getElementsByTagName('option'); + for (i = 0,l = children.length; i < l; i++) + { + if (children[i].value == value) + { + children[i].selected = true; + if (field.multiple) break; + } + else if (!field.multiple) + { + children[i].selected = false; + } + } + } + } + + function getFields(rootNode, useIdIfEmptyName, delimiter, arrayIndexes, shouldClean) + { + if (arguments.length < 4) arrayIndexes = {}; + + var result = {}, + currNode = rootNode.firstChild, + name, nameNormalized, + subFieldName, + i, j, l, + options; + + while (currNode) + { + name = ''; + + if (currNode.name && currNode.name != '') + { + name = currNode.name; + } + else if (useIdIfEmptyName && currNode.id && currNode.id != '') + { + name = currNode.id; + } + + if (name == '') + { + var subFields = getFields(currNode, useIdIfEmptyName, delimiter, arrayIndexes, shouldClean); + for (subFieldName in subFields) + { + if (typeof result[subFieldName] == 'undefined') + { + result[subFieldName] = subFields[subFieldName]; + } + else + { + for (i = 0; i < subFields[subFieldName].length; i++) + { + result[subFieldName].push(subFields[subFieldName][i]); + } + } + } + } + else + { + if (/SELECT/i.test(currNode.nodeName)) + { + for(j = 0, options = currNode.getElementsByTagName('option'), l = options.length; j < l; j++) + { + if (shouldClean) + { + options[j].selected = false; + } + + nameNormalized = normalizeName(name, delimiter, arrayIndexes); + result[nameNormalized] = currNode; + } + } + else if (/INPUT/i.test(currNode.nodeName) && /CHECKBOX|RADIO/i.test(currNode.type)) + { + if(shouldClean) + { + currNode.checked = false; + } + + nameNormalized = normalizeName(name, delimiter, arrayIndexes); + nameNormalized = nameNormalized.replace(_arrayItemRegexp, '[]'); + if (!result[nameNormalized]) result[nameNormalized] = []; + result[nameNormalized].push(currNode); + } + else + { + if (shouldClean) + { + currNode.value = ''; + } + + nameNormalized = normalizeName(name, delimiter, arrayIndexes); + result[nameNormalized] = currNode; + } + } + + currNode = currNode.nextSibling; + } + + return result; + } + + /** + * Normalizes names of arrays, puts correct indexes (consecutive and ordered by element appearance in HTML) + * @param name + * @param delimiter + * @param arrayIndexes + */ + function normalizeName(name, delimiter, arrayIndexes) + { + var nameChunksNormalized = [], + nameChunks = name.split(delimiter), + currChunk, + nameMatches, + nameNormalized, + currIndex, + newIndex, + i; + + name = name.replace(_arrayOfArraysRegexp, '[$1].[$2]'); + for (i = 0; i < nameChunks.length; i++) + { + currChunk = nameChunks[i]; + nameChunksNormalized.push(currChunk); + nameMatches = currChunk.match(_lastIndexedArrayRegexp); + if (nameMatches != null) + { + nameNormalized = nameChunksNormalized.join(delimiter); + currIndex = nameNormalized.replace(_lastIndexedArrayRegexp, '$3'); + nameNormalized = nameNormalized.replace(_lastIndexedArrayRegexp, '$1'); + + if (typeof (arrayIndexes[nameNormalized]) == 'undefined') + { + arrayIndexes[nameNormalized] = { + lastIndex: -1, + indexes: {} + }; + } + + if (currIndex == '' || typeof arrayIndexes[nameNormalized].indexes[currIndex] == 'undefined') + { + arrayIndexes[nameNormalized].lastIndex++; + arrayIndexes[nameNormalized].indexes[currIndex] = arrayIndexes[nameNormalized].lastIndex; + } + + newIndex = arrayIndexes[nameNormalized].indexes[currIndex]; + nameChunksNormalized[nameChunksNormalized.length - 1] = currChunk.replace(_lastIndexedArrayRegexp, '$1$2' + newIndex + '$4'); + } + } + + nameNormalized = nameChunksNormalized.join(delimiter); + nameNormalized = nameNormalized.replace('].[', ']['); + return nameNormalized; + } + + function object2array(obj, lvl) + { + var result = [], i, name; + + if (arguments.length == 1) lvl = 0; + + if (obj == null) + { + result = [{ name: "", value: null }]; + } + else if (typeof obj == 'string' || typeof obj == 'number' || typeof obj == 'date' || typeof obj == 'boolean') + { + result = [ + { name: "", value : obj } + ]; + } + else if (obj instanceof Array) + { + for (i = 0; i < obj.length; i++) + { + name = "[" + i + "]"; + result = result.concat(getSubValues(obj[i], name, lvl + 1)); + } + } + else + { + for (i in obj) + { + name = i; + result = result.concat(getSubValues(obj[i], name, lvl + 1)); + } + } + + return result; + } + + function getSubValues(subObj, name, lvl) + { + var itemName; + var result = [], tempResult = object2array(subObj, lvl + 1), i, tempItem; + + for (i = 0; i < tempResult.length; i++) + { + itemName = name; + if (_subArrayRegexp.test(tempResult[i].name)) + { + itemName += tempResult[i].name; + } + else if (_subObjectRegexp.test(tempResult[i].name)) + { + itemName += '.' + tempResult[i].name; + } + + tempItem = { name: itemName, value: tempResult[i].value }; + result.push(tempItem); + } + + return result; + } + + return js2form; + +})(); \ No newline at end of file diff --git a/ninja-store/public/form2js/json2.js b/ninja-store/public/form2js/json2.js new file mode 100644 index 0000000..6bdea10 --- /dev/null +++ b/ninja-store/public/form2js/json2.js @@ -0,0 +1,482 @@ +/* + http://www.JSON.org/json2.js + 2010-08-25 + + Public Domain. + + NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. + + See http://www.JSON.org/js.html + + + This code should be minified before deployment. + See http://javascript.crockford.com/jsmin.html + + USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO + NOT CONTROL. + + + This file creates a global JSON object containing two methods: stringify + and parse. + + JSON.stringify(value, replacer, space) + value any JavaScript value, usually an object or array. + + replacer an optional parameter that determines how object + values are stringified for objects. It can be a + function or an array of strings. + + space an optional parameter that specifies the indentation + of nested structures. If it is omitted, the text will + be packed without extra whitespace. If it is a number, + it will specify the number of spaces to indent at each + level. If it is a string (such as '\t' or ' '), + it contains the characters used to indent at each level. + + This method produces a JSON text from a JavaScript value. + + When an object value is found, if the object contains a toJSON + method, its toJSON method will be called and the result will be + stringified. A toJSON method does not serialize: it returns the + value represented by the name/value pair that should be serialized, + or undefined if nothing should be serialized. The toJSON method + will be passed the key associated with the value, and this will be + bound to the value + + For example, this would serialize Dates as ISO strings. + + Date.prototype.toJSON = function (key) { + function f(n) { + // Format integers to have at least two digits. + return n < 10 ? '0' + n : n; + } + + return this.getUTCFullYear() + '-' + + f(this.getUTCMonth() + 1) + '-' + + f(this.getUTCDate()) + 'T' + + f(this.getUTCHours()) + ':' + + f(this.getUTCMinutes()) + ':' + + f(this.getUTCSeconds()) + 'Z'; + }; + + You can provide an optional replacer method. It will be passed the + key and value of each member, with this bound to the containing + object. The value that is returned from your method will be + serialized. If your method returns undefined, then the member will + be excluded from the serialization. + + If the replacer parameter is an array of strings, then it will be + used to select the members to be serialized. It filters the results + such that only members with keys listed in the replacer array are + stringified. + + Values that do not have JSON representations, such as undefined or + functions, will not be serialized. Such values in objects will be + dropped; in arrays they will be replaced with null. You can use + a replacer function to replace those with JSON values. + JSON.stringify(undefined) returns undefined. + + The optional space parameter produces a stringification of the + value that is filled with line breaks and indentation to make it + easier to read. + + If the space parameter is a non-empty string, then that string will + be used for indentation. If the space parameter is a number, then + the indentation will be that many spaces. + + Example: + + text = JSON.stringify(['e', {pluribus: 'unum'}]); + // text is '["e",{"pluribus":"unum"}]' + + + text = JSON.stringify(['e', {pluribus: 'unum'}], null, '\t'); + // text is '[\n\t"e",\n\t{\n\t\t"pluribus": "unum"\n\t}\n]' + + text = JSON.stringify([new Date()], function (key, value) { + return this[key] instanceof Date ? + 'Date(' + this[key] + ')' : value; + }); + // text is '["Date(---current time---)"]' + + + JSON.parse(text, reviver) + This method parses a JSON text to produce an object or array. + It can throw a SyntaxError exception. + + The optional reviver parameter is a function that can filter and + transform the results. It receives each of the keys and values, + and its return value is used instead of the original value. + If it returns what it received, then the structure is not modified. + If it returns undefined then the member is deleted. + + Example: + + // Parse the text. Values that look like ISO date strings will + // be converted to Date objects. + + myData = JSON.parse(text, function (key, value) { + var a; + if (typeof value === 'string') { + a = +/^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/.exec(value); + if (a) { + return new Date(Date.UTC(+a[1], +a[2] - 1, +a[3], +a[4], + +a[5], +a[6])); + } + } + return value; + }); + + myData = JSON.parse('["Date(09/09/2001)"]', function (key, value) { + var d; + if (typeof value === 'string' && + value.slice(0, 5) === 'Date(' && + value.slice(-1) === ')') { + d = new Date(value.slice(5, -1)); + if (d) { + return d; + } + } + return value; + }); + + + This is a reference implementation. You are free to copy, modify, or + redistribute. +*/ + +/*jslint evil: true, strict: false */ + +/*members "", "\b", "\t", "\n", "\f", "\r", "\"", JSON, "\\", apply, + call, charCodeAt, getUTCDate, getUTCFullYear, getUTCHours, + getUTCMinutes, getUTCMonth, getUTCSeconds, hasOwnProperty, join, + lastIndex, length, parse, prototype, push, replace, slice, stringify, + test, toJSON, toString, valueOf +*/ + + +// Create a JSON object only if one does not already exist. We create the +// methods in a closure to avoid creating global variables. + +if (!this.JSON) { + this.JSON = {}; +} + +(function () { + + function f(n) { + // Format integers to have at least two digits. + return n < 10 ? '0' + n : n; + } + + if (typeof Date.prototype.toJSON !== 'function') { + + Date.prototype.toJSON = function (key) { + + return isFinite(this.valueOf()) ? + this.getUTCFullYear() + '-' + + f(this.getUTCMonth() + 1) + '-' + + f(this.getUTCDate()) + 'T' + + f(this.getUTCHours()) + ':' + + f(this.getUTCMinutes()) + ':' + + f(this.getUTCSeconds()) + 'Z' : null; + }; + + String.prototype.toJSON = + Number.prototype.toJSON = + Boolean.prototype.toJSON = function (key) { + return this.valueOf(); + }; + } + + var cx = /[\u0000\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, + escapable = /[\\\"\x00-\x1f\x7f-\x9f\u00ad\u0600-\u0604\u070f\u17b4\u17b5\u200c-\u200f\u2028-\u202f\u2060-\u206f\ufeff\ufff0-\uffff]/g, + gap, + indent, + meta = { // table of character substitutions + '\b': '\\b', + '\t': '\\t', + '\n': '\\n', + '\f': '\\f', + '\r': '\\r', + '"' : '\\"', + '\\': '\\\\' + }, + rep; + + + function quote(string) { + +// If the string contains no control characters, no quote characters, and no +// backslash characters, then we can safely slap some quotes around it. +// Otherwise we must also replace the offending characters with safe escape +// sequences. + + escapable.lastIndex = 0; + return escapable.test(string) ? + '"' + string.replace(escapable, function (a) { + var c = meta[a]; + return typeof c === 'string' ? c : + '\\u' + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); + }) + '"' : + '"' + string + '"'; + } + + + function str(key, holder) { + +// Produce a string from holder[key]. + + var i, // The loop counter. + k, // The member key. + v, // The member value. + length, + mind = gap, + partial, + value = holder[key]; + +// If the value has a toJSON method, call it to obtain a replacement value. + + if (value && typeof value === 'object' && + typeof value.toJSON === 'function') { + value = value.toJSON(key); + } + +// If we were called with a replacer function, then call the replacer to +// obtain a replacement value. + + if (typeof rep === 'function') { + value = rep.call(holder, key, value); + } + +// What happens next depends on the value's type. + + switch (typeof value) { + case 'string': + return quote(value); + + case 'number': + +// JSON numbers must be finite. Encode non-finite numbers as null. + + return isFinite(value) ? String(value) : 'null'; + + case 'boolean': + case 'null': + +// If the value is a boolean or null, convert it to a string. Note: +// typeof null does not produce 'null'. The case is included here in +// the remote chance that this gets fixed someday. + + return String(value); + +// If the type is 'object', we might be dealing with an object or an array or +// null. + + case 'object': + +// Due to a specification blunder in ECMAScript, typeof null is 'object', +// so watch out for that case. + + if (!value) { + return 'null'; + } + +// Make an array to hold the partial results of stringifying this object value. + + gap += indent; + partial = []; + +// Is the value an array? + + if (Object.prototype.toString.apply(value) === '[object Array]') { + +// The value is an array. Stringify every element. Use null as a placeholder +// for non-JSON values. + + length = value.length; + for (i = 0; i < length; i += 1) { + partial[i] = str(i, value) || 'null'; + } + +// Join all of the elements together, separated with commas, and wrap them in +// brackets. + + v = partial.length === 0 ? '[]' : + gap ? '[\n' + gap + + partial.join(',\n' + gap) + '\n' + + mind + ']' : + '[' + partial.join(',') + ']'; + gap = mind; + return v; + } + +// If the replacer is an array, use it to select the members to be stringified. + + if (rep && typeof rep === 'object') { + length = rep.length; + for (i = 0; i < length; i += 1) { + k = rep[i]; + if (typeof k === 'string') { + v = str(k, value); + if (v) { + partial.push(quote(k) + (gap ? ': ' : ':') + v); + } + } + } + } else { + +// Otherwise, iterate through all of the keys in the object. + + for (k in value) { + if (Object.hasOwnProperty.call(value, k)) { + v = str(k, value); + if (v) { + partial.push(quote(k) + (gap ? ': ' : ':') + v); + } + } + } + } + +// Join all of the member texts together, separated with commas, +// and wrap them in braces. + + v = partial.length === 0 ? '{}' : + gap ? '{\n' + gap + partial.join(',\n' + gap) + '\n' + + mind + '}' : '{' + partial.join(',') + '}'; + gap = mind; + return v; + } + } + +// If the JSON object does not yet have a stringify method, give it one. + + if (typeof JSON.stringify !== 'function') { + JSON.stringify = function (value, replacer, space) { + +// The stringify method takes a value and an optional replacer, and an optional +// space parameter, and returns a JSON text. The replacer can be a function +// that can replace values, or an array of strings that will select the keys. +// A default replacer method can be provided. Use of the space parameter can +// produce text that is more easily readable. + + var i; + gap = ''; + indent = ''; + +// If the space parameter is a number, make an indent string containing that +// many spaces. + + if (typeof space === 'number') { + for (i = 0; i < space; i += 1) { + indent += ' '; + } + +// If the space parameter is a string, it will be used as the indent string. + + } else if (typeof space === 'string') { + indent = space; + } + +// If there is a replacer, it must be a function or an array. +// Otherwise, throw an error. + + rep = replacer; + if (replacer && typeof replacer !== 'function' && + (typeof replacer !== 'object' || + typeof replacer.length !== 'number')) { + throw new Error('JSON.stringify'); + } + +// Make a fake root object containing our value under the key of ''. +// Return the result of stringifying the value. + + return str('', {'': value}); + }; + } + + +// If the JSON object does not yet have a parse method, give it one. + + if (typeof JSON.parse !== 'function') { + JSON.parse = function (text, reviver) { + +// The parse method takes a text and an optional reviver function, and returns +// a JavaScript value if the text is a valid JSON text. + + var j; + + function walk(holder, key) { + +// The walk method is used to recursively walk the resulting structure so +// that modifications can be made. + + var k, v, value = holder[key]; + if (value && typeof value === 'object') { + for (k in value) { + if (Object.hasOwnProperty.call(value, k)) { + v = walk(value, k); + if (v !== undefined) { + value[k] = v; + } else { + delete value[k]; + } + } + } + } + return reviver.call(holder, key, value); + } + + +// Parsing happens in four stages. In the first stage, we replace certain +// Unicode characters with escape sequences. JavaScript handles many characters +// incorrectly, either silently deleting them, or treating them as line endings. + + text = String(text); + cx.lastIndex = 0; + if (cx.test(text)) { + text = text.replace(cx, function (a) { + return '\\u' + + ('0000' + a.charCodeAt(0).toString(16)).slice(-4); + }); + } + +// In the second stage, we run the text against regular expressions that look +// for non-JSON patterns. We are especially concerned with '()' and 'new' +// because they can cause invocation, and '=' because it can cause mutation. +// But just to be safe, we want to reject all unexpected forms. + +// We split the second stage into 4 regexp operations in order to work around +// crippling inefficiencies in IE's and Safari's regexp engines. First we +// replace the JSON backslash pairs with '@' (a non-JSON character). Second, we +// replace all simple value tokens with ']' characters. Third, we delete all +// open brackets that follow a colon or comma or that begin the text. Finally, +// we look to see that the remaining characters are only whitespace or ']' or +// ',' or ':' or '{' or '}'. If that is so, then the text is safe for eval. + + if (/^[\],:{}\s]*$/ +.test(text.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, '@') +.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, ']') +.replace(/(?:^|:|,)(?:\s*\[)+/g, ''))) { + +// In the third stage we use the eval function to compile the text into a +// JavaScript structure. The '{' operator is subject to a syntactic ambiguity +// in JavaScript: it can begin a block or an object literal. We wrap the text +// in parens to eliminate the ambiguity. + + j = eval('(' + text + ')'); + +// In the optional fourth stage, we recursively walk the new structure, passing +// each name/value pair to a reviver function for possible transformation. + + return typeof reviver === 'function' ? + walk({'': j}, '') : j; + } + +// If the text is not JSON parseable, then a SyntaxError is thrown. + + throw new SyntaxError('JSON.parse'); + }; + } +}()); diff --git a/ninja-store/public/stylesheets/style.css b/ninja-store/public/stylesheets/style.css index a8f22d7..6856e1f 100644 --- a/ninja-store/public/stylesheets/style.css +++ b/ninja-store/public/stylesheets/style.css @@ -7,7 +7,7 @@ a { color: #0069ff; } #container { - width: 450px; + width: 90%; margin: 0 auto; padding: 40px 20px; background: #fff; @@ -23,3 +23,22 @@ a { #userbar { margin-bottom: 10px; } +label { + margin-left: 20px; + margin-right: 5px; + font-size: 12px; + background: #f7f7f7; + padding: 4px 10px; + float: left; + clear: right; + width: 100px; + border: 1px solid #ccc; + vertical-align: middle; +} +input[type="text"] { + height: 22px; + padding-left: 10px; + padding-right: 10px; + border: 1px solid #ccc; + vertical-align: middle; +} diff --git a/ninja-store/public/stylesheets/style.styl b/ninja-store/public/stylesheets/style.styl index ea6c1c7..bd78e37 100644 --- a/ninja-store/public/stylesheets/style.styl +++ b/ninja-store/public/stylesheets/style.styl @@ -7,7 +7,7 @@ a color: #0069FF #container - width: 450px + width: 90% margin: 0 auto padding: 40px 20px background: #fff @@ -21,4 +21,23 @@ a margin: 20px 0 50px #userbar - margin-bottom: 10px \ No newline at end of file + margin-bottom: 10px + +label + margin-left:20px + margin-right:5px + font-size:12px + background:#f7f7f7 + padding: 4px 10px + float: left + clear: right + width: 100px + border:1px solid #cccccc + vertical-align: middle + +input[type="text"] + height:22px + padding-left:10px + padding-right:10px + border:1px solid #cccccc + vertical-align: middle diff --git a/ninja-store/public/stylesheets/style.styl~ b/ninja-store/public/stylesheets/style.styl~ new file mode 100644 index 0000000..83aaabb --- /dev/null +++ b/ninja-store/public/stylesheets/style.styl~ @@ -0,0 +1,43 @@ +body + padding: 50px + font: 14px "Lucida Grande", Helvetica, Arial, sans-serif + background: #ccc + +a + color: #0069FF + +#container + width: 450px + margin: 0 auto + padding: 40px 20px + background: #fff + box-shadow: 1px 3px 3px #333 + border-radius: 5px + +#logo + text-align: center + +#display + margin: 20px 0 50px + +#userbar + margin-bottom: 10px + +label + margin-left:20px + margin-right:5px + font-size:12px + background:#f7f7f7 + padding: 4px 10px + float: left + clear: right + width: 100px + border:1px solid #cccccc + vertical-align: middle + +input[type="text"] + height:22px + padding-left:10px + padding-right:10px + border:1px solid #cccccc + vertical-align: middle diff --git a/ninja-store/routes/db_helper.js b/ninja-store/routes/db_helper.js index aab8169..94bd1fd 100644 --- a/ninja-store/routes/db_helper.js +++ b/ninja-store/routes/db_helper.js @@ -3,10 +3,10 @@ var MYSQL_USERNAME = 'root'; var MYSQL_PASSWORD = 'condoms'; // init; -var client = mysql.createClient({ - user: MYSQL_USERNAME, - password: MYSQL_PASSWORD, -}); +//var client = mysql.createClient({ +// user: MYSQL_USERNAME, +// password: MYSQL_PASSWORD, +//}); // destroy old db //client.query('DROP DATABASE IF EXISTS mynode_db', function(err) { @@ -18,7 +18,7 @@ var client = mysql.createClient({ // if (err) { throw err; } //}); //console.log('database mynode_db is created.'); -client.query('USE mynode_db'); +//client.query('USE mynode_db'); // create table //var sql = ""+ diff --git a/ninja-store/routes/db_helper.js~ b/ninja-store/routes/db_helper.js~ new file mode 100644 index 0000000..aab8169 --- /dev/null +++ b/ninja-store/routes/db_helper.js~ @@ -0,0 +1,67 @@ +var mysql = require('mysql'); +var MYSQL_USERNAME = 'root'; +var MYSQL_PASSWORD = 'condoms'; + +// init; +var client = mysql.createClient({ + user: MYSQL_USERNAME, + password: MYSQL_PASSWORD, +}); + +// destroy old db +//client.query('DROP DATABASE IF EXISTS mynode_db', function(err) { +// if (err) { throw err; } +//}); + +// create database +//client.query('CREATE DATABASE mynode_db', function(err) { +// if (err) { throw err; } +//}); +//console.log('database mynode_db is created.'); +client.query('USE mynode_db'); + +// create table +//var sql = ""+ +//"create table employees("+ +//" id int unsigned not null auto_increment,"+ +//" name varchar(50) not null default 'unknown',"+ +//" salary dec(10,2) not null default 100000.00,"+ +//" primary key (id)"+ +//");"; +//client.query(sql, function(err) { +// if (err) { throw err; } +//}); +//console.log('table employees is created.'); + + +// function to create employee +exports.add_employee = function(data, callback) { +console.log('Employee '+data.name+' has salary '+data.salary); + client.query("insert into employees (name, salary) values (?,?)", [data.name, data.salary], function(err, info) { + // callback function returns last insert id + callback(info.insertId); + console.log('Employee '+data.name+' has salary '+data.salary); + }); +} + +// function to get list of employees + exports.get_employees = function(callback) { + client.query("select * from employees", function(err, results, fields) { +//callback function returns employees array + callback(results); + }); + } + +// function to get data from database +exports.get_all = function(data, callback) { +console.log('Table '+data); + client.query("select * from " + data, function(err, results, fields) { + // callback function returns employees array + // Uncomment these if you want lots of feedback + // console.log('Results:'); + // console.log(results); + // console.log('Field metadata:'); + // console.log(fields); + callback(err,results,fields); + }); +} diff --git a/ninja-store/views/items.jade b/ninja-store/views/items.jade index 5fee85a..8a74dca 100644 --- a/ninja-store/views/items.jade +++ b/ninja-store/views/items.jade @@ -5,34 +5,25 @@ include userbar 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] + 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='submit', id='save', value='Save') - ul#employees form#myForm ol(id='note_area') - li(class='note') - input(type='text', name='note_1', value='note') + li(class='note_T', style='display: none') + label Note + input(type='text', name='activity.note[]', value='Note', disabled='disabled') a(style='cursor:pointer;color:blue;', onclick='this.parentNode.parentNode.removeChild(this.parentNode);') Remove Field ol(id='exercise_area') - li(class='exercise') - input(type='text', name='exercise_1, value='exercise') - a(style='cursor:pointer;color:blue;', onclick='this.parentNode.parentNode.removeChild(this.parentNode);') Remove Field - li(id='exercise_target') - input(type='button', class='AddNeut', value='Add note Field', data-field='note_area', data-area='note_', data-limit='0' ) - input(type='button', class='AddNeut', value='Add exercise Field', data-field='exercise_area', data-area='exercise_', data-limit='0' ) - input(type='submit', id='save', value='Save') - - li(class='exercise_template') - input(type='text', name='exercise_1, value='exercise') - a(style='cursor:pointer;color:blue;', onclick='this.parentNode.parentNode.removeChild(this.parentNode);') Remove Field - \ No newline at end of file + 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[x].weight', value='Weight', disabled='disabled') + a(style='cursor:pointer;color:blue;', onclick='this.parentNode.parentNode.removeChild(this.parentNode);') Remove Field + ul#employees + + diff --git a/ninja-store/views/items.jade~ b/ninja-store/views/items.jade~ new file mode 100644 index 0000000..ec96813 --- /dev/null +++ b/ninja-store/views/items.jade~ @@ -0,0 +1,30 @@ +#container + #logo + img(src='/images/logo.png') + #display + include userbar + + + div + 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='submit', id='save', value='Save') + + + form#myForm + ol(id='note_area') + li(class='note_T', style='display: none') + label Note + input(type='text', name='activity.note[]', value='Note', disabled='disabled') + a(style='cursor:pointer;color:blue;', onclick='this.parentNode.parentNode.removeChild(this.parentNode);') Remove Field + ol(id='exercise_area') + 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[x].weight', value='Weight', disabled='disabled') + a(style='cursor:pointer;color:blue;', onclick='this.parentNode.parentNode.removeChild(this.parentNode);') Remove Field + ul#employees + + diff --git a/ninja-store/views/layout.jade b/ninja-store/views/layout.jade index ff80968..5f3ffac 100644 --- a/ninja-store/views/layout.jade +++ b/ninja-store/views/layout.jade @@ -5,74 +5,63 @@ html link(rel='stylesheet', href='/stylesheets/style.css') script(src='http://code.jquery.com/jquery-1.6.1.min.js') script(src='/socket.io/socket.io.js') + script(src='/form2js/form2js.js') + script(src='/form2js/jquery.toObject.js') + script(src='/form2js/json2.js') script //$(document).ready(function() { var socket = io.connect('http://localhost:3000'); - socket.on('populate', function(data) { + socket.on('populate', function(json) { var out = ""; - $.each(data, function(i, obj) { - - out += "
  • "+obj.name+" is making "+obj.salary+"
    • "; - }); + for (var n in json) { // Each top-level entry + out += '
  • ' + n + '
    • '; + }; + console.log('out ' + out); $('#employees').html(out); }); + + $(function() { //Add more fields dynamically. $('.AddNeut').click(function() { - var field = $(this).attr('data-field') - var area = $(this).attr('data-area') - var limit = $(this).attr('data-limit') - console.log('vars' + field + ',' + area + ',' + limit); - //var field_area = $('#' + area); - //var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area. - //Find the count of the last element of the list. It will be in the format ''. If the - // field given in the argument is 'friend_' the last id will be 'friend_4'. - var last_item = $('#' + field + ' li').length; - console.log('last_item' + last_item); - console.log('new_item' + (last_item + 1)); - //If the maximum number of elements have been reached, exit the function. - // If the given limit is lower than 0, infinite number of fields can be created. - // if(count > limit && limit > 0) return; - - // if(document.createElement) { //W3C Dom method. - // var li = document.createElement("li"); - // var input = document.createElement("input"); - // input.id = field+count; - // input.name = field+count; - // input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc. - // li.appendChild(input); - // field_area.appendChild(li); - // } else { //Older Method - // field_area.innerHTML += "
    • "; - // } - + 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 last_item = $('.' + area ).length; + console.log('.' + area + ' li') + console.log('LastItem - ',last_item, 'next_Item - ', (last_item + 1) ); // create the new element via clone(), and manipulate it's ID using newNum value - var newElem = $('.' + area + '_template').clone().attr('class',area); - // var newElem = $('#' + area + last_item ).clone().attr('id', area + (last_item + 1)); - - // newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + 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 - $('#' + area + 'target').after(newElem); - // $("."+classname+"#input" + newNum).css('display', 'block'); - - - //return false; + var newElem = $('ol#' + field + ' 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); + console.log('name ' + newName); + }); + $(newElem).appendTo('ol#' +field); + }); $('#save').click(function() { - socket.emit('data', $('#myForm').serializeArray()); - console.log($('#myForm').serializeArray()); + var selector= "#myForm" + //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; }); - + }); - body!= body \ No newline at end of file + body!= body diff --git a/ninja-store/views/layout.jade~ b/ninja-store/views/layout.jade~ new file mode 100644 index 0000000..5f3ffac --- /dev/null +++ b/ninja-store/views/layout.jade~ @@ -0,0 +1,67 @@ +!!! +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='/socket.io/socket.io.js') + script(src='/form2js/form2js.js') + script(src='/form2js/jquery.toObject.js') + script(src='/form2js/json2.js') + script + //$(document).ready(function() { + + var socket = io.connect('http://localhost:3000'); + + socket.on('populate', function(json) { + var out = ""; + for (var n in json) { // Each top-level entry + out += '
  • ' + n + '
      '; + for (var i = 0; i < json[n].length; i++) { // Each sub-entry + out += '
    • ' + json[n][i] + '
      • '; + }; + out += '
    • '; + }; + console.log('out ' + out); + $('#employees').html(out); + }); + + + $(function() { + //Add more fields dynamically. + $('.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 last_item = $('.' + area ).length; + console.log('.' + area + ' li') + console.log('LastItem - ',last_item, 'next_Item - ', (last_item + 1) ); + // create the new element via clone(), and manipulate it's ID using newNum value + var newElem = $('ol#' + field + ' 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); + console.log('name ' + newName); + }); + $(newElem).appendTo('ol#' +field); + + }); + + $('#save').click(function() { + var selector= "#myForm" + //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; + }); + + + }); + + body!= body