Sith/sas/templates/sas/album.jinja
2016-11-30 09:28:54 +01:00

160 lines
4.9 KiB
Django/Jinja

{% extends "core/base.jinja" %}
{% block title %}
{% trans %}SAS{% endtrans %}
{% endblock %}
{% macro print_path(file) %}
{% if file and file.parent %}
{{ print_path(file.parent) }}
<a href="{{ url('sas:album', album_id=file.id) }}">{{ file.get_display_name() }}</a> >
{% endif %}
{% endmacro %}
{% block content %}
<a href="{{ url('sas:main') }}">SAS</a> > {{ print_path(album.parent) }} {{ album.get_display_name() }}
<h3>{{ album.get_display_name() }}</h3>
<a href="{{ url('sas:album_edit', album_id=album.id) }}">{% trans %}Edit{% endtrans %}</a><br>
<hr>
<div>
{% for a in album.children.filter(is_folder=True, is_moderated=True).order_by('-id') %}
<a href="{{ url("sas:album", album_id=a.id) }}" style="display: inline-block">
<div class="album">
<div>
{% if a.file %}
<img src="{{ a.as_picture.get_download_url() }}" alt="{% trans %}preview{% endtrans %}">
{% elif a.children.filter(is_folder=False, is_moderated=True).exists() %}
<img src="{{ a.children.filter(is_folder=False).first().as_picture.get_download_thumb_url() }}" alt="{% trans %}preview{% endtrans %}">
{% else %}
<img src="{{ static('core/img/sas.jpg') }}" alt="{% trans %}preview{% endtrans %}">
{% endif %}
</div>
{{ a.name }}
</div>
</a>
{% endfor %}
</div>
<div>
{% for p in album.children.filter(is_folder=False, is_moderated=True).order_by('id') %}
{% if p.as_picture.can_be_viewed_by(user) %}
<div class="picture">
<a href="{{ url("sas:picture", picture_id=p.id) }}#pict">
<img src="{{ p.as_picture.get_download_thumb_url() }}" alt="{{ p.get_display_name() }}" />
</a>
</div>
{% endif %}
{% endfor %}
</div>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p() }}
<p><input type="submit" value="{% trans %}Upload{% endtrans %}" /></p>
</form>
{% endblock %}
{% block script %}
{{ super() }}
<script>
$("form").submit(function (event) {
var formData = new FormData($(this)[0]);
if(formData.get('album_name') === '' && formData.get('images').name === '')
return false;
if(formData.get('images').name === '') {
return true;
}
event.preventDefault();
var errorlist;
if((errorlist = this.querySelector('ul.errorlist.nonfield')) === null) {
errorlist = document.createElement('ul');
errorlist.classList.add('errorlist', 'nonfield');
this.insertBefore(errorlist, this.firstElementChild);
}
while(errorlist.childElementCount > 0)
errorlist.removeChild(errorlist.firstElementChild);
var progress;
if((progress = this.querySelector('progress')) === null) {
progress = document.createElement('progress');
progress.value = 0;
var p = document.createElement('p');
p.appendChild(progress);
this.insertBefore(p, this.lastElementChild);
}
var dataHolder;
if(formData.get('album_name') !== '') {
dataHolder = new FormData();
dataHolder.set('csrfmiddlewaretoken', '{{ csrf_token }}');
dataHolder.set('album_name', formData.get('album_name'));
$.ajax({
method: 'POST',
data: dataHolder,
processData: false,
contentType: false,
success: onSuccess
});
}
var images = formData.getAll('images');
var imagesCount = images.length;
var completeCount = 0;
var poolSize = 5;
var imagePool = [];
while(images.length > 0 && imagePool.length < poolSize) {
var image = images.shift();
imagePool.push(image);
sendImage(image);
}
function sendImage(image) {
dataHolder = new FormData();
dataHolder.set('csrfmiddlewaretoken', '{{ csrf_token }}');
dataHolder.set('images', image);
$.ajax({
method: 'POST',
data: dataHolder,
processData: false,
contentType: false,
})
.done(onSuccess.bind(undefined, image))
.always(next.bind(undefined, image));
}
function next(image, status, jqXHR) {
var index;
if(index = imagePool.indexOf(image) !== -1) {
imagePool.splice(index, 1);
}
var nextImage;
if(nextImage = images.shift()) {
imagePool.push(nextImage);
sendImage(nextImage);
}
}
function onSuccess(image, data, status, jqXHR) {
if ($(data).find('.errorlist.nonfield')[0])
var errors = Array.from($(data).find('.errorlist.nonfield')[0].children);
else
var errors = []
while(errors.length > 0)
errorlist.appendChild(errors.shift());
progress.value = ++completeCount / imagesCount;
if(progress.value === 1 && errorlist.children.length === 0)
document.location.reload()
}
});
</script>
{% endblock %}