2
0
mirror of https://github.com/ACSPRI/queXS synced 2024-04-02 12:12:16 +00:00

!!! NEW ADMIN PANEL layout + required js and css libraries

modified functions/functions.xhtml.php file prepared for upcoming admin pages changes
This commit is contained in:
Alex
2015-02-12 00:00:05 +03:00
parent bdda1af5f3
commit dadad5ed63
28 changed files with 9338 additions and 101 deletions

View File

@@ -0,0 +1,36 @@
/**
* Custom styles for BDT - Bootstrap Data Tables
**/
.bdt thead th {
cursor: pointer;
}
/*
.bdt .sort-icon {
width: 10px;
display: inline-block;
padding-left: 5px;
} */
#table-footer {
margin-bottom: 15px;
margin-top: 10px;
min-height:35px;
}
#table-footer a, #table-footer button {
outline: none;
}
#table-footer .form-horizontal .control-label {
text-align: left;
margin: 0 15px;
}
#table-footer .pagination {
margin: 0 15px;
}
#table-footer .pagination li:not(.active) {
cursor: pointer;
}

View File

@@ -0,0 +1 @@
.bdt thead th{cursor:pointer}.bdt .sort-icon{width:10px;display:inline-block;padding-left:5px}#table-footer{margin-bottom:15px}#table-footer a,#table-footer button{outline:0}#table-footer .form-horizontal .control-label{text-align:left;margin:0 15px}#table-footer .pagination{margin:0 15px}#table-footer .pagination li:not(.active){cursor:pointer}

View File

@@ -0,0 +1,447 @@
/**
* @license MIT
* @license http://opensource.org/licenses/MIT Massachusetts Institute of Technology
* @copyright 2014 Patric Gutersohn
* @author Patric Gutersohn
* @example index.html BDT in action.
* @link http://bdt.gutersohn.biz Documentation
* @version 1.0.0
*
* @summary BDT - Bootstrap Data Tables
* @description sorting, paginating and search for bootstrap tables
*/
(function ($) {
"use strict";
/**
* @type {number}
*/
var actualPage = 1;
/**
* @type {number}
*/
var pageCount = 0;
/**
* @type {number}
*/
var pageRowCount = 0;
/**
* @type {string}
*/
var pages = 'Тоtal pages';
/**
* @type {object}
*/
var obj = null;
/**
* @type {boolean}
*/
var activeSearch = false;
/**
* @type {string}
*/
var arrowUp = ' ';
/**
* @type {string}
*/
var arrowDown = ' ';
$.fn.bdt = function (options, callback) {
var settings = $.extend({
pageRowCount: 50,
arrowDown: 'fa-arrow-down text-primary fa-lg',
arrowUp: 'fa-arrow-up text-primary fa-lg'
}, options);
/**
* @type {object}
*/
var tableBody = null;
return this.each(function () {
obj = $(this).addClass('bdt');
tableBody = obj.find("tbody");
pageRowCount = settings.pageRowCount;
arrowDown = settings.arrowDown;
arrowUp = settings.arrowUp;
/**
* search input field
*/
obj.before(
$('<form/>')
.addClass('float-left')
.attr('role', 'form')
.attr('style', 'width:30%;')
.append(
$('<div/>')
.addClass('form-group')
.append(
$('<input/>')
.addClass('form-control')
.attr('id', 'search')
.attr('placeholder', 'Type to Search here ...' )
)
)
);
/**
* select field for changing row per page
*/
obj.after(
$('<div/>')
.attr('id', 'table-footer')
.append(
$('<div/>')
.addClass('pull-left')
.append(
$('<form/>')
.addClass('form-horizontal')
.attr('id', 'page-rows-form')
.append($('<label/>')
.addClass('pull-left control-label')
.text('Rows per Page:')
)
.append(
$('<div/>')
.addClass('pull-left')
.append(
$('<select/>')
.addClass('form-control')
.append(
$('<option>', {
value: 25,
text: 25
})
)
.append(
$('<option>', {
value: 50,
text: 50,
selected: 'selected'
})
)
.append(
$('<option>', {
value: 100,
text: 100
})
)
.append(
$('<option>', {
value: 200,
text: 200
})
)
.append(
$('<option>', {
value: 500,
text: 500
})
)
)
)
)
)
);
if (tableBody.children('tr').length > pageRowCount) {
setPageCount(tableBody);
addPages();
paginate(tableBody, actualPage);
}
searchTable(tableBody);
sortColumn(obj, tableBody);
$('body').on('click', '.pagination li', function (event) {
var listItem;
if ($(event.target).is("a")) {
listItem = $(event.target).parent();
} else {
listItem = $(event.target).parent().parent();
}
var page = listItem.data('page');
if (!listItem.hasClass("disabled") && !listItem.hasClass("active")) {
paginate(tableBody, page);
}
});
$('#page-rows-form').on('change', function () {
var options = $(this).find('select');
pageRowCount = options.val();
setPageCount(tableBody);
addPages();
paginate(tableBody, 1);
});
});
/**
* the main part of this function is out of this thread http://stackoverflow.com/questions/3160277/jquery-table-sort
* @author James Padolsey http://james.padolsey.com
* @link http://jsfiddle.net/spetnik/gFzCk/1953/
* @param obj
*/
function sortColumn(obj) {
var table = obj;
var oldIndex = 0;
obj
.find('thead th')
.append(
$('<span class="pull-right"/>')
// .addClass('')
.append(
$('<i class=" "/>')
.addClass('fa sort-icon')
)
)
//.wrapInner('<p class="sort-element "/>')
.wrapInner('<div class=" "/>')
.each(function () {
var th = $(this);
var thIndex = th.index();
var inverse = false;
var addOrRemove = true;
th.click(function () {
if($(this).find('.sort-icon').hasClass(arrowDown)) {
$(this)
.find('.sort-icon')
.removeClass( arrowDown )
.addClass(arrowUp);
} else {
$(this)
.find('.sort-icon')
.removeClass( arrowUp )
.addClass(arrowDown);
}
if(oldIndex != thIndex) {
obj.find('.sort-icon').removeClass(arrowDown);
obj.find('.sort-icon').removeClass(arrowUp);
$(this)
.find('.sort-icon')
.toggleClass( arrowDown, addOrRemove );
}
table.find('td').filter(function () {
return $(this).index() === thIndex;
}).sortElements(function (a, b) {
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function () {
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
oldIndex = thIndex;
});
});
}
/**
* create li elements for pages
*/
function addPages() {
$('#table-nav').remove();
pages = $('<ul/>');
$.each(new Array(pageCount), function (index) {
var additonalClass = '';
var page = $();
if ((index + 1) == 1) {
additonalClass = 'active';
}
pages
.append($('<li/>')
.addClass(additonalClass)
.data('page', (index + 1))
.append(
$('<a/>')
.text(index + 1)
)
);
});
/**
* pagination, with pages and previous and next link
*/
$('#table-footer')
.addClass('form-group')
.append(
$('<nav/>')
.addClass('pull-right')
.attr('id', 'table-nav')
.append(
pages
.addClass('pagination pull-right')
.prepend(
$('<li/>')
.addClass('disabled')
.data('page', 'previous')
.append(
$('<a href="#" />')
.append(
$('<span/>')
.attr('aria-hidden', 'true')
.html('&laquo;')
)
.append(
$('<span/>')
.addClass('sr-only')
.text('Previous')
)
)
)
.append(
$('<li/>')
.addClass('disabled')
.data('page', 'next')
.append(
$('<a href="#" />')
.append(
$('<span/>')
.attr('aria-hidden', 'true')
.html('&raquo;')
)
.append(
$('<span/>')
.addClass('sr-only')
.text('Next')
)
)
)
)
);
}
/**
*
* @param tableBody
*/
function searchTable(tableBody) {
$("#search").on("keyup", function () {
$.each(tableBody.find("tr"), function () {
var text = $(this)
.text()
.replace(/ /g, '')
.replace(/(\r\n|\n|\r)/gm, "");
var searchTerm = $("#search").val();
if (text.toLowerCase().indexOf(searchTerm.toLowerCase()) == -1) {
$(this)
.hide()
.removeClass('search-item');
} else {
$(this)
.show()
.addClass('search-item');
}
if (searchTerm != '') {
activeSearch = true;
} else {
activeSearch = false;
}
});
setPageCount(tableBody);
addPages();
paginate(tableBody, 1);
});
}
/**
*
* @param tableBody
*/
function setPageCount(tableBody) {
if (activeSearch) {
pageCount = Math.round(tableBody.children('.search-item').length / pageRowCount);
} else {
pageCount = Math.round(tableBody.children('tr').length / pageRowCount);
}
if (pageCount == 0) {
pageCount = 1;
}
}
/**
*
* @param tableBody
* @param page
*/
function paginate(tableBody, page) {
if (page == 'next') {
page = actualPage + 1;
} else if (page == 'previous') {
page = actualPage - 1;
}
actualPage = page;
var rows = (activeSearch ? tableBody.find(".search-item") : tableBody.find("tr"));
var endRow = (pageRowCount * page);
var startRow = (endRow - pageRowCount);
var pagination = $('.pagination');
rows
.hide();
rows
.slice(startRow, endRow)
.show();
pagination
.find('li')
.removeClass('active disabled');
pagination
.find('li:eq(' + page + ')')
.addClass('active');
if (page == 1) {
pagination
.find('li:first')
.addClass('disabled');
} else if (page == pageCount) {
pagination
.find('li:last')
.addClass('disabled');
}
}
}
}(jQuery));

View File

@@ -0,0 +1,13 @@
/**
* @license MIT
* @license http://opensource.org/licenses/MIT Massachusetts Institute of Technology
* @copyright 2014 Patric Gutersohn
* @author Patric Gutersohn
* @example index.html BDT in action.
* @link http://bdt.gutersohn.biz Documentation
* @version 1.0.0
*
* @summary BDT - Bootstrap Data Tables
* @description sorting, paginating and search for bootstrap tables
*/
(function(e){"use strict";var t=1;var n=0;var r=0;var i="";var s=null;var o=false;var u="";var a="";e.fn.bdt=function(f,l){function p(t){var n=t;var r=0;t.find("thead th").wrapInner('<span class="sort-element"/>').append(e("<span/>").addClass("sort-icon fa")).each(function(){var i=e(this);var s=i.index();var o=false;var f=true;i.click(function(){if(e(this).find(".sort-icon").hasClass(a)){e(this).find(".sort-icon").removeClass(a).addClass(u)}else{e(this).find(".sort-icon").removeClass(u).addClass(a)}if(r!=s){t.find(".sort-icon").removeClass(a);t.find(".sort-icon").removeClass(u);e(this).find(".sort-icon").toggleClass(a,f)}n.find("td").filter(function(){return e(this).index()===s}).sortElements(function(t,n){return e.text([t])>e.text([n])?o?-1:1:o?1:-1},function(){return this.parentNode});o=!o;r=s})})}function d(){e("#table-nav").remove();i=e("<ul/>");e.each(new Array(n),function(t){var n="";var r=e();if(t+1==1){n="active"}i.append(e("<li/>").addClass(n).data("page",t+1).append(e("<a/>").text(t+1)))});e("#table-footer").addClass("row").append(e("<nav/>").addClass("pull-right").attr("id","table-nav").append(i.addClass("pagination pull-right").prepend(e("<li/>").addClass("disabled").data("page","previous").append(e('<a href="#" />').append(e("<span/>").attr("aria-hidden","true").html("&laquo;")).append(e("<span/>").addClass("sr-only").text("Previous")))).append(e("<li/>").addClass("disabled").data("page","next").append(e('<a href="#" />').append(e("<span/>").attr("aria-hidden","true").html("&raquo;")).append(e("<span/>").addClass("sr-only").text("Next"))))))}function v(t){e("#search").on("keyup",function(){e.each(t.find("tr"),function(){var t=e(this).text().replace(/ /g,"").replace(/(\r\n|\n|\r)/gm,"");var n=e("#search").val();if(t.toLowerCase().indexOf(n.toLowerCase())==-1){e(this).hide().removeClass("search-item")}else{e(this).show().addClass("search-item")}if(n!=""){o=true}else{o=false}});m(t);d();g(t,1)})}function m(e){if(o){n=Math.round(e.children(".search-item").length/r)}else{n=Math.round(e.children("tr").length/r)}if(n==0){n=1}}function g(i,s){if(s=="next"){s=t+1}else if(s=="previous"){s=t-1}t=s;var u=o?i.find(".search-item"):i.find("tr");var a=r*s;var f=a-r;var l=e(".pagination");u.hide();u.slice(f,a).show();l.find("li").removeClass("active disabled");l.find("li:eq("+s+")").addClass("active");if(s==1){l.find("li:first").addClass("disabled")}else if(s==n){l.find("li:last").addClass("disabled")}}var c=e.extend({pageRowCount:10,arrowDown:"fa-angle-down",arrowUp:"fa-angle-up"},f);var h=null;return this.each(function(){s=e(this).addClass("bdt");h=s.find("tbody");r=c.pageRowCount;a=c.arrowDown;u=c.arrowUp;s.before(e("<form/>").addClass("pull-right").attr("role","form").append(e("<div/>").addClass("form-group").append(e("<input/>").addClass("form-control").attr("id","search").attr("placeholder","Search..."))));s.after(e("<div/>").attr("id","table-footer").append(e("<div/>").addClass("pull-left").append(e("<form/>").addClass("form-horizontal").attr("id","page-rows-form").append(e("<label/>").addClass("pull-left control-label").text("Entries per Page:")).append(e("<div/>").addClass("pull-left").append(e("<select/>").addClass("form-control").append(e("<option>",{value:5,text:5})).append(e("<option>",{value:10,text:10,selected:"selected"})).append(e("<option>",{value:15,text:15})).append(e("<option>",{value:20,text:20})).append(e("<option>",{value:25,text:25})))))));if(h.children("tr").length>r){m(h);d();g(h,t)}v(h);p(s,h);e("body").on("click",".pagination li",function(t){var n;if(e(t.target).is("a")){n=e(t.target).parent()}else{n=e(t.target).parent().parent()}var r=n.data("page");if(!n.hasClass("disabled")&&!n.hasClass("active")){g(h,r)}});e("#page-rows-form").on("change",function(){var t=e(this).find("select");r=t.val();m(h);d();g(h,1)})})}})(jQuery)

View File

@@ -0,0 +1,69 @@
/**
* jQuery.fn.sortElements
* --------------
* @author James Padolsey (http://james.padolsey.com)
* @version 0.11
* @updated 18-MAR-2010
* --------------
* @param Function comparator:
* Exactly the same behaviour as [1,2,3].sort(comparator)
*
* @param Function getSortable
* A function that should return the element that is
* to be sorted. The comparator will run on the
* current collection, but you may want the actual
* resulting sort to occur on a parent or another
* associated element.
*
* E.g. $('td').sortElements(comparator, function(){
* return this.parentNode;
* })
*
* The <td>'s parent (<tr>) will be sorted instead
* of the <td> itself.
*/
jQuery.fn.sortElements = (function(){
var sort = [].sort;
return function(comparator, getSortable) {
getSortable = getSortable || function(){return this;};
var placements = this.map(function(){
var sortElement = getSortable.call(this),
parentNode = sortElement.parentNode,
// Since the element itself will change position, we have
// to have some way of storing it's original position in
// the DOM. The easiest way is to have a 'flag' node:
nextSibling = parentNode.insertBefore(
document.createTextNode(''),
sortElement.nextSibling
);
return function() {
if (parentNode === this) {
throw new Error(
"You can't sort elements if any one is a descendant of another."
);
}
// Insert before flag:
parentNode.insertBefore(this, nextSibling);
// Remove flag:
parentNode.removeChild(nextSibling);
};
});
return sort.call(this, comparator).each(function(i){
placements[i].call(getSortable.call(this));
});
};
})();