dave/pathfinder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- UI improvements (condensed UI) signature module, closed #629

Browse Source
This commit is contained in:
Mark Friedrich
2018-08-03 21:09:28 +02:00
parent 9c3f519c15
commit a0ccc9207a
11 changed files with 355 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
js/app/logging.js
View File

@@ -277,7 +277,7 @@ define([
// ------------------------------------------------------------------------------
// add dataTable buttons (extension)
let buttons = new $.fn.dataTable.Buttons( logDataTable, {
let buttons = new $.fn.dataTable.Buttons(logDataTable, {
buttons: [
{
extend: 'copy',
@@ -289,7 +289,7 @@ define([
text: '<i class="fas fa-fw fa-download"></i> csv'
}
]
} );
});
logDataTable.buttons().container().appendTo( $(this).find('.' + config.tableToolsClass));
});

301
js/app/ui/system_signature.js
View File

@@ -6,11 +6,11 @@ define([
'jquery',
'app/init',
'app/util',
'app/render',
'mustache',
'bootbox',
'app/map/map',
'app/map/util'
], function($, Init, Util, Render, bootbox, Map, MapUtil) {
], function($, Init, Util, Mustache, bootbox, Map, MapUtil) {
'use strict';
let config = {
@@ -25,15 +25,19 @@ define([
// system signature module
moduleTypeClass: 'pf-signature-table-module', // module wrapper
// headline toolbar
moduleHeadlineIconClass: 'pf-module-icon-button', // class for toolbar icons in the head
moduleHeadlineIconAddClass: 'pf-module-icon-button-add', // class for "add signature" icon
moduleHeadlineIconReaderClass: 'pf-module-icon-button-reader', // class for "signature reader" icon
moduleHeadlineIconLazyClass: 'pf-module-icon-button-lazy', // class for "lazy delete" toggle icon
// tables
tableToolsClass: 'pf-table-tools', // class for table toolbar
tableToolsActionClass: 'pf-table-tools-action', // class for table toolbar action
// signature progress bar
signatureScannedProgressBarClass: 'pf-system-progress-scanned', // class for signature progress bar
// toolbar
sigTableLazyToggleButtonClass: 'pf-sig-table-lazy-button', // class for "lazy update" toggle button
// table toolbar
sigTableClearButtonClass: 'pf-sig-table-clear-button', // class for "clear" signatures button
// signature table
@@ -113,6 +117,45 @@ define([
let signatureGroupsLabels = Util.getSignatureGroupInfo('label');
let signatureGroupsNames = Util.getSignatureGroupInfo('name');
/**
* get module toolbar element
* @returns {jQuery}
*/
let getHeadlineToolbar = () => {
let headlineToolbar = $('<h5>', {
class: 'pull-right'
}).append(
$('<span>', {
class: 'progress-label-right',
text: '0%'
}),
$('<i>', {
class: ['fas', 'fa-fw', 'fa-plus',
config.moduleHeadlineIconClass,
config.moduleHeadlineIconAddClass].join(' '),
title: 'add'
}).attr('data-toggle', 'tooltip'),
$('<i>', {
class: ['fas', 'fa-fw', 'fa-paste',
config.moduleHeadlineIconClass,
config.moduleHeadlineIconReaderClass].join(' '),
title: 'signature reader'
}).attr('data-toggle', 'tooltip'),
$('<i>', {
class: ['fas', 'fa-fw', 'fa-exchange-alt',
config.moduleHeadlineIconClass,
config.moduleHeadlineIconLazyClass].join(' '),
title: 'lazy \'delete\' signatures'
}).attr('data-toggle', 'tooltip')
);
headlineToolbar.find('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
return headlineToolbar;
};
/**
* check whether a dataTable API instance exists in the global cache
* args: 1. mapId, 2. systemId, 3, tableType (primary/secondary) string
@@ -457,7 +500,7 @@ define([
// get progress bar
let progressBarWrapper = moduleElement.find('.' + config.signatureScannedProgressBarClass);
let progressBar = $(progressBarWrapper).find('.progress-bar');
let progressBarLabel = $(progressBarWrapper).find('.progress-label-right');
let progressBarLabel = moduleElement.find('.progress-label-right');
let tableData = getTableData(signatureTableApi);
@@ -937,16 +980,13 @@ define([
* check the "delete signature" button. show/hide the button if a signature is selected
* @param moduleElement
*/
let checkDeleteSignaturesButton = moduleElement => {
moduleElement = $(moduleElement);
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
let selectedRows = getSelectedRows(signatureTableApi);
let checkDeleteSignaturesButton = tableApi => {
let selectedRows = getSelectedRows(tableApi);
let selectedRowCount = selectedRows.data().length;
let clearButton = moduleElement.find('.' + config.sigTableClearButtonClass);
let clearButton = tableApi.button('tableTools', 'delete:name').node();
if(selectedRowCount > 0){
let allRows = getRows(signatureTableApi);
let allRows = getRows(tableApi);
let rowCount = allRows.data().length;
let badgeText = selectedRowCount;
@@ -983,115 +1023,7 @@ define([
* @param mapId
* @param systemData
*/
let drawSignatureTableToolbar = (moduleElement, mapId, systemData) => {
// add toolbar buttons for table ------------------------------------------------------------------------------
let tableToolbar = $('<div>', {
class: config.tableToolsClass
}).append(
getLabeledButton({
type: 'primary',
label: 'add',
icon: 'fa-plus',
onClick: function(e){
// show "add sig" div
let toolsElement = $(e.target).parents('.' + config.moduleClass).find('.' + config.tableToolsActionClass);
// set toggle animation
if(toolsElement.is(':visible')){
toolsElement.velocity('stop').velocity('reverse');
}else{
toolsElement.velocity('stop').velocity({
opacity: 1,
height: '75px'
},{
duration: 150,
display: 'block',
visibility: 'visible'
});
}
}
})
).append(
getLabeledButton({
type: 'primary',
label: 'signature reader',
icon: 'fa-paste',
onClick: function(){
moduleElement.showSignatureReaderDialog(systemData);
}
})
).append(
getLabeledButton({
type: 'default',
label: 'select all',
icon: 'fa-check-square',
onClick: function(){
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
let allRows = getRows(signatureTableApi);
let selectedRows = getSelectedRows(signatureTableApi);
let allRowElements = allRows.nodes().to$();
if(allRows.data().length === selectedRows.data().length){
allRowElements.removeClass('selected');
}else{
allRowElements.addClass('selected');
}
// check delete button
checkDeleteSignaturesButton(moduleElement);
}
})
).append(
$('<input>', {
type: 'checkbox',
class: [config.sigTableLazyToggleButtonClass, 'btn-labeled'].join(' '),
value: 1,
}).attr('data-toggle', 'toggle')
).append(
getLabeledButton({
type: 'danger',
classes: [config.sigTableClearButtonClass, 'pull-right'],
label: 'delete',
icon: 'fa-times',
badge: {
label: '0'
},
onClick: function(){
// delete all rows
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
let selectedRows = getSelectedRows(signatureTableApi);
bootbox.confirm('Delete ' + selectedRows.data().length + ' signature?', function(result) {
if(result){
deleteSignatures(signatureTableApi, selectedRows);
}
});
}
})
);
moduleElement.append(tableToolbar);
// "lazy update" toggle button --------------------------------------------------------------------------------
let lazyToggleCheckbox = moduleElement.find('.' + config.sigTableLazyToggleButtonClass).bootstrapToggle({
size: 'small' ,
on: '<i class="fas fa-fw fa-exchange-alt"></i>&nbsp;&nbsp;lazy&nbsp;delete',
off: '<i class="fas fa-fw fa-paste"></i>&nbsp;&nbsp;lazy&nbsp;update',
onstyle: 'warning' ,
offstyle: 'default' ,
width: 110
});
let lazyToggleButton = lazyToggleCheckbox.parent();
lazyToggleButton.find('.toggle-on').attr('title', 'lazy \'update\' and \'delete\' old<br>from clipboard |ctrl&nbsp;+&nbsp;v|');
lazyToggleButton.find('.toggle-off').attr('title', 'lazy \'update\' signatures<br>from clipboard |ctrl&nbsp;+&nbsp;v|');
lazyToggleButton.initTooltips({
container: 'body',
html: true
});
let drawSignatureTableNew = (moduleElement, mapId, systemData) => {
// add toolbar action for table -------------------------------------------------------------------------------
let tableToolbarAction = $('<div>', {
class: config.tableToolsActionClass
@@ -1104,7 +1036,7 @@ define([
tableToolbarAction.append(table);
tableToolbar.after(tableToolbarAction);
moduleElement.find('.' + config.moduleHeadClass).after(tableToolbarAction);
let signatureData = formatSignatureData(systemData, [emptySignatureData], emptySignatureOptions);
let signatureTable = table.dataTable( {
@@ -1119,24 +1051,6 @@ define([
setDataTableInstance(mapId, systemData.id, 'secondary', signatureTableApi);
table.makeEditable(signatureTableApi, systemData);
// scanned signatures progress bar ----------------------------------------------------------------------------
let moduleConfig = {
name: 'form/progress',
position: tableToolbar,
link: 'before'
};
let moduleData = {
label: true,
wrapperClass: config.signatureScannedProgressBarClass,
class: ['progress-bar-success'].join(' '),
percent: 0,
headline: 'System scanned',
headlineRight: ' ' // will be updated by js
};
Render.showModule(moduleConfig, moduleData);
};
/**
@@ -1999,6 +1913,46 @@ define([
moduleElement.append(table);
let dataTableOptions = {
dom: '<"row"<"col-xs-3"l><"col-xs-5"B><"col-xs-4"f>>' +
'<"row"<"col-xs-12"tr>>' +
'<"row"<"col-xs-5"i><"col-xs-7"p>>',
buttons: {
name: 'tableTools',
buttons: [
{
name: 'selectAll',
className: 'btn btn-sm btn-default',
text: '<i class="fa fa-fw fa-check-square"></i>select all',
action: function(e, tableApi, node, conf){
let allRows = getRows(tableApi);
let selectedRows = getSelectedRows(tableApi);
let allRowElements = allRows.nodes().to$();
if(allRows.data().length === selectedRows.data().length){
allRowElements.removeClass('selected');
}else{
allRowElements.addClass('selected');
}
// check delete button
checkDeleteSignaturesButton(tableApi);
}
},
{
name: 'delete',
className: 'btn btn-sm btn-danger pull-right ' + config.sigTableClearButtonClass,
text: '<i class="fa fa-fw fa-times"></i>delete<span class="badge">0</span>',
action: function(e, tableApi, node, conf){
let selectedRows = getSelectedRows(tableApi);
bootbox.confirm('Delete ' + selectedRows.data().length + ' signature?', function(result) {
if(result){
deleteSignatures(tableApi, selectedRows);
}
});
}
}
]
},
drawCallback: function(settings){
this.api().columns(filterColumnIndexes).every(function(){
let column = this;
@@ -2010,7 +1964,6 @@ define([
});
},
initComplete: function (settings, json){
this.api().columns(filterColumnIndexes).every(function(){
let column = this;
let headerLabel = $(column.header()).text();
@@ -2316,20 +2269,53 @@ define([
let tablePrimaryElement = moduleElement.find('.' + config.sigTablePrimaryClass);
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
// add signature toggle ---------------------------------------------------------------------------------------
moduleElement.find('.' + config.moduleHeadlineIconAddClass).on('click', function(e){
let button = $(this);
let toolsElement = moduleElement.find('.' + config.tableToolsActionClass);
button.toggleClass('active');
// set toggle animation
if(toolsElement.is(':visible')){
toolsElement.velocity('stop').velocity('reverse');
}else{
toolsElement.velocity('stop').velocity({
opacity: 1,
height: '75px'
},{
duration: 150,
display: 'block',
visibility: 'visible'
});
}
});
// signature reader dialog ------------------------------------------------------------------------------------
moduleElement.find('.' + config.moduleHeadlineIconReaderClass).on('click', function(e) {
moduleElement.showSignatureReaderDialog(systemData);
});
// "lazy update" toggle ---------------------------------------------------------------------------------------
moduleElement.find('.' + config.moduleHeadlineIconLazyClass).on('click', function(e) {
let button = $(this);
button.toggleClass('active');
});
// set multi row select ---------------------------------------------------------------------------------------
tablePrimaryElement.on('click', 'tr', {moduleElement: moduleElement}, function(e){
tablePrimaryElement.on('click', 'tr', {tableApi: signatureTableApi}, function(e){
if(e.ctrlKey) {
$(this).toggleClass('selected');
// check delete button
checkDeleteSignaturesButton(e.data.moduleElement);
checkDeleteSignaturesButton(e.data.tableApi);
}
});
// draw event for signature table -----------------------------------------------------------------------------
signatureTableApi.on('draw.dt', {moduleElement: moduleElement}, function(e, settings){
signatureTableApi.on('draw.dt', function(e, settings){
// check delete button
checkDeleteSignaturesButton(e.data.moduleElement);
let tableApi = $(this).dataTable().api();
checkDeleteSignaturesButton(tableApi);
});
// destroy dataTables event -----------------------------------------------------------------------------------
@@ -2344,7 +2330,7 @@ define([
moduleElement.on('pf:updateSystemSignatureModuleByClipboard', function(e, clipboard){
// check "lazy update" toggle button
let signatureOptions = {
deleteOld: moduleElement.find('.' + config.sigTableLazyToggleButtonClass).is(':checked') ? 1 : 0
deleteOld: moduleElement.find('.' + config.moduleHeadlineIconLazyClass).hasClass('active') ? 1 : 0
};
$(this).updateSignatureTableByClipboard(systemData, clipboard, signatureOptions);
@@ -2379,10 +2365,27 @@ define([
}),
$('<h5>', {
text: 'Signatures'
})
}),
getHeadlineToolbar()
)
);
// scanned signatures progress bar ----------------------------------------------------------------------------
requirejs(['text!templates/form/progress.html', 'mustache'], (template, Mustache) => {
let data = {
label: true,
wrapperClass: config.signatureScannedProgressBarClass,
class: ['progress-bar-success'].join(' '),
percent: 0
};
let content = Mustache.render(template, data);
moduleElement.find('.' + config.moduleHeadClass).append(content);
});
moduleElement.data('mapId', mapId);
moduleElement.data('systemId', systemData.id);
@@ -2392,7 +2395,7 @@ define([
initSignatureDataTable(systemData);
// draw "new signature" add table
drawSignatureTableToolbar(moduleElement, mapId, systemData);
drawSignatureTableNew(moduleElement, mapId, systemData);
// draw signature table
drawSignatureTable(moduleElement, mapId, systemData);

4
public/css/v1.4.1/pathfinder.css
View File

File diff suppressed because one or more lines are too long

2
public/css/v1.4.1/pathfinder.css.map
View File

File diff suppressed because one or more lines are too long

4
public/js/v1.4.1/app/logging.js
View File

@@ -277,7 +277,7 @@ define([
// ------------------------------------------------------------------------------
// add dataTable buttons (extension)
let buttons = new $.fn.dataTable.Buttons( logDataTable, {
let buttons = new $.fn.dataTable.Buttons(logDataTable, {
buttons: [
{
extend: 'copy',
@@ -289,7 +289,7 @@ define([
text: '<i class="fas fa-fw fa-download"></i> csv'
}
]
} );
});
logDataTable.buttons().container().appendTo( $(this).find('.' + config.tableToolsClass));
});

301
public/js/v1.4.1/app/ui/system_signature.js
View File

@@ -6,11 +6,11 @@ define([
'jquery',
'app/init',
'app/util',
'app/render',
'mustache',
'bootbox',
'app/map/map',
'app/map/util'
], function($, Init, Util, Render, bootbox, Map, MapUtil) {
], function($, Init, Util, Mustache, bootbox, Map, MapUtil) {
'use strict';
let config = {
@@ -25,15 +25,19 @@ define([
// system signature module
moduleTypeClass: 'pf-signature-table-module', // module wrapper
// headline toolbar
moduleHeadlineIconClass: 'pf-module-icon-button', // class for toolbar icons in the head
moduleHeadlineIconAddClass: 'pf-module-icon-button-add', // class for "add signature" icon
moduleHeadlineIconReaderClass: 'pf-module-icon-button-reader', // class for "signature reader" icon
moduleHeadlineIconLazyClass: 'pf-module-icon-button-lazy', // class for "lazy delete" toggle icon
// tables
tableToolsClass: 'pf-table-tools', // class for table toolbar
tableToolsActionClass: 'pf-table-tools-action', // class for table toolbar action
// signature progress bar
signatureScannedProgressBarClass: 'pf-system-progress-scanned', // class for signature progress bar
// toolbar
sigTableLazyToggleButtonClass: 'pf-sig-table-lazy-button', // class for "lazy update" toggle button
// table toolbar
sigTableClearButtonClass: 'pf-sig-table-clear-button', // class for "clear" signatures button
// signature table
@@ -113,6 +117,45 @@ define([
let signatureGroupsLabels = Util.getSignatureGroupInfo('label');
let signatureGroupsNames = Util.getSignatureGroupInfo('name');
/**
* get module toolbar element
* @returns {jQuery}
*/
let getHeadlineToolbar = () => {
let headlineToolbar = $('<h5>', {
class: 'pull-right'
}).append(
$('<span>', {
class: 'progress-label-right',
text: '0%'
}),
$('<i>', {
class: ['fas', 'fa-fw', 'fa-plus',
config.moduleHeadlineIconClass,
config.moduleHeadlineIconAddClass].join(' '),
title: 'add'
}).attr('data-toggle', 'tooltip'),
$('<i>', {
class: ['fas', 'fa-fw', 'fa-paste',
config.moduleHeadlineIconClass,
config.moduleHeadlineIconReaderClass].join(' '),
title: 'signature reader'
}).attr('data-toggle', 'tooltip'),
$('<i>', {
class: ['fas', 'fa-fw', 'fa-exchange-alt',
config.moduleHeadlineIconClass,
config.moduleHeadlineIconLazyClass].join(' '),
title: 'lazy \'delete\' signatures'
}).attr('data-toggle', 'tooltip')
);
headlineToolbar.find('[data-toggle="tooltip"]').tooltip({
container: 'body'
});
return headlineToolbar;
};
/**
* check whether a dataTable API instance exists in the global cache
* args: 1. mapId, 2. systemId, 3, tableType (primary/secondary) string
@@ -457,7 +500,7 @@ define([
// get progress bar
let progressBarWrapper = moduleElement.find('.' + config.signatureScannedProgressBarClass);
let progressBar = $(progressBarWrapper).find('.progress-bar');
let progressBarLabel = $(progressBarWrapper).find('.progress-label-right');
let progressBarLabel = moduleElement.find('.progress-label-right');
let tableData = getTableData(signatureTableApi);
@@ -937,16 +980,13 @@ define([
* check the "delete signature" button. show/hide the button if a signature is selected
* @param moduleElement
*/
let checkDeleteSignaturesButton = moduleElement => {
moduleElement = $(moduleElement);
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
let selectedRows = getSelectedRows(signatureTableApi);
let checkDeleteSignaturesButton = tableApi => {
let selectedRows = getSelectedRows(tableApi);
let selectedRowCount = selectedRows.data().length;
let clearButton = moduleElement.find('.' + config.sigTableClearButtonClass);
let clearButton = tableApi.button('tableTools', 'delete:name').node();
if(selectedRowCount > 0){
let allRows = getRows(signatureTableApi);
let allRows = getRows(tableApi);
let rowCount = allRows.data().length;
let badgeText = selectedRowCount;
@@ -983,115 +1023,7 @@ define([
* @param mapId
* @param systemData
*/
let drawSignatureTableToolbar = (moduleElement, mapId, systemData) => {
// add toolbar buttons for table ------------------------------------------------------------------------------
let tableToolbar = $('<div>', {
class: config.tableToolsClass
}).append(
getLabeledButton({
type: 'primary',
label: 'add',
icon: 'fa-plus',
onClick: function(e){
// show "add sig" div
let toolsElement = $(e.target).parents('.' + config.moduleClass).find('.' + config.tableToolsActionClass);
// set toggle animation
if(toolsElement.is(':visible')){
toolsElement.velocity('stop').velocity('reverse');
}else{
toolsElement.velocity('stop').velocity({
opacity: 1,
height: '75px'
},{
duration: 150,
display: 'block',
visibility: 'visible'
});
}
}
})
).append(
getLabeledButton({
type: 'primary',
label: 'signature reader',
icon: 'fa-paste',
onClick: function(){
moduleElement.showSignatureReaderDialog(systemData);
}
})
).append(
getLabeledButton({
type: 'default',
label: 'select all',
icon: 'fa-check-square',
onClick: function(){
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
let allRows = getRows(signatureTableApi);
let selectedRows = getSelectedRows(signatureTableApi);
let allRowElements = allRows.nodes().to$();
if(allRows.data().length === selectedRows.data().length){
allRowElements.removeClass('selected');
}else{
allRowElements.addClass('selected');
}
// check delete button
checkDeleteSignaturesButton(moduleElement);
}
})
).append(
$('<input>', {
type: 'checkbox',
class: [config.sigTableLazyToggleButtonClass, 'btn-labeled'].join(' '),
value: 1,
}).attr('data-toggle', 'toggle')
).append(
getLabeledButton({
type: 'danger',
classes: [config.sigTableClearButtonClass, 'pull-right'],
label: 'delete',
icon: 'fa-times',
badge: {
label: '0'
},
onClick: function(){
// delete all rows
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
let selectedRows = getSelectedRows(signatureTableApi);
bootbox.confirm('Delete ' + selectedRows.data().length + ' signature?', function(result) {
if(result){
deleteSignatures(signatureTableApi, selectedRows);
}
});
}
})
);
moduleElement.append(tableToolbar);
// "lazy update" toggle button --------------------------------------------------------------------------------
let lazyToggleCheckbox = moduleElement.find('.' + config.sigTableLazyToggleButtonClass).bootstrapToggle({
size: 'small' ,
on: '<i class="fas fa-fw fa-exchange-alt"></i>&nbsp;&nbsp;lazy&nbsp;delete',
off: '<i class="fas fa-fw fa-paste"></i>&nbsp;&nbsp;lazy&nbsp;update',
onstyle: 'warning' ,
offstyle: 'default' ,
width: 110
});
let lazyToggleButton = lazyToggleCheckbox.parent();
lazyToggleButton.find('.toggle-on').attr('title', 'lazy \'update\' and \'delete\' old<br>from clipboard |ctrl&nbsp;+&nbsp;v|');
lazyToggleButton.find('.toggle-off').attr('title', 'lazy \'update\' signatures<br>from clipboard |ctrl&nbsp;+&nbsp;v|');
lazyToggleButton.initTooltips({
container: 'body',
html: true
});
let drawSignatureTableNew = (moduleElement, mapId, systemData) => {
// add toolbar action for table -------------------------------------------------------------------------------
let tableToolbarAction = $('<div>', {
class: config.tableToolsActionClass
@@ -1104,7 +1036,7 @@ define([
tableToolbarAction.append(table);
tableToolbar.after(tableToolbarAction);
moduleElement.find('.' + config.moduleHeadClass).after(tableToolbarAction);
let signatureData = formatSignatureData(systemData, [emptySignatureData], emptySignatureOptions);
let signatureTable = table.dataTable( {
@@ -1119,24 +1051,6 @@ define([
setDataTableInstance(mapId, systemData.id, 'secondary', signatureTableApi);
table.makeEditable(signatureTableApi, systemData);
// scanned signatures progress bar ----------------------------------------------------------------------------
let moduleConfig = {
name: 'form/progress',
position: tableToolbar,
link: 'before'
};
let moduleData = {
label: true,
wrapperClass: config.signatureScannedProgressBarClass,
class: ['progress-bar-success'].join(' '),
percent: 0,
headline: 'System scanned',
headlineRight: ' ' // will be updated by js
};
Render.showModule(moduleConfig, moduleData);
};
/**
@@ -1999,6 +1913,46 @@ define([
moduleElement.append(table);
let dataTableOptions = {
dom: '<"row"<"col-xs-3"l><"col-xs-5"B><"col-xs-4"f>>' +
'<"row"<"col-xs-12"tr>>' +
'<"row"<"col-xs-5"i><"col-xs-7"p>>',
buttons: {
name: 'tableTools',
buttons: [
{
name: 'selectAll',
className: 'btn btn-sm btn-default',
text: '<i class="fa fa-fw fa-check-square"></i>select all',
action: function(e, tableApi, node, conf){
let allRows = getRows(tableApi);
let selectedRows = getSelectedRows(tableApi);
let allRowElements = allRows.nodes().to$();
if(allRows.data().length === selectedRows.data().length){
allRowElements.removeClass('selected');
}else{
allRowElements.addClass('selected');
}
// check delete button
checkDeleteSignaturesButton(tableApi);
}
},
{
name: 'delete',
className: 'btn btn-sm btn-danger pull-right ' + config.sigTableClearButtonClass,
text: '<i class="fa fa-fw fa-times"></i>delete<span class="badge">0</span>',
action: function(e, tableApi, node, conf){
let selectedRows = getSelectedRows(tableApi);
bootbox.confirm('Delete ' + selectedRows.data().length + ' signature?', function(result) {
if(result){
deleteSignatures(tableApi, selectedRows);
}
});
}
}
]
},
drawCallback: function(settings){
this.api().columns(filterColumnIndexes).every(function(){
let column = this;
@@ -2010,7 +1964,6 @@ define([
});
},
initComplete: function (settings, json){
this.api().columns(filterColumnIndexes).every(function(){
let column = this;
let headerLabel = $(column.header()).text();
@@ -2316,20 +2269,53 @@ define([
let tablePrimaryElement = moduleElement.find('.' + config.sigTablePrimaryClass);
let signatureTableApi = getDataTableInstanceByModuleElement(moduleElement, 'primary');
// add signature toggle ---------------------------------------------------------------------------------------
moduleElement.find('.' + config.moduleHeadlineIconAddClass).on('click', function(e){
let button = $(this);
let toolsElement = moduleElement.find('.' + config.tableToolsActionClass);
button.toggleClass('active');
// set toggle animation
if(toolsElement.is(':visible')){
toolsElement.velocity('stop').velocity('reverse');
}else{
toolsElement.velocity('stop').velocity({
opacity: 1,
height: '75px'
},{
duration: 150,
display: 'block',
visibility: 'visible'
});
}
});
// signature reader dialog ------------------------------------------------------------------------------------
moduleElement.find('.' + config.moduleHeadlineIconReaderClass).on('click', function(e) {
moduleElement.showSignatureReaderDialog(systemData);
});
// "lazy update" toggle ---------------------------------------------------------------------------------------
moduleElement.find('.' + config.moduleHeadlineIconLazyClass).on('click', function(e) {
let button = $(this);
button.toggleClass('active');
});
// set multi row select ---------------------------------------------------------------------------------------
tablePrimaryElement.on('click', 'tr', {moduleElement: moduleElement}, function(e){
tablePrimaryElement.on('click', 'tr', {tableApi: signatureTableApi}, function(e){
if(e.ctrlKey) {
$(this).toggleClass('selected');
// check delete button
checkDeleteSignaturesButton(e.data.moduleElement);
checkDeleteSignaturesButton(e.data.tableApi);
}
});
// draw event for signature table -----------------------------------------------------------------------------
signatureTableApi.on('draw.dt', {moduleElement: moduleElement}, function(e, settings){
signatureTableApi.on('draw.dt', function(e, settings){
// check delete button
checkDeleteSignaturesButton(e.data.moduleElement);
let tableApi = $(this).dataTable().api();
checkDeleteSignaturesButton(tableApi);
});
// destroy dataTables event -----------------------------------------------------------------------------------
@@ -2344,7 +2330,7 @@ define([
moduleElement.on('pf:updateSystemSignatureModuleByClipboard', function(e, clipboard){
// check "lazy update" toggle button
let signatureOptions = {
deleteOld: moduleElement.find('.' + config.sigTableLazyToggleButtonClass).is(':checked') ? 1 : 0
deleteOld: moduleElement.find('.' + config.moduleHeadlineIconLazyClass).hasClass('active') ? 1 : 0
};
$(this).updateSignatureTableByClipboard(systemData, clipboard, signatureOptions);
@@ -2379,10 +2365,27 @@ define([
}),
$('<h5>', {
text: 'Signatures'
})
}),
getHeadlineToolbar()
)
);
// scanned signatures progress bar ----------------------------------------------------------------------------
requirejs(['text!templates/form/progress.html', 'mustache'], (template, Mustache) => {
let data = {
label: true,
wrapperClass: config.signatureScannedProgressBarClass,
class: ['progress-bar-success'].join(' '),
percent: 0
};
let content = Mustache.render(template, data);
moduleElement.find('.' + config.moduleHeadClass).append(content);
});
moduleElement.data('mapId', mapId);
moduleElement.data('systemId', systemData.id);
@@ -2392,7 +2395,7 @@ define([
initSignatureDataTable(systemData);
// draw "new signature" add table
drawSignatureTableToolbar(moduleElement, mapId, systemData);
drawSignatureTableNew(moduleElement, mapId, systemData);
// draw signature table
drawSignatureTable(moduleElement, mapId, systemData);

11
public/templates/form/progress.html
View File

@@ -1,14 +1,5 @@
<div class="{{wrapperClass}}">
{{#headlineRight}}
<small class="pull-right progress-label-right">{{headlineRight}}</small>
{{/headlineRight}}
{{#headline}}
<small>{{headline}}</small>
{{/headline}}
<div class="progress progress-micro">
<div class="progress-bar {{class}}" role="progressbar" aria-valuenow="{{percent}}" aria-valuemin="0" aria-valuemax="100" style="will-change: width; width: {{percent}}%">
</div>
<div class="progress-bar {{class}}" role="progressbar" aria-valuenow="{{percent}}" aria-valuemin="0" aria-valuemax="100" style="will-change: width; width: {{percent}}%"></div>
</div>
</div>

9
sass/_main.scss
View File

@@ -599,8 +599,8 @@ input[type="email"]{
margin-bottom: 20px;
overflow: hidden;
height: 18px;
background: $gray-lighter;
@include box-shadow( 0 1px 0 transparent, 0 0 0 1px lighten( $gray-light, 29%) inset);
background: $gray-light;
@include box-shadow( 0 1px 0 transparent, 0 0 0 1px $gray-light inset);
@include border-radius($progressbar-radius);
}
@@ -613,10 +613,7 @@ input[type="email"]{
text-align: center;
background-color: $blue;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(red($black), green($black), blue($black), 0.25);
//background-image:url("#{$base-url}/overlay-pattern.png");
@include box-shadow( inset 0 -1px 0 rgba(red($black), green($black), blue($black), 0.15));
@include transition(width 1s ease-in-out) ;
@include transition(width 1s ease-in-out, background-color 1s ease-in-out) ;
}
.progress-striped .progress-bar {

2
sass/bootstrap/_badges.scss
View File

@@ -28,7 +28,7 @@
// Quick fix for badges in buttons
.btn & {
position: relative;
top: 1px;
//top: 1px; // sig table "delete" button is not "inline" with badge if 1px is set...
}
.btn-xs & {
top: 0;

22
sass/layout/_main.scss
View File

@@ -209,6 +209,28 @@ select:active, select:hover {
}
// global dataTable styles ========================================================================
.dataTables_wrapper{
.dt-buttons{
.dt-button.btn-sm{
padding: 3px 5px 1px; // overwrite default
margin-bottom: 8px;
&:not(:last-child){
margin-right: 5px;
}
.fa{
margin-right: 5px;
}
.badge{
margin-left: 8px;
padding: 2px 7px; // overwrite default...
}
}
}
}
.dataTable{
th{
&.pf-table-image-cell,

17
sass/layout/_system-info.scss
View File

@@ -34,6 +34,23 @@
// signature table module ==================================================
.pf-signature-table-module{
.progress-label-right{
margin-right: 20px;
vertical-align: middle;
font-size: 11px;
}
// progress bar
.pf-system-progress-scanned{
display: inline-block;
margin-left: 20px;
width: calc(100% - 225px);
.progress{
margin-bottom: 3px; // overwrite default
}
}
// delete signature button
.pf-sig-table-clear-button{
will-change: opacity, transform;