delivery form + database
This commit is contained in:
Vova
@@ -1,33 +1,76 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { addOrder } from '../mockData'; // импорт функции добавления заказа
|
||||
import './DeliveryForm.css';
|
||||
|
||||
function DeliveryForm() {
|
||||
function DeliveryTimeForm({ title, value, onChange }) {
|
||||
return (
|
||||
<div className="delivery-form-group">
|
||||
<label htmlFor="deliveryTime">{title}</label>
|
||||
<select
|
||||
id="deliveryTime"
|
||||
name="deliveryTime"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
required
|
||||
>
|
||||
<option value="" disabled>
|
||||
Choose your desired delivery time slot
|
||||
</option>
|
||||
<option value="8:00 AM - 12:00 PM">8:00 AM - 12:00 PM</option>
|
||||
<option value="12:00 PM - 4:00 PM">12:00 PM - 4:00 PM</option>
|
||||
<option value="4:00 PM - 8:00 PM">4:00 PM - 8:00 PM</option>
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function DeliveryForm({ currentUserId }) {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const queryParams = new URLSearchParams(location.search);
|
||||
const initialAddress = queryParams.get('address') || '';
|
||||
const initialDeliveryDate = queryParams.get('deliveryDate') || '';
|
||||
const initialDeliveryTime = queryParams.get('deliveryTime') || '';
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
address: '',
|
||||
deliveryDate: '',
|
||||
deliveryTime: '',
|
||||
address: initialAddress,
|
||||
deliveryDate: initialDeliveryDate,
|
||||
deliveryTime: initialDeliveryTime,
|
||||
products: '',
|
||||
comment: '',
|
||||
});
|
||||
|
||||
const navigate = useNavigate(); // Хук для навигации
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData({ ...formData, [name]: value });
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
const productsArray = formData.products.split(',').map((product) => product.trim());
|
||||
|
||||
console.log('Order Created:', {
|
||||
...formData,
|
||||
products: productsArray,
|
||||
});
|
||||
|
||||
// Переход на страницу OrderTracking после создания заказа
|
||||
const productsArray = formData.products
|
||||
? formData.products.split(',').map((product) => product.trim())
|
||||
: [];
|
||||
|
||||
const newOrder = {
|
||||
userId: currentUserId, // связываем заказ с пользователем
|
||||
address: formData.address,
|
||||
deliveryDate: formData.deliveryDate,
|
||||
deliveryTime: formData.deliveryTime,
|
||||
products: productsArray,
|
||||
comment: formData.comment,
|
||||
status: 'Создан',
|
||||
orderDate: new Date().toISOString().split('T')[0],
|
||||
id: null, // будет присвоено в addOrder
|
||||
};
|
||||
|
||||
addOrder(newOrder);
|
||||
|
||||
navigate('/order-tracking');
|
||||
};
|
||||
|
||||
@@ -37,7 +80,7 @@ function DeliveryForm() {
|
||||
|
||||
return (
|
||||
<div className="delivery-form-container">
|
||||
<h2 className='heading_h2'>Create Your Order</h2>
|
||||
<h2 className="heading_h2">Create Your Order</h2>
|
||||
<form onSubmit={handleSubmit} className="delivery-form">
|
||||
<label htmlFor="address">Delivery Address</label>
|
||||
<input
|
||||
@@ -60,14 +103,10 @@ function DeliveryForm() {
|
||||
required
|
||||
/>
|
||||
|
||||
<label htmlFor="deliveryTime">Delivery Time</label>
|
||||
<input
|
||||
type="time"
|
||||
id="deliveryTime"
|
||||
name="deliveryTime"
|
||||
<DeliveryTimeForm
|
||||
title="Delivery Time"
|
||||
value={formData.deliveryTime}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
/>
|
||||
|
||||
<label htmlFor="products">Products</label>
|
||||
|
||||
@@ -4,4 +4,6 @@
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
position: relative;
|
||||
top: 43px;
|
||||
}
|
||||
@@ -1,332 +1,49 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { orders } from '../mockData';
|
||||
import './OrderTrackingScreen.css';
|
||||
|
||||
function OrderTrackingScreen() {
|
||||
// Пример данных для заказа
|
||||
const [orderData, setOrderData] = useState({
|
||||
orderId: 'ORD-90123',
|
||||
status: 'Подтвержден',
|
||||
deliveryAddress: 'Москва, ул. Тверская, д. 5',
|
||||
deliveryDateTime: '2025-04-20 18:00',
|
||||
items: [
|
||||
{ name: 'Avocado', quantity: 4, image: '/images/avocado.jpg' },
|
||||
{ name: 'Blueberries', quantity: 2, image: '/images/blueberries.jpg' },
|
||||
{ name: 'Cheddar Cheese', quantity: 1, image: '/images/cheese.jpg' },
|
||||
{ name: 'Dark Chocolate', quantity: 3, image: '/images/chocolate.jpg' },
|
||||
{ name: 'Almonds', quantity: 1, image: '/images/almonds.jpg' },
|
||||
],
|
||||
customerName: 'Анна Петрова',
|
||||
customerEmail: 'anna@example.com',
|
||||
shippingMethod: 'Самовывоз',
|
||||
paymentMethod: 'Наличными',
|
||||
orderDate: '2025-04-10',
|
||||
estimatedDelivery: '2025-04-20',
|
||||
contactNumber: '+7 (499) 765-43-21',
|
||||
discountCode: 'WELCOME10',
|
||||
totalAmount: 3200,
|
||||
notes: 'Позвонить за час до доставки',
|
||||
});
|
||||
const [orderData2, setOrderData2] = useState({
|
||||
orderId: 'ORD-90124',
|
||||
status: 'Создан',
|
||||
deliveryAddress: 'Санкт-Петербург, ул. невский пр., д. 5',
|
||||
deliveryDateTime: '2025-04-19 12:00',
|
||||
items: [
|
||||
{ name: 'Mango', quantity: 2, image: '/images/mango.jpg' },
|
||||
{ name: 'Pineapple', quantity: 2, image: '/images/pineapple.jpg' },
|
||||
{ name: 'Tomatoes', quantity: 4, image: '/images/tomatoes.jpg' },
|
||||
{ name: 'Cucumber', quantity: 4, image: '/images/cucumber.jpg' },
|
||||
],
|
||||
customerName: 'Алексей Сидоров',
|
||||
customerEmail: 'Alex@example.com',
|
||||
shippingMethod: 'Экспресс',
|
||||
paymentMethod: 'Онлайн картой',
|
||||
orderDate: '2025-04-10',
|
||||
estimatedDelivery: '2025-04-19',
|
||||
contactNumber: '+7 (499) 765-43-22',
|
||||
discountCode: 'WELCOME11',
|
||||
totalAmount: 1000,
|
||||
notes: 'Позвонить при доставке',
|
||||
});
|
||||
const [orderData3, setOrderData3] = useState({
|
||||
orderId: 'ORD-90125',
|
||||
status: 'В пути',
|
||||
deliveryAddress: 'Казань, ул. Баумана, д. 5',
|
||||
deliveryDateTime: '2025-04-21 15:00',
|
||||
items: [
|
||||
{ name: 'Orange', quantity: 2, image: '/images/orange.jpg' },
|
||||
{ name: 'Kiwi', quantity: 2, image: '/images/kiwi.jpg' },
|
||||
{ name: 'Potato', quantity: 4, image: '/images/potato.jpg' },
|
||||
{ name: 'Onion', quantity: 4, image: '/images/onion.jpg' },
|
||||
],
|
||||
customerName: 'Ольга Васильева',
|
||||
customerEmail: 'olga@example.com',
|
||||
shippingMethod: 'Стандарт',
|
||||
paymentMethod: 'Онлайн картой',
|
||||
orderDate: '2025-04-11',
|
||||
estimatedDelivery: '2025-04-21',
|
||||
contactNumber: '+7 (499) 765-43-23',
|
||||
discountCode: 'WELCOME12',
|
||||
totalAmount: 1200,
|
||||
notes: 'Позвонить при доставке',
|
||||
});
|
||||
const [orderData4, setOrderData4] = useState({
|
||||
orderId: 'ORD-90126',
|
||||
status: 'Доставлен',
|
||||
deliveryAddress: 'Самара, ул. Ленинградская, д. 5',
|
||||
deliveryDateTime: '2025-04-22 16:00',
|
||||
items: [
|
||||
{ name: 'Apple', quantity: 2, image: '/images/apple.jpg' },
|
||||
{ name: 'Lemon', quantity: 2, image: '/images/lemon.jpg' },
|
||||
{ name: 'Meat', quantity: 1, image: '/images/meat.jpg' },
|
||||
],
|
||||
customerName: 'Петр Иванов',
|
||||
customerEmail: 'petr@example.com',
|
||||
shippingMethod: 'Стандарт',
|
||||
paymentMethod: 'Онлайн картой',
|
||||
orderDate: '2025-04-12',
|
||||
estimatedDelivery: '2025-04-22',
|
||||
contactNumber: '+7 (499) 765-43-24',
|
||||
discountCode: 'WELCOME13',
|
||||
totalAmount: 3000,
|
||||
notes: 'Позвонить за час до доставки',
|
||||
});
|
||||
const [orderData5, setOrderData5] = useState({
|
||||
orderId: 'ORD-90127',
|
||||
status: 'Отменен',
|
||||
deliveryAddress: 'Ростов, ул. Пушкинская, д. 5',
|
||||
deliveryDateTime: '2025-04-23 17:00',
|
||||
items: [
|
||||
{ name: 'Fish', quantity: 1, image: '/images/fish.jpg' },
|
||||
{ name: 'Milk', quantity: 2, image: '/images/milk.jpg' },
|
||||
{ name: 'Bread', quantity: 1, image: '/images/bread.jpg' },
|
||||
],
|
||||
customerName: 'Екатерина Смирнова',
|
||||
customerEmail: 'kate@example.com',
|
||||
shippingMethod: 'Экспресс',
|
||||
paymentMethod: 'Онлайн картой',
|
||||
orderDate: '2025-04-13',
|
||||
estimatedDelivery: '2025-04-23',
|
||||
contactNumber: '+7 (499) 765-43-25',
|
||||
discountCode: 'WELCOME14',
|
||||
totalAmount: 1400,
|
||||
notes: 'Позвонить при доставке',
|
||||
});
|
||||
function OrderTracking({ currentUserId }) {
|
||||
const [userOrders, setUserOrders] = useState([]);
|
||||
|
||||
const handleStatusUpdate = (newStatus) => {
|
||||
setOrderData((prevData) => ({ ...prevData, status: newStatus }));
|
||||
};
|
||||
const handleStatusUpdate2 = (newStatus) => {
|
||||
setOrderData2((prevData) => ({ ...prevData, status: newStatus }));
|
||||
};
|
||||
const handleStatusUpdate3 = (newStatus) => {
|
||||
setOrderData3((prevData) => ({ ...prevData, status: newStatus }));
|
||||
};
|
||||
const handleStatusUpdate4 = (newStatus) => {
|
||||
setOrderData4((prevData) => ({ ...prevData, status: newStatus }));
|
||||
};
|
||||
const handleStatusUpdate5 = (newStatus) => {
|
||||
setOrderData5((prevData) => ({ ...prevData, status: newStatus }));
|
||||
};
|
||||
useEffect(() => {
|
||||
// Фильтруем заказы по текущему пользователю
|
||||
const filteredOrders = orders.filter(order => order.userId === currentUserId);
|
||||
setUserOrders(filteredOrders);
|
||||
}, [currentUserId]);
|
||||
|
||||
return (
|
||||
<div className="order-tracking-screen">
|
||||
<h2>Order tracking</h2>
|
||||
<table className="order-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Order Number</th>
|
||||
<th>Status</th>
|
||||
<th>Delivery Address</th>
|
||||
<th>Delivery Date and Time</th>
|
||||
<th>Products</th>
|
||||
<th>Customer Name</th>
|
||||
<th>Email</th>
|
||||
<th>Shipping</th>
|
||||
<th>Payment</th>
|
||||
<th>Order Date</th>
|
||||
<th>Expected Delivery</th>
|
||||
<th>Contacts</th>
|
||||
<th>Discount Code</th>
|
||||
<th>Order Total</th>
|
||||
<th>Notes</th>
|
||||
<th>Change Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{orderData.orderId}</td>
|
||||
<td>{orderData.status}</td>
|
||||
<td>{orderData.deliveryAddress}</td>
|
||||
<td>{orderData.deliveryDateTime}</td>
|
||||
<td>
|
||||
<ul className="order-items-list">
|
||||
{orderData.items.map((item, index) => (
|
||||
<li key={index} className="order-item">
|
||||
{item.name} (x{item.quantity})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</td>
|
||||
<td>{orderData.customerName}</td>
|
||||
<td>{orderData.customerEmail}</td>
|
||||
<td>{orderData.shippingMethod}</td>
|
||||
<td>{orderData.paymentMethod}</td>
|
||||
<td>{orderData.orderDate}</td>
|
||||
<td>{orderData.estimatedDelivery}</td>
|
||||
<td>{orderData.contactNumber}</td>
|
||||
<td>{orderData.discountCode}</td>
|
||||
<td>{orderData.totalAmount} руб.</td>
|
||||
<td>{orderData.notes}</td>
|
||||
<td>
|
||||
<select value={orderData.status} onChange={(e) => handleStatusUpdate(e.target.value)}>
|
||||
<option value="Создан">Создан</option>
|
||||
<option value="Подтвержден">Подтвержден</option>
|
||||
<option value="В пути">В пути</option>
|
||||
<option value="Доставлен">Доставлен</option>
|
||||
<option value="Отменен">Отменен</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{orderData2.orderId}</td>
|
||||
<td>{orderData2.status}</td>
|
||||
<td>{orderData2.deliveryAddress}</td>
|
||||
<td>{orderData2.deliveryDateTime}</td>
|
||||
<td>
|
||||
<ul className="order-items-list">
|
||||
{orderData2.items.map((item, index) => (
|
||||
<li key={index} className="order-item">
|
||||
{item.name} (x{item.quantity})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</td>
|
||||
<td>{orderData2.customerName}</td>
|
||||
<td>{orderData2.customerEmail}</td>
|
||||
<td>{orderData2.shippingMethod}</td>
|
||||
<td>{orderData2.paymentMethod}</td>
|
||||
<td>{orderData2.orderDate}</td>
|
||||
<td>{orderData2.estimatedDelivery}</td>
|
||||
<td>{orderData2.contactNumber}</td>
|
||||
<td>{orderData2.discountCode}</td>
|
||||
<td>{orderData2.totalAmount} руб.</td>
|
||||
<td>{orderData2.notes}</td>
|
||||
<td>
|
||||
<select value={orderData2.status} onChange={(e) => handleStatusUpdate2(e.target.value)}>
|
||||
<option value="Создан">Создан</option>
|
||||
<option value="Подтвержден">Подтвержден</option>
|
||||
<option value="В пути">В пути</option>
|
||||
<option value="Доставлен">Доставлен</option>
|
||||
<option value="Отменен">Отменен</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{orderData3.orderId}</td>
|
||||
<td>{orderData3.status}</td>
|
||||
<td>{orderData3.deliveryAddress}</td>
|
||||
<td>{orderData3.deliveryDateTime}</td>
|
||||
<td>
|
||||
<ul className="order-items-list">
|
||||
{orderData3.items.map((item, index) => (
|
||||
<li key={index} className="order-item">
|
||||
{item.name} (x{item.quantity})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</td>
|
||||
<td>{orderData3.customerName}</td>
|
||||
<td>{orderData3.customerEmail}</td>
|
||||
<td>{orderData3.shippingMethod}</td>
|
||||
<td>{orderData3.paymentMethod}</td>
|
||||
<td>{orderData3.orderDate}</td>
|
||||
<td>{orderData3.estimatedDelivery}</td>
|
||||
<td>{orderData3.contactNumber}</td>
|
||||
<td>{orderData3.discountCode}</td>
|
||||
<td>{orderData3.totalAmount} руб.</td>
|
||||
<td>{orderData3.notes}</td>
|
||||
<td>
|
||||
<select value={orderData3.status} onChange={(e) => handleStatusUpdate3(e.target.value)}>
|
||||
<option value="Создан">Создан</option>
|
||||
<option value="Подтвержден">Подтвержден</option>
|
||||
<option value="В пути">В пути</option>
|
||||
<option value="Доставлен">Доставлен</option>
|
||||
<option value="Отменен">Отменен</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{orderData4.orderId}</td>
|
||||
<td>{orderData4.status}</td>
|
||||
<td>{orderData4.deliveryAddress}</td>
|
||||
<td>{orderData4.deliveryDateTime}</td>
|
||||
<td>
|
||||
<ul className="order-items-list">
|
||||
{orderData4.items.map((item, index) => (
|
||||
<li key={index} className="order-item">
|
||||
{item.name} (x{item.quantity})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</td>
|
||||
<td>{orderData4.customerName}</td>
|
||||
<td>{orderData4.customerEmail}</td>
|
||||
<td>{orderData4.shippingMethod}</td>
|
||||
<td>{orderData4.paymentMethod}</td>
|
||||
<td>{orderData4.orderDate}</td>
|
||||
<td>{orderData4.estimatedDelivery}</td>
|
||||
<td>{orderData4.contactNumber}</td>
|
||||
<td>{orderData4.discountCode}</td>
|
||||
<td>{orderData4.totalAmount} руб.</td>
|
||||
<td>{orderData4.notes}</td>
|
||||
<td>
|
||||
<select value={orderData4.status} onChange={(e) => handleStatusUpdate4(e.target.value)}>
|
||||
<option value="Создан">Создан</option>
|
||||
<option value="Подтвержден">Подтвержден</option>
|
||||
<option value="В пути">В пути</option>
|
||||
<option value="Доставлен">Доставлен</option>
|
||||
<option value="Отменен">Отменен</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{orderData5.orderId}</td>
|
||||
<td>{orderData5.status}</td>
|
||||
<td>{orderData5.deliveryAddress}</td>
|
||||
<td>{orderData5.deliveryDateTime}</td>
|
||||
<td>
|
||||
<ul className="order-items-list">
|
||||
{orderData5.items.map((item, index) => (
|
||||
<li key={index} className="order-item">
|
||||
{item.name} (x{item.quantity})
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</td>
|
||||
<td>{orderData5.customerName}</td>
|
||||
<td>{orderData5.customerEmail}</td>
|
||||
<td>{orderData5.shippingMethod}</td>
|
||||
<td>{orderData5.paymentMethod}</td>
|
||||
<td>{orderData5.orderDate}</td>
|
||||
<td>{orderData5.estimatedDelivery}</td>
|
||||
<td>{orderData5.contactNumber}</td>
|
||||
<td>{orderData5.discountCode}</td>
|
||||
<td>{orderData5.totalAmount} руб.</td>
|
||||
<td>{orderData5.notes}</td>
|
||||
<td>
|
||||
<select value={orderData5.status} onChange={(e) => handleStatusUpdate5(e.target.value)}>
|
||||
<option value="Создан">Создан</option>
|
||||
<option value="Подтвержден">Подтвержден</option>
|
||||
<option value="В пути">В пути</option>
|
||||
<option value="Отменен">Отменен</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div className="order-tracking-container">
|
||||
<h2>Мои заказы</h2>
|
||||
{userOrders.length === 0 ? (
|
||||
<p>Заказы отсутствуют</p>
|
||||
) : (
|
||||
<table className="order-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Адрес доставки</th>
|
||||
<th>Дата доставки</th>
|
||||
<th>Время доставки</th>
|
||||
<th>Продукты</th>
|
||||
<th>Комментарий</th>
|
||||
<th>Статус</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{userOrders.map((order) => (
|
||||
<tr key={order.id}>
|
||||
<td>{order.address}</td>
|
||||
<td>{order.deliveryDate}</td>
|
||||
<td>{order.deliveryTime}</td>
|
||||
<td>{order.products.join(', ')}</td>
|
||||
<td>{order.comment}</td>
|
||||
<td>{order.status}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default OrderTrackingScreen;
|
||||
export default OrderTracking;
|
||||
|
||||
@@ -59,8 +59,13 @@ function ShippingTimeForm({ title, value, onChange }) {
|
||||
return (
|
||||
<div className="shipping-form">
|
||||
<h3>{title}</h3>
|
||||
<select value={value} onChange={(e) => onChange(e.target.value)}>
|
||||
<option>Choose your desired delivery time slot</option>
|
||||
<select
|
||||
value={value}
|
||||
onChange={onChange} // передаем событие дальше
|
||||
name="deliveryTime"
|
||||
required
|
||||
>
|
||||
<option value="" disabled>Choose your desired delivery time slot</option>
|
||||
<option value="8:00 AM - 12:00 PM">8:00 AM - 12:00 PM</option>
|
||||
<option value="12:00 PM - 4:00 PM">12:00 PM - 4:00 PM</option>
|
||||
<option value="4:00 PM - 8:00 PM">4:00 PM - 8:00 PM</option>
|
||||
|
||||
@@ -1,14 +1,21 @@
|
||||
// mockData.js
|
||||
export let users = [{
|
||||
id: 1,
|
||||
name: 'Иван',
|
||||
surname: 'Иванов',
|
||||
phone: '1234567890',
|
||||
password: 'password123',
|
||||
}, ];
|
||||
export const users = [{
|
||||
id: 1,
|
||||
name: 'Иван',
|
||||
surname: 'Иванов',
|
||||
phone: '1234567890',
|
||||
password: 'password123',
|
||||
}];
|
||||
|
||||
export const orders = [];
|
||||
|
||||
// Функция для добавления пользователя (имитация записи в БД)
|
||||
export const addUser = (user) => {
|
||||
user.id = users.length + 1;
|
||||
users.push(user);
|
||||
const id = users.length + 1;
|
||||
users.push({ id, ...user });
|
||||
return id; // return id for confirmation
|
||||
};
|
||||
|
||||
export const addOrder = (order) => {
|
||||
const id = orders.length + 1;
|
||||
orders.push({ id, ...order });
|
||||
return id; // return id for confirmation
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user