paulmataruso/ConvertX
1
0
Fork 0
mirror of https://github.com/C4illin/ConvertX.git synced 2025-10-23 16:14:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: enhance job details display with file information

Browse Source 
- Added `files_detailed` property to the `Jobs` class to store detailed file information.
- Updated job listing to include a toggle for displaying detailed file information.
- Implemented a toggle function for showing/hiding detailed file rows in the UI.
This commit is contained in:
xeisenberg
2025-05-27 14:22:32 +05:30
committed by Emrik Östling
parent 40d1d8a191
commit 50725edd02
1 changed files with 103 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
src/index.tsx
View File

@@ -107,6 +107,7 @@ class Jobs {
date_created!: string;
status!: string;
num_files!: number;
files_detailed!: Filename[];
}
// enable WAL mode
@@ -1131,6 +1132,7 @@ const app = new Elysia({
.all(job.id);
job.finished_files = files.length;
job.files_detailed = files;
}
// filter out jobs with no files
@@ -1162,6 +1164,12 @@ const app = new Elysia({
>
<thead>
<tr>
<th
class={`
px-2 py-2
sm:px-4
`}
/>
<th
class={`
px-2 py-2
@@ -1207,30 +1215,107 @@ const app = new Elysia({
</thead>
<tbody>
{userJobs.map((job) => (
<tr>
<td safe>
{new Date(job.date_created).toLocaleTimeString()}
</td>
<td>{job.num_files}</td>
<td class="max-sm:hidden">{job.finished_files}</td>
<td safe>{job.status}</td>
<td>
<a
class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`${WEBROOT}/results/${job.id}`}
<>
<tr id={`job-row-${job.id}`}>
<td
class="cursor-pointer"
onclick={`toggleJobDetails(${job.id})`}
>
View
</a>
</td>
</tr>
<svg
id={`arrow-${job.id}`}
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="inline-block h-4 w-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 4.5l7.5 7.5-7.5 7.5"
/>
</svg>
</td>
<td safe>
{new Date(job.date_created).toLocaleTimeString()}
</td>
<td>{job.num_files}</td>
<td class="max-sm:hidden">{job.finished_files}</td>
<td safe>{job.status}</td>
<td>
<a
class={`
text-accent-500 underline
hover:text-accent-400
`}
href={`${WEBROOT}/results/${job.id}`}
>
View
</a>
</td>
</tr>
<tr id={`details-${job.id}`} class="hidden">
<td colspan="6">
<div class="p-2 text-sm text-neutral-500">
<div class="mb-1 font-semibold">
Detailed File Information:
</div>
{job.files_detailed.map((file: Filename) => (
<div class="flex items-center">
<span
class="w-5/12 truncate"
title={file.file_name}
safe
>
{file.file_name}
</span>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="w-4 h-4 inline-block mx-2 text-neutral-500"
>
<path
fill-rule="evenodd"
d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
clip-rule="evenodd"
/>
</svg>
<span
class="w-5/12 truncate"
title={file.output_file_name}
safe
>
{file.output_file_name}
</span>
</div>
))}
</div>
</td>
</tr>
</>
))}
</tbody>
</table>
</article>
</main>
<script>
{`
function toggleJobDetails(jobId) {
const detailsRow = document.getElementById(\`details-\${jobId}\`);
const arrow = document.getElementById(\`arrow-\${jobId}\`);
if (detailsRow && arrow) {
detailsRow.classList.toggle("hidden");
if (detailsRow.classList.contains("hidden")) {
arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />';
} else {
arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />';
}
}
}
`}
</script>
</>
</BaseHtml>
);