feedbackform.html 6.38 KB
Newer Older
1
<!-- Let's split this page in two -->
okhin's avatar
okhin committed
2 3
    <div class="row">
        <div class="col s6">
4
        </div>
okhin's avatar
okhin committed
5 6 7
        <div class="col s6">
            <div class="card">
                <div class="card-image">
okhin's avatar
okhin committed
8
                    <img src="<check if="{{ @contact.photo == '' }}">/static/img/placeholder.jpg<false>{{ @contact.photo }}</false></check>">
okhin's avatar
okhin committed
9
                    <span class="card-title">{{ @contact.first_name }} {{ @contact.last_name }}</span>
10
                </div>
okhin's avatar
okhin committed
11
                <div class="card-content">
okhin's avatar
okhin committed
12 13 14 15 16 17 18 19 20 21 22 23 24
                    <p>{{ _("Phone number") }}: <a href="tel:{{ @contact.phone }}">{{ @contact.phone }}</a></p>
                    <repeat group="{{ @group_types }}" value="{{ @group_type }}">
                    <ul class="groups">{{ @group_type.name }}
                        <repeat group="{{ @contact.groups }}" value="{{ @group }}">
                        <check if="{{ @group.type == @group_type }}">
                        <li class="chip">
                            <check if="{{ @group.media }} != ''">
                            <img src="{{ @group.media }}" alt="{{ @group.type }}">
                            </check>
                            {{ @group.name }}
                        </li>
                        </repeat>
                    </ul>
okhin's avatar
okhin committed
25
                    </repeat>
okhin's avatar
okhin committed
26 27
                    <h5 id="step_init" class="light text-lighten-2">{{ _("0. Initialising the call") }}</h5>
                    <h5 id="step_caller" class="light text-lighten-2">{{ _("1. Calling you") }}</h5>
okhin's avatar
okhin committed
28
                    <h5 id="step_wait" class="light text-lighten-2">{{ _("2. When ready, please dial 1 on your phone") }}</h3>
okhin's avatar
okhin committed
29 30
                    <h5 id="step_callee" class="light text-lighten-2">{{ _("3. Calling ")}}{{ @contact.full_name }}</h5>
                    <h5 id="step_connected" class="light text-lighten-2">{{ _("4. Connected to ") }}{{ @contact.full_name }}</h5>
okhin's avatar
okhin committed
31
                </div>
okhin's avatar
okhin committed
32
                <div class="card-action">
okhin's avatar
okhin committed
33 34 35 36
                    <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 }}" />
okhin's avatar
okhin committed
37
                        <select name="feedback_category" id="feedback_category" class="input-field">
okhin's avatar
okhin committed
38
                        <repeat group="{{ @feedback_categories }}" value="{{ @feedback_category }}">
okhin's avatar
okhin committed
39
                            <option value="{{ @feedback_category.id }}">{{ @feedback_category.name }}</option>
okhin's avatar
okhin committed
40
                        </repeat>
okhin's avatar
okhin committed
41
                        </select>
okhin's avatar
okhin committed
42 43 44
                        <div class="input-field">
                            <textarea class="materialize-textarea" id="feedback" name="feedback"></textarea>
                        </div>
okhin's avatar
okhin committed
45 46
                        <input type="submit" class="btn btn-primary" name="go" value="{{ _("Send my feedback") }}" />
                    </form>
47 48 49 50 51
                </div>
            </div>
        </div>
    </div>
</div>
okhin's avatar
okhin committed
52 53 54 55
<!-- 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
56
    var interval = '';
okhin's avatar
okhin committed
57 58 59 60 61 62 63 64 65
    function normalize_phone(phone) {
        if (phone.startsWith('+')) {
            return phone.replace('+', '00');
        }
        return phone;
    }

    function update_call(response) {
        var call_history = response['data']['history'];
okhin's avatar
okhin committed
66
        console.log(call_history);
okhin's avatar
okhin committed
67 68 69
        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
70
            return date2 - date1;
okhin's avatar
okhin committed
71
        })[0];
okhin's avatar
okhin committed
72 73 74 75
        $('.step_text').removeClass('bold');
        $('.step_text').removeClass('text-darken-4');
        $('.step-text').addClass('light');
        $('.step-text').addClass('text-lighten-2');
okhin's avatar
okhin committed
76
        if (call_state[0].startsWith('Created:Init')) {
okhin's avatar
okhin committed
77 78 79 80
            $('#step_init').addClass('bold');
            $('#step_init').addClass('text-darken-4');
            $('#step_init').removeClass('light');
            $('#step_init').removeClass('text-lighten-2');
okhin's avatar
okhin committed
81
        };
okhin's avatar
okhin committed
82 83 84 85 86 87

        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
88 89 90 91
                $('#step_caller').addClass('bold');
                $('#step_caller').addClass('text-darken-4');
                $('#step_caller').removeClass('light');
                $('#step_caller').removeClass('text-lighten-2');
okhin's avatar
okhin committed
92
            } else {
okhin's avatar
okhin committed
93 94 95 96
                $('#step_callee').addClass('bold');
                $('#step_callee').addClass('text-darken-4');
                $('#step_callee').removeClass('light');
                $('#step_callee').removeClass('text-lighten-2');
okhin's avatar
okhin committed
97 98 99 100 101 102 103 104 105
            };
        };

        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
106 107 108 109
                $('#step_wait').addClass('bold');
                $('#step_wait').addClass('text-darken-4');
                $('#step_wait').removeClass('light');
                $('#step_wait').removeClass('text-lighten-2');
okhin's avatar
okhin committed
110
            } else {
okhin's avatar
okhin committed
111 112 113 114
                $('#step_connected').addClass('bold');
                $('#step_connected').addClass('text-darken-4');
                $('#step_connected').removeClass('light');
                $('#step_connected').removeClass('text-lighten-2');
okhin's avatar
okhin committed
115 116
            };
        };
okhin's avatar
okhin committed
117 118 119

        if (call_state[0].startsWith('Down:')) {
            // The call as ended
okhin's avatar
okhin committed
120
            clearInterval(interval);
okhin's avatar
okhin committed
121
        };
okhin's avatar
okhin committed
122
        console.log(call_state[0]);
okhin's avatar
okhin committed
123 124 125 126 127 128
    };
    function fetch() {
        $.ajax({
            method: 'GET',
            url: call_url,
            dataType: 'json',
okhin's avatar
okhin committed
129 130 131
            complete: function(xhr, status) {
                update_call(xhr.responseJSON);
            }
okhin's avatar
okhin committed
132 133 134 135
        });
    };
    $(document).ready(function() {
        update_call(call);
okhin's avatar
okhin committed
136
        interval = window.setInterval(fetch, 3000);
okhin's avatar
okhin committed
137
        $('select').material_select();
okhin's avatar
okhin committed
138 139
    });
</script>