99 lines
3.9 KiB
JavaScript
99 lines
3.9 KiB
JavaScript
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const categoriesContainer = document.getElementById('category-tabs');
|
|
const productsContainer = document.getElementById('product-list');
|
|
const loader = document.getElementById('loader');
|
|
|
|
let allProducts = [];
|
|
let allGroups = [];
|
|
|
|
const fetchMockData = async () => {
|
|
try {
|
|
const [groupsRes, productsRes] = await Promise.all([
|
|
fetch('data/grupos.json'),
|
|
fetch('data/produtos.json')
|
|
]);
|
|
allGroups = await groupsRes.json();
|
|
allProducts = await productsRes.json();
|
|
return { groups: allGroups, products: allProducts };
|
|
} catch (error) {
|
|
console.error('Error fetching mock data:', error);
|
|
productsContainer.innerHTML = '<p class="text-danger">Failed to load menu data.</p>';
|
|
return { groups: [], products: [] };
|
|
}
|
|
};
|
|
|
|
const renderCategories = (groups) => {
|
|
if (!categoriesContainer) return;
|
|
categoriesContainer.innerHTML = '';
|
|
const nav = document.createElement('ul');
|
|
nav.className = 'nav nav-tabs category-tabs';
|
|
|
|
const allTab = document.createElement('li');
|
|
allTab.className = 'nav-item';
|
|
allTab.innerHTML = `<a class="nav-link active" href="#" data-group-id="all">All</a>`;
|
|
nav.appendChild(allTab);
|
|
|
|
groups.forEach(group => {
|
|
const tab = document.createElement('li');
|
|
tab.className = 'nav-item';
|
|
tab.innerHTML = `<a class="nav-link" href="#" data-group-id="${group.GRUPCODIGO}">${group.GRUPNOME}</a>`;
|
|
nav.appendChild(tab);
|
|
});
|
|
categoriesContainer.appendChild(nav);
|
|
|
|
nav.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
if (e.target.tagName === 'A') {
|
|
nav.querySelector('.active').classList.remove('active');
|
|
e.target.classList.add('active');
|
|
const groupId = e.target.getAttribute('data-group-id');
|
|
renderProducts(allProducts, groupId);
|
|
}
|
|
});
|
|
};
|
|
|
|
const renderProducts = (products, groupId = 'all') => {
|
|
if (!productsContainer) return;
|
|
productsContainer.innerHTML = '';
|
|
const filteredProducts = groupId === 'all'
|
|
? products
|
|
: products.filter(p => p.PRODGRUPO == groupId);
|
|
|
|
if (filteredProducts.length === 0) {
|
|
productsContainer.innerHTML = '<p class="text-muted">No products found in this category.</p>';
|
|
return;
|
|
}
|
|
|
|
filteredProducts.forEach(product => {
|
|
const col = document.createElement('div');
|
|
col.className = 'col-md-4 col-lg-3 mb-4';
|
|
const card = `
|
|
<div class="card product-card h-100">
|
|
<img src="${product.PRODFOTO || 'https://via.placeholder.com/400x300.png?text=No+Image'}" class="card-img-top" alt="${product.PRODNOME}">
|
|
<div class="card-body d-flex flex-column">
|
|
<h5 class="card-title">${product.PRODNOME}</h5>
|
|
<p class="card-text text-muted">${product.OBS || ''}</p>
|
|
<div class="mt-auto d-flex justify-content-between align-items-center">
|
|
<span class="product-price">R$ ${product.PRODPRECOVENDA.toFixed(2)}</span>
|
|
<button class="btn btn-primary btn-sm">Add</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
col.innerHTML = card;
|
|
productsContainer.appendChild(col);
|
|
});
|
|
};
|
|
|
|
const init = async () => {
|
|
loader.style.display = 'block';
|
|
const { groups, products } = await fetchMockData();
|
|
loader.style.display = 'none';
|
|
renderCategories(groups);
|
|
renderProducts(products);
|
|
};
|
|
|
|
init();
|
|
});
|