3 лаб Финал
@ -48,8 +48,6 @@
|
||||
<div class="btn-group text-center" role="group">
|
||||
<button id="items-add" class="btn btn-info">
|
||||
Добавить новость</button>
|
||||
<button class="btn btn-primary w-auto" type="button" onclick ="location.href='admin.html';">
|
||||
Панель админа</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -72,10 +70,6 @@
|
||||
alt="placeholder">
|
||||
</div>
|
||||
<input id="items-line-id" type="number" hidden>
|
||||
<div class="mb-2">
|
||||
<label for="date" class="form-label">Дата</label>
|
||||
<input id="date" class="form-control" name="date" type = "date" required>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="name">Название</label>
|
||||
<input id="name" name="name" class="form-control" type = "text"
|
||||
|
@ -1,46 +0,0 @@
|
||||
// модуль для смены изображения в баннере по таймеру
|
||||
|
||||
import "../css/banner.css";
|
||||
|
||||
// указывается блок, в котором будет баннер
|
||||
// блок должен содержать изображения
|
||||
function myBanner(root) {
|
||||
console.info("Loaded");
|
||||
|
||||
// получение всех изображений внутри баннера
|
||||
const banners = document.querySelectorAll(`${root} img`);
|
||||
|
||||
// всем изображениям устанавливается класс banner-hide
|
||||
// если были другие классы, то они будут удалены
|
||||
for (let i = 0; i < banners.length; i += 1) {
|
||||
banners[i].setAttribute("class", "banner-hide");
|
||||
}
|
||||
|
||||
let old = banners.length - 1;
|
||||
let current = 0;
|
||||
|
||||
// функция меняет изображения в цикле
|
||||
// изображение с классом banner-show будет показано
|
||||
// изображение с классом banner-hide будет скрыто
|
||||
// функция запускает таймер, который через 5 секунд
|
||||
// запускает функцию, снова создается таймер и т. д.
|
||||
function loop() {
|
||||
banners[current].setAttribute("class", "banner-show");
|
||||
banners[old].setAttribute("class", "banner-hide");
|
||||
|
||||
console.info("Banner changed");
|
||||
|
||||
old = current;
|
||||
current += 1;
|
||||
|
||||
if (current === banners.length) {
|
||||
current = 0;
|
||||
}
|
||||
|
||||
setTimeout(loop, 5000);
|
||||
}
|
||||
|
||||
loop();
|
||||
}
|
||||
|
||||
export default myBanner;
|
@ -18,7 +18,6 @@ const modalTitle = document.getElementById("items-update-title");
|
||||
// используется одно окно для всех операций
|
||||
function resetValues() {
|
||||
cntrls.lineId.value = "";
|
||||
cntrls.itemDate.value = "";
|
||||
cntrls.itemName.value = "";
|
||||
cntrls.itemDescription.value = "";
|
||||
cntrls.itemImage.value = "";
|
||||
@ -35,7 +34,6 @@ export function showUpdateModal(item) {
|
||||
|
||||
if (item) {
|
||||
cntrls.lineId.value = item.id;
|
||||
cntrls.itemDate.value = item.itemsId;
|
||||
cntrls.itemName.value = item.name;
|
||||
cntrls.itemDescription.value = item.description;
|
||||
// заполнение превью
|
||||
|
@ -3,10 +3,18 @@
|
||||
// адрес сервера
|
||||
const serverUrl = "http://localhost:8081";
|
||||
|
||||
export function getRealDate() {
|
||||
const date = new Date();
|
||||
const year = date.getFullYear();
|
||||
const month = `0${date.getMonth() + 1}`.slice(-2);
|
||||
const day = `0${date.getDate()}`.slice(-2);
|
||||
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
// функция возвращает объект нужной структуры для отправки на сервер
|
||||
function createLineObject(itemDate, itemName, itemDescription, itemImage) {
|
||||
function createLineObject(itemName, itemDescription, itemImage) {
|
||||
return {
|
||||
date: itemDate,
|
||||
date: getRealDate(),
|
||||
name: itemName,
|
||||
description: itemDescription,
|
||||
image: itemImage,
|
||||
@ -24,8 +32,8 @@ export async function getAllLines() {
|
||||
|
||||
// обращение к серверу для создания записи (post)
|
||||
// объект отправляется в теле запроса (body)
|
||||
export async function createLine(itemDate, itemName, description, image) {
|
||||
const itemObject = createLineObject(itemDate, itemName, description, image);
|
||||
export async function createLine(itemName, description, image) {
|
||||
const itemObject = createLineObject(itemName, description, image);
|
||||
|
||||
const options = {
|
||||
method: "POST",
|
||||
@ -46,8 +54,8 @@ export async function createLine(itemDate, itemName, description, image) {
|
||||
// обращение к серверу для обновления записи по id (put)
|
||||
// объект отправляется в теле запроса (body)
|
||||
// id передается в качестве части пути URL get-запроса
|
||||
export async function updateLine(id, itemDate, itemName, description, image) {
|
||||
const itemObject = createLineObject(itemDate, itemName, description, image);
|
||||
export async function updateLine(id, itemName, description, image) {
|
||||
const itemObject = createLineObject(itemName, description, image);
|
||||
|
||||
const options = {
|
||||
method: "PUT",
|
||||
|
@ -56,10 +56,10 @@ async function drawLinesTable() {
|
||||
});
|
||||
}
|
||||
|
||||
async function addLine(item, itemName, description, image) {
|
||||
async function addLine(itemName, description, image) {
|
||||
console.info("Try to add item");
|
||||
// вызов метода REST API для добавления записи
|
||||
const data = await createLine(item, itemName, description, image);
|
||||
const data = await createLine(itemName, description, image);
|
||||
console.info("Added");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
@ -67,10 +67,10 @@ async function addLine(item, itemName, description, image) {
|
||||
UpdateNews();
|
||||
}
|
||||
|
||||
async function editLine(id, item, itemName, description, image) {
|
||||
async function editLine(id, itemName, description, image) {
|
||||
console.info("Try to update item");
|
||||
// вызов метода REST API для обновления записи
|
||||
const data = await updateLine(id, item, itemName, description, image);
|
||||
const data = await updateLine(id, itemName, description, image);
|
||||
console.info("Updated");
|
||||
console.info(data);
|
||||
// загрузка и заполнение table
|
||||
@ -193,7 +193,6 @@ export function linesForm() {
|
||||
// иначе обновление записи
|
||||
if (!currentId) {
|
||||
await addLine(
|
||||
cntrls.itemDate.value,
|
||||
cntrls.itemName.value,
|
||||
cntrls.itemDescription.value,
|
||||
imageBase64,
|
||||
@ -201,7 +200,6 @@ export function linesForm() {
|
||||
} else {
|
||||
await editLine(
|
||||
currentId,
|
||||
cntrls.itemDate.value,
|
||||
cntrls.itemName.value,
|
||||
cntrls.itemDescription.value,
|
||||
imageBase64,
|
||||
|
24
Lab4/.eslintrc.cjs
Normal file
@ -0,0 +1,24 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: { browser: true, es2020: true },
|
||||
extends: [
|
||||
'airbnb-base',
|
||||
'plugin:react/recommended',
|
||||
'plugin:react/jsx-runtime',
|
||||
'plugin:react-hooks/recommended',
|
||||
],
|
||||
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
||||
parserOptions: { ecmaVersion: 12, sourceType: 'module' },
|
||||
settings: { react: { version: '18.2' } },
|
||||
plugins: ['react-refresh'],
|
||||
rules: {
|
||||
'react-refresh/only-export-components': [
|
||||
'warn',
|
||||
{ allowConstantExport: true },
|
||||
],
|
||||
'indent': 'off',
|
||||
'no-console': 'off',
|
||||
'arrow-body-style': 'off',
|
||||
'implicit-arrow-linebreak': 'off',
|
||||
},
|
||||
}
|
24
Lab4/.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
29
Lab4/README.md
Normal file
@ -0,0 +1,29 @@
|
||||
#### Окружение:
|
||||
- nodejs 18;
|
||||
- VSCode;
|
||||
- ESLint плагин для VSCode;
|
||||
- для отладки необходимы бразузеры Chrome или Edge.
|
||||
|
||||
#### Создание пустого проекта:
|
||||
|
||||
```commandline
|
||||
npm create vite@latest ./ -- --template react
|
||||
```
|
||||
|
||||
#### Установка зависимостей:
|
||||
|
||||
```commandline
|
||||
npm install
|
||||
```
|
||||
|
||||
#### Запуск проекта:
|
||||
|
||||
```commandline
|
||||
npm run dev
|
||||
```
|
||||
|
||||
#### Сборка проекта:
|
||||
|
||||
```commandline
|
||||
npm run build
|
||||
```
|
BIN
Lab4/images/BackGr.png
Normal file
After Width: | Height: | Size: 2.9 MiB |
BIN
Lab4/images/New1.png
Normal file
After Width: | Height: | Size: 268 KiB |
BIN
Lab4/images/New2.png
Normal file
After Width: | Height: | Size: 208 KiB |
BIN
Lab4/images/New3.png
Normal file
After Width: | Height: | Size: 185 KiB |
BIN
Lab4/images/New4.png
Normal file
After Width: | Height: | Size: 199 KiB |
BIN
Lab4/images/logo2.png
Normal file
After Width: | Height: | Size: 13 KiB |
15
Lab4/index.html
Normal file
@ -0,0 +1,15 @@
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>My shop</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
14
Lab4/jsconfig.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"target": "ES2020",
|
||||
"jsx": "react",
|
||||
"strictNullChecks": true,
|
||||
"strictFunctionTypes": true
|
||||
},
|
||||
"exclude": [
|
||||
"node_modules",
|
||||
"**/node_modules/*"
|
||||
]
|
||||
}
|
4344
Lab4/package-lock.json
generated
Normal file
32
Lab4/package.json
Normal file
@ -0,0 +1,32 @@
|
||||
{
|
||||
"name": "lec4",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.18.0",
|
||||
"bootstrap": "^5.3.2",
|
||||
"react-bootstrap": "^2.9.1",
|
||||
"react-bootstrap-icons": "^1.10.3",
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.15",
|
||||
"@types/react-dom": "^18.2.7",
|
||||
"@vitejs/plugin-react": "^4.0.3",
|
||||
"eslint": "^8.45.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-react": "^7.32.2",
|
||||
"eslint-plugin-react-hooks": "^4.6.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.3",
|
||||
"vite": "^4.4.5"
|
||||
}
|
||||
}
|
3
Lab4/public/favicon.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
|
||||
<path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 463 B |
0
Lab4/src/App.css
Normal file
24
Lab4/src/App.jsx
Normal file
@ -0,0 +1,24 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container } from 'react-bootstrap';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import './App.css';
|
||||
import Footer from './components/footer/Footer.jsx';
|
||||
import Navigation from './components/navigation/Navigation.jsx';
|
||||
|
||||
const App = ({ routes }) => {
|
||||
return (
|
||||
<>
|
||||
<Navigation routes={routes}></Navigation>
|
||||
<Container className='p-2' as="main" fluid>
|
||||
<Outlet />
|
||||
</Container>
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
App.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default App;
|
BIN
Lab4/src/assets/banner1.png
Normal file
After Width: | Height: | Size: 640 KiB |
BIN
Lab4/src/assets/banner2.png
Normal file
After Width: | Height: | Size: 812 KiB |
BIN
Lab4/src/assets/banner3.png
Normal file
After Width: | Height: | Size: 767 KiB |
BIN
Lab4/src/assets/logo.png
Normal file
After Width: | Height: | Size: 12 KiB |
25
Lab4/src/components/banner/Banner.css
Normal file
@ -0,0 +1,25 @@
|
||||
#banner {
|
||||
margin: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#banner img {
|
||||
border: 1px solid #3c3c3f;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
#banner img.banner-show {
|
||||
width: 100%;
|
||||
opacity: 1;
|
||||
transition: opacity 1s, visibility 0s;
|
||||
}
|
||||
|
||||
#banner img.banner-hide {
|
||||
height: 0;
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s, visibility 0s 1s;
|
||||
}
|
40
Lab4/src/components/banner/Banner.jsx
Normal file
@ -0,0 +1,40 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import banner1 from '../../assets/banner1.png';
|
||||
import banner2 from '../../assets/banner2.png';
|
||||
import banner3 from '../../assets/banner3.png';
|
||||
import './Banner.css';
|
||||
|
||||
const Banner = () => {
|
||||
const [currentBanner, setCurrentBanner] = useState(0);
|
||||
const banners = [banner1, banner2, banner3];
|
||||
|
||||
const getBannerClass = (index) => {
|
||||
return currentBanner === index ? 'banner-show' : 'banner-hide';
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const bannerInterval = setInterval(
|
||||
() => {
|
||||
console.info('Banner changed');
|
||||
let current = currentBanner + 1;
|
||||
if (current === banners.length) {
|
||||
current = 0;
|
||||
}
|
||||
setCurrentBanner(current);
|
||||
},
|
||||
5000,
|
||||
);
|
||||
return () => clearInterval(bannerInterval);
|
||||
});
|
||||
|
||||
return (
|
||||
<div id="banner" >
|
||||
{
|
||||
banners.map((banner, index) =>
|
||||
<img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
|
||||
}
|
||||
</div >
|
||||
);
|
||||
};
|
||||
|
||||
export default Banner;
|
5
Lab4/src/components/footer/Footer.css
Normal file
@ -0,0 +1,5 @@
|
||||
.my-footer {
|
||||
background-color: #454545;
|
||||
height: 32px;
|
||||
color: #fff;
|
||||
}
|
13
Lab4/src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,13 @@
|
||||
import './Footer.css';
|
||||
|
||||
const Footer = () => {
|
||||
// const year = new Date().getFullYear();
|
||||
|
||||
return (
|
||||
<footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
Адреса: ул. Северный Венец, 32; ул. Андрея Блаженного, 3
|
||||
</footer>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
12
Lab4/src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,12 @@
|
||||
.my-navbar {
|
||||
background-color: #3c3c3c !important;
|
||||
}
|
||||
|
||||
.my-navbar .link a:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
.my-navbar .logo {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
41
Lab4/src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,41 @@
|
||||
import PropTypes from 'prop-types';
|
||||
import { Container, Nav, Navbar } from 'react-bootstrap';
|
||||
import { Cart2 } from 'react-bootstrap-icons';
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import './Navigation.css';
|
||||
|
||||
const Navigation = ({ routes }) => {
|
||||
const location = useLocation();
|
||||
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||
|
||||
return (
|
||||
<header>
|
||||
<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
|
||||
</Navbar.Brand>
|
||||
<Navbar.Toggle aria-controls='main-navbar' />
|
||||
<Navbar.Collapse id='main-navbar'>
|
||||
<Nav className='me-auto link' activeKey={location.pathname}>
|
||||
{
|
||||
pages.map((page) =>
|
||||
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
|
||||
{page.title}
|
||||
</Nav.Link>)
|
||||
}
|
||||
</Nav>
|
||||
</Navbar.Collapse>
|
||||
</Container>
|
||||
</Navbar >
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
routes: PropTypes.array,
|
||||
};
|
||||
|
||||
export default Navigation;
|
118
Lab4/src/index.css
Normal file
@ -0,0 +1,118 @@
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.btn-mw {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.btn-mw {
|
||||
width: 30%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.btn-mw {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
.body{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100hv;
|
||||
}
|
||||
.stsp{
|
||||
font-size: 30px;
|
||||
color: #333333;
|
||||
text-align: center;
|
||||
margin-top: 70;
|
||||
}
|
||||
|
||||
.mainSt{
|
||||
color: #060647;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
.rectPage2{
|
||||
color: #FFFFFF;
|
||||
width: 1470px;
|
||||
height: 900px;
|
||||
border : 2px solid #000000;
|
||||
background-color: #FFFFFF;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.rectPage4{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: #FFFFFF;
|
||||
width: 550px;
|
||||
height: 300px;
|
||||
border: 2px solid #000000;
|
||||
background-color: #7c7474;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.rectPage5{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top : auto;
|
||||
margin-bottom : auto;
|
||||
width: 600px;
|
||||
height: 500px;
|
||||
border: 2px solid #000000;
|
||||
background-color: #FFFFFF;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.rectNews{
|
||||
width:310px;
|
||||
height:200px;
|
||||
border : 2px solid #2582A3;
|
||||
border-radius: 8%;
|
||||
margin-left: 180;
|
||||
margin-top: 9px;
|
||||
margin-bottom:25px;
|
||||
}
|
||||
.stylePage2{
|
||||
float : center;
|
||||
margin-right: 7;
|
||||
color: #063638;
|
||||
font-size: 18px
|
||||
}
|
||||
.styleParagraph{
|
||||
border-top: 2px solid #000000;
|
||||
}
|
||||
.styleBlack{
|
||||
color : #000000;
|
||||
}
|
||||
.stylePage2LargeSymbol{
|
||||
float : left;
|
||||
margin-right: 7;
|
||||
color: #118D94;
|
||||
font-size: 50px;
|
||||
line-height: 52px
|
||||
}
|
||||
.rectNewsTextBox{
|
||||
width : 310px;
|
||||
min-height : 50px;
|
||||
border: 2px solid #000000;
|
||||
background-color: #FFFFFF;
|
||||
opacity: 0.7;
|
||||
border-radius: 10% / 40%;
|
||||
margin-top : 5px;
|
||||
}
|
||||
.rectNewsText{
|
||||
color: #000000;
|
||||
font-size: 15px;
|
||||
}
|
||||
.rectNew{
|
||||
border-radius: 15px;
|
||||
border: 2px #2582A3 solid;
|
||||
}
|
55
Lab4/src/main.jsx
Normal file
@ -0,0 +1,55 @@
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
|
||||
import App from './App.jsx';
|
||||
import './index.css';
|
||||
import ErrorPage from './pages/ErrorPage.jsx';
|
||||
import Page1 from './pages/Page1.jsx';
|
||||
import Page2 from './pages/Page2.jsx';
|
||||
import Page3 from './pages/Page3.jsx';
|
||||
import Page4 from './pages/Page4.jsx';
|
||||
import PageEdit from './pages/PageEdit.jsx';
|
||||
|
||||
const routes = [
|
||||
{
|
||||
index: true,
|
||||
path: '/',
|
||||
element: <Page1 />,
|
||||
title: 'Главная страница',
|
||||
},
|
||||
{
|
||||
path: '/page2',
|
||||
element: <Page2 />,
|
||||
title: 'Вторая страница',
|
||||
},
|
||||
{
|
||||
path: '/page3',
|
||||
element: <Page3 />,
|
||||
title: 'Третья страница',
|
||||
},
|
||||
{
|
||||
path: '/page4',
|
||||
element: <Page4 />,
|
||||
title: 'Четвертая страница',
|
||||
},
|
||||
{
|
||||
path: '/page-edit',
|
||||
element: <PageEdit />,
|
||||
},
|
||||
];
|
||||
|
||||
const router = createBrowserRouter([
|
||||
{
|
||||
path: '/',
|
||||
element: <App routes={routes} />,
|
||||
children: routes,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
]);
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<RouterProvider router={router} />
|
||||
</React.StrictMode>,
|
||||
);
|
19
Lab4/src/pages/ErrorPage.jsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { Alert, Button, Container } from 'react-bootstrap';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
const ErrorPage = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<Container fluid className="p-2 row justify-content-center">
|
||||
<Container className='col-md-6'>
|
||||
<Alert variant="danger">
|
||||
Страница не найдена
|
||||
</Alert>
|
||||
<Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
|
||||
</Container>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default ErrorPage;
|
65
Lab4/src/pages/Page1.jsx
Normal file
@ -0,0 +1,65 @@
|
||||
// import { Link } from 'react-router-dom';
|
||||
// import Banner from '../components/banner/Banner.jsx';
|
||||
|
||||
const Page1 = () => {
|
||||
return (
|
||||
<>
|
||||
<main className="container col text-center">
|
||||
<span className="mainSt">
|
||||
<b>Новости</b>
|
||||
</span>
|
||||
<div className="text-center">
|
||||
<button className="btn btn-primary w-auto" type="button" onClick={() => window.location.href = 'admin.html'}>
|
||||
Добавить новость
|
||||
</button>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col mt-4">
|
||||
<div className="rectNews d-flex flex-column">
|
||||
<img className = "rectNew" src="./images/New1.png" alt="New1" width="100%" />
|
||||
<div className="rectNewsTextBox">
|
||||
<span className="rectNewsText">
|
||||
<b>УлГТУ вошёл в топ-250 лучших вузов</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col mt-4">
|
||||
<div className="rectNews d-flex flex-column position-relative">
|
||||
<img className = "rectNew" 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 mt-5">
|
||||
<div className="rectNews d-flex flex-column position-relative">
|
||||
<img className = "rectNew" src="./images/New3.png" alt="New3" width="100%" />
|
||||
<div className="rectNewsTextBox">
|
||||
<span className="rectNewsText">
|
||||
<b>Поправки в системе работы приёмной комиссии</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col mt-5">
|
||||
<div className="rectNews d-flex flex-column position-relative">
|
||||
<img className = "rectNew" src="./images/New4.png" alt="New4" width="100%" />
|
||||
<div className="rectNewsTextBox">
|
||||
<span className="rectNewsText">
|
||||
<b>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</b>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page1;
|
43
Lab4/src/pages/Page2.jsx
Normal file
@ -0,0 +1,43 @@
|
||||
import { Table } from 'react-bootstrap';
|
||||
import ulstuLogo from '../assets/logo.png';
|
||||
|
||||
const Page2 = () => {
|
||||
return (
|
||||
<>
|
||||
<p className="text-center">
|
||||
Вторая страница содержит пример рисунка (рис. 1) и таблицы (таб. 1).
|
||||
</p>
|
||||
<div className="text-center">
|
||||
<img src={ulstuLogo} alt="logo" width="128" />
|
||||
<br />
|
||||
Рис. 1. Пример рисунка.
|
||||
</div>
|
||||
<div className="mt-3 row justify-content-center">
|
||||
<Table className="w-50" bordered>
|
||||
<caption>Таблица 1. Пример таблицы.</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="w-25">Номер</th>
|
||||
<th>ФИО</th>
|
||||
<th className="w-25">Телефон</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Иванов</td>
|
||||
<td>89999999999</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Петров</td>
|
||||
<td>89999999991</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page2;
|
78
Lab4/src/pages/Page3.jsx
Normal file
@ -0,0 +1,78 @@
|
||||
import { useState } from 'react';
|
||||
import { Button, Form } from 'react-bootstrap';
|
||||
|
||||
const Page3 = () => {
|
||||
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="row justify-content-center">
|
||||
<Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
|
||||
<Form.Group className="mb-2" controlId="lastname">
|
||||
<Form.Label>Фамилия</Form.Label>
|
||||
<Form.Control type="text" name="lastname" required />
|
||||
<Form.Control.Feedback>Фамилия заполнена</Form.Control.Feedback>
|
||||
<Form.Control.Feedback type="invalid">Фамилия не заполнена</Form.Control.Feedback>
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="firstname">
|
||||
<Form.Label>Имя</Form.Label>
|
||||
<Form.Control type="text" name="firstname" required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="email">
|
||||
<Form.Label>E-mail</Form.Label>
|
||||
<Form.Control type="email" name="email" placeholder="name@example.ru" required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="password">
|
||||
<Form.Label>Пароль</Form.Label>
|
||||
<Form.Control type="password" name="password" required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="date">
|
||||
<Form.Label>Дата</Form.Label>
|
||||
<Form.Control type="date" name="date" required />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="disabled">
|
||||
<Form.Label>Выключенный компонент</Form.Label>
|
||||
<Form.Control type="text" name="disabled" value="Некоторое значение" disabled />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="readonly">
|
||||
<Form.Label>Компонент только для чтения</Form.Label>
|
||||
<Form.Control type="text" name="readonly" value="Некоторое значение" readOnly />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2" controlId="color">
|
||||
<Form.Label>Выбор цвета</Form.Label>
|
||||
<Form.Control type="color" name="color" defaultValue='#ff0055' />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2 d-md-flex flex-md-row">
|
||||
<Form.Check className="me-md-3" type='checkbox' name='checkbox1' label='Флажок 1' />
|
||||
<Form.Check className="me-md-3" type='checkbox' name='checkbox2' label='Флажок 2' />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2 d-md-flex flex-md-row">
|
||||
<Form.Check className="me-md-3" type='radio' name='radio1' label='Переключатель 1' />
|
||||
<Form.Check className="me-md-3" type='switch' name='radio2' label='Переключатель 2' />
|
||||
</Form.Group>
|
||||
<Form.Group className="mb-2">
|
||||
<Form.Select name='selected' required>
|
||||
<option value="" selected>Выберите значение</option>
|
||||
<option value="1">Один</option>
|
||||
<option value="2">Два</option>
|
||||
<option value="3">Три</option>
|
||||
</Form.Select>
|
||||
</Form.Group>
|
||||
<div className="text-center">
|
||||
<Button className="w-50" variant="primary" type="submit">Отправить</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page3;
|
28
Lab4/src/pages/Page4.jsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { Button, ButtonGroup, Table } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const Page4 = () => {
|
||||
return (
|
||||
<>
|
||||
<ButtonGroup>
|
||||
<Button id="items-add" variant="info">Добавить товар (диалог)</Button>
|
||||
<Button as={Link} to="/page-edit" variant="success">Добавить товар (страница)</Button>
|
||||
</ButtonGroup>
|
||||
<Table className="mt-2" striped>
|
||||
<thead>
|
||||
<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"></th>
|
||||
<th scope="col"></th>
|
||||
<th scope="col"></th>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</Table>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page4;
|
53
Lab4/src/pages/PageEdit.jsx
Normal file
@ -0,0 +1,53 @@
|
||||
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;
|
13
Lab4/vite.config.js
Normal file
@ -0,0 +1,13 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies */
|
||||
import react from '@vitejs/plugin-react';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: {
|
||||
sourcemap: true,
|
||||
chunkSizeWarningLimit: 1024,
|
||||
emptyOutDir: true,
|
||||
},
|
||||
});
|
6
package-lock.json
generated
Normal file
@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "repos",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|