Added button to open Search-dialog

Website/App.tsx

@@ -8,6 +8,13 @@ import './styles/Manga.css'
 export default function App(){
     const [content, setContent] = React.useState<ReactElement>();
 
+    function ShowSearch() {
+        setContent(<>
+            <Search />
+            <MonitorJobsList onStartSearch={ShowSearch} />
+        </>);
+    }
+
     useEffect(() => {
         setContent(<h1>Testing connection to backend...</h1>)
         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>);
             }else{
                 setContent(<>
-                    <Search />
-                    <MonitorJobsList />
+                    <MonitorJobsList onStartSearch={ShowSearch} />
                     </>)
             }
         })

Website/modules/MonitorJobsList.tsx

@@ -1,11 +1,11 @@
-import React, {MouseEventHandler, useEffect} from 'react';
+import React, {MouseEventHandler, ReactElement, useEffect} from 'react';
 import {Job} from './Job';
 import '../styles/monitorMangaList.css';
 import IJob from "./interfaces/IJob";
 import IManga, {HTMLFromIManga} from "./interfaces/IManga";
 import {Manga} from './Manga';
 
-export default function MonitorJobsList(){
+export default function MonitorJobsList({onStartSearch} : {onStartSearch() : void}){
     const [MonitoringJobs, setMonitoringJobs] = React.useState<IJob[]>([]);
     const [AllManga, setAllManga] = React.useState<IManga[]>([]);
 
@@ -41,11 +41,24 @@ export default function MonitorJobsList(){
         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 (
         <div id="MonitorMangaList">
+            {StartSearchMangaEntry()}
             {AllManga.map((manga: IManga) => {
                 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 key={"monitorMangaEntry." + manga.internalId} className="monitorMangaEntry">
                     {HTMLFromIManga(manga)}

Website/modules/interfaces/IManga.tsx

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

Website/styles/Manga.css

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