File: //home/arjun/projects/buyercall_new/buyercall/buyercall/blueprints/sms/templates/sms/sms.jinja2
{% extends 'layouts/backend.jinja2' %}
{% import 'macros/items.jinja2' as items %}
{% import 'macros/form.jinja2' as f with context %}
{% block title %}My Message List{% endblock %}
{% block heading %} Messages {% endblock %}
{% block body %}
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-tabs card-header-padding" data-background-color="light-blue">
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" data-tabs="tabs">
<li style="width:100%;">
<div class="row form-group" style="padding-bottom: 0; margin: 0;">
<div class="col-md-3 col-lg-4">
<div class="row">
<div class="col-md-2 col-xs-2 filter-from-field filter-padding-right filter-label">
<label class="label-control" style="color:white; font-size: 12px; padding-top:7px;">FROM: </label>
</div>
<div class="col-md-4 col-xs-4 filter-date-field filter-padding-left filter-padding-top">
<input type="text" class="form-control" id="date-from" style="color:white;"/>
</div>
<div class="col-md-2 col-xs-2 filter-to-field filter-padding-left filter-padding-right filter-label">
<label class="label-control" style="color:white; padding-top:7px; font-size: 12px;">TO:</label>
</div>
<div class="col-md-4 col-xs-4 filter-date-field filter-padding-left filter-padding-top">
<input type="text" class="form-control" id="date-to" style="color:white; "/>
</div>
</div>
</div>
<div class="col-md-9 col-lg-8">
<button class="btn filter-short-date-field btn-primary btn-short-today btn-short">Today</button>
<button class="btn btn-primary filter-short-date-field btn-short-week btn-short">Week</button>
<button class="btn btn-primary filter-short-date-field btn-short-month btn-short">Month</button>
<button class="btn btn-primary filter-short-date-field btn-short-year btn-short">Year</button>
<button class="btn btn-primary btn-additional-filters btn-short">Additional Filters</button>
<button id="btnResetFilters" class="btn btn-primary btn-reset-filters btn-short">Reset Filters</button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="graph-chart-content card-content">
{% if total_messages %}
<div class="feedback-section col-md-12">
<div class="summary-section col-md-3">
<ul class="timeline timeline-simple timeline-stats">
<li class="timeline-inverted time-line-inverted-margin">
<div class="timeline-badge warning">
<i class="material-icons">message</i>
</div>
<div class="timeline-panel dashboard-stat-panel">
<div class="timeline-heading">
<span class="label label-warning">Total Messages</span>
</div>
<h3 class="dashboard-stat-number total-messages">
</h3>
</div>
</li>
<li class="timeline-inverted time-line-inverted-margin">
<div class="timeline-badge success">
<i class="material-icons">redo</i>
</div>
<div class="timeline-panel dashboard-stat-panel">
<div class="timeline-heading">
<span class="label label-success">Inbound Messages</span>
<h3 class="dashboard-stat-number inbound-messages">
</h3>
</div>
</div>
</li>
<li class="timeline-inverted time-line-inverted-margin">
<div class="timeline-badge light-blue">
<i class="material-icons">undo</i>
</div>
<div class="timeline-panel dashboard-stat-panel">
<div class="timeline-heading">
<span class="label label-light-blue">Outbound Messages</span>
<h3 class="dashboard-stat-number outbound-messages">
</h3>
</div>
</div>
</li>
</ul>
</div>
<div class="graph-section col-md-9 col-xs-12">
<h4 class="card-title">Messages Graph
</h4>
<div id="leadLineChart" class="ct-chart ct-messages"></div>
<div class="chart-legend text-muted">
<i class="fa fa-circle text-warning"></i> Total Messages
<i class="fa fa-circle text-success"></i> Inbound Messages
<i class="fa fa-circle text-light-blue"></i> Outbound Messages
</div>
</div>
</div>
<br>
<br>
<h4 class="card-title">Messages Table
</h4>
<div class="toolbar">
</div>
<div class="material-datatables table-responsive table-dropdown-padding">
<table id="leads-datatable" class="table table-striped table-vcenter" style="width: 100%">
<thead>
<tr role="row">
<th>No</th>
<th><i class="fa fa-search fa-fw"></i> Type</th>
<th><i class="fa fa-search fa-fw"></i> From</th>
<th><i class="fa fa-search fa-fw"></i> To</th>
<th><i class="fa fa-search fa-fw"></i> Message</th>
<th>Date</th>
<th><i class="fa fa-search fa-fw"></i> Direction</th>
<th><i class="fa fa-search fa-fw"></i> Lead Source</th>
<th><i class="fa fa-search fa-fw"></i> Status</th>
<th><i class="fa fa-search fa-fw"></i> Lead</th>
<th class="leads-actions-column"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
{% if current_supervisor_user.is_authenticated %}
<input id="superUserType" type="hidden" value="{{current_supervisor_user.role}}">
{% endif %}
</div>
{% else %}
<div class="col-md-12 text-center no-data-section">
<i class="material-icons md-48">timeline</i>
<h3 class="title">
The magic will start as soon as you receive your first text message!
</h3>
<p class="category">
We don't have anything to report on yet. As soon as you start receiving messages
from your BuyerCall number we'll update this section with some statistics
and snapshots.
<br /><br />
Don't have a phone number yet? <a href="{{ url_for('phonenumbers.inbound_new') }}">
Set up a new number here</a>
</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myLeadFilterModal" tabindex="-1" role="dialog" aria-labelledby="myModalLeadFilterLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="modal-title">Apply filters to refine message result set.</h4>
</div>
<div class="modal-body">
<form>
<div class="row filter-buttons">
<div class="col-md-6 dropdown">
<label for="widget-position" class="control-label">Type</label>
<div id="widget-position-container" class="widget-general-set-pad">
<select id="cbType" class="form-control">
<option class="typie" id="-1">---</option>
<option class="typie" id="sms">SMS</option>
<option class="typie" id="mms">MMS</option>
</select>
</div>
</div>
<div class="col-md-6 dropdown">
<label for="widget-position" class="control-label">Source</label>
<div id="widget-position-container" class="widget-general-set-pad">
<select id="cbSource" class="form-control">
</select>
</div>
</div>
</div>
<div class="row filter-buttons">
<div class="col-md-6 dropdown">
<label for="widget-position" class="control-label">Direction</label>
<div id="widget-position-container" class="widget-general-set-pad">
<select id="cbDirection" class="form-control">
<option class="direction" id="-1">---</option>
<option class="direction" id="in">Inbound</option>
<option class="direction" id="out">Outbound</option>
</select>
</div>
</div>
<div class="col-md-6 dropdown">
<label for="widget-position" class="control-label">Status</label>
<div id="widget-position-container" class="widget-general-set-pad">
<select id="cbStatus" class="form-control">
</select>
</div>
</div>
</div>
<div class="row">
<div class="text-danger hidden" id="lead-call-warning" style="line-height: 2em; vertical-align: center">
Please select a filter and press Apply to apply.
</div>
<div class="text-center">
<button id="btnApply" type="button" class="btn btn-default btn-primary">Apply</button>
<button id="btnCancel" type="button" class="btn btn-simple" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div class="modal fade" id="mySms" tabindex="-1" role="dialog" aria-labelledby="mySmsLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="modal-title">Send an SMS to the contact lead.</h4>
</div>
<div class="modal-body">
<input id="smsModalData" type="hidden">
<input id="smsModalNumber" type="hidden">
<form>
<div class="row">
<div class="form-group label-floating col-md-6">
<label class="control-label">From Number</label>
<select class="form-control routing-number">
<option value="-1">Select number...</option>
</select>
</div>
<div class="form-group label-floating col-md-6">
<label class="control-label">To Lead</label>
<select class="form-control toLeadDetailsSelect" disabled>
<option class="">Select...</option>
<option value="lead" class="toleadDetails"></option>
</select>
</div>
</div>
<div class="row agent-select">
<div class="form-group label-floating col-md-6">
<label class="control-label">Agent</label>
<select class="form-control routing-agent">
<option value="-1">Select agent...</option>
</select>
</div>
</div>
<div class="text-danger hidden" id="lead-sms-warning" style="line-height: 2em; vertical-align: center">
Please select the agent and routing number
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group bmd-form-group">
<label class="bmd-label-floating control-label">Enter your text here</label>
<textarea class="smsText form-control" rows="4" maxlength="500"></textarea>
<label class="control-label" id="smsCharCount" style="float:right;">500/500</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-10 sms-attachements" id="hidden-information-section">
Attachment:
<br/>
<div id="attachment-files" class="card-profile mms_attach">
</div>
<a href="#" id="remove-mms-attachment">remove attachment</a>
</div>
</div>
<div class="row">
<div class="col-md-12 form-group" id="add-image-section">
<div class="row">
<div class="col-md-10 feature-toggle toggle-attachment togglebutton">
<label for="chkSMSImage" class="toggle-field-step">
{{ _('Add an attachment:') }}
<input type="checkbox" id="chkSMSImage" />
</label>
</div>
</div>
<div class="row">
<div class="col-sm-12" id="attachment-upload-section">
<div class="upload-music" class="form-group">
{{ _('Drag file here or click to upload') }}
</div>
</div>
</div>
</div>
</div>
<div class="text-center">
<button type="button" class="btn btn-default btn-primary btn-sms" disabled>Send</button>
<button type="button" class="btn btn-simple" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!-- END Leads datatables -->
<script type="text/html" id="lead-call-popup">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="material-icons">clear</i>
</button>
<h4 class="modal-title">Initiate a call between the lead and a agent.</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group label-floating">
<label class="control-label">Agent's Number</label>
<select class="form-control agent-number"></select>
</div>
<div class="form-group label-floating">
<label class="control-label">Routing Number</label>
<select class="form-control routing-number"></select>
</div>
<div class="text-danger hidden" id="lead-call-warning" style="line-height: 2em; vertical-align: center">
Please select the agent and routing number
</div>
<div class="text-center">
<button class="btn btn-default btn-primary btn-call" disabled>Call</button>
<button type="button" class="btn btn-simple" data-dismiss="modal">Cancel</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</script>
<!-- END Leads modal -->
{% endblock %}
{% block pagescripts %}
<script>
window.appConfig = {
server_url: document.location.host,
}
</script>
{{ javascript_tag("sms_dashboard_js") }}
<script>
window.setTimeout(function() { $('#flash-messages').hide('slow') }, 10000);
</script>
{% endblock %}