1 files changed, 34 insertions, 7 deletions
diff --git a/client/components/Tasks/TaskListView.jsx b/client/components/Tasks/TaskListView.jsx
index 47be794..b93ecc3 100644
--- a/client/components/Tasks/TaskListView.jsx
+++ b/client/components/Tasks/TaskListView.jsx
@@ -1,24 +1,51 @@
 import { h, Component } from 'preact'
 
+import format from '../../vendor/format.js'
 import FileLink from '../../containers/fileLink.js'
 
 export default function TaskListView (props) {
   const tasks = (props.tasks || []).map( (task, i) => {
-    return (
-      <div key={i}>
-        <span>{task.id}</span>
-        <span>{task.created_at}</span>
+    const created_at = format.verboseDate(task.created_at)
+    let files = []
+    let cancel
+    if (task.content_file) {
+      files.push(
         <span class='name'><FileLink file={task.content_file} /></span>
+      )
+    }
+    if (task.style_file) {
+      files.push(
         <span class='name'><FileLink file={task.style_file} /></span>
-        <span>α={task.alpha}</span>
-        <span class='name'><FileLink file={task.output_file} /></span>
+      )
+    }
+    if (! task.output_file && ! task.processing) {
+      cancel = (
+        <span class='cancel' onClick={() => props.cancelTask(task)}>x</span>
+      )
+    }
+    const completed = task.completed ? 'completed' : ''
+    let filename = task.output_file ? task.output_file.name :
+                   task.processing ? '(processing)' : '(waiting)'
+    return (
+      <div key={i}>
+        <div class='row'>
+          <span class='date'>{created_at.date}</span>
+          <span class='time'>{created_at.time}</span>
+          <span class={'name output ' + completed}><FileLink file={task.output_file}>{filename}</FileLink></span>
+          {cancel}
+        </div>
+        <div class='row'>
+          <span class='alpha'>α={task.alpha}</span>
+          {files}
+        </div>
       </div>
     )
         // <span class='name'>{task.result_file.name}</span>
   })
   return (
-    <div class='list'>
+    <div class='tasks list'>
       {tasks}
     </div>
   )
 }
+