From 1e2760c10ce40af164d5be7d1c4120d7e5d0ada8 Mon Sep 17 00:00:00 2001 From: Fabio Barone Date: Fri, 7 Sep 2012 00:29:01 -0500 Subject: [PATCH] Ver y editar participante --- domain/Participantes.js | 32 ++++- models/models.js | 1 + public/javascripts/app.js | 47 ++++++-- public/javascripts/forms.js | 15 +-- public/javascripts/talleres.js | 5 +- public/styles.css | 29 +++++ views/partials/lista_taller_equip.jade | 2 +- views/participantes.jade | 3 - views/styles.styl | 21 ++++ views/view_edit_participante.jade | 159 +++++++++++++++++++++++++ 10 files changed, 286 insertions(+), 28 deletions(-) create mode 100644 views/view_edit_participante.jade diff --git a/domain/Participantes.js b/domain/Participantes.js index d57cdb0..fc3e795 100644 --- a/domain/Participantes.js +++ b/domain/Participantes.js @@ -65,6 +65,16 @@ function Service(app) { }); } + function getEquipFromParticipanteId(req, res, next) { + var Equipamiento = app.db.model('Equipamiento'); + Equipamiento.findById(req.participante.equipamiento_id, function(err, r) { + req.equipamiento = r; + next(); + }); + } + + + /* * JSON */ @@ -147,13 +157,27 @@ function Service(app) { }); }); - app.get('/participantes/:id', getParticipantes, function(req, res) { - res.render('participante', { + app.get('/participantes/:id/edit', getParticipantes, getEquipFromParticipanteId, function(req, res) { + res.render('view_edit_participante', { + locals: { + participante: req.participante, + equipamiento: req.equipamiento, + params: app.params, + articulo: 'EditarParticipante', + } + }); + }); + + app.get('/participantes/:id', getParticipantes, getEquipFromParticipanteId, function(req, res) { + res.render('view_edit_participante', { locals: { - participante: req.participante + participante: req.participante, + equipamiento: req.equipamiento, + params: app.params, + articulo: 'VerParticipante', } }); }); } -module.exports = Service; \ No newline at end of file +module.exports = Service; diff --git a/models/models.js b/models/models.js index 613a325..07f418a 100644 --- a/models/models.js +++ b/models/models.js @@ -55,6 +55,7 @@ var Participante = new Schema({ , comuna : { type: String, enum: params.comunas } , barrio : { type: String, enum: params.barrios } , estrato : { type: String, enum: params.estratos } + , contacto : { type: String} , fotos : { type: Array } , videos : { type: Array } , familiar : { type: String, enum: params.familiaridades } diff --git a/public/javascripts/app.js b/public/javascripts/app.js index 41d8d11..94424fe 100644 --- a/public/javascripts/app.js +++ b/public/javascripts/app.js @@ -85,16 +85,22 @@ Paginas.EquipamientoTalleres = function() { $('#fecha').datepicker(); $el.find('.submit').click(function(e) { + if ($('#fecha').hasClass('border_error')) { + $('#fecha').removeClass('border_error'); + } e.preventDefault(); $(this).blur(); var equip = location.pathname.split('/')[2]; var taller_id = $('select option:selected').val(); - var fecha = $('#fecha').val().split('/'); - if (fecha) { - fecha = new Date(parseInt(fecha[2]), parseInt(fecha[0].replace(/^0/, '')) - 1, parseInt(fecha[1].replace(/^0/, ''))) - fecha = fecha.getTime(); - } + var fecha_str = $('#fecha').val(); + if (fecha_str) { + var fecha = fecha_str.split('/'); + if (fecha) { + fecha = new Date(parseInt(fecha[2]), parseInt(fecha[0].replace(/^0/, '')) - 1, parseInt(fecha[1].replace(/^0/, ''))) + fecha = fecha.getTime(); + } + } if (!equip) { $(this).parent().before("

* debe seleccionar un equipamiento

"); @@ -102,6 +108,7 @@ Paginas.EquipamientoTalleres = function() { if (!fecha) { $(this).parent().before("

* debe seleccionar una fecha

"); + $('#fecha').addClass('border_error'); } if (fecha && taller_id) { @@ -175,7 +182,7 @@ Paginas.Consultas = function() { width: $(this).closest('li').width() }); }); -}, +}; Paginas.FormEquipamiento = function() { // Callback par atender el response @@ -194,7 +201,7 @@ Paginas.FormEquipamiento = function() { $.post('/equipamientos', data, res); } }); -}, +}; Paginas.FormTaller = function() {}; @@ -253,7 +260,27 @@ Paginas.FormCreativo = function() { $.post('/admin/creativos', data, res); } }); -}, +}; + +Paginas.EditarParticipante = function() { + var $el = $('#edit_participante'); + var participante_id = $('#participante_id').val(); + $el.find('button.submit').click(function(e) { + e.preventDefault(); + var data = EditarParticipanteForm.getValidData(); + if (data) { + $.ajax({ + url: '/participantes/' + participante_id, + type: 'PUT', + data: data, + success: function(data) { + console.log(data); + location.href = "/participantes/" + participante_id; + } + }); + } + }); +}; Paginas.FormEvalTaller = function() { var $el = $('#taller form'); @@ -273,7 +300,7 @@ Paginas.FormEvalTaller = function() { }); } }); -}, +}; Paginas.FormParticipante = function() { var $el = $('#participante form'); @@ -351,4 +378,4 @@ try { catch (err) {} -}) // endonready \ No newline at end of file +}) // endonready diff --git a/public/javascripts/forms.js b/public/javascripts/forms.js index a268b22..a8157d9 100644 --- a/public/javascripts/forms.js +++ b/public/javascripts/forms.js @@ -208,14 +208,9 @@ var ParticipanteForm = new FormValidator( 'find': 'input[name=nombre]', 'validate': ['presence'] }, -/* -En la presentacion de la app se dijo que fecha de -nacimiento no sea obligatoria - 'edad': { - 'find': 'input[name=fecha]', - 'validate': ['presence','fecha'] - }, -*/ + 'fecha': { + 'find': 'input[name=fecha]' + }, 'comuna': { 'find': 'select[name=comuna] option:selected', 'validate': ['presence'] @@ -236,7 +231,7 @@ nacimiento no sea obligatoria 'validate': ['presence'] }, - 'situacion': { + 'familiar': { 'find': 'select[name=situacion] option:selected', 'validate': ['presence'] }, @@ -262,6 +257,8 @@ nacimiento no sea obligatoria } ); +var EditarParticipanteForm= ParticipanteForm; + var EquipamientoForm = new FormValidator( $("#equipamiento form"), { diff --git a/public/javascripts/talleres.js b/public/javascripts/talleres.js index 0ca1719..db16ff6 100644 --- a/public/javascripts/talleres.js +++ b/public/javascripts/talleres.js @@ -28,7 +28,10 @@ jQuery(document).ready(function($) { }); $('#equipamiento .participante_item').click(function(e) { - return false; + window.location = '/participantes/'+this.id; + }); + $('#participantes .participante_item').click(function(e) { + window.location = '/participantes/'+this.id; }); $('#taller .participante_item').click(function(e) { diff --git a/public/styles.css b/public/styles.css index ed125a8..f0a408f 100644 --- a/public/styles.css +++ b/public/styles.css @@ -443,6 +443,18 @@ article#taller .list_header a#tab-participantes span.mask, article#evaluacion .list_header a#tab-participantes span.mask { width: 124px; } +article#equipamiento .list_header a#tab-participante, +article#participante .list_header a#tab-participante, +article#taller .list_header a#tab-participante, +article#evaluacion .list_header a#tab-participante { + float: left; +} +article#equipamiento .list_header a#tab-participante span.mask, +article#participante .list_header a#tab-participante span.mask, +article#taller .list_header a#tab-participante span.mask, +article#evaluacion .list_header a#tab-participante span.mask { + width: 100%; +} article#equipamiento .list_header a#tab-editar, article#participante .list_header a#tab-editar, article#taller .list_header a#tab-editar, @@ -1081,6 +1093,20 @@ ul#errors { .error p { text-align: center; } +p.error { + color: #f00; + font-size: 0.8em; + padding: 5px; + border-radius: 3px; + background-color: #ffcd97; + display: inline-block; + border: 1px solid; + margin-left: 5px; +} +.border_error { + box-shadow: 0px 0px 5px #f00; + border: 1px solid #f00 !important; +} p.no_results { font-size: 0.8em; padding: 20px; @@ -1151,3 +1177,6 @@ article#creativos .creativo_item { width: 100%; padding: 10px; } +.first { + float: left !important; +} diff --git a/views/partials/lista_taller_equip.jade b/views/partials/lista_taller_equip.jade index dcdd7dd..4d610b9 100644 --- a/views/partials/lista_taller_equip.jade +++ b/views/partials/lista_taller_equip.jade @@ -12,5 +12,5 @@ ul select(name='taller') each taller in talleres option(value='#{taller._id}') #{taller.nombre} - input#fecha(type='text') + input#fecha(type='text',placeholder='Seleccionar Fecha') button.submit Agregar Taller diff --git a/views/participantes.jade b/views/participantes.jade index ac51846..2119ed3 100644 --- a/views/participantes.jade +++ b/views/participantes.jade @@ -3,9 +3,6 @@ article#participantes a#listar(href="/participantes", class='#{articulo == 'Participantes' ? "activo" : null }') | Participantes span.mask - a#crear(href="/participantes/new", class='#{articulo == 'FormParticipante' ? "activo" : null }') - | Crear Participante - span.mask .list_body ul.listado diff --git a/views/styles.styl b/views/styles.styl index 976c1ae..ecfc65c 100644 --- a/views/styles.styl +++ b/views/styles.styl @@ -328,6 +328,11 @@ article#evaluacion span.mask width: 124px + &#tab-participante + float: left + span.mask + width: 100% + &#tab-editar float: right span.mask @@ -771,6 +776,20 @@ ul#errors .error p text-align: center +p.error + color: red + font-size: 0.8em + padding: 5px + border-radius: 3px + background-color: #FFCD97 + display: inline-block + border: 1px solid + margin-left: 5px + +.border_error + box-shadow: 0px 0px 5px rgb(255,0,0); + border: 1px solid red !important; + p.no_results font-size: 0.8em padding: 20px @@ -840,3 +859,5 @@ article#creativos width: 100% padding: 10px +.first + float: left !important diff --git a/views/view_edit_participante.jade b/views/view_edit_participante.jade new file mode 100644 index 0000000..ce1f674 --- /dev/null +++ b/views/view_edit_participante.jade @@ -0,0 +1,159 @@ +-var edit = articulo == "EditarParticipante" +article#participante + header + .header-content + label Equipamiento + p.nombre #{equipamiento.nombre} + + .list_header + ul + li + a#tab-editar.last(href="/participantes/#{participante._id}/edit", class='#{articulo == 'EditarParticipante' ? "activo" : null }') + | Editar Participante + span.mask + li + a#tab-todos-participantes(href="/participantes", class='#{articulo == 'Participantes' ? "activo" : null }') + | Todos Participantes + span.mask + li + a#tab-participante.first(href="/participantes/#{participante._id}", class='#{articulo == 'VerParticipante' ? "activo" : null }') + | #{participante.nombre} + span.mask + + .list_body + form#edit_participante + input(type="hidden", id="equip_id",name="equip_id", value="#{equipamiento._id}") + input(type="hidden", id="participante_id",name="participante_id", value="#{participante._id}") + ul + li + .element + label Nombre completo: + -if (edit) + input(name="nombre",id="nombre", type="text", value="#{participante.nombre}") + -else + input(name="nombre",id="nombre", readonly="readonly", type="text", value="#{participante.nombre}") + + + li + .element + label Fecha de nacimiento: + -var fecha ="" + -if (participante.fecha === 'undefined') + -var ano = participante.fecha.getFullYear() + -var mes = participante.fecha.getMonth()+1 + -var dia = participante.fecha.getDate() + -fecha = ano+"/"+mes+"/"+dia; + -if (edit) + input#fecha(type='text', name="fecha", value="#{fecha}") + -else + input#fecha(type='text', readonly="readonly", name="fecha", value="#{fecha}") + + li + .element + label Comuna: + -if (edit) + select(name="comuna") + each comuna in params.comunas + - if (comuna == participante.comuna) + option(value='#{comuna}', selected='selected') #{comuna} + - else + option(value='#{comuna}') #{comuna} + -else + | #{participante.comuna} + + li + .element + label Barrio: + -if (edit) + select(name="barrio") + each barrio in params.barrios + - if (barrio == participante.barrio) + option(value='#{barrio}', selected='selected') #{barrio} + - else + option(value='#{barrio}') #{barrio} + -else + | #{participante.barrio} + + li + .element + label Estrato: + -if (edit) + select(name="estrato") + each estrato in params.estratos + - if (estrato == participante.estrato) + option(value='#{estrato}', selected='selected') #{estrato} + - else + option(value='#{estrato}') #{estrato} + -else + | #{participante.estrato} + + li + .element + label Fotos: + + li + .element + label Videos: + + li + .element + label Contacto: + -if (edit) + input(name="contacto", id="contacto", type="text", value="#{participante.contacto}") + -else + input(name="contacto", id="contacto", readonly="readonly", type="text", value="#{participante.contacto}") + + li + .element + label Situación familiar: + -if (edit) + select(name="situacion") + each familiar in params.familiaridades + - if (familiar == participante.familiar) + option(value='#{familiar}', selected='selected') #{familiar} + - else + option(value='#{familiar}') #{familiar} + -else + | #{participante.familiar} + + li + .element + label Población: + -if (edit) + select(name="poblacion") + each poblacion in params.poblacional + - if (poblacion == participante.poblacion) + option(value='#{poblacion}', selected='selected') #{poblacion} + - else + option(value='#{poblacion}') #{poblacion} + -else + | #{participante.poblacion} + + li + .element + label Nivel de estudios padres: + -if (edit) + select(name="padres") + each p in params.padres + - if (p == participante.padres) + option(value='#{p}', selected='selected') #{p} + - else + option(value='#{p}') #{p} + -else + | #{participante.padres} + + li + .element + label Observaciones: + -if (edit) + textarea(name="observaciones") #{participante.observaciones} + -else + textarea(name="observaciones", readonly="readonly") #{participante.observaciones} + + + -if (edit) + li + .element + button.submit Enviar + +