Make conversation page update using AJAX

Fairly self-explanatory. Uses the same pattern of breaking things up
into functions as the jobs page.
This commit is contained in:
Chris Hill-Scott
2017-07-07 15:34:06 +01:00
parent 7244bbf849
commit dc3f26a646
4 changed files with 93 additions and 35 deletions

View File

@@ -1,7 +1,9 @@
{% from "components/ajax-block.html" import ajax_block %}
{% extends "withnav_template.html" %}
{% block service_page_title %}
Conversation
{{ user_number }}
{% endblock %}
{% block maincolumn_content %}
@@ -13,38 +15,13 @@
{{ user_number }}
</h1>
</div>
{% for message in conversation %}
<div class="grid-row sms-message-row" id="n{{ message.id }}" tabindex="0">
{% if message.inbound %}
<div class="column-two-thirds sms-message-inbound">
{{ message.content | string }}
<div class="sms-message-status">
{{ message.created_at | format_datetime_relative }}
</div>
</div>
{% else %}
<div class="column-one-third">
&nbsp;
</div>
<div class="column-two-thirds">
{{ message.content | string }}
{% if message.status == 'delivered' %}
<div class="sms-message-status sms-message-status-outbound">
{{ message.created_at | format_datetime_relative }}
</div>
{% elif message.status in ['pending', 'sending', 'created'] %}
<div class="sms-message-status sms-message-status-outbound hint">
sending
</div>
{% else %}
<div class="sms-message-status sms-message-status-outbound table-field-error-label">
Failed (sent {{ message.created_at | format_datetime_relative }})
</div>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
{{ ajax_block(
partials,
updates_url,
'messages',
) }}
</div>
{% endblock %}

View File

@@ -0,0 +1,34 @@
<div class="ajax-block-container">
{% for message in conversation %}
<div class="grid-row sms-message-row" id="n{{ message.id }}" tabindex="0">
{% if message.inbound %}
<div class="column-two-thirds sms-message-inbound">
{{ message.content | string }}
<div class="sms-message-status">
{{ message.created_at | format_datetime_relative }}
</div>
</div>
{% else %}
<div class="column-one-third">
&nbsp;
</div>
<div class="column-two-thirds">
{{ message.content | string }}
{% if message.status == 'delivered' %}
<div class="sms-message-status sms-message-status-outbound">
{{ message.created_at | format_datetime_relative }}
</div>
{% elif message.status in ['pending', 'sending', 'created'] %}
<div class="sms-message-status sms-message-status-outbound hint">
sending
</div>
{% else %}
<div class="sms-message-status sms-message-status-outbound table-field-error-label">
Failed (sent {{ message.created_at | format_datetime_relative }})
</div>
{% endif %}
</div>
{% endif %}
</div>
{% endfor %}
</div>