StroevVladimir/PIbd-22.-Stroev-V.M.-Internet-Programm
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lab4

Browse Source
This commit is contained in:
DyCTaTOR 2023-12-07 19:55:31 +04:00
parent c655110f4f
commit bdec591988
8 changed files with 152 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Lab4/index.html
View File

@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/svg+xml" href="/images/logo2.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>UlSTU</title>
</head>

4
Lab4/src/components/navigation/Navigation.css
View File

@ -7,6 +7,6 @@
}
.my-navbar .logo {
width: 26px;
height: 26px;
width: 52px;
height: 36px;
}

8
Lab4/src/components/navigation/Navigation.jsx
View File

@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { Cart2 } from 'react-bootstrap-icons';
import {
Image, Container, Nav, Navbar,
} from 'react-bootstrap';
import { Link, useLocation } from 'react-router-dom';
import './Navigation.css';
@ -14,8 +15,7 @@ const Navigation = ({ routes }) => {
<Navbar expand='md' bg='dark' data-bs-theme='dark' className='my-navbar'>
<Container fluid>
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
<Cart2 className='d-inline-block align-top me-1 logo' />
UlSTU
<Image src="./images/logo2.png" className='d-inline-block align-top me-1 logo' />
</Navbar.Brand>
<Navbar.Toggle aria-controls='main-navbar' />
<Navbar.Collapse id='main-navbar'>

11
Lab4/src/main.jsx
View File

@ -10,7 +10,8 @@ import Page2 from './pages/Page2.jsx';
import Page3 from './pages/Page3.jsx';
import Page4 from './pages/Page4.jsx';
import Page5 from './pages/Page5.jsx';
import PageEdit from './pages/PageEdit.jsx';
import Admin from './pages/Admin.jsx';
import Reduse from './pages/Reduse.jsx';
const routes = [
{
@ -40,8 +41,12 @@ const routes = [
title: 'Контакты',
},
{
path: '/page-edit',
element: <PageEdit />,
path: '/admin',
element: <Admin />,
},
{
path: '/reduse',
element: <Reduse />,
},
];

52
Lab4/src/pages/Admin.jsx Normal file
View File

@ -0,0 +1,52 @@
import { Button, Container, Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const Admin = () => {
return (
<Container className="p-2 text-center">
<span className="mainSt">
<b>Новости</b>
</span>
<div className="tbb1 p-3 table-responsive-md mt-4 row justify-content-start">
<Table className="col-lg2 w-50 mx-auto">
<thead>
<tr>
<th className="w-25">Дата добавления</th>
<th className="w-50">Название</th>
<th className="w-25"></th>
<th className="w-75"></th>
</tr>
</thead>
<tbody>
<tr>
<td>13.10.23</td>
<td>УлГТУ вошёл в топ-250 лучших вузов</td>
<td><Button as = {Link} to="/reduse">Редактировать</Button></td>
<td>Удалить</td>
</tr>
<tr>
<td>13.10.23</td>
<td>“Мосты в будущее” будут видны из УлГТУ</td>
<td><Button as = {Link} to="/reduse">Редактировать</Button></td>
<td>Удалить</td>
</tr>
<tr>
<td>27.10.23</td>
<td>Поправки в системе работы приёмной комиссии</td>
<td><Button as = {Link} to="/reduse">Редактировать</Button></td>
<td>Удалить</td>
</tr>
<tr>
<td>27.10.23</td>
<td>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</td>
<td><Button as = {Link} to="/reduse">Редактировать</Button></td>
<td>Удалить</td>
</tr>
</tbody>
</Table>
</div>
</Container>
);
};
export default Admin;

45
Lab4/src/pages/Page1.jsx
View File

@ -1,63 +1,66 @@
import { Link } from 'react-router-dom';
import { Button } from 'react-bootstrap';
import {
Container, Button, Row, Col, Image,
} from 'react-bootstrap';
const Page1 = () => {
return (
<>
<main className="container col text-center">
<Container className="col text-center">
<span className="mainSt">
<b>Новости</b>
</span>
<div className="text-center">
<Button as={Link} to="/page2" variant = "primary" className="btn btn-primary w-auto" type="button">
<Button as={Link} to="/admin" variant="primary" className="btn btn-primary w-auto" type="button">
Добавить новость
</Button>
</div>
<div className="row">
<div className="col mb-4">
<Row>
<Col className="mb-4">
<div className="rectNews d-flex flex-column">
<img src="./images/New1.png" alt="New1" width="100%" />
<Image src="./images/New1.png" alt="New1" width="100%" />
<div className="rectNewsTextBox">
<span className="rectNewsText">
<b>УлГТУ вошёл в топ-250 лучших вузов</b>
</span>
</div>
</div>
</div>
<div className="col mb-4">
</Col>
<Col className="mb-4">
<div className="rectNews d-flex flex-column position-relative">
<img src="./images/New2.png" alt="New2" width="100%" />
<Image src="./images/New2.png" alt="New2" width="100%" />
<div className="rectNewsTextBox">
<span className="rectNewsText">
<b>“Мосты в будущее” будут видны из УлГТУ</b>
</span>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col mb-4">
</Col>
</Row>
<Row>
<Col className="mb-4">
<div className="rectNews d-flex flex-column position-relative">
<img src="./images/New3.png" alt="New3" width="100%" />
<Image src="./images/New3.png" alt="New3" width="100%" />
<div className="rectNewsTextBox">
<span className="rectNewsText">
<b>Поправки в системе работы приёмной комиссии</b>
</span>
</div>
</div>
</div>
<div className="col mb-4">
</Col>
<Col className="mb-4">
<div className="rectNews d-flex flex-column position-relative">
<img src="./images/New4.png" alt="New4" width="100%" />
<Image src="./images/New4.png" alt="New4" width="100%" />
<div className="rectNewsTextBox">
<span className="rectNewsText">
<b>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</b>
<b>Студенты возвращаются к учёбе после
зимней сессии позже, чем раньше</b>
</span>
</div>
</div>
</div>
</div>
</main>
</Col>
</Row>
</Container>
</>
);
};

53
Lab4/src/pages/PageEdit.jsx
View File

@ -1,53 +0,0 @@
import { useState } from 'react';
import { Button, Form } from 'react-bootstrap';
import { Link } from 'react-router-dom';
const PageEdit = () => {
const [validated, setValidated] = useState(false);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
setValidated(true);
};
return (
<>
<div className="text-center">
<img id="image-preview" src="https://via.placeholder.com/200" className="rounded rounded-circle"
alt="placeholder" />
</div>
<Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
<Form.Group className="mb-2" controlId="item">
<Form.Label htmlFor="item" className="form-label">Товары</Form.Label>
<Form.Select name='selected' required>
</Form.Select>
</Form.Group>
<Form.Group className="mb-2" controlId="price">
<Form.Label>Цена</Form.Label>
<Form.Control type="number" name="price"
value="0.00" min="1000.00" step="0.50" required />
</Form.Group>
<Form.Group className="mb-2" controlId="count">
<Form.Label>Количество</Form.Label>
<Form.Control type="number" name="count"
value="0" min="1" step="1" required />
</Form.Group>
<Form.Group className="mb-2" controlId="file">
<Form.Label>Изображение</Form.Label>
<Form.Control type="file" name="image" accept="image/*" />
</Form.Group>
<Form.Group className="d-flex flex-md-row flex-column justify-content-center">
<Button className="btn-mw me-md-3 mb-md-0 mb-2" as={Link} to="/page4" variant="secondary">Назад</Button>
<Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
</Form.Group>
</Form>
</>
);
};
export default PageEdit;

28
Lab4/src/pages/Reduse.jsx Normal file
View File

@ -0,0 +1,28 @@
import { Container, Form, Button } from 'react-bootstrap';
const Reduse = () => {
return (
<Container className="p-2 text-center">
<span className="mainSt">
<b>Новости</b>
</span>
<div className="rectpage4 d-flex row justify-content-center">
<Form className="col-md-4 m-0 w-auto" action="./page4.html" method="get">
<Form.Group className="mb-2">
<Form.Label><b>Название новости</b></Form.Label>
<Form.Control id="name" name="name" placeholder="Например" type="text" required />
</Form.Group>
<Form.Group className="mb-2">
<Form.Label><b>Изображение</b></Form.Label>
<Form.Control id="image" name="image" type="file" required />
</Form.Group>
<div className="text-center">
<Button className="btn btn-primary w-auto" type="button">Добавить новость</Button>
</div>
</Form>
</div>
</Container>
);
};
export default Reduse;