<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<body>
<div class="container">
<div class="col-md-12 noPaddingAlways">
<div class="col-md-11 noPaddingAlways">
<div class="col-md-6">
</div>
<div class="col-md-6 aRight noPaddingRight">
<div class="aboveTableButton" data-toggle="dropdown-custom">
<div class="dropdown-custom export" style="display: none;">
<ul>
<li>
<a class="exportButtons" id="excel" onClick="exportLOG('excel', window.location.pathname);">Izvozi XLS datoteko</a>
</li>
<li>
<a class="exportButtons" id="pdf" onClick="exportLOG('pdf', window.location.pathname);">Izvozi PDF datoteko</a>
</li>
</ul>
</div>
<i class="material-icons">share</i>
<span>Izvozi</span>
</div>
<a class="editor_print">
<div class="aboveTableButton mLeft40 mRight40">
<i class="material-icons">print</i>
<span>Natisni</span>
</div>
</a>
<a class="editor_create">
<div class="aboveTableButton full">
<i class="material-icons">add</i>
<span>Dodaj</span>
</div>
</a>
</div>
<div class="col-md-12">
<div id="TruckTravelOrdersProgress" class="mTop10" align="center">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
</div>
<div id="TruckTravelOrdersTableBox" class="col-md-11 mTop20 selectionCard noShadow noPaddingAlways table__basic" style="display: none">
<table id="TruckTravelOrdersTable" class="bTable display table-striped" style="width:100%">
<thead>
<tr>
<th></th>
<th>Datum</th>
<th>Vozilo</th>
<th>Voznik</th>
<th>Relacija</th>
<th>Dodatno </th>
</tr>
</thead>
</table>
</div>
</div>
<div id="TruckTravelOrdersTableModal" style="display: none">
<div class="col-md-6">
<editor-field name="truck_travel_orders.VehicleID"></editor-field>
<editor-field name="truck_travel_orders.DateFrom"></editor-field>
</div>
<div class="col-md-6">
<editor-field name="truck_travel_orders.Date"></editor-field>
<editor-field name="truck_travel_orders.DateTo"></editor-field>
</div>
<div class="col-md-8">
<editor-field name="truck_travel_orders.Type"></editor-field>
</div>
<div class="col-md-4">
<editor-field name="truck_travel_orders.IsWater"></editor-field>
</div>
<div class="col-md-12">
<editor-field name="truck_travel_orders.Relation"></editor-field>
</div>
<div class="col-md-12 noPaddingAlways">
<div class="col-md-6">
<editor-field name="truck_travel_orders.DriverID"></editor-field>
</div>
<div class="col-md-6">
<editor-field name="truck_travel_orders.DriverName"></editor-field>
</div>
</div>
<div class="col-md-12 noPaddingAlways">
<div class="col-md-6">
<editor-field name="truck_travel_orders.PassengerID"></editor-field>
</div>
<div class="col-md-6">
</div>
</div>
<div class="col-md-12">
<!--<editor-field name="truck_travel_orders.CompanionID"></editor-field>-->
<editor-field name="companions[].ID"></editor-field>
</div>
<div class="col-md-6">
<editor-field name="truck_travel_orders.CounterStart"></editor-field>
</div>
<div class="col-md-6">
<editor-field name="truck_travel_orders.CounterEnd"></editor-field>
</div>
<div class="col-md-5">
<editor-field name="truck_travel_orders.TravelStart"></editor-field>
</div>
<div class="col-md-5">
<editor-field name="truck_travel_orders.TravelEnd"></editor-field>
</div>
<div class="col-md-2">
<editor-field name="truck_travel_orders.Hours"></editor-field>
</div>
<div class="col-md-6">
<editor-field name="truck_travel_orders.UserID"></editor-field>
</div>
<div class="col-md-6">
</div>
<div class="nModal__absoluteClose" onclick="$('#closeModal').click();">
<i class="material-icons">close</i>
<span>Prekliči</span>
</div>
</div>
<input type="hidden" id="CurrentUserID" value="<?php echo $_SESSION["UserID"]; ?>">
<input type="hidden" id="Action" value="<?php echo $Action; ?>" />
<input type="hidden" id="OrderID" value="<?php echo $OrderID; ?>" />
</div>
</body>
</html>
body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
document.addEventListener('DOMContentLoaded', function () {
$.extend(true, $.fn.dataTable.Editor.defaults, {
formOptions: {
main: { onBackground: 'none' },
bubble: { onBackground: 'none' }
}
});
TruckTravelOrdersTableEditor = new $.fn.dataTable.Editor({
ajax: $("#BASE_URL").val() + '/application/ajax/portal/tables/TableTruckTravelOrders.php',
table: '#TruckTravelOrdersTable',
template: '#TruckTravelOrdersTableModal',
fields: [
{
label: 'Vrsta prevoza',
name: 'truck_travel_orders.Type'
},
{
label: ' ',
name: 'truck_travel_orders.IsWater',
type: "checkbox",
options: [
{ label: "Prevoz vode", value: 1 }
],
separator: '',
unselectedValue: 0
},
{
label: 'Datum izdaje',
name: 'truck_travel_orders.Date',
type: 'datetime',
format: 'DD.MM.YYYY HH:mm',
def: function() {
return new Date();
}
},
{
label: 'Veljavnost potnega naloga od',
name: 'truck_travel_orders.DateFrom',
type: 'datetime',
format: 'DD.MM.YYYY HH:mm',
def: function() {
return new Date();
}
},
{
label: 'Veljavnost potnega naloga do',
name: 'truck_travel_orders.DateTo',
type: 'datetime',
format: 'DD.MM.YYYY HH:mm',
def: function() {
return new Date();
}
},
{
label: 'Relacija',
name: 'truck_travel_orders.Relation'
},
{
label: 'Voznik',
name: 'truck_travel_orders.DriverID',
type: 'select2',
opts: {
"allowClear": true,
"placeholder": {
"id": "",
"text":"(Izberite voznika)"
},
ajax: {
"type": "GET",
"url": $("#BASE_URL").val() + "/application/ajax/portal/select/Select2Users.php",
"dataType": "json",
"cache": true,
"data": function (params) {
var query = {
"q": params.term,
"page": params.page
};
return query;
},
"processResults": function (data, params) {
return {results: data.results};
}
}
}
},
{
label: 'ali vpiši ime in priimek voznika',
name: 'truck_travel_orders.DriverName'
},
{
label: 'Sovoznik',
name: 'truck_travel_orders.PassengerID',
type: 'select2',
opts: {
"allowClear": true,
"placeholder": {
"id": "",
"text":"(Izberite sovoznika)"
},
ajax: {
"type": "GET",
"url": $("#BASE_URL").val() + "/application/ajax/portal/select/Select2Users.php",
"dataType": "json",
"cache": true,
"data": function (params) {
var query = {
"q": params.term,
"page": params.page
};
return query;
},
"processResults": function (data, params) {
return {results: data.results};
}
}
}
},
// {
// label: 'Spremljevalec',
// name: 'truck_travel_orders.CompanionID',
// type: 'select2',
// opts: {
// "allowClear": true,
// "placeholder": {
// "id": "",
// "text":"(Izberite spremljevalca)"
// },
// ajax: {
// "type": "GET",
// "url": $("#BASE_URL").val() + "/application/ajax/portal/select/Select2Users.php",
// "dataType": "json",
// "cache": true,
// "data": function (params) {
// var query = {
// "q": params.term,
// "page": params.page
// };
// return query;
// },
// "processResults": function (data, params) {
// return {results: data.results};
// }
// }
// }
// },
{
label: 'Spremljevalci',
name: 'companions[].ID',
type: 'select2',
opts: {
language: {
"noResults": function(){
return "Ni najdenih rezultatov";
}
},
escapeMarkup: function (markup) {
return markup;
},
"multiple": true,
"allowClear": true,
"placeholder": {
"id": "",
"text":"(Izberite spremljevalce)"
},
ajax: {
"type": "GET",
"url": $("#BASE_URL").val() + "/application/ajax/portal/select/Select2Users.php",
"dataType": "json",
"cache": true,
"data": function (params) {
var query = {
"q": params.term,
"page": params.page
};
return query;
},
"processResults": function (data, params) {
return {results: data.results};
}
}
}
},
{
label: 'Vozilo',
name: 'truck_travel_orders.VehicleID',
type: 'select2',
opts: {
"allowClear": false,
"placeholder": {
"id": "",
"text":"(Izberite vozilo)"
},
"templateResult": function (data) {
var templateHTML = "<div>" + data.text + "</div>";
templateHTML += "<div style='font-size: 12px'>" + data.info + "</div>";
return templateHTML;
},
escapeMarkup: function(markup) {
return markup;
},
ajax: {
"type": "GET",
"url": $("#BASE_URL").val() + "/application/ajax/portal/select/Select2Vehicles.php",
"dataType": "json",
"cache": true,
"data": function (params) {
var query = {
"q": params.term,
"page": params.page
};
return query;
},
"processResults": function (data, params) {
return {results: data.results};
}
}
}
},
{
label: 'Čas odhoda',
name: 'truck_travel_orders.TravelStart',
type: 'datetime',
format: 'DD.MM.YYYY HH:mm',
def: function() {
return new Date();
}
},
{
label: 'Čas prihoda',
name: 'truck_travel_orders.TravelEnd',
type: 'datetime',
format: 'DD.MM.YYYY HH:mm',
def: function() {
return new Date();
}
},
{
label: 'Ure',
name: 'truck_travel_orders.Hours',
type: 'readonly',
def: '0'
},
{
label: 'Stanje števca ob odhodu (km)',
name: 'truck_travel_orders.CounterStart',
attr: {
type: "number"
}
},
{
label: 'Stanje števca ob prihodu (km)',
name: 'truck_travel_orders.CounterEnd',
attr: {
type: "number"
}
},
{
label: 'Potni nalog izdal:',
name: 'truck_travel_orders.UserID',
type: 'select2',
def: $("#CurrentUserID").val(),
opts: {
"allowClear": false,
"placeholder": {
"id": "",
"text":"(Izberite uporabnika)"
},
ajax: {
"type": "GET",
"url": $("#BASE_URL").val() + "/application/ajax/portal/select/Select2Users.php",
"dataType": "json",
"cache": true,
"data": function (params) {
var query = {
"q": params.term,
"page": params.page
};
return query;
},
"processResults": function (data, params) {
return {results: data.results};
}
}
}
},
{label: 'Status', name: 'truck_travel_orders.Status', def: 'active'}
]
});
TruckTravelOrdersTableEditor.on('open', function (e, json, action) {
console.log('open');
$("#TruckTravelOrdersTableModal").show();
$("#TruckTravelOrdersTableModal input[type=checkbox]").parent().addClass("pure-radiobutton pure-checkbox-inline-modal");
// setTimeout(function() {
// $(TruckTravelOrdersTableEditor.field('truck_travel_orders.VehicleID').input()).off('change');
// $(TruckTravelOrdersTableEditor.field('truck_travel_orders.VehicleID').input()).on('change', function (e) {
// var VehicleID = $(this).val();
//
// $.post(BASE_URL + "/application/ajax/portal/GetVehicleKM.php", {VehicleID: VehicleID}, function (Data, Status) {
// if(Status === "success") {
// TruckTravelOrdersTableEditor.field('truck_travel_orders.CounterStart').val(Data);
// TruckTravelOrdersTableEditor.field('truck_travel_orders.CounterEnd').val(Data);
// }
// });
// });
// if(action === "create") {
// console.log("here");
// $(TruckTravelOrdersTableEditor.field('truck_travel_orders.VehicleID').input()).on('change', function (e) {
// var VehicleID = $(this).val();
//
// console.log(VehicleID);
//
// if(VehicleID !== null) {
// $.post(BASE_URL + "/application/ajax/portal/GetVehicleKM.php", {VehicleID: VehicleID}, function (Data, Status) {
// if(Status === "success") {
// TruckTravelOrdersTableEditor.field('truck_travel_orders.CounterStart').val(Data);
// TruckTravelOrdersTableEditor.field('truck_travel_orders.CounterEnd').val(Data);
// }
// });
// }
// });
//
// $.post(BASE_URL + "/application/ajax/portal/forms/GetTruckTravelOrderScheduleIssuer.php", function (Data, Status) {
// if(Status === "success" && Data !== "false") {
// TruckTravelOrdersTableEditor.field('truck_travel_orders.UserID').val(Data);
// }
// });
// }
// }, 500);
});
TruckTravelOrdersTableEditor.on('opened', function () {
console.log('opened');
});
// TruckTravelOrdersTableEditor.on('close', function () {
// $(TruckTravelOrdersTableEditor.field('truck_travel_orders.VehicleID').input()).off('change');
// });
$(TruckTravelOrdersTableEditor.field('truck_travel_orders.IsWater').input()).on('change', function (e) {
var IsWater = $(this).is(":checked");
if(IsWater) {
TruckTravelOrdersTableEditor.field('truck_travel_orders.Type').val("Prevoz vode");
}
});
$(TruckTravelOrdersTableEditor.field('truck_travel_orders.TravelStart').input()).on('change', function (e, d) {
var Date = TruckTravelOrdersTableEditor.field('truck_travel_orders.TravelStart').val();
var DateUS = moment(Date, 'DD.MM.YYYY HH:mm').format("YYYY-MM-DD HH:mm");
var DateEnd = TruckTravelOrdersTableEditor.field('truck_travel_orders.TravelEnd').val();
var DateEndUS = moment(DateEnd, 'DD.MM.YYYY HH:mm').format("YYYY-MM-DD HH:mm");
var Hours = 0;
if(Date !== "" && DateEnd !== "") {
if(DateUS < DateEndUS) {
var Duration = moment.duration(moment(DateEndUS).diff(moment(DateUS)));
Hours = Math.ceil(Duration.asMinutes() / 60);
} else {
Hours = 1;
}
}
TruckTravelOrdersTableEditor.field('truck_travel_orders.Hours').val(Hours);
});
$(TruckTravelOrdersTableEditor.field('truck_travel_orders.TravelEnd').input()).on('change', function (e, d) {
var Date = TruckTravelOrdersTableEditor.field('truck_travel_orders.TravelStart').val();
var DateUS = moment(Date, 'DD.MM.YYYY HH:mm').format("YYYY-MM-DD HH:mm");
var DateEnd = TruckTravelOrdersTableEditor.field('truck_travel_orders.TravelEnd').val();
var DateEndUS = moment(DateEnd, 'DD.MM.YYYY HH:mm').format("YYYY-MM-DD HH:mm");
var Hours = 0;
if(Date !== "" && DateEnd !== "") {
if(DateUS < DateEndUS) {
var Duration = moment.duration(moment(DateEndUS).diff(moment(DateUS)));
Hours = Math.ceil(Duration.asMinutes() / 60);
} else {
Hours = 1;
}
}
TruckTravelOrdersTableEditor.field('truck_travel_orders.Hours').val(Hours);
});
var TruckTravelOrdersTable = $('#TruckTravelOrdersTable').DataTable({
dom: "Bfrtip",
ajax: $("#BASE_URL").val() + "/application/ajax/portal/tables/TableTruckTravelOrders.php",
order: [[0, "desc"]],
pageLength: 100,
columnDefs: [
{ type: 'natural', targets: 0 }
],
columns: [
{
data: 'truck_travel_orders.DocYear',
width: '50px',
render: function(data, type, row) {
return row.truck_travel_orders.DocYear + "-" + row.truck_travel_orders.DocNumber;
}
},
{
data: "truck_travel_orders.Date",
render: function(data, type, row) {
var DateUS = moment(row.truck_travel_orders.Date, 'DD.MM.YYYY HH:mm:ss').format("YYYY-MM-DD HH:mm:ss");
if(type !== 'export') {
return '<span class="tableHiddenValue">' + DateUS + "</span> " + row.truck_travel_orders.Date;
} else {
return row.truck_travel_orders.Date;
}
}
},
{
data: "truck_travel_orders.VehicleID",
render: function(data, type, row) {
return row.vehicles.Title;
}
},
{
data: "truck_travel_orders.DriverID",
render: function(data, type, row) {
var Name = "";
if(row.driver.Lastname !== null) {
Name += row.driver.Lastname;
}
if(row.driver.Firstname !== null) {
Name += " " + row.driver.Firstname;
}
if(row.truck_travel_orders.DriverName !== "") {
Name = row.truck_travel_orders.DriverName;
}
return Name;
}
},
{data: "truck_travel_orders.Relation"},
{
data: "Controls",
className: "center",
defaultContent: '\
<a href="" class="editor_print_all datatableButtonTooltip" title="Prikaži PDF">\n\
<span class="tableButton"><i class="material-icons darkGrey">print</i></span>\n\
</a>\n\
<a href="" class="editor_edit datatableButtonTooltip" title="Uredi">\n\
<span class="tableButton"><i class="material-icons darkGrey">edit</i></span>\n\
</a>\n\
<a href="" class="editor_remove datatableButtonTooltip" title="Izbriši">\n\
<span class="tableButton"><i class="material-icons darkGrey">delete</i></span>\n\
</a>'
}
],
select: false,
responsive: true,
buttons: [
{
extend: 'pdfHtml5',
title: 'Potni nalogi',
exportOptions: {
columns: [0, 1, 2, 3, 4]
},
customize: function ( doc ) {
doc.pageMargins = [20,80,20,30];
doc.defaultStyle.fontSize = 7;
doc.styles.tableHeader.fontSize = 7;
doc.styles.tableHeader.alignment = "left";
doc.content[1].table.widths = [80, 100, '*', 100, 100];
var now = new Date();
var jsDate = now.getDate()+'.'+(now.getMonth()+1)+'.'+now.getFullYear();
doc['footer']=(function(page, pages) {
return {
columns: [
{
alignment: 'left',
text: ['Izpisal: ', { text: $("#CurrentUserFullName").val() }, ', dne ', { text: jsDate.toString() }]
},
{
alignment: 'right',
text: ['Stran ', { text: page.toString() }, ' od ', { text: pages.toString() }]
}
],
margin: 20
};
});
doc['header']=(function() {
return {
columns: [
{
image: $("#LogoBase64").val(),
width: 40,
alignment: 'center'
}
],
margin: 20
};
});
}
},
{
extend: 'excelHtml5',
title: 'Potni nalogi',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
},
{
extend: 'print',
title: 'Potni nalogi',
exportOptions: {
columns: [0, 1, 2, 3, 4]
}
}
],
initComplete: function () {
var $buttons = $('.dt-buttons');
$('.exportButtons').on('click', function () {
var btnClass = '.buttons-' + $(this)[0].id;
if (btnClass)
$buttons.find(btnClass).click();
});
$('.editor_print').on('click', function () {
$buttons.find('.buttons-print').click();
});
$("#TruckTravelOrdersProgress").slideUp("slow");
$("#TruckTravelOrdersTableBox").slideDown("slow");
var Action = $("#Action").val();
var OrderID = $("#OrderID").val();
if(Action === "Edit" && OrderID !== "") {
$("#row_" + OrderID + " a.editor_edit").trigger("click", [OrderID]);
}
}
});
$('#TruckTravelOrdersTable').on('click', 'a.editor_edit', function (e, OrderID) {
e.preventDefault();
e.stopPropagation();
// var OrderID = $("#OrderID").val();
var RowID = "";
if(OrderID === undefined) {
RowID = $(this).closest('tr');
} else {
RowID = "#row_" + OrderID;
}
TruckTravelOrdersTableEditor.edit(RowID, {
title: 'Uredi potni nalog',
buttons: 'Shrani'
});
});
$('#TruckTravelOrdersTable').on('click', 'a.editor_print_all', function (e) {
e.preventDefault();
e.stopPropagation();
var TRID = $(this).closest('tr').attr("id");
var ID = TRID.replace('row_', '');
window.location.href = "/portal/forms/truck-travel-orders-view/" + ID;
});
// Delete a record
$('#TruckTravelOrdersTable').on('click', 'a.editor_remove', function (e) {
e.preventDefault();
e.stopPropagation();
setTimeout(function() {
$("#TruckTravelOrdersTableModal").hide();
$("#TruckTravelOrdersTableModal").closest(".modal-dialog").removeClass("modal-lg");
}, 50);
TruckTravelOrdersTableEditor
.on('close', function() {
setTimeout(function() {
$("#TruckTravelOrdersTableModal").show();
}, 150);
})
.edit($(this).closest('tr'), {
title: '<div class="aCenter"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve" width="512px" height="512px"> <g> <path d="M26,0C11.664,0,0,11.663,0,26s11.664,26,26,26s26-11.663,26-26S40.336,0,26,0z M26,50C12.767,50,2,39.233,2,26 S12.767,2,26,2s24,10.767,24,24S39.233,50,26,50z" fill="#df5033"/> <path d="M26,10c-0.552,0-1,0.447-1,1v22c0,0.553,0.448,1,1,1s1-0.447,1-1V11C27,10.447,26.552,10,26,10z" fill="#df5033"/> <path d="M26,37c-0.552,0-1,0.447-1,1v2c0,0.553,0.448,1,1,1s1-0.447,1-1v-2C27,37.447,26.552,37,26,37z" fill="#df5033"/> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg></div>\n\
<div class="boldTitle">Izbriši potni nalog</div>',
message: '<div class="aCenter pTop10">Ste prepričani, da želite izbrisati potni nalog?</div>',
buttons: 'Izbriši'
})
.val('truck_travel_orders.Status', 'deleted');
});
// New record
$('a.editor_create').on('click', function (e) {
e.preventDefault();
TruckTravelOrdersTableEditor
.title('Dodaj potni nalog')
.buttons(
{
"label": "Shrani",
"fn": function () {
TruckTravelOrdersTableEditor.submit();
}
}
)
.create();
});
}, false);
You can jump to the latest bin by adding /latest
to your URL
Shortcut | Action |
---|---|
ctrl + [num] | Toggle nth panel |
ctrl + 0 | Close focused panel |
ctrl + enter | Re-render output. If console visible: run JS in console |
Ctrl + l | Clear the console |
ctrl + / | Toggle comment on selected lines |
ctrl + [ | Indents selected lines |
ctrl + ] | Unindents selected lines |
tab | Code complete & Emmet expand |
ctrl + s | Save & lock current Bin from further changes |
ctrl + shift + s | Clone Bin |
ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts |
URL | Action |
---|---|
/ | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
/edit | Edit the current bin |
/watch | Follow a Code Casting session |
/embed | Create an embeddable version of the bin |
/latest | Load the very latest bin (/latest goes in place of the revision) |
/[username]/last | View the last edited bin for this user |
/[username]/last/edit | Edit the last edited bin for this user |
/[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
/quiet | Remove analytics and edit button from rendered output |
.js | Load only the JavaScript for a bin |
.css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. |