ruhnet
/
monster-ui-fax
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 34 Wiki Activity
Browse Source

UI-2978: WIP refresh design of fax app

UI-2978
Jean-Roch Maitre 8 years ago
parent
c08bfba9e7
commit
ddb560815f
12 changed files with 823 additions and 594 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +215
    -295
      app.js
  2. +12
    -9
      i18n/en-US.json
  3. +0
    -188
      style/app.css
  4. +227
    -0
      style/app.scss
  5. +23
    -0
      views/inbound-faxes-rows.html
  6. +89
    -48
      views/inbound-faxes.html
  7. +0
    -0
      views/old-inbound-faxes-list.html
  8. +59
    -0
      views/old-inbound-faxes.html
  9. +0
    -0
      views/old-outbound-faxes-list.html
  10. +65
    -0
      views/old-outbound-faxes.html
  11. +39
    -0
      views/outbound-faxes-rows.html
  12. +94
    -54
      views/outbound-faxes.html

+ 215
- 295
app.js View File

@ -47,17 +47,17 @@ define(function(require) {
self.getFaxData(function(results) {
self.appFlags.faxboxes = _.keyBy(results.faxboxes, 'id');
console.log(_.size(self.appFlags.faxboxes));
var menus = [
{
tabs: [
{
text: self.i18n.active().fax.menuTitles.inbound,
callback: self.renderInbound
callback: self.renderNewInbound
},
{
text: self.i18n.active().fax.menuTitles.outbound,
callback: self.renderOutbound
callback: self.renderNewOutbound
},
{
text: self.i18n.active().fax.menuTitles.logs,
@ -102,83 +102,31 @@ define(function(require) {
});
},
getStorage: function(callback) {
renderNewInbound: function(pArgs) {
var self = this;
self.callApi({
resource: 'storage.get',
data: {
accountId: self.accountId,
generateError: false
},
success: function(data) {
callback(data.data);
},
error: function(data, error, globalHandler) {
if (error.status === 404) {
callback(undefined);
} else {
globalHandler(data);
}
}
});
},
renderStorage: function(pArgs) {
var self = this,
args = pArgs || {},
parent = args.container || $('#fax_app_container .app-content-wrapper');
self.getStorage(function(storage) {
var formattedData = self.storageFormatData(storage),
template = $(monster.template(self, 'storage', formattedData));
self.storageBindEvents(template);
monster.pub('common.storagePlanManager.render', {
container: template.find('.control-container'),
forceTypes: ['fax'],
hideOtherTypes: true
});
parent
.fadeOut(function() {
$(this)
.empty()
.append(template)
.fadeIn();
});
});
self.renderCommon(pArgs, 'inbound');
},
storageBindEvents: function(template) {
renderNewOutbound: function(pArgs) {
var self = this;
},
storageFormatData: function(data) {
return data;
self.renderCommon(pArgs, 'outbound');
},
renderFaxes: function(pArgs) {
renderCommon: function(pArgs, type) {
var self = this,
args = pArgs || {},
parent = args.container || $('#fax_app_container .app-content-wrapper'),
dates = monster.util.getDefaultRangeDates(self.appFlags.ranges.default),
fromDate = dates.from,
toDate = dates.to,
type = pArgs.type;
var template = $(monster.template(self, type + '-faxes', { faxboxes: self.appFlags.faxboxes }));
self.bindCommon(template);
dataTemplate = {
faxboxes: self.appFlags.faxboxes,
count: _.size(self.appFlags.faxboxes)
},
template = $(monster.template(self, type + '-faxes', dataTemplate));
if (type === 'inbound') {
self.bindInbound(template);
} else {
self.bindOutbound(template);
}
self.initDatePickerFaxboxes(type, parent, template);
self.initDatePicker(template, fromDate, toDate);
self.bindFaxboxes(type, template);
parent
.fadeOut(function() {
@ -187,174 +135,130 @@ define(function(require) {
.append(template)
.fadeIn();
});
self.displayFaxesList(type, template, fromDate, toDate);
},
renderInbound: function(pArgs) {
var self = this;
pArgs.type = 'inbound';
self.renderFaxes(pArgs);
},
renderOutbound: function(pArgs) {
var self = this;
pArgs.type = 'outbound';
self.renderFaxes(pArgs);
},
displayFaxesList: function(type, container, fromDate, toDate, selectedFaxbox) {
var self = this;
container
.find('.data-state')
.hide();
container
.find('.loading-state')
.show();
initDatePickerFaxboxes: function(type, parent, template) {
var self = this,
dates = monster.util.getDefaultRangeDates(self.appFlags.ranges.default),
fromDate = dates.from,
toDate = dates.to;
self.getTemplateData(type, container, fromDate, toDate, selectedFaxbox, function(template) {
monster.ui.footable(template.find('.footable'));
self.bindTableCommon(template);
var optionsDatePicker = {
container: template,
range: self.appFlags.ranges.max
};
container.removeClass('empty');
monster.ui.initRangeDatepicker(optionsDatePicker);
container.find('.main-select-message').prop('checked', false);
template.find('#startDate').datepicker('setDate', fromDate);
template.find('#endDate').datepicker('setDate', toDate);
container
.find('.data-state')
.empty()
.append(template)
.show();
template.find('.apply-filter').on('click', function(e) {
var faxboxId = template.find('#select_faxbox').val();
container
.find('.loading-state')
.hide();
self.displayListFaxes(type, parent, faxboxId);
});
if (selectedFaxbox && selectedFaxbox !== 'none') {
container.find('#select_faxbox').val(selectedFaxbox).trigger('change');
}
template.find('.toggle-filter').on('click', function() {
template.find('.filter-by-date').toggleClass('active');
});
},
getTemplateData: function(type, container, fromDate, toDate, selectedFaxbox, callback) {
var self = this;
if (type === 'inbound') {
self.getInboundData(fromDate, toDate, function(data) {
var dataTemplate = self.formatInboundData(data),
template = $(monster.template(self, 'inbound-faxes-list', { faxes: dataTemplate }));
bindFaxboxes: function(type, template) {
var self = this,
$selectFaxbox = template.find('.select-faxbox');
callback && callback(template);
});
} else {
self.getOutboundData(fromDate, toDate, function(data) {
var dataTemplate = self.formatOutboundData(data),
template = $(monster.template(self, 'outbound-faxes-list', { faxes: dataTemplate }));
monster.ui.tooltips(template);
monster.ui.footable(template.find('.footable'));
callback && callback(template);
});
}
},
$selectFaxbox.chosen({ search_contains: true, placeholder_text_single: self.i18n.active().fax.actionBar.selectFaxbox.none });
bindTableCommon: function(template) {
var self = this;
$selectFaxbox.on('change', function() {
var faxboxId = $(this).val();
template.find('#fax_list').on('click', '.details-fax', function() {
var $this = $(this),
type = $this.parents('.faxes-table').data('type'),
id = $(this).parents('tr').data('id');
template.find('.select-faxbox').val(faxboxId).trigger('chosen:updated');
self.renderDetailsFax(type, id);
self.displayListFaxes(type, template, faxboxId);
});
},
renderDetailsFax: function(type, id) {
var self = this;
template.find('#refresh_faxbox').on('click', function() {
var faxboxId = $selectFaxbox.val();
self.getFaxDetails(type, id, function(faxDetails) {
var template = $(monster.template(self, 'fax-CDRDialog'));
if (faxboxId !== 'none') {
self.displayListFaxes(type, template, faxboxId);
}
});
monster.ui.renderJSON(faxDetails, template.find('#jsoneditor'));
template.find('#delete_faxes').on('click', function() {
var faxboxId = $selectFaxbox.val(),
listSelected = [],
type = $(this).data('type');
monster.ui.dialog(template, { title: self.i18n.active().fax.CDRPopup.title });
});
},
template.find('.select-fax:checked').each(function(a, el) {
listSelected.push($(el).data('id'));
});
var content = monster.template(self, '!' + self.i18n.active().fax.deleteConfirm.content, { variable: listSelected.length });
initDatePicker: function(template, fromDate, toDate) {
var self = this;
monster.ui.confirm(content, function() {
template.find('.select-fax:checked').each(function(a, el) {
listSelected.push($(el).data('id'));
});
var optionsDatePicker = {
container: template,
range: self.appFlags.ranges.max
};
template.find('.data-state')
.hide();
monster.ui.initRangeDatepicker(optionsDatePicker);
template.find('.loading-state')
.show();
template.find('#startDate').datepicker('setDate', fromDate);
template.find('#endDate').datepicker('setDate', toDate);
self.deleteFaxes(listSelected, type, function() {
toastr.success(self.i18n.active().fax.deleteConfirm.success);
template.find('.apply-filter').on('click', function(e) {
self.refreshFaxes(template);
self.displayListFaxes(type, template, faxboxId);
});
}, undefined, {
title: self.i18n.active().fax.deleteConfirm.title,
confirmButtonText: self.i18n.active().fax.deleteConfirm.confirmButtonText,
confirmButtonClass: 'monster-button-danger'
});
});
},
refreshFaxes: function(template) {
var self = this,
type = template.hasClass('inbound-faxes') ? 'inbound' : 'outbound',
fromDate = template.find('input.filter-from').datepicker('getDate'),
toDate = template.find('input.filter-to').datepicker('getDate'),
selectedFaxbox = template.find('#select_faxbox').val();
self.displayFaxesList(type, template, fromDate, toDate, selectedFaxbox);
},
template.find('#resend_faxes').on('click', function() {
var faxboxId = $selectFaxbox.val(),
listSelected = [];
bindCommon: function(template) {
var self = this,
$selectFaxbox = template.find('#select_faxbox');
template.find('.select-fax:checked').each(function(a, el) {
listSelected.push($(el).data('id'));
});
monster.ui.tooltips(template);
var content = monster.template(self, '!' + self.i18n.active().fax.resendConfirm.content, { variable: listSelected.length });
monster.ui.confirm(content, function() {
self.resendFaxes(listSelected, function() {
toastr.success(self.i18n.active().fax.resendConfirm.success);
$selectFaxbox.chosen({
search_contains: true,
width: '220px',
placeholder_text_single: self.i18n.active().fax.actionBar.selectFax.none
self.displayListFaxes(type, template, faxboxId);
});
}, undefined, {
title: self.i18n.active().fax.resendConfirm.title,
confirmButtonText: self.i18n.active().fax.resendConfirm.confirmButtonText
});
});
$selectFaxbox.on('change', function(e) {
var filtering = FooTable.get('#fax_list').use(FooTable.Filtering),
filter = $(this).val();
if (filter === 'all') {
filtering.removeFilter('faxbox_filter');
} else {
filtering.addFilter('faxbox_filter', filter, [0]);
}
filtering.filter();
template.on('click', '.details-fax', function() {
var id = $(this).parents('tr').data('id');
afterSelect();
self.renderDetailsFax(type, id);
});
function afterSelect() {
if (template.find('.select-fax:checked').length) {
template.find('.hidable').removeClass('hidden');
template.find('.main-select-fax').prop('checked', true);
template.find('.actionable').show();
} else {
template.find('.hidable').addClass('hidden');
template.find('.main-select-fax').prop('checked', false);
template.find('.actionable').hide();
}
}
template.find('#refresh_faxbox').on('click', function() {
self.refreshFaxes(template);
});
template.on('click', '.select-fax', function() {
afterSelect();
});
@ -385,91 +289,95 @@ define(function(require) {
afterSelect();
});
template.find('#delete_faxes').on('click', function() {
var listSelected = [],
type = $(this).data('type');
template.find('.select-fax:checked').each(function(a, el) {
listSelected.push($(el).data('id'));
});
var content = monster.template(self, '!' + self.i18n.active().fax.deleteConfirm.content, { variable: listSelected.length });
template.on('click', '.select-line', function() {
var cb = $(this).parents('.fax-row').find('.select-fax');
monster.ui.confirm(content, function() {
template.find('.select-fax:checked').each(function(a, el) {
listSelected.push($(el).data('id'));
});
self.deleteFaxes(listSelected, type, function() {
toastr.success(self.i18n.active().fax.deleteConfirm.success);
self.refreshFaxes(template);
});
}, undefined, {
title: self.i18n.active().fax.deleteConfirm.title,
confirmButtonText: self.i18n.active().fax.deleteConfirm.confirmButtonText,
confirmButtonClass: 'monster-button-danger'
});
cb.prop('checked', !cb.prop('checked'));
afterSelect();
});
},
bindInbound: function(template) {
var self = this;
},
displayListFaxes: function(type, container, faxboxId) {
var self = this,
fromDate = container.find('input.filter-from').datepicker('getDate'),
toDate = container.find('input.filter-to').datepicker('getDate'),
filterByDate = container.find('.filter-by-date').hasClass('active');
bindOutbound: function(template) {
var self = this;
container.removeClass('empty');
template.find('#resend_faxes').on('click', function() {
var listSelected = [];
template.find('.select-fax:checked').each(function(a, el) {
listSelected.push($(el).data('id'));
});
var content = monster.template(self, '!' + self.i18n.active().fax.resendConfirm.content, { variable: listSelected.length });
// Gives a better feedback to the user if we empty it as we click... showing the user something is happening.
container.find('.data-state')
.hide();
monster.ui.confirm(content, function() {
self.resendFaxes(listSelected, function() {
toastr.success(self.i18n.active().fax.resendConfirm.success);
container.find('.loading-state')
.show();
self.refreshFaxes(template);
});
}, undefined, {
title: self.i18n.active().fax.resendConfirm.title,
confirmButtonText: self.i18n.active().fax.resendConfirm.confirmButtonText
});
});
},
container.find('.hidable').addClass('hidden');
container.find('.main-select-fax').prop('checked', false);
getInboundData: function(fromDate, toDate, callback) {
var self = this;
monster.ui.footable(container.find('.faxbox-table .footable'), {
getData: function(filters, callback) {
if (filterByDate) {
filters = $.extend(true, filters, {
created_from: monster.util.dateToBeginningOfGregorianDay(fromDate),
created_to: monster.util.dateToEndOfGregorianDay(toDate)
});
}
// we do this to keep context
self.getRowsFaxes(type, filters, faxboxId, callback);
},
afterInitialized: function() {
container.find('.data-state')
.show();
self.getInboundFaxes(fromDate, toDate, function(faxes) {
callback && callback(faxes);
container.find('.loading-state')
.hide();
},
backendPagination: {
enabled: false
}
});
},
getOutboundData: function(fromDate, toDate, callback) {
getRowsFaxes: function(type, filters, faxboxId, callback) {
var self = this;
self.getOutboundFaxes(fromDate, toDate, function(faxes) {
callback && callback(faxes);
self.getFaxMessages(type, filters, faxboxId, function(data) {
var formattedData = self.formatFaxData(data.data, type),
dataTemplate = {
faxes: formattedData
},
$rows = $(monster.template(self, type + '-faxes-rows', dataTemplate));
callback && callback($rows, data);
});
},
formatInboundData: function(data) {
getFaxMessages: function(type, filters, faxboxId, callback) {
var self = this,
formattedFaxes = self.formatFaxes(data, 'inbound');
resource = type === 'inbound' ? 'faxes.listInbound' : 'faxes.listOutbound';
return formattedFaxes;
},
self.callApi({
resource: resource,
data: {
accountId: self.accountId,
//faxboxId: faxboxId, API Doesn't allow filter here for now, we'll do it in JS instead
filters: filters
},
success: function(data) {
var formattedData = data,
filteredData = _.filter(data.data, function(a) {
return a.faxbox_id === faxboxId;
});
formatOutboundData: function(data) {
var self = this,
formattedFaxes = self.formatFaxes(data, 'outbound');
formattedData.data = filteredData;
return formattedFaxes;
callback && callback(formattedData);
}
});
},
formatFaxes: function(data, type) {
formatFaxData: function(data, type) {
var self = this;
_.each(data, function(fax) {
@ -501,14 +409,56 @@ define(function(require) {
return self.apiUrl + 'accounts/' + self.accountId + '/faxes/' + type + '/' + mediaId + '/attachment?auth_token=' + self.getAuthToken();
},
oldRenderLogs: function(pArgs) {
renderDetailsFax: function(type, id) {
var self = this;
self.getFaxDetails(type, id, function(faxDetails) {
var template = $(monster.template(self, 'fax-CDRDialog'));
monster.ui.renderJSON(faxDetails, template.find('#jsoneditor'));
monster.ui.dialog(template, { title: self.i18n.active().fax.CDRPopup.title });
});
},
getStorage: function(callback) {
var self = this;
self.callApi({
resource: 'storage.get',
data: {
accountId: self.accountId,
generateError: false
},
success: function(data) {
callback(data.data);
},
error: function(data, error, globalHandler) {
if (error.status === 404) {
callback(undefined);
} else {
globalHandler(data);
}
}
});
},
renderStorage: function(pArgs) {
var self = this,
args = pArgs || {},
parent = args.container || $('#fax_app_container .app-content-wrapper'),
template = $(monster.template(self, 'logs-layout'));
parent = args.container || $('#fax_app_container .app-content-wrapper');
self.logsInitTable(template, function() {
self.logsBindEvents(template);
self.getStorage(function(storage) {
var formattedData = self.storageFormatData(storage),
template = $(monster.template(self, 'storage', formattedData));
self.storageBindEvents(template);
monster.pub('common.storagePlanManager.render', {
container: template.find('.control-container'),
forceTypes: ['fax'],
hideOtherTypes: true
});
parent
.fadeOut(function() {
@ -520,6 +470,14 @@ define(function(require) {
});
},
storageBindEvents: function(template) {
var self = this;
},
storageFormatData: function(data) {
return data;
},
renderLogs: function(pArgs) {
var self = this,
args = pArgs || {},
@ -638,44 +596,6 @@ define(function(require) {
});
},
getInboundFaxes: function(fromDate, toDate, callback) {
var self = this;
self.callApi({
resource: 'faxes.listInbound',
data: {
accountId: self.accountId,
filters: {
created_from: monster.util.dateToBeginningOfGregorianDay(fromDate),
created_to: monster.util.dateToEndOfGregorianDay(toDate),
paginate: false
}
},
success: function(data) {
callback && callback(data.data);
}
});
},
getOutboundFaxes: function(fromDate, toDate, callback) {
var self = this;
self.callApi({
resource: 'faxes.listOutbound',
data: {
accountId: self.accountId,
filters: {
created_from: monster.util.dateToBeginningOfGregorianDay(fromDate),
created_to: monster.util.dateToEndOfGregorianDay(toDate),
paginate: false
}
},
success: function(data) {
callback && callback(data.data);
}
});
},
listFaxboxes: function(callback) {
var self = this;


+ 12
- 9
i18n/en-US.json View File

@ -29,6 +29,12 @@
},
"noData": "N/A"
},
"empty": {
"headline1": "There are",
"headline2": "faxboxes recognized on this account",
"subHeadlineInbound": "Select a box to manage the inbound faxes it contains.",
"subHeadlineOutbound": "Select a box to manage the outbound faxes it sent."
},
"actionBar": {
"select": {
"all": "All on page",
@ -36,9 +42,8 @@
"completed": "Completed",
"none": "None"
},
"selectFax": {
"none": "Filter to a specific Faxbox",
"all": "Show All Faxboxes"
"selectFaxbox": {
"none": "Select a Fax Box"
},
"from": "From",
"to": "To",
@ -48,11 +53,9 @@
"select": "Select",
"resend": "Resend",
"delete": "Delete"
}
},
"empty": {
"headline": "In order to view and manage faxes, first select the desired fax box in this account.",
"subtitle": "Use the 'Filter to a specific Faxbox' above and to the left."
},
"currentlyViewing": "Currently Viewing",
"filterByDate": "Filter By Dates"
},
"CDRPopup": {
"title": "Fax Details"
@ -88,4 +91,4 @@
}
}
}
}
}

+ 0
- 188
style/app.css View File

@ -1,188 +0,0 @@
/* Default empty state */
.faxes-container.empty .empty-state {
display: block;
}
.faxes-container .empty-state {
background: #FFF;
border: 1px dashed #ccc;
display: none;
padding: 0 10px 40px;
text-align: center;
}
.faxes-container .empty-state .icon-title {
color: #333;
font-size: 148px;
}
.faxes-container .empty-state .headline {
margin-top: -10px;
}
.faxes-container .empty-state .subtitle {
margin-top :10px;
color: #909099;
}
.faxes-container .data-state {
display: none;
}
.faxes-container.empty .loading-state {
top: 0;
}
.faxes-container .loading-state {
display: none;
background: #fff none repeat scroll 0 0;
border: 1px dashed #aaa;
font-size: 60px;
padding: 50px;
text-align: center;
position: relative;
top: 50px;
}
/* Action Bar */
.faxes-container .filters.basic-actions {
width: 131px;
}
.faxes-container.outbound-faxes .filters.basic-actions {
width: 186px;
}
.faxes-container .action-bar .actionable {
display: none;
}
.faxes-container .action-bar .filters > :first-child {
margin-left: 0;
}
.faxes-container .action-bar .margin-left {
margin-left: 10px;
}
.faxes-container .action-bar .faxbox-selector {
display: inline-block;
}
.faxes-container .action-bar #select_faxbox {
width: 105px;
margin-bottom: 0;
}
.faxes-container .action-bar .mark-as-wrapper {
display: inline-block;
}
.faxes-container .action-bar .mark-as-wrapper.hidden {
display: none;
}
@media (min-width: 1240px) {
.faxes-container .action-bar .faxbox-selector {
margin-right: 65px;
}
}
.faxes-container .action-bar .sub-ranges {
display: inline-block;
margin-left: 10px;
}
@media (max-width: 1250px) {
.faxes-container .action-bar .sub-ranges {
display: none;
}
}
.faxes-container .action-bar .custom-range > * {
margin: 0 10px 0 0;
vertical-align: middle;
}
.faxes-container .action-bar .custom-range > span {
margin-right: 5px;
}
.faxes-container .action-bar .custom-range input.date-filter {
height: 24px;
width: 80px;
}
/* Table */
.faxes-container .faxes-table table {
margin-top: 0;
}
.faxes-container .faxes-table table .footable-header th:nth-child(1) {
width: 25px;
}
.faxes-container .faxes-table tbody tr {
height: 55px;
}
.faxes-container .faxes-table tbody tr > td:first-child .monster-checkbox {
margin-right: 10px;
margin-top: 8px;
}
.faxes-container .faxes-table table.highlighted tbody tr {
opacity: 0.3;
}
.faxes-container .faxes-table table.highlighted tbody tr.active {
opacity: 1;
}
.faxes-container .faxes-table .status {
font-weight: 600;
text-transform: uppercase;
}
.faxes-container .faxes-table .status[data-status="success"] {
color: #33DB24;
}
.faxes-container .faxes-table .status[data-status="processing"] {
color: #02a5ff;
}
.faxes-container .faxes-table .status[data-status="failed"] {
color: #e01a00;
}
.faxes-container .faxes-table .empty-vm-row td {
text-align: center !important;
}
/* CDR Popup */
#faxbox_cdr_details_dialog {
width: 750px;
margin: 15px;
}
/* Faxes log */
#smtp_logs_container .table .detail-link {
margin: 0px;
}
#smtp_logs_grid {
clear: right;
}
#smtp_logs_detail_dialog {
width: 700px;
padding: 15px;
}
#smtp_logs_detail_dialog tr,
#smtp_logs_detail_dialog td {
line-height: 15px;
padding: 2px;
white-space: normal;
}

+ 227
- 0
style/app.scss View File

@ -0,0 +1,227 @@
@import "../../../css/partials/base";
/* Default empty state */
.faxes-container.empty .empty-state {
display: block;
}
.faxes-container .empty-state {
display: none;
text-align: center;
}
.faxes-container .empty-state .headline {
font-size: 22px;
margin-top: 35px;
}
.faxes-container .empty-state .sub-headline {
color: #606069;
font-size: 16px;
margin-top: 13px;
}
.faxes-container .empty-state .count {
font-weight: bold;
margin-left: 5px;
margin-right: 5px;
}
.faxes-container .empty-state .faxboxes-list {
margin-top: 30px;
width: 450px;
text-align: left;
}
.faxes-container .empty-state .chosen-drop {
width: 450px;
}
.faxes-container .empty-state .chosen-container > a,
.faxes-container .main-header .chosen-container > a {
height: 40px;
line-height: 40px;
width: 450px;
}
.faxes-container .main-header {
margin-bottom: 25px;
}
.faxes-container .main-header .select-header {
color: #606069;
margin-bottom: 5px;
}
.faxes-container .main-header .chosen-drop,
.faxes-container .main-header .chosen-container > a,
.faxes-container .main-header .faxboxes-list,
.faxes-container .main-header .faxbox-selector {
width: 300px;
}
.faxes-container .main-header > * {
display: inline-block;
margin-right: 25px;
}
.faxes-container .main-header #refresh_faxbox {
margin-top: 35px;
}
.faxes-container .main-header .faxbox-selector .chosen-container .chosen-single span {
font-size: 18px;
}
.faxes-container .data-state {
display: none;
}
.faxes-container .loading-state {
display: none;
background: #fff none repeat scroll 0 0;
border: 1px dashed #aaa;
font-size: 60px;
padding: 50px;
text-align: center;
position: relative;
top: 50px;
}
.faxes-container .faxboxes-list {
display: block;
margin: auto;
width: 400px;
}
/* Action Bar */
.faxes-container.empty .filters.search,
.faxes-container.empty .filters.basic-actions > *,
.faxes-container.empty .main-header {
display: none;
}
.faxes-container .filters.basic-actions {
display: inline-block;
}
.faxes-container:not(.empty) .action-bar {
display: block;
}
.faxes-container .action-bar {
display: none;
}
.faxes-container .action-bar .filters > :first-child {
margin-left: 0;
}
.faxes-container .action-bar .margin-left {
margin-left: 10px;
}
.faxes-container .action-bar .hidable {
display: inline-block;
}
.faxes-container .action-bar .hidable.hidden {
display: none;
}
/* Table */
.faxes-container .faxbox-table table {
margin-top: 0;
}
.faxes-container .faxbox-table tbody tr > td:first-child .monster-checkbox {
margin-right: 10px;
margin-top: 8px;
}
.faxes-container .faxbox-table .select-cell {
min-width: 20px !important;
width: 20px;
}
.faxes-container .faxbox-table .select-line {
cursor: pointer;
}
.faxes-container .faxbox-table tr .bottom-line {
color: #707079;
font-size: 12px;
}
.faxes-container .faxbox-table td.no-padding {
padding: 0;
}
.faxes-container .faxbox-table .status {
text-transform: uppercase;
}
.faxes-container .filter-by-date .date-ranges > * {
margin: 0 10px 0 0;
vertical-align: middle;
}
.faxes-container .filter-by-date .date-ranges > span {
margin-right: 5px;
}
.faxes-container .filter-by-date .date-ranges input.date-filter {
height: 24px;
width: 90px;
}
.faxes-container .filter-by-date .date-ranges i.fa-calendar {
margin-left: -30px;
margin-right: 20px;
}
.faxes-container .filter-by-date {
float: right;
line-height: 30px;
margin-left: 30px;
}
.faxes-container .filter-by-date.active .expand-dates {
float: right;
}
.faxes-container .filter-by-date .date-ranges,
.faxes-container .filter-by-date.active .expand-dates {
display: none;
}
.faxes-container .filter-by-date.active .date-ranges {
display: block;
}
/* CDR Popup */
#faxbox_cdr_details_dialog {
width: 750px;
margin: 15px;
}
/* Faxes log */
#smtp_logs_container .table .detail-link {
margin: 0px;
}
#smtp_logs_grid {
clear: right;
}
#smtp_logs_detail_dialog {
width: 700px;
padding: 15px;
}
#smtp_logs_detail_dialog tr,
#smtp_logs_detail_dialog td {
line-height: 15px;
padding: 2px;
white-space: normal;
}

+ 23
- 0
views/inbound-faxes-rows.html View File

@ -0,0 +1,23 @@
{{#each faxes}}
<tr class="fax-row" data-faxbox-id="{{faxbox_id}}" data-id="{{id}}">
<td class="select-cell select-line" data-filter-value="{{id}} {{faxbox_id}}">
{{#monsterCheckbox}}
<input class="select-fax" type="checkbox" data-id="{{id}}"/>
{{/monsterCheckbox}}
</td>
<td class="select-line no-padding" data-filter-value="{{created}} {{toFriendlyDate created}}" data-sort-value="{{created}}">
<div class="top-line">{{toFriendlyDate created 'date'}}</div>
<div class="bottom-line">{{toFriendlyDate created 'time'}}</div>
</td>
<td class="select-line">{{#monsterNumberWrapper formatted.sendingNumber}}{{/monsterNumberWrapper}}</td>
<td class="select-line">{{formatted.receivingFaxbox}}</td>
<td class="select-line">{{#monsterNumberWrapper formatted.receivingNumber}}{{/monsterNumberWrapper}}</td>
<td class="select-line">{{formatted.pages}}</td>
<td class="actions">
<a class="action-item" download target="_blank" href="{{formatted.uri}}">
<i class="fa fa-cloud-download download-fax"></i>
</a>
<i class="fa fa-list action-item details-fax"></i>
</td>
</tr>
{{/each}}

+ 89
- 48
views/inbound-faxes.html View File

@ -1,59 +1,100 @@
<div class="inbound-faxes faxes-container empty monster-table-wrapper">
<div class="monster-table-header action-bar">
<div class="filters basic-actions pull-left">
<div class="select-faxbox-wrapper monster-select-dropdown pull-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.select }}">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
{{#monsterCheckbox}}
<input class="main-select-fax" type="checkbox"/>
{{/monsterCheckbox}}
<i class="icon-telicon-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="all">{{ i18n.fax.actionBar.select.all }}</a></li>
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="none">{{ i18n.fax.actionBar.select.none }}</a></li>
</ul>
</li>
</div>
<div class="filters selected-actions pull-left margin-left">
<button id="delete_faxes" data-type="inbound" class="monster-button-secondary monster-button-fit margin-left actionable" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.delete }}">
<i class="fa fa-trash"></i>
</button>
<div class="inbound-faxes-container faxes-container empty">
<div class="main-header clearfix">
<div class="faxbox-selection-wrapper pull-left">
<div class="filters faxbox-selector">
<div class="select-header">
{{ i18n.fax.actionBar.currentlyViewing }}
</div>
<select class="select-faxbox" id="select_faxbox">
<option value="none"></option>
{{#each faxboxes}}
<option value="{{id}}">{{name}}</option>
{{/each}}
</select>
</div>
</div>
<div class="filters faxbox-selector">
<select id="select_faxbox">
<option value="none"></option>
<option value="all">{{ i18n.fax.actionBar.selectFax.all }}</option>
{{#each faxboxes}}
<option value="{{id}}">{{name}}</option>
{{/each}}
</select>
<a id="refresh_faxbox" class="monster-link pull-left" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.refresh }}"><i class="fa fa-refresh"></i></a>
</div>
<div class="monster-table-wrapper-spaced">
<div class="action-bar monster-table-header">
<div class="filters basic-actions pull-left">
<div class="select-faxbox-wrapper monster-select-dropdown-neutral pull-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.select }}">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
{{#monsterCheckbox}}
<input class="main-select-fax" type="checkbox"/>
{{/monsterCheckbox}}
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="all">{{ i18n.fax.actionBar.select.all }}</a></li>
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="none">{{ i18n.fax.actionBar.select.none }}</a></li>
</ul>
</li>
</div>
<button id="refresh_faxbox" class="monster-button-secondary monster-button-fit margin-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.refresh }}">
<i class="fa fa-refresh"></i>
</button>
</div>
<div class="filters selected-actions pull-left margin-left">
<button id="delete_faxes" data-type="inbound" class="monster-button-neutral monster-button-fit margin-left hidable hidden" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.delete }}">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="sub-ranges">
<div class="custom-range">
<span>{{i18n.startDate}}</span>
<input id="startDate" type="text" class="date-filter filter-from">
<span>{{i18n.endDate}}</span>
<input id="endDate" type="text" class="date-filter filter-to">
<button type="button" class="apply-filter monster-button monster-button-primary">{{i18n.filter}}</button>
<div class="filter-by-date">
<div class="expand-dates">
<a class="monster-link blue toggle-filter">{{ i18n.fax.actionBar.filterByDate }}</a>
</div>
<div class="date-ranges">
<span>{{i18n.startDate}}</span>
<input id="startDate" type="text" class="date-filter filter-from">
<i class="fa fa-calendar"></i>
<span>{{i18n.endDate}}</span>
<input id="endDate" type="text" class="date-filter filter-to">
<i class="fa fa-calendar"></i>
<button type="button" class="apply-filter monster-button-neutral monster-button-fit">{{i18n.filter}}</button>
<a class="monster-link blue toggle-filter">{{i18n.cancel}}</a>
</div>
</div>
</div>
</div>
<div class="content">
<div class="data-state">
<div class="content">
<div class="empty-state">
<div class="headline">{{ i18n.fax.empty.headline1 }}<span class="count">{{count}}</span>{{ i18n.fax.empty.headline2 }}</div>
<div class="sub-headline">{{ i18n.fax.empty.subHeadlineInbound }}</div>
</div>
<div class="loading-state">
<i class="fa fa-spin fa-spinner monster-primary-color"></i>
<div class="faxboxes-list">
<select class="select-faxbox" id="select_faxbox_empty">
<option value="none"></option>
{{#each faxboxes}}
<option class="box-row" data-id="{{id}}" value="{{id}}">{{name}}</option>
{{/each}}
</select>
</div>
</div>
<div class="data-state">
<div class="faxbox-table">
<table class="monster-table footable" id="inbound_faxes_table">
<thead>
<tr>
<th data-filterable="false" data-type="html" data-sortable="false"></th>
<th data-type="html" data-sorted="true" data-direction="DESC">{{ i18n.fax.table.columns.received }}</th>
<th data-type="html">{{ i18n.fax.table.columns.from }}</th>
<th>{{ i18n.fax.table.columns.receivingFaxbox }}</th>
<th data-type="html">{{ i18n.fax.table.columns.receivingNumber }}</th>
<th data-breakpoints="xs" data-type="number">{{ i18n.fax.table.columns.pages }}</th>
<th data-filterable="false" data-type="html" data-sortable="false"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="loading-state">
<i class="fa fa-spin fa-spinner monster-primary-color"></i>
</div>
</div>
</div>
</div>
</div>

views/inbound-faxes-list.html → views/old-inbound-faxes-list.html View File


+ 59
- 0
views/old-inbound-faxes.html View File

@ -0,0 +1,59 @@
<div class="inbound-faxes faxes-container empty monster-table-wrapper">
<div class="monster-table-header action-bar">
<div class="filters basic-actions pull-left">
<div class="select-faxbox-wrapper monster-select-dropdown pull-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.select }}">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
{{#monsterCheckbox}}
<input class="main-select-fax" type="checkbox"/>
{{/monsterCheckbox}}
<i class="icon-telicon-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="all">{{ i18n.fax.actionBar.select.all }}</a></li>
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="none">{{ i18n.fax.actionBar.select.none }}</a></li>
</ul>
</li>
</div>
<div class="filters selected-actions pull-left margin-left">
<button id="delete_faxes" data-type="inbound" class="monster-button-secondary monster-button-fit margin-left actionable" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.delete }}">
<i class="fa fa-trash"></i>
</button>
</div>
</div>
<div class="filters faxbox-selector">
<select id="select_faxbox">
<option value="none"></option>
<option value="all">{{ i18n.fax.actionBar.selectFax.all }}</option>
{{#each faxboxes}}
<option value="{{id}}">{{name}}</option>
{{/each}}
</select>
<button id="refresh_faxbox" class="monster-button-secondary monster-button-fit margin-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.refresh }}">
<i class="fa fa-refresh"></i>
</button>
</div>
<div class="sub-ranges">
<div class="custom-range">
<span>{{i18n.startDate}}</span>
<input id="startDate" type="text" class="date-filter filter-from">
<span>{{i18n.endDate}}</span>
<input id="endDate" type="text" class="date-filter filter-to">
<button type="button" class="apply-filter monster-button monster-button-primary">{{i18n.filter}}</button>
</div>
</div>
</div>
<div class="content">
<div class="data-state">
</div>
<div class="loading-state">
<i class="fa fa-spin fa-spinner monster-primary-color"></i>
</div>
</div>
</div>

views/outbound-faxes-list.html → views/old-outbound-faxes-list.html View File


+ 65
- 0
views/old-outbound-faxes.html View File

@ -0,0 +1,65 @@
<div class="outbound-faxes faxes-container empty monster-table-wrapper">
<div class="monster-table-header action-bar">
<div class="filters basic-actions pull-left">
<div class="select-faxbox-wrapper monster-select-dropdown pull-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.select }}">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
{{#monsterCheckbox}}
<input class="main-select-fax" type="checkbox"/>
{{/monsterCheckbox}}
<i class="icon-telicon-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="all">{{ i18n.fax.actionBar.select.all }}</a></li>
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="failed">{{ i18n.fax.actionBar.select.failed }}</a></li>
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="success">{{ i18n.fax.actionBar.select.completed }}</a></li>
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="none">{{ i18n.fax.actionBar.select.none }}</a></li>
</ul>
</li>
</div>
<div class="filters selected-actions pull-left margin-left">
<button id="delete_faxes" data-type="outbound" class="monster-button-secondary monster-button-fit margin-left actionable" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.delete }}">
<i class="fa fa-trash"></i>
</button>
<button id="resend_faxes" class="monster-button-secondary monster-button-fit margin-left actionable" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.resend }}">
<i class="fa fa-mail-forward"></i>
</button>
</div>
</div>
<div class="filters faxbox-selector">
<select id="select_faxbox">
<option value="none"></option>
<option value="all">{{ i18n.fax.actionBar.selectFax.all }}</option>
{{#each faxboxes}}
<option value="{{id}}">{{name}}</option>
{{/each}}
</select>
<button id="refresh_faxbox" class="monster-button-secondary monster-button-fit margin-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.refresh }}">
<i class="fa fa-refresh"></i>
</button>
</div>
<div class="sub-ranges">
<div class="custom-range">
<span>{{i18n.startDate}}</span>
<input id="startDate" type="text" class="date-filter filter-from">
<span>{{i18n.endDate}}</span>
<input id="endDate" type="text" class="date-filter filter-to">
<button type="button" class="apply-filter monster-button monster-button-primary">{{i18n.filter}}</button>
</div>
</div>
</div>
<div class="content">
<div class="data-state">
</div>
<div class="loading-state">
<i class="fa fa-spin fa-spinner monster-primary-color"></i>
</div>
</div>
</div>

+ 39
- 0
views/outbound-faxes-rows.html View File

@ -0,0 +1,39 @@
{{#each faxes}}
<tr class="fax-row" data-faxbox-id="{{faxbox_id}}" data-id="{{id}}">
<td class="select-cell select-line" data-filter-value="{{id}} {{faxbox_id}}">
{{#monsterCheckbox}}
<input class="select-fax" type="checkbox" data-id="{{id}}" data-status="{{status}}"/>
{{/monsterCheckbox}}
</td>
<td class="status select-line" data-sort-value="{{status}}" data-filter-value="{{status}}" data-status="{{status}}">
<span data-toggle="tooltip" data-placement="top" data-original-title="{{ formatted.error }}">
{{#compare status "===" "success"}}
<span class="monster-badge-success">{{status}}</span>
{{else}}
{{#compare status "===" "failed"}}
<span class="monster-badge-danger">{{status}}</span>
{{else}}
<span class="monster-badge-neutral">{{status}}</span>
{{/compare}}
{{/compare}}
</span>
</td>
<td class="select-line no-padding" data-filter-value="{{created}} {{toFriendlyDate created}}" data-sort-value="{{created}}">
<div class="top-line">{{toFriendlyDate created 'date'}}</div>
<div class="bottom-line">{{toFriendlyDate created 'time'}}</div>
</td>
<td class="select-line">{{formatted.sendingFaxbox}}</td>
<td class="select-line">{{#monsterNumberWrapper formatted.sendingNumber}}{{/monsterNumberWrapper}}</td>
<td class="select-line">{{#monsterNumberWrapper formatted.receivingNumber}}{{/monsterNumberWrapper}}</td>
<td class="select-line">{{formatted.pages}}</td>
<td class="actions">
<!-- <a class="action-item" target="_blank" href="{{formatted.uri}}">
<i class="fa fa-file-o action-item view-fax"></i>
</a> -->
<a class="action-item" download target="_blank" href="{{formatted.uri}}">
<i class="fa fa-cloud-download download-fax"></i>
</a>
<i class="fa fa-list action-item details-fax"></i>
</td>
</tr>
{{/each}}

+ 94
- 54
views/outbound-faxes.html View File

@ -1,65 +1,105 @@
<div class="outbound-faxes faxes-container empty monster-table-wrapper">
<div class="monster-table-header action-bar">
<div class="filters basic-actions pull-left">
<div class="select-faxbox-wrapper monster-select-dropdown pull-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.select }}">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
{{#monsterCheckbox}}
<input class="main-select-fax" type="checkbox"/>
{{/monsterCheckbox}}
<i class="icon-telicon-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="all">{{ i18n.fax.actionBar.select.all }}</a></li>
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="failed">{{ i18n.fax.actionBar.select.failed }}</a></li>
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="success">{{ i18n.fax.actionBar.select.completed }}</a></li>
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="none">{{ i18n.fax.actionBar.select.none }}</a></li>
</ul>
</li>
</div>
<div class="filters selected-actions pull-left margin-left">
<button id="delete_faxes" data-type="outbound" class="monster-button-secondary monster-button-fit margin-left actionable" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.delete }}">
<i class="fa fa-trash"></i>
</button>
<button id="resend_faxes" class="monster-button-secondary monster-button-fit margin-left actionable" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.resend }}">
<i class="fa fa-mail-forward"></i>
</button>
<div class="outbound-faxes-container faxes-container empty">
<div class="main-header clearfix">
<div class="faxbox-selection-wrapper pull-left">
<div class="filters faxbox-selector">
<div class="select-header">
{{ i18n.fax.actionBar.currentlyViewing }}
</div>
<select class="select-faxbox" id="select_faxbox">
<option value="none"></option>
{{#each faxboxes}}
<option value="{{id}}">{{name}}</option>
{{/each}}
</select>
</div>
</div>
<div class="filters faxbox-selector">
<select id="select_faxbox">
<option value="none"></option>
<option value="all">{{ i18n.fax.actionBar.selectFax.all }}</option>
{{#each faxboxes}}
<option value="{{id}}">{{name}}</option>
{{/each}}
</select>
<a id="refresh_faxbox" class="monster-link pull-left" href="javascript:void(0);" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.refresh }}"><i class="fa fa-refresh"></i></a>
</div>
<div class="monster-table-wrapper-spaced">
<div class="action-bar monster-table-header">
<div class="filters basic-actions pull-left">
<div class="select-faxbox-wrapper monster-select-dropdown-neutral pull-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.select }}">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="javascript:void(0);">
{{#monsterCheckbox}}
<input class="main-select-fax" type="checkbox"/>
{{/monsterCheckbox}}
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu">
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="all">{{ i18n.fax.actionBar.select.all }}</a></li>
<li><a href="javascript:void(0);" class="select-some-faxes" data-type="none">{{ i18n.fax.actionBar.select.none }}</a></li>
</ul>
</li>
</div>
<button id="refresh_faxbox" class="monster-button-secondary monster-button-fit margin-left" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.refresh }}">
<i class="fa fa-refresh"></i>
</button>
</div>
<div class="filters selected-actions pull-left margin-left">
<button id="delete_faxes" data-type="outbound" class="monster-button-neutral monster-button-fit margin-left hidable hidden" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.delete }}">
<i class="fa fa-trash"></i>
</button>
<button id="resend_faxes" class="monster-button-neutral monster-button-fit margin-left hidable hidden" data-toggle="tooltip" data-placement="top" data-original-title="{{ i18n.fax.actionBar.tooltips.resend }}">
<i class="fa fa-mail-forward"></i>
</button>
</div>
</div>
<div class="sub-ranges">
<div class="custom-range">
<span>{{i18n.startDate}}</span>
<input id="startDate" type="text" class="date-filter filter-from">
<span>{{i18n.endDate}}</span>
<input id="endDate" type="text" class="date-filter filter-to">
<button type="button" class="apply-filter monster-button monster-button-primary">{{i18n.filter}}</button>
<div class="filter-by-date">
<div class="expand-dates">
<a class="monster-link blue toggle-filter">{{ i18n.fax.actionBar.filterByDate }}</a>
</div>
<div class="date-ranges">
<span>{{i18n.startDate}}</span>
<input id="startDate" type="text" class="date-filter filter-from">
<i class="fa fa-calendar"></i>
<span>{{i18n.endDate}}</span>
<input id="endDate" type="text" class="date-filter filter-to">
<i class="fa fa-calendar"></i>
<button type="button" class="apply-filter monster-button-neutral monster-button-fit">{{i18n.filter}}</button>
<a class="monster-link blue toggle-filter">{{i18n.cancel}}</a>
</div>
</div>
</div>
</div>
<div class="content">
<div class="data-state">
<div class="content">
<div class="empty-state">
<div class="headline">{{ i18n.fax.empty.headline1 }}<span class="count">{{count}}</span>{{ i18n.fax.empty.headline2 }}</div>
<div class="sub-headline">{{ i18n.fax.empty.subHeadlineOutbound }}</div>
</div>
<div class="loading-state">
<i class="fa fa-spin fa-spinner monster-primary-color"></i>
<div class="faxboxes-list">
<select class="select-faxbox" id="select_faxbox_empty">
<option value="none"></option>
{{#each faxboxes}}
<option class="box-row" data-id="{{id}}" value="{{id}}">{{name}}</option>
{{/each}}
</select>
</div>
</div>
<div class="data-state">
<div class="faxbox-table">
<table class="monster-table footable" id="outbound_faxes_table">
<thead>
<tr>
<th data-filterable="false" data-type="html" data-sortable="false"></th>
<th data-type="html">{{ i18n.fax.table.columns.status }}</th>
<th data-type="html" data-sorted="true" data-direction="DESC">{{ i18n.fax.table.columns.sent }}</th>
<th>{{ i18n.fax.table.columns.sendingFaxbox }}</th>
<th data-type="html">{{ i18n.fax.table.columns.sendingNumber }}</th>
<th data-type="html">{{ i18n.fax.table.columns.receivingNumber }}</th>
<th data-breakpoints="xs" data-type="number">{{ i18n.fax.table.columns.pages }}</th>
<th data-filterable="false" data-type="html" data-sortable="false"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="loading-state">
<i class="fa fa-spin fa-spinner monster-primary-color"></i>
</div>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save