Setup filter service
authorChloe Laisne <chloe.laisne@gmail.com>
Wed, 22 Jun 2016 22:13:46 +0200
changeset 197 7b266ccf6d3d
parent 196 7550cb541901
child 198 541e26eb356f
Setup filter service
cms/app-client/app/components/discourses-component.js
cms/app-client/app/components/filter-component.js
cms/app-client/app/components/filtering-component.js
cms/app-client/app/components/sorting-component.js
cms/app-client/app/components/visu-carto.js
cms/app-client/app/components/visu-chrono.js
cms/app-client/app/controllers/application.js
cms/app-client/app/controllers/tabs/chrono.js
cms/app-client/app/controllers/tabs/langues.js
cms/app-client/app/services/filter.js
cms/app-client/app/templates/components/visu-chrono.hbs
--- a/cms/app-client/app/components/discourses-component.js	Tue Jun 21 14:24:30 2016 +0200
+++ b/cms/app-client/app/components/discourses-component.js	Wed Jun 22 22:13:46 2016 +0200
@@ -7,6 +7,7 @@
 export default Ember.Component.extend({
 
     constants: Ember.inject.service(),
+    filter: Ember.inject.service(),
 
     init: function() {
         this._super(...arguments);
@@ -48,7 +49,9 @@
                 .style("position", "absolute")
                 .style("left", function(d) { return d.x - Math.max(10 + d.r, d.r) + 'px'; })
                 .style("top", function(d) { return d.y - Math.max(10 + d.r, d.r) + 'px'; })
-                .on('click', function(d) { self.get('setQueryParameters')(d.id); });
+                .on('click', function(d) {
+                    self.get('filter').set('discourse', d.id);
+                });
             
             item.append("span")
                 .text(function(d) { return d.name; })
@@ -73,7 +76,9 @@
                 .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
 
             var leaf = svg.selectAll(".leaf")
-                .on('click', function(d) { self.get('setQueryParameters')(d.id); });
+                .on('click', function(d) {
+                    self.get('filter').set('discourse', d.id);
+                });
             
             leaf.append("circle")
                 .attr("r", function(d) { return Math.max(7.5 + d.r * 2, d.r * 2); })
--- a/cms/app-client/app/components/filter-component.js	Tue Jun 21 14:24:30 2016 +0200
+++ b/cms/app-client/app/components/filter-component.js	Wed Jun 22 22:13:46 2016 +0200
@@ -6,14 +6,8 @@
 
 	filter: Ember.inject.service(),
 
-	init: function() {
-		this._super(...arguments);
-		//console.log('component.filter', this.get('filter').get('date'));
-	},
-
 	actions: {
 		removeFilter: function(key, value) {
-			//console.log(key, value);
 			this.get('filter').set(key, value);
 		}
 	}
--- a/cms/app-client/app/components/filtering-component.js	Tue Jun 21 14:24:30 2016 +0200
+++ b/cms/app-client/app/components/filtering-component.js	Wed Jun 22 22:13:46 2016 +0200
@@ -6,6 +6,8 @@
 
     isDropdownOpen: false,
 
+    filterService: Ember.inject.service('filter'),
+
     filter: '',
     filteredThemes: Ember.computed.filter('themes', function(item) {
         return this.get('filter') && (item.get('label') || '').match(new RegExp('^' + this.get('filter')));
@@ -13,11 +15,11 @@
 
     init: function() {
         this._super(...arguments);
-        jQuery(window).on('click', this, Ember.run.bind(this, this.get('elementFocusOut')));
+        Ember.$(window).on('click', this, Ember.run.bind(this, this.get('elementFocusOut')));
     },
 
     elementFocusOut: function(event) {
-        if(!$.contains(this.get('element'), event.target)) {
+        if(!Ember.$.contains(this.get('element'), event.target)) {
             this.set('isDropdownOpen', false);
         }
     },
@@ -25,7 +27,7 @@
     actions: {
 
         setQueryParameters: function(id) {
-            this.get('setQueryParameters')(id);
+            this.get('filterService').set('theme', id);
             this.set('filter', '');
         },
 
@@ -38,7 +40,7 @@
 
     didDestroyElement: function() {
         this._super(...arguments);
-        jQuery(window).off('click', this.get('elementFocusOut'));
+        Ember.$(window).off('click', this.get('elementFocusOut'));
     }
 
 });
--- a/cms/app-client/app/components/sorting-component.js	Tue Jun 21 14:24:30 2016 +0200
+++ b/cms/app-client/app/components/sorting-component.js	Wed Jun 22 22:13:46 2016 +0200
@@ -4,6 +4,8 @@
 
     classNames: ['sorting-component'],
 
+    filterService: Ember.inject.service('filter'),
+
     sorting: ['label'],
     sortedThemes: Ember.computed.sort('themes', 'sorting'),
 
@@ -15,9 +17,8 @@
 
     actions: {
 
-
         setQueryParameters: function(id) {
-            this.get('setQueryParameters')(id);
+            this.get('filterService').set('theme', id);
         },
 
         sortBy: function (type) {
--- a/cms/app-client/app/components/visu-carto.js	Tue Jun 21 14:24:30 2016 +0200
+++ b/cms/app-client/app/components/visu-carto.js	Wed Jun 22 22:13:46 2016 +0200
@@ -2,7 +2,9 @@
 import AmCharts from 'ammaps';
 
 export default Ember.Component.extend({
-  // storage: Ember.inject.service(),
+
+  filter: Ember.inject.service(),
+
   didInsertElement: function(){
     var _this = this;
 
@@ -99,7 +101,7 @@
         if (event.mapObject.id === "backButton") {
             handleGoHome();
         }
-        _this.sendAction('action', event.mapObject.title);
+        _this.get('filter').set('location', event.mapObject.title);
     }
 
     // monitor when home icon was clicked and also go to continents map
--- a/cms/app-client/app/components/visu-chrono.js	Tue Jun 21 14:24:30 2016 +0200
+++ b/cms/app-client/app/components/visu-chrono.js	Wed Jun 22 22:13:46 2016 +0200
@@ -1,16 +1,16 @@
 import Ember from 'ember';
 
-const { getOwner } = Ember;
+export default Ember.Component.extend({
 
-export default Ember.Component.extend({
+    filter: Ember.inject.service(),
 
     elementId: "chrono-table",
 
     didInsertElement: function(){
         var self = this;
 
-        if (getOwner(self).lookup('controller:application').date !== null){
-            this.highlightQuery(getOwner(self).lookup('controller:application').date);
+        if (this.get('filter').get('date') !== null){
+            this.highlightQuery(this.get('filter').get('date'));
         }
 
         var isMouseDown = false,
@@ -20,12 +20,28 @@
             isMouseDown = true;
             Ember.$(this).toggleClass("highlighted");
             isHighlighted = Ember.$(this).hasClass("highlighted");
-            self.sendUpdate();
+            var dates = self.get('filter').get('date').toArray();
+            var index = dates.indexOf(parseInt(Ember.$(this).attr('id')));
+            if(index === -1) {
+                dates.push(parseInt(Ember.$(this).attr('id')));
+            } else {
+                dates.splice(index, 1);
+            }
+            self.get('filter').set('date', dates);
             return false; // prevent text selection
         }).mouseover(function () {
             if (isMouseDown) {
-                Ember.$(this).toggleClass("highlighted", isHighlighted);
-                self.sendUpdate();
+                if(Ember.$(this).hasClass("highlighted") !== isHighlighted) {
+                    Ember.$(this).toggleClass("highlighted", isHighlighted);
+                    var dates = self.get('filter').get('date').toArray();
+                    var index = dates.indexOf(parseInt(Ember.$(this).attr('id')));
+                    if(index === -1) {
+                        dates.push(parseInt(Ember.$(this).attr('id')));
+                    } else {
+                        dates.splice(index, 1);
+                    }
+                    self.get('filter').set('date', dates);
+                }
             }
         }).bind("selectstart", function () {
             return false;
@@ -36,18 +52,9 @@
         });
     },
 
-    sendUpdate: function(){
-        var dateQuery = [];
-        Ember.$('.highlighted').map(function(index, elt) {
-            dateQuery.push(parseInt(Ember.$(elt).parent().attr('id')) + parseInt(Ember.$(elt).html()));
-        });
-        this.sendAction('action', dateQuery);
-    },
-
-    highlightQuery: function(list){
-        list.map(function(elt){
-            var year = Math.floor(parseInt(elt)/10)*10;
-            Ember.$("#"+year+" ."+(parseInt(elt)-year)).toggleClass("highlighted", true);
+    highlightQuery: function(dates){
+        dates.map(function(date){
+            Ember.$("#" + date).toggleClass("highlighted", true);
         });
     }
 
--- a/cms/app-client/app/controllers/application.js	Tue Jun 21 14:24:30 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Wed Jun 22 22:13:46 2016 +0200
@@ -2,44 +2,27 @@
 
 export default Ember.Controller.extend({
 
-    queryParams: ['location', 'langue', 'discours', 'date', 'thematique', 'detail'],
+    queryParams: ['location', 'date', 'detail', {
+        language: 'langue',
+        discourse: 'discours',
+        theme: 'thematique'
+    }],
 
     filter: Ember.inject.service(),
 
     date: [],
-    setDateFilter: Ember.observer('date', function() {
-        this.get('filter').set('date', this.get('date'));
-    }),
-    setDate: Ember.observer('filter.date', function() {
-        this.set('date', this.get('filter').get('date'));
-    }),
-    discours: null,
-    setDiscoursFilter: Ember.observer('discours', function() {
-        this.get('filter').set('discours', this.get('discours'));
-    }),
-    setDiscours: Ember.observer('filter.discours', function() {
-        this.set('discours', this.get('filter').get('discours'));
-    }),
-    langue: null,
-    setLangueFilter: Ember.observer('langue', function() {
-        this.get('filter').set('langue', this.get('langue'));
+    discourse: null,
+    language: null,
+    location: null,
+    theme: null,
+
+    setFilter: Ember.observer('date', 'discourse', 'language', 'location', 'theme', function(sender, key) {
+        this.get('filter').set(key, this.get(key));
     }),
-    setLangue: Ember.observer('filter.langue', function() {
-        this.set('langue', this.get('filter').get('langue'));
-    }),
-    location: null,
-    setLocationFilter: Ember.observer('location', function() {
-        this.get('filter').set('location', this.get('location'));
-    }),
-    setLocation: Ember.observer('filter.location', function() {
-        this.set('location', this.get('filter').get('location'));
-    }),
-    thematique: null,
-    setThematiqueFilter: Ember.observer('thematique', function() {
-        this.get('filter').set('thematique', this.get('thematique'));
-    }),
-    setThematique: Ember.observer('filter.thematique', function() {
-        this.set('thematique', this.get('filter').get('thematique'));
+
+    filterObserver: Ember.observer('filter.date', 'filter.discourse', 'filter.language', 'filter.location', 'filter.theme', function(sender, key) {
+        key = key.split('.').pop();
+        this.set(key, this.get('filter').get(key));
     }),
 
     detail: null,
--- a/cms/app-client/app/controllers/tabs/chrono.js	Tue Jun 21 14:24:30 2016 +0200
+++ b/cms/app-client/app/controllers/tabs/chrono.js	Wed Jun 22 22:13:46 2016 +0200
@@ -2,9 +2,18 @@
 
 export default Ember.Controller.extend({
 
+	filter: Ember.inject.service(),
+
     actions: {
-        updateUrl: function(selection){
-            this.transitionToRoute({queryParams: {'date': selection}});
+        updateUrl: function(action, selection){
+        	console.log('updateUrl', action, selection);
+        	if(action === 'add') {
+        		console.log('updateUrl', action, selection);
+        		this.get('filter').set('date', selection);
+        	} else if(action === 'remove') {
+        		this.get('filter').remove('date', selection);
+        	}
+            //this.transitionToRoute({queryParams: {'date': selection}});
         }
     }
 });
--- a/cms/app-client/app/controllers/tabs/langues.js	Tue Jun 21 14:24:30 2016 +0200
+++ b/cms/app-client/app/controllers/tabs/langues.js	Wed Jun 22 22:13:46 2016 +0200
@@ -1,9 +1,12 @@
 import Ember from 'ember';
 
 export default Ember.Controller.extend({
+
+	filter: Ember.inject.service(),
+
 	actions: {
         transitionTo: function(id) {
-            this.transitionToRoute({ queryParams: { 'langue': id } });
+        	this.get('filter').set('language', id);
         }   
     }
 });
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/cms/app-client/app/services/filter.js	Wed Jun 22 22:13:46 2016 +0200
@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+export default Ember.Service.extend({
+
+	dates: [],
+	discourse: null,
+	language: null,
+	location: null,
+	theme: null
+
+});
--- a/cms/app-client/app/templates/components/visu-chrono.hbs	Tue Jun 21 14:24:30 2016 +0200
+++ b/cms/app-client/app/templates/components/visu-chrono.hbs	Wed Jun 22 22:13:46 2016 +0200
@@ -1,90 +1,90 @@
 <div class="interval">
     1960 -
-    <ul id="1960">
-        <li class="0">0</li>
-        <li class="1">1</li>
-        <li class="2">2</li>
-        <li class="3">3</li>
-        <li class="4">4</li>
-        <li class="5">5</li>
-        <li class="6">6</li>
-        <li class="7">7</li>
-        <li class="8">8</li>
-        <li class="9">9</li>
+    <ul class="1960">
+        <li id="1960">0</li>
+        <li id="1961">1</li>
+        <li id="1962">2</li>
+        <li id="1963">3</li>
+        <li id="1964">4</li>
+        <li id="1965">5</li>
+        <li id="1966">6</li>
+        <li id="1967">7</li>
+        <li id="1968">8</li>
+        <li id="1969">9</li>
     </ul>
 </div>
 <div class="interval">
     1970 -
-    <ul id="1970">
-        <li class="0">0</li>
-        <li class="1">1</li>
-        <li class="2">2</li>
-        <li class="3">3</li>
-        <li class="4">4</li>
-        <li class="5">5</li>
-        <li class="6">6</li>
-        <li class="7">7</li>
-        <li class="8">8</li>
-        <li class="9">9</li>
+    <ul class="1970">
+        <li id="1970">0</li>
+        <li id="1971">1</li>
+        <li id="1972">2</li>
+        <li id="1973">3</li>
+        <li id="1974">4</li>
+        <li id="1975">5</li>
+        <li id="1976">6</li>
+        <li id="1977">7</li>
+        <li id="1978">8</li>
+        <li id="1979">9</li>
     </ul>
 </div>
 <div class="interval">
     1980 -
-    <ul id="1980">
-        <li class="0">0</li>
-        <li class="1">1</li>
-        <li class="2">2</li>
-        <li class="3">3</li>
-        <li class="4">4</li>
-        <li class="5">5</li>
-        <li class="6">6</li>
-        <li class="7">7</li>
-        <li class="8">8</li>
-        <li class="9">9</li>
+    <ul class="1980">
+        <li id="1980">0</li>
+        <li id="1981">1</li>
+        <li id="1982">2</li>
+        <li id="1983">3</li>
+        <li id="1984">4</li>
+        <li id="1985">5</li>
+        <li id="1986">6</li>
+        <li id="1987">7</li>
+        <li id="1988">8</li>
+        <li id="1989">9</li>
     </ul>
 </div>
 <div class="interval">
     1990 -
-    <ul id="1990">
-        <li class="0">0</li>
-        <li class="1">1</li>
-        <li class="2">2</li>
-        <li class="3">3</li>
-        <li class="4">4</li>
-        <li class="5">5</li>
-        <li class="6">6</li>
-        <li class="7">7</li>
-        <li class="8">8</li>
-        <li class="9">9</li>
+    <ul class="1990">
+        <li id="1990">0</li>
+        <li id="1991">1</li>
+        <li id="1992">2</li>
+        <li id="1993">3</li>
+        <li id="1994">4</li>
+        <li id="1995">5</li>
+        <li id="1996">6</li>
+        <li id="1997">7</li>
+        <li id="1998">8</li>
+        <li id="1999">9</li>
     </ul>
 </div>
 <div class="interval">
     2000 -
-    <ul id="2000">
-        <li class="0">0</li>
-        <li class="1">1</li>
-        <li class="2">2</li>
-        <li class="3">3</li>
-        <li class="4">4</li>
-        <li class="5">5</li>
-        <li class="6">6</li>
-        <li class="7">7</li>
-        <li class="8">8</li>
-        <li class="9">9</li>
+    <ul class="2000">
+        <li id="2000">0</li>
+        <li id="2001">1</li>
+        <li id="2002">2</li>
+        <li id="2003">3</li>
+        <li id="2004">4</li>
+        <li id="2005">5</li>
+        <li id="2006">6</li>
+        <li id="2007">7</li>
+        <li id="2008">8</li>
+        <li id="2009">9</li>
     </ul>
 </div>
 <div class="interval">
     2010 -
-    <ul id="2010">
-        <li class="0">0</li>
-        <li class="1">1</li>
-        <li class="2">2</li>
-        <li class="3">3</li>
-        <li class="4">4</li>
-        <li class="5">5</li>
-        <li class="6">6</li>
-        <li class="7">7</li>
-        <li class="8">8</li>
-        <li class="9">9</li>
+    <ul class="2010">
+        <li id="2010">0</li>
+        <li id="2011">1</li>
+        <li id="2012">2</li>
+        <li id="2013">3</li>
+        <li id="2014">4</li>
+        <li id="2015">5</li>
+        <li id="2016">6</li>
+        <li id="2017">7</li>
+        <li id="2018">8</li>
+        <li id="2019">9</li>
     </ul>
 </div>