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

Fix covers not loading

Browse Source
This commit is contained in:
glax 2024-10-20 20:24:00 +02:00
parent 0a0e901ef7
commit 5e4e64f019
4 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Website/App.tsx
View File

@ -45,7 +45,7 @@ export default function App(){
? <> ? <>
{showSearch {showSearch
? <> ? <>
<Search createJob={CreateJob} closeSearch={() => setShowSearch(false)} /> <Search apiUri={apiUri} createJob={CreateJob} closeSearch={() => setShowSearch(false)} />
<hr/> <hr/>
</> </>
: <></>} : <></>}

2
Website/modules/MonitorJobsList.tsx
View File

@ -83,7 +83,7 @@ export default function MonitorJobsList({onStartSearch, onJobsChanged, connected
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">
{CoverCard(manga)} {CoverCard(apiUri, manga)}
<div className="MangaActionButtons"> <div className="MangaActionButtons">
<div id={"Delete-"+job.id} className="DeleteJobButton" onClick={DeleteJob}><Icon path={mdiTrashCanOutline} size={1.5} /></div> <div id={"Delete-"+job.id} className="DeleteJobButton" onClick={DeleteJob}><Icon path={mdiTrashCanOutline} size={1.5} /></div>
<div id={"Start-"+job.id} className="StartJobNowButton" onClick={StartJob}><Icon path={mdiPlayBoxOutline} size={1.5} /></div> <div id={"Start-"+job.id} className="StartJobNowButton" onClick={StartJob}><Icon path={mdiPlayBoxOutline} size={1.5} /></div>

4
Website/modules/Search.tsx
View File

@ -6,7 +6,7 @@ import IManga, {SearchResult} from "./interfaces/IManga";
import '../styles/search.css'; import '../styles/search.css';
import '../styles/MangaSearchResult.css' import '../styles/MangaSearchResult.css'
export default function Search({createJob, closeSearch} : {createJob: (internalId: string, type: string) => void, closeSearch(): void}) { export default function Search({apiUri, createJob, closeSearch} : {apiUri: string, createJob: (internalId: string, type: string) => void, closeSearch(): void}) {
const [mangaConnectors, setConnectors] = useState<IMangaConnector[]>(); const [mangaConnectors, setConnectors] = useState<IMangaConnector[]>();
const [selectedConnector, setSelectedConnector] = useState<IMangaConnector>(); const [selectedConnector, setSelectedConnector] = useState<IMangaConnector>();
const [selectedLanguage, setSelectedLanguage] = useState<string>(); const [selectedLanguage, setSelectedLanguage] = useState<string>();
@ -106,7 +106,7 @@ export default function Search({createJob, closeSearch} : {createJob: (internalI
<div id="SearchResults"> <div id="SearchResults">
{searchResults === undefined {searchResults === undefined
? <p></p> ? <p></p>
: searchResults.map(result => SearchResult(result, createJob))} : searchResults.map(result => SearchResult(apiUri, result, createJob))}
</div> </div>
</div>) </div>)
} }

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

@ -40,10 +40,10 @@ export function ReleaseStatusFromNumber(n: number): string {
return ""; return "";
} }
export function CoverCard(manga: IManga) : ReactElement { export function CoverCard(apiUri: string, manga: IManga) : ReactElement {
return( return(
<div className="Manga" key={manga.internalId}> <div className="Manga" key={manga.internalId}>
<img src={Manga.GetMangaCoverUrl(manga.internalId)}></img> <img src={Manga.GetMangaCoverUrl(apiUri, manga.internalId)}></img>
<div> <div>
<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>
@ -52,10 +52,10 @@ export function CoverCard(manga: IManga) : ReactElement {
</div>); </div>);
} }
export function SearchResult(manga: IManga, createJob: (internalId: string, type: string) => void) : ReactElement { export function SearchResult(apiUri: string, manga: IManga, createJob: (internalId: string, type: string) => void) : ReactElement {
return( return(
<div className="SearchResult" key={manga.internalId}> <div className="SearchResult" key={manga.internalId}>
<img src={Manga.GetMangaCoverUrl(manga.internalId)}></img> <img src={Manga.GetMangaCoverUrl(apiUri, manga.internalId)}></img>
<p className="connector-name">{manga.mangaConnector.name}</p> <p className="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"><a href={manga.websiteUrl}>{manga.sortName}<img src="../../media/link.svg" /></a></p> <p className="Manga-name"><a href={manga.websiteUrl}>{manga.sortName}<img src="../../media/link.svg" /></a></p>