Gerimovich_Ilya/Web-programming_Gerimovich_I.M._PIbd-22
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

workin lab5

Browse Source
This commit is contained in:
platoff aeeee 2023-12-25 15:47:21 +04:00
parent 43a1d2fbe0
commit 8cd63206d4
11 changed files with 398 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
lab5/src/components/lines/form/LinesItemForm.jsx
View File

@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
import imgPlaceholder from '../../../assets/200.png';
import imgPlaceholder from '/src/assets/twitchLogo.png';
import Input from '../../input/Input.jsx';
import Select from '../../input/Select.jsx';
import useTypes from '../../types/hooks/TypesHook';

36
lab5/src/components/lines/videos/UpdateVideo.jsx Normal file
View File

@ -0,0 +1,36 @@
import PropTypes from 'prop-types';
import {
PencilFill, Trash3,
} from 'react-bootstrap-icons';
const UpdateVideo = ({
item, onEdit, onDelete,
}) => {
const handleAnchorClick = (event, action) => {
event.preventDefault();
action();
};
return (
<div className="col-md-4 mb-4">
<div className="rectNews d-flex flex-column">
<img src={item.image} width="100%" alt={item.name} />
<div className="rectNewsTextBox text-center">
<span className="rectNewsText">
<a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a>
<a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a>
{item.description}
</span>
</div>
</div>
</div>
);
};
UpdateVideo.propTypes = {
index: PropTypes.number,
item: PropTypes.object,
onDelete: PropTypes.func,
onEdit: PropTypes.func,
};
export default UpdateVideo;

69
lab5/src/components/lines/videos/UpdateVideos.jsx Normal file
View File

@ -0,0 +1,69 @@
import React from 'react';
import PropTypes from 'prop-types';
import {Button, Container,} from 'react-bootstrap';
import ModalConfirm from '../../modal/ModalConfirm.jsx';
import ModalForm from '../../modal/ModalForm.jsx';
import UpdateVideo from './UpdateVideo.jsx';
import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
import useLinesFormModal from '../hooks/LinesFormModalHook';
import LinesItemForm from '../form/LinesItemForm.jsx';
import useLines from '../hooks/LinesHook';
// linesChangeHandle изменять состояние => при вызове изменения linesChangeHandle
// должно все перерисовываться
const UpdateVideos = () => {
const { lines, handleLinesChange } = useLines();
const {
isDeleteModalShow,
showDeleteModal,
handleDeleteConfirm,
handleDeleteCancel,
} = useLinesDeleteModal(handleLinesChange);
const {
isFormModalShow,
isFormValidated,
showFormModal,
currentItem,
handleItemChange,
handleFormSubmit,
handleFormClose,
} = useLinesFormModal(handleLinesChange);
return (
<>
<Container className="col text-center">
<span className="mainSt">
<b>Новости</b>
</span>
<div className="text-center">
<Button variant='info' onClick={() => showFormModal()}>
Добавить товар</Button>
</div>
<div className="mainDiv row">
{lines.map((item) => (
<UpdateVideo key={item.id}
item={item}
onDelete={() => showDeleteModal(item.id)}
onEdit={() => showFormModal(item.id)}
/>
))}
</div>
<ModalConfirm show={isDeleteModalShow}
onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
title='Удаление' message='Удалить элемент?' />
<ModalForm show={isFormModalShow} validated={isFormValidated}
onSubmit={handleFormSubmit} onClose={handleFormClose}
title='Редактирование'>
<LinesItemForm item={currentItem} handleChange={handleItemChange} />
</ModalForm>
</Container>
</>
);
};
UpdateVideos.propTypes = {
item: PropTypes.object,
};
export default UpdateVideos;

60
lab5/src/components/lines/videos/UpdateVideos2.jsx Normal file
View File

@ -0,0 +1,60 @@
import React, { useEffect, useState } from 'react';
import { PencilFill, Trash3 } from 'react-bootstrap-icons';
import PropTypes from 'prop-types';
import {Button, Container,} from 'react-bootstrap';
import ModalConfirm from '../../modal/ModalConfirm.jsx';
import ModalForm from '../../modal/ModalForm.jsx';
import UpdateVideo from './UpdateVideo.jsx';
import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
import useLinesFormModal from '../hooks/LinesFormModalHook';
import LinesItemForm from '../form/LinesItemForm.jsx';
import useLines from '../hooks/LinesHook'; // Замените 'путь_к_вашим_хукам' на актуальный путь к ваших хукам
// import { createAnchor } from ''; // Замените 'путь_к_вашему_утилитарному_модулю' на актуальный путь к вашему утилитарному модулю
const VideoComponent = ({ item, onEdit, onDelete }) => {
const handleAnchorClick = (event, handler) => {
event.preventDefault();
handler(item);
};
return (
<div className="col-md-4 mb-4">
<div className="rectNews d-flex flex-column">
<img src={item.image} width="100%" alt={item.name} />
<div className="rectNewsTextBox text-center">
<span className="rectNewsText">
<a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a>
<a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a>
{item.description}
</span>
</div>
</div>
</div>
);
};
const UpdateVideos2 = () => {
const { lines, handleLinesChange } = useLines();
useEffect(() => {
handleLinesChange();
}, []);
return (
<main role="main" className="mainDiv col-md-9 ml-sm-auto col-lg-10 px-4">
<div className="mainRow row">
{lines.map((item) => (
<VideoComponent
key={item.id}
item={item}
onDelete={() => showDeleteModal(item.id)}
onEdit={() => showFormModal(item.id)}
/>
))}
</div>
</main>
);
};
export default UpdateVideos2;

5
lab5/src/components/searching/hooks/SearchApiService.js Normal file
View File

@ -0,0 +1,5 @@
import ApiService from '../../api/ApiService';
const LinesApiService = new ApiService('searching');
export default LinesApiService;

22
lab5/src/components/searching/hooks/SearchHooks.js Normal file
View File

@ -0,0 +1,22 @@
import { useEffect, useState } from 'react';
import SearchApiService from './SearchApiService';
const useSearching = () => {
const [searching, setSearching] = useState([]);
const getSearching = async () => {
const data = await SearchApiService.getAll();
setSearching(data ?? []);
};
useEffect(() => {
getSearching();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return {
searching,
};
};
export default useSearching;

20
lab5/src/components/searching/search/Search.jsx Normal file
View File

@ -0,0 +1,20 @@
import PropTypes from 'prop-types';
const Search = ({ item }) => {
return (
<tr>
<th style = {{ textAlign: 'center' }} scope="row">{item.id + 1}</th>
<td style = {{ textAlign: 'center' }}>{item.code}</td>
<td style = {{ textAlign: 'center' }}>{item.name}</td>
<td style = {{ textAlign: 'center' }}>{item.department}</td>
<td style = {{ textAlign: 'center' }}>{item.things}</td>
</tr>
);
};
Search.propTypes = {
index: PropTypes.number,
item: PropTypes.object,
};
export default Search;

40
lab5/src/components/searching/search/Searching.jsx Normal file
View File

@ -0,0 +1,40 @@
import { useState } from 'react';
import TableDirect from './TableDirect.jsx';
import Search from './Search.jsx';
import useSearching from '../hooks/SearchHooks.js';
import Input from '../../input/Input.jsx';
import useTypeFilter from '../../lines/hooks/LinesFilterHook.js';
const Searching = () => {
const { type, currentFilter } = useTypeFilter;
const { searching } = useSearching();
const [searchValue, setSearchValue] = useState('');
const {lines} =useLines(currentFilter);
return (
<>
<div className = 'd-flex justify-content-center mb-4'>
<Input className = 'd-flex justify-content-center w-50' name='search' value = {searchValue} onChange={(e) => setSearchValue(e.target.value)}
type='text' required />
</div>
<div className = 'd-flex justify-content-center'>
<TableDirect>
{
searching.map((item) => {
if (searchValue === ''
|| item.name.toLowerCase().includes(searchValue.toLowerCase())
|| item.department.toLowerCase().includes(searchValue.toLowerCase())
|| item.things.toLowerCase().includes(searchValue.toLowerCase())
|| item.code.toLowerCase().includes(searchValue.toLowerCase())) {
return <Search key={item.id} item={item} />;
}
return null;
})
}
</TableDirect>
</div>
</>
);
};
export default Searching;

3
lab5/src/components/searching/search/Table.css Normal file
View File

@ -0,0 +1,3 @@
.tableRow{
text-align: center;
}

27
lab5/src/components/searching/search/TableSearch.jsx Normal file
View File

@ -0,0 +1,27 @@
import PropTypes from 'prop-types';
import { Table } from 'react-bootstrap';
const TableSearch = ({ children }) => {
return (
<Table className='mt-1' variant = "secondary" striped responsive bordered hover>
<thead>
<tr>
<th style = {{ textAlign: 'center' }} scope = 'col'>№</th>
<th style = {{ textAlign: 'center' }} scope='col'>Код</th>
<th style = {{ textAlign: 'center' }} scope='col' className ="w-25">Направление</th>
<th style = {{ textAlign: 'center' }} scope='col' className ="w-25">Кафедра</th>
<th style = {{ textAlign: 'center' }} scope='col' className = "w-75">Предметы(ЕГЭ) по выбору</th>
</tr>
</thead>
<tbody>
{children}
</tbody >
</Table >
);
};
TableSearch.propTypes = {
children: PropTypes.node,
};
export default TableSearch;

227
lab5/src/pages/StartPage.jsx
View File

@ -1,123 +1,126 @@
import { Link } from 'react-router-dom';
// import { Link } from 'react-router-dom';
import UpdateVideos2 from '../components/lines/videos/UpdateVideos2.jsx';
const StartPage = () => {
return (
<div className="d-flex">
<main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-4">
<div className="full-page-div">
<div className="p-5 text-center">
<h1 className="display-4 fw-bold">Welcome to our streaming service</h1>
<p className="fs-5">Explore the whole streaming world!</p>
<Link className="btn btn-outline-danger btn-lg" to="page2" role="button">Главная страница</Link>
</div>
<UpdateVideos2 />
// <div className="d-flex">
// <main role="main" className="col-md-9 ml-sm-auto col-lg-10 px-4">
// <div className="full-page-div">
// <div className="p-5 text-center">
// <h1 className="display-4 fw-bold">Welcome to our streaming service</h1>
// <p className="fs-5">Explore the whole streaming world!</p>
// <Link className="btn btn-outline-danger btn-lg" to="page2" role="button">Главная страница</Link>
// </div>
<div className="p-5 text-bg-dark rounded-3">
<h2>Популярные трансляции</h2>
<div className="row">
{/* Video Recommendation 1 */}
<div className="col-md-4">
<div className="card mb-4 shadow-sm">
<img src="src/assets/video7.png" className="card-img-top" alt="Video 1" />
<div className="card-body">
<div className="container">
<div className="row">
<div className="col-md-6">
<p className="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">NEVER GONNA GIVE YOU UP</p>
<p className="fs-5 text-nowrap text-secondary">Rick Astley</p>
</div>
<div className="col-md-6 p-3 text-nowrap align-items-end d-flex">
<Link className="btn btn-secondary ms-auto" to="page5channel.html">Subscribe</Link>
</div>
</div>
</div>
</div>
</div>
</div>
// <div className="p-5 text-bg-dark rounded-3">
// <h2>Популярные трансляции</h2>
// <div className="row">
// {/* Video Recommendation 1 */}
// <div className="col-md-4">
// <div className="card mb-4 shadow-sm">
// <img src="src/assets/video7.png" className="card-img-top" alt="Video 1" />
// <div className="card-body">
// <div className="container">
// <div className="row">
// <div className="col-md-6">
// <p className="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">NEVER GONNA GIVE YOU UP</p>
// <p className="fs-5 text-nowrap text-secondary">Rick Astley</p>
// </div>
// <div className="col-md-6 p-3 text-nowrap align-items-end d-flex">
// <Link className="btn btn-secondary ms-auto" to="page5channel.html">Subscribe</Link>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
{/* Video Recommendation 2 */}
<div className="col-md-4">
<div className="card mb-4 shadow-sm">
<img src="src/assets/video2.png" className="card-img-top" alt="Video 2" />
<div className="card-body">
<div className="container">
<div className="row">
<div className="col-md-6">
<p className="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">Streamer1</p>
<p className="fs-5 text-nowrap text-secondary">CS-3</p>
</div>
<div className="col-md-6 p-3 text-nowrap align-items-end d-flex">
<Link className="btn btn-secondary ms-auto" to="page5channel.html">Subscribe</Link>
</div>
</div>
</div>
</div>
</div>
</div>
// {/* Video Recommendation 2 */}
// <div className="col-md-4">
// <div className="card mb-4 shadow-sm">
// <img src="src/assets/video2.png" className="card-img-top" alt="Video 2" />
// <div className="card-body">
// <div className="container">
// <div className="row">
// <div className="col-md-6">
// <p className="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">Streamer1</p>
// <p className="fs-5 text-nowrap text-secondary">CS-3</p>
// </div>
// <div className="col-md-6 p-3 text-nowrap align-items-end d-flex">
// <Link className="btn btn-secondary ms-auto" to="page5channel.html">Subscribe</Link>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
{/* Video Recommendation 3 */}
<div className="col-md-4">
<div className="card mb-4 shadow-sm">
<img src="src/assets/video3.png" className="card-img-top" alt="Video 2" />
<div className="card-body">
<div className="container">
<div className="row">
<div className="col-md-6">
<p className="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">Streamer1</p>
<p className="fs-5 text-nowrap text-secondary">CS-3</p>
</div>
<div className="col-md-6 p-3 text-nowrap align-items-end d-flex">
<Link className="btn btn-secondary ms-auto" to="page5channel.html">Subscribe</Link>
</div>
</div>
</div>
</div>
</div>
</div>
// {/* Video Recommendation 3 */}
// <div className="col-md-4">
// <div className="card mb-4 shadow-sm">
// <img src="src/assets/video3.png" className="card-img-top" alt="Video 2" />
// <div className="card-body">
// <div className="container">
// <div className="row">
// <div className="col-md-6">
// <p className="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">Streamer1</p>
// <p className="fs-5 text-nowrap text-secondary">CS-3</p>
// </div>
// <div className="col-md-6 p-3 text-nowrap align-items-end d-flex">
// <Link className="btn btn-secondary ms-auto" to="page5channel.html">Subscribe</Link>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
{/* Video Recommendation 4 */}
<div className="col-md-4">
<div className="card mb-4 shadow-sm">
<img src="src/assets/video5.png" className="card-img-top" alt="Video 4" />
<div className="card-body">
<div className="container">
<div className="row">
<div className="col-md-6">
<p className="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">WORLD FINAL CS</p>
<p className="fs-5 text-nowrap text-secondary">CHANNEL</p>
</div>
<div className="col-md-6 p-3 text-nowrap align-items-end d-flex">
<Link className="btn btn-secondary ms-auto" to="page5channel.html">Subscribe</Link>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Video Recommendation 5 */}
<div className="col-md-4">
<div className="card mb-4 shadow-sm">
<img src="src/assets/video6.png" className="card-img-top" alt="Video 5" />
<div className="card-body">
<div className="container">
<div className="row">
<div className="col-md-6">
<p className="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">name of video</p>
<p className="fs-5 text-nowrap text-secondary">name of channel</p>
</div>
<div className="col-md-6 p-3 text-nowrap align-items-end d-flex">
<Link className="btn btn-secondary ms-auto" to="page5channel.html">Subscribe</Link>
</div>
</div>
</div>
</div>
</div>
</div>
// {/* Video Recommendation 4 */}
// <div className="col-md-4">
// <div className="card mb-4 shadow-sm">
// <img src="src/assets/video5.png" className="card-img-top" alt="Video 4" />
// <div className="card-body">
// <div className="container">
// <div className="row">
// <div className="col-md-6">
// <p className="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">WORLD FINAL CS</p>
// <p className="fs-5 text-nowrap text-secondary">CHANNEL</p>
// </div>
// <div className="col-md-6 p-3 text-nowrap align-items-end d-flex">
// <Link className="btn btn-secondary ms-auto" to="page5channel.html">Subscribe</Link>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
// {/* Video Recommendation 5 */}
// <div className="col-md-4">
// <div className="card mb-4 shadow-sm">
// <img src="src/assets/video6.png" className="card-img-top" alt="Video 5" />
// <div className="card-body">
// <div className="container">
// <div className="row">
// <div className="col-md-6">
// <p className="h-4 m-0 text-nowrap font-italic font-weight-bold" href="page5channel.html">name of video</p>
// <p className="fs-5 text-nowrap text-secondary">name of channel</p>
// </div>
// <div className="col-md-6 p-3 text-nowrap align-items-end d-flex">
// <Link className="btn btn-secondary ms-auto" to="page5channel.html">Subscribe</Link>
// </div>
// </div>
// </div>
// </div>
// </div>
// </div>
</div>
</div>
</div>
</main>
</div>
// </div>
// </div>
// </div>
// </main>
// </div>
);
};