Update code (see details below)

Changelog:
- Keep only estimate deployment dates regarding FTTH (hide all others
dates coming from database),
- Fix map switch option (satellite or map),
- Remove all area polygons (FFTH, MIMO, ADSL),
- Change zoom on map once the user has validated his address,
- Refactor and rationalize code,
- Various fixes and improvements

css/main.less

@@ -220,6 +220,10 @@ hr {
 
 .md-sidenav-right {
   z-index: 99999999999999;
+
+  md-content {
+    width: 100%;
+  }
 }
 
 .md-sidenav-right .md-toolbar-tools {

index.html

@@ -74,25 +74,8 @@
 
     <div class = "title">
 
-      <div
-        class = "data-loading"
-        ng-if = "!loaded">
-
-        <md-progress-circular
-          class       = "md-warn md-hue-3"
-          md-mode     = "indeterminate"
-          md-diameter = "25">
-        </md-progress-circular>
-
-        <div class = "data-loading-txt">
-
-          Téléchargement des données...
-        </div>
-      </div>
-
       <img
         src      = "img/logo.png"
-        ng-if    = "loaded"
         ng-click = "toggleResultPane()"/>
     </div>
 
@@ -181,21 +164,6 @@
             aria-label = "Carte">Carte
           </md-radio-button>
         </md-radio-group>
-
-        <br/>
-        <br/>
-
-        <div class = "section-title">
-
-          Montrer les zones de découpages
-        </div>
-
-        <md-checkbox ng-model="view.ftth" aria-label="Fibre optique">Fibre optique</md-checkbox>
-        <br/>
-        <md-checkbox ng-model="view.mimo" aria-label="Réseau Mimo">Réseau Mimo</md-checkbox>
-        <br/>
-        <md-checkbox ng-model="view.adsl" aria-label="ADSL">ADSL</md-checkbox>
-
       </md-content>
     </md-sidenav>
 
@@ -204,9 +172,9 @@
     <div id="result">
 
       <div
-        layout = "row"
-        layout-margin
-        class  = "result-container">
+        class         = "result-container"
+        layout        = "row"
+        layout-margin>
 
         <div
           flex

js/app.js

@@ -10,7 +10,14 @@ app.directive('skrollr', function() {
   return directiveDefinitionObject;
 });
 
-app.controller('mainController', function($scope, $detection, $http, $mdSidenav, $timeout, $sce, $mdToast) {
+app.controller('mainController', function($scope, $detection, $http, $mdSidenav, $timeout, $sce, $mdToast, $location) {
+
+  // Debugging mode
+  $scope.debug = window.location.hostname === 'localhost' || typeof $location.search().debug !== 'undefined';
+  if($scope.debug) {
+    console.log('***** Debugging mode ****');
+  }
+
   $scope.title = "Manche Numerique";
   $scope.$sce  = $sce;
 
@@ -23,7 +30,27 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       siteAddresse         = '235, rue Joseph Cugnot Zone Delta, 50000 SAINT LÔ',
       siteTel              = '02.33.77.83.60',
       layer                = {},
-      currentMarker, searchExtent;
+      currentMarker,
+      cLayer;
+
+  // Coordinates around Manche to limit the extent of the queries
+  var mancheCoordinates = [[49.732307856286, -1.97117692088061],[48.4, -1.75],[48.4, -0.5],[49.732307856286, -1.2]];
+
+  // This limit the search area
+  var searchExtent = {
+    "xmin" : _.max(_.map(mancheCoordinates, function(c) {return c[1];})),
+    "ymin" : _.max(_.map(mancheCoordinates, function(c) {return c[0];})),
+    "xmax" : _.min(_.map(mancheCoordinates, function(c) {return c[1];})),
+    "ymax" : _.min(_.map(mancheCoordinates, function(c) {return c[0];})),
+    "spatialReference" : {"wkid" : 84}
+  };
+
+  var suggestURL = 'https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer/suggest?f=pjson&searchExtent=' + JSON.stringify(searchExtent);
+
+  var maps = {
+    "carte"     : 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
+    "satellite" : 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
+  };
 
   var catTypeVoie = [
     {
@@ -420,10 +447,16 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       map.removeLayer(currentMarker);
     }
 
-    currentMarker = L.marker([$scope.geoCode.y, $scope.geoCode.x], {draggable: true, title: "texst"}).addTo(map);
+    currentMarker = L.marker([$scope.geoCode.y, $scope.geoCode.x], {draggable: true, title: "Votre addresse"}).addTo(map);
+
+    // currentMarker.on('add', function(event) {
+    //   map.setZoom(18);
+    // });
 
     currentMarker.bindPopup("L'adresse que vous nous avez fournie est localisée sur la carte. Il se peut que la position réelle de votre logement soit un peu différente. Dans ce cas, merci de déplacer le pointeur sur la carte pour le positionner à l'emplacement de votre logement.").openPopup();
 
+
+
     if(withReverse) {
       $scope.magicKey = null;
 
@@ -551,25 +584,6 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       });
     });
 
-    // Debug
-    var debug = false;
-    if (debug) {
-      var colors = ['red', 'green', 'blue', 'black', 'silver', 'yellow'];
-
-      var marker = L.marker([coordinates.y, coordinates.x]).addTo(map);
-      var Lpolygons = [];
-      _.each(records, function(record, i) {
-        var style = {
-          color    : colors[i],
-          fillColor: colors[i],
-          weight   : 4
-        };
-        _.each(record._polygons, function(polygon) {
-          Lpolygons.push(L.polygon(polygon, style).bindPopup($scope.getHtmlContent(identifier, record)));
-        });
-      });
-      L.layerGroup(Lpolygons).addTo(map);
-    }
     return records;
   };
 
@@ -583,9 +597,6 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
     })
     .error(function(err) {
       console.error('Oracle issue', err);
-
-      // Debug without Oracle access
-      onResults('{"x":-1.1060984089996,"y":49.119046582,"ftth":[{"ID_ZAPM_PARTIELLE":"203AP0","DATE_OUV_SERVICE_REEL":null,"DATE_OUV_SERVICE_PREV":null,"DATE_FIN_TRAV_PREV":"04\/05\/16","DATE_DEB_ETUDES_PREV":"01\/12\/14"}],"adsl":[{"ID_FT_ADSL":"656","LEGENDE":"TV sur ADSL","NATURE":"0 - 37"}],"mimo":null}');
     })
     .done(function( msg ) {
       onResults(msg);
@@ -608,12 +619,15 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       }
       catch(e) {
 
-        console.error(e);
-        alert('Probleme de connexion à la base de donnée Oracle.');
-        $scope.hideResultPane();
-        /*
-        onResults('{"x":-1.1060984089996,"y":49.119046582,"ftth":[{"ID_ZAPM_PARTIELLE":"203AP0","DATE_OUV_SERVICE_REEL":null,"DATE_OUV_SERVICE_PREV":null,"DATE_FIN_TRAV_PREV":"04\/05\/16","DATE_DEB_ETUDES_PREV":"01\/12\/14"}],"adsl":[{"ID_FT_ADSL":"656","LEGENDE":"TV sur ADSL","NATURE":"0 - 37"}],"mimo":null}');
-        */
+        // Debugging purpose
+        if(window.location.hostname === 'localhost') {
+          onResults('{"x":-1.1060984089996,"y":49.119046582,"ftth":[{"ID_ZAPM_PARTIELLE":"203AP0","DATE_OUV_SERVICE_REEL":null,"DATE_OUV_SERVICE_PREV":null,"DATE_FIN_TRAV_PREV":"04\/05\/16","DATE_DEB_ETUDES_PREV":"01\/12\/14"}],"adsl":[{"ID_FT_ADSL":"656","LEGENDE":"TV sur ADSL","NATURE":"0 - 37"}],"mimo":null}');
+        }
+        else {
+          console.error(e);
+          alert('Probleme de connexion à la base de donnée Oracle.');
+          $scope.hideResultPane();
+        }
       }
 
       $scope.$apply();
@@ -639,13 +653,8 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       getResults();
     });
 
-    var maps = {
-      "carte"     : 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
-      "satellite" : 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
-    };
-
-    var cLayer = L.tileLayer(maps.satellite, {
-        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
+    cLayer = L.tileLayer(maps.satellite, {
+        attribution: 'Carte fournie par <a href="http://openstreetmap.org">OpenStreetMap</a>',
         maxZoom: 18
     }).addTo(map);
 
@@ -667,125 +676,10 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       $scope.dictionary = data;
     });
 
-    $http({method: 'POST', url: 'data/Contour_Manche.json'}).success(function(data) {
-
-      var style = {
-        color    : 'blue',
-        fillColor: 'blue',
-        weight   : 2
-      };
-      $scope.data.manche = [{
-        _polygons   : [data.features[0].geometry.coordinates[0]],
-        _style      : style,
-        _properties : {
-          name : {string: 'Manche'}
-        }
-      }];
-
-      var mancheCoordinates = data && data.features && data.features[0] &&  data.features[0].geometry && data.features[0].geometry.coordinates && data.features[0].geometry.coordinates[0]; // response data
-      _.each(mancheCoordinates, function(c, i) {
-        mancheCoordinates[i] = [c[1], c[0]];
-      });
-
-      // Rectangle coordinates around Manche
-      //var mancheCoordinates = [[49.732307856286, -1.97117692088061],[48.4, -1.75],[48.4, -0.5],[49.732307856286, -1.2]];
-
-      // Debug: show manche limits
-      //L.polygon(mancheCoordinates, {color: 'blue', fillColor: 'blue',weight: 8}).addTo(map);
-
-      searchExtent = {
-        "xmin" : _.max(_.map(mancheCoordinates, function(c) {return c[1];})),
-        "ymin" : _.max(_.map(mancheCoordinates, function(c) {return c[0];})),
-        "xmax" : _.min(_.map(mancheCoordinates, function(c) {return c[1];})),
-        "ymax" : _.min(_.map(mancheCoordinates, function(c) {return c[0];})),
-        "spatialReference" : {"wkid" : 84}
-      };
-
-      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) {
-
-        $scope.suggestionsReady = false;
-        i++;
-        return $http.get(suggestURL, {
-          params: {
-            text: val
-          }
-        }).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;
-          });
-        });
-      };
-    });
-
-    $http({method: 'POST', url: 'data/FTTH_zapm_partielle.json'}).success(function(data) {
-      var style = {
-        color    : $scope.colors.ftth,
-        fillColor: $scope.colors.ftth,
-        weight   : 2
-      };
-
-      var properties = {
-        name  : {key: 'ATD'},
-        hidden: ['ID_PM', 'MARCHE', 'ID_FT_ADSL', 'ID_FTTH_MN_ZAPM_PARTIELLE', 'ID_ZAPM_PARTIELLE', 'ID_ZAPM'],
-        position: ['DATE_DEB_TRAV_PREV']
-      };
-
-      parseData('ftth', data, style, properties);
-
-      if($scope.data.mimo && $scope.data.adsl && $scope.data.ftth) {
-        $scope.loaded = true;
-      }
-      $scope.$evalAsync();
-    });
-
-    $http({method: 'POST', url: 'data/TEL_FT_ADSL.json'}).success(function(data) {
-      var style = {
-        color    : $scope.colors.adsl,
-        fillColor: $scope.colors.adsl,
-        weight   : 2
-      };
-
-      var properties = {
-        name  : {key: 'LEGENDE'},
-        hidden: ['NATURE', 'NRA_CETE', 'NRA_TMP', 'NRA_DPT', 'ID_FT_ADSL']
-      };
-
-      parseData('adsl', data, style, properties);
-
-      if($scope.data.mimo && $scope.data.adsl && $scope.data.ftth) {
-       $scope.loaded = true;
-      }
-      $scope.$evalAsync();
-    });
-
-    $http({method: 'POST', url: 'data/Couverture_mimo.json'}).success(function(data) {
-      var style = {
-        color    : $scope.colors.mimo,
-        fillColor: $scope.colors.mimo,
-        weight   : 2
-      };
-
-      var properties = {
-        name  : {string: 'Couverture MiMo'},
-        hidden: ['ID_MIMO_COUVERTURE']
-      };
-
-      parseData('mimo', data, style, properties);
-
-      if($scope.data.mimo && $scope.data.adsl && $scope.data.ftth) {
-       $scope.loaded = true;
-      }
-      $scope.$evalAsync();
-    });
+    // Debug: show manche limits on the map
+    if($scope.debug) {
+      L.polygon(mancheCoordinates, {color: 'blue', fillColor: 'blue',weight: 8}).addTo(map);
+    }
 
     window.map = map;
 
@@ -970,8 +864,6 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
     function(data, status) {
       data = JSON.parse(data);
 
-      console.debug('address, magicKey', address, magicKey, data);
-
       if (status === 'success' && data.locations[0]) {
 
         if(data.locations[0].extent.xmax < searchExtent.xmin &&
@@ -1016,7 +908,10 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       if(property.substring(0, 5) === 'DATE_' && !$scope.dictionary[value] && isDate(value)) {
         date = formatDate(value);
       }
-      tooltip += '<div class="popup-line"><div class="popup-label">' + label + '</div><div class="popup-value">' + (date ? date.locale("fr").format('MMMM YYYY') : value) + '</div><div class="popup-small-date">' + (date ? date.locale("fr").fromNow() : '') + '</div></div>';
+
+      if(!date || $scope.debug) { // Do not show dates to user otherwise
+        tooltip += '<div class="popup-line"><div class="popup-label">' + label + '</div><div class="popup-value">' + (date ? date.locale("fr").format('MMMM YYYY') : value) + '</div><div class="popup-small-date">' + (date ? date.locale("fr").fromNow() : '') + '</div></div>';
+      }
     });
 
     if(identifier === 'adsl') {
@@ -1040,6 +935,7 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
       // Animation complete.
       map.invalidateSize();
       var centerPoint = $scope.geoCode ? new L.LatLng($scope.geoCode.y, $scope.geoCode.x) : stlo;
+
       map.setView(centerPoint, 14);
     });
   };
@@ -1302,7 +1198,30 @@ app.controller('mainController', function($scope, $detection, $http, $mdSidenav,
 
       // Animation complete.
       map.invalidateSize();
-      map.setView(new L.LatLng($scope.geoCode.y, $scope.geoCode.x), 14);
+
+      map.setView(new L.LatLng($scope.geoCode.y, $scope.geoCode.x), 18);
+    });
+  };
+
+  var i = 0, j = 0;
+  $scope.suggestLocation = function(val) {
+
+    $scope.suggestionsReady = false;
+    i++;
+    return $http.get(suggestURL, {
+      params: {
+        text: val
+      }
+    }).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;
+      });
     });
   };