From 80563f14d6c9e0eb4de2def34be20650b00081f3 Mon Sep 17 00:00:00 2001 From: CarooZaav24 Date: Fri, 25 Oct 2024 08:18:57 -0600 Subject: [PATCH 1/7] clonado del archivo .env.example y renombrado a a.env --- a.env | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 a.env diff --git a/a.env b/a.env new file mode 100644 index 0000000..8384911 --- /dev/null +++ b/a.env @@ -0,0 +1,6 @@ +VITE_API_KEY="" +VITE_AUTH_DOMAIN="" +VITE_PROJECT_ID="" +VITE_STORAGE_BUCKET="" +VITE_MESSAGING_SENDER_ID="" +VITE_APP_ID="" \ No newline at end of file From 635593ea558d8186d964393629164f8595665b8d Mon Sep 17 00:00:00 2001 From: CarooZaav24 Date: Fri, 25 Oct 2024 08:46:08 -0600 Subject: [PATCH 2/7] valores de firebase completados en el archivo .env --- a.env | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 a.env diff --git a/a.env b/a.env deleted file mode 100644 index 8384911..0000000 --- a/a.env +++ /dev/null @@ -1,6 +0,0 @@ -VITE_API_KEY="" -VITE_AUTH_DOMAIN="" -VITE_PROJECT_ID="" -VITE_STORAGE_BUCKET="" -VITE_MESSAGING_SENDER_ID="" -VITE_APP_ID="" \ No newline at end of file From 942c67ef805519ed86067d239eb09da94edf98e8 Mon Sep 17 00:00:00 2001 From: CarooZaav24 Date: Fri, 25 Oct 2024 09:21:37 -0600 Subject: [PATCH 3/7] correccion del archivo .env por el gitignore --- .env | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 0000000..7699dc2 --- /dev/null +++ b/.env @@ -0,0 +1,6 @@ +VITE_API_KEY="AIzaSyBMt_g1TJldovTJBzSI_e5jPNfzXxo4ChI" +VITE_AUTH_DOMAIN="restaurantecarol2024.firebaseapp.com" +VITE_PROJECT_ID="restaurantecarol2024" +VITE_STORAGE_BUCKET="restaurantecarol2024.appspot.com" +VITE_MESSAGING_SENDER_ID="144840930265" +VITE_APP_ID="1:144840930265:web:d4c7fe54f38e23bda25fc8" \ No newline at end of file From 8c666246faebf12936dd0081672573a081007ae3 Mon Sep 17 00:00:00 2001 From: CarooZaav24 Date: Mon, 28 Oct 2024 19:59:28 -0600 Subject: [PATCH 4/7] Avances de mi prueba para entrega --- src/orderForm.jsx | 66 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 66 insertions(+) create mode 100644 src/orderForm.jsx diff --git a/src/orderForm.jsx b/src/orderForm.jsx new file mode 100644 index 0000000..99e551e --- /dev/null +++ b/src/orderForm.jsx @@ -0,0 +1,66 @@ +import React, { useState } from 'react'; + +const OrderForm = () => { + const [customerName, setCustomerName] = useState(''); + const [items, setItems] = useState([]); + const [total, setTotal] = useState(''); + const [modality, setModality] = useState(''); + + const handleSubmit = (event) => { + event.preventDefault(); + + if (customerName items.length === 0 total) { + alert("Por favor, complete todos los campos y seleccione al menos un artículo."); + return; + } + + const orderData = { + customerName, + items, + total: parseFloat(total), + modality, + createdAt: new Date(), + updatedAt: new Date(), + }; + + // Aquí puedes llamar a Firebase para guardar el pedido + console.log("Pedido creado:", orderData); + alert("Pedido creado exitosamente"); + }; + + const handleItemChange = (event) => { + const value = event.target.value; + setItems(prevItems => + event.target.checked ? [...prevItems, value] : prevItems.filter(item => item !== value) + ); + }; + + return ( +
+ + +

Seleccione los elementos del menú:

+
+
+
+
+
+ + + +

Recogida o Entrega:

+ +
+ + +
+ ); +}; + +export default OrderForm; \ No newline at end of file From 3063e8b41a267665b97f988bb800409094d8d886 Mon Sep 17 00:00:00 2001 From: CarooZaav24 Date: Fri, 15 Nov 2024 21:59:17 -0600 Subject: [PATCH 5/7] formulario realizado, faltan algunos detalles --- src/App.jsx | 25 +++++-- src/firebaseConfig.js | 20 ++++++ src/orderForm.jsx | 150 +++++++++++++++++++++++++++++------------- 3 files changed, 143 insertions(+), 52 deletions(-) create mode 100644 src/firebaseConfig.js diff --git a/src/App.jsx b/src/App.jsx index b749a6b..dbff4df 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,14 +1,16 @@ -import { useState } from 'react' -import viteLogo from '/vite.svg' -import './App.css' +import { useState } from 'react'; +import viteLogo from '/vite.svg'; +import './App.css'; +import React from 'react'; +import OrderForm from './orderForm'; function App() { - const [count, setCount] = useState(0) + const [count, setCount] = useState(0); return ( <> @@ -24,8 +26,17 @@ function App() {

Click on the Vite and React logos to learn more

+ +
+

Bienvenido al Restaurante

+

Por favor, realiza tu pedido a continuación:

+ + + +
Gracias por visitarnos
+
- ) + ); } -export default App +export default App; \ No newline at end of file diff --git a/src/firebaseConfig.js b/src/firebaseConfig.js new file mode 100644 index 0000000..a121873 --- /dev/null +++ b/src/firebaseConfig.js @@ -0,0 +1,20 @@ +import { initializeApp } from "firebase/app"; +import { getFirestore } from "firebase/firestore"; // Si usas Firestore +import { getAuth } from "firebase/auth"; // Si usas Autenticación + +const firebaseConfig = { + apiKey: import.meta.env.VITE_API_KEY, + authDomain: import.meta.env.VITE_AUTH_DOMAIN, + projectId: import.meta.env.VITE_PROJECT_ID, + storageBucket: import.meta.env.VITE_STORAGE_BUCKET, + messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID, + appId: import.meta.env.VITE_APP_ID +}; + +// Inicializa Firebase +const app = initializeApp(firebaseConfig); + +// Exporta servicios según los necesites +export const db = getFirestore(app); +export const auth = getAuth(app); +export default app; diff --git a/src/orderForm.jsx b/src/orderForm.jsx index 99e551e..2fc9a95 100644 --- a/src/orderForm.jsx +++ b/src/orderForm.jsx @@ -1,66 +1,126 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; +import { collection, addDoc, serverTimestamp } from 'firebase/firestore'; +import { db } from './firebaseConfig'; const OrderForm = () => { const [customerName, setCustomerName] = useState(''); - const [items, setItems] = useState([]); - const [total, setTotal] = useState(''); + const [selectedItems, setSelectedItems] = useState([]); + const [total, setTotal] = useState(0); const [modality, setModality] = useState(''); - const handleSubmit = (event) => { - event.preventDefault(); + // Precios de los elementos del menú + const menuItems = [ + { name: 'Hamburguesa simple', price: 100 }, + { name: 'Hot dog', price: 70 }, + { name: 'Hamburguesa doble', price: 150 }, + { name: 'Papas fritas frescas', price: 80 }, + { name: 'Soda', price: 25 } + ]; - if (customerName items.length === 0 total) { - alert("Por favor, complete todos los campos y seleccione al menos un artículo."); - return; - } - - const orderData = { - customerName, - items, - total: parseFloat(total), - modality, - createdAt: new Date(), - updatedAt: new Date(), - }; + // Calcula el total automáticamente cuando cambian los elementos seleccionados + useEffect(() => { + const totalAmount = selectedItems.reduce((sum, item) => { + const menuItem = menuItems.find(menuItem => menuItem.name === item); + return sum + (menuItem ? menuItem.price : 0); + }, 0); + setTotal(totalAmount); + }, [selectedItems]); - // Aquí puedes llamar a Firebase para guardar el pedido - console.log("Pedido creado:", orderData); - alert("Pedido creado exitosamente"); + const handleCheckboxChange = (itemName) => { + setSelectedItems(prevItems => + prevItems.includes(itemName) + ? prevItems.filter(item => item !== itemName) + : [...prevItems, itemName] + ); }; - const handleItemChange = (event) => { - const value = event.target.value; - setItems(prevItems => - event.target.checked ? [...prevItems, value] : prevItems.filter(item => item !== value) - ); + const handleSubmit = async (e) => { + e.preventDefault(); + + // Validaciones + if (!customerName || selectedItems.length === 0) { + alert("Por favor, completa todos los campos obligatorios."); + return; + } + + try { + await addDoc(collection(db, 'orders'), { + customerName, + items: selectedItems, + total, + modality, + createdAt: serverTimestamp(), + updatedAt: serverTimestamp() + }); + alert('Pedido enviado exitosamente'); + // Limpiar el formulario + setCustomerName(''); + setSelectedItems([]); + setTotal(0); + setModality(''); + } catch (error) { + console.error("Error al enviar el pedido:", error); + } }; return (
- +
+ + setCustomerName(e.target.value)} + required + /> +
-

Seleccione los elementos del menú:

-
-
-
-
-
+
+ + {menuItems.map((item) => ( + + ))} +
- +
+ +
-

Recogida o Entrega:

- -
+
+ + + +
- +
); }; -export default OrderForm; \ No newline at end of file +export default OrderForm; From f827a2ac9eab24f8c9af2feb940e3491631eb394 Mon Sep 17 00:00:00 2001 From: CarooZaav24 Date: Mon, 18 Nov 2024 11:47:48 -0600 Subject: [PATCH 6/7] avance del formulario --- src/firebaseConfig.js | 22 +++++++++++++--------- src/orderForm.jsx | 19 ++++++++++--------- 2 files changed, 23 insertions(+), 18 deletions(-) diff --git a/src/firebaseConfig.js b/src/firebaseConfig.js index a121873..551174b 100644 --- a/src/firebaseConfig.js +++ b/src/firebaseConfig.js @@ -1,20 +1,24 @@ +// Importación de las funciones necesarias de Firebase import { initializeApp } from "firebase/app"; -import { getFirestore } from "firebase/firestore"; // Si usas Firestore -import { getAuth } from "firebase/auth"; // Si usas Autenticación +import { getFirestore } from "firebase/firestore"; +import { getAuth } from "firebase/auth"; +// Configuración de Firebase usando variables de entorno const firebaseConfig = { - apiKey: import.meta.env.VITE_API_KEY, + apiKey: import.meta.env.VITE_API_KEY, authDomain: import.meta.env.VITE_AUTH_DOMAIN, projectId: import.meta.env.VITE_PROJECT_ID, - storageBucket: import.meta.env.VITE_STORAGE_BUCKET, - messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID, - appId: import.meta.env.VITE_APP_ID + storageBucket: import.meta.env.VITE_STORAGE_BUCKET, + messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID, + appId: import.meta.env.VITE_APP_ID, }; -// Inicializa Firebase +// Inicialización de la app de Firebase const app = initializeApp(firebaseConfig); -// Exporta servicios según los necesites +// Inicialización de Firestore y Auth export const db = getFirestore(app); export const auth = getAuth(app); -export default app; + +// Exportación de la app por si se necesita usarla en otros lugares +export default app; \ No newline at end of file diff --git a/src/orderForm.jsx b/src/orderForm.jsx index 2fc9a95..e0b8569 100644 --- a/src/orderForm.jsx +++ b/src/orderForm.jsx @@ -7,8 +7,8 @@ const OrderForm = () => { const [selectedItems, setSelectedItems] = useState([]); const [total, setTotal] = useState(0); const [modality, setModality] = useState(''); + const [loading, setLoading] = useState(false); - // Precios de los elementos del menú const menuItems = [ { name: 'Hamburguesa simple', price: 100 }, { name: 'Hot dog', price: 70 }, @@ -17,7 +17,6 @@ const OrderForm = () => { { name: 'Soda', price: 25 } ]; - // Calcula el total automáticamente cuando cambian los elementos seleccionados useEffect(() => { const totalAmount = selectedItems.reduce((sum, item) => { const menuItem = menuItems.find(menuItem => menuItem.name === item); @@ -36,13 +35,12 @@ const OrderForm = () => { const handleSubmit = async (e) => { e.preventDefault(); - - // Validaciones - if (!customerName || selectedItems.length === 0) { + if (!customerName.trim() || selectedItems.length === 0) { alert("Por favor, completa todos los campos obligatorios."); return; } + setLoading(true); try { await addDoc(collection(db, 'orders'), { customerName, @@ -53,13 +51,14 @@ const OrderForm = () => { updatedAt: serverTimestamp() }); alert('Pedido enviado exitosamente'); - // Limpiar el formulario setCustomerName(''); setSelectedItems([]); setTotal(0); setModality(''); } catch (error) { - console.error("Error al enviar el pedido:", error); + console.error("Error al enviar el pedido:", error.message); + } finally { + setLoading(false); } }; @@ -118,9 +117,11 @@ const OrderForm = () => { - + ); }; -export default OrderForm; +export default OrderForm; \ No newline at end of file From 053985e49af6e08577fadeab48b61710d2a56538 Mon Sep 17 00:00:00 2001 From: CarooZaav24 Date: Tue, 19 Nov 2024 20:50:35 -0600 Subject: [PATCH 7/7] avances hasta update order, falta el paso delete order --- src/App.jsx | 8 ++- src/OrderList.jsx | 128 ++++++++++++++++++++++++++++++++++++++++++++++ src/orderForm.jsx | 72 +++++++++++++++++++------- 3 files changed, 188 insertions(+), 20 deletions(-) create mode 100644 src/OrderList.jsx diff --git a/src/App.jsx b/src/App.jsx index dbff4df..19d0723 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,6 +3,7 @@ import viteLogo from '/vite.svg'; import './App.css'; import React from 'react'; import OrderForm from './orderForm'; +import OrderList from './OrderList'; // Importacion del componente function App() { const [count, setCount] = useState(0); @@ -31,7 +32,10 @@ function App() {

Bienvenido al Restaurante

Por favor, realiza tu pedido a continuación:

- + {/* Componente del formulario de pedidos */} + +

Pedidos registrados:

+ {/* Componente para mostrar los pedidos */}
Gracias por visitarnos
@@ -39,4 +43,4 @@ function App() { ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/OrderList.jsx b/src/OrderList.jsx new file mode 100644 index 0000000..cf11511 --- /dev/null +++ b/src/OrderList.jsx @@ -0,0 +1,128 @@ +import React, { useState, useEffect } from 'react'; +import { collection, getDocs, doc, deleteDoc, updateDoc } from 'firebase/firestore'; +import { db } from './firebaseConfig'; +import OrderForm from './orderForm'; // Importa el formulario existente + +const OrderList = () => { + const [orders, setOrders] = useState([]); // Lista de pedidos + const [selectedOrder, setSelectedOrder] = useState(null); // Pedido seleccionado + const [editing, setEditing] = useState(false); // Estado para saber si estamos editando + const [loading, setLoading] = useState(true); // Estado de carga + + // Función para recuperar los pedidos desde Firestore + const fetchOrders = async () => { + try { + const querySnapshot = await getDocs(collection(db, 'orders')); + const ordersData = querySnapshot.docs.map(doc => ({ + id: doc.id, + ...doc.data() + })); + setOrders(ordersData); + } catch (error) { + console.error("Error al recuperar los pedidos:", error.message); + } finally { + setLoading(false); + } + }; + + // Llama a fetchOrders al cargar el componente + useEffect(() => { + fetchOrders(); + }, []); + + // Función para manejar clic en un pedido + const handleSelectOrder = (order) => { + setSelectedOrder(order); // Establece el pedido seleccionado + }; + + // Función para eliminar un pedido + const handleDeleteOrder = async (id) => { + const confirmDelete = window.confirm('¿Estás seguro de que deseas eliminar este pedido?'); + if (confirmDelete) { + try { + await deleteDoc(doc(db, 'orders', id)); + alert('Pedido eliminado exitosamente.'); + setOrders(orders.filter(order => order.id !== id)); // Actualiza la lista localmente + setSelectedOrder(null); // Limpia el detalle si el pedido estaba seleccionado + } catch (error) { + console.error("Error al eliminar el pedido:", error.message); + } + } + }; + + // Función para manejar clic en Update + const handleUpdateOrder = () => { + setEditing(true); // Cambia al modo de edición + }; + + // Función para manejar la actualización del pedido + const handleSubmitUpdatedOrder = async (updatedOrder) => { + try { + await updateDoc(doc(db, 'orders', updatedOrder.id), updatedOrder); + alert('Pedido actualizado exitosamente.'); + setEditing(false); // Salir del modo de edición + setSelectedOrder(null); // Regresa a la lista + fetchOrders(); // Actualiza la lista + } catch (error) { + console.error("Error al actualizar el pedido:", error.message); + } + }; + + // Renderizado condicional + if (loading) { + return

Cargando pedidos...

; + } + + return ( +
+

Pedidos existentes

+ + {!selectedOrder && !editing ? ( + // Lista de pedidos + orders.length > 0 ? ( +
    + {orders.map(order => ( +
  • handleSelectOrder(order)}> +

    Nombre del cliente: {order.customerName}

    +

    Número de artículos: {order.items.length}

    +

    Total: ${order.total}

    +
    • + ))} +
+ ) : ( +

No hay pedidos registrados.

+ ) + ) : selectedOrder && !editing ? ( + // Detalle del pedido seleccionado +
+

Detalle del Pedido

+

Nombre del cliente: {selectedOrder.customerName}

+

Artículos: {selectedOrder.items.join(', ')}

+

Total: ${selectedOrder.total}

+

Modalidad: {selectedOrder.modality}

+

Creado en: {selectedOrder.createdAt?.toDate().toLocaleString()}

+

Actualizado en: {selectedOrder.updatedAt?.toDate().toLocaleString()}

+ + {/* Botones de acción */} + + + +
+ ) : ( + // Modo de edición + { + setEditing(false); + setSelectedOrder(null); // Regresa al detalle si se cancela + }} + /> + )} +
+ ); +}; + +export default OrderList; diff --git a/src/orderForm.jsx b/src/orderForm.jsx index e0b8569..40b1427 100644 --- a/src/orderForm.jsx +++ b/src/orderForm.jsx @@ -1,12 +1,12 @@ import React, { useState, useEffect } from 'react'; -import { collection, addDoc, serverTimestamp } from 'firebase/firestore'; -import { db } from './firebaseConfig'; +import { collection, addDoc, doc, updateDoc, serverTimestamp } from 'firebase/firestore'; +import { db } from './firebaseConfig'; -const OrderForm = () => { - const [customerName, setCustomerName] = useState(''); - const [selectedItems, setSelectedItems] = useState([]); - const [total, setTotal] = useState(0); - const [modality, setModality] = useState(''); +const OrderForm = ({ initialData = null, onSubmit, onCancel }) => { + const [customerName, setCustomerName] = useState(initialData?.customerName || ''); + const [selectedItems, setSelectedItems] = useState(initialData?.items || []); + const [total, setTotal] = useState(initialData?.total || 0); + const [modality, setModality] = useState(initialData?.modality || ''); const [loading, setLoading] = useState(false); const menuItems = [ @@ -17,6 +17,7 @@ const OrderForm = () => { { name: 'Soda', price: 25 } ]; + // Calcula el total dinámicamente al cambiar los elementos seleccionados useEffect(() => { const totalAmount = selectedItems.reduce((sum, item) => { const menuItem = menuItems.find(menuItem => menuItem.name === item); @@ -25,6 +26,7 @@ const OrderForm = () => { setTotal(totalAmount); }, [selectedItems]); + // Maneja la selección de elementos del menú const handleCheckboxChange = (itemName) => { setSelectedItems(prevItems => prevItems.includes(itemName) @@ -33,8 +35,10 @@ const OrderForm = () => { ); }; + // Maneja el envío del formulario const handleSubmit = async (e) => { e.preventDefault(); + if (!customerName.trim() || selectedItems.length === 0) { alert("Por favor, completa todos los campos obligatorios."); return; @@ -42,15 +46,42 @@ const OrderForm = () => { setLoading(true); try { - await addDoc(collection(db, 'orders'), { - customerName, - items: selectedItems, - total, - modality, - createdAt: serverTimestamp(), - updatedAt: serverTimestamp() - }); - alert('Pedido enviado exitosamente'); + if (initialData) { + // Actualización de un pedido existente + const docRef = doc(db, 'orders', initialData.id); + await updateDoc(docRef, { + customerName, + items: selectedItems, + total, + modality, + updatedAt: serverTimestamp() + }); + alert('Pedido actualizado exitosamente.'); + } else { + // Creación de un nuevo pedido + await addDoc(collection(db, 'orders'), { + customerName, + items: selectedItems, + total, + modality, + createdAt: serverTimestamp(), + updatedAt: serverTimestamp() + }); + alert('Pedido enviado exitosamente.'); + } + + // Llama a la función de envío proporcionada + if (onSubmit) { + onSubmit({ + id: initialData?.id || null, + customerName, + items: selectedItems, + total, + modality + }); + } + + // Limpia el formulario después de enviar setCustomerName(''); setSelectedItems([]); setTotal(0); @@ -118,10 +149,15 @@ const OrderForm = () => { + {onCancel && ( + + )} ); }; -export default OrderForm; \ No newline at end of file +export default OrderForm;