From 1bc1073b8309490d76481442afd8444c4ad589a9 Mon Sep 17 00:00:00 2001 From: Programmist73 Date: Fri, 26 May 2023 17:45:57 +0400 Subject: [PATCH] =?UTF-8?q?=D0=9E=D1=82=D1=87=D1=91=D1=82.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/premium_store/.gitignore | 23 ++ front/premium_store/src/.env | 2 + .../src/components/AddClient.css | 14 ++ .../src/components/AddClient.jsx | 113 ++++++++++ .../premium_store/src/components/AddLevel.css | 14 ++ .../premium_store/src/components/AddLevel.jsx | 89 ++++++++ .../src/components/AddNation.css | 14 ++ .../src/components/AddNation.jsx | 89 ++++++++ .../premium_store/src/components/AddTank.css | 15 ++ .../premium_store/src/components/AddTank.jsx | 198 ++++++++++++++++++ 10 files changed, 571 insertions(+) create mode 100644 front/premium_store/.gitignore create mode 100644 front/premium_store/src/.env create mode 100644 front/premium_store/src/components/AddClient.css create mode 100644 front/premium_store/src/components/AddClient.jsx create mode 100644 front/premium_store/src/components/AddLevel.css create mode 100644 front/premium_store/src/components/AddLevel.jsx create mode 100644 front/premium_store/src/components/AddNation.css create mode 100644 front/premium_store/src/components/AddNation.jsx create mode 100644 front/premium_store/src/components/AddTank.css create mode 100644 front/premium_store/src/components/AddTank.jsx diff --git a/front/premium_store/.gitignore b/front/premium_store/.gitignore new file mode 100644 index 0000000..4d29575 --- /dev/null +++ b/front/premium_store/.gitignore @@ -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* diff --git a/front/premium_store/src/.env b/front/premium_store/src/.env new file mode 100644 index 0000000..8634262 --- /dev/null +++ b/front/premium_store/src/.env @@ -0,0 +1,2 @@ +VITE_NODE_ENV=development +VITE_API_URL=http://localhost:8080 \ No newline at end of file diff --git a/front/premium_store/src/components/AddClient.css b/front/premium_store/src/components/AddClient.css new file mode 100644 index 0000000..65b08f0 --- /dev/null +++ b/front/premium_store/src/components/AddClient.css @@ -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; +} \ No newline at end of file diff --git a/front/premium_store/src/components/AddClient.jsx b/front/premium_store/src/components/AddClient.jsx new file mode 100644 index 0000000..a56c643 --- /dev/null +++ b/front/premium_store/src/components/AddClient.jsx @@ -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( +
+
+

Генератор клиентов

+
+

+ Введите никнейм клиента: + setClientNickName(e.target.value)} + /> +

+

+ Введите почту клиента: + setClientEmail(e.target.value)} + /> +

+

+ Введите баланс клиента: + setClientBalance(e.target.value)} + /> +

+
+
+ + +
+
+
+ {clientItems.length !== 0 + ? + + : +

В БД отсутствуют какие-либо клиенты!

+ } +
+
+ ); +} diff --git a/front/premium_store/src/components/AddLevel.css b/front/premium_store/src/components/AddLevel.css new file mode 100644 index 0000000..05697a3 --- /dev/null +++ b/front/premium_store/src/components/AddLevel.css @@ -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; +} \ No newline at end of file diff --git a/front/premium_store/src/components/AddLevel.jsx b/front/premium_store/src/components/AddLevel.jsx new file mode 100644 index 0000000..18d4840 --- /dev/null +++ b/front/premium_store/src/components/AddLevel.jsx @@ -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( +
+
+

Генератор уровней

+
+

+ Введите уровень: + setLevel({level: e.target.value})} + /> +

+
+
+ + +
+
+
+ {levelItems.length !== 0 + ? + + : +

В БД отсутствуют какие-либо уровни!

+ } +
+
+ ); +}; + +export default AddLevel; \ No newline at end of file diff --git a/front/premium_store/src/components/AddNation.css b/front/premium_store/src/components/AddNation.css new file mode 100644 index 0000000..72f46f8 --- /dev/null +++ b/front/premium_store/src/components/AddNation.css @@ -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; +} \ No newline at end of file diff --git a/front/premium_store/src/components/AddNation.jsx b/front/premium_store/src/components/AddNation.jsx new file mode 100644 index 0000000..bd8c43c --- /dev/null +++ b/front/premium_store/src/components/AddNation.jsx @@ -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( +
+
+

Генератор наций

+
+

+ Введите нацию: + setNation({nation: e.target.value})} + /> +

+
+
+ + +
+
+
+ {nationItems.length !== 0 + ? + + : +

В БД отсутствуют какие-либо нации!

+ } +
+
+ ); +}; + +export default AddNation; \ No newline at end of file diff --git a/front/premium_store/src/components/AddTank.css b/front/premium_store/src/components/AddTank.css new file mode 100644 index 0000000..32008ef --- /dev/null +++ b/front/premium_store/src/components/AddTank.css @@ -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; +} \ No newline at end of file diff --git a/front/premium_store/src/components/AddTank.jsx b/front/premium_store/src/components/AddTank.jsx new file mode 100644 index 0000000..97d4d38 --- /dev/null +++ b/front/premium_store/src/components/AddTank.jsx @@ -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); + } + + //для добавления картинок + /*

+ Выберите изображение: + setTank({tankImage: e.target.value})} + //onChange={() => setTank({tankImage: inputRef.current.files[0]})} + onChange={handleOnChange} + //ref={inputRef} + /> +

*/ + + //добавили условную отрисовку + return( +
+
+

Генератор танков

+
+

+ Выберите нацию: + +

+

+ Выберите уровень: + +

+

+ Введите название: + setTankName({tankName: e.target.value})} + /> +

+

+ Введите стоимость: + setTankCost({tankCost: e.target.value})} + /> +

+
+
+ + +
+
+
+ {tankItems.length !== 0 + ? + + : +

В БД отсутствуют какие-либо танки!

+ } +
+
+ ); +} + +export default AddTank