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

okhin's avatar
okhin committed
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
    $('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'));
    });

okhin's avatar
okhin committed
52
53
54
55
    $('#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
56
        });
okhin's avatar
okhin committed
57
58
59
60
61
62
63
64
        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
65
    update_mep($('.collection-item').eq(random));
okhin's avatar
okhin committed
66
67

    $('select').material_select();
okhin's avatar
okhin committed
68
});
okhin's avatar
okhin committed
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

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
92
93
94
            $('html, body').animate({
                scrollTop: $('#navbar').offset().top
            }, 500);
okhin's avatar
okhin committed
95
96
        })
        .attr('data-json', JSON.stringify(contact));
okhin's avatar
okhin committed
97
98
99
100
101
102
    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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
    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)
    };
okhin's avatar
okhin committed
120
121
122
123
124
125
    $('<span />').addClass('title')
        .text(contact['full_name'])
        .appendTo(li);
    var groups = $('<ul />')
        .appendTo(li);
    contact['groups'].forEach(function(group) {
okhin's avatar
okhin committed
126
127
128
129
130
        if ( group['type'] === 'committee' ) {
            $('<li />').addClass('chip blue white-text')
                .text(group['name'])
                .appendTo(groups);
        }
okhin's avatar
okhin committed
131
132
133
134
135
136
137
138
139
140
    });
    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
141
142
    $('#contact-full_name-2').html(contact['first_name'] + ' ' + contact['last_name']
            + '<i class="material-icons right">close</i>');
okhin's avatar
okhin committed
143
144
145
146
    $('#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
147
        var content = ''
okhin's avatar
okhin committed
148
149
        contact['groups'].forEach(function(group) {
            if ( group['type'] === group_type ) {
okhin's avatar
okhin committed
150
                content += '<li class="chip blue white-text committee">' + group['name'] + '</li>';
okhin's avatar
okhin committed
151
152
153
154
            }
        });
        $(this).html(content);
    });
okhin's avatar
okhin committed
155
156
157
158
159
160
161
    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
162
163
164
165
166
167
168
169
170
171
172
173
    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
174
175
176
    $('#contact-phone').attr('href', 'tel:' + contact['phone']);
    $('#contact-phone').text(contact['phone']);
};
okhin's avatar
okhin committed
177
</script>