near/berliner-winter
1
0
Fork 0
mirror of https://github.com/heyarne/berliner-winter.git synced 2026-05-06 19:23:39 +02:00
Code Issues Projects Releases Wiki Activity

Implement filter by year

Browse source
This commit is contained in:
Arne Schlüter 2015-02-08 11:28:30 +01:00
commit 7bf461d097
4 changed files with 54 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

11
static/js/filter.js
View file

@ -6,7 +6,7 @@ export default {
* @param {Array[String]} categories * @param {Array[String]} categories
* @return {Array[Obect]} * @return {Array[Obect]}
*/ */
categories: function (data, categories) { byCategories: function (data, categories) {
return data.filter(function (incident) { return data.filter(function (incident) {
for (var i = 0, l = incident.categories.length; i < l; i++) for (var i = 0, l = incident.categories.length; i < l; i++)
if (categories.indexOf(incident.categories[i]) !== -1) if (categories.indexOf(incident.categories[i]) !== -1)
@ -14,6 +14,15 @@ export default {
return false return false
}); });
},
/**
* Return only the incidents that happened in a given year
*/
byYear: function (data, year) {
return data.filter(function (incident) {
return incident.date.indexOf(year) === 0
})
} }
}; };

1
static/js/main.js
View file

@ -23,4 +23,5 @@ $.getJSON('/articles/')
visualization.displayMarkers() visualization.displayMarkers()
visualization.setupCategoryFilter('.category-filter') visualization.setupCategoryFilter('.category-filter')
visualization.setupYearFilter('.year-filter')
}); });

44
static/js/visualization.js
View file

@ -18,7 +18,6 @@ class Visualization {
this.colors = colors this.colors = colors
this._markers = [] this._markers = []
this._$categoryList = null
} }
/** /**
@ -66,7 +65,7 @@ class Visualization {
$(e.target).parent().toggleClass('active') $(e.target).parent().toggleClass('active')
var categories = this.getActiveCategories() var categories = this.getActiveCategories()
var incidents = filter.categories(this.data, categories) var incidents = filter.byCategories(this.data, categories)
this.displayMarkers(incidents) this.displayMarkers(incidents)
e.preventDefault() e.preventDefault()
@ -75,6 +74,47 @@ class Visualization {
}) })
} }
/**
* Creates the year list which optionally already holds a button for "all"
* @param {jQuery.Selector} selector The container holding
*/
setupYearFilter (selector) {
var fragment = document.createDocumentFragment()
var $a = $(document.createElement('a')).attr('href', '#')
var $li = $(document.createElement('li')).append($a)
this._$yearList = $(selector)
var years = new Set()
this.data.forEach(incident => { years.add(incident.date.substr(0, 4)) })
Array.from(years).sort().forEach(function (year) {
$li.clone()
.find('a')
.text(year)
.data({ showYear: year })
.end()
.appendTo(fragment)
})
this._$yearList
.prepend(fragment)
.on('click', 'a', e => {
var $target = $(e.target)
$target.parent().siblings().removeClass('active')
$target.parent().addClass('active')
var year = $target.data().showYear
var incidents = (year) ? filter.byYear(this.data, year) : this.data
this.displayMarkers(incidents)
e.preventDefault()
e.stopPropagation()
return false
})
}
/** /**
* Creates the correct marker for a single incident and adds it to the map * Creates the correct marker for a single incident and adds it to the map
* @param {Object} data A single incident * @param {Object} data A single incident

8
views/index.tpl
View file

@ -9,13 +9,6 @@
<body> <body>
<nav id="filter-picker"> <nav id="filter-picker">
<ul class="year-filter"> <ul class="year-filter">
<li><a href="#">2005</a></li>
<li><a href="#">2006</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2008</a></li>
<li><a href="#">2009</a></li>
<li><a href="#">2010</a></li>
<li><a href="#">2011</a></li>
<li class="all active"><a href="#">Alle</a></li> <li class="all active"><a href="#">Alle</a></li>
</ul> </ul>
@ -32,6 +25,7 @@
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script> <script src="http://maps.stamen.com/js/tile.stamen.js?v1.3.0"></script>
<script src="/static/jspm_packages/6to5-polyfill.js"></script>
<script src="/static/jspm_packages/system.js"></script> <script src="/static/jspm_packages/system.js"></script>
<script src="/static/config.js"></script> <script src="/static/config.js"></script>
<script>System.import('js/main');</script> <script>System.import('js/main');</script>