diff --git a/public/index copy.html b/public/index copy.html new file mode 100644 index 0000000..99b59f6 --- /dev/null +++ b/public/index copy.html @@ -0,0 +1,65 @@ + + + + + + + Carrello Ordini + + + + + + +
+

Login

+
+ + + +
+
+ + + +

Seleziona metodo di pagamento:

+
+ + +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/public/index.html b/public/index.html index d363ff5..18be016 100644 --- a/public/index.html +++ b/public/index.html @@ -9,7 +9,6 @@ -

Login

@@ -21,13 +20,17 @@
-
+ @@ -40,19 +43,20 @@

Totale: \u20ac 0

- - - +
- \ No newline at end of file + diff --git a/public/script.js b/public/script.js index 385ed24..d755fdd 100644 --- a/public/script.js +++ b/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 = ` -
${product.nome}
-
EUR ${product.prezzo}
-
- - ${quantity} - -
+

${product.nome}

+

€ ${product.prezzo}

+ `; - 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 = `

Ordine per l'ID Utente: ${order.id_utente}

`; - orderDetailsHTML += `

Tipo di pagamento: ${order.tipo_pagamento}

`; - order.prodotti_acquistati.forEach(item => { - orderDetailsHTML += `

${item.nome} - EUR ${item.prezzo} x ${item.quantita}

`; - }); - orderDetailsHTML += `

Totale: EUR ${order.prezzo_totale}

`; - 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(); - } -}; diff --git a/public/script.js.back b/public/script.js.back new file mode 100644 index 0000000..385ed24 --- /dev/null +++ b/public/script.js.back @@ -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 = ` +
${product.nome}
+
EUR ${product.prezzo}
+
+ + ${quantity} + +
+ `; + 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 = `

Ordine per l'ID Utente: ${order.id_utente}

`; + orderDetailsHTML += `

Tipo di pagamento: ${order.tipo_pagamento}

`; + order.prodotti_acquistati.forEach(item => { + orderDetailsHTML += `

${item.nome} - EUR ${item.prezzo} x ${item.quantita}

`; + }); + orderDetailsHTML += `

Totale: EUR ${order.prezzo_totale}

`; + 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(); + } +}; diff --git a/public/styles.css b/public/styles.css index c3f0df4..37974a4 100644 --- a/public/styles.css +++ b/public/styles.css @@ -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; - } - \ No newline at end of file + 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 */ +} diff --git a/server3.js b/server3.js new file mode 100644 index 0000000..18b3c4b --- /dev/null +++ b/server3.js @@ -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}`); +});