Третья партия фронта.
This commit is contained in:
parent
81f8008aab
commit
15b5ebd034
29676
front/premium_store/package-lock.json
generated
Normal file
29676
front/premium_store/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
41
front/premium_store/package.json
Normal file
41
front/premium_store/package.json
Normal file
@ -0,0 +1,41 @@
|
||||
{
|
||||
"name": "premuim_store",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"axios": "^1.3.5",
|
||||
"cors": "^2.8.5",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.10.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import cl from './ModalNation.module.css';
|
||||
import '../../AddNation.css';
|
||||
import TankList from '../Tank/TankList';
|
||||
import { useFetcher } from 'react-router-dom';
|
||||
|
||||
const ModalTankNation = ({data, visible, setVisible}) => {
|
||||
//для обновления уровня
|
||||
const [nation, setNation] = useState(data.tanks);
|
||||
|
||||
//для контроля видимости модалки
|
||||
const rootClasses = [cl.myModal];
|
||||
|
||||
//загрузка всех имеющихся танков, а также уровней и наций при старте
|
||||
useEffect(() => {
|
||||
console.log("Загрузка МОДАЛКИ №1")
|
||||
console.log(nation);
|
||||
}, [])
|
||||
|
||||
if(visible)
|
||||
{
|
||||
rootClasses.push(cl.active);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={rootClasses.join(' ')} onClick={() => setVisible(false)}>
|
||||
<div className={cl.myModalContent} onClick={(e) => e.stopPropagation()}>
|
||||
{nation.length !== 0
|
||||
?
|
||||
<TankList
|
||||
label={"Список танков у нации"}
|
||||
tankItems={nation}
|
||||
/>
|
||||
:
|
||||
<h1 style={{textAlign: 'center'}}>В БД отсутствуют какие-либо танки данной нации!</h1>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalTankNation
|
||||
@ -0,0 +1,38 @@
|
||||
.nation-card{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
margin-top: 5px;
|
||||
border: 5px solid;
|
||||
border-color: #14A76C;
|
||||
border-radius: 10px;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-family: Courier, monospace;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.nation-attribute{
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
background-color: #FF652F;
|
||||
font-family: Courier, monospace;
|
||||
font-weight: 900;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nation-button-group{
|
||||
display: flex;
|
||||
margin: 10px;
|
||||
width: 20%;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nation-button{
|
||||
padding: 10px;
|
||||
border-radius: 10px;
|
||||
background-color: #FF652F;
|
||||
font-family: Courier, monospace;
|
||||
font-weight: 900;
|
||||
}
|
||||
@ -0,0 +1,59 @@
|
||||
import React, { useState } from 'react';
|
||||
import axios from 'axios';
|
||||
import './NationItem.css';
|
||||
import ModalNation from './ModalNation';
|
||||
import ModalTankNation from './ModalTankNation';
|
||||
|
||||
//отвечает за отдельно взятую нацию (вывод карточки с ним)
|
||||
const NationItem = (data) => {
|
||||
const [nation, setNation] = useState(null);
|
||||
|
||||
//состояние для контроля вызова модального окна
|
||||
const[modal, setModal] = useState(false);
|
||||
|
||||
//состояние для вызова окна показа списка танков нации
|
||||
const[modalNation, setModalNation] = useState(false);
|
||||
|
||||
function deleteNation(){
|
||||
axios.delete('http://localhost:8080/nation/' + data.nationItem.id)
|
||||
.then((response) => {
|
||||
console.log("Удаление нации с id " + data.nationItem.id)
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="nation-card">
|
||||
<p className="nation-attribute"> id: {data.nationItem.id} </p>
|
||||
<p className="nation-attribute"> нация: {data.nationItem.nation} </p>
|
||||
<div className='nation-button-group'>
|
||||
<button className="nation-button" type="button"
|
||||
onClick={() => setModal(true)}
|
||||
>
|
||||
Редактировать
|
||||
</button>
|
||||
<button className="nation-button" type="button"
|
||||
onClick={deleteNation}
|
||||
>
|
||||
Удалить
|
||||
</button>
|
||||
<button className="nation-button" type="button"
|
||||
onClick={() => setModalNation(true)}
|
||||
>
|
||||
Список танков
|
||||
</button>
|
||||
<ModalNation
|
||||
data={data.nationItem}
|
||||
visible={modal}
|
||||
setVisible={setModal}
|
||||
/>
|
||||
<ModalTankNation
|
||||
data={data.nationItem}
|
||||
visible={modalNation}
|
||||
setVisible={setModalNation}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NationItem
|
||||
@ -0,0 +1,22 @@
|
||||
import React from 'react'
|
||||
import NationItem from './NationItem';
|
||||
|
||||
const NationList = (nations) => {
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<h1 style={{textAlign: 'center', fontFamily: 'courier, monospace', background: '#FF652F', borderRadius: '10px'}}>
|
||||
Список существующих наций:
|
||||
</h1>
|
||||
</div>
|
||||
{nations.nationItems.map((nationItem) =>
|
||||
<NationItem
|
||||
nationItem={nationItem}
|
||||
key={nationItem.id}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NationList
|
||||
125
front/premium_store/src/components/items/Tank/ModalTank.jsx
Normal file
125
front/premium_store/src/components/items/Tank/ModalTank.jsx
Normal file
@ -0,0 +1,125 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
import cl from './ModalTank.module.css';
|
||||
import '../../AddTank.css';
|
||||
|
||||
const ModalTank = ({data, visible, setVisible}) => {
|
||||
//для обновления танка
|
||||
const [tankName, setTankName] = useState(data.name);
|
||||
|
||||
const [tankCost, setTankCost] = useState(data.cost);
|
||||
|
||||
const [chooiceNation, setChoiceNation] = useState(data.nation.id);
|
||||
|
||||
const [chooiceLevel, setChoiceLevel] = useState(data.nation.id);
|
||||
|
||||
const [nationItems, setNationItems] = useState([]);
|
||||
|
||||
const [levelItems, setLevelItems] = useState([]);
|
||||
|
||||
//загрузка всех имеющихся танков, а также уровней и наций при старте
|
||||
useEffect(() => {
|
||||
axios.get('http://localhost:8080/level/')
|
||||
.then((responce) => {
|
||||
console.log(responce.data);
|
||||
setLevelItems(responce.data)
|
||||
});
|
||||
axios.get('http://localhost:8080/nation/')
|
||||
.then((responce) => {
|
||||
console.log(responce.data);
|
||||
setNationItems(responce.data)
|
||||
});
|
||||
}, [])
|
||||
|
||||
//для контроля видимости модалки
|
||||
const rootClasses = [cl.myModal];
|
||||
|
||||
if(visible)
|
||||
{
|
||||
rootClasses.push(cl.active);
|
||||
}
|
||||
|
||||
//добавление нового танка
|
||||
function updateLevel(){
|
||||
setTankName()
|
||||
axios.put('http://localhost:8080/tank/' + data.id + '?firstName=' + tankName + '&nationId='
|
||||
+ chooiceNation + '&levelId=' + chooiceLevel + '&cost=' + tankCost)
|
||||
.then((response) => {
|
||||
console.log("Обновление танка с id " + data.id)
|
||||
});
|
||||
setVisible(false);
|
||||
}
|
||||
|
||||
const getChoiceNation = (newId) => {
|
||||
setChoiceNation(nationItems[newId - 1].id);
|
||||
}
|
||||
|
||||
const getChoiceLevel = (newId) => {
|
||||
setChoiceLevel(levelItems[newId - 1].id);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className={rootClasses.join(' ')} onClick={() => setVisible(false)}>
|
||||
<div className={cl.myModalContent} onClick={(e) => e.stopPropagation()}>
|
||||
<p>
|
||||
Название:
|
||||
<input
|
||||
className="add-tank-input"
|
||||
value={tankName}
|
||||
onChange={e => setTankName(e.target.value)}
|
||||
/>
|
||||
</p>
|
||||
<p>
|
||||
Стоимость:
|
||||
<input
|
||||
className="add-tank-input"
|
||||
value={tankCost}
|
||||
onChange={e => setTankCost(e.target.value)}
|
||||
/>
|
||||
</p>
|
||||
<p style={{fontWeight: "900"}}>
|
||||
Выберите нацию:
|
||||
<select
|
||||
onChange={(event) => getChoiceNation(event.target.selectedIndex)}
|
||||
>
|
||||
<option selected>Выберите нацию</option>
|
||||
{nationItems.map((nationItem) =>
|
||||
<option
|
||||
value={nationItem.nation}
|
||||
key={nationItem.id}
|
||||
>
|
||||
{nationItem.nation}
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
</p>
|
||||
<p style={{fontWeight: "900"}}>
|
||||
Выберите уровень:
|
||||
<select style={{marginTop: "10px"}}
|
||||
onChange={(event) => getChoiceLevel(event.target.selectedIndex)}
|
||||
>
|
||||
<option selected>Выберите уровень</option>
|
||||
{levelItems.map((levelItem) =>
|
||||
<option
|
||||
value={levelItem.level}
|
||||
key={levelItem.id}
|
||||
>
|
||||
{levelItem.level}
|
||||
</option>
|
||||
)}
|
||||
</select>
|
||||
</p>
|
||||
<button
|
||||
className={cl.modalButton}
|
||||
type="button"
|
||||
onClick={updateLevel}
|
||||
>
|
||||
Сохранить
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalTank
|
||||
@ -0,0 +1,33 @@
|
||||
.myModal{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.myModal.active{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.myModalContent{
|
||||
display: inline-block;
|
||||
padding: 15px;
|
||||
background: #FF652F;
|
||||
border-radius: 16px;
|
||||
min-width: 300px;
|
||||
min-height: 100px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modalButton{
|
||||
padding: 5px;
|
||||
border-radius: 10px;
|
||||
background-color: #FFE430;
|
||||
font-family: Courier, monospace;
|
||||
font-weight: 900;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user