Profile edition bugfix

TODO

@@ -14,4 +14,6 @@ Complete Lexicon...
 
 Subscription process + email validation.
 Check input security (not too long, invalid characters, injection...).
-Fix Bug in Profile page.
+Fix Bug in Profile page.
+
+Find a way to factorize some client code.

client/css/less/map.lessimport

@@ -1,8 +1,12 @@
 #googlemap{
-  height: 500px;
+  height: 400px;
   width: 500px;
   margin: 0 auto;
   img {
     max-width: none;
   }
+}
+
+span#geocoding_target{
+  font-weight: bold;
 }

client/helpers/lexicon.js

@@ -37,8 +37,13 @@ Meteor.i18nMessages.question = {
     dob: 'Date of Birth',
     dob_help: 'Select your date of birth',
     find_your_location: 'Let us determine your location',
-    pick_on_the_map: 'Pick your location on a map'
-
+    pick_on_the_map: 'Point your location on a map',
+    location_help: "We don't want to know your precise address! Just help you locate people near you",
+    gender: "Gender",
+    geocoding: "Your current location",
+    unknown: "Unknown :(",
+    male: "Male",
+    female: "Female"
 };
 
 Meteor.i18nMessages.messages = {

client/views/includes/form/form_fields.html

@@ -30,7 +30,7 @@
         <div class="controls">
             <select id="{{domid}}" data-validate='{{validation}}' data-id="{{docid}}">
                 {{#each options}}
-                    <option value="{{value}}">{{Lex text}}</option>
+                    <option value="{{value}}">{{#if text}}{{Lex text}}{{/if}}</option>
                 {{/each}}
             </select>
         </div>
@@ -42,12 +42,13 @@
         <a class="btn btn-success geolocalisation" href="#">{{Lex 'question.find_your_location'}}</a>
         <a class="btn btn-info show_map" role="button" href="#map" data-toggle="modal">{{Lex 'question.pick_on_the_map'}}</a>
 
-        <input type="hidden" name="{{name}}" id="{{domid}}" value="{{value}}" />
+        <input type="hidden" name="{{name}}" id="{{domid}}" value="{{value}}"  data-id="{{docid}}" />
 
         <div id="map" class="modal hide fade">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <h3>Pick your location on the map</h3>
+                <h3>Point your location on the map</h3>
+                <p>{{Lex help}}</p>
             </div>
             <div class="modal-body">
                 <div id="googlemap">{{> loading}}</div>
@@ -63,7 +64,7 @@ <h3>Pick your location on the map</h3>
 
 <template name="form_geocoding">
     <div class="control-group">
-        <input type="hidden" name="{{name}}" value="{{value}}" id="{{domid}}" />
-        Your current location:<span id="geocoding_target">{{#if value}}{{value}}{{else}}unknown :({{/if}}</span>
+        <input type="hidden" name="{{name}}" value="{{value}}" id="{{domid}}"  data-id="{{docid}}" />
+        {{Lex label}}:<span id="geocoding_target">{{#if value}}{{value}}{{else}}{{Lex 'question.unknown'}}{{/if}}</span>
     </div>
 </template>

client/views/includes/form/form_fields.js

@@ -20,6 +20,13 @@ Template.form_field_datepicker.helpers({
 Template.form_field_text.helpers({
     'value' : function(){ return getInputValue(this); }
 });
+Template.form_location.helpers({
+    'value' : function(){ return getInputValue(this); }
+});
+Template.form_geocoding.helpers({
+    'value' : function(){ return getInputValue(this); }
+});
+
 Template.form_field_dropdown.helpers({
     'value' : function(){ return getInputValue(this); },
     'options': function(){
@@ -76,8 +83,6 @@ Template.form_location.events({
         var center = getInputValue(this);
         var isPointing = false, marker, initPosition;
 
-
-
         if(!center){
             center = Meteor.GMap.defaultLocation;
 
@@ -95,11 +100,9 @@ Template.form_location.events({
 
         function updateMarkerPosition(latlng){
             if(isPointing){
-                console.log('updating marker position, poiting');
                 marker.setPosition(latlng);
                 updatePosition(latlng);
             } else {
-                console.log('moving marker');
                 marker = new google.maps.Marker({
                     map:map,
                     draggable:true,
@@ -109,7 +112,6 @@ Template.form_location.events({
                 updatePosition(latlng);
 
                 google.maps.event.addListener(marker, 'dragend', function(){
-                    console.log('updating marker position, draging');
                     updatePosition(marker.getPosition());
                 });
                 isPointing = true;
@@ -138,6 +140,7 @@ Template.form_location.events({
             }
         }
 
+        // Make sure to only initialize once, 1. once gmap is loaded 2. once the modal is fully shown.
         window.gmapcallback = function(){
             $('#map').on('shown',function(){
                 if(!window.maploaded){
@@ -147,10 +150,8 @@ Template.form_location.events({
             })
         };
 
+        // Load the gmap script, call previous function on success.
         load_gmap('gmapcallback');
-
-
-
     },
     'click .save_change': function(e){
         if($('.save_change').hasClass('disabled')){
@@ -160,6 +161,7 @@ Template.form_location.events({
         $('#location').val(window.mapposition.jb+','+window.mapposition.kb);
         $('#map').modal('hide');
 
+        // Get a humanly readable location
         reverseGeodecode(window.mapposition, function(err, res){
             if(err){
                 Errors.notification("Oops, we were unable to determine your location");
@@ -174,6 +176,16 @@ Template.form_location.events({
     'click .geolocalisation': function(){
         function success(location){
             $('#location').val(location.latitude+";"+location.longitude);
+            // Get a humanly readable location
+            reverseGeodecode(window.mapposition, function(err, res){
+                if(err){
+                    Errors.notification("Oops, we were unable to determine your location");
+                } else {
+                    $('#geocoding_target').html(res);
+                    $('#geocoding').val(res);
+                }
+            });
+
             Errors.notification('Got it!', 'center');
         }
 

client/views/profile_creation/profile_creation.html

@@ -2,10 +2,14 @@
 
     <h5>Yo, blablabla</h5>
 
-    {{{makeQuestion 'name'}}}
-    {{{makeQuestion 'gender'}}}
+    <form id="profile_creation">
+        {{{makeQuestion 'name'}}}
+        {{{makeQuestion 'gender'}}}
 
-    {{{makeQuestion 'location'}}}
-    {{{makeQuestion 'geocoding'}}}
+        {{{makeQuestion 'location'}}}
+        {{{makeQuestion 'geocoding'}}}
+
+        <button class="btn btn-submit">{{Lex 'default.save'}}</button>
+    </form>
 
 </template>

client/views/profile_creation/profile_creation.js

@@ -0,0 +1,62 @@
+var validateControlGroup = function(input){
+    _.each($(input).find('input, select'), function(self){
+        Meteor.call('validate_input', $(self).val(), $(self).data('id'), $(self).data('validate'), function(err, res){
+            if(err){
+                $(input).addClass('error');
+                $(input).removeClass('success');
+                if($(input).find('.help-inline')){
+                    $(input).find('.help-inline').html(__(err.reason));
+                }
+                ok = false;
+            } else {
+                $(input).removeClass('error');
+                $(input).addClass('success');
+                if($(input).find('.help-inline')){
+                    $(input).find('.help-inline').html('Ok!');
+                }
+            }
+        });
+    });
+};
+
+
+Template.profile_creation.events = {
+    'submit form': function(e){
+        e.preventDefault();
+        var res = {};
+
+        // validate all input
+        _.each($('form .control-group'),function(input){
+            validateControlGroup(input);
+        });
+
+        var values = {};
+        var docid;
+        _.each($('form input, form select'), function(input){
+            docid = $(input).data('id');
+            if(docid){
+                values[docid] = $(input).val();
+            }
+        });
+
+        Meteor.call('update_profile', values);
+    },
+    'blur form input': function(e){
+        e.preventDefault();
+        var element = e.target;
+        var parent = $(element).parents(".control-group");
+
+        _.each($(parent), function(input){
+            validateControlGroup(input);
+        })
+    },
+    'change form select': function(e){
+        e.preventDefault();
+        var element = e.target;
+        var parent = $(element).parents(".control-group");
+
+        _.each($(parent), function(input){
+            validateControlGroup(input);
+        })
+    }
+};

server/fixtures.js

@@ -1,3 +1,4 @@
+
 if(Questions.find().count() == 0){
     Questions.insert({
         name: 'name',
@@ -45,6 +46,33 @@ if(Questions.find().count() == 0){
         sortorder: 3,
         required: true
     });
+    Questions.insert({
+        "domid": "geocoding",
+        "label": "question.geocoding",
+        "name": "geocoding",
+        "required": false,
+        "sortorder": 3,
+        "tpl": "form_geocoding",
+        "validation": [
+
+        ],
+        "value": null
+    });
+    Questions.insert({
+        "domid": "location",
+        "help": "question.location_help",
+        "label": "question.location",
+        "name": "location",
+        "required": true,
+        "sortorder": 3,
+        "tpl": "form_location",
+        "validation": [
+
+        ],
+        "value": null
+    });
+
+
 }
 if(Meteor.users.find({}).count() <= 4){
 //    Meteor.users.insert({

server/users.js

@@ -16,14 +16,15 @@ Meteor.methods({
                         if(typeof Meteor.FormsValidation[method] == 'function'){
                             if(!(Meteor.FormsValidation[method])(validation, val)){
                                 valid = false;
-                            } else {
-                                // All good, let's input
-                                cleaned[question.name] = val;
                             }
                         } else {
                             valid = false;
                         }
                     });
+                    if(valid){
+                        // All good, let's input
+                        cleaned[question.name] = val;
+                    }
                 }
             } else {
                 valid = false;