last updates
This commit is contained in:
PanSi21
parent
1a59bcf2b0
commit
605fc89177
GPG key ID:
755F8874C65EF462
6 changed files with 606 additions and 199 deletions
232
public/script.js
232
public/script.js
|
|
@ -1,112 +1,109 @@
|
|||
let userId = null;
|
||||
let orderItems = [];
|
||||
let totalPrice = 0;
|
||||
// Variabili globali
|
||||
let userId = null; // ID utente
|
||||
let orderItems = []; // Array che contiene i prodotti nel carrello
|
||||
let totalPrice = 0; // Prezzo totale dell'ordine
|
||||
|
||||
const products = [
|
||||
{ id: 1, nome: "Birra", prezzo: 5 },
|
||||
{ id: 2, nome: "Acqua", prezzo: 1 },
|
||||
{ id: 3, nome: "Pizza", prezzo: 10 },
|
||||
{ id: 4, nome: "Patatine", prezzo: 3 },
|
||||
{ id: 5, nome: "Panino", prezzo: 7 },
|
||||
{ id: 6, nome: "Menu", prezzo: 12 }
|
||||
];
|
||||
// Sezione Login
|
||||
document.getElementById('login-form').addEventListener('submit', function(event) {
|
||||
event.preventDefault();
|
||||
userId = document.getElementById('user-id').value;
|
||||
if (userId) {
|
||||
document.getElementById('login-section').style.display = 'none';
|
||||
document.getElementById('payment-method-section').style.display = 'block';
|
||||
loadProducts(); // Carica i prodotti disponibili
|
||||
}
|
||||
});
|
||||
|
||||
// Funzione per leggere un cookie
|
||||
function getCookie(name) {
|
||||
const value = `; ${document.cookie}`;
|
||||
const parts = value.split(`; ${name}=`);
|
||||
if (parts.length === 2) return parts.pop().split(';').shift();
|
||||
return null;
|
||||
}
|
||||
// Funzione per caricare i prodotti
|
||||
function loadProducts() {
|
||||
const products = [
|
||||
{ id: 1, nome: 'Panino', prezzo: 5 },
|
||||
{ id: 2, nome: 'Acqua', prezzo: 1.5 },
|
||||
{ id: 3, nome: 'Birra', prezzo: 3 }
|
||||
];
|
||||
|
||||
// Funzione per scrivere un cookie
|
||||
function setCookie(name, value, days) {
|
||||
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
||||
document.cookie = `${name}=${value}; expires=${expires}; path=/`;
|
||||
}
|
||||
|
||||
// Funzione per inizializzare la lista dei prodotti
|
||||
function renderProductList() {
|
||||
const productListDiv = document.getElementById("product-list");
|
||||
productListDiv.innerHTML = "";
|
||||
products.forEach((product) => {
|
||||
// Cerca la quantità corrente nel carrello
|
||||
const existingProduct = orderItems.find(item => item.id === product.id);
|
||||
const quantity = existingProduct ? existingProduct.quantita : 0;
|
||||
|
||||
const productCard = document.createElement("div");
|
||||
productCard.className = "product-card";
|
||||
const productListElem = document.getElementById('product-list');
|
||||
products.forEach(product => {
|
||||
const productCard = document.createElement('div');
|
||||
productCard.className = 'product-card';
|
||||
productCard.innerHTML = `
|
||||
<div>${product.nome}</div>
|
||||
<div>EUR ${product.prezzo}</div>
|
||||
<div>
|
||||
<button onclick="decreaseQuantity(${product.id})">-</button>
|
||||
<span id="quantity-${product.id}">${quantity}</span>
|
||||
<button onclick="increaseQuantity(${product.id})">+</button>
|
||||
</div>
|
||||
<h4>${product.nome}</h4>
|
||||
<p>€ ${product.prezzo}</p>
|
||||
<button onclick="addToOrder(${product.id}, '${product.nome}', ${product.prezzo})">Aggiungi al carrello</button>
|
||||
`;
|
||||
productListDiv.appendChild(productCard);
|
||||
productListElem.appendChild(productCard);
|
||||
});
|
||||
}
|
||||
|
||||
// Funzione per aumentare la quantità di un prodotto
|
||||
function increaseQuantity(productId) {
|
||||
const product = products.find((p) => p.id === productId);
|
||||
if (product) {
|
||||
const existingProduct = orderItems.find(item => item.id === productId);
|
||||
if (existingProduct) {
|
||||
existingProduct.quantita += 1;
|
||||
} else {
|
||||
orderItems.push({ ...product, quantita: 1 });
|
||||
}
|
||||
totalPrice += product.prezzo;
|
||||
updateTotal();
|
||||
updateProductQuantity(productId);
|
||||
// Funzione per aggiungere prodotti al carrello
|
||||
function addToOrder(id, nome, prezzo) {
|
||||
const productInOrder = orderItems.find(item => item.id === id);
|
||||
|
||||
if (productInOrder) {
|
||||
productInOrder.quantita += 1;
|
||||
} else {
|
||||
orderItems.push({ id, nome, prezzo, quantita: 1 });
|
||||
}
|
||||
|
||||
totalPrice += prezzo;
|
||||
updateOrder();
|
||||
}
|
||||
|
||||
// Funzione per diminuire la quantità di un prodotto
|
||||
function decreaseQuantity(productId) {
|
||||
const product = products.find((p) => p.id === productId);
|
||||
if (product) {
|
||||
const existingProduct = orderItems.find(item => item.id === productId);
|
||||
if (existingProduct) {
|
||||
if (existingProduct.quantita > 1) {
|
||||
existingProduct.quantita -= 1;
|
||||
totalPrice -= product.prezzo;
|
||||
} else {
|
||||
// Rimuove completamente il prodotto se la quantità è 0
|
||||
orderItems = orderItems.filter(item => item.id !== productId);
|
||||
totalPrice -= product.prezzo;
|
||||
}
|
||||
}
|
||||
updateTotal();
|
||||
updateProductQuantity(productId);
|
||||
}
|
||||
// Funzione per aggiornare il carrello
|
||||
function updateOrder() {
|
||||
const orderItemsElem = document.getElementById('order-items');
|
||||
orderItemsElem.innerHTML = '';
|
||||
|
||||
orderItems.forEach(item => {
|
||||
const listItem = document.createElement('div');
|
||||
listItem.textContent = `${item.nome} x ${item.quantita} - € ${item.prezzo * item.quantita}`;
|
||||
orderItemsElem.appendChild(listItem);
|
||||
});
|
||||
|
||||
document.getElementById('total-price').textContent = totalPrice;
|
||||
}
|
||||
|
||||
// Funzione per aggiornare la quantità nella UI
|
||||
function updateProductQuantity(productId) {
|
||||
const existingProduct = orderItems.find(item => item.id === productId);
|
||||
const quantity = existingProduct ? existingProduct.quantita : 0;
|
||||
document.getElementById(`quantity-${productId}`).textContent = quantity;
|
||||
// Mostra il riepilogo dell'ordine
|
||||
document.getElementById('show-summary-btn').addEventListener('click', function() {
|
||||
document.getElementById('order-section').style.display = 'none';
|
||||
document.getElementById('order-summary').style.display = 'block';
|
||||
updateOrderSummary();
|
||||
});
|
||||
|
||||
// Funzione per aggiornare il riepilogo dell'ordine
|
||||
function updateOrderSummary() {
|
||||
const paymentMethod = document.querySelector('input[name="payment-method"]:checked').value;
|
||||
const totalPriceElem = document.getElementById('summary-total-price');
|
||||
const paymentMethodElem = document.getElementById('summary-payment-method');
|
||||
const summaryProductsElem = document.getElementById('summary-products');
|
||||
|
||||
paymentMethodElem.textContent = paymentMethod;
|
||||
totalPriceElem.textContent = totalPrice;
|
||||
|
||||
summaryProductsElem.innerHTML = '';
|
||||
orderItems.forEach(item => {
|
||||
const listItem = document.createElement('li');
|
||||
listItem.textContent = `${item.nome} x ${item.quantita}`;
|
||||
summaryProductsElem.appendChild(listItem);
|
||||
});
|
||||
}
|
||||
|
||||
// Funzione per aggiornare il totale
|
||||
function updateTotal() {
|
||||
document.getElementById("total-price").textContent = `Totale: EUR ${totalPrice}`;
|
||||
}
|
||||
// Annulla l'ordine e torna alla selezione dei prodotti
|
||||
document.getElementById('cancel-order-btn').addEventListener('click', function() {
|
||||
document.getElementById('order-summary').style.display = 'none';
|
||||
document.getElementById('order-section').style.display = 'block';
|
||||
});
|
||||
|
||||
// Funzione per confermare l'ordine
|
||||
document.getElementById("confirm-order-btn").addEventListener("click", function() {
|
||||
const tipoPagamento = document.querySelector('input[name="payment-method"]:checked').value; // Recupera il metodo di pagamento selezionato
|
||||
const data = new Date().toLocaleTimeString(); // Data in formato hh:mm:ss
|
||||
// Conferma l'ordine
|
||||
document.getElementById('confirm-order-btn').addEventListener('click', function() {
|
||||
const tipoPagamento = document.querySelector('input[name="payment-method"]:checked').value;
|
||||
const data = new Date().toLocaleTimeString();
|
||||
|
||||
const order = {
|
||||
id_utente: userId,
|
||||
tipo_pagamento: tipoPagamento,
|
||||
prodotti_acquistati: orderItems.map(item => ({
|
||||
// id: item.id,
|
||||
id: item.id,
|
||||
nome: item.nome,
|
||||
prezzo: item.prezzo,
|
||||
quantita: item.quantita
|
||||
|
|
@ -115,71 +112,24 @@ document.getElementById("confirm-order-btn").addEventListener("click", function(
|
|||
data: data
|
||||
};
|
||||
|
||||
// Salviamo l'ordine nel server
|
||||
// Invia l'ordine al server
|
||||
fetch("/ordini", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(order)
|
||||
}).then(response => response.json()).then(data => {
|
||||
if (data.message === 'Ordine salvato') {
|
||||
showOrderSummary(order);
|
||||
alert("Ordine confermato!");
|
||||
resetOrder(); // Resetta l'ordine dopo l'invio
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Mostra il riepilogo dell'ordine
|
||||
function showOrderSummary(order) {
|
||||
const orderSummaryDiv = document.getElementById("order-summary");
|
||||
const orderDetailsDiv = document.getElementById("order-details");
|
||||
let orderDetailsHTML = `<p>Ordine per l'ID Utente: ${order.id_utente}</p>`;
|
||||
orderDetailsHTML += `<p>Tipo di pagamento: ${order.tipo_pagamento}</p>`;
|
||||
order.prodotti_acquistati.forEach(item => {
|
||||
orderDetailsHTML += `<p>${item.nome} - EUR ${item.prezzo} x ${item.quantita}</p>`;
|
||||
});
|
||||
orderDetailsHTML += `<p>Totale: EUR ${order.prezzo_totale}</p>`;
|
||||
orderDetailsDiv.innerHTML = orderDetailsHTML;
|
||||
|
||||
orderSummaryDiv.style.display = "block";
|
||||
document.getElementById("order-section").style.display = "none";
|
||||
}
|
||||
|
||||
// Torna alla selezione dei prodotti
|
||||
document.getElementById("back-to-order-btn").addEventListener("click", function() {
|
||||
document.getElementById("order-summary").style.display = "none";
|
||||
document.getElementById("order-section").style.display = "block";
|
||||
});
|
||||
|
||||
// Reset dell'ordine
|
||||
// Funzione per resettare l'ordine
|
||||
function resetOrder() {
|
||||
orderItems = [];
|
||||
totalPrice = 0;
|
||||
updateTotal();
|
||||
renderProductList();
|
||||
document.getElementById("order-section").style.display = "block";
|
||||
document.getElementById("order-summary").style.display = "none";
|
||||
updateOrder();
|
||||
document.getElementById('order-summary').style.display = 'none';
|
||||
document.getElementById('order-section').style.display = 'block';
|
||||
}
|
||||
|
||||
// Gestisci il login
|
||||
document.getElementById("login-form").addEventListener("submit", function(event) {
|
||||
event.preventDefault();
|
||||
const inputId = document.getElementById("user-id").value;
|
||||
if (inputId) {
|
||||
setCookie('userId', inputId, 7); // Salva il cookie per 7 giorni
|
||||
userId = inputId;
|
||||
document.getElementById("login-section").style.display = "none";
|
||||
document.getElementById("order-section").style.display = "block";
|
||||
renderProductList();
|
||||
}
|
||||
});
|
||||
|
||||
// Verifica se l'ID utente è già nel cookie
|
||||
window.onload = function() {
|
||||
const savedUserId = getCookie('userId');
|
||||
if (savedUserId) {
|
||||
userId = savedUserId;
|
||||
document.getElementById("login-section").style.display = "none";
|
||||
document.getElementById("order-section").style.display = "block";
|
||||
renderProductList();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue