Adding filters

app/Controller.php

@@ -29,6 +29,9 @@ class Controller {
         // Workaround for caching variables
         $f3->set('contacts', $f3->get('contacts'));
 
+        $groups = Api::get_groups();
+        $f3->set('groups', $groups);
+
         $group_types = Api::get_group_types();
         $f3->set('group_types', $group_types);
     }

templates/contactslist.html

@@ -6,6 +6,16 @@
                     <input type="search" id="search" class="autocomplete">
                     <label class="label-icon" for="search"><i class="material-icons">search</i></label>
                 </div>
+                <repeat group="{{ @group_types }}" value="{{ @group_type }}">
+                <div class="input-field">
+                    <label for="{{ @group_type.name }}">{{ @group_type.name }}</label>
+                    <select class="filter" id="{{ @group_type.name }}" name="{{ @group_type.name }}">
+                        <repeat group="{{ @groups }}" value="{{ @group }}">
+                        <option value="{{ @group.id }}">{{ @group.name }}</option>
+                        </repeat>
+                    </select>
+                </div>
+                </repeat>
             </div>
         </nav>
         <div class="wrapper" data-json='{{ json_encode(@contacts) }}'>
@@ -24,6 +34,21 @@ $(document).ready(function() {
         limit: 20,
     });
 
+    $('select.filter').change(function() {
+        var filter_group = $(this).val();
+        var contacts = JSON.parse(wrapper.attr('data-json'));
+        contacts = contacts.filter(function(contact) {
+            var keep = false
+            contact['groups'].forEach(function(group) {
+                if (group['id'] === Number(filter_group)) {
+                    keep = true;
+                };
+            });
+            return keep;
+        });
+        list_meps(contacts, $('.contact .wrapper'));
+    });
+
     $('#search').change(function() {
         var contacts = JSON.parse(wrapper.attr('data-json'));
         contacts = contacts.filter(function(contact) {
@@ -38,6 +63,8 @@ $(document).ready(function() {
 
     var random = Math.floor((Math.random() * $('.collection-item').length));
     update_mep($('.collection-item').eq(random));
+
+    $('select').material_select();
 });
 
 function list_meps(contacts, wrapper) {
@@ -73,18 +100,26 @@ function display_mep(contact) {
     var group = contact['groups'].filter(function(group) {
         return group['type'] === 'group';
     });
-    var group_src = 'http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_'
-        + group[0]['name'].toLowerCase().replace('/','') + '.png';
-    var country_src = 'http://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_'
-        + country[0]['name'].toLowerCase().replace('/','') + '.gif';
-    $('<img />').addClass('circle')
-        .attr('src', country_src)
-        .appendTo(li)
+    if ( group.length > 0 ) {
+        var group_src = 'http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_'
+            + group[0]['name'].toLowerCase().replace('/','') + '.png';
+            $('<img />').attr('src', group_src)
+                .appendTo(li);
+    };
+    if ( country.length > 0 ) {
+        var country_src = 'http://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_'
+            + country[0]['name'].toLowerCase().replace('/','') + '.gif';
+        $('<img />').addClass('circle')
+            .attr('src', country_src)
+            .appendTo(li)
+    } else {
+        $('<img />').addClass('circle')
+            .attr('src', '/static/img/placeholder.jpg')
+            .appendTo(li)
+    };
     $('<span />').addClass('title')
         .text(contact['full_name'])
         .appendTo(li);
-    $('<img />').attr('src', group_src)
-        .appendTo(li);
     var groups = $('<ul />')
         .appendTo(li);
     contact['groups'].forEach(function(group) {
@@ -124,14 +159,18 @@ function update_mep(element) {
         return group['type'] === 'group';
     });
 
-    var group_src = 'http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_'
-        + group[0]['name'].toLowerCase().replace('/','') + '.png';
-    var country_src = 'http://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_'
-        + country[0]['name'].toLowerCase() .replace('/','')+ '.gif';
-    $('.card-content .group').text(group[0]['name'])
-        .append($('<img>').attr('src', group_src));
-    $('.card-content .country').text(country[0]['name'])
-        .append($('<img>').attr('src', country_src));
+    if ( group.length > 0 ) {
+        var group_src = 'http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_'
+            + group[0]['name'].toLowerCase().replace('/','') + '.png';
+        $('.card-content .group').text(group[0]['name'])
+            .append($('<img>').attr('src', group_src));
+    };
+    if (country.length > 0) {
+        var country_src = 'http://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_'
+            + country[0]['name'].toLowerCase() .replace('/','')+ '.gif';
+        $('.card-content .country').text(country[0]['name'])
+            .append($('<img>').attr('src', country_src));
+    };
     $('#contact-phone').attr('href', 'tel:' + contact['phone']);
     $('#contact-phone').text(contact['phone']);
 };