128 lines
4.4 KiB
JavaScript
128 lines
4.4 KiB
JavaScript
// assets/js/main.js
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const featherSun = document.getElementById('feather-sun');
|
|
const featherMoon = document.getElementById('feather-moon');
|
|
|
|
// Function to apply theme based on saved preference or system setting
|
|
const applyTheme = (theme) => {
|
|
if (theme === 'dark') {
|
|
document.body.classList.add('dark-mode');
|
|
if (featherSun) featherSun.style.display = 'block';
|
|
if (featherMoon) featherMoon.style.display = 'none';
|
|
} else {
|
|
document.body.classList.remove('dark-mode');
|
|
if (featherSun) featherSun.style.display = 'none';
|
|
if (featherMoon) featherMoon.style.display = 'block';
|
|
}
|
|
};
|
|
|
|
// Check for saved theme in localStorage
|
|
const savedTheme = localStorage.getItem('theme');
|
|
// Check for user's system preference
|
|
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
// Apply theme on initial load
|
|
if (savedTheme) {
|
|
applyTheme(savedTheme);
|
|
} else if (prefersDark) {
|
|
applyTheme('dark');
|
|
} else {
|
|
applyTheme('light');
|
|
}
|
|
|
|
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener('click', () => {
|
|
const isDarkMode = document.body.classList.toggle('dark-mode');
|
|
const newTheme = isDarkMode ? 'dark' : 'light';
|
|
localStorage.setItem('theme', newTheme);
|
|
applyTheme(newTheme);
|
|
});
|
|
}
|
|
|
|
// Feather icons replacement
|
|
if (typeof feather !== 'undefined') {
|
|
feather.replace();
|
|
}
|
|
|
|
// -- CHARTS INITIALIZATION --
|
|
// Check if chartData is defined (it's passed from index.php)
|
|
if (typeof chartData !== 'undefined') {
|
|
const pieCtx = document.getElementById('loadsByStatusChart');
|
|
const barCtx = document.getElementById('monthlyLoadsChart');
|
|
|
|
// Define colors that work with the theme
|
|
const chartColors = {
|
|
primary: 'rgba(184, 134, 11, 0.8)', // Golden
|
|
secondary: 'rgba(169, 169, 169, 0.8)', // Gray
|
|
accent: 'rgba(212, 175, 55, 0.8)', // Lighter Gold
|
|
success: 'rgba(40, 167, 69, 0.8)',
|
|
danger: 'rgba(220, 53, 69, 0.8)',
|
|
info: 'rgba(23, 162, 184, 0.8)',
|
|
};
|
|
|
|
if (pieCtx) {
|
|
new Chart(pieCtx, {
|
|
type: 'pie',
|
|
data: {
|
|
labels: chartData.loadsByStatus.labels,
|
|
datasets: [{
|
|
label: 'Loads',
|
|
data: chartData.loadsByStatus.counts,
|
|
backgroundColor: [
|
|
chartColors.info,
|
|
chartColors.primary,
|
|
chartColors.success,
|
|
chartColors.danger,
|
|
chartColors.secondary
|
|
],
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
position: 'top',
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
if (barCtx) {
|
|
new Chart(barCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: chartData.monthlyLoads.labels,
|
|
datasets: [{
|
|
label: 'Loads Created',
|
|
data: chartData.monthlyLoads.counts,
|
|
backgroundColor: chartColors.primary,
|
|
borderColor: chartColors.accent,
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
ticks: { // Make sure Y-axis ticks are integers
|
|
stepSize: 1,
|
|
callback: function(value) { if (Number.isInteger(value)) { return value; } }
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
});
|