Fix typeahead and improve form

css/main.less

@@ -65,6 +65,13 @@ a {
   box-sizing: border-box;
 }
 
+.other-radio {
+  border: none;
+  border-bottom: 1px solid #ddd;
+  height: 30px;
+  line-height: 30px;
+}
+
 #result .result-box {
   background: white;
   border-radius: 10px;

html/form.html

@@ -25,7 +25,7 @@
         <md-input-container
           class     = "{{ctrl.id}} {{ctrl.type}} {{($last && ctrl.type === 'checkbox')? 'no-padding' : ''}}"
           style     = "width: {{ctrl.width || '100%'}};"
-          ng-repeat = "ctrl in line.ctrls">
+          ng-repeat-start = "ctrl in line.ctrls">
 
           <label>
 
@@ -90,7 +90,7 @@
               value     = "autre"
               class     = "md-primary">
 
-              Autre: Préciser...
+              Autre:
             </md-radio-button>
           </md-radio-group>
 
@@ -120,6 +120,18 @@
             {{ctrl.options.alertes[result.eligibilite[ctrl.id]]}}
           </div>
         </md-input-container>
+
+        <div
+          ng-repeat-end
+          style = "position: absolute; left: 92px; top: {{ ctrl.id === 'ce_logement_est' ? '77px' : '101px'}};"
+          ng-if = "ctrl.type === 'radio' && result.eligibilite[ctrl.id] === 'autre'">
+
+          <input
+            class       = "other-radio"
+            placeholder = "Précisez ici..."
+            ng-model    = "result.autres[ctrl.id]"
+            ng-change   = "ready ? isFormValid() : null"/>
+        </div>
       </md-content>
   </div>
 </div>

index.html

@@ -140,8 +140,8 @@
 
       <md-button
         aria-label = "submit"
-        ng-click = "onSubmitAddress()"
-        class    = "md-raised md-primary">
+        ng-click   = "suggestionsReady && onSubmitAddress()"
+        class      = "md-raised md-primary">
 
         <i class = "md-search md-2x"></i>
       </md-button>

js/app.js

@@ -321,10 +321,10 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
                       "locataire": "Si vous êtes locataire, vous devez impérativement avertir votre propriétaire que vous souhaitez bénéficier du pré-raccordement à la fibre optique."
                     }
                   },
-                  "isValid": function(value) {
-                    return !!value;
+                  "isValid": function(value, other) {
+                    return !!value && value !== 'autre' || !!other;
                   },
-                  "msg"    : 'Vous devez sélectionner une entrée.'
+                  "msg"    : 'Choix incomplet.'
                 }
               ]
             },
@@ -339,10 +339,10 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
                   "options": {
                     "categories": catCeLogementEst
                   },
-                  "isValid": function(value) {
-                    return !!value;
+                  "isValid": function(value, other) {
+                    return !!value && value !== 'autre' || !!other;
                   },
-                  "msg"    : 'Vous devez sélectionner une entrée.'
+                  "msg"    : 'Choix incomplet.'
                 }
               ]
             }
@@ -353,7 +353,7 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
           "visible": true,
           "lines": [
             {
-              "text": "Le Syndicat Mixte Manche Numérique, composé du Département de la Manche et des Etablissements Publics de Coopération Intercommunale (EPCI) du département, a pour mission l'aménagement numérique du territoire manchois, du point de vue tant des réseaux que du développement des usages du numérique.\r\nDans ce cadre, Manche Numérique a élaboré un Schéma Directeur Territorial d'Aménagement Numérique (SDTAN), qui vise une couverture FTTH (fibre optique jusqu’à l’abonné) universelle du département. Le SDTAN prévoit ainsi le déploiement d’un réseau de communications électroniques à très haut débit FTTH sur le territoire de la Manche.\r\nManche Numérique assurera le déploiement de ce réseau public sous sa maîtrise d’ouvrage. S’agissant de l’exploitation du réseau, celle-ci sera confiée à un délégataire de service public désigné par Manche Numérique à l’issue d’une procédure de mise en concurrence. Le futur gestionnaire du réseau aura en charge notamment sa commercialisation auprès des opérateurs de communications électroniques (les fournisseurs d’accès à internet), qui eux-mêmes délivreront des services de communications électroniques aux utilisateurs finals (les abonnés).\r\nDans le cadre du déploiement de ce réseau, Manche Numérique réalise sous sa maîtrise d’ouvrage des raccordements finals d’abonnés au futur réseau, qui seront ensuite remis au futur délégataire de service public en vue de leur gestion.\r\nC’est dans ce contexte que Manche Numérique propose aux intéressés qui le souhaitent, de faire d’ores et déjà raccorder leur logement ou local à usage professionnel, au futur réseau de communications électroniques à très haut débit FTTH.",
+              "text": "Manche Numérique propose aux personnes qui le souhaitent, de faire d’ores et déjà raccorder leur logement ou local à usage professionnel, au futur réseau de communications électroniques à Très Haut Débit FTTH. Le montant de ce raccordement s’élevera à 50 € pour les personnes qui souscriront à une offre Très Haut Débit auprès d’un opérateur et de 400 € pour ceux qui demanderont uniquement la pose de la prise, sans souscription d’un abonnement.",
               "ctrls": [
                   {
                     "name"   : "Accord",
@@ -392,6 +392,28 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
                ]
             }
           ]
+        },
+        {
+          "name": "Souscription",
+          "visible": false,
+          "lines": [
+            {
+              "ctrls": [
+                  {
+                    "name"   : "Souscription",
+                    "id"     : "souscription_engagement",
+                    "libelle": 'Vous vous engagez à souscrire un abonnement chez un operateur 50 euros, sinon 400 euros.',
+                    "type"   : "checkbox",
+                    "width"  : null,
+                    "require": true,
+                    "isValid": function(value) {
+                      return !!value;
+                    },
+                    "msg"    : 'Vous devez accepter.'
+                  }
+               ]
+            }
+          ]
         }
       ]
     }
@@ -534,7 +556,7 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
         console.error(e);
       }
 
-      console.log('$scope.results', $scope.results);
+      //console.log('$scope.results', $scope.results);
     };
 
 
@@ -622,16 +644,22 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
 
       var suggestURL = 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?f=pjson&searchExtent=' + JSON.stringify(searchExtent);
 
+      var i = 0, j = 0;
       $scope.suggestLocation = function(val) {
         console.log('__suggestLocation', val);
-
+        $scope.suggestionsReady = false;
+        i++;
         return $http.get(suggestURL, {
           params: {
             text: val
           }
-        }).then(function(response){
-          $scope.suggestions = response.data.suggestions;
-          console.log('__suggestLocation response', response);
+        }).then(function(response) {
+
+          if(val === $scope.address) { // Very important to debounce queries
+            $scope.suggestionsReady = response.data.suggestions.length !== 0;
+            $scope.suggestions = _.cloneDeep(response.data.suggestions);
+          }
+
           return response.data.suggestions.map(function(item){
             return item.text;
           });
@@ -813,8 +841,7 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
 
       }
 
-      if(adresse)
-      console.debug('Reverse', geoCode, address, '=>', adresse, data.address);
+      //console.debug('Reverse', geoCode, address, '=>', adresse, data.address);
       callback(adresse, data.address);
       $scope.$evalAsync();
     });
@@ -949,16 +976,17 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
     $scope.postForm = null;
     reverseLocation($scope.geoCode, null, function(string, address) {
       //console.log('add', address);
-      $scope.result = {eligibilite: {}};
+      $scope.result = {eligibilite: {}, autres: {}};
 
       // Debug
-      // $scope.result.eligibilite.prenom = 'Francois';
-      // $scope.result.eligibilite.nom = 'Beaufils';
-      // $scope.result.eligibilite.email = 'francoisbeaufils@zeno-labs.com';
-      // $scope.result.eligibilite.vous_etes = 'locataire';
-      // $scope.result.eligibilite.ce_logement_est = 'residence_principale';
-      // $scope.result.eligibilite.info_et_libertes = true;
-      // $scope.result.eligibilite.accord = true;
+      $scope.result.eligibilite.prenom                  = 'Francois';
+      $scope.result.eligibilite.nom                     = 'Beaufils';
+      $scope.result.eligibilite.email                   = 'francoisbeaufils@zeno-labs.com';
+      $scope.result.eligibilite.vous_etes               = 'locataire';
+      $scope.result.eligibilite.ce_logement_est         = 'residence_principale';
+      $scope.result.eligibilite.info_et_libertes        = true;
+      $scope.result.eligibilite.accord                  = true;
+      $scope.result.eligibilite.souscription_engagement = true;
 
       $scope.result.eligibilite.geo_code            = JSON.stringify($scope.geoCode);
       $scope.result.eligibilite.code_postal         = address.Postal;
@@ -979,7 +1007,7 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       _.each(section.lines, function(line) {
         _.each(line.ctrls, function(ctrl) {
           ctrl.invalid = false;
-          if(ctrl.require && !ctrl.isValid($scope.result.eligibilite[ctrl.id])) {
+          if(ctrl.require && !ctrl.isValid($scope.result.eligibilite[ctrl.id], $scope.result.autres[ctrl.id])) {
             isValid = false;
             ctrl.invalid = true;
           }
@@ -992,15 +1020,20 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
 
   $scope.onSubmitAddress = function($item, $model, $label) {
 
-    console.log('onSubmitAddress address', $scope.address);
-    console.log('onSubmitAddress $item', $item);
-    console.log('onSubmitAddress $model', $model);
-    console.log('onSubmitAddress $label', $label);
+    // console.log('onSubmitAddress address', $scope.address);
+    // console.log('onSubmitAddress $item', $item);
+    // console.log('onSubmitAddress $model', $model);
+    // console.log('onSubmitAddress $label', $label);
 
     // Get magic key
     var item = _.find($scope.suggestions, {text: $item});
+
+    if(!item) {
+      item           = $scope.suggestions[0];
+      $scope.address = item.text;
+    }
     $scope.magicKey = item.magicKey;
-    console.log('onSubmitAddress -_-item', item, '=>', $scope.magicKey);
+    //console.log('onSubmitAddress -_-item', item, '=>', $scope.magicKey);
     $scope.getGeoCode($scope.address, $scope.magicKey, function(err, data) {
 
       $scope.geoCode = data && data.locations && data.locations[0] && data.locations[0].feature.geometry;
@@ -1035,7 +1068,13 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
 
   $scope.postFormEl = function() {
     $scope.postForm = {inProgress: true};
-    //console.log('postForm', $scope.result.eligibilite);
+
+    _.each($scope.result.autres, function(value, key) {
+      $scope.result.eligibilite[key] = value;
+    });
+
+    console.log('postForm', $scope.result.eligibilite);
+
     $scope.$evalAsync();
 
     function mysql_real_escape_string (str) {
@@ -1074,7 +1113,7 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
 
     var query = "INSERT INTO `eligibilite`.`demandes` (" + keys.substring(0, keys.length -2) + ") VALUES (" + values.substring(0, values.length -2) + ");";
 
-    //console.log('query', query);
+    console.log('query', query);
 
     $.ajax({
       method : "POST",
@@ -1181,6 +1220,9 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       else {
         $scope.postForm = {error: msg};
       }
+
+      $scope.autres = {};
+
       $scope.$apply();
     });
   };