501 lines
20 KiB
PHP
501 lines
20 KiB
PHP
<?php include('include/headscript.php'); ?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!--favicon-->
|
|
<link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
|
|
<?php include('cssinclude.php'); ?>
|
|
<title>TRF-Project - Template Dashboard</title>
|
|
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
|
|
<style>
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 34px;
|
|
height: 20px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
transition: .4s;
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 12px;
|
|
width: 12px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked+.slider {
|
|
background-color: #4CAF50;
|
|
}
|
|
|
|
input:checked+.slider:before {
|
|
transform: translateX(14px);
|
|
}
|
|
|
|
.badge-source {
|
|
font-size: 11px;
|
|
padding: 0.30rem 0.55rem;
|
|
border-radius: 999px;
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
min-width: 50px;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.badge-source-xls {
|
|
background-color: #e7f1ff;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.badge-source-api {
|
|
background-color: #e8fff1;
|
|
color: #198754;
|
|
}
|
|
|
|
.badge-source-pdf {
|
|
background-color: #fff3cd;
|
|
color: #b58100;
|
|
}
|
|
|
|
.type-filter-bar {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.type-filter-btn {
|
|
border: 0;
|
|
border-radius: 999px;
|
|
padding: 7px 14px;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
opacity: 0.35;
|
|
transition: all 0.15s ease-in-out;
|
|
}
|
|
|
|
.type-filter-btn.active {
|
|
opacity: 1;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.type-filter-btn[data-type="XLS"] {
|
|
background-color: #0d6efd;
|
|
}
|
|
|
|
.type-filter-btn[data-type="API"] {
|
|
background-color: #198754;
|
|
}
|
|
|
|
.type-filter-btn[data-type="PDF"] {
|
|
background-color: #b58100;
|
|
}
|
|
|
|
.type-filter-btn:hover {
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
#xlsTemplatesTable {
|
|
font-size: 13px;
|
|
}
|
|
|
|
#xlsTemplatesTable th,
|
|
#xlsTemplatesTable td {
|
|
vertical-align: middle;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#xlsTemplatesTable td.description-cell,
|
|
#xlsTemplatesTable td.client-cell,
|
|
#xlsTemplatesTable td.name-cell,
|
|
#xlsTemplatesTable td.button-cell {
|
|
white-space: normal;
|
|
}
|
|
|
|
.table-actions {
|
|
min-width: 120px;
|
|
}
|
|
|
|
.table-actions .btn {
|
|
padding: 0.25rem 0.45rem;
|
|
}
|
|
|
|
.compact-card .card-body {
|
|
padding: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!--wrapper-->
|
|
<div class="wrapper">
|
|
<!--sidebar wrapper -->
|
|
<?php include('include/navbar.php'); ?>
|
|
<!--end sidebar wrapper -->
|
|
|
|
<!--start header -->
|
|
<?php include('include/topbar.php'); ?>
|
|
<!--end header -->
|
|
|
|
<!--start page wrapper -->
|
|
<div class="page-wrapper">
|
|
<div class="page-content">
|
|
<?php include('top_stat_widget.php'); ?>
|
|
|
|
<div class="card radius-10 compact-card">
|
|
<div class="card-header">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<h6 class="mb-0">Templates Dashboard</h6>
|
|
<a href="insert_template_xls.php" class="btn btn-success ms-auto">
|
|
<i class="fas fa-plus"></i> New Template
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
|
|
<div class="type-filter-bar">
|
|
<span class="text-muted fw-semibold me-1">Filter by type:</span>
|
|
|
|
<button type="button" class="type-filter-btn active" data-type="XLS">
|
|
XLS
|
|
</button>
|
|
|
|
<button type="button" class="type-filter-btn active" data-type="API">
|
|
JSON/API
|
|
</button>
|
|
|
|
<button type="button" class="type-filter-btn active" data-type="PDF">
|
|
PDF
|
|
</button>
|
|
</div>
|
|
|
|
<div class="table-responsive">
|
|
<table id="xlsTemplatesTable" class="table table-striped table-bordered align-middle w-100">
|
|
<thead>
|
|
<tr>
|
|
<th>Actions</th>
|
|
<th>Template Name</th>
|
|
<th>Type</th>
|
|
<th>Row</th>
|
|
<th>Col</th>
|
|
<th>Description</th>
|
|
<th>Client</th>
|
|
<th>Button</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!--end page wrapper -->
|
|
|
|
<!--start overlay-->
|
|
<div class="overlay toggle-icon"></div>
|
|
<!--end overlay-->
|
|
|
|
<!--Start Back To Top Button-->
|
|
<a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a>
|
|
<!--End Back To Top Button-->
|
|
|
|
<?php include('include/footer.php'); ?>
|
|
</div>
|
|
<!--end wrapper-->
|
|
|
|
<?php include('jsinclude.php'); ?>
|
|
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
|
|
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
|
|
if (urlParams.get('cloned') === '1') {
|
|
Swal.fire({
|
|
title: "Template cloned",
|
|
text: "The template was cloned successfully.",
|
|
icon: "success",
|
|
confirmButtonText: "OK"
|
|
});
|
|
|
|
const cleanUrl = window.location.pathname;
|
|
window.history.replaceState({}, document.title, cleanUrl);
|
|
}
|
|
const templatesTable = $('#xlsTemplatesTable').DataTable({
|
|
processing: true,
|
|
serverSide: false,
|
|
ajax: 'load_templates.php',
|
|
pageLength: 50,
|
|
autoWidth: false,
|
|
columns: [{
|
|
data: 'id',
|
|
orderable: false,
|
|
searchable: false,
|
|
title: "Actions",
|
|
className: "table-actions text-center",
|
|
render: function(data, type, row) {
|
|
return `
|
|
<div class="d-flex justify-content-center gap-1">
|
|
<a href="edit_template_xls.php?id=${data}" class="btn btn-sm btn-primary" title="Edit">
|
|
<i class="bx bx-edit-alt"></i>
|
|
</a>
|
|
|
|
<a href="mapping_template_xls_scheme2.php?id=${data}" class="btn btn-sm btn-success" title="Mapping">
|
|
<i class="bx bx-link-alt"></i>
|
|
</a>
|
|
|
|
<button class="btn btn-sm btn-warning" onclick="confirmClone(${data}, '${String(row.name || '').replace(/'/g, "\\'")}')" title="Clone">
|
|
<i class="bx bx-copy"></i>
|
|
</button>
|
|
|
|
<button class="btn btn-sm btn-danger" onclick="confirmDelete(${data})" title="Delete">
|
|
<i class="bx bx-trash"></i>
|
|
</button>
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
{
|
|
data: 'name',
|
|
title: "Template Name",
|
|
className: "name-cell"
|
|
},
|
|
{
|
|
data: 'source_type',
|
|
title: "Type",
|
|
className: "text-center",
|
|
render: function(data, type, row) {
|
|
let sourceType = (data || 'XLS').toUpperCase();
|
|
|
|
// Treat JSON as API group for dashboard filter
|
|
if (sourceType === 'JSON') {
|
|
sourceType = 'API';
|
|
}
|
|
|
|
if (type === 'display') {
|
|
if (sourceType === 'API') {
|
|
return '<span class="badge-source badge-source-api">JSON/API</span>';
|
|
}
|
|
|
|
if (sourceType === 'PDF') {
|
|
return '<span class="badge-source badge-source-pdf">PDF</span>';
|
|
}
|
|
|
|
return '<span class="badge-source badge-source-xls">XLS</span>';
|
|
}
|
|
|
|
return sourceType;
|
|
}
|
|
},
|
|
{
|
|
data: 'header_row',
|
|
title: "Row",
|
|
className: "text-center",
|
|
defaultContent: ''
|
|
},
|
|
{
|
|
data: 'start_column',
|
|
title: "Col",
|
|
className: "text-center",
|
|
defaultContent: ''
|
|
},
|
|
{
|
|
data: 'description',
|
|
title: "Description",
|
|
className: "description-cell",
|
|
defaultContent: 'No description'
|
|
},
|
|
{
|
|
data: null,
|
|
title: "Client",
|
|
className: "client-cell",
|
|
render: function(data, type, row) {
|
|
const clientName = row.clientname || "No client";
|
|
const clientId = row.idclient || "N/A";
|
|
return `${clientName} <small class="text-muted">(ID: ${clientId})</small>`;
|
|
}
|
|
},
|
|
{
|
|
data: 'button_label',
|
|
title: "Button",
|
|
className: "button-cell",
|
|
defaultContent: 'Click Me'
|
|
},
|
|
{
|
|
data: 'status',
|
|
title: "Status",
|
|
orderable: false,
|
|
searchable: false,
|
|
className: "text-center",
|
|
render: function(status, type, row) {
|
|
let checked = (status === "active") ? "checked" : "";
|
|
return `
|
|
<label class="switch">
|
|
<input type="checkbox" class="toggle-status" data-id="${row.id}" ${checked}>
|
|
<span class="slider round"></span>
|
|
</label>
|
|
`;
|
|
}
|
|
}
|
|
],
|
|
dom: '<"card-header border-bottom p-3"<"d-flex align-items-center"<"card-title mb-0 flex-grow-1"f>>>rt<"card-footer border-top p-3"<"d-flex align-items-center"<"me-auto"l><"d-flex gap-2"ip>>>',
|
|
lengthMenu: [10, 25, 50, 100],
|
|
order: [
|
|
[1, 'asc']
|
|
],
|
|
language: {
|
|
search: "Cerca:",
|
|
lengthMenu: "Mostra _MENU_ elementi",
|
|
info: "Visualizzando da _START_ a _END_ di _TOTAL_ elementi",
|
|
paginate: {
|
|
first: "<?= isset($langdatatables['paginate_first']) ? $langdatatables['paginate_first'] : 'Primo' ?>",
|
|
last: "<?= isset($langdatatables['paginate_last']) ? $langdatatables['paginate_last'] : 'Ultimo' ?>",
|
|
next: "<?= isset($langdatatables['paginate_next']) ? $langdatatables['paginate_next'] : 'Successivo' ?>",
|
|
previous: "<?= isset($langdatatables['paginate_previous']) ? $langdatatables['paginate_previous'] : 'Precedente' ?>"
|
|
}
|
|
}
|
|
});
|
|
const activeSourceTypes = {
|
|
XLS: true,
|
|
API: true,
|
|
PDF: true
|
|
};
|
|
|
|
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
|
|
if (settings.nTable.id !== 'xlsTemplatesTable') {
|
|
return true;
|
|
}
|
|
|
|
const api = new $.fn.dataTable.Api(settings);
|
|
const rowData = api.row(dataIndex).data();
|
|
|
|
let sourceType = ((rowData && rowData.source_type) ? rowData.source_type : 'XLS').toUpperCase();
|
|
|
|
if (sourceType === 'JSON') {
|
|
sourceType = 'API';
|
|
}
|
|
|
|
return activeSourceTypes[sourceType] === true;
|
|
});
|
|
|
|
$('.type-filter-btn').on('click', function() {
|
|
const type = $(this).data('type');
|
|
|
|
activeSourceTypes[type] = !activeSourceTypes[type];
|
|
$(this).toggleClass('active', activeSourceTypes[type]);
|
|
|
|
const hasAtLeastOneActive = Object.values(activeSourceTypes).some(Boolean);
|
|
|
|
if (!hasAtLeastOneActive) {
|
|
activeSourceTypes[type] = true;
|
|
$(this).addClass('active');
|
|
}
|
|
|
|
$('#xlsTemplatesTable').DataTable().draw();
|
|
});
|
|
});
|
|
|
|
function confirmDelete(id) {
|
|
Swal.fire({
|
|
title: "Are you sure?",
|
|
text: "This action cannot be undone!",
|
|
icon: "warning",
|
|
showCancelButton: true,
|
|
confirmButtonColor: "#d33",
|
|
cancelButtonColor: "#3085d6",
|
|
confirmButtonText: "Yes, delete it!",
|
|
cancelButtonText: "Cancel"
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
window.location.href = `delete_template_xls.php?id=${id}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
function confirmClone(id, templateName) {
|
|
Swal.fire({
|
|
title: "Clone template?",
|
|
html: `
|
|
<div class="text-start">
|
|
<p class="mb-2">You are about to clone this template:</p>
|
|
<strong>${templateName}</strong>
|
|
<p class="mt-3 mb-0 text-muted">
|
|
The new template will be created as <strong>Copia di ${templateName}</strong> and all mappings will be copied.
|
|
</p>
|
|
</div>
|
|
`,
|
|
icon: "question",
|
|
showCancelButton: true,
|
|
confirmButtonColor: "#ffc107",
|
|
cancelButtonColor: "#6c757d",
|
|
confirmButtonText: "Yes, clone it",
|
|
cancelButtonText: "Cancel"
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
window.location.href = `clone_template.php?id=${id}`;
|
|
}
|
|
});
|
|
}
|
|
|
|
$(document).on("change", ".toggle-status", function() {
|
|
let templateId = $(this).data("id");
|
|
let newStatus = $(this).is(":checked") ? "active" : "inactive";
|
|
|
|
$.ajax({
|
|
url: "update_template_status.php",
|
|
type: "POST",
|
|
dataType: "json",
|
|
data: {
|
|
id: templateId,
|
|
status: newStatus
|
|
},
|
|
success: function(response) {
|
|
if (response.success) {
|
|
console.log("Status updated successfully.");
|
|
} else {
|
|
console.error("Error updating status:", response.message);
|
|
alert("Error updating status: " + response.message);
|
|
}
|
|
},
|
|
error: function(xhr) {
|
|
console.error("AJAX error:", xhr.responseText);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|