68 lines
2.5 KiB
PHP
68 lines
2.5 KiB
PHP
<script>
|
|
// Manages drag-and-drop functionality for charts, saving and restoring their order
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
const chartContainer = document.getElementById('charts');
|
|
const sortable = new Sortable(chartContainer, {
|
|
animation: 150,
|
|
onEnd: function() {
|
|
saveChartOrder(); // Save chart order after dragging
|
|
}
|
|
});
|
|
|
|
// Function to save chart order to localStorage
|
|
function saveChartOrder() {
|
|
const order = Array.from(chartContainer.children).map(chart => chart.dataset.id);
|
|
localStorage.setItem('chartOrder', JSON.stringify(order));
|
|
|
|
// lets save it for the user
|
|
$.ajax({
|
|
url: 'chartorder.php',
|
|
method: 'POST',
|
|
data: {
|
|
method: 'save',
|
|
order: order
|
|
},
|
|
success: function(response) {
|
|
|
|
},
|
|
error: function() {
|
|
alert('Error saving chart order.');
|
|
}
|
|
});
|
|
}
|
|
|
|
// Function to restore chart order from localStorage
|
|
function loadChartOrder() {
|
|
|
|
// Load the saved order from localStorage
|
|
|
|
const savedOrder = JSON.parse(localStorage.getItem('chartOrder'));
|
|
if (savedOrder) {
|
|
savedOrder.forEach(id => {
|
|
const chart = document.querySelector(`[data-id='${id}']`);
|
|
chartContainer.appendChild(chart); // Append charts in saved order
|
|
});
|
|
}
|
|
|
|
// Load the saved order from the database
|
|
$.ajax({
|
|
url: 'chartorder.php',
|
|
method: 'POST',
|
|
data: {
|
|
method: 'load'
|
|
},
|
|
success: function(response) {
|
|
|
|
const order = JSON.parse(response);
|
|
order.forEach(id => {
|
|
const chart = document.querySelector(`[data-id='${id}']`);
|
|
chartContainer.appendChild(chart); // Append charts in saved order
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
// Load the saved chart order when the page loads
|
|
loadChartOrder();
|
|
});
|
|
</script> |