Add delete and startnow buttons to Monitoring Entries

nowrap tags in searchresults

Website/modules/MonitorJobsList.tsx

@@ -5,6 +5,8 @@ import IJob from "./interfaces/IJob";
 import IManga, {CoverCard} from "./interfaces/IManga";
 import {Manga} from './Manga';
 import '../styles/MangaCoverCard.css'
+import Icon from '@mdi/react';
+import { mdiTrashCanOutline, mdiPlayBoxOutline } from '@mdi/js';
 
 export default function MonitorJobsList({onStartSearch, onJobsChanged} : {onStartSearch() : void, onJobsChanged: EventHandler<any>}) {
     const [MonitoringJobs, setMonitoringJobs] = useState<IJob[]>([]);
@@ -28,11 +30,6 @@ export default function MonitorJobsList({onStartSearch, onJobsChanged} : {onStar
         UpdateMonitoringJobsList();
     }, []);
 
-    const DeleteJob : MouseEventHandler = (e) => {
-        const jobId = e.currentTarget.id;
-        Job.DeleteJob(jobId).then(() => onJobsChanged(jobId));
-    }
-
     function UpdateMonitoringJobsList(){
         console.debug("Updating MonitoringJobsList");
         Job.GetMonitoringJobs()
@@ -56,6 +53,18 @@ export default function MonitorJobsList({onStartSearch, onJobsChanged} : {onStar
         </div>);
     }
 
+    const DeleteJob : MouseEventHandler = (e) => {
+        const jobId = e.currentTarget.id.slice(e.currentTarget.id.indexOf("-")+1);
+        console.info(`Pressed ${e.currentTarget.id} => ${jobId}`);
+        Job.DeleteJob(jobId).then(() => onJobsChanged(jobId));
+    }
+
+    const StartJob : MouseEventHandler = (e) => {
+        const jobId = e.currentTarget.id.slice(e.currentTarget.id.indexOf("-")+1);
+        console.info(`Pressed ${e.currentTarget.id} => ${jobId}`);
+        Job.StartJob(jobId);
+    }
+
     return (
         <div id="MonitorMangaList">
             {StartSearchMangaEntry()}
@@ -63,10 +72,12 @@ export default function MonitorJobsList({onStartSearch, onJobsChanged} : {onStar
                 const job = MonitoringJobs.find(job => job.mangaInternalId == manga.internalId);
                 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">
+                return <div key={"monitorMangaEntry-" + manga.internalId} className="monitorMangaEntry">
                     {CoverCard(manga)}
-                    {job.id}
-                    <button id={job.id} onClick={DeleteJob}>Delete</button>
+                    <div className="MangaActionButtons">
+                        <button id={"Delete-"+job.id} className="DeleteJobButton" onClick={DeleteJob}><Icon path={mdiTrashCanOutline} size={1.5} /></button>
+                        <button id={"Start-"+job.id} className="StartJobNowButton" onClick={StartJob}><Icon path={mdiPlayBoxOutline} size={1.5} /></button>
+                    </div>
                 </div>;
             })}
         </div>)

Website/modules/interfaces/IManga.tsx

@@ -59,11 +59,11 @@ export function SearchResult(manga: IManga, jobsChanged: EventHandler<any>) : Re
             <p className="connector-name">{manga.mangaConnector.name}</p>
             <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>
-            <ul className="Manga-tags">
-                {manga.authors.map(author => <li className="Manga-author" key={manga.internalId + "-author-" + author}> <Icon path={mdiAccountEdit} size={0.5} /> {author}</li>)}
-                {manga.tags.map(tag => <li className="Manga-tag" key={manga.internalId + "-tag-" + tag}><Icon path={mdiTagTextOutline} size={0.5} /> {tag}</li>)}
-            </ul>
-            <MarkdownPreview className="Manga-description" source={manga.description} style={{ backgroundColor: "transparent", color: "black", padding: 16 }} />
+            <div className="Manga-tags">
+                {manga.authors.map(author => <p className="Manga-author" key={manga.internalId + "-author-" + author}> <Icon path={mdiAccountEdit} size={0.5} /> {author}</p>)}
+                {manga.tags.map(tag => <p className="Manga-tag" key={manga.internalId + "-tag-" + tag}><Icon path={mdiTagTextOutline} size={0.5} /> {tag}</p>)}
+            </div>
+            <MarkdownPreview className="Manga-description" source={manga.description} style={{ backgroundColor: "transparent", color: "black" }} />
             <button className="Manga-AddButton" onClick={(e) => {
                 Job.CreateJob(manga.internalId, "MonitorManga", "03:00:00").then(() => jobsChanged(manga.internalId));
             }}>Monitor

Website/styles/MangaSearchResult.css

@@ -7,8 +7,8 @@
     width: fit-content;
     height: 328px;
     display: grid;
-    grid-template-columns: 220px 600px 50px;
-    grid-template-rows: 40px 40px 200px auto;
+    grid-template-columns: 220px 600px 80px;
+    grid-template-rows: 55px 55px 190px auto;
     column-gap: 10px;
     grid-template-areas:
     "cover header header"
@@ -54,20 +54,25 @@
 .SearchResult > .Manga-name {
     grid-area: header;
     color: black;
+    padding: 0 30px 0 0;
 }
 
 .SearchResult > .Manga-tags {
+    display: flex;
+    flex-direction: row;
     grid-area: alltags;
     color: white;
     padding: 0;
     margin: 0;
+    white-space: nowrap;
 }
 
-.SearchResult > ul > li {
-    display: inline;
+.SearchResult > .Manga-tags p {
     margin: 0 2px;
     padding: 5px;
     font-size: 10pt;
+    height: fit-content;
+    width: min-content;
 }
 
 .SearchResult .Manga-author {
@@ -81,6 +86,7 @@
 .SearchResult > .Manga-description {
     grid-area: description;
     color: black;
+    overflow-y: scroll;
 }
 
 .SearchResult > .Manga-AddButton {
@@ -91,9 +97,6 @@
     width: fit-content;
     height: fit-content;
     padding: 5px 10px;
-    position: absolute;
-    bottom: 0;
-    right: 0;
 }
 
 .SearchResult > .Manga-AddButton:hover {
@@ -107,5 +110,36 @@
 .SearchResult a img {
     filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(7480%) hue-rotate(141deg) brightness(111%) contrast(99%);
     position: relative;
-    bottom: 10px;
+    bottom: 7px;
+}
+
+.monitorMangaEntry {
+    position: relative;
+}
+
+.MangaActionButtons  {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.MangaActionButtons > button {
+    position: absolute;
+    margin: 10px;
+    border: 0;
+    background: none;
+}
+
+.DeleteJobButton {
+    bottom: 0;
+    left: 0;
+    filter: invert(21%) sepia(63%) saturate(7443%) hue-rotate(355deg) brightness(93%) contrast(118%);
+}
+
+.StartJobNowButton {
+    bottom: 0;
+    right: 0;
+    filter: invert(58%) sepia(16%) saturate(4393%) hue-rotate(103deg) brightness(102%) contrast(103%);
 }