73 lines
2.8 KiB
JavaScript
73 lines
2.8 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function () {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const mainContent = document.getElementById('main-content');
|
|
const sidebarToggler = document.getElementById('sidebar-toggler');
|
|
|
|
if (sidebarToggler) {
|
|
sidebarToggler.addEventListener('click', function () {
|
|
sidebar.classList.toggle('sidebar-collapsed');
|
|
mainContent.classList.toggle('main-content-shifted');
|
|
});
|
|
}
|
|
|
|
// Off-canvas for mobile
|
|
const offcanvasToggler = document.querySelector('[data-bs-toggle="offcanvas"]');
|
|
if(offcanvasToggler) {
|
|
const target = document.querySelector(offcanvasToggler.dataset.bsTarget);
|
|
offcanvasToggler.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
target.classList.toggle('show');
|
|
});
|
|
}
|
|
|
|
// Fetch and load data from the backend
|
|
loadDashboardData();
|
|
});
|
|
|
|
/**
|
|
* Fetches data from the Node.js backend and populates the dashboard.
|
|
*/
|
|
async function loadDashboardData() {
|
|
// --- IMPORTANT ---
|
|
// Replace this URL with the actual URL of your Node.js backend API.
|
|
// When running locally, your Node.js server might be on a different port.
|
|
const API_URL = 'http://localhost:4000/api/products';
|
|
|
|
try {
|
|
const response = await fetch(API_URL);
|
|
if (!response.ok) {
|
|
// If the response is not OK (e.g., 404, 500), throw an error.
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const transactions = await response.json();
|
|
|
|
// Get the table body to populate it with data
|
|
const tableBody = document.querySelector('.table-responsive tbody');
|
|
|
|
// Clear existing placeholder rows
|
|
tableBody.innerHTML = '';
|
|
|
|
// Populate table with data from the backend
|
|
transactions.forEach(tx => {
|
|
const row = document.createElement('tr');
|
|
|
|
// Make sure the property names (e.g., tx.id, tx.itemOut) match what your API sends
|
|
row.innerHTML = `
|
|
<td>${tx.id}</td>
|
|
<td>${tx.itemOut}</td>
|
|
<td>${tx.itemIn}</td>
|
|
<td>${tx.user}</td>
|
|
<td>${new Date(tx.date).toLocaleDateString()}</td>
|
|
<td><span class="badge bg-success">${tx.status}</span></td>
|
|
`;
|
|
tableBody.appendChild(row);
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error('Error fetching data from backend:', error);
|
|
const tableBody = document.querySelector('.table-responsive tbody');
|
|
// Display a user-friendly error message in the table
|
|
tableBody.innerHTML = '<tr><td colspan="6" class="text-center text-danger">Could not load data. Is the backend server running?</td></tr>';
|
|
}
|
|
}
|