prima prova
This commit is contained in:
PanSi21
parent
4009b1a0be
commit
1a59bcf2b0
GPG key ID:
755F8874C65EF462
9 changed files with 1387 additions and 0 deletions
58
public/index.html
Normal file
58
public/index.html
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<!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 -->
|
||||
<div id="payment-method-section">
|
||||
<h3>Seleziona metodo di pagamento:</h3>
|
||||
<label>
|
||||
<input type="radio" name="payment-method" value="Cash" checked> Cash
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="payment-method" value="PayPal"> PayPal
|
||||
</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: \u20ac <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>
|
||||
185
public/script.js
Normal file
185
public/script.js
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();
|
||||
}
|
||||
};
|
||||
83
public/statistiche.html
Normal file
83
public/statistiche.html
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Statistiche Ordini</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>Statistiche degli Ordini</h1>
|
||||
|
||||
<h2>Totale vendite</h2>
|
||||
<p id="totale-vendite">Caricamento in corso...</p>
|
||||
|
||||
<h2>Metodi di Pagamento</h2>
|
||||
<h3>Totale in contante</h3>
|
||||
<p id="cash-total">Caricamento in corso...</p>
|
||||
<h3>Totale PayPal</h3>
|
||||
<p id="paypal-total">Caricamento in corso...</p>
|
||||
|
||||
<h2>Statistiche per Utente</h2>
|
||||
<div id="user-stats">Caricamento in corso...</div>
|
||||
|
||||
<h2>Prodotti Venduti</h2>
|
||||
<table id="product-stats">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome Prodotto</th>
|
||||
<th>Quantità Vendute</th>
|
||||
<th>Totale</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Le righe saranno riempite tramite JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<script>
|
||||
// Carica le statistiche dal server
|
||||
fetch('/statistiche')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const { utenti, metodi_pagamento, prodotti_venduti, totale_vendite } = data;
|
||||
|
||||
// Mostra il totale delle vendite
|
||||
document.getElementById('totale-vendite').textContent = `€ ${totale_vendite.toFixed(2)}`;
|
||||
|
||||
// Mostra il totale per ogni metodo di pagamento
|
||||
document.getElementById('cash-total').textContent = `€ ${metodi_pagamento.Cash.toFixed(2)}`;
|
||||
document.getElementById('paypal-total').textContent = `€ ${metodi_pagamento.PayPal.toFixed(2)}`;
|
||||
|
||||
// Mostra le statistiche per utente
|
||||
let userStatsHTML = '';
|
||||
for (const [userId, stats] of Object.entries(utenti)) {
|
||||
userStatsHTML += `
|
||||
<div>
|
||||
<h3>Utente ${userId}</h3>
|
||||
<p>Totale in contante: € ${stats.totale_cash.toFixed(2)}</p>
|
||||
<p>Totale PayPal: € ${stats.totale_paypal.toFixed(2)}</p>
|
||||
<p>Totale ordine: € ${stats.totale.toFixed(2)}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
document.getElementById('user-stats').innerHTML = userStatsHTML;
|
||||
|
||||
// Mostra le statistiche dei prodotti venduti
|
||||
const productStatsTable = document.getElementById('product-stats').getElementsByTagName('tbody')[0];
|
||||
for (const [productName, stats] of Object.entries(prodotti_venduti)) {
|
||||
const row = productStatsTable.insertRow();
|
||||
row.insertCell(0).textContent = productName;
|
||||
row.insertCell(1).textContent = stats.quantita;
|
||||
row.insertCell(2).textContent = `€ ${stats.totale.toFixed(2)}`;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Errore nel caricamento delle statistiche:', error);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
47
public/styles.css
Normal file
47
public/styles.css
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
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;
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue