contactslist.html 6.93 KB
Newer Older
okhin's avatar
okhin committed
1 2 3 4 5 6 7 8
<div class="col s12 m4">
    <ul class="collection contact">
        <nav class="nav-extended teal">
            <div class="nav-wrapper">
                <div class="input-field">
                    <input type="search" id="search" class="autocomplete">
                    <label class="label-icon" for="search"><i class="material-icons">search</i></label>
                </div>
okhin's avatar
okhin committed
9 10 11
                <repeat group="{{ @group_types }}" value="{{ @group_type }}">
                <div class="input-field">
                    <select class="filter" id="{{ @group_type.name }}" name="{{ @group_type.name }}">
okhin's avatar
okhin committed
12
			<option value="-1">-- {{ @group_type.name }}</option>
okhin's avatar
okhin committed
13
                        <repeat group="{{ @groups }}" value="{{ @group }}">
okhin's avatar
okhin committed
14
                        <check if="{{ @group.type == @group_type.name }}">
okhin's avatar
okhin committed
15
                        <option value="{{ @group.id }}">  {{ @group.name }}</option>
okhin's avatar
okhin committed
16
                        </check>
okhin's avatar
okhin committed
17 18 19 20
                        </repeat>
                    </select>
                </div>
                </repeat>
okhin's avatar
okhin committed
21
            </div>
okhin's avatar
okhin committed
22
        </nav>
okhin's avatar
okhin committed
23 24 25 26
        <div class="json-data">
        {{ json_encode(@contacts) }}
        </div>
        <div class="wrapper">
okhin's avatar
okhin committed
27
        </div>
okhin's avatar
okhin committed
28 29
    </ul>
</div>
30
<!-- contacts list -->
okhin's avatar
okhin committed
31 32 33 34 35
<script>
$(document).ready(function() {
    $('input.autocomplete').autocomplete({
        data: {
            <repeat group="{{ @contacts }}" value="{{ @contact }}">
okhin's avatar
okhin committed
36
                "{{ @contact.full_name }}": <check if="{{ @contact.photo == '' }}">null<false>"{{ @contact.photo }}"</false></check>,
okhin's avatar
okhin committed
37 38 39 40 41
            </repeat>
        },
        limit: 20,
    });

okhin's avatar
okhin committed
42
    $('select.filter').change(function() {
okhin's avatar
okhin committed
43 44 45 46 47 48 49 50 51
	// 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);
	});
okhin's avatar
okhin committed
52
        list_meps(contacts, wrapper);
okhin's avatar
okhin committed
53 54
    });

okhin's avatar
okhin committed
55 56 57
    $('#search').change(function() {
        contacts = contacts.filter(function(contact) {
            return contact['full_name'].startsWith($('#search').val());
okhin's avatar
okhin committed
58
        });
okhin's avatar
okhin committed
59 60 61 62
        list_meps(contacts, $('.contact .wrapper'));
    });

    var wrapper = $('.contact .wrapper');
okhin's avatar
okhin committed
63 64
    var contacts_json = $('.contact .json-data').text()
    var contacts = JSON.parse(contacts_json);
okhin's avatar
okhin committed
65 66
    list_meps(contacts, wrapper);

okhin's avatar
okhin committed
67
    random_mep();
okhin's avatar
okhin committed
68 69

    $('select').material_select();
okhin's avatar
okhin committed
70
});
okhin's avatar
okhin committed
71

okhin's avatar
okhin committed
72 73 74 75 76 77 78 79 80 81 82 83 84 85
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;
}

okhin's avatar
okhin committed
86 87 88 89 90
function random_mep() {
    var random = Math.floor((Math.random() * $('.collection-item').length));
    update_mep($('.collection-item').eq(random));
}

okhin's avatar
okhin committed
91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
function list_meps(contacts, wrapper) {
    contacts = contacts.sort(function(a, b) {
        if (a['last_name'] < b['last_name']) {
            return -1;
        };
        if (a['last_name'] > b['last_name']) {
            return 1;
        };
        return 0;
    });
    // We need to empty the wrapper first
    wrapper.empty();
    contacts.forEach(function(contact) {
        display_mep(contact).appendTo(wrapper);
    });
};

function display_mep(contact) {
    var li = $('<li />')
        .addClass('collection-item avatar')
        .click(function() {
            update_mep($(this));
okhin's avatar
okhin committed
113 114 115
            $('html, body').animate({
                scrollTop: $('#navbar').offset().top
            }, 500);
okhin's avatar
okhin committed
116 117
        })
        .attr('data-json', JSON.stringify(contact));
okhin's avatar
okhin committed
118 119 120 121 122 123
    var country = contact['groups'].filter(function(group) {
        return group['type'] === 'country';
    });
    var group = contact['groups'].filter(function(group) {
        return group['type'] === 'group';
    });
okhin's avatar
okhin committed
124
    if ( group.length > 0 ) {
okhin's avatar
okhin committed
125
        var group_src = 'http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_'
okhin's avatar
okhin committed
126 127 128 129 130
            + group[0]['name'].toLowerCase().replace('/','') + '.png';
            $('<img />').attr('src', group_src)
                .appendTo(li);
    };
    if ( country.length > 0 ) {
okhin's avatar
okhin committed
131
        var country_src = 'http://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_'
okhin's avatar
okhin committed
132 133 134 135 136 137 138 139 140
            + 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)
    };
okhin's avatar
okhin committed
141 142 143 144 145 146
    $('<span />').addClass('title')
        .text(contact['full_name'])
        .appendTo(li);
    var groups = $('<ul />')
        .appendTo(li);
    contact['groups'].forEach(function(group) {
okhin's avatar
okhin committed
147 148 149 150 151
        if ( group['type'] === 'committee' ) {
            $('<li />').addClass('chip blue white-text')
                .text(group['name'])
                .appendTo(groups);
        }
okhin's avatar
okhin committed
152 153 154 155 156 157 158 159 160 161
    });
    return li;
};

function update_mep(element) {
    var contact = JSON.parse($(element).attr('data-json'));
    if (contact['photo'] !== '') {
        $('#contact-image').attr('src', contact['photo']);
    };
    $('#contact-full_name').html(contact['first_name'] + ' ' + contact['last_name']);
okhin's avatar
okhin committed
162 163
    $('#contact-full_name-2').html(contact['first_name'] + ' ' + contact['last_name']
            + '<i class="material-icons right">close</i>');
okhin's avatar
okhin committed
164 165 166 167
    $('#form-contact').attr('action', '/call/' + contact['id']);
    $('#contact_id').attr('value', contact['id']);
    $('.groups').each(function() {
        var group_type = $(this).attr('data-name');
okhin's avatar
okhin committed
168
        var content = ''
okhin's avatar
okhin committed
169 170
        contact['groups'].forEach(function(group) {
            if ( group['type'] === group_type ) {
okhin's avatar
okhin committed
171
                content += '<li class="chip blue white-text committee">' + group['name'] + '</li>';
okhin's avatar
okhin committed
172 173 174 175
            }
        });
        $(this).html(content);
    });
okhin's avatar
okhin committed
176 177 178 179 180 181 182
    var country = contact['groups'].filter(function(group) {
        return group['type'] === 'country';
    });
    var group = contact['groups'].filter(function(group) {
        return group['type'] === 'group';
    });

okhin's avatar
okhin committed
183 184 185 186 187 188 189 190 191 192 193 194
    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));
    };
okhin's avatar
okhin committed
195 196 197
    $('#contact-phone').attr('href', 'tel:' + contact['phone']);
    $('#contact-phone').text(contact['phone']);
};
okhin's avatar
okhin committed
198
</script>