Started populating tasklist mockup with data

app/static/app/js/classes/StatusCodes.js

@@ -0,0 +1,35 @@
+let statusCodes = {
+    10: {
+        descr: "Queued",
+        icon: "glyphicon glyphicon-hourglass"
+    },
+    20: {
+        descr: "Running",
+        icon: "fa fa-gear fa-spin fa-fw"
+    },
+    30: {
+        descr: "Failed",
+        icon: "glyphicon glyphicon-remove-circle"
+    },
+    40: {
+        descr: "Completed",
+        icon: "glyphicon glyphicon-ok-circle"
+    },
+    50: {
+        descr: "Canceled",
+        icon: "glyphicon glyphicon-ban-circle"
+    }
+};
+
+export default {
+    description: function(statusCode) {
+      if (statusCodes[statusCode]) return statusCodes[statusCode].descr;
+      else return "Uploading";
+    },
+
+    icon: function(statusCode){
+      if (statusCodes[statusCode]) return statusCodes[statusCode].icon;
+      else return "glyphicon glyphicon-upload";
+    }
+};
+

app/static/app/js/components/TaskListItem.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import '../css/TaskListItem.scss';
 import Console from '../Console';
+import statusCodes from '../classes/StatusCodes';
 
 class TaskListItem extends React.Component {
   constructor(){
@@ -38,7 +39,7 @@ class TaskListItem extends React.Component {
           <div className="row">
             <div className="col-md-4 no-padding">
               <div className="labels">
-                <strong>Status: </strong> Running<br/>
+                <strong>Status: </strong> {statusCodes.description(this.props.data.status)}<br/>
               </div>
             </div>
             <div className="col-md-8">
@@ -65,18 +66,28 @@ class TaskListItem extends React.Component {
       );
     }
 
+    let statusLabel = "";
+    if (this.props.data.last_error){
+      statusLabel = (<div className="status-label error" title={this.props.data.last_error}>{this.props.data.last_error}</div>);
+    }else{
+      statusLabel = (<div className={"status-label " + (this.props.data.status == 40 ? "done" : "")} title={statusCodes.description(this.props.data.status)}>{statusCodes.description(this.props.data.status)}</div>);
+    }
+
     return (
       <div className="task-list-item">
         <div className="row">
           <div className="col-md-5 name">
             <i onClick={this.toggleExpanded} className={"clickable fa " + (this.state.expanded ? "fa-minus-square-o" : " fa-plus-square-o")}></i> <a href="javascript:void(0);" onClick={this.toggleExpanded}>{name}</a>
           </div>
-          <div className="col-md-6 details">
+          <div className="col-md-3 details">
             <i className="fa fa-clock-o"></i> 00:00:00
             <i className="fa fa-image"></i> {this.props.data.images_count}
           </div> 
-          <div className="col-md-1 details text-right">
-            <i className="fa fa-gear fa-spin fa-fw"></i>
+          <div className="col-md-3">
+            {statusLabel}
+          </div>
+          <div className="col-md-1 text-right">
+            <i className={statusCodes.icon(this.props.data.status)}></i>
           </div>
         </div>
         {expanded}

app/static/app/js/css/TaskListItem.scss

@@ -6,6 +6,7 @@
     .row{
         margin: 0;
         padding: 4px;
+        padding-left: 8px;
 
         .no-padding{
             padding: 0;
@@ -31,6 +32,19 @@
         }
     }
 
+    .status-label{
+        padding: 4px;
+        width: 100%;
+        font-size: 90%;
+
+        &.done{
+            background-color: #cbffcd;
+        }
+        &.error{
+            background-color: #ffcbcb;
+        }
+    }
+
     .clickable:hover{
         cursor: pointer;
     }