contactslist.html 5.03 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
            </div>
okhin's avatar
okhin committed
10
        </nav>
okhin's avatar
okhin committed
11 12
        <div class="wrapper" data-json='{{ json_encode(@contacts) }}'>
        </div>
okhin's avatar
okhin committed
13 14
    </ul>
</div>
15
<!-- contacts list -->
okhin's avatar
okhin committed
16 17 18 19 20
<script>
$(document).ready(function() {
    $('input.autocomplete').autocomplete({
        data: {
            <repeat group="{{ @contacts }}" value="{{ @contact }}">
okhin's avatar
okhin committed
21
                "{{ @contact.full_name }}": <check if="{{ @contact.photo == '' }}">null<false>"{{ @contact.photo }}"</false></check>,
okhin's avatar
okhin committed
22 23 24 25 26
            </repeat>
        },
        limit: 20,
    });

okhin's avatar
okhin committed
27 28 29 30
    $('#search').change(function() {
        var contacts = JSON.parse(wrapper.attr('data-json'));
        contacts = contacts.filter(function(contact) {
            return contact['full_name'].startsWith($('#search').val());
okhin's avatar
okhin committed
31
        });
okhin's avatar
okhin committed
32 33 34 35 36 37 38 39
        list_meps(contacts, $('.contact .wrapper'));
    });

    var wrapper = $('.contact .wrapper');
    var contacts = JSON.parse(wrapper.attr('data-json'));
    list_meps(contacts, wrapper);

    var random = Math.floor((Math.random() * $('.collection-item').length));
okhin's avatar
okhin committed
40 41
    update_mep($('.collection-item').eq(random));
});
okhin's avatar
okhin committed
42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

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
65 66 67
            $('html, body').animate({
                scrollTop: $('#navbar').offset().top
            }, 500);
okhin's avatar
okhin committed
68 69
        })
        .attr('data-json', JSON.stringify(contact));
okhin's avatar
okhin committed
70 71 72 73 74 75 76 77 78 79 80 81 82
    var country = contact['groups'].filter(function(group) {
        return group['type'] === 'country';
    });
    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)
okhin's avatar
okhin committed
83 84 85
    $('<span />').addClass('title')
        .text(contact['full_name'])
        .appendTo(li);
okhin's avatar
okhin committed
86 87
    $('<img />').attr('src', group_src)
        .appendTo(li);
okhin's avatar
okhin committed
88 89 90
    var groups = $('<ul />')
        .appendTo(li);
    contact['groups'].forEach(function(group) {
okhin's avatar
okhin committed
91 92 93 94 95
        if ( group['type'] === 'committee' ) {
            $('<li />').addClass('chip blue white-text')
                .text(group['name'])
                .appendTo(groups);
        }
okhin's avatar
okhin committed
96 97 98 99 100 101 102 103 104 105
    });
    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
106 107
    $('#contact-full_name-2').html(contact['first_name'] + ' ' + contact['last_name']
            + '<i class="material-icons right">close</i>');
okhin's avatar
okhin committed
108 109 110 111
    $('#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
112
        var content = ''
okhin's avatar
okhin committed
113 114
        contact['groups'].forEach(function(group) {
            if ( group['type'] === group_type ) {
okhin's avatar
okhin committed
115
                content += '<li class="chip blue white-text committee">' + group['name'] + '</li>';
okhin's avatar
okhin committed
116 117 118 119
            }
        });
        $(this).html(content);
    });
okhin's avatar
okhin committed
120 121 122 123 124 125 126 127 128 129 130 131 132 133 134
    var country = contact['groups'].filter(function(group) {
        return group['type'] === 'country';
    });
    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';
    $('.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));
okhin's avatar
okhin committed
135 136 137
    $('#contact-phone').attr('href', 'tel:' + contact['phone']);
    $('#contact-phone').text(contact['phone']);
};
okhin's avatar
okhin committed
138
</script>