@@ -1169,7 +1169,9 @@ const app = new Elysia({
1169
1169
px-2 py-2
1170
1170
sm:px-4
1171
1171
` }
1172
- />
1172
+ >
1173
+ < span class = "sr-only" > Expand details</ span >
1174
+ </ th >
1173
1175
< th
1174
1176
class = { `
1175
1177
px-2 py-2
@@ -1216,10 +1218,10 @@ const app = new Elysia({
1216
1218
< tbody >
1217
1219
{ userJobs . map ( ( job ) => (
1218
1220
< >
1219
- < tr id = { `job-row-${ job . id } ` } >
1221
+ < tr key = { `job- ${ job . id } ` as any } id = { `job-row-${ job . id } ` } >
1220
1222
< td
1221
- class = "cursor-pointer"
1222
- onclick = { `toggleJobDetails( ${ job . id } )` }
1223
+ class = "job-details-toggle cursor-pointer"
1224
+ data-job-id = { job . id }
1223
1225
>
1224
1226
< svg
1225
1227
id = { `arrow-${ job . id } ` }
@@ -1261,36 +1263,41 @@ const app = new Elysia({
1261
1263
< div class = "mb-1 font-semibold" >
1262
1264
Detailed File Information:
1263
1265
</ div >
1264
- { job . files_detailed . map ( ( file : Filename ) => (
1265
- < div class = "flex items-center" >
1266
- < span
1267
- class = "w-5/12 truncate"
1268
- title = { file . file_name }
1269
- safe
1266
+ { job . files_detailed . map (
1267
+ ( file : Filename , index : number ) => (
1268
+ < div
1269
+ key = { String ( file . id ) as any }
1270
+ class = "flex items-center"
1270
1271
>
1271
- { file . file_name }
1272
- </ span >
1273
- < svg
1274
- xmlns = "http://www.w3.org/2000/svg"
1275
- viewBox = "0 0 20 20"
1276
- fill = "currentColor"
1277
- class = "w-4 h-4 inline-block mx-2 text-neutral-500"
1278
- >
1279
- < path
1280
- fill-rule = "evenodd"
1281
- 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"
1282
- clip-rule = "evenodd"
1283
- />
1284
- </ svg >
1285
- < span
1286
- class = "w-5/12 truncate"
1287
- title = { file . output_file_name }
1288
- safe
1289
- >
1290
- { file . output_file_name }
1291
- </ span >
1292
- </ div >
1293
- ) ) }
1272
+ < span
1273
+ class = "w-5/12 truncate"
1274
+ title = { file . file_name }
1275
+ safe
1276
+ >
1277
+ { file . file_name }
1278
+ </ span >
1279
+ < svg
1280
+ xmlns = "http://www.w3.org/2000/svg"
1281
+ viewBox = "0 0 20 20"
1282
+ fill = "currentColor"
1283
+ class = "w-4 h-4 inline-block mx-2 text-neutral-500"
1284
+ >
1285
+ < path
1286
+ fill-rule = "evenodd"
1287
+ 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"
1288
+ clip-rule = "evenodd"
1289
+ />
1290
+ </ svg >
1291
+ < span
1292
+ class = "w-5/12 truncate"
1293
+ title = { file . output_file_name }
1294
+ safe
1295
+ >
1296
+ { file . output_file_name }
1297
+ </ span >
1298
+ </ div >
1299
+ ) ,
1300
+ ) }
1294
1301
</ div >
1295
1302
</ td >
1296
1303
</ tr >
@@ -1302,18 +1309,28 @@ const app = new Elysia({
1302
1309
</ main >
1303
1310
< script >
1304
1311
{ `
1305
- function toggleJobDetails(jobId) {
1306
- const detailsRow = document.getElementById(\`details-\${jobId}\`);
1307
- const arrow = document.getElementById(\`arrow-\${jobId}\`);
1308
- if (detailsRow && arrow) {
1309
- detailsRow.classList.toggle("hidden");
1310
- if (detailsRow.classList.contains("hidden")) {
1311
- arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />';
1312
- } else {
1313
- arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />';
1314
- }
1315
- }
1316
- }
1312
+ document.addEventListener('DOMContentLoaded', () => {
1313
+ const toggles = document.querySelectorAll('.job-details-toggle');
1314
+ toggles.forEach(toggle => {
1315
+ toggle.addEventListener('click', function() {
1316
+ const jobId = this.dataset.jobId;
1317
+ const detailsRow = document.getElementById(\`details-\${jobId}\`);
1318
+ // The arrow SVG itself has the ID arrow-\${jobId}
1319
+ const arrow = document.getElementById(\`arrow-\${jobId}\`);
1320
+
1321
+ if (detailsRow && arrow) {
1322
+ detailsRow.classList.toggle("hidden");
1323
+ if (detailsRow.classList.contains("hidden")) {
1324
+ // Right-facing arrow (collapsed)
1325
+ arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />';
1326
+ } else {
1327
+ // Down-facing arrow (expanded)
1328
+ arrow.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />';
1329
+ }
1330
+ }
1331
+ });
1332
+ });
1333
+ });
1317
1334
` }
1318
1335
</ script >
1319
1336
</ >
0 commit comments