344 lines
12 KiB
PHP
344 lines
12 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;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<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 createButton(template) {
|
|
const sizeClass = getSizeClass(template.button_size);
|
|
const sourceType = (template.source_type || '').toUpperCase();
|
|
const iconClass = getTemplateIcon(sourceType);
|
|
|
|
const btn = document.createElement("a");
|
|
btn.href = `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>
|
|
`;
|
|
|
|
return btn;
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function clearContainers() {
|
|
Object.values(containers).forEach(container => {
|
|
container.innerHTML = '';
|
|
});
|
|
}
|
|
|
|
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;
|
|
}
|
|
|
|
grouped[type].forEach(template => {
|
|
container.appendChild(createButton(template));
|
|
});
|
|
});
|
|
}
|
|
|
|
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>
|