Merge branch '21-improve-the-filtering-box' into 'master'

Resolve "Improve the filtering box"

Closes #21

See merge request !10

templates/contactslist.html

@@ -10,8 +10,9 @@
                 <div class="input-field">
                     <select class="filter" id="{{ @group_type.name }}" name="{{ @group_type.name }}">
                         <repeat group="{{ @groups }}" value="{{ @group }}">
+			<option value="-1">-- {{ @group_type.name }}</option>
                         <check if="{{ @group.type == @group_type.name }}">
-                        <option value="{{ @group.id }}">{{ @group.name }}</option>
+                        <option value="{{ @group.id }}">  {{ @group.name }}</option>
                         </check>
                         </repeat>
                     </select>
@@ -39,16 +40,15 @@ $(document).ready(function() {
     });
 
     $('select.filter').change(function() {
-        var filter_group = $(this).val();
-        contacts = contacts.filter(function(contact) {
-            var keep = false
-            contact['groups'].forEach(function(group) {
-                if (group['id'] === Number(filter_group)) {
-                    keep = true;
-                };
-            });
-            return keep;
-        });
+	// We must get the contact list as it is before apllying this specific filter
+	// Meaning, the full contact list plus all the other filter.
+	// We just need to call it on all the select elements.
+	contacts = JSON.parse(contacts_json);
+	$('select.filter').each(function() {
+	    var filter = $(this);
+            var filter_group = $(this).val();
+            contacts = contacts.filter(filter_mep, filter);
+	});
         list_meps(contacts, wrapper);
     });
 
@@ -69,6 +69,20 @@ $(document).ready(function() {
     $('select').material_select();
 });
 
+function filter_mep(contact) {
+    var filter_group = $(this).val();
+    if (Number(filter_group) === -1) {
+        return true
+    };
+    var keep = false
+    contact['groups'].forEach(function(group) {
+        if (group['id'] === Number(filter_group)) {
+            keep = true;
+        };
+    });
+    return keep;
+}
+
 function random_mep() {
     var random = Math.floor((Math.random() * $('.collection-item').length));
     update_mep($('.collection-item').eq(random));
@@ -108,13 +122,13 @@ function display_mep(contact) {
         return group['type'] === 'group';
     });
     if ( group.length > 0 ) {
-        var group_src = 'http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_'
+        var group_src = 'https://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_'
+        var country_src = 'https://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_'
             + country[0]['name'].toLowerCase().replace('/','') + '.gif';
         $('<img />').addClass('circle')
             .attr('src', country_src)