Отчёт.

This commit is contained in:
Programmist73 2023-05-26 17:45:57 +04:00
parent e3f7da3e4b
commit 1bc1073b83
10 changed files with 571 additions and 0 deletions

23
front/premium_store/.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.js
# testing
/coverage
# production
/build
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

View File

@ -0,0 +1,2 @@
VITE_NODE_ENV=development
VITE_API_URL=http://localhost:8080

View File

@ -0,0 +1,14 @@
.add-client-input{
padding-left: 10px;
padding-right: 10px;
border: 3px solid;
border-radius: 10px;
border-color: #505050;
}
.add-level-button{
border-radius: 10px;
border-color: #505050;
background-color: #FFE430;
font-weight: 900;
}

View File

@ -0,0 +1,113 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import '../styles/App.css';
import ClientList from './items/GameClient/ClientList';
import './AddClient.css';
export default function AddClient() {
const [clientItems, setClientItems] = useState([]);
//для создания нового уровня
const [clientNickName, setClientNickName] = useState();
const [clientEmail, setClientEmail] = useState();
const [clientBalance, setClientBalance] = useState();
//загрузка всех имеющихся уровней при старте
useEffect(() => {
console.log('Обращение к БД');
axios.get('http://localhost:8080/client/')
.then((responce) => {
console.log(responce.data);
setClientItems(responce.data)
})
}, [])
//обновить список уровней
function CheckArray(){
console.log('Обращение к БД');
axios.get('http://localhost:8080/client/')
.then((responce) => {
console.log(responce.data);
setClientItems(responce.data)
})
}
//добавление нового уровня
function addNewClient(){
console.log(clientNickName);
console.log(clientEmail);
console.log(clientBalance);
if(clientNickName === ''){
return;
}
else {//http://localhost:8080/client/?nickName=11&email=11&balance=11
axios.post('http://localhost:8080/client/?nickName=' + clientNickName + '&email=' + clientEmail + '&balance=' + clientBalance)
.then((response) => {
CheckArray();
setClientNickName('');
setClientEmail('');
setClientBalance('');
});
}
}
//добавили условную отрисовку
return(
<div>
<div className="Group_create_level">
<h1>Генератор клиентов</h1>
<div>
<p style={{fontWeight: "900", marginTop:"10px"}}>
Введите никнейм клиента:
<input
className="add-client-input"
value={clientNickName}
onChange={e => setClientNickName(e.target.value)}
/>
</p>
<p style={{fontWeight: "900", marginTop:"10px"}}>
Введите почту клиента:
<input
className="add-client-input"
value={clientEmail}
onChange={e => setClientEmail(e.target.value)}
/>
</p>
<p style={{fontWeight: "900", marginTop:"10px"}}>
Введите баланс клиента:
<input
className="add-client-input"
value={clientBalance}
onChange={e => setClientBalance(e.target.value)}
/>
</p>
</div>
<div>
<button className='add-level-button'
onClick={addNewClient}
>
Создать клиента
</button>
<button className='add-level-button'
onClick={CheckArray}
>
Вывести всех клиентов
</button>
</div>
</div>
<div className="Card_list">
{clientItems.length !== 0
?
<ClientList clientItems={clientItems}
/>
:
<h1 style={{textAlign: 'center'}}>В БД отсутствуют какие-либо клиенты!</h1>
}
</div>
</div>
);
}

View File

@ -0,0 +1,14 @@
.add-level-input{
padding-left: 10px;
padding-right: 10px;
border: 3px solid;
border-radius: 10px;
border-color: #505050;
}
.add-level-button{
border-radius: 10px;
border-color: #505050;
background-color: #FFE430;
font-weight: 900;
}

View File

@ -0,0 +1,89 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import '../styles/App.css';
import LevelList from './items/Level/LevelList';
import './AddLevel.css';
//компонент для просмотра, создания и удаления уровней
const AddLevel = () => {
const [levelItems, setLevelItems] = useState([]);
//для создания нового уровня
const [level, setLevel] = useState({level: ''});
//загрузка всех имеющихся уровней при старте
useEffect(() => {
console.log('Обращение к БД');
axios.get('http://localhost:8080/level/')
.then((responce) => {
console.log(responce.data);
setLevelItems(responce.data)
})
}, [])
//обновить список уровней
function CheckArray(){
console.log('Обращение к БД');
axios.get('http://localhost:8080/level/')
.then((responce) => {
console.log(responce.data);
setLevelItems(responce.data)
})
}
//добавление нового уровня
function addNewLevel(){
if(level.level === ''){
return;
}
else {
axios.post('http://localhost:8080/level/?Level=' + parseInt(level.level, 10))
.then((response) => {
CheckArray();
setLevel({level: ''});
});
}
}
//добавили условную отрисовку
return(
<div>
<div className="Group_create_level">
<h1>Генератор уровней</h1>
<div>
<p style={{fontWeight: "900"}}>
Введите уровень:
<input
className="add-level-input"
value={level.level}
onChange={e => setLevel({level: e.target.value})}
/>
</p>
</div>
<div>
<button className='add-level-button'
onClick={addNewLevel}
>
Создать уровень
</button>
<button className='add-level-button'
onClick={CheckArray}
>
Вывести все уровни
</button>
</div>
</div>
<div className="Card_list">
{levelItems.length !== 0
?
<LevelList levelItems={levelItems}
/>
:
<h1 style={{textAlign: 'center'}}>В БД отсутствуют какие-либо уровни!</h1>
}
</div>
</div>
);
};
export default AddLevel;

View File

@ -0,0 +1,14 @@
.add-nation-input{
padding-left: 10px;
padding-right: 10px;
border: 3px solid;
border-radius: 10px;
border-color: #505050;
}
.add-level-button{
border-radius: 10px;
border-color: #505050;
background-color: #FFE430;
font-weight: 900;
}

View File

@ -0,0 +1,89 @@
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import '../styles/App.css';
import NationList from './items/Nation/NationList';
import './AddNation.css';
//компонент для просмотра, создания и удаления уровней
const AddNation = () => {
const [nationItems, setNationItems] = useState([]);
//для создания нового уровня
const [nation, setNation] = useState({nation: ''});
//загрузка всех имеющихся уровней при старте
useEffect(() => {
console.log('Обращение к БД');
axios.get('http://localhost:8080/nation/')
.then((responce) => {
console.log(responce.data);
setNationItems(responce.data)
})
}, [])
//обновить список уровней
function CheckArray(){
console.log('Обращение к БД');
axios.get('http://localhost:8080/nation/')
.then((responce) => {
console.log(responce.data);
setNationItems(responce.data)
})
}
//добавление нового уровня
function addNewNation(){
if(nation.nation === ''){
return;
}
else {
axios.post('http://localhost:8080/nation/?nation=' + nation.nation)
.then((response) => {
CheckArray();
setNation({nation: ''});
});
}
}
//добавили условную отрисовку
return(
<div>
<div className="Group_create_level">
<h1>Генератор наций</h1>
<div>
<p style={{fontWeight: "900"}}>
Введите нацию:
<input
className="add-nation-input"
value={nation.nation}
onChange={e => setNation({nation: e.target.value})}
/>
</p>
</div>
<div>
<button className='add-level-button'
onClick={addNewNation}
>
Создать нацию
</button>
<button className='add-level-button'
onClick={CheckArray}
>
Вывести все нации
</button>
</div>
</div>
<div className="Card_list">
{nationItems.length !== 0
?
<NationList nationItems={nationItems}
/>
:
<h1 style={{textAlign: 'center'}}>В БД отсутствуют какие-либо нации!</h1>
}
</div>
</div>
);
};
export default AddNation;

View File

@ -0,0 +1,15 @@
.add-tank-input{
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
border: 3px solid;
border-radius: 10px;
border-color: #505050;
}
.add-level-button{
border-radius: 10px;
border-color: #505050;
background-color: #FFE430;
font-weight: 900;
}

View File

@ -0,0 +1,198 @@
import React, { useState, useEffect, useRef} from 'react';
import axios from 'axios';
import '../styles/App.css';
import TankList from './items/Tank/TankList';
import './AddTank.css';
const AddTank = () => {
const [tankItems, setTankItems] = useState([]);
//для создания нового танка
const [tankName, setTankName] = useState({tankName: ''});
const [tankCost, setTankCost] = useState({tankCost: ''});
const [nationItems, setNationItems] = useState([]);
const [levelItems, setLevelItems] = useState([]);
//храним выбранные нацию и уровень для нового танка
const [chooiceNation, setChooiceNation] = useState();
const [chooiceLevel, setChooiceLevel] = useState();
const [fileByte, setFileByte] = useState(null);
const inputRef = useRef();
//загрузка всех имеющихся танков, а также уровней и наций при старте
useEffect(() => {
console.log('Обращение к БД');
axios.get('http://localhost:8080/tank/')
.then((responce) => {
console.log(responce.data);
setTankItems(responce.data)
});
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)
});
}, [])
//обновить список танков
function CheckArray(){
console.log('Обращение к БД');
axios.get('http://localhost:8080/tank/')
.then((responce) => {
console.log(responce.data);
setTankItems(responce.data)
})
}
//добавление нового танка
async function addNewTank(){
console.log(tankName);
console.log(tankCost);
console.log(chooiceNation);
console.log(chooiceLevel);
//console.log(imageURL);
//const header = new Headers({ "Access-Control-Allow-Origin": "*" });
axios.post("http://localhost:8080/tank/?firstName=" + tankName.tankName +
"&id=" + chooiceNation.id + "&nationId=" + chooiceNation + "&levelId=" + chooiceLevel +
"&cost=" + tankCost.tankCost)
.then((response) => {
console.log("Успешное добавление");
console.log(response.data);
CheckArray();
setTankCost({tankCost: ''});
setTankName({tankName: ''});
});
//}*/
}
//хранит картинку для танка
const [imageURL, setImageURL] = useState();
const fileReader = new FileReader();
fileReader.onloadend = () => {
const tempval = fileReader.result
setImageURL(tempval);
};
function handleOnChange(event) {
event.preventDefault();
const file = event.target.files[0];
fileReader.readAsDataURL(file);
}
const getChoiceNation = (newId) => {
setChooiceNation(nationItems[newId - 1].id);
}
const getChoiceLevel = (newId) => {
setChooiceLevel(levelItems[newId - 1].id);
}
//для добавления картинок
/*<p style={{fontWeight: "900", marginTop: "10px"}}>
Выберите изображение:
<input className="add-tank-input" id="formFileSm" type="file"
accept="image/jpeg, image/png, image/jpg"
value=''
style={{marginTop: "10px"}}
//onChange={e => setTank({tankImage: e.target.value})}
//onChange={() => setTank({tankImage: inputRef.current.files[0]})}
onChange={handleOnChange}
//ref={inputRef}
/>
</p>*/
//добавили условную отрисовку
return(
<div>
<div className="Group_create_level">
<h1>Генератор танков</h1>
<div>
<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>
<p style={{fontWeight: "900"}}>
Введите название:
<input
className="add-tank-input"
value={tankName.tankName}
onChange={e => setTankName({tankName: e.target.value})}
/>
</p>
<p style={{fontWeight: "900"}}>
Введите стоимость:
<input
className="add-tank-input"
value={tankCost.tankCost}
onChange={e => setTankCost({tankCost: e.target.value})}
/>
</p>
</div>
<div>
<button className='add-level-button'
onClick={addNewTank}
>
Создать танк
</button>
<button className='add-level-button'
onClick={CheckArray}
>
Вывести все танки
</button>
</div>
</div>
<div className="Card_list">
{tankItems.length !== 0
?
<TankList tankItems={tankItems}
/>
:
<h1 style={{textAlign: 'center'}}>В БД отсутствуют какие-либо танки!</h1>
}
</div>
</div>
);
}
export default AddTank