frontend lab4
This commit is contained in:
Nikita Sergeev
parent
5d790b350c
commit
edfa23dd7b
@ -23,7 +23,7 @@ jar {
|
|||||||
into 'static'
|
into 'static'
|
||||||
final devHost = 'http://localhost:8080'
|
final devHost = 'http://localhost:8080'
|
||||||
final prodHost = ''
|
final prodHost = ''
|
||||||
filesMatching('index.html') {
|
filesMatching('DataService.js') {
|
||||||
filter { line -> line.replaceAll(devHost, prodHost) }
|
filter { line -> line.replaceAll(devHost, prodHost) }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
8469
front/package-lock.json
generated
8469
front/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,17 +1,31 @@
|
|||||||
{
|
{
|
||||||
"name": "front",
|
"name": "front",
|
||||||
|
"private": true,
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"source": "src/index.html",
|
"source": "src/index.html",
|
||||||
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "parcel --port 3000",
|
"dev": "vite",
|
||||||
"build": "npm run clean && parcel build",
|
"fake-server": "json-server --watch data.json -p 8079",
|
||||||
|
"start": "npm-run-all --parallel dev ",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"build": "npm run clean && vite build",
|
||||||
"clean": "rimraf dist"
|
"clean": "rimraf dist"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "5.2.3"
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.4.4",
|
||||||
|
"axios": "^1.1.3",
|
||||||
|
"bootstrap": "5.2.3",
|
||||||
|
"@fortawesome/fontawesome-free": "^6.2.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"parcel": "2.8.3",
|
"@types/react": "^18.0.24",
|
||||||
|
"@types/react-dom": "^18.0.8",
|
||||||
|
"vite": "^3.2.3",
|
||||||
|
"@vitejs/plugin-react": "^2.2.0",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
"rimraf": "4.4.0"
|
"rimraf": "4.4.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
1
front/public/favicon.svg
Normal file
1
front/public/favicon.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/></svg>
|
||||||
|
After Width: | Height: | Size: 611 B |
87
front/src/App.css
Normal file
87
front/src/App.css
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
nav {
|
||||||
|
background-color: #c8afaf;
|
||||||
|
}
|
||||||
|
main {
|
||||||
|
background-color: #8c7b7b;
|
||||||
|
min-height: 90vh;
|
||||||
|
}
|
||||||
|
footer {
|
||||||
|
background-color: #c8afaf;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.size {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
.card {
|
||||||
|
background-color: #8c7b7b;
|
||||||
|
border-color: #8c7b7b;
|
||||||
|
}
|
||||||
|
.card-body {
|
||||||
|
background-color: #8c7b7b;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
#banner {
|
||||||
|
margin: 0px 15px 15px 15px;
|
||||||
|
padding-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner img {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
#banner img.show {
|
||||||
|
width: 100%;
|
||||||
|
opacity: 1;
|
||||||
|
transition: opacity 1s, visibility 0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner img.hide {
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
opacity: 0;
|
||||||
|
visibility: hidden;
|
||||||
|
transition: opacity 1s, visibility 0s 1s;
|
||||||
|
}
|
||||||
|
@media (max-width: 767px) {
|
||||||
|
.btn {
|
||||||
|
padding: 1px 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 768px) and (max-width: 991px) {
|
||||||
|
.btn {
|
||||||
|
padding: 5px 10px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.5;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 992px) and (max-width: 1199px) {
|
||||||
|
.btn {
|
||||||
|
padding: 6px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.42857143;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (min-width: 1200px) {
|
||||||
|
.btn {
|
||||||
|
padding: 10px 16px;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 1.3333333;
|
||||||
|
border-radius: 6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.tem {
|
||||||
|
padding-right: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
44
front/src/App.jsx
Normal file
44
front/src/App.jsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import './App.css';
|
||||||
|
import { useRoutes, Outlet, BrowserRouter } from 'react-router-dom';
|
||||||
|
import Header from './components/common/Header';
|
||||||
|
import Footer from "./components/common/Footer";
|
||||||
|
import CatalogStudents from './components/catalogs/CatalogStudents';
|
||||||
|
import Menu from './components/catalogs/Menu';
|
||||||
|
import Basket from './components/catalogs/Basket';
|
||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
function Router(props) {
|
||||||
|
return useRoutes(props.rootRoute);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [product,setProduct] = useState([]);
|
||||||
|
const routes = [
|
||||||
|
{ index: true, element: <CatalogStudents /> },
|
||||||
|
{ path: "catalogs/menu", element: <Menu product={product} setProduct={setProduct}/>, label: "Меню" },
|
||||||
|
{ path: "catalogs/component", element: <CatalogStudents />, label: "Компоненты" },
|
||||||
|
{ path: "catalogs/basket", element: <Basket product={product} setProduct={setProduct}/>, label: "Корзина" }
|
||||||
|
];
|
||||||
|
const links = routes.filter(route => route.hasOwnProperty('label'));
|
||||||
|
const rootRoute = [
|
||||||
|
{ path: '/', element: render(links), children: routes }
|
||||||
|
];
|
||||||
|
|
||||||
|
function render(links) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header links={links} />
|
||||||
|
<div className="container-fluid p-0">
|
||||||
|
<Outlet />
|
||||||
|
</div>
|
||||||
|
<Footer></Footer>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BrowserRouter>
|
||||||
|
<Router rootRoute={ rootRoute } />
|
||||||
|
</BrowserRouter>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,73 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport"
|
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
<title>Компоненты</title>
|
|
||||||
<script type="module" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
||||||
<a class="navbar-brand" href="index.html">Заказы</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="components.html">Компоненты</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="products.html">Продукты</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<form id="form" novalidate>
|
|
||||||
<div class="row mt-3">
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="componentId" class="form-label">ИД компонента</label>
|
|
||||||
<input type="text" class="form-control" id="componentId" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="componentName" class="form-label">Название компонента</label>
|
|
||||||
<input type="text" class="form-control" id="componentName" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="price" class="form-label">Цена</label>
|
|
||||||
<input type="text" class="form-control" id="price" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mt-3">
|
|
||||||
<div class="d-grid col-sm-4 mx-auto">
|
|
||||||
<button type="submit" class="btn btn-success">Добавить</button>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid col-sm-4 mx-auto">
|
|
||||||
<button type="submit" class="btn btn-success" id="btnUpdate" >Обновить</button>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid col-sm-4 mx-auto">
|
|
||||||
<button id="btnRemove" class="btn btn-success">Удалить</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="row table-responsive">
|
|
||||||
<table id="table" class="table mt-3">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">ИД</th>
|
|
||||||
<th scope="col">Название компонента</th>
|
|
||||||
<th scope="col">Цена</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="tbody">
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<script src="scriptComponent.js"></script>
|
|
||||||
</html>
|
|
||||||
15
front/src/components/catalogs/Basket.jsx
Normal file
15
front/src/components/catalogs/Basket.jsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import Table from "../common/TableOrder";
|
||||||
|
export default function Basket(props) {
|
||||||
|
return (
|
||||||
|
<main className="flex-shrink-0" style={{ backgroundColor: "white" }}>
|
||||||
|
<h1 className="my-5 ms-5 fs-1">
|
||||||
|
<b>Корзина</b>
|
||||||
|
</h1>
|
||||||
|
<h2 className="my-5 ms-5 fs-3"></h2>
|
||||||
|
<div className="ms-5 my-5">Список товаров</div>
|
||||||
|
<Table product={props.product} setProduct={props.setProduct}></Table>
|
||||||
|
<p> </p>
|
||||||
|
<p> </p>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
113
front/src/components/catalogs/Catalog.jsx
Normal file
113
front/src/components/catalogs/Catalog.jsx
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import Toolbar from "../common/Toolbar";
|
||||||
|
import Table from "../common/Table";
|
||||||
|
import Modal from "../common/Modal";
|
||||||
|
import DataService from '../../services/DataService';
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
let selectedItems = [];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadItems();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function loadItems() {
|
||||||
|
DataService.readAll(props.getAllUrl, props.transformer)
|
||||||
|
.then(data => setItems(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveItem() {
|
||||||
|
if (!isEdit) {
|
||||||
|
DataService.create(props.getAllUrl, props.data).then(() => loadItems());
|
||||||
|
} else {
|
||||||
|
DataService.update(props.url + props.data.id, props.data).then(() => loadItems());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAdd() {
|
||||||
|
setEdit(false);
|
||||||
|
setModalHeader('Добавление элемента');
|
||||||
|
setModalConfirm('Добавить');
|
||||||
|
setModalVisible(true);
|
||||||
|
props.onAdd();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit() {
|
||||||
|
if (selectedItems.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
edit(selectedItems[0]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function edit(editedId) {
|
||||||
|
DataService.read(props.url + editedId, props.transformer)
|
||||||
|
.then(data => {
|
||||||
|
setEdit(true);
|
||||||
|
setModalHeader('Редактирование элемента');
|
||||||
|
setModalConfirm('Сохранить');
|
||||||
|
setModalVisible(true);
|
||||||
|
props.onEdit(data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRemove() {
|
||||||
|
if (selectedItems.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (confirm('Удалить выбранные элементы?')) {
|
||||||
|
const promises = [];
|
||||||
|
selectedItems.forEach(item => {
|
||||||
|
promises.push(DataService.delete(props.url + item));
|
||||||
|
});
|
||||||
|
Promise.all(promises).then((results) => {
|
||||||
|
selectedItems.length = 0;
|
||||||
|
loadItems();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleTableClick(tableSelectedItems) {
|
||||||
|
selectedItems = tableSelectedItems;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleTableDblClick(tableSelectedItem) {
|
||||||
|
edit(tableSelectedItem);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleModalHide() {
|
||||||
|
setModalVisible(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleModalDone() {
|
||||||
|
saveItem();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toolbar
|
||||||
|
onAdd={handleAdd}
|
||||||
|
onEdit={handleEdit}
|
||||||
|
onRemove={handleRemove}/>
|
||||||
|
<Table
|
||||||
|
headers={props.headers}
|
||||||
|
items={items}
|
||||||
|
selectable={true}
|
||||||
|
onClick={handleTableClick}
|
||||||
|
onDblClick={handleTableDblClick}/>
|
||||||
|
<Modal
|
||||||
|
header={modalHeader}
|
||||||
|
confirm={modalConfirm}
|
||||||
|
visible={modalVisible}
|
||||||
|
onHide={handleModalHide}
|
||||||
|
onDone={handleModalDone}>
|
||||||
|
{props.children}
|
||||||
|
</Modal>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
269
front/src/components/catalogs/CatalogProduct.jsx
Normal file
269
front/src/components/catalogs/CatalogProduct.jsx
Normal file
@ -0,0 +1,269 @@
|
|||||||
|
import { useState, useEffect, Component } from "react";
|
||||||
|
import Toolbar from "../common/ToolbarProduct";
|
||||||
|
import Card from "../common/Card";
|
||||||
|
import ModalProduct from "../common/ModalProduct";
|
||||||
|
import DataService from "../../services/DataService";
|
||||||
|
import Table from "../common/Table";
|
||||||
|
import ToolbarProduct from "../common/Toolbar";
|
||||||
|
|
||||||
|
export default function CatalogProduct(props) {
|
||||||
|
const [items, setItems] = useState([]);
|
||||||
|
const [modalHeader, setModalHeader] = useState("");
|
||||||
|
const [modalConfirm, setModalConfirm] = useState("");
|
||||||
|
const [modalVisible, setModalVisible] = useState(false);
|
||||||
|
const [isEdit, setEdit] = useState(false);
|
||||||
|
const [componentProduct, setComponentProduct] = useState({});
|
||||||
|
useEffect(() => {
|
||||||
|
loadItems();
|
||||||
|
}, []);
|
||||||
|
function loadItems() {
|
||||||
|
DataService.readAll(props.url, props.transformer).then((data) =>{
|
||||||
|
|
||||||
|
setItems(data);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
DataService.readAll(props.url, props.transformer).then((data) =>
|
||||||
|
setItems(data)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectedItems = [];
|
||||||
|
async function saveItem() {
|
||||||
|
if (!isEdit) {
|
||||||
|
await props.set();
|
||||||
|
DataService.create(props.url, props.data).then(() => loadItems());
|
||||||
|
} else {
|
||||||
|
await props.set();
|
||||||
|
DataService.update(props.url + "/" + props.data.id, props.data).then(() =>
|
||||||
|
loadItems()
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleAdd() {
|
||||||
|
setEdit(false);
|
||||||
|
setModalHeader("Добавление элемента");
|
||||||
|
setModalConfirm("Добавить");
|
||||||
|
setModalVisible(true);
|
||||||
|
props.onAdd();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleEdit(id) {
|
||||||
|
if (selectedItems.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setComponentProduct(
|
||||||
|
props.componentProduct.filter((x) => x.id == selectedItems[0])[0]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function edit(editedId) {
|
||||||
|
DataService.read(props.url+ "/" + editedId, props.transformer).then((data) => {
|
||||||
|
for(let i = 0; i < data.componentDTOList.length; i++){
|
||||||
|
props.componentProduct.push(data.componentDTOList[i]);
|
||||||
|
props.setcomponentProduct(props.componentProduct)
|
||||||
|
}
|
||||||
|
setEdit(true);
|
||||||
|
setModalHeader("Редактирование элемента");
|
||||||
|
setModalConfirm("Сохранить");
|
||||||
|
setModalVisible(true);
|
||||||
|
props.onEdit(data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRemove(id, e) {
|
||||||
|
if (selectedItems.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (confirm("Удалить выбранные элементы?")) {
|
||||||
|
const promises = [];
|
||||||
|
selectedItems.forEach((item) => {
|
||||||
|
props.deleteComponents(item);
|
||||||
|
});
|
||||||
|
selectedItems.length = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function handleModalHide() {
|
||||||
|
setModalVisible(false);
|
||||||
|
props.setcomponentProduct([]);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleModalDone() {
|
||||||
|
saveItem();
|
||||||
|
}
|
||||||
|
async function handleAddComponent() {
|
||||||
|
if (
|
||||||
|
props.componentProduct.filter((x) => x.id == componentProduct.id)
|
||||||
|
.length != 0
|
||||||
|
) {
|
||||||
|
await props.updateComponents(componentProduct, isEdit);
|
||||||
|
setComponentProduct({});
|
||||||
|
let count = 0;
|
||||||
|
for (let i = 0; i < props.componentProduct.length; i++) {
|
||||||
|
count +=
|
||||||
|
props.componentProduct[i].price * props.componentProduct[i].count;
|
||||||
|
}
|
||||||
|
props.data.price = count;
|
||||||
|
|
||||||
|
if(isEdit){
|
||||||
|
await props.setprice(count);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
props.componentProduct.push(componentProduct);
|
||||||
|
await props.setcomponentProduct(props.componentProduct);
|
||||||
|
setComponentProduct({});
|
||||||
|
let count = 0;
|
||||||
|
for (let i = 0; i < props.componentProduct.length; i++) {
|
||||||
|
count +=
|
||||||
|
props.componentProduct[i].price * props.componentProduct[i].count;
|
||||||
|
}
|
||||||
|
props.data.price = count;
|
||||||
|
}
|
||||||
|
function handleRemoveProduct(id) {
|
||||||
|
if (confirm("Удалить выбранные элементы?")) {
|
||||||
|
DataService.delete(props.url + "/" + id).then(() => {
|
||||||
|
loadItems();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function handleFormChangeComponent(event) {
|
||||||
|
if (event.target.id === "componentName") {
|
||||||
|
setComponentProduct({
|
||||||
|
...componentProduct,
|
||||||
|
["id"]: event.target.value,
|
||||||
|
["componentName"]: props.component
|
||||||
|
.filter((x) => x.id == event.target.value)
|
||||||
|
.map((x) => x.componentName)[0],
|
||||||
|
["price"]: props.component
|
||||||
|
.filter((x) => x.id == event.target.value)
|
||||||
|
.map((x) => x.price)[0],
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setComponentProduct({
|
||||||
|
...componentProduct,
|
||||||
|
[event.target.id]: Number(event.target.value),
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const [imageURL, setImageURL] = useState();
|
||||||
|
const fileReader = new FileReader();
|
||||||
|
fileReader.onloadend = () => {
|
||||||
|
const tempval = fileReader.result;
|
||||||
|
setImageURL(tempval);
|
||||||
|
props.setData(tempval);
|
||||||
|
};
|
||||||
|
function handleOnChange(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const file = event.target.files[0];
|
||||||
|
fileReader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
function handleTableClick(tableSelectedItems) {
|
||||||
|
selectedItems = tableSelectedItems;
|
||||||
|
}
|
||||||
|
function handleTableDblClick(tableSelectedItem) {
|
||||||
|
setComponentProduct(
|
||||||
|
props.componentProduct.filter((x) => x.id == tableSelectedItem)[0]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Toolbar onAdd={handleAdd} />
|
||||||
|
<Card items={items} onEdit={edit} onRemove={handleRemoveProduct} product={props.product} setProduct={props.setProduct}/>
|
||||||
|
<ModalProduct
|
||||||
|
header={modalHeader}
|
||||||
|
confirm={modalConfirm}
|
||||||
|
visible={modalVisible}
|
||||||
|
onHide={handleModalHide}
|
||||||
|
onDone={handleModalDone}
|
||||||
|
>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="name" className="form-label">
|
||||||
|
Название продукта
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="name"
|
||||||
|
className="form-control"
|
||||||
|
required
|
||||||
|
value={props.data.name}
|
||||||
|
onChange={props.handleFormChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="price" className="form-label">
|
||||||
|
Цена
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="price"
|
||||||
|
className="form-control"
|
||||||
|
required
|
||||||
|
value={props.data.price}
|
||||||
|
onChange={props.handleFormChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="col-mb-3">
|
||||||
|
<label className="form-label" htmlFor="picture">
|
||||||
|
Изображение
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
className="form-control"
|
||||||
|
id="picture"
|
||||||
|
type="file"
|
||||||
|
accept="image/jpeg, image/png, image/jpg"
|
||||||
|
value=""
|
||||||
|
onChange={handleOnChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="groupId" className="form-label">
|
||||||
|
Компонент
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="componentName"
|
||||||
|
className="form-select"
|
||||||
|
required
|
||||||
|
value={componentProduct.id}
|
||||||
|
onChange={handleFormChangeComponent}
|
||||||
|
>
|
||||||
|
<option disabled value="">
|
||||||
|
Укажите группу
|
||||||
|
</option>
|
||||||
|
{props.component.map((group) => (
|
||||||
|
<option key={group.id} value={group.id}>
|
||||||
|
{group.componentName}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
<label htmlFor="count" className="form-label">
|
||||||
|
Количество
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="count"
|
||||||
|
className="form-control"
|
||||||
|
required
|
||||||
|
value={componentProduct.count ?? 0}
|
||||||
|
onChange={handleFormChangeComponent}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<ToolbarProduct
|
||||||
|
onAdd={handleAddComponent}
|
||||||
|
onEdit={handleEdit}
|
||||||
|
onRemove={handleRemove}
|
||||||
|
/>
|
||||||
|
<Table
|
||||||
|
headers={props.catalogStudHeaders}
|
||||||
|
items={props.componentProduct}
|
||||||
|
allItems={props.component}
|
||||||
|
selectable={true}
|
||||||
|
onClick={handleTableClick}
|
||||||
|
onDblClick={handleTableDblClick}
|
||||||
|
/>
|
||||||
|
</ModalProduct>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
52
front/src/components/catalogs/CatalogStudents.jsx
Normal file
52
front/src/components/catalogs/CatalogStudents.jsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import Catalog from './Catalog';
|
||||||
|
import Component from '../../models/Component';
|
||||||
|
import DataService from '../../services/DataService';
|
||||||
|
|
||||||
|
export default function CatalogStudents(props) {
|
||||||
|
const getAllUrl = '/component';
|
||||||
|
const url = '/component/';
|
||||||
|
const transformer = (data) => new Component(data);
|
||||||
|
const catalogStudHeaders = [
|
||||||
|
{ name: 'componentName', label: 'Название компонента' },
|
||||||
|
{ name: 'price', label: 'Цена' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const [data, setData] = useState(new Component());
|
||||||
|
|
||||||
|
function handleOnAdd() {
|
||||||
|
setData(new Component());
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleOnEdit(data) {
|
||||||
|
setData(new Component(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFormChange(event) {
|
||||||
|
setData({ ...data, [event.target.id]: event.target.value })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="flex-shrink-0" style={{ backgroundColor: "white" }}>
|
||||||
|
<Catalog
|
||||||
|
headers={catalogStudHeaders}
|
||||||
|
getAllUrl={getAllUrl}
|
||||||
|
url={url}
|
||||||
|
transformer={transformer}
|
||||||
|
data={data}
|
||||||
|
onAdd={handleOnAdd}
|
||||||
|
onEdit={handleOnEdit}>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="componentName" className="form-label">Название компонента</label>
|
||||||
|
<input type="text" id="componentName" className="form-control" required
|
||||||
|
value={data.componentName} onChange={handleFormChange}/>
|
||||||
|
</div>
|
||||||
|
<div className="mb-3">
|
||||||
|
<label htmlFor="price" className="form-label">Цена</label>
|
||||||
|
<input type="text" id="price" className="form-control" required
|
||||||
|
value={data.price} onChange={handleFormChange}/>
|
||||||
|
</div>
|
||||||
|
</Catalog>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
112
front/src/components/catalogs/Menu.jsx
Normal file
112
front/src/components/catalogs/Menu.jsx
Normal file
@ -0,0 +1,112 @@
|
|||||||
|
import { useState, useEffect, Component } from "react";
|
||||||
|
import CatalogProduct from "./CatalogProduct";
|
||||||
|
import Product from "../../models/Product";
|
||||||
|
import Components from "../../models/Component";
|
||||||
|
import DataService from "../../services/DataService";
|
||||||
|
export default function Menu(props) {
|
||||||
|
const url = "/product";
|
||||||
|
const categoryUrl = "/component";
|
||||||
|
const transformer = (data) => new Product(data);
|
||||||
|
const catalogStudHeaders = [
|
||||||
|
{ name: "componentName", label: "Название компонента" },
|
||||||
|
{ name: "count", label: "Количество" },
|
||||||
|
];
|
||||||
|
const [data, setData] = useState(new Product());
|
||||||
|
const [component, setComponent] = useState([]);
|
||||||
|
const [componentProduct, setComponentProduct] = useState([]);
|
||||||
|
useEffect(() => {
|
||||||
|
DataService.readAll(categoryUrl, (data) => new Components(data)).then(
|
||||||
|
(data) => setComponent(data)
|
||||||
|
);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function handleOnAdd() {
|
||||||
|
setData(new Product());
|
||||||
|
setComponentProduct([]);
|
||||||
|
}
|
||||||
|
function handleOnEdit(data) {
|
||||||
|
setData(new Product(data));
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFormChange(event) {
|
||||||
|
setData({ ...data, [event.target.id]: event.target.value });
|
||||||
|
}
|
||||||
|
const [imageURL, setImageURL] = useState();
|
||||||
|
const fileReader = new FileReader();
|
||||||
|
fileReader.onloadend = () => {
|
||||||
|
const tempval = fileReader.result;
|
||||||
|
setImageURL(tempval);
|
||||||
|
setData({ ...data, ["picture"]: tempval });
|
||||||
|
};
|
||||||
|
function handleOnChange(event) {
|
||||||
|
event.preventDefault();
|
||||||
|
const file = event.target.files[0];
|
||||||
|
fileReader.readAsDataURL(file);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleUpdateComponents(value, bool) {
|
||||||
|
if (bool) {
|
||||||
|
let temp = data.componentDTOList.filter((x) => x.id != value.id);
|
||||||
|
data.componentDTOList = [];
|
||||||
|
for (let i = 0; i < temp.length; i++) {
|
||||||
|
data.componentDTOList.push(temp[i]);
|
||||||
|
}
|
||||||
|
data.componentDTOList.push(value);
|
||||||
|
setData(data);
|
||||||
|
}
|
||||||
|
setComponentProduct(
|
||||||
|
componentProduct.map((obj) => {
|
||||||
|
if (obj.id == value.id) {
|
||||||
|
return { ...obj, count: value.count };
|
||||||
|
} else {
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
function setDataa(value) {
|
||||||
|
setData({ ...data, ["image"]: value });
|
||||||
|
}
|
||||||
|
function setComponents() {
|
||||||
|
data.componentDTOList = [];
|
||||||
|
for (let i = 0; i < componentProduct.length; i++) {
|
||||||
|
data.componentDTOList.push(componentProduct[i]);
|
||||||
|
}
|
||||||
|
setData(data);
|
||||||
|
}
|
||||||
|
function handleDeleteComponents(value) {
|
||||||
|
setComponentProduct(componentProduct.filter((x) => x.id !== value));
|
||||||
|
}
|
||||||
|
function setprice(value){
|
||||||
|
let count = 0;
|
||||||
|
for (let i = 0; i < data.componentDTOList.length; i++) {
|
||||||
|
count +=
|
||||||
|
data.componentDTOList[i].price * data.componentDTOList[i].count;
|
||||||
|
}
|
||||||
|
data.price = count;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<main className="flex-shrink-0">
|
||||||
|
<CatalogProduct
|
||||||
|
url={url}
|
||||||
|
transformer={transformer}
|
||||||
|
data={data}
|
||||||
|
onAdd={handleOnAdd}
|
||||||
|
onEdit={handleOnEdit}
|
||||||
|
handleFormChange={handleFormChange}
|
||||||
|
handleOnChange={handleOnChange}
|
||||||
|
component={component}
|
||||||
|
catalogStudHeaders={catalogStudHeaders}
|
||||||
|
componentProduct={componentProduct}
|
||||||
|
setcomponentProduct={setComponentProduct}
|
||||||
|
updateComponents={handleUpdateComponents}
|
||||||
|
deleteComponents={handleDeleteComponents}
|
||||||
|
setData={setDataa}
|
||||||
|
set={setComponents}
|
||||||
|
setprice={setprice}
|
||||||
|
product={props.product}
|
||||||
|
setProduct={props.setProduct}
|
||||||
|
/>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
73
front/src/components/common/Card.jsx
Normal file
73
front/src/components/common/Card.jsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import DataService from "../../services/DataService";
|
||||||
|
export default function Card(props) {
|
||||||
|
function edit(id) {
|
||||||
|
props.onEdit(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove(id) {
|
||||||
|
props.onRemove(id);
|
||||||
|
}
|
||||||
|
async function mess(id){
|
||||||
|
let currentProduct = props.product.filter(x => x.id == id.id);
|
||||||
|
if (currentProduct.length != 0){
|
||||||
|
let temp = props.product.filter(x => x.id != id.id);
|
||||||
|
currentProduct[0].count++;
|
||||||
|
temp.push(currentProduct[0]);
|
||||||
|
await props.setProduct(temp);
|
||||||
|
return;
|
||||||
|
}else{
|
||||||
|
id.count++;
|
||||||
|
props.product.push(id);
|
||||||
|
props.setProduct(props.product);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="temp row row-cols-1 row-cols-md-3 g-4" id="tbl-items">
|
||||||
|
{props.items.map((item) => (
|
||||||
|
<div className="col" key={item.id}>
|
||||||
|
<div className="card">
|
||||||
|
<div
|
||||||
|
className="container"
|
||||||
|
style={{ width: "100%", height: "350px" }}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={item["image"]}
|
||||||
|
className="img-fluid rounded mx-auto d-block"
|
||||||
|
style={{ width: "100%", height: "350px", objectFit: "contain" }}
|
||||||
|
alt="Бугер"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="card-body">
|
||||||
|
<h5 className="card-title text-center fs-1">{item["price"]}</h5>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="btn btn-outline-dark text-center d-flex justify-content-md-center mx-5"
|
||||||
|
onClick={(e) => remove(item.id, e)}
|
||||||
|
>
|
||||||
|
Удалить
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-dark text-center d-flex justify-content-md-center mx-5"
|
||||||
|
data-bs-toggle="modal"
|
||||||
|
data-bs-target="#staticBackdrop"
|
||||||
|
onClick={(e) => edit(item.id, e)}
|
||||||
|
>
|
||||||
|
Изменить
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
type="button"
|
||||||
|
className="btn btn-outline-dark text-center d-flex justify-content-md-center mx-5"
|
||||||
|
onClick={()=>mess(item)}
|
||||||
|
>
|
||||||
|
в корзину
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
8
front/src/components/common/Footer.jsx
Normal file
8
front/src/components/common/Footer.jsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export default function Footer(props) {
|
||||||
|
return (
|
||||||
|
<footer className="footer mt-auto d-flex justify-content-center align-items-center">
|
||||||
|
ООО "Вкусно" © 2022
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
35
front/src/components/common/Header.jsx
Normal file
35
front/src/components/common/Header.jsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
|
||||||
|
export default function Header(props) {
|
||||||
|
return (
|
||||||
|
<nav className="navbar navbar-expand-lg">
|
||||||
|
<div className="container-fluid">
|
||||||
|
<NavLink className="navbar-brand" to={"/"}>
|
||||||
|
<h1>Очень вкусно и запятая</h1>
|
||||||
|
</NavLink>
|
||||||
|
<button
|
||||||
|
className="navbar-toggler"
|
||||||
|
type="button"
|
||||||
|
data-bs-toggle="collapse"
|
||||||
|
data-bs-target="#navbarSupportedContent"
|
||||||
|
aria-controls="navbarSupportedContent"
|
||||||
|
aria-expanded="false"
|
||||||
|
aria-label="Toggle navigation"
|
||||||
|
>
|
||||||
|
<span className="navbar-toggler-icon"></span>
|
||||||
|
</button>
|
||||||
|
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
||||||
|
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
|
||||||
|
{props.links.map((route) => (
|
||||||
|
<li key={route.path} className="nav-item">
|
||||||
|
<NavLink className="nav-link fs-4" to={route.path}>
|
||||||
|
{route.label}
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
}
|
||||||
46
front/src/components/common/Modal.jsx
Normal file
46
front/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>
|
||||||
|
);
|
||||||
|
}
|
||||||
46
front/src/components/common/ModalProduct.jsx
Normal file
46
front/src/components/common/ModalProduct.jsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function ModalProduct(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>
|
||||||
|
);
|
||||||
|
}
|
||||||
73
front/src/components/common/Table.jsx
Normal file
73
front/src/components/common/Table.jsx
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import styles from './Table.module.css';
|
||||||
|
|
||||||
|
export default function Table(props) {
|
||||||
|
const [tableUpdate, setTableUpdate] = useState(false);
|
||||||
|
const [selectedItems, setSelectedItems] = useState([]);
|
||||||
|
|
||||||
|
function isSelected(id) {
|
||||||
|
if (!props.selectable) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return selectedItems.includes(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
function click(id) {
|
||||||
|
if (!props.selectable) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (isSelected(id)) {
|
||||||
|
var index = selectedItems.indexOf(id);
|
||||||
|
if (index !== -1) {
|
||||||
|
selectedItems.splice(index, 1);
|
||||||
|
setSelectedItems(selectedItems);
|
||||||
|
setTableUpdate(!tableUpdate);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
selectedItems.push(id);
|
||||||
|
setSelectedItems(selectedItems);
|
||||||
|
setTableUpdate(!tableUpdate);
|
||||||
|
}
|
||||||
|
props.onClick(selectedItems);
|
||||||
|
}
|
||||||
|
|
||||||
|
function dblClick(id) {
|
||||||
|
if (!props.selectable) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
props.onDblClick(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<table className={`table table-hover ${styles.table} ${props.selectable ? styles.selectable : ''}`}>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
{
|
||||||
|
props.headers.map(header =>
|
||||||
|
<th key={header.name} scope="col">
|
||||||
|
{header.label}
|
||||||
|
</th>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{
|
||||||
|
props.items.map((item, index) =>
|
||||||
|
<tr key={item.id}
|
||||||
|
className={isSelected(item.id) ? styles.selected : ''}
|
||||||
|
onClick={(e) => click(item.id, e)} onDoubleClick={(e) => dblClick(item.id, e)}>
|
||||||
|
<th scope="row">{index + 1}</th>
|
||||||
|
{
|
||||||
|
props.headers.map(header =>
|
||||||
|
<td key={item.id + header.name}>{item[header.name]}</td>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</tbody >
|
||||||
|
</table >
|
||||||
|
);
|
||||||
|
}
|
||||||
12
front/src/components/common/Table.module.css
Normal file
12
front/src/components/common/Table.module.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
.table tbody tr {
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectable tbody tr:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected {
|
||||||
|
background-color: #0d6efd;
|
||||||
|
opacity: 80%;
|
||||||
|
}
|
||||||
97
front/src/components/common/TableOrder.jsx
Normal file
97
front/src/components/common/TableOrder.jsx
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
import { useEffect } from "react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import DataService from "../../services/DataService";
|
||||||
|
import Order from "../../models/Order";
|
||||||
|
|
||||||
|
export default function TableOrder(props) {
|
||||||
|
const [order, setOrder] = useState(new Order())
|
||||||
|
const [cost, setCost] = useState(0);
|
||||||
|
const [del, setDel] = useState(false);
|
||||||
|
useEffect(() => {
|
||||||
|
loadItems();
|
||||||
|
}, []);
|
||||||
|
useEffect(() => {
|
||||||
|
loadItems();
|
||||||
|
setDel(false);
|
||||||
|
}, [del]);
|
||||||
|
async function loadItems() {
|
||||||
|
await summ(props.product.sort((a, b) => a.name > b.name ? 1 : -1));
|
||||||
|
|
||||||
|
setOrder({...order,["productDTOList"]: props.product, ["price"]:cost});
|
||||||
|
}
|
||||||
|
async function summ(data) {
|
||||||
|
let tem = 0;
|
||||||
|
for (let i = 0; i < data.length; i++) {
|
||||||
|
tem += data[i].count * Number(data[i].price);
|
||||||
|
}
|
||||||
|
setCost(tem);
|
||||||
|
setOrder({...order,["price"]: tem});
|
||||||
|
}
|
||||||
|
async function deleteItem(item) {
|
||||||
|
let currentProduct = props.product.filter((x) => x.id == item.id)[0];
|
||||||
|
let temp = props.product.filter((x) => x.id != item.id);
|
||||||
|
if (currentProduct.count - 1 == 0) {
|
||||||
|
props.setProduct(temp);
|
||||||
|
setDel(true);
|
||||||
|
loadItems();
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
currentProduct.count--;
|
||||||
|
temp.push(currentProduct);
|
||||||
|
props.setProduct(temp);
|
||||||
|
setDel(true);
|
||||||
|
loadItems();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
async function needWait(){
|
||||||
|
setOrder({...order, ["price"]:cost});
|
||||||
|
}
|
||||||
|
async function acceptOrder(){
|
||||||
|
await needWait();
|
||||||
|
|
||||||
|
await DataService.create("/order",order ).then(data => {
|
||||||
|
props.setProduct([]);
|
||||||
|
setCost(0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div style={{ maxWidth: "35%" }}>
|
||||||
|
<table className="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">#</th>
|
||||||
|
<th scope="col">Позиция</th>
|
||||||
|
<th scope="col"> </th>
|
||||||
|
<th scope="col">Стоимость</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="table-group-divider">
|
||||||
|
{props.product.map((item, index) => (
|
||||||
|
<tr key={item.id}>
|
||||||
|
<th scope="row">{index + 1}</th>
|
||||||
|
<td colSpan="2">{item.name}</td>
|
||||||
|
<td>
|
||||||
|
{item.count}x{item.price} руб
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<button onClick={() => deleteItem(item)}>Удалить</button>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<h2 className="ms-5 my-5">Итого: {cost} руб</h2>
|
||||||
|
<button
|
||||||
|
className="btn btn-success ms-5 w-25"
|
||||||
|
type="button"
|
||||||
|
style={{ color: "black" }}
|
||||||
|
onClick={acceptOrder}
|
||||||
|
>
|
||||||
|
Купить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
29
front/src/components/common/Toolbar.jsx
Normal file
29
front/src/components/common/Toolbar.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import styles from './Toolbar.module.css';
|
||||||
|
|
||||||
|
export default function Toolbar(props) {
|
||||||
|
function add() {
|
||||||
|
props.onAdd();
|
||||||
|
}
|
||||||
|
|
||||||
|
function edit() {
|
||||||
|
props.onEdit();
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove() {
|
||||||
|
props.onRemove();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="btn-group mt-2" role="group">
|
||||||
|
<button type="button" className={`btn btn-outline-dark text-center d-flex justify-content-md-center mx-2 mb-3`} onClick={add}>
|
||||||
|
Добавить
|
||||||
|
</button>
|
||||||
|
<button type="button" className={`btn btn-outline-dark text-center d-flex justify-content-md-center mx-2 mb-3`} onClick={edit} >
|
||||||
|
Изменить
|
||||||
|
</button >
|
||||||
|
<button type="button" className={`btn btn-outline-dark text-center d-flex justify-content-md-center mx-2 mb-3`} onClick={remove}>
|
||||||
|
Удалить
|
||||||
|
</button >
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
}
|
||||||
3
front/src/components/common/Toolbar.module.css
Normal file
3
front/src/components/common/Toolbar.module.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.btn {
|
||||||
|
min-width: 140px;
|
||||||
|
}
|
||||||
17
front/src/components/common/ToolbarProduct.jsx
Normal file
17
front/src/components/common/ToolbarProduct.jsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
export default function ToolbarProduct(props) {
|
||||||
|
function add() {
|
||||||
|
props.onAdd();
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="btn-group mt-2" role="group">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className={`btn btn-outline-dark text-center d-flex justify-content-md-center mx-5 mb-3`}
|
||||||
|
onClick={add}
|
||||||
|
>
|
||||||
|
Добавить
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport"
|
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
<title>Заказы</title>
|
|
||||||
<script type="module" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
||||||
<a class="navbar-brand" href="index.html">Заказы</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="components.html">Компоненты</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="products.html">Продукты</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<form id="form" novalidate>
|
|
||||||
<div class="row mt-3">
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="orderId" class="form-label">ИД Заказа</label>
|
|
||||||
<input type="text" class="form-control" id="orderId" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="orderDate" class="form-label">Время оформления</label>
|
|
||||||
<input type="text" class="form-control" id="orderDate" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="orderPrice" class="form-label">Цена</label>
|
|
||||||
<input type="text" class="form-control" id="orderPrice" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="productId" class="form-label">ИД продукта</label>
|
|
||||||
<input type="text" class="form-control" id="productId" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="productCount" class="form-label">Количество продукта</label>
|
|
||||||
<input type="text" class="form-control" id="productCount" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mt-3">
|
|
||||||
<div class="d-grid col-sm-4 mx-auto">
|
|
||||||
<button type="submit" class="btn btn-success">Добавить</button>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid col-sm-4 mx-auto">
|
|
||||||
<button type="submit" class="btn btn-success" id="btnUpdate" >Обновить</button>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid col-sm-4 mx-auto">
|
|
||||||
<button id="btnRemove" class="btn btn-success">Удалить</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="row table-responsive">
|
|
||||||
<table class="table mt-3">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">ИД</th>
|
|
||||||
<th scope="col">Дата оформления</th>
|
|
||||||
<th scope="col">Цена</th>
|
|
||||||
<th scope="col">Продукты</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="tbody">
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<script src="scriptOrder.js"/>
|
|
||||||
</html>
|
|
||||||
8
front/src/main.jsx
Normal file
8
front/src/main.jsx
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom/client'
|
||||||
|
import App from './App'
|
||||||
|
import './style.css'
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('app')).render(
|
||||||
|
<App />
|
||||||
|
)
|
||||||
7
front/src/models/Component.js
Normal file
7
front/src/models/Component.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export default class Component {
|
||||||
|
constructor(data) {
|
||||||
|
this.id = data?.id;
|
||||||
|
this.price = data?.price || "";
|
||||||
|
this.componentName = data?.componentName || "";
|
||||||
|
}
|
||||||
|
}
|
||||||
8
front/src/models/Order.js
Normal file
8
front/src/models/Order.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
export default class Order {
|
||||||
|
constructor(data) {
|
||||||
|
this.id = data?.id;
|
||||||
|
this.date = data?.date || "";
|
||||||
|
this.price = data?.price || 0;
|
||||||
|
this.productDTOList = data?.productDTOList || [];
|
||||||
|
}
|
||||||
|
}
|
||||||
10
front/src/models/Product.js
Normal file
10
front/src/models/Product.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export default class Product {
|
||||||
|
constructor(data) {
|
||||||
|
this.id = data?.id;
|
||||||
|
this.price = data?.price || "";
|
||||||
|
this.name = data?.name || "";
|
||||||
|
this.count = data?.count || 0;
|
||||||
|
this.image = data?.image || "";
|
||||||
|
this.componentDTOList = data?.componentDTOList || [];
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,82 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="ru">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport"
|
|
||||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
||||||
<title>Продукты</title>
|
|
||||||
<script type="module" src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
|
||||||
<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
||||||
<a class="navbar-brand" href="index.html">Заказы</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="components.html">Компоненты</a>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<a class="nav-link" href="products.html">Продукты</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<form id="form" novalidate>
|
|
||||||
<div class="row mt-3">
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="productId" class="form-label">ИД продукта</label>
|
|
||||||
<input type="text" class="form-control" id="productId" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="productName" class="form-label">Название продукта</label>
|
|
||||||
<input type="text" class="form-control" id="productName" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="productPrice" class="form-label">Цена</label>
|
|
||||||
<input type="text" class="form-control" id="productPrice" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="componentId" class="form-label">ИД компонента</label>
|
|
||||||
<input type="text" class="form-control" id="componentId" required>
|
|
||||||
</div>
|
|
||||||
<div class="col-sm-4">
|
|
||||||
<label for="componentCount" class="form-label">Количество компонента</label>
|
|
||||||
<input type="text" class="form-control" id="componentCount" required>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mt-3">
|
|
||||||
<div class="d-grid col-sm-4 mx-auto">
|
|
||||||
<button type="submit" class="btn btn-success">Добавить</button>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid col-sm-4 mx-auto">
|
|
||||||
<button type="submit" class="btn btn-success" id="btnUpdate" >Обновить</button>
|
|
||||||
</div>
|
|
||||||
<div class="d-grid col-sm-4 mx-auto">
|
|
||||||
<button id="btnRemove" class="btn btn-success">Удалить</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="row table-responsive">
|
|
||||||
<table id="table" class="table mt-3">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th scope="col">ИД</th>
|
|
||||||
<th scope="col">Название продукта</th>
|
|
||||||
<th scope="col">Цена</th>
|
|
||||||
<th scope="col">Компоненты</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="tbody">
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
<script src="scriptProduct.js"/>
|
|
||||||
</html>
|
|
||||||
@ -1,100 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const host = "http://localhost:8080";
|
|
||||||
const table = document.getElementById("tbody");
|
|
||||||
const form = document.getElementById("form");
|
|
||||||
const componentNameInput = document.getElementById("componentName");
|
|
||||||
const priceInput = document.getElementById("price");
|
|
||||||
const componentIdInput = document.getElementById("componentId");
|
|
||||||
const buttonRemove = document.getElementById("btnRemove");
|
|
||||||
const buttonUpdate = document.getElementById("btnUpdate");
|
|
||||||
const getData = async function () {
|
|
||||||
table.innerHTML = "";
|
|
||||||
const response = await fetch(host + "/component");
|
|
||||||
const data = await response.json();
|
|
||||||
data.forEach(Component => {
|
|
||||||
table.innerHTML +=
|
|
||||||
`<tr>
|
|
||||||
<th scope="row" id="componentId">${Component.id}</th>
|
|
||||||
<td>${Component.componentName}</td>
|
|
||||||
<td>${Component.price}</td>
|
|
||||||
</tr>`;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const create = async function (price, componentName) {
|
|
||||||
const requestParams = {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const response = await fetch(host + `/component?price=${price}&name=${componentName}`, requestParams);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
const remove = async function (){
|
|
||||||
console.info('Try to remove item');
|
|
||||||
if (componentIdInput.value !== 0) {
|
|
||||||
if (!confirm('Do you really want to remove this item?')) {
|
|
||||||
console.info('Canceled');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const requestParams = {
|
|
||||||
method: "DELETE",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const response = await fetch(host + `/component/` + componentIdInput.value, requestParams);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
const update = async function (){
|
|
||||||
console.info('Try to update item');
|
|
||||||
if (componentIdInput.value === 0 || componentNameInput.value == null || priceInput.value === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const requestParams = {
|
|
||||||
method: "PUT",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const response = await fetch(host + `/component/${componentIdInput.value}?price=${priceInput.value}&name=${componentNameInput.value}`, requestParams);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
buttonRemove.addEventListener('click', function (event){
|
|
||||||
event.preventDefault();
|
|
||||||
remove().then((result) => {
|
|
||||||
getData()
|
|
||||||
componentIdInput.value = "";
|
|
||||||
priceInput.value = "";
|
|
||||||
componentNameInput.value = "";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
buttonUpdate.addEventListener('click', function (event){
|
|
||||||
event.preventDefault();
|
|
||||||
update().then((result) => {
|
|
||||||
getData()
|
|
||||||
componentIdInput.value = "";
|
|
||||||
priceInput.value = "";
|
|
||||||
componentNameInput.value = "";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
form.addEventListener("submit", function (event) {
|
|
||||||
event.preventDefault();
|
|
||||||
create(priceInput.value, componentNameInput.value).then((result) => {
|
|
||||||
getData();
|
|
||||||
priceInput.value = "";
|
|
||||||
componentNameInput.value = "";
|
|
||||||
alert(`Component[id=${result.id}, price=${result.price}, componentName=${result.componentName}]`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
getData();
|
|
||||||
});
|
|
||||||
@ -1,113 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const host = "http://localhost:8080";
|
|
||||||
const table = document.getElementById("tbody");
|
|
||||||
const form = document.getElementById("form");
|
|
||||||
const orderIdInput = document.getElementById("orderId");
|
|
||||||
const orderDate = document.getElementById("orderDate");
|
|
||||||
const priceInput = document.getElementById("orderPrice");
|
|
||||||
const productIdInput = document.getElementById("productId");
|
|
||||||
const productCountInput = document.getElementById("productCount");
|
|
||||||
const buttonRemove = document.getElementById("btnRemove");
|
|
||||||
const buttonUpdate = document.getElementById("btnUpdate");
|
|
||||||
|
|
||||||
const getData = async function () {
|
|
||||||
|
|
||||||
table.innerHTML = "";
|
|
||||||
const response = await fetch(host + "/order");
|
|
||||||
const data = await response.json();
|
|
||||||
data.forEach(Order => {
|
|
||||||
let temp = "<select>";
|
|
||||||
Order.productDTOList.forEach(Product => {
|
|
||||||
temp += `<option>${Product.productName + " " + Product.count}</option>>`
|
|
||||||
})
|
|
||||||
temp += "</select>"
|
|
||||||
table.innerHTML +=
|
|
||||||
`<tr>
|
|
||||||
<th scope="row">${Order.id}</th>
|
|
||||||
<td>${Order.date}</td>
|
|
||||||
<td>${Order.price}</td>
|
|
||||||
<td>${temp}</td>
|
|
||||||
</tr>`;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const create = async function () {
|
|
||||||
const requestParams = {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let temp = Date.now();
|
|
||||||
let time = new Date(temp);
|
|
||||||
let tru = time.toString();
|
|
||||||
const response = await fetch(host + `/order?price=${priceInput.value}&date=${tru}&count=${productCountInput.value}&prod=${productIdInput.value}`, requestParams);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
const remove = async function (){
|
|
||||||
console.info('Try to remove item');
|
|
||||||
if (orderIdInput.value !== 0) {
|
|
||||||
if (!confirm('Do you really want to remove this item?')) {
|
|
||||||
console.info('Canceled');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const requestParams = {
|
|
||||||
method: "DELETE",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const response = await fetch(host + `/order/` + orderIdInput.value, requestParams);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
const update = async function (){
|
|
||||||
console.info('Try to update item');
|
|
||||||
if (orderIdInput.value === 0 || orderDate.value == null || orderPrice.value === 0 || productIdInput.value === 0 || productCountInput.value === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const requestParams = {
|
|
||||||
method: "PUT",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
let temp = Date.now();
|
|
||||||
let time = new Date(temp);
|
|
||||||
let tru = time.toString();
|
|
||||||
const response = await fetch(host + `/order/${orderIdInput.value}?price=${priceInput.value}&date=${tru}&count=${productCountInput.value}&prod=${productIdInput.value}`, requestParams);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
buttonRemove.addEventListener('click', function (event){
|
|
||||||
event.preventDefault();
|
|
||||||
remove().then((result) => {
|
|
||||||
getData()
|
|
||||||
orderIdInput.value = "";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
buttonUpdate.addEventListener('click', function (event){
|
|
||||||
event.preventDefault();
|
|
||||||
update().then((result) => {
|
|
||||||
getData()
|
|
||||||
orderIdInput.value = "";
|
|
||||||
priceInput.value = "";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
form.addEventListener("submit", function (event) {
|
|
||||||
event.preventDefault();
|
|
||||||
create().then((result) => {
|
|
||||||
getData();
|
|
||||||
priceInput.value = "";
|
|
||||||
orderIdInput.value = "";
|
|
||||||
alert(`Component[id=${result.id}, price=${result.price}, componentName=${result.date}]`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
getData();
|
|
||||||
});
|
|
||||||
@ -1,106 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
|
|
||||||
window.addEventListener('DOMContentLoaded', function () {
|
|
||||||
const host = "http://localhost:8080";
|
|
||||||
const table = document.getElementById("tbody");
|
|
||||||
const form = document.getElementById("form");
|
|
||||||
const productIdInpit = document.getElementById("productId");
|
|
||||||
const productNameInput = document.getElementById("productName");
|
|
||||||
const priceInput = document.getElementById("productPrice");
|
|
||||||
const componentIdInput = document.getElementById("componentId");
|
|
||||||
const componentCountInput = document.getElementById("componentCount");
|
|
||||||
const buttonRemove = document.getElementById("btnRemove");
|
|
||||||
const buttonUpdate = document.getElementById("btnUpdate");
|
|
||||||
const getData = async function () {
|
|
||||||
|
|
||||||
table.innerHTML = "";
|
|
||||||
const response = await fetch(host + "/product");
|
|
||||||
const data = await response.json();
|
|
||||||
data.forEach(Product => {
|
|
||||||
let temp = "<select>";
|
|
||||||
Product.componentDTOList.forEach(Component => {
|
|
||||||
temp += `<option>${Component.componentName + " " + Component.count}</option>>`
|
|
||||||
})
|
|
||||||
temp += "</select>"
|
|
||||||
table.innerHTML +=
|
|
||||||
`<tr>
|
|
||||||
<th scope="row">${Product.id}</th>
|
|
||||||
<td>${Product.productName}</td>
|
|
||||||
<td>${Product.price}</td>
|
|
||||||
<td>${temp}</td>
|
|
||||||
</tr>`;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const create = async function () {
|
|
||||||
const requestParams = {
|
|
||||||
method: "POST",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const response = await fetch(host + `/product?price=${priceInput.value}&name=${productNameInput.value}&count=${componentCountInput.value}&comp=${componentIdInput.value}`, requestParams);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
const remove = async function (){
|
|
||||||
console.info('Try to remove item');
|
|
||||||
if (productIdInpit.value !== 0) {
|
|
||||||
if (!confirm('Do you really want to remove this item?')) {
|
|
||||||
console.info('Canceled');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const requestParams = {
|
|
||||||
method: "DELETE",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const response = await fetch(host + `/product/` + productIdInpit.value, requestParams);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
const update = async function (){
|
|
||||||
console.info('Try to update item');
|
|
||||||
if (productIdInpit.value === 0 || productNameInput.value == null || priceInput.value === 0 || componentIdInput.value === 0 || componentCountInput.value === 0) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const requestParams = {
|
|
||||||
method: "PUT",
|
|
||||||
headers: {
|
|
||||||
"Content-Type": "application/json",
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const response = await fetch(host + `/product/${productIdInpit.value}?price=${priceInput.value}&name=${productNameInput.value}&count=${componentCountInput.value}&comp=${componentIdInput.value}`, requestParams);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
buttonRemove.addEventListener('click', function (event){
|
|
||||||
event.preventDefault();
|
|
||||||
remove().then((result) => {
|
|
||||||
getData()
|
|
||||||
productIdInpit.value = "";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
buttonUpdate.addEventListener('click', function (event){
|
|
||||||
event.preventDefault();
|
|
||||||
update().then((result) => {
|
|
||||||
getData()
|
|
||||||
componentIdInput.value = "";
|
|
||||||
priceInput.value = "";
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
form.addEventListener("submit", function (event) {
|
|
||||||
event.preventDefault();
|
|
||||||
create().then((result) => {
|
|
||||||
getData();
|
|
||||||
priceInput.value = "";
|
|
||||||
productNameInput.value = "";
|
|
||||||
alert(`Component[id=${result.id}, price=${result.price}, componentName=${result.productName}]`);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
getData();
|
|
||||||
});
|
|
||||||
44
front/src/services/DataService.js
Normal file
44
front/src/services/DataService.js
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
|
||||||
|
export default class DataService {
|
||||||
|
static dataUrlPrefix = 'http://localhost:8080';
|
||||||
|
|
||||||
|
static async readAll(url, transformer) {
|
||||||
|
const response = await fetch(this.dataUrlPrefix + url);
|
||||||
|
const data = await response.json();
|
||||||
|
return data.map(item => transformer(item));
|
||||||
|
}
|
||||||
|
|
||||||
|
static async read(url, transformer) {
|
||||||
|
const response = await axios.get(this.dataUrlPrefix + url);
|
||||||
|
return transformer(response.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
static async create(url, data) {
|
||||||
|
const requestParams = {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
};
|
||||||
|
const response = await fetch(this.dataUrlPrefix + url, requestParams);
|
||||||
|
}
|
||||||
|
|
||||||
|
static async update(url, data) {
|
||||||
|
const requestParams = {
|
||||||
|
method: "PUT",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
};
|
||||||
|
const response = await fetch(this.dataUrlPrefix + url, requestParams);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
static async delete(url) {
|
||||||
|
const response = await axios.delete(this.dataUrlPrefix + url);
|
||||||
|
return response.data.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
0
front/src/style.css
Normal file
0
front/src/style.css
Normal file
Loading…
Reference in New Issue
Block a user