Первая партия фронта.

front/premium_store/src/.env

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

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: <AddLevel /> },
+    { path: 'levels', element: <AddLevel />, label: 'Обзор уровней' },
+    { path: 'nations', element: <AddNation />, label: 'Обзор наций' },
+    { path: 'tanks', element: <AddTank />, label: 'Обзор танков'},
+    { path: 'clients', element: <AddClient />, label: 'Обзор клиентов'},
+    { path: 'checkPage', element: <PageForChecking />, label: 'Фильтр по танкам'}
+  ];
+
+  const links = routes.filter(route => route.hasOwnProperty('label'));
+
+  const rootRoute = [
+    { path: '/', element: render(links), children: routes }
+  ];
+
+  function render(links) {
+    return (
+      <div className="App">
+        <MainHead links={links}/>
+        <Outlet/>
+      </div>
+    );
+  }
+
+  return (  
+    <BrowserRouter>
+      <Router rootRoute={ rootRoute } />
+    </BrowserRouter>
+  );
+}
+
+export default App;

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;
+}

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(
+        <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>
+    );
+}

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;
+}

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(
+        <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;

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;
+}

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(
+        <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;

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;
+}

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);
+    }
+
+    //для добавления картинок
+    /*<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

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;
+}

react_online_calculator/src/App.js

@@ -1,10 +0,0 @@
-import React from 'react';
-
-function App() {
-  return (
-    <div className="App">
-    </div>
-  );
-}
-
-export default App;