attract/src/templates/attract/shots/for_project.jade

| {% extends 'attract/layout.html' %}
| {% block bodyattrs %}{{ super() }}data-context='shot'{% endblock %}
| {% block page_title %}Shots - {{ project.name }}{% endblock %}
| {% block body %}
#col_main
	.col_header.task-list-header
		a(href="") Shots ({{ shots | count }})
		a.task-project(href="{{url_for('projects.view', project_url=project.url)}}") {{ project.name }}

		| {# Not allowed for the moment. Shots are added via the Sequencer
		a#task-add(href="javascript:shot_create('{{ project.url }}');") + Create Shot
		| #}

	.table#shot-list
		.table-head
			.table-row
				.table-cell.shot-status
				.table-cell.shot-thumbnail
					span.collapser Thumbnail
				.table-cell.shot-name
					span.collapser Name
				| {% for task_type in task_types %}
				.table-cell.task-type(class="{{ task_type }}")
					span.collapser {{ task_type or 'other' }}
				| {% endfor %}
		.table-body
			| {% for shot in shots %}
			.table-row(
				id="shot-{{ shot._id }}",
				class="status-{{ shot.properties.status }}")
				.table-cell.shot-status
				.table-cell.shot-thumbnail
					a(
						data-shot-id="{{ shot._id }}",
						href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
						class="status-{{ shot.properties.status }} shot-link")
						img(src="http://placehold.it/100x60")
				.table-cell.shot-name
					a(
						data-shot-id="{{ shot._id }}",
						href="{{ url_for('attract.shots.perproject.view_shot', project_url=project.url, shot_id=shot._id) }}",
						class="status-{{ shot.properties.status }} shot-link")
						span(class="shot-name-{{ shot._id }}") {{ shot.name }}
				| {% for task_type in task_types %}
				.table-cell.task-type(class="{{ task_type }}")
					| {% for task in tasks_for_shots[shot._id][task_type] %}
					a(
						data-task-id="{{ task._id }}",
						id="task-{{ task._id }}",
						href="{{ url_for('attract.shots.perproject.with_task', project_url=project.url, task_id=task._id) }}",
						class="status-{{ task.properties.status }} task-link",
						title="Task: {{ task.name }}")
					| {% endfor %}
					a.task-add(
						title="Add a new '{{ task_type }}' task",
						class="task-add-link {% if tasks_for_shots[shot._id][task_type] %}hidden{% endif %}"
						href="javascript:task_create('{{ shot._id }}', '{{ project.url }}', '{{ task_type }}');")
						| + Task
				| {% endfor %}
			| {% endfor %}

.col-splitter

#col_right
	.col_header
		span.header_text Shot details
		#status-bar
	#item-details

| {% endblock %}
| {% block footer_scripts %}
script.
	{% if open_task_id %}
		$(function() { item_open('{{ open_task_id }}', 'task', false); });
	{% endif %}
	{% if open_shot_id %}
		$(function() { item_open('{{ open_shot_id }}', 'shot', false); });
	{% endif %}

	var same_cells;

	$('.table-head .table-cell span').on('click', function(e){
		e.stopPropagation();

		/* We need to find every cell matching the same classes */
		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 */
		same_cells = '.' + $(this).prev().attr('class').split(' ').join('.');
		$(same_cells).show();
		$(same_cells).next().remove();
	});

	$('.table-body .table-cell').mouseenter(function(){
		same_cells = '.' + $(this).attr('class').split(' ').join('.');
		$('.table-head ' + same_cells).addClass('highlight');
	}).mouseleave(function(){
		same_cells = '.' + $(this).attr('class').split(' ').join('.');
		$('.table-head ' + same_cells).removeClass('highlight');
	});


	$('.table-head .table-cell').mouseenter(function(){
		same_cells = '.' + $(this).attr('class').split(' ').join('.');
		$('.table-body ' + same_cells).addClass('highlight');
	}).mouseleave(function(){
		same_cells = '.' + $(this).attr('class').split(' ').join('.');
		$('.table-body ' + same_cells).removeClass('highlight');
	});

script(src="{{ url_for('static_attract', filename='assets/js/vendor/jquery-resizable.min.js')}}")
script.
	$("#col_main").resizable({
		handleSelector: ".col-splitter",
		resizeHeight: false
	});

| {% endblock footer_scripts %}