473 lines
17 KiB
PHP
473 lines
17 KiB
PHP
<?php include('include/headscript.php'); ?>
|
|
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="icon" href="assets/images/favicon-32x32.png" type="image/png" />
|
|
<?php include('cssinclude.php'); ?>
|
|
<title>Template Buttons - <?= htmlspecialchars($titlewebsite, ENT_QUOTES, 'UTF-8'); ?></title>
|
|
|
|
<style>
|
|
/* Main buttons container */
|
|
.template-buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
justify-content: flex-start;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
/* Button sizes */
|
|
.btn-small {
|
|
font-size: 12px;
|
|
padding: 6px 12px;
|
|
min-width: 100px;
|
|
min-height: 36px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-medium {
|
|
font-size: 16px;
|
|
padding: 10px 20px;
|
|
min-width: 140px;
|
|
min-height: 48px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-radius: 10px;
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-large {
|
|
font-size: 20px;
|
|
padding: 14px 28px;
|
|
min-width: 190px;
|
|
min-height: 64px;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 10px;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.template-icon {
|
|
font-size: 18px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.btn-large .template-icon {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.btn-small .template-icon {
|
|
font-size: 15px;
|
|
}
|
|
|
|
/* Search box */
|
|
#searchInput {
|
|
width: 100%;
|
|
padding: 10px 14px;
|
|
font-size: 16px;
|
|
margin-bottom: 18px;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius: 8px;
|
|
outline: none;
|
|
}
|
|
|
|
#searchInput:focus {
|
|
border-color: #0d6efd;
|
|
box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.15);
|
|
}
|
|
|
|
/* Tabs */
|
|
.custom-tabs {
|
|
border-bottom: 1px solid #e5e5e5;
|
|
margin-bottom: 20px;
|
|
gap: 6px;
|
|
}
|
|
|
|
.custom-tabs .nav-link {
|
|
border: none;
|
|
border-radius: 10px 10px 0 0;
|
|
color: #555;
|
|
font-weight: 500;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 18px;
|
|
}
|
|
|
|
.custom-tabs .nav-link:hover {
|
|
background: #f8f9fa;
|
|
color: #0d6efd;
|
|
}
|
|
|
|
.custom-tabs .nav-link.active {
|
|
background: #0d6efd;
|
|
color: #fff;
|
|
}
|
|
|
|
.tab-pane {
|
|
min-height: 140px;
|
|
}
|
|
|
|
.empty-message {
|
|
color: #6c757d;
|
|
font-style: italic;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.loading-message {
|
|
color: #6c757d;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #6c757d;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
width: 100%;
|
|
margin-top: 6px;
|
|
margin-bottom: 2px;
|
|
padding-bottom: 4px;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.section-title:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.template-btn-wrapper {
|
|
position: relative;
|
|
display: inline-flex;
|
|
}
|
|
|
|
.favorite-star {
|
|
position: absolute;
|
|
top: -6px;
|
|
right: -6px;
|
|
width: 22px;
|
|
height: 22px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
font-size: 13px;
|
|
color: #ccc;
|
|
z-index: 2;
|
|
transition: color 0.15s, transform 0.15s;
|
|
}
|
|
|
|
.favorite-star:hover {
|
|
transform: scale(1.15);
|
|
}
|
|
|
|
.favorite-star.active {
|
|
color: #ffc107;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<?php include('include/popup.php'); ?>
|
|
<div class="wrapper">
|
|
<?php include('include/navbar.php'); ?>
|
|
<?php include('include/topbar.php'); ?>
|
|
|
|
<div class="page-wrapper">
|
|
<div class="page-content">
|
|
<?php include('top_stat_widget.php'); ?>
|
|
|
|
<div class="card radius-10">
|
|
<div class="card-header">
|
|
<h6 class="mb-0">Active Templates</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<input type="text" id="searchInput" placeholder="Search template...">
|
|
|
|
<ul class="nav nav-tabs custom-tabs" id="templateTabs" role="tablist">
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link active" id="xls-tab" data-bs-toggle="tab" data-bs-target="#xls-pane" type="button" role="tab" aria-controls="xls-pane" aria-selected="true">
|
|
<i class="bx bx-spreadsheet template-icon"></i>
|
|
XLS
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="api-tab" data-bs-toggle="tab" data-bs-target="#api-pane" type="button" role="tab" aria-controls="api-pane" aria-selected="false">
|
|
<i class="bx bx-transfer-alt template-icon"></i>
|
|
JSON/API
|
|
</button>
|
|
</li>
|
|
<li class="nav-item" role="presentation">
|
|
<button class="nav-link" id="pdf-tab" data-bs-toggle="tab" data-bs-target="#pdf-pane" type="button" role="tab" aria-controls="pdf-pane" aria-selected="false">
|
|
<i class="bx bx-file-pdf template-icon"></i>
|
|
PDF
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="templateTabsContent">
|
|
<div class="tab-pane fade show active" id="xls-pane" role="tabpanel" aria-labelledby="xls-tab">
|
|
<div id="templateButtonsXLS" class="template-buttons">
|
|
<div class="loading-message">Loading XLS templates...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="api-pane" role="tabpanel" aria-labelledby="api-tab">
|
|
<div id="templateButtonsAPI" class="template-buttons">
|
|
<div class="loading-message">Loading API templates...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="tab-pane fade" id="pdf-pane" role="tabpanel" aria-labelledby="pdf-tab">
|
|
<div id="templateButtonsPDF" class="template-buttons">
|
|
<div class="loading-message">Loading PDF templates...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overlay toggle-icon"></div>
|
|
<a href="javaScript:;" class="back-to-top"><i class='bx bxs-up-arrow-alt'></i></a>
|
|
<?php include('include/footer.php'); ?>
|
|
</div>
|
|
|
|
<?php include('jsinclude.php'); ?>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const allTemplates = [];
|
|
|
|
const containers = {
|
|
XLS: document.getElementById("templateButtonsXLS"),
|
|
API: document.getElementById("templateButtonsAPI"),
|
|
PDF: document.getElementById("templateButtonsPDF")
|
|
};
|
|
|
|
function getSizeClass(buttonSize) {
|
|
if (buttonSize === "small") return "btn-small";
|
|
if (buttonSize === "large") return "btn-large";
|
|
return "btn-medium";
|
|
}
|
|
|
|
function getTemplateIcon(sourceType) {
|
|
switch ((sourceType || '').toUpperCase()) {
|
|
case 'XLS':
|
|
return 'bx bx-spreadsheet';
|
|
case 'API':
|
|
return 'bx bx-transfer-alt';
|
|
case 'PDF':
|
|
return 'bx bx-file-pdf';
|
|
default:
|
|
return 'bx bx-file';
|
|
}
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function createButtonWrapper(template) {
|
|
const sizeClass = getSizeClass(template.button_size);
|
|
const sourceType = (template.source_type || '').toUpperCase();
|
|
const iconClass = getTemplateIcon(sourceType);
|
|
const isFavorite = !!parseInt(template.is_favorite);
|
|
|
|
const wrapper = document.createElement("div");
|
|
wrapper.className = "template-btn-wrapper";
|
|
|
|
const btn = document.createElement("a");
|
|
btn.href = (sourceType === 'PDF') ?
|
|
`import_pdf.php?id=${template.id}` :
|
|
`import_xls2.php?id=${template.id}`;
|
|
btn.className = `btn ${sizeClass}`;
|
|
btn.style.backgroundColor = template.button_bg_color || '#0d6efd';
|
|
btn.style.color = template.button_text_color || '#ffffff';
|
|
btn.setAttribute("data-label", (template.button_label || '').toLowerCase());
|
|
btn.setAttribute("data-source-type", sourceType);
|
|
|
|
btn.innerHTML = `
|
|
<i class="${iconClass} template-icon"></i>
|
|
<span>${escapeHtml(template.button_label || 'Unnamed')}</span>
|
|
`;
|
|
|
|
const star = document.createElement("span");
|
|
star.className = "favorite-star" + (isFavorite ? " active" : "");
|
|
star.innerHTML = `<i class="bx ${isFavorite ? 'bxs-star' : 'bx-star'}"></i>`;
|
|
star.setAttribute("data-template-id", template.id);
|
|
star.title = isFavorite ? "Rimuovi dai preferiti" : "Aggiungi ai preferiti";
|
|
|
|
star.addEventListener("click", function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
toggleFavorite(template.id);
|
|
});
|
|
|
|
wrapper.appendChild(btn);
|
|
wrapper.appendChild(star);
|
|
|
|
return wrapper;
|
|
}
|
|
|
|
function toggleFavorite(templateId) {
|
|
const template = allTemplates.find(t => String(t.id) === String(templateId));
|
|
if (!template) return;
|
|
|
|
const newState = !parseInt(template.is_favorite);
|
|
|
|
// Optimistic update
|
|
template.is_favorite = newState ? 1 : 0;
|
|
renderTemplates(document.getElementById("searchInput").value.toLowerCase().trim());
|
|
|
|
fetch("toggle_template_favorite.php", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify({
|
|
template_id: templateId,
|
|
is_favorite: newState
|
|
})
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (!data.success) {
|
|
console.error("Failed to toggle favorite:", data.message);
|
|
// Rollback in caso di errore
|
|
template.is_favorite = newState ? 0 : 1;
|
|
renderTemplates(document.getElementById("searchInput").value.toLowerCase().trim());
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error("Fetch error toggling favorite:", error);
|
|
template.is_favorite = newState ? 0 : 1;
|
|
renderTemplates(document.getElementById("searchInput").value.toLowerCase().trim());
|
|
});
|
|
}
|
|
|
|
function clearContainers() {
|
|
Object.values(containers).forEach(container => {
|
|
container.innerHTML = '';
|
|
});
|
|
}
|
|
|
|
function renderSection(container, title, templates) {
|
|
if (templates.length === 0) return;
|
|
|
|
const heading = document.createElement("div");
|
|
heading.className = "section-title";
|
|
heading.textContent = title;
|
|
container.appendChild(heading);
|
|
|
|
const group = document.createElement("div");
|
|
group.className = "template-buttons";
|
|
group.style.marginTop = "0";
|
|
group.style.paddingTop = "0";
|
|
|
|
templates.forEach(template => {
|
|
group.appendChild(createButtonWrapper(template));
|
|
});
|
|
|
|
container.appendChild(group);
|
|
}
|
|
|
|
function renderTemplates(searchValue = '') {
|
|
clearContainers();
|
|
|
|
const grouped = {
|
|
XLS: [],
|
|
API: [],
|
|
PDF: []
|
|
};
|
|
|
|
allTemplates.forEach(template => {
|
|
const sourceType = (template.source_type || '').toUpperCase();
|
|
const label = (template.button_label || '').toLowerCase();
|
|
|
|
if (searchValue && !label.includes(searchValue)) {
|
|
return;
|
|
}
|
|
|
|
if (grouped[sourceType]) {
|
|
grouped[sourceType].push(template);
|
|
}
|
|
});
|
|
|
|
Object.keys(grouped).forEach(type => {
|
|
const container = containers[type];
|
|
if (!container) return;
|
|
|
|
if (grouped[type].length === 0) {
|
|
container.innerHTML = `<div class="empty-message">No templates found in this section.</div>`;
|
|
return;
|
|
}
|
|
|
|
const favorites = grouped[type].filter(t => parseInt(t.is_favorite) === 1);
|
|
const others = grouped[type].filter(t => parseInt(t.is_favorite) !== 1);
|
|
|
|
renderSection(container, "★ Preferiti", favorites);
|
|
renderSection(container, "Altri", others);
|
|
});
|
|
}
|
|
|
|
fetch("load_active_templates.php")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (!data.success) {
|
|
console.error("Error loading templates:", data.message);
|
|
clearContainers();
|
|
Object.values(containers).forEach(container => {
|
|
container.innerHTML = `<div class="empty-message">Error loading templates.</div>`;
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!Array.isArray(data.data)) {
|
|
clearContainers();
|
|
Object.values(containers).forEach(container => {
|
|
container.innerHTML = `<div class="empty-message">Invalid response format.</div>`;
|
|
});
|
|
return;
|
|
}
|
|
|
|
allTemplates.push(...data.data);
|
|
renderTemplates();
|
|
})
|
|
.catch(error => {
|
|
console.error("Fetch error:", error);
|
|
clearContainers();
|
|
Object.values(containers).forEach(container => {
|
|
container.innerHTML = `<div class="empty-message">Fetch error while loading templates.</div>`;
|
|
});
|
|
});
|
|
|
|
document.getElementById("searchInput").addEventListener("input", function() {
|
|
const searchValue = this.value.toLowerCase().trim();
|
|
renderTemplates(searchValue);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|