From b908b6895140e3dc74dd39ff44122907bef5cd88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9D=D0=B8=D0=BA=D0=BE=D0=BB=D0=B0=D0=B9?= Date: Fri, 31 Mar 2023 23:41:00 +0400 Subject: [PATCH] =?UTF-8?q?=D1=82=D0=B5=D0=BF=D0=B5=D1=80=D1=8C=20=D1=84?= =?UTF-8?q?=D1=80=D0=BE=D0=BD=D1=82=20=D1=82=D0=BE=D1=87=D0=BD=D0=BE=20?= =?UTF-8?q?=D0=BD=D0=B0=20=D0=BC=D0=B5=D1=81=D1=82=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data.mv.db | Bin 45056 -> 45056 bytes front/index.html | 15 ++ front/src/App.jsx | 37 +++++ front/src/components/Adding.jsx | 58 +++++++ front/src/components/Creator.jsx | 175 ++++++++++++++++++++ front/src/components/Header.jsx | 27 +++ front/src/components/Manga.jsx | 171 +++++++++++++++++++ front/src/components/Reader.jsx | 226 ++++++++++++++++++++++++++ front/src/components/TableCreator.jsx | 26 +++ front/src/components/TableManga.jsx | 25 +++ front/src/components/TableReader.jsx | 24 +++ front/src/main.jsx | 8 + front/src/style.css | 102 ++++++++++++ 13 files changed, 894 insertions(+) create mode 100644 front/index.html create mode 100644 front/src/App.jsx create mode 100644 front/src/components/Adding.jsx create mode 100644 front/src/components/Creator.jsx create mode 100644 front/src/components/Header.jsx create mode 100644 front/src/components/Manga.jsx create mode 100644 front/src/components/Reader.jsx create mode 100644 front/src/components/TableCreator.jsx create mode 100644 front/src/components/TableManga.jsx create mode 100644 front/src/components/TableReader.jsx create mode 100644 front/src/main.jsx create mode 100644 front/src/style.css diff --git a/data.mv.db b/data.mv.db index a23c3a5290ff1f5242c1ae599b2a87abed8c135c..c494343b7532e43669f91e8cdf2ccdc0981c1ad8 100644 GIT binary patch literal 45056 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 I3giF(2N;I>t^fc4 literal 45056 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 + + + + + + + + ReManga + + +
+ + + diff --git a/front/src/App.jsx b/front/src/App.jsx new file mode 100644 index 0000000..a95a1f5 --- /dev/null +++ b/front/src/App.jsx @@ -0,0 +1,37 @@ +import { useRoutes, Outlet, BrowserRouter } from 'react-router-dom'; +import Creator from './components/Creator'; +import Reader from './components/Reader'; +import Header from './components/Header'; +import Manga from './components/Manga'; + +function Router(props) { + return useRoutes(props.rootRoute); +} + +export default function App() { + const routes = [ + { index: true, element: }, + { path: 'creator', element: , label: 'Creator' }, + { path: 'reader', element: , label: 'Reader' }, + { path: 'manga', element: , label: 'Manga' }, + ]; + const links = routes.filter(route => route.hasOwnProperty('label')); + const rootRoute = [ + { path: '/', element: render(links), children: routes } + ]; + + function render(links) { + return ( + <> +
+ + + ); + } + + return ( + + + + ); +} \ No newline at end of file diff --git a/front/src/components/Adding.jsx b/front/src/components/Adding.jsx new file mode 100644 index 0000000..36bfa1a --- /dev/null +++ b/front/src/components/Adding.jsx @@ -0,0 +1,58 @@ +import { useEffect, useState } from "react"; + +export default function Adding() { + + const [outcome, setOutcome] = useState(0); + + const [first, setFirst] = useState(0); + + const [second, setSecond] = useState(0); + + const sum = (e) =>{ + e.preventDefault() + fetch('http://localhost:8080/sum?first=' + first + '&second=' + second) + .then(response=>response.text()) + .then(result=>setOutcome(result)) + } + + const ras = (e) =>{ + e.preventDefault() + fetch('http://localhost:8080/ras?first=' + first + '&second=' + second) + .then(response=>response.text()) + .then(result=>setOutcome(result)) + } + const del = (e) =>{ + e.preventDefault() + fetch('http://localhost:8080/del?first=' + first + '&second=' + second) + .then(response=>response.text()) + .then(result=>setOutcome(result)) + } + const pros = (e) =>{ + e.preventDefault() + fetch('http://localhost:8080/pros?first=' + first + '&second=' + second) + .then(response=>response.text()) + .then(result=>setOutcome(result)) + } + + return ( +
+
+
+
+ + setFirst(event.target.value)} className="form-control"/> +
+
+ + setSecond(event.target.value)} className="form-control"/> +
+ + + + + {outcome} +
+
+
+ ); +} diff --git a/front/src/components/Creator.jsx b/front/src/components/Creator.jsx new file mode 100644 index 0000000..ea60f69 --- /dev/null +++ b/front/src/components/Creator.jsx @@ -0,0 +1,175 @@ +import { useEffect, useState } from "react"; +import TableCreator from './TableCreator'; + +export default function Creator() { + + const host = "http://localhost:8080"; + + const [creatorId, setCreatorId] = useState(0); + + const [creatorName, setCreatorName] = useState(""); + + const [password, setPassword] = useState(""); + + + const [data, setData] = useState([]); + + + const table = document.getElementById("tbody"); + + useEffect(() => { + getData() + .then(_data =>setData(_data)) ; + console.log(2); + },[]); + + + const getData = async function () { + const response = await fetch(host + "/creator"); + const _data = await response.json() + console.log(data); + return _data; + + //table.innerHTML = ""; + // data.forEach(Creator => { + // let temp = "" + // table.innerHTML += + // ` + // ${Creator.id} + // ${Creator.creatorName} + // ${Creator.hashedPassword} + // ${temp} + // `; + // }) + } + + const create = async function (){ + const requestParams = { + method: "POST", + headers: { + "Content-Type": "application/json", + } + }; + const response = await fetch(host + `/creator?creatorName=${creatorName}&password=${password}`, requestParams); + getData(); + } + + const remove = async function (){ + console.info('Try to remove item'); + if (creatorId !== 0) { + if (!confirm('Do you really want to remove this item?')) { + console.info('Canceled'); + return; + } + } + const requestParams = { + method: "DELETE", + headers: { + "Content-Type": "application/json", + } + }; + const response = await fetch(host + `/creator/` + creatorId, requestParams); + console.log("REMOVE"); + getData(); + return await response.json(); + } + + const removeAll = async function (){ + console.info('Try to remove item'); + if (!confirm('Do you really want to remove this item?')) { + console.info('Canceled'); + return; + } + const requestParams = { + method: "DELETE", + }; + await fetch(host + `/creator/`, requestParams); + } + + const update = async function (){ + console.info('Try to update item'); + if (creatorId === 0 || creatorName == null || password === 0) { + return; + } + const requestParams = { + method: "PUT", + headers: { + "Content-Type": "application/json", + } + }; + const response = await fetch(host + `/creator/${creatorId}?creatorName=${creatorName}&password=${password}`, requestParams); + getData(); + return await response.json(); + } + const createButton = (e) =>{ + e.preventDefault() + create(); + } + + const removeButton = (e) =>{ + e.preventDefault() + remove(); + } + + const updateButton = (e) =>{ + e.preventDefault() + update(); + } + + return ( +
+
+
+

Creator

+
+
+
+ + setCreatorId(event.target.value)} className="form-control"/> +
+
+ + setCreatorName(event.target.value)} className="form-control"/> +
+
+ + setPassword(event.target.value)} className="form-control"/> +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ + + + + + + + + + + + {/* + */} +
#CreatorNamePasswordMangs
+
+
+
+
+ ); +} diff --git a/front/src/components/Header.jsx b/front/src/components/Header.jsx new file mode 100644 index 0000000..16c3443 --- /dev/null +++ b/front/src/components/Header.jsx @@ -0,0 +1,27 @@ +import { NavLink } from 'react-router-dom'; + +export default function Header(props) { + return ( + + ); +} \ No newline at end of file diff --git a/front/src/components/Manga.jsx b/front/src/components/Manga.jsx new file mode 100644 index 0000000..cb5ab84 --- /dev/null +++ b/front/src/components/Manga.jsx @@ -0,0 +1,171 @@ +import { useEffect, useState } from "react"; +import TableManga from './TableManga'; + +export default function Manga() { + + const host = "http://localhost:8080"; + + const [creatorId, setCreatorId] = useState(0); + + const [mangaId, setMangaId] = useState(0); + + const [mangaName, setMangaName] = useState(""); + + const [chapterCount, setChapterCount] = useState(0); + + + const [data, setData] = useState([]); + + + const table = document.getElementById("tbody"); + + useEffect(() => { + getData(); + },[]); + + + const getData = async function () { + const response = await fetch(host + "/manga"); + setData(await response.json()) + console.log(data); + //table.innerHTML = ""; + // data.forEach(Manga => { + // let temp = "" + // table.innerHTML += + // ` + // ${Manga.id} + // ${Manga.mangaName} + // ${Manga.hashedPassword} + // ${temp} + // `; + // }) + } + + const create = async function (){ + const requestParams = { + method: "POST", + headers: { + "Content-Type": "application/json", + } + }; + const response = await fetch(host + `/manga?creatorId=${creatorId}&chapterCount=${chapterCount}&mangaName=${mangaName}`, requestParams); + return await response.json(); + } + + const remove = async function (){ + console.info('Try to remove item'); + if (mangaId !== 0) { + if (!confirm('Do you really want to remove this item?')) { + console.info('Canceled'); + return; + } + } + const requestParams = { + method: "DELETE", + headers: { + "Content-Type": "application/json", + } + }; + const response = await fetch(host + `/manga/` + mangaIdInput.value, requestParams); + console.log("REMOVE"); + getData(); + } + + const update = async function (){ + console.info('Try to update item'); + if (mangaId === 0 || mangaName == null || password === 0) { + return; + } + const requestParams = { + method: "PUT", + headers: { + "Content-Type": "application/json", + } + }; + const response = await fetch(host + `/manga/${mangaIdInput.value}?chapterCount=${chapterCountInput.value}`, requestParams); + return await response.json(); + } + const createButton = (e) =>{ + e.preventDefault() + create().then((result) => { + getData(); + alert(`Manga[id=${result.id}, mangaName=${result.mangaName}, chapterCount=${result.chapterCount}]`); + }); + } + + const removeButton = (e) =>{ + e.preventDefault() + remove(); + getData(); + } + + const updateButton = (e) =>{ + e.preventDefault() + update(); + getData(); + } + + + + return ( +
+
+
+

Manga

+
+
+
+ + setCreatorId(event.target.value)} className="form-control"/> +
+
+ + setMangaId(event.target.value)} className="form-control"/> +
+
+ + setMangaName(event.target.value)} className="form-control"/> +
+
+ + setChapterCount(event.target.value)} className="form-control"/> +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ + + + + + + + + + + + + {/* + */} +
#mangaNamechapterCountmangaIdreaders
+
+
+
+
+ ); +} diff --git a/front/src/components/Reader.jsx b/front/src/components/Reader.jsx new file mode 100644 index 0000000..4ce69d8 --- /dev/null +++ b/front/src/components/Reader.jsx @@ -0,0 +1,226 @@ +import { useEffect, useState } from "react"; +import TableReader from './TableReader'; + +export default function Reader() { + + const host = "http://localhost:8080"; + + const [readerId, setReaderId] = useState(0); + + const [mangaId, setMangaId] = useState(0); + + const [readerName, setReaderName] = useState(""); + + const [password, setPassword] = useState(""); + + + const [data, setData] = useState([]); + + + const table = document.getElementById("tbody"); + + useEffect(() => { + getData(); + console.log(2); + },[]); + + + const getData = async function () { + const response = await fetch(host + "/reader"); + setData(await response.json()) + console.log(data); + //table.innerHTML = ""; + // data.forEach(Reader => { + // let temp = "" + // table.innerHTML += + // ` + // ${Reader.id} + // ${Reader.readerName} + // ${Reader.hashedPassword} + // ${temp} + // `; + // }) + } + + const create = async function (){ + const requestParams = { + method: "POST", + headers: { + "Content-Type": "application/json", + } + }; + const response = await fetch(host + `/reader?readerName=${readerName}&password=${password}`, requestParams); + getData(); + } + + const remove = async function (){ + console.info('Try to remove item'); + if (readerId !== 0) { + if (!confirm('Do you really want to remove this item?')) { + console.info('Canceled'); + return; + } + } + const requestParams = { + method: "DELETE", + headers: { + "Content-Type": "application/json", + } + }; + const response = await fetch(host + `/reader/` + readerId, requestParams); + getData(); + return await response.json(); + } + + const removeAll = async function (){ + console.info('Try to remove item'); + if (!confirm('Do you really want to remove this item?')) { + console.info('Canceled'); + return; + } + const requestParams = { + method: "DELETE", + }; + await fetch(host + `/reader/`, requestParams); + getData(); + } + + const update = async function (){ + console.info('Try to update item'); + if (readerId === 0 || readerName == null || password === 0) { + return; + } + const requestParams = { + method: "PUT", + headers: { + "Content-Type": "application/json", + } + }; + const response = await fetch(host + `/reader/${readerId}?readerName=${readerName}&password=${password}`, requestParams); + getData(); + return await response.json(); + } + + const removeManga = async function (){ + console.info('Try to remove item'); + if (!confirm('Do you really want to remove this item?')) { + console.info('Canceled'); + return; + } + const requestParams = { + method: "PUT", + headers: { + "Content-Type": "application/json", + } + }; + console.log(host + `/reader/${readerId}/removeManga?mangaId=${mangaId}`, requestParams); + const response = await fetch(host + `/reader/${readerId}/removeManga?mangaId=${mangaId}`, requestParams); + return await response.json(); + } + + const addManga = async function () { + const requestParams = { + method: "PUT", + headers: { + "Content-Type": "application/json", + } + }; + console.log(host + `/reader/${readerId}/addManga?mangaId=${mangaId}`, requestParams); + const response = await fetch(host + `/reader/${readerId}/addManga?mangaId=${mangaId}`, requestParams); + return await response.json(); + } + const createButton = (e) =>{ + e.preventDefault() + create(); + } + + const removeButton = (e) =>{ + e.preventDefault() + remove(); + + } + + const updateButton = (e) =>{ + e.preventDefault() + update(); + } + + const removeMangaButton = (e) =>{ + e.preventDefault() + removeManga(); + } + + const addMangaButton = (e) =>{ + e.preventDefault() + addManga(); + } + + + + return ( +
+
+
+

Reader

+
+
+
+ + setReaderId(event.target.value)} className="form-control"/> +
+
+ + setMangaId(event.target.value)} className="form-control"/> +
+
+ + setReaderName(event.target.value)} className="form-control"/> +
+
+ + setPassword(event.target.value)} className="form-control"/> +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ + + + + + + + + + + + {/* + */} +
#readerNamePasswordMangs
+
+
+
+
+ ); +} diff --git a/front/src/components/TableCreator.jsx b/front/src/components/TableCreator.jsx new file mode 100644 index 0000000..1b42a13 --- /dev/null +++ b/front/src/components/TableCreator.jsx @@ -0,0 +1,26 @@ +import { useState } from 'react'; + + +export default function TableCreator(props) { + + return ( + + { + props.items.map((item, index) => + + {item.id} + {item.creatorName} + {item.hashedPassword} + + + + + + + ) + } + + ); +} \ No newline at end of file diff --git a/front/src/components/TableManga.jsx b/front/src/components/TableManga.jsx new file mode 100644 index 0000000..d2ea6bd --- /dev/null +++ b/front/src/components/TableManga.jsx @@ -0,0 +1,25 @@ +import { useState } from 'react'; + + +export default function TableCreator(props) { + + return ( + + { + props.items.map((item, index) => + + {item.id} + {item.mangaName} + {item.chapterCount} + {item.creatorId} + + + + + ) + } + + ); +} \ No newline at end of file diff --git a/front/src/components/TableReader.jsx b/front/src/components/TableReader.jsx new file mode 100644 index 0000000..d4e1668 --- /dev/null +++ b/front/src/components/TableReader.jsx @@ -0,0 +1,24 @@ +import { useState } from 'react'; + + +export default function TableReader(props) { + + return ( + + { + props.items.map((item, index) => + + {item.id} + {item.readerName} + {item.hashedPassword} + + + + + ) + } + + ); +} \ No newline at end of file diff --git a/front/src/main.jsx b/front/src/main.jsx new file mode 100644 index 0000000..edd296f --- /dev/null +++ b/front/src/main.jsx @@ -0,0 +1,8 @@ +import React from 'react' +import ReactDOM from 'react-dom/client' +import App from './App' +import './style.css' + +ReactDOM.createRoot(document.getElementById('app')).render( + +) diff --git a/front/src/style.css b/front/src/style.css new file mode 100644 index 0000000..4f47273 --- /dev/null +++ b/front/src/style.css @@ -0,0 +1,102 @@ +/* html, +body { + background-color: #000000; + color: #ffffff; + padding: 0; + margin: 0; + font-family: sans-serif; + line-height: 1.15; + height: 100%; +} +header { + background-color: #3c3c3c; + color: #ffffff; +} +header a { + color: #ffffff; + text-decoration: none; + margin: 0 0.5em; +} +header a:hover { + text-decoration: underline; +} +#logo { + margin-left: 0.5em; +} +article a { + color: #ffffff; + text-decoration: none; + margin: 0.5em 0.5em; +} +header a:hover { + text-decoration: underline; +} +h1 { + font-size: 1.5em; +} +h2 { + font-size: 1.25em; +} +h3 { + font-size: 1.1em; +} +footer { + background-color: #9c9c9c; + color: #ffffff; + height: 32px; + padding: 0.5em; +} +.manga_pages{ + display: flex; + flex-direction: column; + align-items: center; +} +.catalog_wrapper{ + display: flex; + width: 73%; + flex-direction: column; +} +.catalog_article{ + display: flex; +} +.poster{ + width:140px; +} +th { + border: 0px solid rgb(255, 255, 255); +} +.added_manga{ + display: flex; + flex-direction: column; +} +@media (min-width: 992px) { + .manga_pages img{ + max-width: 900px; + width: auto; + height: auto; + } + } + .flex_grow { + flex-grow: 1; + display: flex; + align-items: center; +} + @media (min-width: 1024px){ +.article_1 { + max-width: -webkit-calc(1600px + (100vw/64*7)*2); + max-width: -moz-calc(1600px + (100vw/64*7)*2); + max-width: calc(1600px + (100vw/64*7)*2); + padding-left: -webkit-calc(100vw/64*7); + padding-left: -moz-calc(100vw/64*7); + padding-left: calc(100vw/64*7); + padding-right: -webkit-calc(100vw/64*7); + padding-right: -moz-calc(100vw/64*7); + padding-right: calc(100vw/64*7); +} +} + + +.registration_div { + width: 100%; + height: 100%; +} */ \ No newline at end of file