feedbackform.html 6.83 KB
Newer Older
1
<!-- Let's split this page in two -->
okhin's avatar
okhin committed
2 3 4 5 6 7 8
    <div class="row green accent-4">
        <div class="col s12">
            <h4 id="step_init" class="step_text bold center white-text">{{ _("0. Initialising the call") }}</h5>
            <h4 id="step_caller" class="step_text bold center white-text">{{ _("1. Calling you") }}</h5>
            <h4 id="step_wait" class="step_text bold center white-text">{{ _("2. When ready, please dial 1 on your phone") }}</h3>
            <h4 id="step_callee" class="step_text bold center white-text">{{ _("3. Calling ")}}{{ @contact.full_name }}</h5>
            <h4 id="step_connected" class="step_text bold center white-text">{{ _("4. Connected to ") }}{{ @contact.full_name }}</h5>
9
        </div>
okhin's avatar
okhin committed
10
    </div>
11
    <div class="row">
okhin's avatar
okhin committed
12 13 14
        <div class="container">
            <div class="col s12">
                <p class="bold center">When you hear the MarioBros theme on the phone, you should press 1 to initiate the call to the representative.</p>
15
                <p class="center">The music will play until the representatives you're calling picks up. Don't worry if it plays for a long time.</p>
okhin's avatar
okhin committed
16
            </div>
17 18
        </div>
    </div>
okhin's avatar
okhin committed
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
    <div class="row">
        <div class="container">
            <div class="col m6 s12">
                <include href="argumentation.html">
            </div>
            <div class="col m6 s12">
                <div class="card horizontal sticky-action">
                    <div class="card-image">
                        <img src="<check if="{{ @contact.photo == '' }}">/static/img/placeholder.jpg<false>{{ @contact.photo }}</false></check>">
                        <p>{{ _("Phone number") }}: <a href="tel:{{ @contact.phone }}">{{ @contact.phone }}</a></p>
                    </div>
                    <div class="card-content">
                        <span class="card-title grey-text text-darken-4">{{ @contact.first_name }} {{ @contact.last_name }}</span>
                        <div class="groups">
                            <repeat group="{{ @contact.groups }}" value="{{ @group }}">
                            <check if="{{ @group.type == 'country' }}">
                            <span class="chip">
                                <img src="{{ 'http://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_' . str_replace('/', '', strtolower(@group.name)) . '.gif'}}">
                                {{ @group.name }}
                            </span>
okhin's avatar
okhin committed
39
                            </check>
okhin's avatar
okhin committed
40 41 42 43 44 45 46 47 48
                            </repeat>
                            <repeat group="{{ @contact.groups }}" value="{{ @group }}">
                            <check if="{{ @group.type == 'group' }}">
                            <span class="chip">
                                <img src="{{ 'http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_' . str_replace('/', '', strtolower(@group.name)) . '.png'}}">
                                {{ @group.name }}
                            </span>
                            </check>
                            </repeat>
okhin's avatar
okhin committed
49
                        </div>
okhin's avatar
okhin committed
50 51 52 53 54 55 56 57 58 59
                        <div class="groups">
                            <repeat group="{{ @contact.groups }}" value="{{ @group }}">
                            <check if="{{ @group.type == 'committee'}}">
                            <span class="chip blue white-text committee">
                                {{ @group.name }}
                            </span>
                            </check>
                            </repeat>
                        </div>
                    </div>
60
                </div>
okhin's avatar
okhin committed
61 62 63 64 65 66 67 68 69 70 71 72 73 74
                <h4>{{ _("Feedback Form") }}</h4>
                <p class="small">{{ _("Please tell us what happened if you were able to talk to someone. Your feedback is important to us.") }}</p>
                <form class="form" method="post" action="/feedback/" >
                    <input type="hidden" id="contact_id" name="contact_id" value="{{ @contact_id }}" />
                    <select name="feedback_category" id="feedback_category" class="input-field">
                    <repeat group="{{ @feedback_categories }}" value="{{ @feedback_category }}">
                        <option value="{{ @feedback_category.id }}">{{ @feedback_category.name }}</option>
                    </repeat>
                    </select>
                    <div class="input-field">
                        <textarea class="materialize-textarea" id="feedback" name="feedback"></textarea>
                    </div>
                    <input type="submit" class="btn btn-primary" name="go" value="{{ _("Send my feedback") }}" />
                </form>
75 76 77 78
            </div>
        </div>
    </div>
</div>
okhin's avatar
okhin committed
79 80 81 82
<!-- Let's include a script -->
<script type="text/javascript">
    var call = JSON.parse('{{ @call | raw }}');
    var call_url = call['data']['url'];
okhin's avatar
okhin committed
83
    var interval = '';
okhin's avatar
okhin committed
84 85 86 87 88 89 90 91 92
    function normalize_phone(phone) {
        if (phone.startsWith('+')) {
            return phone.replace('+', '00');
        }
        return phone;
    }

    function update_call(response) {
        var call_history = response['data']['history'];
93
        console.log(call_history);
okhin's avatar
okhin committed
94 95 96
        var call_state = call_history.sort(function(a, b) {
            var date1 = new Date(a[1]);
            var date2 = new Date(b[1]);
okhin's avatar
okhin committed
97
            return date2 - date1;
okhin's avatar
okhin committed
98
        })[0];
okhin's avatar
okhin committed
99
        $('.step_text').hide();
okhin's avatar
okhin committed
100
        if (call_state[0].startsWith('Created:Init')) {
okhin's avatar
okhin committed
101
            $('#step_init').show();
okhin's avatar
okhin committed
102
        };
okhin's avatar
okhin committed
103 104 105 106 107 108

        if (call_state[0].startsWith('Ringing:')) {
            phone = normalize_phone(call_state[0].split(':')[1]);
            caller = normalize_phone(response['data']['caller']);
            callee = normalize_phone(response['data']['callee']);
            if ( phone === caller) {
okhin's avatar
okhin committed
109
                $('#step_caller').show();
okhin's avatar
okhin committed
110
            } else {
okhin's avatar
okhin committed
111
                $('#step_callee').show();
okhin's avatar
okhin committed
112 113 114 115 116 117 118 119 120
            };
        };

        if (call_state[0].startsWith('Up:')) {
            // Need to check if we're caller or callee
            phone = normalize_phone(call_state[0].split(':')[1]);
            caller = normalize_phone(response['data']['caller']);
            callee = normalize_phone(response['data']['callee']);
            if ( phone === caller) {
okhin's avatar
okhin committed
121
                $('#step_wait').show();
okhin's avatar
okhin committed
122
            } else {
okhin's avatar
okhin committed
123
                $('#step_callee').show();
okhin's avatar
okhin committed
124 125
            };
        };
okhin's avatar
okhin committed
126 127 128

        if (call_state[0].startsWith('Down:')) {
            // The call as ended
okhin's avatar
okhin committed
129
            clearInterval(interval);
okhin's avatar
okhin committed
130
        };
okhin's avatar
okhin committed
131
        console.log(call_state[0]);
okhin's avatar
okhin committed
132 133 134 135 136 137
    };
    function fetch() {
        $.ajax({
            method: 'GET',
            url: call_url,
            dataType: 'json',
okhin's avatar
okhin committed
138 139 140
            complete: function(xhr, status) {
                update_call(xhr.responseJSON);
            }
okhin's avatar
okhin committed
141 142 143 144
        });
    };
    $(document).ready(function() {
        update_call(call);
145
        interval = window.setInterval(fetch, 3000);
146
        $('select').material_select();
okhin's avatar
okhin committed
147 148
    });
</script>