Spaces:

ctrlplus-zai
/

purrfect-pantry-pro

Running

make all photos placeholders and fix the layout

fca8bb8 verified 12 months ago

3.1 kB

// Main application script
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    // Handle sidebar toggle - improved for mobile
    const sidebarToggle = document.querySelector('custom-navbar')?.shadowRoot?.getElementById('sidebarToggle');
    if (sidebarToggle) {
        sidebarToggle.addEventListener('click', function() {
            const sidebar = document.querySelector('custom-sidebar');
            const main = document.querySelector('main');
            
            if (window.innerWidth <= 768) {
                sidebar.classList.toggle('open');
            } else {
                sidebar.classList.toggle('hidden');
                main.classList.toggle('ml-0');
                main.classList.toggle('ml-64');
            }
        });
    }

    // Close sidebar when clicking outside on mobile
    document.addEventListener('click', function(event) {
        const sidebar = document.querySelector('custom-sidebar');
        const navbar = document.querySelector('custom-navbar');
        
        if (window.innerWidth <= 768 && sidebar?.classList.contains('open')) {
            if (!sidebar.contains(event.target) && !navbar?.shadowRoot?.contains(event.target)) {
                sidebar.classList.remove('open');
            }
        }
    });
// Sample data for charts (these would be replaced with real data)
    const salesData = {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        datasets: [{
            label: 'Monthly Sales',
            data: [3250, 4250, 3870, 5320, 6100, 4870],
            backgroundColor: 'rgba(79, 70, 229, 0.2)',
            borderColor: 'rgba(79, 70, 229, 1)',
            borderWidth: 1,
            tension: 0.4
        }]
    };

    // Initialize charts (you would need to include Chart.js for this to work)
    if (typeof Chart !== 'undefined') {
        const salesChart = new Chart(
            document.getElementById('salesChart'),
            {
                type: 'line',
                data: salesData,
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            }
        );
    }
});

// Notification handler
function showNotification(type, message) {
    const notification = document.createElement('div');
    notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg text-white ${type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'}`;
    notification.textContent = message;
    document.body.appendChild(notification);
    
    setTimeout(() => {
        notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
        setTimeout(() => notification.remove(), 300);
    }, 3000);
}

	// Main application script
	document.addEventListener('DOMContentLoaded', function() {
	// Initialize tooltips
	const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
	tooltipTriggerList.map(function (tooltipTriggerEl) {
	return new bootstrap.Tooltip(tooltipTriggerEl);
	});
	// Handle sidebar toggle - improved for mobile
	const sidebarToggle = document.querySelector('custom-navbar')?.shadowRoot?.getElementById('sidebarToggle');
	if (sidebarToggle) {
	sidebarToggle.addEventListener('click', function() {
	const sidebar = document.querySelector('custom-sidebar');
	const main = document.querySelector('main');

	if (window.innerWidth <= 768) {
	sidebar.classList.toggle('open');
	} else {
	sidebar.classList.toggle('hidden');
	main.classList.toggle('ml-0');
	main.classList.toggle('ml-64');
	}
	});
	}

	// Close sidebar when clicking outside on mobile
	document.addEventListener('click', function(event) {
	const sidebar = document.querySelector('custom-sidebar');
	const navbar = document.querySelector('custom-navbar');

	if (window.innerWidth <= 768 && sidebar?.classList.contains('open')) {
	if (!sidebar.contains(event.target) && !navbar?.shadowRoot?.contains(event.target)) {
	sidebar.classList.remove('open');
	}
	}
	});
	// Sample data for charts (these would be replaced with real data)
	const salesData = {
	labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
	datasets: [{
	label: 'Monthly Sales',
	data: [3250, 4250, 3870, 5320, 6100, 4870],
	backgroundColor: 'rgba(79, 70, 229, 0.2)',
	borderColor: 'rgba(79, 70, 229, 1)',
	borderWidth: 1,
	tension: 0.4
	}]
	};

	// Initialize charts (you would need to include Chart.js for this to work)
	if (typeof Chart !== 'undefined') {
	const salesChart = new Chart(
	document.getElementById('salesChart'),
	{
	type: 'line',
	data: salesData,
	options: {
	responsive: true,
	scales: {
	y: {
	beginAtZero: true
	}
	}
	}
	}
	);
	}
	});

	// Notification handler
	function showNotification(type, message) {
	const notification = document.createElement('div');
	notification.className = `fixed top-4 right-4 p-4 rounded-lg shadow-lg text-white ${type === 'success' ? 'bg-green-500' : type === 'error' ? 'bg-red-500' : 'bg-blue-500'}`;
	notification.textContent = message;
	document.body.appendChild(notification);

	setTimeout(() => {
	notification.classList.add('opacity-0', 'transition-opacity', 'duration-300');
	setTimeout(() => notification.remove(), 300);
	}, 3000);
	}