diff --git a/react_online_calculator/.gitignore b/front/premium_store/.gitignore similarity index 100% rename from react_online_calculator/.gitignore rename to front/premium_store/.gitignore 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/App.js b/front/premium_store/src/App.js new file mode 100644 index 0000000..ab85bd6 --- /dev/null +++ b/front/premium_store/src/App.js @@ -0,0 +1,46 @@ +import React, {useState} from 'react'; +import { useRoutes, Outlet, BrowserRouter } from 'react-router-dom'; +import AddLevel from './components/AddLevel'; +import MainHead from './components/MainHead'; +import AddNation from './components/AddNation'; +import AddTank from './components/AddTank'; +import AddClient from './components/AddClient'; +import PageForChecking from './components/PageForChecking'; + +function Router(props) { + return useRoutes(props.rootRoute); +} + +function App() { + const routes = [ + { index: true, element: }, + { path: 'levels', element: , label: 'Обзор уровней' }, + { path: 'nations', element: , label: 'Обзор наций' }, + { path: 'tanks', element: , label: 'Обзор танков'}, + { path: 'clients', element: , label: 'Обзор клиентов'}, + { path: 'checkPage', element: , label: 'Фильтр по танкам'} + ]; + + const links = routes.filter(route => route.hasOwnProperty('label')); + + const rootRoute = [ + { path: '/', element: render(links), children: routes } + ]; + + function render(links) { + return ( +
+ + +
+ ); + } + + return ( + + + + ); +} + +export default App; 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 diff --git a/front/premium_store/src/styles/App.css b/front/premium_store/src/styles/App.css new file mode 100644 index 0000000..379e22f --- /dev/null +++ b/front/premium_store/src/styles/App.css @@ -0,0 +1,90 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/*#505050*/ + +#root{ + display: flex; + justify-content: center; + background-color: #151719; + background-image: url("../images/wot-is-4.jpg"); + background-size: cover; + background-attachment: fixed; + font-family: Courier, monospace; + font-weight: 900; +} + +.body{ + margin: 0; /* Убираем отступы */ + height: 100%; /* Высота страницы */ +} + +.App{ + width: 1200px; +} + +.Group_create_level{ + display: flex; + padding: 15px; + background-color: #FFE430; + opacity: 0.8; + border-radius: 10px; + margin-top: 15px; + justify-content: space-around; + align-items: center; +} + +.Card_list{ + padding: 15px; + border: 5px solid; + border-color: #14A76C; + background-color: #151719; + opacity: 0.9; + border-radius: 10px; + margin-top: 15px; + align-items: center; +} + +.Main_head{ + display: flex; + padding: 15px; + margin-top: 30px; + border: 5px solid; + border-color: #FF652F; + border-radius: 10px; + background-color: #151719; + opacity: 0.9; + justify-content: space-between; + align-items: center; +} + +.Button_Main_Group{ + padding: 5px; + border-color: #FF652F; + border-radius: 10px; + background-color: #FF652F; + font-family: Courier, monospace; + font-weight: bold; + align-items: center; +} + +.add-level-button{ + padding: 10px; + margin-right: 15px; +} + +.Main-label{ + display: flex; + padding-top: 16px; + font-size: 7vw; + font-variant: small-caps; + font-stretch: ultra-expanded; + justify-content: space-around; + align-items: center; + color: #505050; + -webkit-text-stroke-width: 3.0px; + -webkit-text-stroke-color: #000000; +} \ No newline at end of file diff --git a/react_online_calculator/src/App.js b/react_online_calculator/src/App.js deleted file mode 100644 index 4896b4b..0000000 --- a/react_online_calculator/src/App.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react'; - -function App() { - return ( -
-
- ); -} - -export default App;