Skip to content

Commit 1cd9b73

Browse files
lucaslinykerlucaslinyker
authored
Merge pull request #11 from MLKP1/dev
add listing of drinks and pizzas from api
2 parents 75e0a2b + d1e6d40 commit 1cd9b73

2 files changed

Lines changed: 132 additions & 78 deletions

File tree

‎Cardapio.html‎

Lines changed: 2 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -27,77 +27,12 @@
2727
<div class="menu-content">
2828
<h2 class="section-title">Pizzas Salgadas</h2>
2929
<div class="category pizzas-salgadas">
30-
<p>carregando...</p>
30+
<p>carregando...</p>
3131
</div>
3232

3333
<h2 class="section-title">Bebidas</h2>
3434
<div class="category bebidas">
35-
<div class="menu-item">
36-
<img src="refrigerante.jpg" alt="Refrigerante Lata" class="item-img">
37-
<div class="item-info">
38-
<h3>Refrigerante Lata</h3>
39-
<p class="description">Coca-Cola, Guaraná ou Sprite, 350ml.</p>
40-
<div class="price-add">
41-
<span class="price">R$ 6,00</span>
42-
<button class="add-to-cart-btn" data-name="Refrigerante Lata" data-price="6.00">Adicionar</button>
43-
</div>
44-
</div>
45-
</div>
46-
<div class="menu-item">
47-
<img src="suco.jpg" alt="Suco Natural" class="item-img">
48-
<div class="item-info">
49-
<h3>Suco Natural</h3>
50-
<p class="description">Laranja, limão ou abacaxi, 300ml.</p>
51-
<div class="price-add">
52-
<span class="price">R$ 8,00</span>
53-
<button class="add-to-cart-btn" data-name="Suco Natural" data-price="8.00">Adicionar</button>
54-
</div>
55-
</div>
56-
</div>
57-
<div class="menu-item">
58-
<img src="suco.jpg" alt="Suco Natural" class="item-img">
59-
<div class="item-info">
60-
<h3>Suco Natural</h3>
61-
<p class="description">Laranja, limão ou abacaxi, 300ml.</p>
62-
<div class="price-add">
63-
<span class="price">R$ 8,00</span>
64-
<button class="add-to-cart-btn" data-name="Suco Natural" data-price="8.00">Adicionar</button>
65-
</div>
66-
</div>
67-
</div>
68-
<div class="menu-item">
69-
<img src="suco.jpg" alt="Suco Natural" class="item-img">
70-
<div class="item-info">
71-
<h3>Suco Natural</h3>
72-
<p class="description">Laranja, limão ou abacaxi, 300ml.</p>
73-
<div class="price-add">
74-
<span class="price">R$ 8,00</span>
75-
<button class="add-to-cart-btn" data-name="Suco Natural" data-price="8.00">Adicionar</button>
76-
</div>
77-
</div>
78-
</div>
79-
<div class="menu-item">
80-
<img src="agua.jpg" alt="Água Mineral" class="item-img">
81-
<div class="item-info">
82-
<h3>Água Mineral</h3>
83-
<p class="description">Água com ou sem gás, 500ml.</p>
84-
<div class="price-add">
85-
<span class="price">R$ 4,00</span>
86-
<button class="add-to-cart-btn" data-name="Água Mineral" data-price="4.00">Adicionar</button>
87-
</div>
88-
</div>
89-
</div>
90-
<div class="menu-item">
91-
<img src="cerveja.jpg" alt="Cerveja Lata" class="item-img">
92-
<div class="item-info">
93-
<h3>Cerveja Lata</h3>
94-
<p class="description">Brahma ou Heineken, 350ml.</p>
95-
<div class="price-add">
96-
<span class="price">R$ 10,00</span>
97-
<button class="add-to-cart-btn" data-name="Cerveja Lata" data-price="10.00">Adicionar</button>
98-
</div>
99-
</div>
100-
</div>
35+
<p>Carregando...</p>
10136
</div>
10237
</div>
10338

‎js/cardapio.js‎

Lines changed: 130 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ document.addEventListener('DOMContentLoaded', () => {
1111
console.error('Erro ao carregar o carrinho do localStorage:', error);
1212
cart = [];
1313
}
14-
const totalItems = cart.reduce((sum, item) => sum + (item.quantity || 1), 0);
14+
const totalPizzasItems = cart.reduce((sum, item) => sum + (item.quantity || 1), 0);
1515
if (cartCountSpan) {
16-
cartCountSpan.textContent = totalItems;
17-
console.log(`Contador do carrinho atualizado: ${totalItems} itens`);
16+
cartCountSpan.textContent = totalPizzasItems;
17+
console.log(`Contador do carrinho atualizado: ${totalPizzasItems} itens`);
1818
} else {
1919
console.log('Elemento cart-count não encontrado, continuando sem atualizar contador');
2020
}
@@ -81,18 +81,21 @@ document.addEventListener('DOMContentLoaded', () => {
8181
});
8282

8383
document.addEventListener('DOMContentLoaded', async () => {
84-
const baseUrlApi = "http://localhost:3333/products/pizzas"
84+
const baseUrlApi = "https://api-n47t.onrender.com"
85+
// const baseUrlApi = "http://localhost:3333"
86+
87+
// GET PIZZAS
8588
const pizzasSalgadas = document.getElementsByClassName('pizzas-salgadas')[0];
8689

90+
let pizzas = []
91+
let totalPizzas = null
8792
try {
88-
const response = await axios.get(baseUrlApi, {
93+
const response = await axios.get(`${baseUrlApi}/products/pizzas?active=true`, {
8994
withCredentials: true,
90-
headers: {
91-
"Authorization": "Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJvaXE3bXR5bzFwamIxMW1reng3MXU1NzUiLCJyZXN0YXVyYW50SWQiOiJseDFsZ3FhcDJyaHBldHVpNnljd2p5NDMifQ.mEo-afzDl0YaE6W_tmlBE1QuKR4KUGwTaFWmswkC8bA"
92-
}
93-
});
94-
const { pizzas } = response.data;
95-
console.log(pizzas);
95+
})
96+
97+
pizzas = response.data.pizzas
98+
totalPizzas = response.data.meta.totalCount
9699

97100
pizzasSalgadas.removeChild(pizzasSalgadas.firstChild);
98101

@@ -124,4 +127,120 @@ document.addEventListener('DOMContentLoaded', async () => {
124127
pizzasSalgadas.innerHTML = '<p>Erro ao carregar as pizzas. Tente novamente mais tarde.</p>';
125128
return;
126129
}
130+
131+
if (totalPizzas > 10) {
132+
const totalPizzasPages = Math.ceil(totalPizzas / 10)
133+
134+
for (let page = 1; page <= totalPizzasPages; page++) {
135+
try {
136+
const response = await axios.get(`${baseUrlApi}/products/pizzas?active=true&pageIndex=${page}`, {
137+
withCredentials: true,
138+
})
139+
let morePizzas = response.data.pizzas
140+
if (Array.isArray(morePizzas)) {
141+
pizzas = pizzas.concat(morePizzas)
142+
}
143+
} catch (error) {
144+
console.error(`Erro ao carregar página ${page} das pizzas:`, error)
145+
}
146+
}
147+
148+
pizzasSalgadas.innerHTML = ''
149+
pizzas.forEach(pizza => {
150+
const pizzaElement = document.createElement('div')
151+
pizzaElement.classList.add('menu-item')
152+
pizzaElement.innerHTML = `
153+
<img src="${pizza.image}" alt="${pizza.name}" height="150" width="150" class="item-img">
154+
<div class="item-info">
155+
<h3>${pizza.name}</h3>
156+
<p class="description">${pizza.description}</p>
157+
<div class="price-add">
158+
<span class="price">R$ ${(pizza.price / 100).toFixed(2).replace('.', ',')}</span>
159+
<button class="add-to-cart-btn" data-name="${pizza.name}" data-price="${pizza.price / 100}">Adicionar</button>
160+
</div>
161+
</div>
162+
`;
163+
pizzasSalgadas.appendChild(pizzaElement)
164+
})
165+
}
166+
167+
// GET DRINKS
168+
const drinksContainer = document.getElementsByClassName('bebidas')[0]
169+
170+
let drinks = []
171+
let totalDrinks = null
172+
try {
173+
const response = await axios.get(`${baseUrlApi}/products/drinks?active=true`, {
174+
withCredentials: true,
175+
})
176+
177+
drinks = response.data.drinks
178+
totalDrinks = response.data.meta.totalCount
179+
180+
drinksContainer.removeChild(drinksContainer.firstChild)
181+
182+
if (!drinks) {
183+
drinksContainer.innerHTML = '<p>Nenhuma bebida cadastrada.</p>'
184+
return
185+
}
186+
187+
drinksContainer.innerHTML = ''
188+
189+
drinks.forEach(drink => {
190+
const drinkElement = document.createElement('div')
191+
drinkElement.classList.add('menu-item')
192+
drinkElement.innerHTML = `
193+
<img src="${drink.image}" alt="${drink.image}" height="150" width="150" class="item-img">
194+
<div class="item-info">
195+
<h3>${drink.name}</h3>
196+
<p class="description">${drink.description}</p>
197+
<div class="price-add">
198+
<span class="price">R$ ${(drink.price / 100).toFixed(2).replace('.', ',')}</span>
199+
<button class="add-to-cart-btn" data-name="${drink.name}" data-price="${drink.price / 100}">Adicionar</button>
200+
</div>
201+
</div>
202+
`
203+
drinksContainer.appendChild(drinkElement)
204+
})
205+
} catch (error) {
206+
console.error('Erro ao carregar as bebidas:', error)
207+
drinksContainer.innerHTML = '<p>Erro ao carregar as bebidas. Tente novamente mais tarde.</p>'
208+
return
209+
}
210+
211+
if (totalDrinks > 10) {
212+
const totalDrinksPages = Math.ceil(totalDrinks / 10)
213+
214+
for (let page = 1; page <= totalDrinksPages; page++) {
215+
try {
216+
const response = await axios.get(`${baseUrlApi}/products/drinks?active=true&pageIndex=${page}`, {
217+
withCredentials: true,
218+
})
219+
let moreDrinks = response.data.drinks
220+
if (Array.isArray(moreDrinks)) {
221+
drinks = drinks.concat(moreDrinks)
222+
}
223+
} catch (error) {
224+
console.error(`Erro ao carregar página ${page} das bebidas:`, error)
225+
}
226+
}
227+
228+
drinksContainer.innerHTML = ''
229+
drinks.forEach(drink => {
230+
const drinkElement = document.createElement('div')
231+
drinkElement.classList.add('menu-item')
232+
drinkElement.innerHTML = `
233+
<img src="${drink.image}" alt="${drink.name}" height="150" width="150" class="item-img">
234+
<div class="item-info">
235+
<h3>${drink.name}</h3>
236+
<p class="description">${drink.description}</p>
237+
<div class="price-add">
238+
<span class="price">R$ ${(drink.price / 100).toFixed(2).replace('.', ',')}</span>
239+
<button class="add-to-cart-btn" data-name="${drink.name}" data-price="${drink.price / 100}">Adicionar</button>
240+
</div>
241+
</div>
242+
`;
243+
drinksContainer.appendChild(drinkElement)
244+
})
245+
}
127246
});

0 commit comments

Comments
 (0)