From 3a750eda6d2d3e1a720abdc02a5f2a073c89dca6 Mon Sep 17 00:00:00 2001 From: andrei Date: Sat, 5 Oct 2024 14:00:28 +0500 Subject: [PATCH] ._. --- src/AppRouter.jsx | 4 +- src/api.jsx | 59 ++++++++++++ src/components/Header.jsx | 5 + src/pages/Accessories.jsx | 1 - src/pages/Trucks.jsx | 186 ++++++++++++++++++++++++++++++++++++++ 5 files changed, 253 insertions(+), 2 deletions(-) create mode 100644 src/pages/Trucks.jsx diff --git a/src/AppRouter.jsx b/src/AppRouter.jsx index 0521543..51ac508 100755 --- a/src/AppRouter.jsx +++ b/src/AppRouter.jsx @@ -7,6 +7,7 @@ import Cities from "./pages/Cities.jsx"; import FederalDistricts from "./pages/FederalDistricts.jsx"; import Roles from "./pages/Roles.jsx"; import Statuses from "./pages/Statuses.jsx"; +import Trucks from "./pages/Trucks.jsx"; const RoutesComponent = () => ( @@ -17,7 +18,8 @@ const RoutesComponent = () => ( } /> } /> } /> - } /> + } />{" "} + } /> ); diff --git a/src/api.jsx b/src/api.jsx index 39d64f6..e289cab 100755 --- a/src/api.jsx +++ b/src/api.jsx @@ -340,3 +340,62 @@ export const deleteStatus = async (id) => { throw error; } }; + +export const getTrucks = async () => { + try { + const response = await axios.get(`${API_URL}/trucks`, { + headers: { + Authorization: `Bearer ${getAuthToken()}`, + Accept: "application/json", + }, + }); + return response.data; + } catch (error) { + console.log("Ошибка при загрузке грузовиков:", error); + throw error; + } +}; + +export const createTruck = async (truckData) => { + try { + const response = await axios.post(`${API_URL}/trucks`, truckData, { + headers: { + Authorization: `Bearer ${getAuthToken()}`, + "Content-Type": "application/json", + }, + }); + return response.data; + } catch (error) { + console.log("Ошибка при создании грузовика:", error); + throw error; + } +}; + +export const updateTruck = async (id, truckData) => { + try { + const response = await axios.put(`${API_URL}/trucks/${id}`, truckData, { + headers: { + Authorization: `Bearer ${getAuthToken()}`, + "Content-Type": "application/json", + }, + }); + return response.data; + } catch (error) { + console.log("Ошибка при обновлении грузовика:", error); + throw error; + } +}; + +export const deleteTruck = async (id) => { + try { + await axios.delete(`${API_URL}/trucks/${id}`, { + headers: { + Authorization: `Bearer ${getAuthToken()}`, + Accept: "application/json", + }, + }); + } catch (error) { + console.log("Ошибка при удалении грузовика:", error); + throw error; + } +}; diff --git a/src/components/Header.jsx b/src/components/Header.jsx index 2782958..810826e 100644 --- a/src/components/Header.jsx +++ b/src/components/Header.jsx @@ -50,6 +50,11 @@ const Header = () => { Статусы +
  • + + Грузовики + +
    • {isAuthenticated ? ( diff --git a/src/pages/Accessories.jsx b/src/pages/Accessories.jsx index d53b302..fdbc305 100644 --- a/src/pages/Accessories.jsx +++ b/src/pages/Accessories.jsx @@ -33,7 +33,6 @@ const Accessories = () => { const fetchAccessories = async () => { try { const data = await getAccessories(); - console.log(data); setAccessories(data); } catch (error) { console.error("Ошибка при загрузке аксессуаров:", error); diff --git a/src/pages/Trucks.jsx b/src/pages/Trucks.jsx new file mode 100644 index 0000000..3d129c5 --- /dev/null +++ b/src/pages/Trucks.jsx @@ -0,0 +1,186 @@ +import React, { useState, useEffect } from "react"; +import { useNavigate } from "react-router-dom"; +import { getAuthToken } from "../api.jsx"; +import { getTrucks, createTruck, updateTruck, deleteTruck } from "../api.jsx"; + +const Trucks = () => { + const [trucks, setTrucks] = useState([]); + const [newTruck, setNewTruck] = useState({ + name: "", + capacity: "", + volume: "", + }); + const [editingTruckId, setEditingTruckId] = useState(null); + const [error, setError] = useState(null); + const navigate = useNavigate(); + + useEffect(() => { + fetchTrucks(); + }, []); + + const fetchTrucks = async () => { + try { + const data = await getTrucks(); + setTrucks(data); + } catch (error) { + console.error("Ошибка при загрузке грузовиков:", error); + } + }; + + const handleInputChange = (e) => { + const { name, value } = e.target; + setNewTruck({ ...newTruck, [name]: value }); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + if (!newTruck.name || !newTruck.capacity || !newTruck.volume) { + setError("Пожалуйста, заполните все поля."); + return; + } + + try { + if (editingTruckId) { + await updateTruck(editingTruckId, newTruck); + } else { + await createTruck(newTruck); + } + fetchTrucks(); + resetForm(); + } catch (error) { + console.error("Ошибка при добавлении или обновлении грузовика:", error); + } + }; + + const handleEdit = (truck) => { + setNewTruck({ + name: truck.name, + capacity: truck.capacity, + volume: truck.volume, + }); + setEditingTruckId(truck.id); + }; + + const handleDelete = async (truckId) => { + try { + await deleteTruck(truckId); + fetchTrucks(); + } catch (error) { + console.error("Ошибка при удалении грузовика:", error); + } + }; + + const resetForm = () => { + setNewTruck({ + name: "", + capacity: "", + volume: "", + }); + setEditingTruckId(null); + }; + + if (getAuthToken() === null) { + navigate("/login"); + } + + return ( +
    +

    Грузовики

    +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    + + +
    + {error && ( +
    + {error} +
    + )} +
    +

    Список грузовиков

    + + + + + + + + + + + {trucks.map((truck) => ( + + + + + + + ))} + +
    НазваниеГрузоподъемностьОбъемДействия
    {truck.name}{truck.capacity}{truck.volume} +
    + + +
    +
    +
    + ); +}; + +export default Trucks;