Add shot status indicator on the left

attract/static/js/tasks.js

@@ -69,8 +69,8 @@ function shot_open(shot_id, project_url) {
 
     $('#col_right .col_header span.header_text').text('Shot details');
 
-    $('#shot-list').find('a').removeClass('active');
-    $('#shot-link' + shot_id).addClass('active');
+    $('[id^="shot-"]').removeClass('active');
+    $('#shot-' + shot_id).addClass('active');
 
     var shot_url = '/attract/' + project_url + '/shots/' + shot_id;
     console.log('shot_url is ' + shot_url);

src/templates/attract/shots/for_project.jade

@@ -11,6 +11,7 @@
 	.table#shot-list
 		.table-head
 			.table-row
+				.table-cell.shot-status
 				.table-cell.shot-thumbnail
 					span.collapser Thumbnail
 				.table-cell.shot-name
@@ -21,7 +22,10 @@
 				| {% endfor %}
 		.table-body
 			| {% for shot in shots %}
-			.table-row(id="shot-{{ shot._id }}")
+			.table-row(
+				id="shot-{{ shot._id }}",
+				class="status-{{ shot.properties.status }}")
+				.table-cell.shot-status
 				.table-cell.shot-thumbnail
 					a(
 						id="shot-link-{{ shot._id }}"
@@ -41,10 +45,9 @@
 						id="task-{{ task._id }}",
 						href="javascript:task_open('{{ task._id }}', '{{ project.url }}');",
 						class="status-{{ task.properties.status }}")
-						span(class="task-name-{{ task._id }}") {{ task.name }}
 					| {% endfor %}
 					| {% if not tasks_for_shots[shot._id][task_type] %}
-					a(
+					a.task-add(
 						href="javascript:task_create('{{ shot._id }}', '{{ project.url }}', '{{ task_type }}');")
 						| + Task
 					| {% endif %}
@@ -69,15 +72,19 @@ script.
 		$(function() { shot_open('{{ open_shot_id }}', '{{ project.url }}'); });
 	{% endif %}
 
+
 	$('.table-head .table-cell span').on('click', function(e){
 		e.stopPropagation();
 
+		/* We need to find every cell matching the same classes */
 		var same_cells = '.' + $(this).parent().attr('class').split(' ').join('.');
 		$(same_cells).hide();
+		/* Add the spacer which we later click to expand  */
 		$('<div class="table-cell-spacer"></div>').insertAfter(same_cells);
 	});
 
 	$('body').on('click', '.table-cell-spacer', function(){
+		/* We need to find every cell matching the same classes */
 		var same_cells = '.' + $(this).prev().attr('class').split(' ').join('.');
 		$(same_cells).show();
 		$(same_cells).next().remove();