blarg/resources/views/files/list.html

{% extends "blarg/views/templates/base.html" %}

{% block content %}

<div class="page-header">
	<h2>Index of {{path}}</h2>
</div>

{% if success %}
<div class="alert alert-success">{{success}}</div>
{% endif %}
{% if error %}
<div class="alert alert-error">{{error}}</div>
{% endif %}
{% if notice %}
<div class="alert alert-info">{{notice}}</div>
{% endif %}

<div>
	<div class="pull-left form-inline">
		<select id="tree">
		{% for folder in tree %}
		<option{% ifequal folder path %} selected{% endifequal %}>{{folder}}</option>
		{% endfor %}
		</select>
		<a class="btn" href="#" id="tree-selector">Go</a>
	</div>
	<div class="pull-right">
		<a class="btn btn-primary" href="#" data-toggle="modal" data-target="#newFileModal">Upload File</a>
	</div>
	<div class="clearfix"></div>
</div>

<div class="file-list-container">
	{% if not files|is-empty %}
	<table class="table table-hover table-condensed">
		<thead>
			<tr>
				<th width="440px">Filename</th>
				<th width="100px">Size</th>
				<th width="240px">Last Modified</th>
				<th width="160px">&nbsp;</th>
			</tr>
		</thead>
		<tbody>
			{% for file in files %}
			<tr{% if not file.published %} class="unpublished-file"{% endif %}>
				<td>
					<a href="{{context}}/files{{path}}{{file.filename}}"><i class="icon-file"></i>  {{file.filename}}</a><br />
					<small class="muted">{{file.content-type}}</small>
				</td>
				<td>{{file.size}}</td>
				<td>{{file.last_modified|to_fulltime}}</td>
				<td style="text-align: right;">
					<a class="btn btn-warning" title="Update File" data-updatefileid="{{file.id}}" href="#"><i class="icon-pencil icon-white"></i></a>
					{% if file.published %}
					<a class="btn btn-warning" title="Unpublish File" href="{{context}}/unpublishfile{{file.id}}?returnpath={{path}}"><i class="icon-minus-sign icon-white"></i></a>
					{% endif %}
					{% if not file.published %}
					<a class="btn btn-success" title="Publish File" href="{{context}}/publishfile{{file.id}}?returnpath={{path}}"><i class="icon-ok-sign icon-white"></i></a>
					{% endif %}
					<a class="btn btn-danger" title="Delete File" data-deletefileid="{{file.id}}" href="#"><i class="icon-remove icon-white"></i></a>
				</td>
			</tr>
			{% endfor %}
		</tbody>
	</table>
	{% else %}
	<p class="text-center">No files found.</p>
	{% endif %}
</div>

<div id="newFileModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="newFileModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h3 id="newFileModalLabel">Upload File</h3>
	</div>
	<form action="{{context}}/uploadfile?returnpath={{path}}" method="post" enctype="multipart/form-data" class="form-horizontal">
		<input type="hidden" id="newPath" name="path" value="{{path}}" />
		<div class="modal-body">
			<div class="control-group">
				<label class="control-label" for="newFile">Upload File</label>
				<div class="controls">
					<input type="file" id="newFile" name="file" placeholder="File" />
				</div>
			</div>
			<p>If a file exists in this directory with the same filename as the one uploaded it will be updated automatically.</p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
			<button type="submit" class="btn btn-primary">Upload</button>
		</div>
	</form>
</div>

<div id="updateFileModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="updateFileModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h3 id="updateFileModalLabel">Update File</h3>
	</div>
	<form action="{{context}}/updatefile?returnpath={{path}}" method="post" enctype="multipart/form-data" class="form-horizontal">
		<input type="hidden" id="updateFileId" name="id" />
		<div class="modal-body">
			<p>Select a file to upload over top of this file with:</p> 
			<p><strong id="updateFileModalFilename"></strong></p>
			<div class="control-group">
				<label class="control-label" for="updateFile">Upload File</label>
				<div class="controls">
					<input type="file" id="updateFile" name="file" placeholder="File" />
				</div>
			</div>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
			<button type="submit" class="btn btn-primary">Upload</button>
		</div>
	</form>
</div>

<div id="deleteFileModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="deleteFileModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h3 id="deleteFileModalLabel">Delete File</h3>
	</div>
	<form action="{{context}}/deletefile?returnpath={{path}}" method="post" class="form-horizontal">
		<input type="hidden" id="deleteFileId" name="id" />
		<div class="modal-body">
			<p>Confirm that you would like to delete the following file:</p>
			<p><strong id="deleteFileModalFilename"></strong></p>
		</div>
		<div class="modal-footer">
			<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
			<button type="submit" class="btn btn-primary">Delete</button>
		</div>
	</form>
</div>

<script type="text/javascript">
$(document).ready(function() {
	$('#tree').combobox({force_match: false});
	$('#tree').data('combobox').val('{{path}}');
});

$('#tree-selector').click(function() {
	var path = $('#tree').data('combobox').val();
	window.location.href = '{{context}}/listfiles' + path;
});

$('a[data-updatefileid]').click(function() {
	var fileId = $(this).data('updatefileid');

	$('#updateFileModal').modal({backdrop: 'static', keyboard: false});
	$('#updateFileId').val(fileId);
	$('#updateFileModalFilename').text(fileId);
});

$('a[data-deletefileid]').click(function() {
	var fileId = $(this).data('deletefileid');

	$('#deleteFileModal').modal({backdrop: 'static', keyboard: false});
	$('#deleteFileId').val(fileId);
	$('#deleteFileModalFilename').text(fileId);
});

</script>

{% endblock %}