File: //home/arjun/projects/buyercall_new/buyercall/buyercall/blueprints/sms/templates/sms/edit.jinja2
{% extends 'layouts/backend_leads.jinja2' %}
{% block title %}Edit Message Lead{% endblock %}
{% block heading %}Edit Message Lead {% endblock %}
{% block body %}
<div class="content">
<div id="flash-messages">
</div>
<div class="row" id="divLeadForm">
<div class="col-lg-12 col-md-12">
<div class="card">
<div class="card-header card-header-tabs" data-background-color="light-blue">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<span class="nav-tabs-title">Message information:</span>
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
<a href="#details" data-toggle="tab">
<i class="material-icons">info_outline</i> Details
<div class="ripple-container"></div>
</a>
</li>
<li>
<a href="#messages" data-toggle="tab">
<i class="material-icons">message</i> Message History ({{ message_log_count }})
<div class="ripple-container"></div>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-content">
<div class="tab-content">
<div class="tab-pane active" id="details">
<div class="row">
<div class="col-md-6 form-group">
<label for="lblDate" class="control-label">Date</label>
<label id="lblDate" class="form-control" disabled></label>
<div id="divActualDate" style="display:none">{{ message_info.created_on }}</div>
</div>
<div class="col-md-6 form-group">
<label for="lblType" class="control-label">Message Type</label>
<label id="lblType" class="form-control" disabled> {{ message_info.type }}</label>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label for="lblTo" class="control-label">To</label>
<label id="lblTo" class="form-control" disabled> {{ message_info.to }}</label>
</div>
<div class="col-md-6 form-group">
<label for="lblFrom" class="control-label">From</label>
<label id="lblFrom" class="form-control" disabled> {{ message_info.from_ }}</label>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label for="lblMediaUrl" class="control-label">Media URL</label>
{% if message_info.media_url in ['','{}',' '] or message_info.media_url == [''] %}
<label id="noMedia" class="form-control" disabled>
No media available
</label>
{% else %}
<label id="lblMediaUrl" class="form-control"><a href="#smsImage" data-toggle="modal" data-target="#smsImage">Click to view</a></label>
{% endif %}
</div>
<div class="col-md-6 form-group">
<label for="lblStatus" class="control-label">Status</label>
<label id="lblStatus" class="form-control" disabled> {{ message_info.status }}</label>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label for="lblDirection" class="control-label">Direction</label>
<label id="lblDirection" class="form-control" disabled> {{ message_info.direction }}</label>
</div>
<div class="col-md-6 form-group">
<label for="lblLead" class="control-label">Lead</label>
<label id="lblLead" class="form-control" disabled> {{ message_info.contact.message_name }}</label>
</div>
</div>
<div class="row">
<div class="col-md-6 form-group">
<label for="lblLeadSource" class="control-label">Lead Source</label>
<label id="lblLeadSource" class="form-control" disabled> {{ message_info.inbound.friendly_name }}</label>
</div>
<div class="col-md-6 form-group">
<label for="lblAgent" class="control-label">Agent</label>
<label id="lblAgent" class="form-control" disabled> {{ message_info.message_agent }}</label>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group">
<label for="lblMessage" class="control-label">Message</label>
<label id="lblMessage" class="form-control" disabled> {{ message_info.body_text }}</label>
</div>
</div>
<br>
<br>
</div>
<div class="tab-pane" id="messages">
<div class="row">
{% if message_log_count > 0 -%}
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>From</th>
<th>To</th>
<th>Body</th>
<th>Agent</th>
<th>Lead Source</th>
<th>Direction</th>
<th class="text-center">Status</th>
<th class="text-center">Media</th>
</tr>
</thead>
<tbody>
{% for message in message_log %}
<tr>
<td>{{ message.interaction_time | e }}</td>
<td>{{ message.from_ | e }}</td>
<td>{{ message.to | e }}</td>
<td>{{ message.body_text | e }}</td>
<td>{{ message.message_agent | e }}</td>
<td>{{ message.inbound.friendly_name | e }}</td>
<td>{{ message.direction | e }}</td>
<td class="text-center">
<span class="label {%
if message.status.lower() == 'received' or message.status.lower() == 'receiving' or message.status.lower() == 'recieved' or message.status == 'recieved' -%}
label-primary
{%- elif message.status == 'sent' or message.status == 'sending' or message.status=='SENT' -%}
label-success
{%- else -%}
label-danger
{%- endif -%}">
{{ message.status | capitalize | e }}
</span>
</td>
<td class="text-center">
{% if message.media_url in ['','{}',' ', None] or message.media_url == [''] %}
{% else %}
{% for media in message.media_url %}
<a href="#smsImageTable" data-toggle="modal" data-target="#smsImageTable" data-whatever="{{ media }}" data-body="{{ message.body_text }}">View</a>
{% endfor %}
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{%- else -%}
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
<td>No data available</td>
</tr>
</tbody>
</table>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="smsImage" tabindex="-1" role="dialog" aria-labelledby="smsImagelLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Message Media</h5>
</div>
<div class="modal-body">
<div class="col-md-12 text-center">
{% if message_info.media_url %}
{% if multiple_media %}
{% for i in multiple_media %}
<img src="{{ i }}" style="max-height: 400px; max-width: 450px; padding: 3px 3px;">
{% endfor %}
{% else %}
{% for i in message_info.media_url %}
<img src="{{ i }}" style="max-height: 400px; max-width: 450px; padding: 3px 3px;">
{% endfor %}
{% endif %}
{% endif %}
</div>
<div>
Message:
<br />
{{ message_info.body_text }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-simple" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="smsImageTable" tabindex="-1" role="dialog" aria-labelledby="smsImageTablelLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Message Media</h5>
</div>
<div class="modal-body">
<div class="col-md-12 text-center">
<img src="" style="max-height: 450px; max-width: 500px;" id="image">
</div>
<div class="col-md-12 ">
<p class="msg-heading-img-popup">Message:</p>
<p id="textBodyPop" disabled></input>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-simple" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
{% endblock %}
{% block pagescripts %}
<script>
$(function(){
function createFlashMsg($container, message, status, type) {
var $flashMsgContainer = $('#flash-messages');
var $alertContainer = $('#flash-messages .'+type+'.alert');
if (!$flashMsgContainer[0]) {
$container.before('<div id="flash-messages">'+
'<div class="'+type+' alert alert-'+status+'" role="alert">'+
`${message}` +
'</div>'+
'</div>');
} else if(!$alertContainer[0]) {
$flashMsgContainer.append('<div class="'+type+' alert alert-'+status+'" role="alert">'+
`${message}` +
'</div>');
} else {
$alertContainer.html(`${message}`);
}
}
});
</script>
<script>
window.setTimeout(function() { $('#flash-messages').hide('slow') }, 10000);
</script>
<script>
$(document).ready(function() {
//Date day label
var loActualDate = $('#divActualDate').html();
if (loActualDate != undefined && loActualDate != null && loActualDate != "") {
var loResultDate = moment(new Date(loActualDate)).fromNow();
$("#lblDate").text(loResultDate);
}
});
</script>
<script>
$('#smsImageTable').on('show.bs.modal', function (event) {
var link = $(event.relatedTarget)
var recipient = link.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var messageText = link.data('body')
var modal = $(this)
modal.find('.modal-body #image').attr('src',recipient)
modal.find('.modal-body #textBodyPop').text(messageText)
})
</script>
{% endblock %}