765 lines
34 KiB
PHP
765 lines
34 KiB
PHP
<?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>
|