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>
|
||||
|
||||
<body>
|
||||
|
||||
<!-- Sezione Login -->
|
||||
<div id="login-section">
|
||||
<h2>Login</h2>
|
||||
|
|
@ -21,13 +20,17 @@
|
|||
</div>
|
||||
|
||||
<!-- 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>
|
||||
<label>
|
||||
<input type="radio" name="payment-method" value="Cash" checked> Cash
|
||||
<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>
|
||||
<input type="radio" name="payment-method" value="PayPal"> PayPal
|
||||
<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>
|
||||
|
||||
|
|
@ -40,19 +43,20 @@
|
|||
<div id="order-items"></div>
|
||||
<p>Totale: \u20ac <span id="total-price">0</span></p>
|
||||
|
||||
|
||||
|
||||
<button id="confirm-order-btn">Conferma Ordine</button>
|
||||
<button id="show-summary-btn">Mostra Riepilogo</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>
|
||||
<p><strong>Metodo di pagamento:</strong> <span id="summary-payment-method"></span></p>
|
||||
<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>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
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();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
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 {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#product-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
width: 200px;
|
||||
margin: 10px;
|
||||
padding: 15px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
input, button {
|
||||
padding: 10px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
#order-summary {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Stili per la lista dei prodotti, usa flexbox per disposizione responsive */
|
||||
#product-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Stili per ciascuna card prodotto */
|
||||
.product-card {
|
||||
font-size: 21px;
|
||||
width: 200px;
|
||||
margin: 10px;
|
||||
padding: 15px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Pulsante generico */
|
||||
button {
|
||||
padding: 10px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
/* Stili per gli input e i pulsanti */
|
||||
input, button {
|
||||
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 */
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue