4 lab front)

This commit is contained in:
Павел Сорокин 2023-04-09 16:13:07 +04:00
parent e40639a883
commit ab9181004e
21 changed files with 1218 additions and 0 deletions

48
FrontEnd/src/App.jsx Normal file
View File

@ -0,0 +1,48 @@
import { useRoutes, Outlet, BrowserRouter } from 'react-router-dom';
import Header from './components/common/Header';
import Catalogs from './components/catalogs/MainPage';
import CatalogGroups from './components/catalogs/Autorize';
import CatalogStudents from './components/catalogs/News';
import Post from './components/catalogs/Post';
import Reports from './components/catalogs/RezhimRaboty';
import ReportGroupStudents from './components/catalogs/Raspisanie';
import Footer from './components/common/Footer';
function Router(props) {
return useRoutes(props.rootRoute);
}
export default function App() {
const routes = [
{ index: true, element: <Catalogs /> },
{ path: 'Main_page', element: <Catalogs />, label: 'Главная' },
{ path: 'News', element: <CatalogStudents/>, label:'Новости' },
{ path: 'Autorize', element: <CatalogGroups />, label:'Авторизация'},
{ path: 'RezhimRaboty', element: <Reports />, label: 'Режим работы' },
{ path: 'Raspisanie', element: <ReportGroupStudents />,label:'Расписание' },
{ path: 'Post', element: <Post/>}
];
const links = routes.filter(route => route.hasOwnProperty('label'));
const rootRoute = [
{ path: '/', element: render(links), children: routes }
];
function render(links) {
return (
<div className='body_app'>
<Header links={links} />
<div className="d-flex text-white bg-info bg-gradient fw-bold">
<Outlet />
</div>
<Footer links={links}/>
</div>
);
}
return (
<BrowserRouter>
<Router rootRoute={ rootRoute } />
</BrowserRouter>
);
}

View File

@ -0,0 +1,22 @@
.myModal {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: none;
background: rgba(0,0,0, 0.5);
}
.myModalContent {
padding: 25px;
background: white;
border-radius: 16px;
max-width: 600px;
}
.myModal.active {
display: flex;
justify-content: center;
align-items: center;
}

View File

@ -0,0 +1,146 @@
import React from "react";
import { useState } from 'react';
import {useEffect} from 'react';
import UserDto from '../../models/UserDto';
export default function CatalogGroups(props) {
const formRef = React.createRef();
const [output, setOutput] = useState([]);
const FirstInput = document.getElementById("validationCustom01");
const LastInput = document.getElementById("validationCustom02");
const emailInput = document.getElementById("validationCustomMail");
const getAll = async function () {
const requestUrl = "http://localhost:8080/user";
const response = await fetch(requestUrl);
const users = await response.json();
setOutput(users);
}
useEffect(() => {
getAll();
}, []);
const remove = async function(id){
const requestParams = {
method: "DELETE",
headers:{
"Content-Type":"application/json",
}
};
const requestUrl = "http://localhost:8080" + "/user/" + id;
const response=await fetch(requestUrl,requestParams);
return await response.json;
};
const create = async function (firstName, lastName,Email) {
const requestParams = {
method: "POST",
headers: {
"Content-Type": "application/json",
}
};
const response = await fetch("http://localhost:8080" + `/user?firstName=${firstName}&lastName=${lastName}&email=${Email}`, requestParams);
return await response.json();
}
const refresh = async function(id,firstName, lastName,Email)
{
const requestParams={
method:"PUT",
headers:{
"Content-Type":"application/json",
}
};
const response=await fetch(`http://localhost:8080/user/${id}?firstName=${firstName}&lastName=${lastName}&email=${Email}`,requestParams);
return await response.json();
}
const add_but = function(event)
{
event.preventDefault();
create(FirstInput.value, LastInput.value,emailInput.value).then((result) => {
getAll();
FirstInput.value = "";
LastInput.value = "";
emailInput.value="";
alert(`User[id=${result.id}, firstName=${result.firstName}, lastName=${result.lastName},email=${result.email}]`);
});
}
const edit_btn = function(id,event)
{
console.log("Обновление")
refresh(id,FirstInput.value, LastInput.value,emailInput.value).then((result)=>{
getAll();
FirstInput.value = "";
LastInput.value = "";
emailInput.value="";
});
}
const rem_but = function(id,event)
{
console.log("Удаление")
remove(id).then((result)=>{
getAll();
});
}
return (
<div className="p-2">
<form className="row g-3 needs-validation">
<div className="col-md-4">
<label className="form-label" htmlFor="validationCustom01">Имя</label>
<input className="form-control" id="validationCustom01" type="text" defaultValue="" required/>
<div className="valid-feedback">Отлично!</div>
<div className="invalid-feedback">Введите имя!</div>
</div>
<div className="col-md-4">
<label className="form-label" htmlFor="validationCustom02">Фамилия</label>
<input className="form-control" id="validationCustom02" type="text" defaultValue="" required/>
<div className="valid-feedback">Отлично! </div>
<div className="invalid-feedback">Введите Фамилию!</div>
</div>
<div className="col-md-4">
<label className="form-label" htmlFor="validationCustomMail">Почта</label>
<div className="input-group has-validation">
<input className="form-control" id="validationCustomMail" type="email" aria-describedby="inputGroupPrepend" required/>
<div className="valid-feedback">Отлично!</div>
<div className="invalid-feedback">Введите почту!</div>
</div>
</div>
<div className="col-12">
<div className="form=check">
<input className="form-check-input" id="invalidCheck" type="checkbox" defaultValue="" required/>
<label className="form-check-label" htmlFor="invalidCheck">Согласие на обработку персональных данных</label>
<div className="valid-feedback">Отлично!</div>
<div className="invalid-feedback">Введите пароль!</div>
</div>
</div>
<div className="col-12 d-flex">
<div className="d-grid col-sm-4 mx-auto">
<button type="button" id="add_btn" className="btn btn-outline-light btn-lg float-end" onClick={add_but}>Add</button>
</div>
</div>
</form>
<div className="row table-responsive mx-2">
<table className="table mt-3">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Last Name</th>
<th scope="col">First Name</th>
<th scope="col">Email</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="tbody">
{output.map((user) => (
<tr key={user.id}>
<th scope="row">{user.id}</th>
<td>{user.firstName}</td>
<td>{user.lastName}</td>
<td>{user.email}</td>
<td><button type="button" className="btn btn-outline-light text-center mx-2" onClick={(e) => edit_btn(user.id, e)}><i className="fa-sharp fa-solid fa-pen"></i></button></td>
<td><button type="button" className="btn btn-outline-light text-center mx-2" onClick={(e) => rem_but(user.id, e)}><i className="fa-sharp fa-solid fa-trash"></i></button></td>
</tr>
))}
</tbody>
</table>
</div>
</div>
);
}

View File

@ -0,0 +1,138 @@
import { useState, useEffect } from "react";
import Toolbar from "../common/Toolbar";
import Table from "../common/Card";
import Modal from "../common/Modal";
export default function Catalog(props) {
const [items, setItems] = useState([]);
const [modalHeader, setModalHeader] = useState('');
const [modalConfirm, setModalConfirm] = useState('');
const [modalVisible, setModalVisible] = useState(false);
const [isEdit, setEdit] = useState(false);
const [userId,setUserId] = useState(0);
useEffect(() => {
loadItems();
}, []);
useEffect(()=>
{
loadItems();
},[userId])
const setUserIDd = async function(id)
{
setUserId(id);
console.log(id);
}
const loadItems = async function() {
const requestUrl = `http://localhost:8080/user/${userId}/posts`;
const response = await fetch(requestUrl);
const posts = await response.json();
console.log(posts);
setItems(posts);
}
const saveItem = async function() {
if (!isEdit) {
const requestUrl = `http://localhost:8080/user/${userId}/Post`;
const temppost=JSON.stringify(props.data)
console.log(temppost);
const requestParams = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: temppost,
};
await fetch(requestUrl,requestParams).then(() => loadItems());
} else {
const requestUrl = "http://localhost:8080/post/"+props.data.id;
const temppost=JSON.stringify(props.data)
const requestParams = {
method: "PUT",
headers: {
"Content-Type": "application/json",
},
body: temppost,
};
await fetch(requestUrl,requestParams).then(() => loadItems());
}
}
function handleAdd() {
setEdit(false);
setModalHeader('Добавление элемента');
setModalConfirm('Добавить');
setModalVisible(true);
props.onAdd();
}
const edit = async function(editedId) {
console.log(editedId);
const requestUrl = "http://localhost:8080/post/"+editedId;
const requestParams = {
mode: 'cors'
}
await fetch(requestUrl,requestParams)
.then(data => {
setEdit(true);
setModalHeader('Редактирование элемента');
setModalConfirm('Сохранить');
setModalVisible(true);
//props.onEdit(data);
return data.json();
}).then(data =>{
props.onEdit(data);
});
}
const handleRemove = async function(id) {
if (confirm('Удалить выбранные элементы?')) {
console.log(id);
const requestUrl = `http://localhost:8080/user/${userId}/Post/`+id;
const requestParams = {
method: "DELETE",
headers: {
"Content-Type": "application/json",
},
};
await fetch(requestUrl,requestParams).then(()=>loadItems());
}
}
function handleModalHide() {
setModalVisible(false);
}
function handleModalDone() {
saveItem();
}
return (
<>
<Toolbar
onAdd={handleAdd}
getUser={setUserIDd}
/>
<Table
headers={props.headers}
items={items}
userId={userId}
selectable={true}
onEdit={edit}
onRemove={handleRemove}/>
<Modal
header={modalHeader}
confirm={modalConfirm}
visible={modalVisible}
onHide={handleModalHide}
onDone={handleModalDone}>
{props.children}
</Modal>
</>
);
}

View File

@ -0,0 +1,23 @@
import { useEffect } from "react";
import { useState } from "react";
import Banner from '../common/Banner'
export default function Catalogs(props) {
return (
<div className="container-fluid">
<Banner />
<div className="lp"><img className="img-fluid img-school float-start my-2" src="img/Shkola.jpg" alt="shkola"/>
<div>
<p className="fs-4">Мы расположены по адресу: 423228, г. Нижневратовск, ул. Корзинова, д. 37</p>
<div>
<div className="fs-4">Контактные телефоны
<p>(8228) 13-77-85</p>
<p>(8800) 55-53-50</p>
<p>факс (8911) 22-44-96</p>
</div>
</div>
</div>
</div><a className="fs-4" href="mailto:Nizhnev.school10@mail.ru">email: Nizhnev.school10@mail.ru</a>
</div>
);
}

View File

@ -0,0 +1,62 @@
import { useState, useEffect } from 'react';
import Catalog from './Catalog';
import New from '../../models/NewDto';
export default function News(props) {
const url = 'post/';
const transformer = (data) => new New(data);
const catalogStudHeaders = [
{ name: 'image', label: 'Картинка' },
{ name: 'heading', label: 'Заголовок' },
{ name: 'content', label: 'Новости' },
];
const [data, setData] = useState(new New());
const fileReader=new FileReader();
fileReader.onloadend=()=>{
const tempval=fileReader.result;
setData({ ...data, ['image']: tempval})
}
const handleOnChange=(event)=>{
event.preventDefault();
const file=event.target.files[0];
fileReader.readAsDataURL(file);
};
function handleOnAdd() {
setData(new New());
}
function handleOnEdit(data) {
console.log(data);
setData(new New(data));
}
function handleFormChange(event) {
setData({ ...data, [event.target.id]: event.target.value })
}
return (
<Catalog
headers={catalogStudHeaders}
url={url}
transformer={transformer}
data={data}
onAdd={handleOnAdd}
onEdit={handleOnEdit}>
<div className="mb-3 text-black">
<label htmlFor="image" className="form-label">Изображение</label>
<input type="file" id="image" className="form-control" required onChange={handleOnChange}/>
</div>
<div className="mb-3">
<label htmlFor="heading" className="form-label text-black">Заголовок</label>
<input type="text" id="heading" className="form-control" required
value={data.heading} onChange={handleFormChange}/>
</div>
<div className="mb-3">
<label htmlFor="content" className="form-label text-black">Содержание</label>
<input type="text" id="content" className="form-control" required
value={data.content} onChange={handleFormChange}/>
</div>
</Catalog>
);
}

View File

@ -0,0 +1,161 @@
import React from "react";
import { useState } from 'react';
import {useEffect} from 'react';
import New from '../../models/NewDto';
import TableComment from "../common/TableComment";
export default function Post(props) {
useEffect(() => {
getAll();
}, []);
const [output, setOutput] = useState([]);
const [userId,setUserId] = useState();
const commentInput = document.getElementById("commentText");
const getAll = async function () {
const queryString=window.location.search;
const urlParams=new URLSearchParams(queryString);
const id=urlParams.get('id');
getCurrentPost(id).then(curPost => setad(curPost));
getComments(id)
const requestUrl = "http://localhost:8080/user";
const response = await fetch(requestUrl);
const users = await response.json();
setOutput(users);
}
const refresh = async function(id,text)
{
const requestParams={
method:"PUT",
headers:{
"Content-Type":"application/json",
}
};
const response=await fetch(`http://localhost:8080/comment/${id}?Text=${text}`,requestParams);
return await response.json();
}
const create = async function (text, id) {
const requestParams = {
method: "POST",
headers: {
"Content-Type": "application/json",
}
};
const response = await fetch(`http://localhost:8080/post/${ad.id}/Comment/${id}?Text=${text}`,requestParams);
}
const getCurrentPost = async function (id) {
const requestUrl = "http://localhost:8080/post/"+id;
const response = await fetch(requestUrl);
const product = await response.json();
return product;
}
const remove = async function(id){
const requestParams = {
method: "DELETE",
headers:{
"Content-Type":"application/json",
}
};
console.log(id);
const requestUrl = `http://localhost:8080/post/${ad.id}/Comment/${id}`;
const response=await fetch(requestUrl,requestParams);
return await response.json;
};
function getuser(){
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
setUserId(selectedValue);
}
const getComments = async function(id)
{
const requesturl = "http://localhost:8080/post/"+id+"/comments"
const response = await fetch(requesturl);
const comments = await response.json();
setComments(comments);
}
const [ad, setad] = useState([]);
const [comments,setComments] = useState([]);
const rem_but = function(id,event)
{
console.log("Удаление")
remove(id).then((result)=>{
getAll();
});
}
const add_but = function(event)
{
event.preventDefault();
create(commentInput.value, userId).then((result) => {
getAll();
commentInput.value = "";
alert(`Comment[id=${result.id}, text=${result.firstName}]`);
});
}
const edit_btn = function(id,event)
{
console.log("Обновление")
refresh(id, commentInput.value).then((result)=>{
getAll();
commentInput.value = "";
});
}
return(
<div>
<div className="da d-flex my-2">
<div><img className="imga img-fluid float-start mx-2" style={{width: "500px" ,height: "300px" }} src={ad.image}/></div>
<div className="container-fluid my-2 mx-1">
<h1>{ad.heading}</h1>
<p>{ad.content}</p>
</div>
</div>
<div className="d-flex mx-2">
<select id="selectBox" onChange={getuser}>
<option disabled value="">Выбор...</option>
{
output.map((client) => (
<option className='text-black' key={client.id} value={client.id}>{client.firstName}</option>
))}
</select>
<input className="form-control" id="commentText" type="text" defaultValue="" required/>
<button type="button" className="btn btn-primary" onClick={(e)=>add_but(e)}>
+
</button>
</div>
<div className="row table-responsive mx-2">
<TableComment
comments={comments}
onRemove={rem_but}
onEdit={edit_btn}
/>
</div>
</div>
);
}

View File

@ -0,0 +1,13 @@
export default function ReportGroupStudents(props) {
return (
<div className="container-fluid justify-content-center align-items-center d-flex flex-column my-2">
<div>
<h6>Расписание<img className="pdf-size " src="img/Rasp.png" alt="Rasp"/></h6>
</div>
<div> <a href="Rasp(1-4).pdf" target="_blank"><img className="pdf-size" src="img/6666.png"/></a><a href="Rasp(1-4).pdf" target="_blank">Расписание 1 - 4 кл. (.pdf)</a></div><br/><br/>
<div> <a href="Rasp(5-11).pdf" target="_blank"><img className="pdf-size" src="img/6666.png"/></a><a href="Rasp(5-11).pdf" target="_blank">Расписание 5 - 11 кл. (.pdf)</a></div>
</div>
);
}

View File

@ -0,0 +1,135 @@
export default function Reports(props) {
return (
<div className="container-fluid my-2">
<div className="float-start me-5">
<h3 className="text-wrap">Расписание звонков</h3>
<table className="Vnov1 float-start table-bordered">
<tbody>
<tr>
<th colSpan="2">1 смена</th>
<th colSpan="2">2 смена</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td></td>
<td> </td>
</tr>
<tr>
<td>1 урок</td>
<td>8.00-8.45</td>
<td>0 урок</td>
<td>12.55-13.40</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2 урок </td>
<td>8.55-9.40 </td>
<td>1 урок </td>
<td>13.50-14.35</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3 урок </td>
<td>10.00-10.45</td>
<td>2 урок</td>
<td>14.50-15.35</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
<tr>
<td>4 урок</td>
<td>11.05-11.50</td>
<td>3 урок</td>
<td>12.00-12.45</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
<tr>
<td>5 урок</td>
<td>12.00-12.45</td>
<td>4 урок</td>
<td>16.45-17.30</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
<tr>
<td>6 урок</td>
<td>12.55-13.40 </td>
<td>5 урок</td>
<td>17.40-18.25 </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
<tr>
<td>7 урок</td>class
<td>13.50-14.35</td>
<td> </td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<h3>Режим работы ОУ:
<div className="align-items-justify text-wrap fs-5">Учебный год в МБОУ средняя общеобразовательная школа 10 начинается 2 сентября, состоит из 3-х триместров, включает каникулы по графику. МБОУ средняя общеобразовательная школа 10 работает в две смены. Школа работает в течение 5 дней в неделю с понедельника по пятницу, выходной день суббота и воскресенье в 1-11 классах. Продолжительность учебного года 33 учебных недели для учащихся 1-х классов, 34 учебных недель для учащихся 2-11 классов. Для учащихся, обучающихся на дому, продолжительность учебного года составляет 34 недели. Начало учебных занятий в 8-00.
<table className="table-bordered">
<tbody>
<th>Триместр</th>
<th>Дата начала/дата окончания</th>
<th colSpan="2">Каникулы</th>
<tr>
<td>I</td>
<td>02.09.2022 - 19.11.2022</td>
<td>08.10.2022 - 13.10.2022</td>
<td>20.11.2022 - 25.11.2022</td>
</tr>
<tr>
<td>II</td>
<td>26.11.2022 - 19.02.2023</td>
<td>28.12.2022 - 07.01.2023 </td>
<td>20.02.2023 - 25.02.2023</td>
</tr>
<tr>
<td>III</td>
<td>26.02.2023 - 29.05.2023</td>
<td>10.04.2023 - 15.04.2023</td>
<td>30.05.2023 - 31.08.2023</td>
</tr>
</tbody>
</table>
</div>
</h3>
</div>
</div>
);
}

View File

@ -0,0 +1,24 @@
import { useState, useEffect } from 'react';
import '../../style.css'
export default function Banner(props) {
const[bannerNum,setBanner]=useState(['show','hide','hide']);
useEffect(() => {
const length=3;
var old = length-1;
var current = 0;
const timer = window.setInterval(()=>{
setBanner([...bannerNum, bannerNum[current] = 'show', bannerNum[old] = 'hide']);
old = current;
current++;
if (current ===length) {
current = 0;
}
},5000);
return()=>{
window.clearInterval(timer);
}
},[]);
return(
<div id="banner"><img className={bannerNum[0]} src="img/banner1.png"/><img className={bannerNum[1]} src="img/banner2.png"/><img className={bannerNum[2]} src="img/banner3.png"/></div>
);
}

View File

@ -0,0 +1,95 @@
import { useEffect, useState } from 'react';
import ModalEdit from './ModalComment';
export default function Card(props) {
function edit(id) {
props.onEdit(id);
}
function remove(id) {
props.onRemove(id);
}
useEffect(() => {
getAll();
}, []);
const [clients, setClientst] = useState([]);
const [userId, setUserId]=useState();
const getAll = async function () {
const requestUrl = "http://localhost:8080/user";
const response = await fetch(requestUrl);
const users = await response.json();
setClientst(users);
}
const [modalTable, setModalTable] = useState(false);
const [currEditItem, setCurrEditItem] = useState(0);
const [text, setText] = useState('');
function handleEdit(id) {
console.info("Start edit script");
setCurrEditItem(id);
setModalTable(true)
console.info('End edit script');
};
const handleSubmitEdit = async (e, id) => {
console.info('Start synchronize edit');
e.preventDefault(); // страница перестает перезагружаться
const requestUrl = `http://localhost:8080/post/${id}/Comment/${props.userId}?Text=${text}`;
const requestParams = {
method: "POST",
headers: {
"Content-Type": "application/json",
},
};
await fetch(requestUrl,requestParams);
setText('');
setModalTable(false);
};
return (
<div className="container-fluid mt-3">
{
props.items.map((item, index) =>
<div key={item.id}
className="card border-dark mb-3 d-flex flex-row text-black justify-content-between">
<div className=''>
<img className="col" style={{width: "300px" ,height: "200px" }} src={item.image}/>
</div>
<div className='d-flex flex-grow-1 flex-column'>
<div className='flex-grow-1 mx-2'>
{
props.headers.map(header =>
header.name == "image" ? null :
<div className="" key={item.id + header.name}>{item[header.name]}</div>
)
}
</div>
<div className="d-flex flex-row justify-content-end ">
<button type="button" className="btn btn-outline-primary text-center mx-2" data-bs-toggle="modal" data-bs-target="#redact" onClick={(e) => edit(item.id, e)}>
<i className="fa-sharp fa-solid fa-pen"></i>
</button>
<button href="#"
className="btn btn-outline-primary mx-3"
onClick={(e) => remove(item.id, e)}><i className="fa-sharp fa-solid fa-trash"></i></button>
<button href="#"
className="btn btn-outline-primary mx-2" onClick={(e) => handleEdit(item.id)}><i className="fa-solid fa-comment"></i></button>
<a href={`/Post?id=${item.id}`} className='btn btn-outline-primary mx-2'><i className="fa-solid fa-envelopes-bulk"></i></a>
</div>
</div>
</div>
)
}
<ModalEdit visible={modalTable} setVisible={setModalTable}>
<form className="g-3 fs-4 description fw-bold container" id="frm-items-edit" onSubmit={(e) => handleSubmitEdit(e, currEditItem)}>
<div className="row">
<label className="form-label" htmlFor="priceEdit">Комментарий</label>
<input value={text} onChange={e => setText(e.target.value)} className="form-control" name='priceEdit' id="priceEdit" type="text" placeholder="Введите содержимое комментария" required />
</div>
<div className="text-center mt-3">
<button className="btn btn-primary mx-1" type="submit" id="buttonSaveChanges">Сохранить изменения</button>
<button className="btn btn-secondary mx-1" type="button" data-bs-dismiss="modal" onClick={() => setModalTable(false)}>Отмена</button>
</div>
</form>
</ModalEdit>
</div>
);
}

View File

@ -0,0 +1,7 @@
import { NavLink } from 'react-router-dom';
export default function Footer(props) {
return (
<footer className="container-fluid d-flex text-white bg-primary bg-gradient mt-auto">© 2022 МОУ "СОШ №10"</footer>
);
}

View File

@ -0,0 +1,30 @@
import { NavLink } from 'react-router-dom';
export default function Header(props) {
return (
<header className="fs-4 fw-bold p-1 text-white bg-primary bg-gradient">
<div><img className="img-fluid float-start" src="../img/Emblema.png" alt="Emblema"/>
<p className="fs-5 Cont">Муниципальное бюджетное общеобразовательное учреждение средняя общеобразовательная школа 10</p>
</div>
<nav className="navbar navbar-expand-md navbar-dark">
<div className="container-fluid">
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span className="navbar-toggler-icon"></span></button>
<div className="navbar-collapse collapse justify-content-end" id="navbarNav">
<nav className="headers-problem navbar navbar-expand-lg d-flex">
{
props.links.map(route =>
<button key={route.path}
className="btn btn-outline-light mx-1">
<NavLink className="nav-link" to={route.path}>
{route.label}
</NavLink>
</button>
)
}
</nav>
</div>
</div>
</nav>
</header>
);
}

View File

@ -0,0 +1,46 @@
import React from "react";
export default function Modal(props) {
const formRef = React.createRef();
function hide() {
props.onHide();
}
function done(e) {
e.preventDefault();
if (formRef.current.checkValidity()) {
props.onDone();
hide();
} else {
formRef.current.reportValidity();
}
}
return (
<div className="modal fade show" tabIndex="-1" aria-hidden="true"
style={{ display: props.visible ? 'block' : 'none' }}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h1 className="modal-title fs-5" id="exampleModalLabel">{props.header}</h1>
<button className="btn-close" type="button" aria-label="Close"
onClick={hide}></button>
</div>
<div className="modal-body">
<form ref={formRef} onSubmit={done}>
{props.children}
</form>
</div>
<div className="modal-footer">
<button className="btn btn-secondary" type="button" onClick={hide}>Закрыть</button>
<button className="btn btn-primary" type="button" onClick={done}>
{props.confirm}
</button>
</div>
</div>
</div>
</div>
);
}

View File

@ -0,0 +1,18 @@
import { React } from 'react'
import classes from '../../ModalEdit.module.css'
export default function ModalEdit({children, visible, setVisible}) {
const rootClasses = [classes.myModal]
if (visible) {
rootClasses.push(classes.active);
}
//onClick={()=>setVisible(false)}
return (
<div className={rootClasses.join(' ')} >
<div className={classes.myModalContent}>
{children}
</div>
</div>
)
}

View File

@ -0,0 +1,34 @@
export default function TableComment(props) {
function edit(id,e) {
props.onEdit(id);
}
function remove(id,e) {
props.onRemove(id,e);
}
return(
<table className="table mt-3">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Text</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody id="tbody">
{props.comments.map((comment) => (
<tr key={comment.id}>
{console.log(comment.user)}
<th scope="row">{comment.user}</th>
<td>{comment.text}</td>
<td><button type="button" className="btn btn-outline-light text-center mx-2" onClick={(e) => edit(comment.id, e)}><i className="fa-sharp fa-solid fa-pen"></i></button></td>
<td><button type="button" className="btn btn-outline-light text-center mx-2" onClick={(e) => remove(comment.id, e)}><i className="fa-sharp fa-solid fa-trash"></i></button></td>
</tr>
))}
</tbody>
</table>
);
}

View File

@ -0,0 +1,43 @@
import { useState } from 'react';
import {useEffect} from 'react';
export default function Toolbar(props) {
function add() {
props.onAdd();
}
const [clients, setClientst] = useState([]);
useEffect(() => {
getAll();
}, []);
const getAll = async function () {
const requestUrl = "http://localhost:8080/user";
const response = await fetch(requestUrl);
const users = await response.json();
setClientst(users);
}
function getuser(){
var selectBox = document.getElementById("selectBox");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
props.getUser(selectedValue);
}
return (
<div className="d-flex float-start my-2">
<div className="mx-1">
<select id="selectBox" onChange={getuser}>
<option disabled value="">Выбор...</option>
{
clients.map((client) => (
<option className='text-black' key={client.id} value={client.id}>{client.firstName}</option>
))}
</select>
</div>
<div>
<button type="button" className="btn btn-primary" onClick={add}>
+
</button>
</div>
</div >
);
}

10
FrontEnd/src/main.jsx Normal file
View File

@ -0,0 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './style.css'
ReactDOM.createRoot(document.getElementById('app')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)

View File

@ -0,0 +1,9 @@
export default class NewDto {
constructor(data) {
this.id = data?.id || null;
this.image = data?.image;
this.heading = data?.heading;
this.content = data?.content;
}
}

View File

@ -0,0 +1,8 @@
export default class BuyerDto {
constructor(args) {
this.id = args.id || null;
this.firstName = args.firstName;
this.lastName = args.lastName;
this.email = args.email;
}
}

146
FrontEnd/src/style.css Normal file
View File

@ -0,0 +1,146 @@
html
{
min-height: 100vh;
}
header .img-fluid
{
width:232px;
height:100px;
}
article .img-fluid
{
height:250px;
}
article .img-fluid1
{
height:100%;
width: 96%;
}
.owl
{
width:300px;
}
.pdf-size
{
width:70px;
}
body
{
min-height: 100vh;
}
.body_app
{
display: grid;
grid-template-rows:auto 1fr auto;
min-height: 100vh;
}
.lp
{
padding-left: 30px;
}
.img-school
{
margin-right: 1em;
float: start;
}
.Vnov
{
margin-right: 1em;
}
.Vnov1
{
margin-right: 1em;
}
.Cont
{
}
@media only screen and (max-width: 800px) {
.owl {
display:none;
}
}
@media only screen and (max-width: 1164px) {
.img-school
{
margin-right: 170px;
}
}
@media only screen and (max-width: 554px) {
.img-school
{
height: 20% !important;
width: 75%;
}
}
@media only screen and (max-width: 727px) {
.headers-problem
{
flex-direction: column;
}
.navbar
{
align-items: flex-start !important;
}
}
@media only screen and (max-width: 959px) {
.navbar
{
float:left !important;
}
}
@media only screen and (max-width: 463px) {
.Vnov
{
margin-right: 140px;
}
}
@media only screen and (max-width: 575px) {
.Vnov1
{
margin-right: 200px;
}
}
@media only screen and (max-width: 585px) {
.Cont
{
margin-right: 200px;
}
}
#banner {
margin: 15px;
display: flex;
align-items: center;
flex-direction: column;
}
#banner img {
border-radius: 5px;
}
#banner img.show {
height: 40%;
width: 60%;
opacity: 1;
transition: opacity 1s, visibility 0s;
}
#banner img.hide {
height: 0;
width: 0;
opacity: 0;
visibility: hidden;
transition: opacity 1s, visibility 0s 1s;
}
.Pole_height
{
height: 80px;
}