feedbackform.html 5.39 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
<!-- Let's split this page in two -->
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <include href="argumentation.html">
        </div>
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>{{ _("Currently calling") }}</h4>
                </div>
                <div class="panel-body">
                        <p class="text-center">{{ @contact.first_name }} {{ @contact.last_name }}</p>
                        <p class="lead text-center">
                            <abbr title="{{ _("Phone number") }}">{{ _("Phone number") }}:</abbr> <a href="tel: {{ @contact.phone }}">{{ @contact.phone }}</a>
                        </p>
                        <dl class="dl-horizontal hidden-xs">
                        <repeat group="{{ @contact.groups }}" value="{{ @group }}">
                        <check if="{{ @group.type!='committee' }}">
                            <dt>{{ @group.type }}:</dt>
                            <dd><a href="#">{{ @group.name }}</a></dd>
                        </check>
                        </repeat>
                        </dl>
                        <ul class="list-inline">
                        <repeat group="{{ @contact.groups }}" value="{{ @group }}">
                        <check if="{{ @group.type=='committee' }}">
                                <li><abbr title="{{ @group.name }}" class="initialism"><ahref="https://memopol.lqdn.fr/europe/parliament/committee/{{ @group.name }}/"><div class="well well-sm">{{ @group.name }}</div></a></abbr></li>
                        </check>
                        </repeat>
                        </ul>
okhin's avatar
okhin committed
32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
                        <p id="step_init" class="step_text text-center">{{ _("Initialising the call") }}</p>
                        <p id="step_caller" class="step_text text-center">{{ _("Calling you") }}</p>
                        <p id="step_wait" class="step_text text-center">{{ _("When ready, please dial 1 on your phone") }}</p>
                        <p id="step_callee" class="step_text text-center">{{ _(" Calling ")}}{{ @contact.full_name }}</p>
                        <p id="step_connected" class="step_text text-center">{{ _("Connected to ") }}{{ @contact.full_name }}</p>
                        <h3 aria-hidden="true" class="step_bar lead text-center">
                            <span id="caller" class="step glyphicon glyphicon-earphone"></span>
                            <span id="step1" class="step">&#x25CF;</span>
                            <span id="step2" class="step">&#x25CF;</span>
                            <span id="step3" class="step">&#x25CF;</span>
                            <span id="wait" class="step glyphicon glyphicon-time"></span>
                            <span id="step4" class="step">&#x25CF;</span>
                            <span id="step5" class="step">&#x25CF;</span>
                            <span id="step6" class="step">&#x25CF;</span>
                            <span id="callee" class="step glyphicon glyphicon-earphone"></span>
                        </h3>
                        <p>{{ @call }}</p>
                </div>
            </div>
            <div class="feedback panel panel-default">
                <!-- Form in order to feedback your call -->
                <div class="panel-heading">
                    <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>
                </div>
                <div class="panel-body">
                    <form class="form" method="post" action="/feedback/" >
                        <input type="hidden" id="contact_id" name="contact_id" value="{{ @contact_id }}" />
                        <repeat group="{{ @feedback_categories }}" value="{{ @feedback_category }}">
                        <div class="form-group">
                            <label><input required class="form-control" type="radio" name="feedback_category" value="{{ @feedback_category.id }}"/>{{ @feedback_category.name }}</label>
                        </div>
                        </repeat>
                        <textarea class="form-control" id="feedback" name="feedback"></textarea>
                        <input type="submit" class="btn btn-primary" name="go" value="{{ _("Send my feedback") }}" />
                    </form>
68 69 70 71 72
                </div>
            </div>
        </div>
    </div>
</div>
okhin's avatar
okhin committed
73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102
<!-- Let's include a script -->
<script type="text/javascript">
    var call = JSON.parse('{{ @call | raw }}');
    var call_url = call['data']['url'];
    function update_call(calls) {
        var call_history = calls['data']['history'];
        var call_state = call_history.sort(function(a, b) {
            var date1 = new Date(a[1]);
            var date2 = new Date(b[1]);
            return date1 - date2;
        })[0];
        $('.step_text').removeClass('visible');
        if (call_state[0].startsWith('Created:Init')) {
            $('#caller').addClass('outline_green');
            $('#step_init').addClass('visible');
        };
    };
    function fetch() {
        $.ajax({
            method: 'GET',
            url: call_url,
            dataType: 'json',
            success: update_call
        });
    };
    $(document).ready(function() {
        update_call(call);
        window.setInterval(fetch, 2000);
    });
</script>