glax/Tranga-Website
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Added button to open Search-dialog

Browse Source
This commit is contained in:
glax 2024-10-19 16:28:49 +02:00
parent 2f9eb61377
commit daa05a0b4d
4 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
Website/App.tsx
View File

@ -8,6 +8,13 @@ import './styles/Manga.css'
export default function App(){ export default function App(){
const [content, setContent] = React.useState<ReactElement>(); const [content, setContent] = React.useState<ReactElement>();
function ShowSearch() {
setContent(<>
<Search />
<MonitorJobsList onStartSearch={ShowSearch} />
</>);
}
useEffect(() => { useEffect(() => {
setContent(<h1>Testing connection to backend...</h1>) setContent(<h1>Testing connection to backend...</h1>)
getData('http://127.0.0.1:6531/v2/Ping').then((result) => { getData('http://127.0.0.1:6531/v2/Ping').then((result) => {
@ -16,8 +23,7 @@ export default function App(){
setContent(<h1>No connection to backend</h1>); setContent(<h1>No connection to backend</h1>);
}else{ }else{
setContent(<> setContent(<>
<Search /> <MonitorJobsList onStartSearch={ShowSearch} />
<MonitorJobsList />
</>) </>)
} }
}) })

19
Website/modules/MonitorJobsList.tsx
View File

@ -1,11 +1,11 @@
import React, {MouseEventHandler, useEffect} from 'react'; import React, {MouseEventHandler, ReactElement, useEffect} from 'react';
import {Job} from './Job'; import {Job} from './Job';
import '../styles/monitorMangaList.css'; import '../styles/monitorMangaList.css';
import IJob from "./interfaces/IJob"; import IJob from "./interfaces/IJob";
import IManga, {HTMLFromIManga} from "./interfaces/IManga"; import IManga, {HTMLFromIManga} from "./interfaces/IManga";
import {Manga} from './Manga'; import {Manga} from './Manga';
export default function MonitorJobsList(){ export default function MonitorJobsList({onStartSearch} : {onStartSearch() : void}){
const [MonitoringJobs, setMonitoringJobs] = React.useState<IJob[]>([]); const [MonitoringJobs, setMonitoringJobs] = React.useState<IJob[]>([]);
const [AllManga, setAllManga] = React.useState<IManga[]>([]); const [AllManga, setAllManga] = React.useState<IManga[]>([]);
@ -41,11 +41,24 @@ export default function MonitorJobsList(){
Job.DeleteJob(jobId); Job.DeleteJob(jobId);
} }
function StartSearchMangaEntry() : ReactElement {
return (<div key="monitorMangaEntry.StartSearch" className="monitorMangaEntry" onClick={onStartSearch}>
<div className="Manga" key="StartSearch.Manga">
<img src="../media/blahaj.png"></img>
<div>
<p style={{textAlign: "center", width: "100%"}} className="Manga-name">Add new Manga</p>
<p style={{fontSize: "42pt", textAlign: "center"}}>+</p>
</div>
</div>
</div>);
}
return ( return (
<div id="MonitorMangaList"> <div id="MonitorMangaList">
{StartSearchMangaEntry()}
{AllManga.map((manga: IManga) => { {AllManga.map((manga: IManga) => {
const job = MonitoringJobs.find(job => job.mangaInternalId == manga.internalId); const job = MonitoringJobs.find(job => job.mangaInternalId == manga.internalId);
if(job === undefined || job == null) if (job === undefined || job == null)
return <div>Error. Could not find matching job for {manga.internalId}</div> return <div>Error. Could not find matching job for {manga.internalId}</div>
return <div key={"monitorMangaEntry." + manga.internalId} className="monitorMangaEntry"> return <div key={"monitorMangaEntry." + manga.internalId} className="monitorMangaEntry">
{HTMLFromIManga(manga)} {HTMLFromIManga(manga)}

2
Website/modules/interfaces/IManga.tsx
View File

@ -41,9 +41,9 @@ export function HTMLFromIManga(manga: IManga) : ReactElement {
<div className="Manga" key={manga.internalId}> <div className="Manga" key={manga.internalId}>
<img src={Manga.GetMangaCoverUrl(manga.internalId)}></img> <img src={Manga.GetMangaCoverUrl(manga.internalId)}></img>
<div> <div>
<p className="Manga-name">{manga.sortName}</p>
<p className="pill connector-name">{manga.mangaConnector.name}</p> <p className="pill connector-name">{manga.mangaConnector.name}</p>
<div className="Manga-status" release-status={ReleaseStatusFromNumber(manga.releaseStatus)}></div> <div className="Manga-status" release-status={ReleaseStatusFromNumber(manga.releaseStatus)}></div>
<p className="Manga-name">{manga.sortName}</p>
</div> </div>
</div>); </div>);
} }

16
Website/styles/Manga.css
View File

@ -17,7 +17,7 @@
height: 300px; height: 300px;
border-radius: 5px; border-radius: 5px;
margin: 10px 10px; margin: 10px 10px;
padding: 15px 19px; padding: 14px 20px;
position: relative; position: relative;
flex-shrink: 0; flex-shrink: 0;
} }
@ -113,7 +113,15 @@
z-index: 0; z-index: 0;
} }
.Manga > div { .Manga p {
position: absolute; margin: 2px 0;
z-index: 1; }
.Manga > div {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
left: 0;
top: 0;
} }