Disable click on map areas w/o geoname + development/production disabled color + geostat endpoint
authorChloe Laisne <chloe.laisne@gmail.com>
Thu, 22 Sep 2016 15:34:10 +0200
changeset 278 f2c2c80a49f7
parent 274 53a6985443f8
child 279 5d2621f71f39
Disable click on map areas w/o geoname + development/production disabled color + geostat endpoint
cms/app-client/app/components/discourses-component.js
cms/app-client/app/components/notice-component.js
cms/app-client/app/components/visu-carto.js
cms/app-client/app/routes/tabs/carto.js
cms/app-client/app/templates/tabs/carto.hbs
cms/app-client/config/environment.js
cms/app-client/mirage/config.js
--- a/cms/app-client/app/components/discourses-component.js	Mon Sep 05 18:45:47 2016 +0200
+++ b/cms/app-client/app/components/discourses-component.js	Thu Sep 22 15:34:10 2016 +0200
@@ -1,6 +1,6 @@
 import Ember from 'ember';
 import d3 from 'd3';
-import env from 'app-client/config/environment';
+import ENV from 'app-client/config/environment';
 
 
 
@@ -13,7 +13,7 @@
 
     didRender: function() {
         var self = this;
-        var baseURL = env.rootURL.replace(/\/$/,"")+'/api/v1';
+        var baseURL = ENV.rootURL.replace(/\/$/,"")+'/api/v1';
 
         d3.json(baseURL + "/discourses", function(discourses) {
             var array = Object.keys(discourses).map(function (key) { return discourses[key].count; });
--- a/cms/app-client/app/components/notice-component.js	Mon Sep 05 18:45:47 2016 +0200
+++ b/cms/app-client/app/components/notice-component.js	Thu Sep 22 15:34:10 2016 +0200
@@ -17,7 +17,7 @@
                 if(contributor.name) {
                     var participant = participants.find(participant => participant.name === contributor.name);
                     if(participant) {
-                        participant['role'].push(contributor.role.split('/').pop())
+                        participant['role'].push(contributor.role.split('/').pop());
                     } else {
                         participants.push({ name: contributor.name, role: [ contributor.role.split('/').pop() ] });
                     }    
--- a/cms/app-client/app/components/visu-carto.js	Mon Sep 05 18:45:47 2016 +0200
+++ b/cms/app-client/app/components/visu-carto.js	Thu Sep 22 15:34:10 2016 +0200
@@ -1,11 +1,21 @@
 import Ember from 'ember';
 import AmCharts from 'ammaps';
+import ENV from 'app-client/config/environment';
 
 export default Ember.Component.extend({
 
+    map: null,
+
     continentsMapVar: AmCharts.maps.continentsLow,
+    continentsAreas: [],
     countriesMapVar: AmCharts.maps.worldLow,
+    countriesAreas: [],
     franceMapVar: AmCharts.maps.france2016Low,
+    franceAreas: [],
+
+    color: 'rgba(113,132,141,.2)',
+
+    locationId: 'world',
 
     filter: Ember.inject.service(),
     locationObserver: Ember.observer('filter.location', function() {
@@ -16,53 +26,117 @@
 
     geostats: [],
     observerGeostats: Ember.observer('geostats', function() {
-        //console.log(this.get('geostats'));
+        if(this.get('map')) {
+            if(this.get('map').selectedObject.id) {
+                if(this.get('map').selectedObject.parentObject.mapVar === this.get('countriesMapVar')) {
+                    if(this.get('map').selectedObject.id === 'FR') {
+                        this.setFranceAreas();
+                        this.get('map')['dataProvider'] = {
+                            'mapVar': this.get('franceMapVar'),
+                            'getAreasFromMap': true,
+                            'areas': this.get('franceAreas')
+                        };
+                        this.get('map').validateData();
+                    }
+                } else if(this.get('map').selectedObject.parentObject.mapVar === this.get('continentsMapVar')) {
+                    this.setCountriesAreas();
+                    this.get('map')['dataProvider'] = {
+                        'mapVar': this.get('countriesMapVar'),
+                        'getAreasFromMap': true,
+                        'areas': this.get('countriesAreas'),
+                        'zoomLevel': this.get('map').zoomLevel(),
+                        'zoomLatitude': this.get('map').zoomLatitude(),
+                        'zoomLongitude': this.get('map').zoomLongitude()
+                    };
+                    this.get('map').validateData();
+                }
+            } else {
+                this.createAmMap();
+            }
+        }
     }),
 
+    init: function() {
+        this._super(...arguments);
+        if (ENV.environment === 'development') {
+            this.set('color', 'rgba(141,113,113,.2)');
+        }
+    },
+
+    setFranceAreas: function() {
+        var self = this;
+        var france2016LowAreas = [];
+        this.get('franceMapVar')['svg']['g']['path'].forEach(function(area) {
+            var object = {
+                'id': area.id,
+                'passZoomValuesToTarget': false,
+                'autoZoom': false
+            };
+            if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) {
+                object['mouseEnabled'] = false,
+                object['color'] = self.get('color');
+            }
+            france2016LowAreas.push(object);
+        });
+        this.set('franceAreas', france2016LowAreas);
+    },
+
+    setCountriesAreas: function() {
+        var self = this;
+        var worldLowAreas = [];
+        this.get('countriesMapVar')['svg']['g']['path'].forEach(function(area) {
+            if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) {
+                worldLowAreas.push({
+                    'id': area.id,
+                    'mouseEnabled': false,
+                    'color': self.get('color')
+                });
+            } else {
+                if(typeof worldLowAreas.find(country => country.id === area.id) === 'undefined') {
+                    var object = {
+                        'id': area.id,
+                        'selectable': true
+                    };
+                    if(area.id === 'FR') {
+                        object['autoZoom'] = true;
+                    }
+                    worldLowAreas.push(object);
+                }
+            }
+        });
+        this.set('countriesAreas', worldLowAreas);
+    },
+
+    setContinentsAreas: function() {
+        var self = this;
+        var continentsLowAreas = [];
+        this.get('continentsMapVar')['svg']['g']['path'].forEach(function(area) {
+            var object = {
+                'id': area.id,
+                'passZoomValuesToTarget': true,
+                'selectable': true,
+                'mouseEnabled': true,
+                'autoZoom': true
+            };
+            if(self.get('geostats').findIndex(geostat => geostat.id === area.id) === -1) {
+                object['mouseEnabled'] = false,
+                object['color'] = self.get('color');
+            }
+            continentsLowAreas.push(object);
+        });
+        this.set('continentsAreas', continentsLowAreas);
+    },
+
     didInsertElement: function(){
         this.$('#mapdiv').height(Ember.$('.corpus-app-container').height());
         this.createAmMap();
     },
 
     createAmMap: function() {
+        console.log('createAmMap');
         var self = this;
 
-        var france2016LowAreas = [];
-        this.get('franceMapVar')['svg']['g']['path'].forEach(function(area) {
-            france2016LowAreas.push({
-                'id': area.id,
-                'passZoomValuesToTarget': false,
-                'autoZoom': false,
-                'selectable': true
-            })
-        });
-
-        var continentsLowAreas = [];
-        this.get('continentsMapVar')['svg']['g']['path'].forEach(function(area) {
-            var object = {
-                'id': area.id,
-                'linkToObject': {
-                    'mapVar': self.get('countriesMapVar'),
-                    'getAreasFromMap': true
-                },
-                'passZoomValuesToTarget': true,
-                'autoZoom': true
-            };
-            if(area.id === 'europe') {
-                object['linkToObject']['areas'] = [{
-                    'id': 'FR',
-                    'linkToObject': {
-                        'mapVar': self.get('franceMapVar'),
-                        'getAreasFromMap': true,
-                        'areas': france2016LowAreas
-                    },
-                    'autoZoom': true,
-                    'selectable': true
-                }];
-            }
-            continentsLowAreas.push(object);
-        });
-
+        this.setContinentsAreas();
         this.set('map', AmCharts.makeChart('mapdiv', {
             'type': 'map',
             'fontFamily': 'sans-serif',
@@ -86,7 +160,7 @@
 
             'dataProvider': {
                 'mapVar': this.get('continentsMapVar'),
-                'areas': continentsLowAreas
+                'areas': this.get('continentsAreas')
             },
 
             listeners: [{
@@ -101,16 +175,14 @@
     },
 
     clickMapObject: function(event) {
+        this.set('locationId', event.mapObject.id);
+        this.sendAction('area', event.mapObject.id);
         this.get('filter').set('location', event.mapObject.title);
-
-        /*this.get('geostats').forEach( function (geostat) {
-            console.log('geostat', geostat.get('id'), geostat.get('count'));
-        });*/
     },
 
     homeButtonClicked: function(event) {
         if(event.chart.dataProvider.map !== 'continentsLow') {
-            this.createAmMap();
+            this.sendAction('area', 'world');
         }
     }
 
--- a/cms/app-client/app/routes/tabs/carto.js	Mon Sep 05 18:45:47 2016 +0200
+++ b/cms/app-client/app/routes/tabs/carto.js	Thu Sep 22 15:34:10 2016 +0200
@@ -2,8 +2,23 @@
 
 export default Ember.Route.extend({
 
-	model: function() {
-        return this.store.query('geostat', { 'areas': 'FR-A,FR-B,FR-C,FR-D,FR-E' });
+    area: 'world',
+
+    model: Ember.observer('area', function() {
+        var self = this;
+        var promise = this.store.query('geostat', {
+            'areas': self.get('area')
+        });
+        promise.then(function(value) {
+            self.controllerFor('tabs/carto').set('areas', value.get('content'));
+        });
+        return promise;
+    }),
+
+    actions: {
+        setAreaParameter: function(id) {
+            this.set('area', id);
+        }
     }
 
 });
--- a/cms/app-client/app/templates/tabs/carto.hbs	Mon Sep 05 18:45:47 2016 +0200
+++ b/cms/app-client/app/templates/tabs/carto.hbs	Thu Sep 22 15:34:10 2016 +0200
@@ -1,3 +1,3 @@
 <div id="tabs-carto">
-    {{ visu-carto geostats=model }}
+    {{ visu-carto geostats=areas area='setAreaParameter' }}
 </div>
\ No newline at end of file
--- a/cms/app-client/config/environment.js	Mon Sep 05 18:45:47 2016 +0200
+++ b/cms/app-client/config/environment.js	Thu Sep 22 15:34:10 2016 +0200
@@ -1,63 +1,45 @@
 /* jshint node: true */
 
 module.exports = function(environment) {
-  var ENV = {
-    rootElement: '#corpus-app',
-    modulePrefix: 'app-client',
-    environment: environment,
-    rootURL: '/corpus/',
-    locationType: 'hash',
-    // contentSecurityPolicy: {
-    //   'default-src': "'none'",
-    //   'style-src': "'self' 'http://localhost:4200'"
-    // },
-    EmberENV: {
-      FEATURES: {
-        // Here you can enable experimental features on an ember canary build
-        // e.g. 'with-controller': true
-      }
-    },
-
-    APP: {
-      baseStatic: '',
-      // Here you can pass flags/options to your application instance
-      // when it is created
+    var ENV = {
+        rootElement: '#corpus-app',
+        modulePrefix: 'app-client',
+        environment: environment,
+        rootURL: '/corpus/',
+        locationType: 'hash',
+        EmberENV: {
+            FEATURES: {
+                // Here you can enable experimental features on an ember canary build
+                // e.g. 'with-controller': true
+            }
+        },
+        APP: {
+            baseStatic: ''
+            // Here you can pass flags/options to your application instance
+            // when it is created
+        }
+    };
+    if (environment === 'development') {
+        ENV.APP.baseStatic = '';
+        ENV.contentSecurityPolicy = {
+            'default-src': "'none'",
+            'script-src': "'self' *",
+            'font-src': "'self'",
+            'connect-src': "'self' *",
+            'img-src': "'self'",
+            'style-src': "'self' *",
+            'media-src': "'self'"
+        };
     }
-  };
-
-  if (environment === 'development') {
-    ENV.APP.baseStatic = '';
-    // ENV.APP.LOG_RESOLVER = true;
-    // ENV.APP.LOG_ACTIVE_GENERATION = true;
-    // ENV.APP.LOG_TRANSITIONS = true;
-    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
-    // ENV.APP.LOG_VIEW_LOOKUPS = true;
-    ENV.contentSecurityPolicy = {
-      'default-src': "'none'",
-      'script-src': "'self' *",
-      'font-src': "'self'",
-      'connect-src': "'self' *",
-      'img-src': "'self'",
-      'style-src': "'self' *",
-      'media-src': "'self'"
-    };
-  }
-
-  if (environment === 'test') {
-    // Testem prefers this...
-    ENV.rootURL = '/';
-    ENV.locationType = 'none';
-
-    // keep test console output quieter
-    ENV.APP.LOG_ACTIVE_GENERATION = false;
-    ENV.APP.LOG_VIEW_LOOKUPS = false;
-
-    ENV.APP.rootElement = '#ember-testing';
-  }
-
-  if (environment === 'production') {
-    ENV.APP.baseStatic = '/modules/corpus/app-client/';
-  }
-
-  return ENV;
-};
+    if (environment === 'test') {
+        ENV.rootURL = '/';
+        ENV.locationType = 'none';
+        ENV.APP.LOG_ACTIVE_GENERATION = false;
+        ENV.APP.LOG_VIEW_LOOKUPS = false;
+        ENV.APP.rootElement = '#ember-testing';
+    }
+    if (environment === 'production') {
+        ENV.APP.baseStatic = '/modules/corpus/app-client/';
+    }
+    return ENV;
+};
\ No newline at end of file
--- a/cms/app-client/mirage/config.js	Mon Sep 05 18:45:47 2016 +0200
+++ b/cms/app-client/mirage/config.js	Thu Sep 22 15:34:10 2016 +0200
@@ -32,13 +32,7 @@
 
     this.get('/languages');
 
-    this.get('/geostats', function(db, request) {
-        if(request.queryParams.areas) {
-            return db.areas.find(request.queryParams.areas.split(','));
-        } else {
-            return []; 
-        }
-    });
+    this.get('/geostats');
 
     this.get('/themes');