dtl trip report
This commit is contained in:
350
public/assets/vendor/printThis.js
vendored
Normal file
350
public/assets/vendor/printThis.js
vendored
Normal file
@ -0,0 +1,350 @@
|
|||||||
|
/*
|
||||||
|
* printThis v2.0.0
|
||||||
|
* @desc Printing plug-in for jQuery
|
||||||
|
* @author Jason Day
|
||||||
|
* @author Samuel Rouse
|
||||||
|
*
|
||||||
|
* Resources (based on):
|
||||||
|
* - jPrintArea: http://plugins.jquery.com/project/jPrintArea
|
||||||
|
* - jqPrint: https://github.com/permanenttourist/jquery.jqprint
|
||||||
|
* - Ben Nadal: http://www.bennadel.com/blog/1591-Ask-Ben-Print-Part-Of-A-Web-Page-With-jQuery.htm
|
||||||
|
*
|
||||||
|
* Licensed under the MIT licence:
|
||||||
|
* http://www.opensource.org/licenses/mit-license.php
|
||||||
|
*
|
||||||
|
* (c) Jason Day 2015-2022
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
*
|
||||||
|
* $("#mySelector").printThis({
|
||||||
|
* debug: false, // show the iframe for debugging
|
||||||
|
* importCSS: true, // import parent page css
|
||||||
|
* importStyle: true, // import style tags
|
||||||
|
* printContainer: true, // grab outer container as well as the contents of the selector
|
||||||
|
* loadCSS: "path/to/my.css", // path to additional css file - use an array [] for multiple
|
||||||
|
* pageTitle: "", // add title to print page
|
||||||
|
* removeInline: false, // remove all inline styles from print elements
|
||||||
|
* removeInlineSelector: "body *", // custom selectors to filter inline styles. removeInline must be true
|
||||||
|
* printDelay: 1000, // variable print delay
|
||||||
|
* header: null, // prefix to html
|
||||||
|
* footer: null, // postfix to html
|
||||||
|
* base: false, // preserve the BASE tag, or accept a string for the URL
|
||||||
|
* formValues: true, // preserve input/form values
|
||||||
|
* canvas: true, // copy canvas elements
|
||||||
|
* doctypeString: '...', // enter a different doctype for older markup
|
||||||
|
* removeScripts: false, // remove script tags from print content
|
||||||
|
* copyTagClasses: true // copy classes from the html & body tag
|
||||||
|
* copyTagStyles: true, // copy styles from html & body tag (for CSS Variables)
|
||||||
|
* beforePrintEvent: null, // callback function for printEvent in iframe
|
||||||
|
* beforePrint: null, // function called before iframe is filled
|
||||||
|
* afterPrint: null // function called before iframe is removed
|
||||||
|
* });
|
||||||
|
*
|
||||||
|
* Notes:
|
||||||
|
* - the loadCSS will load additional CSS (with or without @media print) into the iframe, adjusting layout
|
||||||
|
*/
|
||||||
|
;
|
||||||
|
(function($) {
|
||||||
|
|
||||||
|
function appendContent($el, content) {
|
||||||
|
if (!content) return;
|
||||||
|
|
||||||
|
// Simple test for a jQuery element
|
||||||
|
$el.append(content.jquery ? content.clone() : content);
|
||||||
|
}
|
||||||
|
|
||||||
|
function appendBody($body, $element, opt) {
|
||||||
|
// Clone for safety and convenience
|
||||||
|
// Calls clone(withDataAndEvents = true) to copy form values.
|
||||||
|
var $content = $element.clone(opt.formValues);
|
||||||
|
|
||||||
|
if (opt.formValues) {
|
||||||
|
// Copy original select and textarea values to their cloned counterpart
|
||||||
|
// Makes up for inability to clone select and textarea values with clone(true)
|
||||||
|
copyValues($element, $content, 'select, textarea');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (opt.removeScripts) {
|
||||||
|
$content.find('script').remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (opt.printContainer) {
|
||||||
|
// grab $.selector as container
|
||||||
|
$content.appendTo($body);
|
||||||
|
} else {
|
||||||
|
// otherwise just print interior elements of container
|
||||||
|
$content.each(function() {
|
||||||
|
$(this).children().appendTo($body)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Copies values from origin to clone for passed in elementSelector
|
||||||
|
function copyValues(origin, clone, elementSelector) {
|
||||||
|
var $originalElements = origin.find(elementSelector);
|
||||||
|
|
||||||
|
clone.find(elementSelector).each(function(index, item) {
|
||||||
|
$(item).val($originalElements.eq(index).val());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var opt;
|
||||||
|
$.fn.printThis = function(options) {
|
||||||
|
opt = $.extend({}, $.fn.printThis.defaults, options);
|
||||||
|
var $element = this instanceof jQuery ? this : $(this);
|
||||||
|
|
||||||
|
var strFrameName = "printThis-" + (new Date()).getTime();
|
||||||
|
|
||||||
|
if (window.location.hostname !== document.domain && navigator.userAgent.match(/msie/i)) {
|
||||||
|
// Ugly IE hacks due to IE not inheriting document.domain from parent
|
||||||
|
// checks if document.domain is set by comparing the host name against document.domain
|
||||||
|
var iframeSrc = "javascript:document.write(\"<head><script>document.domain=\\\"" + document.domain + "\\\";</s" + "cript></head><body></body>\")";
|
||||||
|
var printI = document.createElement('iframe');
|
||||||
|
printI.name = "printIframe";
|
||||||
|
printI.id = strFrameName;
|
||||||
|
printI.className = "MSIE";
|
||||||
|
document.body.appendChild(printI);
|
||||||
|
printI.src = iframeSrc;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
// other browsers inherit document.domain, and IE works if document.domain is not explicitly set
|
||||||
|
var $frame = $("<iframe id='" + strFrameName + "' name='printIframe' />");
|
||||||
|
$frame.appendTo("body");
|
||||||
|
}
|
||||||
|
|
||||||
|
var $iframe = $("#" + strFrameName);
|
||||||
|
|
||||||
|
// show frame if in debug mode
|
||||||
|
if (!opt.debug) $iframe.css({
|
||||||
|
position: "absolute",
|
||||||
|
width: "0px",
|
||||||
|
height: "0px",
|
||||||
|
left: "-600px",
|
||||||
|
top: "-600px"
|
||||||
|
});
|
||||||
|
|
||||||
|
// before print callback
|
||||||
|
if (typeof opt.beforePrint === "function") {
|
||||||
|
opt.beforePrint();
|
||||||
|
}
|
||||||
|
|
||||||
|
// $iframe.ready() and $iframe.load were inconsistent between browsers
|
||||||
|
setTimeout(function() {
|
||||||
|
|
||||||
|
// Add doctype to fix the style difference between printing and render
|
||||||
|
function setDocType($iframe, doctype){
|
||||||
|
var win, doc;
|
||||||
|
win = $iframe.get(0);
|
||||||
|
win = win.contentWindow || win.contentDocument || win;
|
||||||
|
doc = win.document || win.contentDocument || win;
|
||||||
|
doc.open();
|
||||||
|
doc.write(doctype);
|
||||||
|
doc.close();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (opt.doctypeString){
|
||||||
|
setDocType($iframe, opt.doctypeString);
|
||||||
|
}
|
||||||
|
|
||||||
|
var $doc = $iframe.contents(),
|
||||||
|
$head = $doc.find("head"),
|
||||||
|
$body = $doc.find("body"),
|
||||||
|
$base = $('base'),
|
||||||
|
baseURL;
|
||||||
|
|
||||||
|
// add base tag to ensure elements use the parent domain
|
||||||
|
if (opt.base === true && $base.length > 0) {
|
||||||
|
// take the base tag from the original page
|
||||||
|
baseURL = $base.attr('href');
|
||||||
|
} else if (typeof opt.base === 'string') {
|
||||||
|
// An exact base string is provided
|
||||||
|
baseURL = opt.base;
|
||||||
|
} else {
|
||||||
|
// Use the page URL as the base
|
||||||
|
baseURL = document.location.protocol + '//' + document.location.host;
|
||||||
|
}
|
||||||
|
|
||||||
|
$head.append('<base href="' + baseURL + '">');
|
||||||
|
|
||||||
|
// import page stylesheets
|
||||||
|
if (opt.importCSS) $("link[rel=stylesheet]").each(function() {
|
||||||
|
var href = $(this).attr("href");
|
||||||
|
if (href) {
|
||||||
|
var media = $(this).attr("media") || "all";
|
||||||
|
$head.append("<link type='text/css' rel='stylesheet' href='" + href + "' media='" + media + "'>");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// import style tags
|
||||||
|
if (opt.importStyle) $("style").each(function() {
|
||||||
|
$head.append(this.outerHTML);
|
||||||
|
});
|
||||||
|
|
||||||
|
// add title of the page
|
||||||
|
if (opt.pageTitle) $head.append("<title>" + opt.pageTitle + "</title>");
|
||||||
|
|
||||||
|
// import additional stylesheet(s)
|
||||||
|
if (opt.loadCSS) {
|
||||||
|
if ($.isArray(opt.loadCSS)) {
|
||||||
|
jQuery.each(opt.loadCSS, function(index, value) {
|
||||||
|
$head.append("<link type='text/css' rel='stylesheet' href='" + this + "'>");
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$head.append("<link type='text/css' rel='stylesheet' href='" + opt.loadCSS + "'>");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var pageHtml = $('html')[0];
|
||||||
|
|
||||||
|
// CSS VAR in html tag when dynamic apply e.g. document.documentElement.style.setProperty("--foo", bar);
|
||||||
|
$doc.find('html').prop('style', pageHtml.style.cssText);
|
||||||
|
|
||||||
|
// copy 'root' tag classes
|
||||||
|
var tag = opt.copyTagClasses;
|
||||||
|
if (tag) {
|
||||||
|
tag = tag === true ? 'bh' : tag;
|
||||||
|
if (tag.indexOf('b') !== -1) {
|
||||||
|
$body.addClass($('body')[0].className);
|
||||||
|
}
|
||||||
|
if (tag.indexOf('h') !== -1) {
|
||||||
|
$doc.find('html').addClass(pageHtml.className);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// copy ':root' tag classes
|
||||||
|
tag = opt.copyTagStyles;
|
||||||
|
if (tag) {
|
||||||
|
tag = tag === true ? 'bh' : tag;
|
||||||
|
if (tag.indexOf('b') !== -1) {
|
||||||
|
$body.attr('style', $('body')[0].style.cssText);
|
||||||
|
}
|
||||||
|
if (tag.indexOf('h') !== -1) {
|
||||||
|
$doc.find('html').attr('style', pageHtml.style.cssText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// print header
|
||||||
|
appendContent($body, opt.header);
|
||||||
|
|
||||||
|
if (opt.canvas) {
|
||||||
|
// add canvas data-ids for easy access after cloning.
|
||||||
|
var canvasId = 0;
|
||||||
|
// .addBack('canvas') adds the top-level element if it is a canvas.
|
||||||
|
$element.find('canvas').addBack('canvas').each(function(){
|
||||||
|
$(this).attr('data-printthis', canvasId++);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
appendBody($body, $element, opt);
|
||||||
|
|
||||||
|
if (opt.canvas) {
|
||||||
|
// Re-draw new canvases by referencing the originals
|
||||||
|
$body.find('canvas').each(function(){
|
||||||
|
var cid = $(this).data('printthis'),
|
||||||
|
$src = $('[data-printthis="' + cid + '"]');
|
||||||
|
|
||||||
|
this.getContext('2d').drawImage($src[0], 0, 0);
|
||||||
|
|
||||||
|
// Remove the markup from the original
|
||||||
|
if ($.isFunction($.fn.removeAttr)) {
|
||||||
|
$src.removeAttr('data-printthis');
|
||||||
|
} else {
|
||||||
|
$.each($src, function(i, el) {
|
||||||
|
el.removeAttribute('data-printthis');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove inline styles
|
||||||
|
if (opt.removeInline) {
|
||||||
|
// Ensure there is a selector, even if it's been mistakenly removed
|
||||||
|
var selector = opt.removeInlineSelector || '*';
|
||||||
|
// $.removeAttr available jQuery 1.7+
|
||||||
|
if ($.isFunction($.removeAttr)) {
|
||||||
|
$body.find(selector).removeAttr("style");
|
||||||
|
} else {
|
||||||
|
$body.find(selector).attr("style", "");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// print "footer"
|
||||||
|
appendContent($body, opt.footer);
|
||||||
|
|
||||||
|
// attach event handler function to beforePrint event
|
||||||
|
function attachOnBeforePrintEvent($iframe, beforePrintHandler) {
|
||||||
|
var win = $iframe.get(0);
|
||||||
|
win = win.contentWindow || win.contentDocument || win;
|
||||||
|
|
||||||
|
if (typeof beforePrintHandler === "function") {
|
||||||
|
if ('matchMedia' in win) {
|
||||||
|
win.matchMedia('print').addListener(function(mql) {
|
||||||
|
if(mql.matches) beforePrintHandler();
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
win.onbeforeprint = beforePrintHandler;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
attachOnBeforePrintEvent($iframe, opt.beforePrintEvent);
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
if ($iframe.hasClass("MSIE")) {
|
||||||
|
// check if the iframe was created with the ugly hack
|
||||||
|
// and perform another ugly hack out of neccessity
|
||||||
|
window.frames["printIframe"].focus();
|
||||||
|
$head.append("<script> window.print(); </s" + "cript>");
|
||||||
|
} else {
|
||||||
|
// proper method
|
||||||
|
if (document.queryCommandSupported("print")) {
|
||||||
|
$iframe[0].contentWindow.document.execCommand("print", false, null);
|
||||||
|
} else {
|
||||||
|
$iframe[0].contentWindow.focus();
|
||||||
|
$iframe[0].contentWindow.print();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// remove iframe after print
|
||||||
|
if (!opt.debug) {
|
||||||
|
setTimeout(function() {
|
||||||
|
$iframe.remove();
|
||||||
|
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
|
||||||
|
// after print callback
|
||||||
|
if (typeof opt.afterPrint === "function") {
|
||||||
|
opt.afterPrint();
|
||||||
|
}
|
||||||
|
|
||||||
|
}, opt.printDelay);
|
||||||
|
|
||||||
|
}, 333);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// defaults
|
||||||
|
$.fn.printThis.defaults = {
|
||||||
|
debug: false, // show the iframe for debugging
|
||||||
|
importCSS: true, // import parent page css
|
||||||
|
importStyle: true, // import style tags
|
||||||
|
printContainer: true, // print outer container/$.selector
|
||||||
|
loadCSS: "", // path to additional css file - use an array [] for multiple
|
||||||
|
pageTitle: "", // add title to print page
|
||||||
|
removeInline: false, // remove inline styles from print elements
|
||||||
|
removeInlineSelector: "*", // custom selectors to filter inline styles. removeInline must be true
|
||||||
|
printDelay: 1000, // variable print delay
|
||||||
|
header: null, // prefix to html
|
||||||
|
footer: null, // postfix to html
|
||||||
|
base: false, // preserve the BASE tag or accept a string for the URL
|
||||||
|
formValues: true, // preserve input/form values
|
||||||
|
canvas: true, // copy canvas content
|
||||||
|
doctypeString: '<!DOCTYPE html>', // enter a different doctype for older markup
|
||||||
|
removeScripts: false, // remove script tags from print content
|
||||||
|
copyTagClasses: true, // copy classes from the html & body tag
|
||||||
|
copyTagStyles: true, // copy styles from html & body tag (for CSS Variables)
|
||||||
|
beforePrintEvent: null, // callback function for printEvent in iframe
|
||||||
|
beforePrint: null, // function called before iframe is filled
|
||||||
|
afterPrint: null // function called before iframe is removed
|
||||||
|
};
|
||||||
|
})(jQuery);
|
||||||
@ -7,7 +7,10 @@
|
|||||||
max-height: none;
|
max-height: none;
|
||||||
}
|
}
|
||||||
.dtl-text{
|
.dtl-text{
|
||||||
font-size: 0.75rem;
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
.head-text{
|
||||||
|
font-size: 12px !important;
|
||||||
}
|
}
|
||||||
/* .leaflet-overlay-pane svg {
|
/* .leaflet-overlay-pane svg {
|
||||||
transform: none !important;
|
transform: none !important;
|
||||||
@ -15,88 +18,89 @@
|
|||||||
.leaflet-routing-container {
|
.leaflet-routing-container {
|
||||||
display: none !important;
|
display: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#viewPdf {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 794px;
|
||||||
|
/* height: auto; */
|
||||||
|
max-width: 100%; /* Ensures it is responsive */
|
||||||
|
}
|
||||||
|
/* .modal-dialog{
|
||||||
|
width: 794px;
|
||||||
|
} */
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
<div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl">
|
<div class="modal-dialog modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h5 class="modal-title" id="mdlDetailTripLabel">{{$nopol1}} Trip Detail</h5>
|
<h5 class="modal-title" id="mdlDetailTripLabel">{{$nopol1}} Trip Detail</h5>
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-body row" id="viewPdf">
|
<div class="modal-body">
|
||||||
<!-- <div class="col-2">
|
<div class="row head-text" id="viewPdf">
|
||||||
<img id="infoVehicles-thumb-md" src="https://products.unitedtractors.com/wp-content/uploads/2021/03/udtruck-GWE370.png" class="img-fluid thumb-img-landscape" alt="">
|
<div class="col-12">
|
||||||
</div> -->
|
<h4>{{$nopol1}}</h4>
|
||||||
<div class="col-4">
|
</div>
|
||||||
<p class="text-bold mb-0">Start</p>
|
<div class="col-4">
|
||||||
<p class="mb-0 time">{{ $start['time'] }}</p>
|
<p class="text-bold mb-0">Start</p>
|
||||||
<p class="mb-0">Vehicle Mileage: {{number_format($start['mileage'], 2)}} km</p>
|
<p class="mb-0 time">{{ $start['time'] }}</p>
|
||||||
<p>{{$start['fulladdress']}}</p>
|
<p class="mb-0">Vehicle Mileage: {{number_format($start['mileage'], 2)}} km</p>
|
||||||
</div>
|
<p>{{$start['fulladdress']}}</p>
|
||||||
<div class="col-4">
|
</div>
|
||||||
<p class="text-bold mb-0">Finish</p>
|
<div class="col-4">
|
||||||
<p class="mb-0 time">{{ $finish['time'] }}</p>
|
<p class="text-bold mb-0">Finish</p>
|
||||||
<p class="mb-0">Vehicle Mileage: {{number_format($finish['mileage'], 2)}} km</p>
|
<p class="mb-0 time">{{ $finish['time'] }}</p>
|
||||||
<p>{{$finish['fulladdress']}}</p>
|
<p class="mb-0">Vehicle Mileage: {{number_format($finish['mileage'], 2)}} km</p>
|
||||||
</div>
|
<p>{{$finish['fulladdress']}}</p>
|
||||||
<div class="col-2">
|
</div>
|
||||||
<p class="text-bold mb-0">Distance</p>
|
<div class="col-2">
|
||||||
<p class="mb-0">{{number_format($distance, 2)}} km</p>
|
<p class="text-bold mb-0">Distance</p>
|
||||||
</div>
|
<p class="mb-0">{{number_format($distance, 2)}} km</p>
|
||||||
<div class="col-2">
|
</div>
|
||||||
<p class="text-bold mb-0">Duration</p>
|
<div class="col-2">
|
||||||
<p class="mb-0">{{$duration}}</p>
|
<p class="text-bold mb-0">Duration</p>
|
||||||
</div>
|
<p class="mb-0">{{$duration}}</p>
|
||||||
<div class="col-12">
|
</div>
|
||||||
<div id="leafMap" style="height: 400px;"></div>
|
<div class="col-12">
|
||||||
</div>
|
<div id="leafMap" style="height: 400px;"></div>
|
||||||
<div class="col-12">
|
</div>
|
||||||
<!-- <li class="list-group-item p-1 px-2">
|
<div class="col-12">
|
||||||
<p class="text-bold mb-0">Time: 25 Aug 2025 07:31:08</p>
|
|
||||||
<p class="text-muted mb-0 dtl-text">-8.55387 - 125.542409</p>
|
|
||||||
<p class="text-muted mb-0 dtl-text">Avenida Luro Mata, Praia dos Coqueiros, Bebunuk, Dom Aleixo, Dili, Timor-Leste;2066973</p>
|
|
||||||
<p class="mb-0 dtl-text">Current speed: 7km/h</p>
|
|
||||||
</li> -->
|
|
||||||
@foreach ($list as $item)
|
|
||||||
<!-- <li class="list-group-item p-1 px-2">
|
<!-- <li class="list-group-item p-1 px-2">
|
||||||
<p class="text-bold mb-0">Time: {{date('d-m-Y H:i:s', $item->crt_s)}}</p>
|
<p class="text-bold mb-0">Time: 25 Aug 2025 07:31:08</p>
|
||||||
<p class="text-muted mb-0 dtl-text">Vehicle Mileage: {{number_format($item->vhc_milleage, 2)}} km</p>
|
<p class="text-muted mb-0 dtl-text">-8.55387 - 125.542409</p>
|
||||||
<p class="text-muted mb-0 dtl-text">{{number_format($item->latitude, 6)}} - {{number_format($item->longitude, 6)}}</p>
|
<p class="text-muted mb-0 dtl-text">Avenida Luro Mata, Praia dos Coqueiros, Bebunuk, Dom Aleixo, Dili, Timor-Leste;2066973</p>
|
||||||
<p class="text-muted mb-0 dtl-text">{{urldecode($item->fulladdress)}}</p>
|
<p class="mb-0 dtl-text">Current speed: 7km/h</p>
|
||||||
<p class="text-muted mb-0 dtl-text">Current speed: {{number_format($item->speed, 2)}} km/h</p>
|
|
||||||
</li> -->
|
</li> -->
|
||||||
<li class="list-group-item p-1 px-2">
|
@foreach ($list as $item)
|
||||||
<div class="row">
|
<!-- <li class="list-group-item p-1 px-2">
|
||||||
<div class="col-4">
|
<p class="text-bold mb-0">Time: {{date('d-m-Y H:i:s', $item->crt_s)}}</p>
|
||||||
<p class="text-bold mb-0">Time: <span class="time">{{ $item->crt_s }}</span></p>
|
<p class="text-muted mb-0 dtl-text">Vehicle Mileage: {{number_format($item->vhc_milleage, 2)}} km</p>
|
||||||
<p class="text-muted mb-0 dtl-text">Vehicle Mileage: {{number_format($item->vhc_milleage, 2)}} km</p>
|
<p class="text-muted mb-0 dtl-text">{{number_format($item->latitude, 6)}} - {{number_format($item->longitude, 6)}}</p>
|
||||||
<p class="text-muted mb-0 dtl-text">Current speed: {{$item->speed}} km/h</p>
|
<p class="text-muted mb-0 dtl-text">{{urldecode($item->fulladdress)}}</p>
|
||||||
|
<p class="text-muted mb-0 dtl-text">Current speed: {{number_format($item->speed, 2)}} km/h</p>
|
||||||
|
</li> -->
|
||||||
|
<li class="list-group-item p-1 px-2">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-4">
|
||||||
|
<p class="text-bold mb-0 dtl-text">Time: <span class="time">{{ $item->crt_s }}</span></p>
|
||||||
|
<p class="text-muted mb-0 dtl-text">Vehicle Mileage: {{number_format($item->vhc_milleage, 2)}} km</p>
|
||||||
|
<p class="text-muted mb-0 dtl-text">Current speed: {{$item->speed}} km/h</p>
|
||||||
|
</div>
|
||||||
|
<div class="col-8">
|
||||||
|
<p class="text-muted mb-0 dtl-text">{{number_format($item->latitude, 6)}}, {{number_format($item->longitude, 6)}}</p>
|
||||||
|
<p class="text-muted mb-0 dtl-text">{{urldecode($item->fulladdress)}}</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-8">
|
</li>
|
||||||
<p class="text-muted mb-0 dtl-text">{{number_format($item->latitude, 6)}} - {{number_format($item->longitude, 6)}}</p>
|
@endforeach
|
||||||
<p class="text-muted mb-0 dtl-text">{{urldecode($item->fulladdress)}}</p>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
@endforeach
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
<!-- <button class="btn btn-sm btn-danger ms-auto" id="btnDownloadReport">Download Report</button> -->
|
<button class="btn btn-sm btn-danger ms-auto" id="btnDownloadReport">Download Report</button>
|
||||||
<!-- @can('vehicle.delete')
|
|
||||||
<button type="button" id="btnDelVhc_updt" class="btn btn-sm btn-warning">Delete ?</button>
|
|
||||||
@endcan
|
|
||||||
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
||||||
@can('vehicle.edit')
|
|
||||||
<button id="btnSubmitEdtVhc" type="button" class="btn btn-sm btn-danger">Update data</button>
|
|
||||||
@endcan
|
|
||||||
<div id="edt-btnSubmitEdtVhc" class="d-none">
|
|
||||||
<div class="spinner-border" role="status">
|
|
||||||
<span class="visually-hidden">Loading...</span>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -111,8 +115,8 @@
|
|||||||
let coords
|
let coords
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
map.invalidateSize(); // force Leaflet to recalc
|
map.invalidateSize(); // force Leaflet to recalc
|
||||||
// map.fitBounds(polyline.getBounds());
|
map.fitBounds(polyline.getBounds());
|
||||||
map.fitBounds(coords.map(c => L.latLng(c[0], c[1])));
|
// map.fitBounds(coords.map(c => L.latLng(c[0], c[1])));
|
||||||
}, 200);
|
}, 200);
|
||||||
|
|
||||||
const linesData = (@json($list));
|
const linesData = (@json($list));
|
||||||
@ -131,13 +135,13 @@
|
|||||||
.filter(p => p.latitude && p.longitude)
|
.filter(p => p.latitude && p.longitude)
|
||||||
.map((point) => [point.latitude, point.longitude])
|
.map((point) => [point.latitude, point.longitude])
|
||||||
|
|
||||||
// // 4) Add polyline
|
// 4) Add polyline
|
||||||
// const polyline = L.polyline(points,{
|
const polyline = L.polyline(points,{
|
||||||
// color: 'blue',
|
color: 'red',
|
||||||
// weight: 3,
|
weight: 3,
|
||||||
// opacity: 0.7,
|
opacity: 0.7,
|
||||||
// smoothFactor: 1
|
smoothFactor: 1
|
||||||
// }).addTo(map);
|
}).addTo(map);
|
||||||
|
|
||||||
// const lines = L.Routing.control({
|
// const lines = L.Routing.control({
|
||||||
// waypoints: points,
|
// waypoints: points,
|
||||||
@ -169,7 +173,7 @@
|
|||||||
const body = {
|
const body = {
|
||||||
coordinates: coords,
|
coordinates: coords,
|
||||||
overview: "false",
|
overview: "false",
|
||||||
alternatives: "true",
|
alternatives: "false",
|
||||||
steps: "true",
|
steps: "true",
|
||||||
hints: hints
|
hints: hints
|
||||||
};
|
};
|
||||||
@ -266,49 +270,58 @@
|
|||||||
// map.fitBounds(polyline.getBounds())
|
// map.fitBounds(polyline.getBounds())
|
||||||
|
|
||||||
// download pdf
|
// download pdf
|
||||||
$(document).on('click', '#btnDownloadReport', function () {
|
window._downloadReportBound ||= (
|
||||||
const viewPdf = document.getElementById("viewPdf");
|
$(document).on('click', '#btnDownloadReport', function () {
|
||||||
|
$('#viewPdf').printThis({
|
||||||
|
debug: false, // show the iframe for debugging
|
||||||
|
importCSS: true, // copy linked styles
|
||||||
|
importStyle: true, // copy inline styles
|
||||||
|
});
|
||||||
|
|
||||||
// find overlay svg (the one holding polylines)
|
// const viewPdf = document.getElementById("viewPdf");
|
||||||
const overlaySvg = document.querySelector('.leaflet-overlay-pane svg');
|
|
||||||
let originalTransform = '';
|
|
||||||
if (overlaySvg) {
|
|
||||||
originalTransform = overlaySvg.style.transform;
|
|
||||||
overlaySvg.style.transform = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
html2canvas(viewPdf, {
|
|
||||||
scale: 2,
|
|
||||||
useCORS: true,
|
|
||||||
logging: true
|
|
||||||
}).then(canvas => {
|
|
||||||
const imgData = canvas.toDataURL('image/png');
|
|
||||||
const { jsPDF } = window.jspdf;
|
|
||||||
|
|
||||||
const pdf = new jsPDF('p', 'mm', 'a4');
|
// // find overlay svg (the one holding polylines)
|
||||||
const pageWidth = pdf.internal.pageSize.getWidth();
|
// const overlaySvg = document.querySelector('.leaflet-overlay-pane svg');
|
||||||
const pageHeight = pdf.internal.pageSize.getHeight();
|
// let originalTransform = '';
|
||||||
|
// if (overlaySvg) {
|
||||||
|
// originalTransform = overlaySvg.style.transform;
|
||||||
|
// overlaySvg.style.transform = 'none';
|
||||||
|
// }
|
||||||
|
|
||||||
|
// html2canvas(viewPdf, {
|
||||||
|
// scale: 2,
|
||||||
|
// useCORS: true,
|
||||||
|
// logging: true
|
||||||
|
// }).then(canvas => {
|
||||||
|
// const imgData = canvas.toDataURL('image/png');
|
||||||
|
// const { jsPDF } = window.jspdf;
|
||||||
|
|
||||||
const imgWidth = pageWidth - 20; // margin
|
// const pdf = new jsPDF('p', 'mm', 'a4');
|
||||||
const imgHeight = canvas.height * imgWidth / canvas.width;
|
// const pageWidth = pdf.internal.pageSize.getWidth();
|
||||||
|
// const pageHeight = pdf.internal.pageSize.getHeight();
|
||||||
|
|
||||||
let position = 10;
|
// const imgWidth = pageWidth - 20; // margin
|
||||||
|
// const imgHeight = canvas.height * imgWidth / canvas.width;
|
||||||
|
|
||||||
// 👉 Handle multipage content
|
// let position = 10;
|
||||||
let heightLeft = imgHeight;
|
|
||||||
while (heightLeft > 0) {
|
|
||||||
pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
|
|
||||||
heightLeft -= pageHeight;
|
|
||||||
if (heightLeft > 0) {
|
|
||||||
pdf.addPage();
|
|
||||||
position = 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
pdf.save(`{{$nopol1}} Trip Report {{$start['time']}}.pdf`);
|
|
||||||
|
|
||||||
});
|
// // 👉 Handle multipage content
|
||||||
});
|
// let heightLeft = imgHeight;
|
||||||
|
// while (heightLeft > 0) {
|
||||||
|
// pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
|
||||||
|
// heightLeft -= pageHeight;
|
||||||
|
// if (heightLeft > 0) {
|
||||||
|
// pdf.addPage();
|
||||||
|
// position = 0;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// pdf.save(`{{$nopol1}} Trip Report {{$start['time']}}.pdf`);
|
||||||
|
|
||||||
|
// });
|
||||||
|
}),
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
@extends('app.app')
|
@extends('app.app')
|
||||||
|
|
||||||
@section('title')
|
@section('title')
|
||||||
Vehicles
|
Vehicles Trip Report
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('customcss')
|
@section('customcss')
|
||||||
@ -49,7 +49,7 @@
|
|||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="text-muted">From</label>
|
<label class="text-muted">From</label>
|
||||||
<!-- default today -->
|
<!-- default today -->
|
||||||
<!-- <input class="form-control" id="tgl0" value="25-08-2025 00:00"> -->
|
<!-- <input class="form-control" id="tgl0" value="15-09-2025 00:00"> -->
|
||||||
<input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}">
|
<input class="form-control" id="tgl0" value="{{ date('d-m-Y 00:00') }}">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -202,6 +202,7 @@
|
|||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
|
||||||
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
||||||
|
<script src="{{ asset('assets/vendor/printThis.js') }}"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|||||||
Reference in New Issue
Block a user