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
65
public/index copy.html
Normal file
65
public/index copy.html
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="it">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Carrello Ordini</title>
|
||||||
|
<link rel="stylesheet" href="styles.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- Sezione Login -->
|
||||||
|
<div id="login-section">
|
||||||
|
<h2>Login</h2>
|
||||||
|
<form id="login-form">
|
||||||
|
<label for="user-id">ID Utente:</label>
|
||||||
|
<input type="text" id="user-id" name="user-id" required>
|
||||||
|
<button type="submit">Accedi</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Sezione per scegliere il metodo di pagamento -->
|
||||||
|
<h3>Seleziona metodo di pagamento:</h3>
|
||||||
|
<div id="payment-method-section">
|
||||||
|
<label class="payment-option">
|
||||||
|
<input type="radio" name="payment-method" value="Cash" checked>
|
||||||
|
<span class="radio-custom"></span>
|
||||||
|
<div class="payment-text">Cash</div>
|
||||||
|
</label>
|
||||||
|
<label class="payment-option">
|
||||||
|
<input type="radio" name="payment-method" value="PayPal">
|
||||||
|
<span class="radio-custom"></span>
|
||||||
|
<div class="payment-text">PayPal</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Sezione Carrello (visibile dopo il login) -->
|
||||||
|
<div id="order-section" style="display:none;">
|
||||||
|
<h2>Prodotti Disponibili</h2>
|
||||||
|
<div id="product-list"></div>
|
||||||
|
|
||||||
|
<h3>Carrello</h3>
|
||||||
|
<div id="order-items"></div>
|
||||||
|
<p>Totale: <span id="total-price">0</span></p>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<button id="confirm-order-btn">Conferma Ordine</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Riepilogo Ordine -->
|
||||||
|
<div id="order-summary" style="display:none;">
|
||||||
|
<h2>Riepilogo Ordine</h2>
|
||||||
|
<div id="order-details"></div>
|
||||||
|
<button id="back-to-order-btn">Torna al carrello</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="script.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
@ -9,7 +9,6 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- Sezione Login -->
|
<!-- Sezione Login -->
|
||||||
<div id="login-section">
|
<div id="login-section">
|
||||||
<h2>Login</h2>
|
<h2>Login</h2>
|
||||||
|
|
@ -21,13 +20,17 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Sezione per scegliere il metodo di pagamento -->
|
<!-- Sezione per scegliere il metodo di pagamento -->
|
||||||
<div id="payment-method-section">
|
<div id="payment-method-section" style="display: none;">
|
||||||
<h3>Seleziona metodo di pagamento:</h3>
|
<h3>Seleziona metodo di pagamento:</h3>
|
||||||
<label>
|
<label class="payment-option">
|
||||||
<input type="radio" name="payment-method" value="Cash" checked> Cash
|
<input type="radio" name="payment-method" value="Cash" checked>
|
||||||
|
<span class="radio-custom"></span>
|
||||||
|
<div class="payment-text">Cash</div>
|
||||||
</label>
|
</label>
|
||||||
<label>
|
<label class="payment-option">
|
||||||
<input type="radio" name="payment-method" value="PayPal"> PayPal
|
<input type="radio" name="payment-method" value="PayPal">
|
||||||
|
<span class="radio-custom"></span>
|
||||||
|
<div class="payment-text">PayPal</div>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -40,19 +43,20 @@
|
||||||
<div id="order-items"></div>
|
<div id="order-items"></div>
|
||||||
<p>Totale: \u20ac <span id="total-price">0</span></p>
|
<p>Totale: \u20ac <span id="total-price">0</span></p>
|
||||||
|
|
||||||
|
<button id="show-summary-btn">Mostra Riepilogo</button>
|
||||||
|
|
||||||
<button id="confirm-order-btn">Conferma Ordine</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Riepilogo Ordine -->
|
<!-- Riepilogo Ordine -->
|
||||||
<div id="order-summary" style="display:none;">
|
<div id="order-summary" style="display:none;">
|
||||||
<h2>Riepilogo Ordine</h2>
|
<h2>Riepilogo Ordine</h2>
|
||||||
<div id="order-details"></div>
|
<p><strong>Metodo di pagamento:</strong> <span id="summary-payment-method"></span></p>
|
||||||
<button id="back-to-order-btn">Torna al carrello</button>
|
<p><strong>Totale:</strong> <span id="summary-total-price"></span> EUR</p>
|
||||||
|
<ul id="summary-products"></ul>
|
||||||
|
<button id="confirm-order-btn">Conferma Ordine</button>
|
||||||
|
<button id="cancel-order-btn">Annulla</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
<script src="script.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
232
public/script.js
232
public/script.js
|
|
@ -1,112 +1,109 @@
|
||||||
let userId = null;
|
// Variabili globali
|
||||||
let orderItems = [];
|
let userId = null; // ID utente
|
||||||
let totalPrice = 0;
|
let orderItems = []; // Array che contiene i prodotti nel carrello
|
||||||
|
let totalPrice = 0; // Prezzo totale dell'ordine
|
||||||
|
|
||||||
const products = [
|
// Sezione Login
|
||||||
{ id: 1, nome: "Birra", prezzo: 5 },
|
document.getElementById('login-form').addEventListener('submit', function(event) {
|
||||||
{ id: 2, nome: "Acqua", prezzo: 1 },
|
event.preventDefault();
|
||||||
{ id: 3, nome: "Pizza", prezzo: 10 },
|
userId = document.getElementById('user-id').value;
|
||||||
{ id: 4, nome: "Patatine", prezzo: 3 },
|
if (userId) {
|
||||||
{ id: 5, nome: "Panino", prezzo: 7 },
|
document.getElementById('login-section').style.display = 'none';
|
||||||
{ id: 6, nome: "Menu", prezzo: 12 }
|
document.getElementById('payment-method-section').style.display = 'block';
|
||||||
];
|
loadProducts(); // Carica i prodotti disponibili
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Funzione per leggere un cookie
|
// Funzione per caricare i prodotti
|
||||||
function getCookie(name) {
|
function loadProducts() {
|
||||||
const value = `; ${document.cookie}`;
|
const products = [
|
||||||
const parts = value.split(`; ${name}=`);
|
{ id: 1, nome: 'Panino', prezzo: 5 },
|
||||||
if (parts.length === 2) return parts.pop().split(';').shift();
|
{ id: 2, nome: 'Acqua', prezzo: 1.5 },
|
||||||
return null;
|
{ id: 3, nome: 'Birra', prezzo: 3 }
|
||||||
}
|
];
|
||||||
|
|
||||||
// Funzione per scrivere un cookie
|
const productListElem = document.getElementById('product-list');
|
||||||
function setCookie(name, value, days) {
|
products.forEach(product => {
|
||||||
const expires = new Date(Date.now() + days * 864e5).toUTCString();
|
const productCard = document.createElement('div');
|
||||||
document.cookie = `${name}=${value}; expires=${expires}; path=/`;
|
productCard.className = 'product-card';
|
||||||
}
|
|
||||||
|
|
||||||
// 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";
|
|
||||||
productCard.innerHTML = `
|
productCard.innerHTML = `
|
||||||
<div>${product.nome}</div>
|
<h4>${product.nome}</h4>
|
||||||
<div>EUR ${product.prezzo}</div>
|
<p>€ ${product.prezzo}</p>
|
||||||
<div>
|
<button onclick="addToOrder(${product.id}, '${product.nome}', ${product.prezzo})">Aggiungi al carrello</button>
|
||||||
<button onclick="decreaseQuantity(${product.id})">-</button>
|
|
||||||
<span id="quantity-${product.id}">${quantity}</span>
|
|
||||||
<button onclick="increaseQuantity(${product.id})">+</button>
|
|
||||||
</div>
|
|
||||||
`;
|
`;
|
||||||
productListDiv.appendChild(productCard);
|
productListElem.appendChild(productCard);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Funzione per aumentare la quantità di un prodotto
|
// Funzione per aggiungere prodotti al carrello
|
||||||
function increaseQuantity(productId) {
|
function addToOrder(id, nome, prezzo) {
|
||||||
const product = products.find((p) => p.id === productId);
|
const productInOrder = orderItems.find(item => item.id === id);
|
||||||
if (product) {
|
|
||||||
const existingProduct = orderItems.find(item => item.id === productId);
|
if (productInOrder) {
|
||||||
if (existingProduct) {
|
productInOrder.quantita += 1;
|
||||||
existingProduct.quantita += 1;
|
} else {
|
||||||
} else {
|
orderItems.push({ id, nome, prezzo, quantita: 1 });
|
||||||
orderItems.push({ ...product, quantita: 1 });
|
|
||||||
}
|
|
||||||
totalPrice += product.prezzo;
|
|
||||||
updateTotal();
|
|
||||||
updateProductQuantity(productId);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
totalPrice += prezzo;
|
||||||
|
updateOrder();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Funzione per diminuire la quantità di un prodotto
|
// Funzione per aggiornare il carrello
|
||||||
function decreaseQuantity(productId) {
|
function updateOrder() {
|
||||||
const product = products.find((p) => p.id === productId);
|
const orderItemsElem = document.getElementById('order-items');
|
||||||
if (product) {
|
orderItemsElem.innerHTML = '';
|
||||||
const existingProduct = orderItems.find(item => item.id === productId);
|
|
||||||
if (existingProduct) {
|
orderItems.forEach(item => {
|
||||||
if (existingProduct.quantita > 1) {
|
const listItem = document.createElement('div');
|
||||||
existingProduct.quantita -= 1;
|
listItem.textContent = `${item.nome} x ${item.quantita} - € ${item.prezzo * item.quantita}`;
|
||||||
totalPrice -= product.prezzo;
|
orderItemsElem.appendChild(listItem);
|
||||||
} else {
|
});
|
||||||
// Rimuove completamente il prodotto se la quantità è 0
|
|
||||||
orderItems = orderItems.filter(item => item.id !== productId);
|
document.getElementById('total-price').textContent = totalPrice;
|
||||||
totalPrice -= product.prezzo;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
updateTotal();
|
|
||||||
updateProductQuantity(productId);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Funzione per aggiornare la quantità nella UI
|
// Mostra il riepilogo dell'ordine
|
||||||
function updateProductQuantity(productId) {
|
document.getElementById('show-summary-btn').addEventListener('click', function() {
|
||||||
const existingProduct = orderItems.find(item => item.id === productId);
|
document.getElementById('order-section').style.display = 'none';
|
||||||
const quantity = existingProduct ? existingProduct.quantita : 0;
|
document.getElementById('order-summary').style.display = 'block';
|
||||||
document.getElementById(`quantity-${productId}`).textContent = quantity;
|
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
|
// Annulla l'ordine e torna alla selezione dei prodotti
|
||||||
function updateTotal() {
|
document.getElementById('cancel-order-btn').addEventListener('click', function() {
|
||||||
document.getElementById("total-price").textContent = `Totale: EUR ${totalPrice}`;
|
document.getElementById('order-summary').style.display = 'none';
|
||||||
}
|
document.getElementById('order-section').style.display = 'block';
|
||||||
|
});
|
||||||
|
|
||||||
// Funzione per confermare l'ordine
|
// Conferma l'ordine
|
||||||
document.getElementById("confirm-order-btn").addEventListener("click", function() {
|
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 tipoPagamento = document.querySelector('input[name="payment-method"]:checked').value;
|
||||||
const data = new Date().toLocaleTimeString(); // Data in formato hh:mm:ss
|
const data = new Date().toLocaleTimeString();
|
||||||
|
|
||||||
const order = {
|
const order = {
|
||||||
id_utente: userId,
|
id_utente: userId,
|
||||||
tipo_pagamento: tipoPagamento,
|
tipo_pagamento: tipoPagamento,
|
||||||
prodotti_acquistati: orderItems.map(item => ({
|
prodotti_acquistati: orderItems.map(item => ({
|
||||||
// id: item.id,
|
id: item.id,
|
||||||
nome: item.nome,
|
nome: item.nome,
|
||||||
prezzo: item.prezzo,
|
prezzo: item.prezzo,
|
||||||
quantita: item.quantita
|
quantita: item.quantita
|
||||||
|
|
@ -115,71 +112,24 @@ document.getElementById("confirm-order-btn").addEventListener("click", function(
|
||||||
data: data
|
data: data
|
||||||
};
|
};
|
||||||
|
|
||||||
// Salviamo l'ordine nel server
|
// Invia l'ordine al server
|
||||||
fetch("/ordini", {
|
fetch("/ordini", {
|
||||||
method: "POST",
|
method: "POST",
|
||||||
headers: { "Content-Type": "application/json" },
|
headers: { "Content-Type": "application/json" },
|
||||||
body: JSON.stringify(order)
|
body: JSON.stringify(order)
|
||||||
}).then(response => response.json()).then(data => {
|
}).then(response => response.json()).then(data => {
|
||||||
if (data.message === 'Ordine salvato') {
|
if (data.message === 'Ordine salvato') {
|
||||||
showOrderSummary(order);
|
alert("Ordine confermato!");
|
||||||
resetOrder(); // Resetta l'ordine dopo l'invio
|
resetOrder(); // Resetta l'ordine dopo l'invio
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Mostra il riepilogo dell'ordine
|
// Funzione per resettare l'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
|
|
||||||
function resetOrder() {
|
function resetOrder() {
|
||||||
orderItems = [];
|
orderItems = [];
|
||||||
totalPrice = 0;
|
totalPrice = 0;
|
||||||
updateTotal();
|
updateOrder();
|
||||||
renderProductList();
|
document.getElementById('order-summary').style.display = 'none';
|
||||||
document.getElementById("order-section").style.display = "block";
|
document.getElementById('order-section').style.display = 'block';
|
||||||
document.getElementById("order-summary").style.display = "none";
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 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();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
|
||||||
185
public/script.js.back
Normal file
185
public/script.js.back
Normal file
|
|
@ -0,0 +1,185 @@
|
||||||
|
let userId = null;
|
||||||
|
let orderItems = [];
|
||||||
|
let totalPrice = 0;
|
||||||
|
|
||||||
|
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 }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 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 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";
|
||||||
|
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>
|
||||||
|
`;
|
||||||
|
productListDiv.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 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 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Funzione per aggiornare il totale
|
||||||
|
function updateTotal() {
|
||||||
|
document.getElementById("total-price").textContent = `Totale: EUR ${totalPrice}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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
|
||||||
|
|
||||||
|
const order = {
|
||||||
|
id_utente: userId,
|
||||||
|
tipo_pagamento: tipoPagamento,
|
||||||
|
prodotti_acquistati: orderItems.map(item => ({
|
||||||
|
// id: item.id,
|
||||||
|
nome: item.nome,
|
||||||
|
prezzo: item.prezzo,
|
||||||
|
quantita: item.quantita
|
||||||
|
})),
|
||||||
|
prezzo_totale: totalPrice,
|
||||||
|
data: data
|
||||||
|
};
|
||||||
|
|
||||||
|
// Salviamo l'ordine nel 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);
|
||||||
|
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
|
||||||
|
function resetOrder() {
|
||||||
|
orderItems = [];
|
||||||
|
totalPrice = 0;
|
||||||
|
updateTotal();
|
||||||
|
renderProductList();
|
||||||
|
document.getElementById("order-section").style.display = "block";
|
||||||
|
document.getElementById("order-summary").style.display = "none";
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
@ -1,47 +1,106 @@
|
||||||
|
/* Stili generali per il corpo della pagina */
|
||||||
body {
|
body {
|
||||||
font-family: Arial, sans-serif;
|
font-family: Arial, sans-serif;
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
h1, h2, h3 {
|
h1, h2, h3 {
|
||||||
color: #333;
|
color: #333;
|
||||||
}
|
}
|
||||||
|
|
||||||
#product-list {
|
/* Stili per la lista dei prodotti, usa flexbox per disposizione responsive */
|
||||||
display: flex;
|
#product-list {
|
||||||
flex-wrap: wrap;
|
display: flex;
|
||||||
justify-content: center;
|
flex-wrap: wrap;
|
||||||
}
|
justify-content: center;
|
||||||
|
}
|
||||||
.product-card {
|
|
||||||
width: 200px;
|
/* Stili per ciascuna card prodotto */
|
||||||
margin: 10px;
|
.product-card {
|
||||||
padding: 15px;
|
font-size: 21px;
|
||||||
border: 1px solid #ccc;
|
width: 200px;
|
||||||
border-radius: 5px;
|
margin: 10px;
|
||||||
text-align: center;
|
padding: 15px;
|
||||||
}
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 5px;
|
||||||
button {
|
text-align: center;
|
||||||
padding: 10px;
|
}
|
||||||
background-color: #4CAF50;
|
|
||||||
color: white;
|
/* Pulsante generico */
|
||||||
border: none;
|
button {
|
||||||
border-radius: 5px;
|
padding: 10px;
|
||||||
cursor: pointer;
|
background-color: #4CAF50;
|
||||||
}
|
color: white;
|
||||||
|
border: none;
|
||||||
button:hover {
|
border-radius: 5px;
|
||||||
background-color: #45a049;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, button {
|
button:hover {
|
||||||
padding: 10px;
|
background-color: #45a049;
|
||||||
margin: 10px;
|
}
|
||||||
}
|
|
||||||
|
/* Stili per gli input e i pulsanti */
|
||||||
#order-summary {
|
input, button {
|
||||||
margin-top: 20px;
|
padding: 20px;
|
||||||
}
|
margin: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sezione riepilogo ordine */
|
||||||
|
#order-summary {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* SEZIONE METODO DI PAGAMENTO */
|
||||||
|
|
||||||
|
/* Contenitore principale per i metodi di pagamento (flexbox per allineamento orizzontale) */
|
||||||
|
#payment-method-section {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly; /* Distanza uniforme tra gli elementi */
|
||||||
|
align-items: center; /* Allineamento verticale centrale */
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Etichetta che contiene il radio button personalizzato e il testo */
|
||||||
|
.payment-option {
|
||||||
|
display: inline-block; /* Dispone gli elementi orizzontalmente */
|
||||||
|
text-align: center; /* Centra il contenuto */
|
||||||
|
margin: 0 20px; /* Distanza tra i metodi di pagamento */
|
||||||
|
cursor: pointer; /* Cambia il cursore al passaggio sopra */
|
||||||
|
font-size: 1.5em; /* Aumenta la dimensione del testo */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Nasconde il radio button originale */
|
||||||
|
.payment-option input[type="radio"] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stile personalizzato per il radio button */
|
||||||
|
.payment-option .radio-custom {
|
||||||
|
width: 75px; /* Dimensione del pallino */
|
||||||
|
height: 75px; /* Dimensione del pallino */
|
||||||
|
border: 2px solid #333333; /* Colore del bordo */
|
||||||
|
border-radius: 50%; /* Forma circolare */
|
||||||
|
display: block; /* Disposizione a blocco per centrare */
|
||||||
|
margin: 0 auto; /* Centra il pallino orizzontalmente */
|
||||||
|
transition: background-color 0.3s, border-color 0.3s; /* Effetto di transizione */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quando il radio button è selezionato, cambia colore */
|
||||||
|
.payment-option input[type="radio"]:checked + .radio-custom {
|
||||||
|
background-color: #007bff; /* Colore di sfondo quando selezionato */
|
||||||
|
border-color: #007bff; /* Colore del bordo quando selezionato */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Quando l'utente passa sopra il radio button, cambia il bordo */
|
||||||
|
.payment-option input[type="radio"]:hover + .radio-custom {
|
||||||
|
border-color: #0056b3; /* Cambia il bordo al passaggio del mouse */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stile per il testo che appare sopra il pallino */
|
||||||
|
.payment-option .payment-text {
|
||||||
|
font-size: 1.5em; /* Imposta la dimensione del testo */
|
||||||
|
margin-top: 12px; /* Distanza tra il pallino e la scritta */
|
||||||
|
text-align: center; /* Centra il testo sopra il pallino */
|
||||||
|
}
|
||||||
|
|
|
||||||
144
server3.js
Normal file
144
server3.js
Normal file
|
|
@ -0,0 +1,144 @@
|
||||||
|
const express = require('express');
|
||||||
|
const bodyParser = require('body-parser');
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const app = express();
|
||||||
|
const PORT = 3000;
|
||||||
|
|
||||||
|
// Percorso del file delle statistiche
|
||||||
|
const statisticsFilePath = path.join(__dirname, 'data', 'statistiche.json');
|
||||||
|
|
||||||
|
// Middleware per servire file statici
|
||||||
|
app.use(express.static(path.join(__dirname, 'public')));
|
||||||
|
app.use(bodyParser.json());
|
||||||
|
|
||||||
|
// Funzione per salvare le statistiche in un file
|
||||||
|
const saveStatistics = (stats) => {
|
||||||
|
fs.writeFileSync(statisticsFilePath, JSON.stringify(stats, null, 2));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Funzione per caricare le statistiche da un file
|
||||||
|
const loadStatistics = () => {
|
||||||
|
if (fs.existsSync(statisticsFilePath)) {
|
||||||
|
return JSON.parse(fs.readFileSync(statisticsFilePath, 'utf8'));
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
utenti: {},
|
||||||
|
metodi_pagamento: {
|
||||||
|
Cash: 0,
|
||||||
|
PayPal: 0
|
||||||
|
},
|
||||||
|
prodotti_venduti: {},
|
||||||
|
totale_vendite: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Route per gestire gli ordini (POST)
|
||||||
|
app.post('/ordini', (req, res) => {
|
||||||
|
const { id_utente, tipo_pagamento, prodotti_acquistati, prezzo_totale, data } = req.body;
|
||||||
|
|
||||||
|
const order = {
|
||||||
|
id_utente,
|
||||||
|
tipo_pagamento,
|
||||||
|
prodotti_acquistati,
|
||||||
|
prezzo_totale,
|
||||||
|
data
|
||||||
|
};
|
||||||
|
|
||||||
|
const filePath = path.join(__dirname, 'data', `${id_utente}.json`);
|
||||||
|
|
||||||
|
// Crea la cartella "data" se non esiste
|
||||||
|
if (!fs.existsSync('data')) {
|
||||||
|
fs.mkdirSync('data');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verifica se il file esiste già
|
||||||
|
if (fs.existsSync(filePath)) {
|
||||||
|
// Se esiste, aggiungi l'ordine all'array di ordini
|
||||||
|
const userData = JSON.parse(fs.readFileSync(filePath, 'utf8'));
|
||||||
|
userData.push(order);
|
||||||
|
fs.writeFileSync(filePath, JSON.stringify(userData, null, 2));
|
||||||
|
} else {
|
||||||
|
// Se non esiste, crea un nuovo array di ordini
|
||||||
|
fs.writeFileSync(filePath, JSON.stringify([order], null, 2));
|
||||||
|
}
|
||||||
|
|
||||||
|
res.status(200).send({ message: 'Ordine salvato' });
|
||||||
|
});
|
||||||
|
|
||||||
|
// Route per le statistiche
|
||||||
|
app.get('/statistiche', (req, res) => {
|
||||||
|
const dataDir = path.join(__dirname, 'data');
|
||||||
|
const files = fs.readdirSync(dataDir);
|
||||||
|
|
||||||
|
// Carica le statistiche esistenti o inizializzale se non esistono
|
||||||
|
let statistics = loadStatistics();
|
||||||
|
|
||||||
|
// Variabili per tenere traccia dei dati aggregati
|
||||||
|
let utenti = statistics.utenti;
|
||||||
|
let prodotti_venduti = statistics.prodotti_venduti;
|
||||||
|
let metodi_pagamento = statistics.metodi_pagamento;
|
||||||
|
let totale_vendite = statistics.totale_vendite;
|
||||||
|
|
||||||
|
// Per ogni file utente, carica e aggrega i dati
|
||||||
|
files.forEach(file => {
|
||||||
|
if (file !== 'statistiche.json') {
|
||||||
|
const filePath = path.join(dataDir, file);
|
||||||
|
const userData = JSON.parse(fs.readFileSync(filePath, 'utf8'));
|
||||||
|
|
||||||
|
// Verifica se userData è un array
|
||||||
|
if (Array.isArray(userData)) {
|
||||||
|
userData.forEach(order => {
|
||||||
|
const { id_utente, tipo_pagamento, prodotti_acquistati, prezzo_totale } = order;
|
||||||
|
|
||||||
|
// Aggiungi il totale per utente e per metodo di pagamento
|
||||||
|
if (!utenti[id_utente]) {
|
||||||
|
utenti[id_utente] = {
|
||||||
|
totale_cash: 0,
|
||||||
|
totale_paypal: 0,
|
||||||
|
totale: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Aggiungi il totale per metodo di pagamento
|
||||||
|
if (tipo_pagamento === 'Cash') {
|
||||||
|
utenti[id_utente].totale_cash += prezzo_totale;
|
||||||
|
metodi_pagamento.Cash += prezzo_totale;
|
||||||
|
} else if (tipo_pagamento === 'PayPal') {
|
||||||
|
utenti[id_utente].totale_paypal += prezzo_totale;
|
||||||
|
metodi_pagamento.PayPal += prezzo_totale;
|
||||||
|
}
|
||||||
|
|
||||||
|
utenti[id_utente].totale += prezzo_totale;
|
||||||
|
totale_vendite += prezzo_totale;
|
||||||
|
|
||||||
|
// Aggiungi i prodotti venduti
|
||||||
|
prodotti_acquistati.forEach(item => {
|
||||||
|
const { nome, prezzo, quantita } = item;
|
||||||
|
if (!prodotti_venduti[nome]) {
|
||||||
|
prodotti_venduti[nome] = { quantita: 0, totale: 0 };
|
||||||
|
}
|
||||||
|
prodotti_venduti[nome].quantita += quantita;
|
||||||
|
prodotti_venduti[nome].totale += prezzo * quantita;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
console.error(`Dati errati nel file ${file}: non è un array`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Salva le statistiche dopo l'aggregazione
|
||||||
|
statistics = { utenti, metodi_pagamento, prodotti_venduti, totale_vendite };
|
||||||
|
saveStatistics(statistics);
|
||||||
|
|
||||||
|
// Rispondi con le statistiche aggregate
|
||||||
|
res.json(statistics);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Avvio del server
|
||||||
|
app.listen(PORT, () => {
|
||||||
|
console.log(`Server in esecuzione su http://localhost:${PORT}`);
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue