TRF Certest first commit
This commit is contained in:
@@ -0,0 +1,765 @@
|
||||
<?php include('include/headscript.php'); ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Title -->
|
||||
<title> Edmate Learning Dashboard HTML Template</title>
|
||||
<!-- Favicon -->
|
||||
<link rel="shortcut icon" href="assets/images/logo/favicon.png">
|
||||
<?php include('cssinclude.php'); ?>
|
||||
<style>
|
||||
.min-h-200 {
|
||||
min-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.list-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
margin-bottom: 8px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.list-item.selected {
|
||||
background-color: #e6f0ff;
|
||||
color: #3D7FF9;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.binding-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px;
|
||||
margin-bottom: 8px;
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.binding-item .remove-btn {
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<!--==================== Preloader Start ====================-->
|
||||
<div class="preloader">
|
||||
<div class="loader"></div>
|
||||
</div>
|
||||
<!--==================== Preloader End ====================-->
|
||||
|
||||
<!--==================== Sidebar Overlay End ====================-->
|
||||
<div class="side-overlay"></div>
|
||||
<!--==================== Sidebar Overlay End ====================-->
|
||||
|
||||
<!-- ============================ Sidebar Start ============================ -->
|
||||
|
||||
<?php include('include/navbar.php'); ?>
|
||||
<!-- ============================ Sidebar End ============================ -->
|
||||
|
||||
<div class="dashboard-main-wrapper">
|
||||
<?php include('include/topbar.php'); ?>
|
||||
|
||||
|
||||
<div class="dashboard-body">
|
||||
|
||||
<div class="row gy-4">
|
||||
<div class="col-lg-12">
|
||||
<!-- Top Course Start -->
|
||||
<div class="card mt-24">
|
||||
<div class="card-body">
|
||||
<div class="mb-20 flex-between flex-wrap gap-8">
|
||||
<h5 class="mb-0">XLS TEMPLATE</h5>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row gy-4">
|
||||
<!-- Sezione per caricare il file Excel -->
|
||||
<div class="col-12">
|
||||
<div class="mb-20">
|
||||
<label for="excelFile" class="form-label">Carica il file Excel</label>
|
||||
<input type="file" id="excelFile" class="form-control" accept=".xls,.xlsx" onchange="loadExcelColumns()">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sezione con due liste verticali e pulsante centrale -->
|
||||
<div class="col-lg-5">
|
||||
<h5 class="mb-12">Colonne Excel</h5>
|
||||
<div id="xlsColumns" class="border border-gray-100 rounded-8 p-16 min-h-200">
|
||||
<!-- Liste generate dinamicamente -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-2 flex-center">
|
||||
<button id="pairButton" class="btn btn-outline-main rounded-pill py-9" disabled onclick="addBinding()">Aggiungi</button>
|
||||
</div>
|
||||
<div class="col-lg-5">
|
||||
<h5 class="mb-12">Colonne MySQL</h5>
|
||||
<div id="mysqlColumns" class="border border-gray-100 rounded-8 p-16 min-h-200">
|
||||
<!-- Liste generate dinamicamente -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sezione per visualizzare i binding -->
|
||||
<div class="col-12">
|
||||
<h5 class="mb-12">Binding Creati</h5>
|
||||
<div id="bindingContainer" class="border border-gray-100 rounded-8 p-16 min-h-100">
|
||||
<ul id="bindingList" class="list-unstyled"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pulsante per salvare il template -->
|
||||
<div class="col-12 text-end">
|
||||
<button class="btn btn-main rounded-pill py-9" onclick="saveTemplate()">Salva Template</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- Top Course End -->
|
||||
|
||||
<!-- Top Course Start -->
|
||||
<div class="card mt-24">
|
||||
<div class="card-body">
|
||||
<div class="mb-20 flex-between flex-wrap gap-8">
|
||||
<h4 class="mb-0">Top Courses Pick for You</h4>
|
||||
<a href="student-courses.html" class="text-13 fw-medium text-main-600 hover-text-decoration-underline">See All</a>
|
||||
</div>
|
||||
|
||||
<div class="row g-20">
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div class="card border border-gray-100">
|
||||
<div class="card-body p-8">
|
||||
<a href="course-details.html" class="bg-main-100 rounded-8 overflow-hidden text-center mb-8 h-164 flex-center p-8">
|
||||
<img src="assets/images/thumbs/course-img1.png" alt="Course Image">
|
||||
</a>
|
||||
<div class="p-8">
|
||||
<span class="text-13 py-2 px-10 rounded-pill bg-success-50 text-success-600 mb-16">Development</span>
|
||||
<h5 class="mb-0"><a href="course-details.html" class="hover-text-main-600">Full Stack Web Development</a></h5>
|
||||
|
||||
<div class="flex-align gap-8 flex-wrap mt-16">
|
||||
<img src="assets/images/thumbs/user-img1.png" class="w-28 h-28 rounded-circle object-fit-cover" alt="User Image">
|
||||
<div>
|
||||
<span class="text-gray-600 text-13">Created by <a href="profile.html" class="fw-semibold text-gray-700 hover-text-main-600 hover-text-decoration-underline">Albert James</a> </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-align gap-8 mt-12 pt-12 border-top border-gray-100">
|
||||
<div class="flex-align gap-4">
|
||||
<span class="text-sm text-main-600 d-flex"><i class="ph ph-video-camera"></i></span>
|
||||
<span class="text-13 text-gray-600">24 Lesson</span>
|
||||
</div>
|
||||
<div class="flex-align gap-4">
|
||||
<span class="text-sm text-main-600 d-flex"><i class="ph ph-clock"></i></span>
|
||||
<span class="text-13 text-gray-600">40 Hours</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-between gap-4 flex-wrap mt-24">
|
||||
<div class="flex-align gap-4">
|
||||
<span class="text-15 fw-bold text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
|
||||
<span class="text-13 fw-bold text-gray-600">4.9</span>
|
||||
<span class="text-13 fw-bold text-gray-600">(12k)</span>
|
||||
</div>
|
||||
<a href="course-details.html" class="btn btn-outline-main rounded-pill py-9">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div class="card border border-gray-100">
|
||||
<div class="card-body p-8">
|
||||
<a href="course-details.html" class="bg-main-100 rounded-8 overflow-hidden text-center mb-8 h-164 flex-center p-8">
|
||||
<img src="assets/images/thumbs/course-img5.png" alt="Course Image">
|
||||
</a>
|
||||
<div class="p-8">
|
||||
<span class="text-13 py-2 px-10 rounded-pill bg-warning-50 text-warning-600 mb-16">Design</span>
|
||||
<h5 class="mb-0"><a href="course-details.html" class="hover-text-main-600">Design System</a></h5>
|
||||
|
||||
<div class="flex-align gap-8 flex-wrap mt-16">
|
||||
<img src="assets/images/thumbs/user-img5.png" class="w-28 h-28 rounded-circle object-fit-cover" alt="User Image">
|
||||
<div>
|
||||
<span class="text-gray-600 text-13">Created by <a href="profile.html" class="fw-semibold text-gray-700 hover-text-main-600 hover-text-decoration-underline">Albert James</a> </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-align gap-8 mt-12 pt-12 border-top border-gray-100">
|
||||
<div class="flex-align gap-4">
|
||||
<span class="text-sm text-main-600 d-flex"><i class="ph ph-video-camera"></i></span>
|
||||
<span class="text-13 text-gray-600">24 Lesson</span>
|
||||
</div>
|
||||
<div class="flex-align gap-4">
|
||||
<span class="text-sm text-main-600 d-flex"><i class="ph ph-clock"></i></span>
|
||||
<span class="text-13 text-gray-600">40 Hours</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-between gap-4 flex-wrap mt-24">
|
||||
<div class="flex-align gap-4">
|
||||
<span class="text-15 fw-bold text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
|
||||
<span class="text-13 fw-bold text-gray-600">4.9</span>
|
||||
<span class="text-13 fw-bold text-gray-600">(12k)</span>
|
||||
</div>
|
||||
<a href="course-details.html" class="btn btn-outline-main rounded-pill py-9">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<div class="card border border-gray-100">
|
||||
<div class="card-body p-8">
|
||||
<a href="course-details.html" class="bg-main-100 rounded-8 overflow-hidden text-center mb-8 h-164 flex-center p-8">
|
||||
<img src="assets/images/thumbs/course-img6.png" alt="Course Image">
|
||||
</a>
|
||||
<div class="p-8">
|
||||
<span class="text-13 py-2 px-10 rounded-pill bg-danger-50 text-danger-600 mb-16">Frontend</span>
|
||||
<h5 class="mb-0"><a href="course-details.html" class="hover-text-main-600">React Native Courese</a></h5>
|
||||
|
||||
<div class="flex-align gap-8 flex-wrap mt-16">
|
||||
<img src="assets/images/thumbs/user-img6.png" class="w-28 h-28 rounded-circle object-fit-cover" alt="User Image">
|
||||
<div>
|
||||
<span class="text-gray-600 text-13">Created by <a href="profile.html" class="fw-semibold text-gray-700 hover-text-main-600 hover-text-decoration-underline">Albert James</a> </span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-align gap-8 mt-12 pt-12 border-top border-gray-100">
|
||||
<div class="flex-align gap-4">
|
||||
<span class="text-sm text-main-600 d-flex"><i class="ph ph-video-camera"></i></span>
|
||||
<span class="text-13 text-gray-600">24 Lesson</span>
|
||||
</div>
|
||||
<div class="flex-align gap-4">
|
||||
<span class="text-sm text-main-600 d-flex"><i class="ph ph-clock"></i></span>
|
||||
<span class="text-13 text-gray-600">40 Hours</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex-between gap-4 flex-wrap mt-24">
|
||||
<div class="flex-align gap-4">
|
||||
<span class="text-15 fw-bold text-warning-600 d-flex"><i class="ph-fill ph-star"></i></span>
|
||||
<span class="text-13 fw-bold text-gray-600">4.9</span>
|
||||
<span class="text-13 fw-bold text-gray-600">(12k)</span>
|
||||
</div>
|
||||
<a href="course-details.html" class="btn btn-outline-main rounded-pill py-9">View Details</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Top Course End -->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<?php include('include/footer.php'); ?>
|
||||
</div>
|
||||
|
||||
<?php include('jsinclude.php'); ?>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function createChart(chartId, chartColor) {
|
||||
|
||||
let currentYear = new Date().getFullYear();
|
||||
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'series1',
|
||||
data: [18, 25, 22, 40, 34, 55, 50, 60, 55, 65],
|
||||
}, ],
|
||||
chart: {
|
||||
type: 'area',
|
||||
width: 80,
|
||||
height: 42,
|
||||
sparkline: {
|
||||
enabled: true // Remove whitespace
|
||||
},
|
||||
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 1,
|
||||
colors: [chartColor],
|
||||
lineCap: 'round'
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: 'transparent',
|
||||
strokeDashArray: 0,
|
||||
position: 'back',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
row: {
|
||||
colors: undefined,
|
||||
opacity: 0.5
|
||||
},
|
||||
column: {
|
||||
colors: undefined,
|
||||
opacity: 0.5
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
colors: [chartColor], // Set the starting color (top color) here
|
||||
gradient: {
|
||||
shade: 'light', // Gradient shading type
|
||||
type: 'vertical', // Gradient direction (vertical)
|
||||
shadeIntensity: 0.5, // Intensity of the gradient shading
|
||||
gradientToColors: [`${chartColor}00`], // Bottom gradient color (with transparency)
|
||||
inverseColors: false, // Do not invert colors
|
||||
opacityFrom: .5, // Starting opacity
|
||||
opacityTo: 0.3, // Ending opacity
|
||||
stops: [0, 100],
|
||||
},
|
||||
},
|
||||
// Customize the circle marker color on hover
|
||||
markers: {
|
||||
colors: [chartColor],
|
||||
strokeWidth: 2,
|
||||
size: 0,
|
||||
hover: {
|
||||
size: 8
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
categories: [`Jan ${currentYear}`, `Feb ${currentYear}`, `Mar ${currentYear}`, `Apr ${currentYear}`, `May ${currentYear}`, `Jun ${currentYear}`, `Jul ${currentYear}`, `Aug ${currentYear}`, `Sep ${currentYear}`, `Oct ${currentYear}`, `Nov ${currentYear}`, `Dec ${currentYear}`],
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
|
||||
chart.render();
|
||||
}
|
||||
|
||||
// Call the function for each chart with the desired ID and color
|
||||
createChart('complete-course', '#2FB2AB');
|
||||
createChart('earned-certificate', '#27CFA7');
|
||||
createChart('course-progress', '#6142FF');
|
||||
createChart('community-support', '#FA902F');
|
||||
|
||||
|
||||
// =========================== Double Line Chart Start ===============================
|
||||
function createLineChart(chartId, chartColor) {
|
||||
var options = {
|
||||
series: [{
|
||||
name: 'Study',
|
||||
data: [8, 15, 9, 20, 10, 33, 13, 22, 8, 17, 10, 15],
|
||||
},
|
||||
{
|
||||
name: 'Test',
|
||||
data: [8, 24, 18, 40, 18, 48, 22, 38, 18, 30, 20, 28],
|
||||
},
|
||||
],
|
||||
chart: {
|
||||
type: 'area',
|
||||
width: '100%',
|
||||
height: 300,
|
||||
sparkline: {
|
||||
enabled: false // Remove whitespace
|
||||
},
|
||||
toolbar: {
|
||||
show: false
|
||||
},
|
||||
padding: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
}
|
||||
},
|
||||
colors: ['#3D7FF9', chartColor], // Set the color of the series
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: 'smooth',
|
||||
width: 1,
|
||||
colors: ["#3D7FF9", chartColor],
|
||||
lineCap: 'round',
|
||||
},
|
||||
fill: {
|
||||
type: 'gradient',
|
||||
gradient: {
|
||||
shadeIntensity: 1,
|
||||
opacityFrom: 0.9, // Decrease this value to reduce opacity
|
||||
opacityTo: 0.2, // Decrease this value to reduce opacity
|
||||
stops: [0, 100]
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
borderColor: '#E6E6E6',
|
||||
strokeDashArray: 3,
|
||||
position: 'back',
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
lines: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
row: {
|
||||
colors: undefined,
|
||||
opacity: 0.5
|
||||
},
|
||||
column: {
|
||||
colors: undefined,
|
||||
opacity: 0.5
|
||||
},
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
},
|
||||
},
|
||||
// Customize the circle marker color on hover
|
||||
markers: {
|
||||
colors: ["#3D7FF9", chartColor],
|
||||
strokeWidth: 3,
|
||||
size: 0,
|
||||
hover: {
|
||||
size: 8
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
show: false
|
||||
},
|
||||
categories: [`Jan`, `Feb`, `Mar`, `Apr`, `May`, `Jun`, `Jul`, `Aug`, `Sep`, `Oct`, `Nov`, `Dec`],
|
||||
tooltip: {
|
||||
enabled: false,
|
||||
},
|
||||
labels: {
|
||||
formatter: function(value) {
|
||||
return value;
|
||||
},
|
||||
style: {
|
||||
fontSize: "14px"
|
||||
}
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
formatter: function(value) {
|
||||
return "$" + value + "Hr";
|
||||
},
|
||||
style: {
|
||||
fontSize: "14px"
|
||||
}
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: 'dd/MM/yy HH:mm'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
position: 'top',
|
||||
horizontalAlign: 'right',
|
||||
offsetX: -10,
|
||||
offsetY: -0
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector(`#${chartId}`), options);
|
||||
chart.render();
|
||||
}
|
||||
createLineChart('doubleLineChart', '#27CFA7');
|
||||
// =========================== Double Line Chart End ===============================
|
||||
|
||||
// ================================= Multiple Radial Bar Chart Start =============================
|
||||
var options = {
|
||||
series: [100, 60, 25],
|
||||
chart: {
|
||||
height: 172,
|
||||
type: 'radialBar',
|
||||
},
|
||||
colors: ['#3D7FF9', '#27CFA7', '#020203'],
|
||||
stroke: {
|
||||
lineCap: 'round',
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
hollow: {
|
||||
size: '30%', // Adjust this value to control the bar width
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
value: {
|
||||
fontSize: '16px',
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
formatter: function(w) {
|
||||
return '82%'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labels: ['Completed', 'In Progress', 'Not Started'],
|
||||
};
|
||||
|
||||
var chart = new ApexCharts(document.querySelector("#radialMultipleBar"), options);
|
||||
chart.render();
|
||||
// ================================= Multiple Radial Bar Chart End =============================
|
||||
|
||||
// ========================== Export Js Start ==============================
|
||||
document.getElementById('exportOptions').addEventListener('change', function() {
|
||||
const format = this.value;
|
||||
const table = document.getElementById('studentTable');
|
||||
let data = [];
|
||||
const headers = [];
|
||||
|
||||
// Get the table headers
|
||||
table.querySelectorAll('thead th').forEach(th => {
|
||||
headers.push(th.innerText.trim());
|
||||
});
|
||||
|
||||
// Get the table rows
|
||||
table.querySelectorAll('tbody tr').forEach(tr => {
|
||||
const row = {};
|
||||
tr.querySelectorAll('td').forEach((td, index) => {
|
||||
row[headers[index]] = td.innerText.trim();
|
||||
});
|
||||
data.push(row);
|
||||
});
|
||||
|
||||
if (format === 'csv') {
|
||||
downloadCSV(data);
|
||||
} else if (format === 'json') {
|
||||
downloadJSON(data);
|
||||
}
|
||||
});
|
||||
|
||||
function downloadCSV(data) {
|
||||
const csv = data.map(row => Object.values(row).join(',')).join('\n');
|
||||
const blob = new Blob([csv], {
|
||||
type: 'text/csv'
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'students.csv';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
|
||||
function downloadJSON(data) {
|
||||
const json = JSON.stringify(data, null, 2);
|
||||
const blob = new Blob([json], {
|
||||
type: 'application/json'
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = 'students.json';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
}
|
||||
// ========================== Export Js End ==============================
|
||||
</script>
|
||||
<script>
|
||||
// Variabili globali
|
||||
let excelColumns = [];
|
||||
let mysqlColumns = [];
|
||||
let bindings = [];
|
||||
let selectedExcelCol = null;
|
||||
let selectedMysqlCol = null;
|
||||
|
||||
// Funzione per caricare le colonne dal file Excel
|
||||
function loadExcelColumns() {
|
||||
const fileInput = document.getElementById('excelFile');
|
||||
const file = fileInput.files[0];
|
||||
if (!file) return;
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
const data = new Uint8Array(e.target.result);
|
||||
const workbook = XLSX.read(data, {
|
||||
type: 'array'
|
||||
});
|
||||
const firstSheet = workbook.Sheets[workbook.SheetNames[0]];
|
||||
const jsonData = XLSX.utils.sheet_to_json(firstSheet, {
|
||||
header: 1
|
||||
});
|
||||
|
||||
excelColumns = jsonData[0] || [];
|
||||
renderColumns('xlsColumns', excelColumns, 'excel');
|
||||
loadMysqlColumns();
|
||||
};
|
||||
reader.readAsArrayBuffer(file);
|
||||
}
|
||||
|
||||
// Funzione per caricare le colonne MySQL (simulazione)
|
||||
function loadMysqlColumns() {
|
||||
// Sostituisci con una chiamata AJAX/PHP reale
|
||||
mysqlColumns = ['products_order', 'products_sku', 'product_market', 'product_buyer', 'idsupplier_buyer', 'dateprod', 'dateinlab', 'dateoutlab', 'labservice', 'products_country', 'products_region', 'reports_LabName', 'resultsDescription', 'results_Comment', 'partNumber'];
|
||||
renderColumns('mysqlColumns', mysqlColumns, 'mysql');
|
||||
}
|
||||
|
||||
// Funzione per rendere le colonne nelle liste
|
||||
function renderColumns(containerId, columns, type) {
|
||||
const container = document.getElementById(containerId);
|
||||
container.innerHTML = '';
|
||||
columns.forEach(col => {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'list-item';
|
||||
div.innerHTML = `<input type="radio" name="${type}_select" value="${col}" class="me-8"> ${col}`;
|
||||
div.addEventListener('click', () => selectColumn(type, col, div));
|
||||
container.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
// Funzione per selezionare una colonna
|
||||
function selectColumn(type, col, element) {
|
||||
if (type === 'excel') {
|
||||
selectedExcelCol = col;
|
||||
document.querySelectorAll('#xlsColumns .list-item').forEach(item => item.classList.remove('selected'));
|
||||
element.classList.add('selected');
|
||||
} else {
|
||||
selectedMysqlCol = col;
|
||||
document.querySelectorAll('#mysqlColumns .list-item').forEach(item => item.classList.remove('selected'));
|
||||
element.classList.add('selected');
|
||||
}
|
||||
updatePairButton();
|
||||
}
|
||||
|
||||
// Abilita/disabilita il pulsante "Aggiungi"
|
||||
function updatePairButton() {
|
||||
const pairButton = document.getElementById('pairButton');
|
||||
pairButton.disabled = !(selectedExcelCol && selectedMysqlCol);
|
||||
}
|
||||
|
||||
// Aggiunge un binding
|
||||
function addBinding() {
|
||||
if (selectedExcelCol && selectedMysqlCol) {
|
||||
bindings.push({
|
||||
excel: selectedExcelCol,
|
||||
mysql: selectedMysqlCol
|
||||
});
|
||||
selectedExcelCol = null;
|
||||
selectedMysqlCol = null;
|
||||
document.getElementById('pairButton').disabled = true;
|
||||
updateBindingList();
|
||||
// Deseleziona le radio button
|
||||
document.querySelectorAll('input[type="radio"]').forEach(radio => radio.checked = false);
|
||||
document.querySelectorAll('.list-item').forEach(item => item.classList.remove('selected'));
|
||||
}
|
||||
}
|
||||
|
||||
// Aggiorna la lista dei binding
|
||||
function updateBindingList() {
|
||||
const bindingList = document.getElementById('bindingList');
|
||||
bindingList.innerHTML = '';
|
||||
bindings.forEach((binding, index) => {
|
||||
bindingList.innerHTML += `
|
||||
<li class="binding-item">
|
||||
<span class="text-13 text-gray-600">${binding.excel}</span>
|
||||
<span class="text-13 text-main-600 mx-8">→</span>
|
||||
<span class="text-13 text-gray-600">${binding.mysql}</span>
|
||||
<button class="btn btn-sm btn-danger remove-btn rounded-pill" onclick="removeBinding(${index})"><i class="ph ph-x"></i></button>
|
||||
</li>
|
||||
`;
|
||||
});
|
||||
}
|
||||
|
||||
// Rimuove un binding
|
||||
function removeBinding(index) {
|
||||
bindings.splice(index, 1);
|
||||
updateBindingList();
|
||||
}
|
||||
|
||||
// Salva il template
|
||||
function saveTemplate() {
|
||||
if (bindings.length === 0) {
|
||||
alert('Aggiungi almeno un binding prima di salvare!');
|
||||
return;
|
||||
}
|
||||
|
||||
const templateData = {
|
||||
template_id: 1, // Sostituisci con l'ID reale
|
||||
bindings: bindings
|
||||
};
|
||||
console.log('Salvataggio template:', templateData);
|
||||
// Implementa chiamata AJAX qui
|
||||
alert('Template salvato con successo! (Simulazione)');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user