--- a/cms/app-client/app/controllers/application.js	Thu Jun 23 23:21:02 2016 +0200
+++ b/cms/app-client/app/controllers/application.js	Fri Jun 24 02:00:50 2016 +0200
@@ -15,33 +15,79 @@
     theme: null,
 
     filter: Ember.inject.service(),
-    setFilter: Ember.observer('date', 'discourse', 'language', 'location', 'theme', function(sender, key) {
+    setFilter: Ember.observer('discourse', 'language', 'location', 'theme', function(sender, key) {
+        console.log('propertyDidChange', this.get('queryParams'), this.get('date'), this.get('filter.date'));
         this.get('filter').set(key, this.get(key));
     }),
-    filterObserver: Ember.observer('filter.date', 'filter.discourse', 'filter.language', 'filter.location', 'filter.theme', function(sender, key) {
+    filterObserver: Ember.observer('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,
-
-    dateIntervals: Ember.computed('date', function() {
+    setDateFilter: Ember.observer('date', function(sender, key) {
         var intervals = [];
-        this.get('date').forEach(function(date) {
-            var intervalDate = false;
+        this.get(key).forEach(function(interval) {
+            var interval = interval.split('-');
+            if(interval.length > 1) {
+                var array = [];
+                for(var i = interval[0]; i <= interval[1]; i++) {
+                    array.push(parseInt(i));
+                }
+                interval = array;
+            } else {
+                interval = parseInt(interval);
+            }
+            intervals = intervals.concat(interval);
+        });
+        this.get('filter').set(key, intervals);
+    }),
+    dateFilterObserver: Ember.observer('filter.date', function(sender, key) {
+        key = key.split('.').pop();
+        var intervals = [];
+        this.get('filter').get(key).forEach(function(date) {
+            var isInterval = false;
             intervals.forEach(function(interval) {
                 if(interval.length && (interval.includes(date + 1) || interval.includes(date - 1))) {
                     interval.push(date);
-                    intervalDate = true;
+                    isInterval = true;
                 }
             });
-            if (!intervalDate) {
+            if (!isInterval) {
                 intervals.push([date]);
             }
         });
-        return intervals;
+        intervals.forEach(function(interval, index) {
+            if(interval.length > 1) {
+               intervals[index] =  interval.shift() + '-' + interval.pop()
+            } else {
+               intervals[index] =  interval.toString();
+            }
+        });
+        if(!this.arraysEqual(this.get(key).toArray(), intervals)) {
+            this.set(key, intervals);    
+        }
     }),
 
+    arraysEqual: function(a, b) {
+        if (a === b) {
+            return true;
+        }
+        if (a == null || b == null) {
+            return false;
+        }
+        if (a.length != b.length) {
+            return false;
+        }
+        for(var i = 0; i < a.length; ++i) {
+            if(a[i] !== b[i]) {
+                return false;
+            }
+        }
+        return true;
+    },
+
+    detail: null,
+
     currentId: null,
     currentItem: Ember.computed('currentId', function() {
         Ember.$(".result-item").toggleClass("playing", false);
@@ -58,32 +104,6 @@
 
     actions: {
 
-        deleteTag: function(key, value){
-            var newValue = null;
-            if (key === 'date'){
-                newValue = [];
-                Ember.$.each(this.get('date'), function(index, date){
-                    if(!value.includes(date)) {
-                        newValue.push(date);
-                    }
-                });
-            }
-            this.set(key, newValue);
-        },
-
-        /*deleteTag: function(query, item) {
-            var newParams = null;
-            if (query === 'date'){
-                newParams = [];
-                Ember.$.each(this.get('date'), function(index, elt){
-                    if (elt !== item){
-                        newParams.push(elt);
-                    }
-                });
-            }
-            this.set(query, newParams);
-        }*/
-
         changeDocument: function(docDirection){
             var direction = (docDirection === "next") ? 1 : -1;
             var currentObject = this.get("filteredDocuments").findBy('id', this.get("currentItem").get('id'));

--- a/cms/app-client/app/routes/application.js	Thu Jun 23 23:21:02 2016 +0200
+++ b/cms/app-client/app/routes/application.js	Fri Jun 24 02:00:50 2016 +0200
@@ -15,11 +15,11 @@
 
     deserializeQueryParam: function(value, urlKey) {
         if (urlKey === 'date') {
-            var arr = [];
+            var array = [];
             for (var i = 0; i < value.length; i++) {
-                arr.push(parseInt(value[i]));
+                array.push(value[i]);
             }
-            return arr;
+            return array;
         }
         return value;
     },

--- a/cms/app-client/app/styles/components/filter-component.scss	Thu Jun 23 23:21:02 2016 +0200
+++ b/cms/app-client/app/styles/components/filter-component.scss	Fri Jun 24 02:00:50 2016 +0200
@@ -24,12 +24,38 @@
     margin-right: 10px;
 }
 
+.filter-component ul li::before {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    content: '';
+    margin-right: 10px;
+}
+
+.filter-component ul li.location::before{
+    background-color: #3985AB;
+}
+.filter-component ul li.language::before{
+    background-color: #B94A43;
+}
+.filter-component ul li.discourse::before{
+    background-color: #468842;
+}
+.filter-component ul li.date::before{
+    background-color: #E50086;
+}
+.filter-component ul li.theme::before{
+    background-color: #F89406;
+}
+
 .filter-component ul li:last-child {
     margin-right: 0px;
 }
 
-.filter-component ul li span {
+.filter-component ul li .remove {
     padding-left: 10px;
+    cursor: pointer;
 }
 
 .filter-component ul li .label {

--- a/cms/app-client/app/styles/results.scss	Thu Jun 23 23:21:02 2016 +0200
+++ b/cms/app-client/app/styles/results.scss	Fri Jun 24 02:00:50 2016 +0200
@@ -15,28 +15,6 @@
   padding: 1px 5px;
   color: #fff;
 }
-.result-header .filters.location{
-  background-color: #3985AB;
-}
-.result-header .filters.langue{
-  background-color: #B94A43;
-}
-.result-header .filters.discours{
-  background-color: #468842;
-}
-.result-header .filters.date{
-  background-color: #E50086;
-}
-.result-header .filters.thematique{
-  background-color: #F89406;
-}
-.result-header .fa{
-  display: inline-block;
-  margin-left: 5px;
-  position: relative;
-  top: 1px;
-  cursor: pointer;
-}
 
 .result-list{
   flex: 1 1 auto;

--- a/cms/app-client/app/templates/components/filter-component.hbs	Thu Jun 23 23:21:02 2016 +0200
+++ b/cms/app-client/app/templates/components/filter-component.hbs	Fri Jun 24 02:00:50 2016 +0200
@@ -1,20 +1,20 @@
 <h2>Filtres</h2>
 <ul>
 {{#if filter.location}}
-    <li class="filter location">{{filter.location}}<span{{action 'removeFilter' 'location'}}>&#10005;</span></li>
+    <li class="filter location">{{filter.location}}<span class="remove"{{action 'removeFilter' 'location'}}>&#10005;</span></li>
 {{/if}}
 {{#if filter.language}}
-    <li class="filter language">{{doc-language class="label" url=filter.language}}<span{{action 'removeFilter' 'language'}}>&#10005;</span></li>
+    <li class="filter language">{{doc-language class="label" url=filter.language}}<span class="remove"{{action 'removeFilter' 'language'}}>&#10005;</span></li>
 {{/if}}
 {{#if filter.discourse}}
-<li class="filter discourse">{{filter.discourse}}<span{{action 'removeFilter' 'discourse'}}>&#10005;</span></li>
+<li class="filter discourse">{{filter.discourse}}<span class="remove"{{action 'removeFilter' 'discourse'}}>&#10005;</span></li>
 {{/if}}
 {{#if filter.date}}
     {{#each intervals as |interval| }}
-    <li class="filter date" data-dates="{{interval}}">{{interval interval}}<span{{action 'removeFilter' 'date' interval }}>&#10005;</span></li>
+    <li class="filter date" data-dates="{{interval}}">{{interval interval}}<span class="remove"{{action 'removeFilter' 'date' interval }}>&#10005;</span></li>
     {{/each}}
 {{/if}}
 {{#if filter.theme}}
-    <li class="filter theme">{{filter.theme}}<span{{action 'removeFilter' 'theme'}}>&#10005;</span></li>
+    <li class="filter theme">{{filter.theme}}<span class="remove"{{action 'removeFilter' 'theme'}}>&#10005;</span></li>
 {{/if}}
 </ul>
\ No newline at end of file