lab5+detail
This commit is contained in:
parent
336bbcc5da
commit
01d861dee9
@ -28,7 +28,7 @@ const LinesForm = ({ id }) => {
|
||||
<>
|
||||
<Form className='m-0 p-2' noValidate validated={validated} onSubmit={onSubmit}>
|
||||
<LinesItemForm item={item} handleChange={handleChange} />
|
||||
<Form.Group className='row justify-content-center m-0 mt-3'>
|
||||
<Form.Group className='row justify-content-center m-0'>
|
||||
<Button className='col-5 col-lg-2 m-0 me-2' variant='secondary' onClick={() => onBack()}>
|
||||
Назад
|
||||
</Button>
|
||||
|
||||
@ -21,11 +21,16 @@ const LinesItemForm = ({ item, handleChange }) => {
|
||||
<Select values={types} name='typeId' label='Товары' value={item.typeId} onChange={handleChange}
|
||||
required />
|
||||
|
||||
<div>
|
||||
<div className='mb-2'>
|
||||
<label htmlFor='date' style={{ display: 'block' }}>Дата:</label>
|
||||
<input type='date' id='date' name='date' value={item.date} onChange={handleChange} required style={{ display: 'block' }} />
|
||||
</div>
|
||||
|
||||
<div className='mb-2'>
|
||||
<textarea name='description' placeholder='Описание' value={item.description} onChange={handleChange} required />
|
||||
</div>
|
||||
<div>
|
||||
<textarea name='other' placeholder='Прочее' value={item.other} onChange={handleChange} required />
|
||||
</div>
|
||||
<Input name='price' label='Цена' value={item.price} onChange={handleChange}
|
||||
type='number' min='1000.0' step='100' required />
|
||||
|
||||
|
||||
@ -17,6 +17,8 @@ const useLinesItemForm = (id, linesChangeHandle) => {
|
||||
const ItName = formData.name;
|
||||
const typeId = parseInt(formData.typeId, 10);
|
||||
const date = formData.date;
|
||||
const description = formData.description;
|
||||
const other = formData.other;
|
||||
const price = parseFloat(formData.price).toFixed(2);
|
||||
const count = formData.count;
|
||||
const placeId = parseInt(formData.placeId, 10);
|
||||
@ -25,6 +27,8 @@ const useLinesItemForm = (id, linesChangeHandle) => {
|
||||
ItName: ItName.toString(),
|
||||
typeId: typeId.toString(),
|
||||
date: date.toString(),
|
||||
description: description.toString(),
|
||||
other: other.toString(),
|
||||
price: price.toString(),
|
||||
count: count.toString(),
|
||||
placeId: placeId.toString(),
|
||||
|
||||
@ -7,6 +7,8 @@ const useLinesItem = (id) => {
|
||||
ItName: '',
|
||||
typeId: '',
|
||||
date: '',
|
||||
description: '',
|
||||
other: '',
|
||||
price: '0',
|
||||
count: '0',
|
||||
placeId: '',
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Table } from 'react-bootstrap';
|
||||
import React from 'react';
|
||||
|
||||
const LinesTable = ({ children }) => {
|
||||
return (
|
||||
<Table className='mt-2' striped responsive>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope='col'>№</th>
|
||||
<th scope='col' className='w-25'>Название</th>
|
||||
<th scope='col' className='w-25'>Тип</th>
|
||||
<th scope='col' className='w-25'>Дата</th>
|
||||
<th scope='col' className='w-25'>Цена</th>
|
||||
<th scope='col' className='w-25'>Место проведения</th>
|
||||
<th scope='col'></th>
|
||||
<th scope='col'></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{React.Children.map(children, (child, index) => {
|
||||
return React.cloneElement(child, { key: index });
|
||||
})}
|
||||
</tbody >
|
||||
</Table >
|
||||
);
|
||||
};
|
||||
|
||||
LinesTable.propTypes = {
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
export default LinesTable;
|
||||
@ -1,34 +0,0 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { PencilFill, Trash3 } from 'react-bootstrap-icons';
|
||||
|
||||
const LinesTableRow = ({
|
||||
index, line, onDelete, onEdit
|
||||
}) => {
|
||||
const handleAnchorClick = (event, action) => {
|
||||
event.preventDefault();
|
||||
action();
|
||||
};
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<th scope="row">{index + 1}</th>
|
||||
<td>{line.ItName}</td>
|
||||
<td>{line.type.name}</td>
|
||||
<td>{line.date}</td>
|
||||
<td>{parseFloat(line.price).toFixed(2)}</td>
|
||||
<td>{line.place.name}</td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
|
||||
<td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
LinesTableRow.propTypes = {
|
||||
index: PropTypes.number,
|
||||
line: PropTypes.object,
|
||||
onDelete: PropTypes.func,
|
||||
onEdit: PropTypes.func,
|
||||
onEditInPage: PropTypes.func,
|
||||
};
|
||||
|
||||
export default LinesTableRow;
|
||||
@ -10,3 +10,9 @@
|
||||
background-color: #5233ff;
|
||||
color: aqua;
|
||||
}
|
||||
.table-container {
|
||||
width: 100%;
|
||||
overflow-y: scroll;
|
||||
|
||||
max-height: 80vh; /* задайте желаемую максимальную высоту */
|
||||
}
|
||||
@ -39,7 +39,7 @@ const Lines = () => {
|
||||
<>
|
||||
<main className="container-fluid ml-2 mr-2">
|
||||
<div className="row">
|
||||
<div className="col-lg-8">
|
||||
<div className="col-lg-9">
|
||||
<LinesTable>
|
||||
{lines.map((line, index) => (
|
||||
<LinesTableRow
|
||||
@ -52,7 +52,7 @@ const Lines = () => {
|
||||
))}
|
||||
</LinesTable>
|
||||
</div>
|
||||
<div className="col-lg-4">
|
||||
<div className="col-lg-3">
|
||||
<Select
|
||||
className="mt-2"
|
||||
values={types}
|
||||
|
||||
@ -1,19 +1,23 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Table } from 'react-bootstrap';
|
||||
import React from 'react';
|
||||
import './Lines.css';
|
||||
|
||||
const LinesTable = ({ children }) => {
|
||||
return (
|
||||
<Table className='mt-2' striped responsive>
|
||||
<div className='table-container'>
|
||||
<Table className='mt-2'>
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope='col'>№</th>
|
||||
<th scope='col' className='w-25'>Название</th>
|
||||
<th scope='col' className='w-25'>Тип</th>
|
||||
<th scope='col' className='w-25'>Дата</th>
|
||||
<th scope='col' className='w-25'>Цена</th>
|
||||
<th scope='col' className='w-25'>Количество</th>
|
||||
<th scope='col' className='w-25'>Место проведения</th>
|
||||
<th scope='col'>Название</th>
|
||||
<th scope='col'>Тип</th>
|
||||
<th scope='col'>Дата</th>
|
||||
<th scope='col'>Описание</th>
|
||||
<th scope='col'>Прочее</th>
|
||||
<th scope='col'>Цена</th>
|
||||
<th scope='col'>Количество</th>
|
||||
<th scope='col'>Место проведения</th>
|
||||
<th scope='col'></th>
|
||||
<th scope='col'></th>
|
||||
</tr>
|
||||
@ -22,8 +26,9 @@ const LinesTable = ({ children }) => {
|
||||
{React.Children.map(children, (child, index) => {
|
||||
return React.cloneElement(child, { key: index });
|
||||
})}
|
||||
</tbody >
|
||||
</Table >
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -15,6 +15,8 @@ const LinesTableRow = ({
|
||||
<td>{line.ItName}</td>
|
||||
<td>{line.type.name}</td>
|
||||
<td>{line.date}</td>
|
||||
<td>{line.description}</td>
|
||||
<td>{line.other}</td>
|
||||
<td>{parseFloat(line.price).toFixed(2)}</td>
|
||||
<td>{line.count}</td>
|
||||
<td>{line.place.name}</td>
|
||||
|
||||
@ -1,49 +1,37 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useState, useEffect } from 'react';
|
||||
import '../pagescss/DetailPage.css';
|
||||
|
||||
import LinesApiService from "../components/lines/service/LinesApiService";
|
||||
const DetailPage = () => {
|
||||
const { name } = useParams();
|
||||
|
||||
const [imageUrl, setImageUrl] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [dates, setDates] = useState('');
|
||||
const [other, setOther] = useState('');
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const loadFile = async (path, setter) => {
|
||||
const loadDataFromServer = async (name) => {
|
||||
try {
|
||||
const response = await fetch(path);
|
||||
const data = await response.text();
|
||||
setter(data);
|
||||
const data = await LinesApiService.getAll(`?ItName=${name}`);
|
||||
|
||||
setDescription(data[0].description);
|
||||
setDates(data[0].date);
|
||||
setOther(data[0].other);
|
||||
setImageUrl(data[0].image);
|
||||
} catch (error) {
|
||||
console.log("еррор емае");
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadDescription = async () => {
|
||||
const descriptionPath = `../src/assets/artists/${name}-description.txt`;
|
||||
await loadFile(descriptionPath, setDescription);
|
||||
};
|
||||
|
||||
const loadDates = async () => {
|
||||
const datesPath = `../src/assets/artists/${name}-dates.txt`;
|
||||
await loadFile(datesPath, setDates);
|
||||
};
|
||||
|
||||
const loadOther = async () => {
|
||||
const otherPath = `../src/assets/artists/${name}-performers.txt`;
|
||||
await loadFile(otherPath, setOther);
|
||||
};
|
||||
|
||||
loadDescription();
|
||||
loadDates();
|
||||
loadOther();
|
||||
loadDataFromServer(name);
|
||||
}, [name]);
|
||||
|
||||
return (
|
||||
<div className="container-fluid">
|
||||
<div id="image-container">
|
||||
<img src={`../src/assets/pictures/${name}.jpg`} alt={name}></img>
|
||||
<img src={imageUrl} alt={name}></img>
|
||||
<div className="text-overlay">{name}</div>
|
||||
</div>
|
||||
<div id="container1">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user