4 lab front)
This commit is contained in:
parent
e40639a883
commit
ab9181004e
48
FrontEnd/src/App.jsx
Normal file
48
FrontEnd/src/App.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
22
FrontEnd/src/ModalEdit.module.css
Normal file
22
FrontEnd/src/ModalEdit.module.css
Normal 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;
|
||||
}
|
||||
146
FrontEnd/src/components/catalogs/Autorize.jsx
Normal file
146
FrontEnd/src/components/catalogs/Autorize.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
138
FrontEnd/src/components/catalogs/Catalog.jsx
Normal file
138
FrontEnd/src/components/catalogs/Catalog.jsx
Normal 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
23
FrontEnd/src/components/catalogs/MainPage.jsx
Normal file
23
FrontEnd/src/components/catalogs/MainPage.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
62
FrontEnd/src/components/catalogs/News.jsx
Normal file
62
FrontEnd/src/components/catalogs/News.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
161
FrontEnd/src/components/catalogs/Post.jsx
Normal file
161
FrontEnd/src/components/catalogs/Post.jsx
Normal 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>
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
13
FrontEnd/src/components/catalogs/Raspisanie.jsx
Normal file
13
FrontEnd/src/components/catalogs/Raspisanie.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
135
FrontEnd/src/components/catalogs/RezhimRaboty.jsx
Normal file
135
FrontEnd/src/components/catalogs/RezhimRaboty.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
24
FrontEnd/src/components/common/Banner.jsx
Normal file
24
FrontEnd/src/components/common/Banner.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
95
FrontEnd/src/components/common/Card.jsx
Normal file
95
FrontEnd/src/components/common/Card.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
7
FrontEnd/src/components/common/Footer.jsx
Normal file
7
FrontEnd/src/components/common/Footer.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
30
FrontEnd/src/components/common/Header.jsx
Normal file
30
FrontEnd/src/components/common/Header.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
46
FrontEnd/src/components/common/Modal.jsx
Normal file
46
FrontEnd/src/components/common/Modal.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
18
FrontEnd/src/components/common/ModalComment.jsx
Normal file
18
FrontEnd/src/components/common/ModalComment.jsx
Normal 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>
|
||||
)
|
||||
}
|
||||
34
FrontEnd/src/components/common/TableComment.jsx
Normal file
34
FrontEnd/src/components/common/TableComment.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
43
FrontEnd/src/components/common/Toolbar.jsx
Normal file
43
FrontEnd/src/components/common/Toolbar.jsx
Normal 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
10
FrontEnd/src/main.jsx
Normal 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>
|
||||
)
|
||||
9
FrontEnd/src/models/NewDto.js
Normal file
9
FrontEnd/src/models/NewDto.js
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
8
FrontEnd/src/models/UserDto.js
Normal file
8
FrontEnd/src/models/UserDto.js
Normal 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
146
FrontEnd/src/style.css
Normal 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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user