[New] Added showing of details of an element
This commit is contained in:
parent
454b36d659
commit
c527a0e964
|
@ -6,7 +6,7 @@
|
||||||
* Basic
|
* Basic
|
||||||
*/
|
*/
|
||||||
html, body {
|
html, body {
|
||||||
background: #f5f5f5;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
@ -26,7 +26,7 @@ body {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #f5f5f5;
|
background-color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer .information {
|
.footer .information {
|
||||||
|
@ -46,3 +46,7 @@ body {
|
||||||
-ms-filter: blur(2px);
|
-ms-filter: blur(2px);
|
||||||
filter: blur(2px);
|
filter: blur(2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.row-action {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
|
@ -7,6 +7,7 @@
|
||||||
*/
|
*/
|
||||||
.nav {
|
.nav {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
border-bottom: solid #f5f5f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-logo {
|
.nav-logo {
|
||||||
|
|
|
@ -1,5 +0,0 @@
|
||||||
<html>
|
|
||||||
<body>
|
|
||||||
<h2>Hello World!</h2>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
|
@ -288,7 +288,7 @@ strolch.fn.dataTableDefaults = function () {
|
||||||
searchFieldId: null
|
searchFieldId: null
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
strolch.fn.initDataTable = function (queryData, columns) {
|
strolch.fn.initDataTable = function (queryData, columns, columnDefs) {
|
||||||
|
|
||||||
var table = $('#' + queryData.tableId);
|
var table = $('#' + queryData.tableId);
|
||||||
if ($.fn.dataTable.isDataTable(table)) {
|
if ($.fn.dataTable.isDataTable(table)) {
|
||||||
|
@ -299,6 +299,7 @@ strolch.fn.initDataTable = function (queryData, columns) {
|
||||||
// init table
|
// init table
|
||||||
table.dataTable({
|
table.dataTable({
|
||||||
columns: columns,
|
columns: columns,
|
||||||
|
columnDefs: columnDefs,
|
||||||
//lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'All']],
|
//lengthMenu: [[5, 10, 20, -1], [5, 10, 20, 'All']],
|
||||||
lengthMenu: [[10, 50, 100, -1], [10, 50, 100, 'All']],
|
lengthMenu: [[10, 50, 100, -1], [10, 50, 100, 'All']],
|
||||||
processing: true,
|
processing: true,
|
||||||
|
@ -331,6 +332,19 @@ strolch.fn.initDataTable = function (queryData, columns) {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
table.find('tbody').on('click', 'tr', function () {
|
||||||
|
var data = table.DataTable().row(this).data();
|
||||||
|
$(this).toggleClass('selected').toggleClass('table-active');
|
||||||
|
console.log('Selected ' + data['Id']);
|
||||||
|
});
|
||||||
|
table.find('tbody').on('click', 'tr span.row-action', function () {
|
||||||
|
var rowE = $(this).closest('tr');
|
||||||
|
var row = table.DataTable().row(rowE);
|
||||||
|
var data = row.data();
|
||||||
|
$('#jsonData').text(JSON.stringify(data, null, 2));
|
||||||
|
$('#modelElementDetailsModal').modal('show');
|
||||||
|
});
|
||||||
|
|
||||||
strolch.fn.initSearch(queryData);
|
strolch.fn.initSearch(queryData);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -363,34 +377,6 @@ strolch.fn.searchDataTable = function (queryData) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
|
||||||
* Part loading
|
|
||||||
*/
|
|
||||||
strolch.fn.loadParts = function (parts, domParent) {
|
|
||||||
|
|
||||||
var revision = '_=' + strolch.fn.revision();
|
|
||||||
|
|
||||||
$.each(strolch.const.partNames, function (index, value) {
|
|
||||||
|
|
||||||
var partName = value;
|
|
||||||
var urlHtml = 'parts/' + partName + '.html?' + revision;
|
|
||||||
var urlCss = 'css/parts/' + partName + '.css?' + revision;
|
|
||||||
|
|
||||||
var urlJs = 'js/parts/' + partName + '.js?' + revision;
|
|
||||||
|
|
||||||
// $('.content-loading, .loading-background').showLoading(true);
|
|
||||||
|
|
||||||
console.log('urlHtml: ' + urlHtml);
|
|
||||||
console.log('urlCss: ' + urlCss);
|
|
||||||
console.log('urlJs: ' + urlJs);
|
|
||||||
|
|
||||||
var script = document.createElement('script');
|
|
||||||
script.setAttribute('src', urlJs);
|
|
||||||
document.head.appendChild(script);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Utils
|
* Utils
|
||||||
*/
|
*/
|
||||||
|
@ -446,6 +432,28 @@ strolch.fn.logException = function (e) {
|
||||||
(console.error || console.log).call(console, e, e.stack || e);
|
(console.error || console.log).call(console, e, e.stack || e);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
strolch.fn.syntaxHighlightJson = function (json) {
|
||||||
|
if (typeof json != 'string') {
|
||||||
|
json = JSON.stringify(json, undefined, 2);
|
||||||
|
}
|
||||||
|
json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||||||
|
return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
|
||||||
|
var cls = 'number';
|
||||||
|
if (/^"/.test(match)) {
|
||||||
|
if (/:$/.test(match)) {
|
||||||
|
cls = 'key';
|
||||||
|
} else {
|
||||||
|
cls = 'string';
|
||||||
|
}
|
||||||
|
} else if (/true|false/.test(match)) {
|
||||||
|
cls = 'boolean';
|
||||||
|
} else if (/null/.test(match)) {
|
||||||
|
cls = 'null';
|
||||||
|
}
|
||||||
|
return '<span class="' + cls + '">' + match + '</span>';
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* hack for multiple modals over each other - until bootstrap fixes this
|
* hack for multiple modals over each other - until bootstrap fixes this
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -30,9 +30,6 @@ strolch.index.init = function () {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// multiple Modal hack
|
|
||||||
strolch.fn.multipleModalsHack();
|
|
||||||
|
|
||||||
// re-auth modal form handler
|
// re-auth modal form handler
|
||||||
strolch.fn.onModalShow('#reauthFormModal', strolch.fn.logout);
|
strolch.fn.onModalShow('#reauthFormModal', strolch.fn.logout);
|
||||||
strolch.fn.onModalFormSubmit('#reauthFormModal', '#reauthForm', function () {
|
strolch.fn.onModalFormSubmit('#reauthFormModal', '#reauthForm', function () {
|
||||||
|
@ -57,6 +54,12 @@ strolch.index.start = function () {
|
||||||
|
|
||||||
strolch.index.loadParts();
|
strolch.index.loadParts();
|
||||||
strolch.index.registerHandlers();
|
strolch.index.registerHandlers();
|
||||||
|
|
||||||
|
strolch.fn.translateI18n();
|
||||||
|
|
||||||
|
// multiple Modal hack
|
||||||
|
strolch.fn.multipleModalsHack();
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
strolch.index.registerHandlers = function () {
|
strolch.index.registerHandlers = function () {
|
||||||
|
|
|
@ -60,8 +60,18 @@ strolch.parts.model.prepareResourceTable = function () {
|
||||||
columns.push({title: 'Id', width: 50, data: 'Id'});
|
columns.push({title: 'Id', width: 50, data: 'Id'});
|
||||||
columns.push({title: 'Name', data: 'Name'});
|
columns.push({title: 'Name', data: 'Name'});
|
||||||
columns.push({title: 'Type', data: 'Type'});
|
columns.push({title: 'Type', data: 'Type'});
|
||||||
|
columns.push({title: '', data: null, orderable: false});
|
||||||
|
|
||||||
strolch.fn.initDataTable(data, columns);
|
var columnDefs = [
|
||||||
|
{
|
||||||
|
render: function (data, type, row) {
|
||||||
|
return '<span class="fa fa-th-list row-action" data-function="action" data-type="details" />';
|
||||||
|
},
|
||||||
|
targets: columns.length - 1
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
strolch.fn.initDataTable(data, columns, columnDefs);
|
||||||
};
|
};
|
||||||
|
|
||||||
strolch.parts.model.prepareOrderTable = function () {
|
strolch.parts.model.prepareOrderTable = function () {
|
||||||
|
@ -79,8 +89,18 @@ strolch.parts.model.prepareOrderTable = function () {
|
||||||
columns.push({title: 'State', data: 'State'});
|
columns.push({title: 'State', data: 'State'});
|
||||||
columns.push({title: 'Date', data: 'Date'});
|
columns.push({title: 'Date', data: 'Date'});
|
||||||
columns.push({title: 'Type', data: 'Type'});
|
columns.push({title: 'Type', data: 'Type'});
|
||||||
|
columns.push({title: '', data: null, orderable: false});
|
||||||
|
|
||||||
strolch.fn.initDataTable(data, columns);
|
var columnDefs = [
|
||||||
|
{
|
||||||
|
render: function (data, type, row) {
|
||||||
|
return '<span class="fa fa-th-list row-action" data-function="action" data-type="details" />';
|
||||||
|
},
|
||||||
|
targets: columns.length - 1
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
strolch.fn.initDataTable(data, columns, columnDefs);
|
||||||
};
|
};
|
||||||
|
|
||||||
strolch.parts.model.prepareActivityTable = function () {
|
strolch.parts.model.prepareActivityTable = function () {
|
||||||
|
@ -96,6 +116,16 @@ strolch.parts.model.prepareActivityTable = function () {
|
||||||
columns.push({title: 'Id', width: 50, data: 'Id'});
|
columns.push({title: 'Id', width: 50, data: 'Id'});
|
||||||
columns.push({title: 'Name', data: 'Name'});
|
columns.push({title: 'Name', data: 'Name'});
|
||||||
columns.push({title: 'Type', data: 'Type'});
|
columns.push({title: 'Type', data: 'Type'});
|
||||||
|
columns.push({title: '', data: null, orderable: false});
|
||||||
|
|
||||||
strolch.fn.initDataTable(data, columns);
|
var columnDefs = [
|
||||||
|
{
|
||||||
|
render: function (data, type, row) {
|
||||||
|
return '<span class="fa fa-th-list row-action" data-function="action" data-type="details" />';
|
||||||
|
},
|
||||||
|
targets: columns.length - 1
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
strolch.fn.initDataTable(data, columns, columnDefs);
|
||||||
};
|
};
|
||||||
|
|
|
@ -29,7 +29,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<table id="modelResourceTable" class="table table-striped table-bordered hover"
|
<table id="modelResourceTable" class="table table-hover"
|
||||||
cellspacing="0" width="100%">
|
cellspacing="0" width="100%">
|
||||||
|
|
||||||
<caption>The resources for the current user's realm</caption>
|
<caption>The resources for the current user's realm</caption>
|
||||||
|
@ -52,7 +52,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<table id="modelOrderTable" class="table table-striped table-bordered hover" cellspacing="0"
|
<table id="modelOrderTable" class="table table-hover" cellspacing="0"
|
||||||
width="100%">
|
width="100%">
|
||||||
|
|
||||||
<caption>The orders for the current user's realm</caption>
|
<caption>The orders for the current user's realm</caption>
|
||||||
|
@ -74,7 +74,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<table id="modelActivityTable" class="table table-striped table-bordered hover" cellspacing="0"
|
<table id="modelActivityTable" class="table table-hover" cellspacing="0"
|
||||||
width="100%">
|
width="100%">
|
||||||
|
|
||||||
<caption>The activities for the current user's realm</caption>
|
<caption>The activities for the current user's realm</caption>
|
||||||
|
@ -86,3 +86,27 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div id="modelElementDetailsModal" class="modal fade" tabindex="-1" role="dialog" data-dismiss="modal">
|
||||||
|
<div class="modal-dialog" role="form">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<button type="button" class="close" aria-label="Close" data-dismiss="modal">
|
||||||
|
<span aria-hidden="true">×</span> <span class="sr-only">Cancel</span>
|
||||||
|
</button>
|
||||||
|
<h4 class="modal-title">Details</h4>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<fieldset class="form-group">
|
||||||
|
<label for="jsonData">Json Data</label>
|
||||||
|
<textarea class="form-control" id="jsonData" rows="20"></textarea>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button type="button" data-dismiss="modal" class="btn btn-secondary">Close</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue