Отчёт.

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*

front/premium_store/src/.env

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

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