1 files changed, 73 insertions, 0 deletions
diff --git a/fbin/templates/files.html b/fbin/templates/files.html
new file mode 100644
index 0000000..cae04fa
--- /dev/null
+++ b/fbin/templates/files.html
@@ -0,0 +1,73 @@
+{% extends "base.html" %}
+{% block content %}
+<p>You have {{ files|length() }} uploaded files totaling {{ total_size }}.</p>
+<table class="table table-striped">
+<thead>
+	<tr>
+		<th>File</th>
+		<th></th>
+		<th>Size</th>
+		<th>Date</th>
+		<th></th>
+	</tr>
+</thead>
+<tbody>
+	{% for file in files %}
+	<tr>
+		<td>
+			<a href="{{ url_for('.file', hash = file.hash, filename = file.filename) }}" id="filename-{{ loop.index }}">{{ file.filename }}</a>
+		</td>
+		<td>
+			<small>
+				<a href="{{ url_for('.file', hash = file.hash) }}">hash</a>
+				{% if file.ext %}
+				&ndash; <a href="{{ url_for('.file', hash = file.hash, ext = file.ext) }}">ext.</a>
+				{% endif %}
+			</small>
+		</td>
+		<td>{{ file.formatted_size }}</td>
+		<td>{{ file.formatted_date }}</td>
+		<td>
+			<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#modal-filename" data-index="{{ loop.index }}" data-file-hash="{{ file.hash }}">
+				<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
+				<span class="sr-only">Rename</span>
+			</button>
+			<button type="button" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#modal-delete" data-index="{{ loop.index }}" data-file-hash="{{ file.hash }}">
+				<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+				<span class="sr-only">Delete</span>
+			</button>
+		</td>
+	</tr>
+	{% else %}
+	<tr><td><em>(No file uploads yet.)</em></td></tr>
+	{% endfor %}
+</tbody>
+</table>
+{% include "file-modals.html" %}
+{% endblock %}
+{% block scripts %}
+<script>
+$('#modal-filename').on('show.bs.modal', function(event) {
+	$('#modal-filename-spinner').hide();
+	var button = $(event.relatedTarget);
+	var filename = $('#filename-' + button.data('index')).text().trim();
+	$(this).find('input#filename').val(filename);
+	$(this).find('input.hash').val(button.data('file-hash'));
+}).on('shown.bs.modal', function(event) {
+	$(this).find('input#filename').focus();
+});
+$('#modal-filename-confirm').click(function(event) {
+	$('#modal-filename-spinner').show();
+});
+$('#modal-delete').on('show.bs.modal', function(event) {
+	$('#modal-delete-spinner').hide();
+	var button = $(event.relatedTarget);
+	var filename = $('#filename-' + button.data('index')).text().trim();
+	$(this).find('#modal-delete-filename').text(filename);
+	$(this).find('input.hash').val(button.data('file-hash'));
+});
+$('#modal-delete-confirm').click(function(event) {
+	$('#modal-delete-spinner').show();
+});
+</script>
+{% endblock %}