File: /var/www/vhost/disk-apps/alq-cali.bikenow.co/resources/views/erp/logs/list.blade.php
@extends('modules.head') @section('contenido')
<style>
/* Ensure that the demo table scrolls */
/* th, */
td {
white-space: nowrap;
}
div.dataTables_wrapper {
height: fit-content;
margin: 0px 10px 0px 10px;
}
.dataTables_scrollBody {
max-height: none !important;
}
pre {
outline: 1px solid #ccc;
padding: 5px;
margin: 5px;
}
.string {
color: green;
}
.number {
color: darkorange;
}
.boolean {
color: blue;
}
.null {
color: magenta;
}
.key {
color: red;
}
.message {
width: 700px !important;
white-space: normal;
}
.data {
width: 5000px !important;
white-space: normal;
}
</style>
<div class="box-header">
<a class="btn btn-app btnReportProducts" onclick="clickExportAll()">
<i class="fa fa-file-excel-o"></i> {{ Lang::get('messages.erp_logs.title_export_all') }}
</a>
</div>
<div class="box">
<div class="box-header">
<h3 class="box-title"><b>{{ Lang::get('messages.erp_logs.filters') }}</b></h3>
<div class="row">
<div class="col-3 col-md-3">
<label for="from_date">{{ Lang::get('messages.erp_logs.filter_start_date') }}</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
placeholder="{{ Lang::get('messages.erp_logs.placeholder_date') }}" name="from_date"
value="" autocomplete="off">
</div>
</div>
<div class="col-3 col-md-3">
<label for="to_date">{{ Lang::get('messages.erp_logs.filter_end_date') }}</label>
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control pull-right"
placeholder="{{ Lang::get('messages.erp_logs.placeholder_date') }}" name="to_date"
value="" autocomplete="off">
</div>
</div>
<div class="col-3 col-md-3">
<label for="origins">{{ Lang::get('messages.erp_logs.origin') }}</label>
<select class="form-control select2" multiple="multiple"
data-placeholder="{{ Lang::get('messages.erp_logs.placeholder_select') }}" name="origins"
value="" required>
@foreach ($origins as $origin)
<option value="{{ $origin->value }}">{{ $origin->name }}</option>
@endforeach
</select>
</div>
<div class="col-3 col-md-3">
<label for="range">{{ Lang::get('complimentary_tickets.filter_dates') }}</label>
<select class="form-control" name="range" id="date-range" onchange="toggleCustomDate()">
<option value="15" {{ request('range') == 15 ? 'selected' : '' }}>Últimos 15 días</option>
<option value="30" {{ request('range') == 30 ? 'selected' : '' }}>Últimos 30 días</option>
<option value="90" {{ request('range') == 90 ? 'selected' : '' }}>Últimos 90 días</option>
<option value="all" {{ request('range') == 'all' ? 'selected' : '' }}>Todas</option>
</select>
<input type="date" name="start_date" id="start-date" value="{{ request('start_date') }}"
style="display:none;">
<input type="date" name="end_date" id="end-date" value="{{ request('end_date') }}"
style="display:none;">
</div>
</div>
<p style="margin-top: 10px; border-bottom: 1px solid #D3D3D3;"></p>
<h3 class="box-title"><b>{{ Lang::get('messages.erp_logs.title_list') }}</b></h3>
</div>
<!-- /.box-header -->
<table id="example2" class="stripe row-border order-column" style="width:100%" role="grid"
aria-describedby="example2_info">
<thead>
<tr role="row">
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.erp_logs.origin') }}
</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.erp_logs.object') }}
</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.erp_logs.data') }}
</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.erp_logs.error') }}
</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.erp_logs.action') }}
</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
aria-label="Browser: activate to sort column ascending">
{{ Lang::get('messages.erp_logs.resolved') }}</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
aria-label="Browser: activate to sort column ascending">{{ Lang::get('messages.erp_logs.date') }}
</th>
<th class="sorting" tabindex="0" aria-controls="example2" rowspan="1" colspan="1"
aria-label="Engine version: activate to sort column ascending">
{{ Lang::get('messages.erp_logs.tag0') }}</th>
</tr>
</thead>
</table>
</div>
<!-- /.box-body -->
</div>
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#start-date").val(moment().subtract(15, 'days').format('YYYY-MM-DD'));
$("#end-date").val(moment().format('YYYY-MM-DD'));
getData();
var info =
'<i class="fa fa-info-circle" id="btn-info-busqueda"></i><div class="dropdown-menu" id="menuBusqueda" style="left: 50%; padding: 5px; background-color: #f9fb8f;"><p data-toggle="modal">Busqueda por Cedula, Nombre y Correo</p></div>';
$('#example2_filter').append(info);
$('#btn-info-busqueda').on('click', function() {
$('#menuBusqueda').toggle();
});
$('.select2').select2();
$.fn.datepicker.dates['en'] = {
days: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'],
daysShort: ['Dom', 'Lun', 'Mar', 'Mié', 'Juv', 'Vie', 'Sáb'],
daysMin: ['Do', 'Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sá'],
months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre',
'Octubre', 'Noviembre', 'Diciembre'
],
monthsShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov',
'Dic'
],
today: "Hoy",
clear: "Clear",
format: "yyyy-mm-dd",
titleFormat: "MM yyyy",
weekStart: 0
};
$("input[name='from_date']").datepicker({
dateFormat: 'yyyy-mm-dd'
});
$("input[name='to_date']").datepicker({
dateFormat: 'yyyy-mm-dd'
});
$("select[name='origins']").on('change', function() {
getData();
});
let from_date;
$("input[name='from_date']").on('change', function(event) {
if ((this.value && from_date != this.value) || (!this.value && from_date)) {
from_date = this.value;
getData();
} else {
filterData("purchasefilterFrom_date", this.value);
}
});
let to_date;
$("input[name='to_date']").on('change', function() {
if ((this.value && to_date != this.value) || (!this.value && to_date)) {
to_date = this.value;
getData();
} else {
filterData("purchasefilterTo_date", this.value);
}
});
});
document.addEventListener('click', function(e) {
if (e.target && e.target.classList.contains('json-toggle')) {
e.preventDefault();
const rowId = e.target.getAttribute('data-row');
const preview = document.querySelector(`pre.json-preview[data-row="${rowId}"]`);
const full = document.querySelector(`pre.json-full[data-row="${rowId}"]`);
if (full.style.display === 'none') {
full.style.display = 'block';
preview.style.display = 'none';
e.target.textContent = 'Ocultar';
} else {
full.style.display = 'none';
preview.style.display = 'block';
e.target.textContent = 'Ver todo';
}
}
});
function getData() {
let origins = $("select[name='origins']").val();
let from_date = $("input[name='start_date']").val() || $("input[name='from_date']").val();
let to_date = $("input[name='end_date']").val() || $("input[name='to_date']").val();
var sort_col = $('#example2').find("th:contains(" + Lang.get('messages.erp_logs.resolved') + ")")[0].cellIndex;
var sort_col_date = $('#example2').find("th:contains(" + Lang.get('messages.erp_logs.date') + ")")[0].cellIndex;
let fixedColumns = false;
let isMobileDevice = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (!isMobileDevice) {
fixedColumns = {
left: 2,
right: 1
};
}
$("#example2").dataTable().fnDestroy();
_table = $('#example2').DataTable({
responsive: true,
processing: true,
serverSide: true,
order: [
[sort_col, 'asc'],
[sort_col_date, 'desc']
],
language: {
url: window.DATATABLES_LANGUAGE_URL,
},
scrollX: true,
scrollCollapse: true,
paging: true,
fixedColumns: fixedColumns,
ajax: {
url: '/erp_logs/list/' + (from_date.length ? from_date : 'null') + '/' + (to_date.length ?
to_date : 'null') + '/' + origins,
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
type: "POST"
},
columns: [{
data: 'origin',
name: 'origin'
},
{
data: 'object',
name: 'data'
},
{
data: 'data',
name: 'data'
},
{
data: 'message',
render: function(data, type, row) {
let prettyJson = '';
try {
const obj = typeof row.message === 'string' ? JSON.parse(row.message) : row
.message;
prettyJson = JSON.stringify(obj, null, 2);
} catch (e) {
prettyJson = row.message;
}
const lines = prettyJson.split('\n');
const previewLines = 5;
const previewText = lines.slice(0, previewLines).join('\n');
if (lines.length <= previewLines) {
return `<pre>${syntaxHighlight(prettyJson)}</pre>`;
}
// Use a unique id or data attribute for each row, e.g. the row id or index
// For example, use row DT_RowId or fallback to a random ID
const rowId = row.DT_RowId || 'row_' + Math.random().toString(36).substr(2, 9);
return `
<pre class="json-preview" data-row="${rowId}" style="margin: 0;padding-bottom: 23px;">${syntaxHighlight(previewText)}<br></pre>
<pre class="json-full" data-row="${rowId}" style="display:none; margin: 0; padding-bottom: 23px;">${syntaxHighlight(prettyJson)}</pre>
<button
type="button"
class="json-toggle"
data-row="${rowId}"
style="color: blue; cursor: pointer; float: left; margin-top: -1.5em; background: none; border: none; font: inherit; text-decoration: underline;"
>
Ver todo
</button>
<div style="clear: both;"></div>
`
},
name: 'message'
},
{
data: 'action',
name: 'action'
},
{
data: 'resolved',
name: 'resolved'
},
{
data: 'created_at',
name: 'created_at'
},
{
data: 'actions',
name: 'actions'
},
]
});
}
function clickExportAll() {
$('#loading').show();
_table = $("#example2").DataTable();
let query = _table.ajax.json().queries[_table.ajax.json().queries.length - 1].query;
let bindings = _table.ajax.json().queries[_table.ajax.json().queries.length - 1].bindings;
query = query.split(' limit ')[0];
var validateDownloadUrl = document.location.origin + "/erp_logs/validateExport";
var downloadUrl = document.location.origin + "/erp_logs/export/";
var formData = new FormData();
formData.append("query", query);
formData.append("bindings", bindings);
$.ajax({
type: "POST",
dataType: "json",
processData: false,
contentType: false,
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
data: formData,
url: validateDownloadUrl,
success: function(response) {
$('#loading').hide();
if (response.success) {
window.location.assign(downloadUrl + response.data);
} else {
swal("Error", response.message, "error");
}
},
error: function(response) {
$('#loading').hide();
swal("Error", response.responseJSON ? response.responseJSON.message :
'Hubo un error en el servidor, espere unos segundos e intente de nuevo', "error");
}
});
}
function copyToClipboard(log) {
let data = log.getAttribute("data-operation");
var temp = $("<input>");
$("body").append(temp);
temp.val(data).select();
document.execCommand("copy");
temp.remove();
}
function retrySyncERP(id) {
$('#loading').show();
var retrySyncERP = document.location.origin + "/erp_logs/retrySyncERP";
var formData = new FormData();
formData.append("id", id);
$.ajax({
type: "POST",
dataType: "json",
processData: false,
contentType: false,
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
},
data: formData,
url: retrySyncERP,
success: function(response) {
$('#loading').hide();
swal("Ok", response.message, 'success');
},
error: function(response) {
$('#loading').hide();
swal("Error", response.responseJSON ? response.responseJSON.message :
'Hubo un error en el servidor, espere unos segundos e intente de nuevo', "error");
}
});
}
function syntaxHighlight(json) {
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>";
}
);
}
function toggleCustomDate() {
let range = document.getElementById("date-range").value;
switch (range) {
case "15":
$("#start-date").val(moment().subtract(15, 'days').format('YYYY-MM-DD'));
$("#end-date").val(moment().format('YYYY-MM-DD'));
break;
case "30":
$("#start-date").val(moment().subtract(30, 'days').format('YYYY-MM-DD'));
$("#end-date").val(moment().format('YYYY-MM-DD'));
break;
case "90":
$("#start-date").val(moment().subtract(90, 'days').format('YYYY-MM-DD'));
$("#end-date").val(moment().format('YYYY-MM-DD'));
break;
case "all":
$("#start-date").val("");
$("#end-date").val("");
break;
}
getData();
}
</script>
@endsection