mirror of
https://github.com/ae-utbm/sith.git
synced 2025-07-11 20:39:23 +00:00
introduce djhtml as jinja+scss formater
This commit is contained in:
thomas girod
committed by
Bartuccio Antoine
Bartuccio Antoine
parent
13d0d2a300
commit
b25805e0a1
@ -2,247 +2,247 @@
|
||||
{% from "core/macros.jinja" import paginate %}
|
||||
|
||||
{%- block additional_css -%}
|
||||
<link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
|
||||
<link rel="stylesheet" href="{{ scss('sas/album.scss') }}">
|
||||
{%- endblock -%}
|
||||
|
||||
{% block title %}
|
||||
{% trans %}SAS{% endtrans %}
|
||||
{% 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 %}
|
||||
{% 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 %}
|
||||
<code>
|
||||
<a href="{{ url('sas:main') }}">SAS</a> / {{ print_path(album.parent) }} {{ album.get_display_name() }}
|
||||
</code>
|
||||
<code>
|
||||
<a href="{{ url('sas:main') }}">SAS</a> / {{ print_path(album.parent) }} {{ album.get_display_name() }}
|
||||
</code>
|
||||
|
||||
{% set edit_mode = user.can_edit(album) %}
|
||||
{% set start = timezone.now() %}
|
||||
{% set edit_mode = user.can_edit(album) %}
|
||||
{% set start = timezone.now() %}
|
||||
|
||||
{% if edit_mode %}
|
||||
<form action="" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
{% if edit_mode %}
|
||||
<form action="" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
|
||||
<div class="album-navbar">
|
||||
<h3>{{ album.get_display_name() }}</h3>
|
||||
<div class="album-navbar">
|
||||
<h3>{{ album.get_display_name() }}</h3>
|
||||
|
||||
<div class="toolbar">
|
||||
<a href="{{ url('sas:album_edit', album_id=album.id) }}">{% trans %}Edit{% endtrans %}</a>
|
||||
<input name="delete" type="submit" value="{% trans %}Delete{% endtrans %}">
|
||||
<input name="cut" type="submit" value="{% trans %}Cut{% endtrans %}">
|
||||
<input {% if not clipboard %}disabled{% endif %} name="paste" type="submit" value="{% trans %}Paste{% endtrans %}">
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<a href="{{ url('sas:album_edit', album_id=album.id) }}">{% trans %}Edit{% endtrans %}</a>
|
||||
<input name="delete" type="submit" value="{% trans %}Delete{% endtrans %}">
|
||||
<input name="cut" type="submit" value="{% trans %}Cut{% endtrans %}">
|
||||
<input {% if not clipboard %}disabled{% endif %} name="paste" type="submit" value="{% trans %}Paste{% endtrans %}">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if clipboard %}
|
||||
<div class="clipboard">
|
||||
{% trans %}Clipboard: {% endtrans %}
|
||||
<ul>
|
||||
{% for f in clipboard %}
|
||||
<li>{{ f.get_full_path() }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<input name="clear" type="submit" value="{% trans %}Clear clipboard{% endtrans %}">
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% if album.children_albums.count() > 0 %}
|
||||
<h4>{% trans %}Albums{% endtrans %}</h4>
|
||||
<div class="albums">
|
||||
{% for a in album.children_albums.order_by('-date') %}
|
||||
{% if a.can_be_viewed_by(user) %}
|
||||
<a href="{{ url('sas:album', album_id=a.id) }}">
|
||||
<div
|
||||
class="album{% if not a.is_moderated %} not_moderated{% endif %}"
|
||||
style="background-image: url('{% if a.file %}{{ a.get_download_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');"
|
||||
>
|
||||
{% if not a.is_moderated %}
|
||||
<div class="overlay"> </div>
|
||||
<div class="text">{% trans %}To be moderated{% endtrans %}</div>
|
||||
{% else %}
|
||||
<div class="text">{{ a.name }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if clipboard %}
|
||||
<div class="clipboard">
|
||||
{% trans %}Clipboard: {% endtrans %}
|
||||
<ul>
|
||||
{% for f in clipboard %}
|
||||
<li>{{ f.get_full_path() }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<input name="clear" type="submit" value="{% trans %}Clear clipboard{% endtrans %}">
|
||||
</div>
|
||||
{% if edit_mode %}
|
||||
<input type="checkbox" name="file_list" value="{{ a.id }}">
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{% if album.children_albums.count() > 0 %}
|
||||
<h4>{% trans %}Albums{% endtrans %}</h4>
|
||||
<div class="albums">
|
||||
{% for a in album.children_albums.order_by('-date') %}
|
||||
{% if a.can_be_viewed_by(user) %}
|
||||
<a href="{{ url('sas:album', album_id=a.id) }}">
|
||||
<div
|
||||
class="album{% if not a.is_moderated %} not_moderated{% endif %}"
|
||||
style="background-image: url('{% if a.file %}{{ a.get_download_url() }}{% else %}{{ static('core/img/sas.jpg') }}{% endif %}');"
|
||||
>
|
||||
{% if not a.is_moderated %}
|
||||
<div class="overlay"> </div>
|
||||
<div class="text">{% trans %}To be moderated{% endtrans %}</div>
|
||||
{% else %}
|
||||
<div class="text">{{ a.name }}</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if edit_mode %}
|
||||
<input type="checkbox" name="file_list" value="{{ a.id }}">
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<br>
|
||||
{% endif %}
|
||||
|
||||
<br>
|
||||
{% endif %}
|
||||
|
||||
<h4>{% trans %}Pictures{% endtrans %}</h4>
|
||||
{% if pictures | length != 0 %}
|
||||
<div class="photos">
|
||||
{% for p in pictures %}
|
||||
{% if p.can_be_viewed_by(user) %}
|
||||
<a href="{{ url('sas:picture', picture_id=p.id) }}#pict">
|
||||
<div
|
||||
class="photo {% if p.is_vertical %}vertical{% endif %}"
|
||||
style="background-image: url('{{ p.get_download_thumb_url() }}')"
|
||||
>
|
||||
{% if not p.is_moderated %}
|
||||
<div class="overlay"> </div>
|
||||
<div class="text">{% trans %}To be moderated{% endtrans %}</div>
|
||||
{% else %}
|
||||
<div class="text"> </div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if edit_mode %}
|
||||
<input type="checkbox" name="file_list" value="{{ p.id }}">
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% trans %}This album does not contain any photos.{% endtrans %}
|
||||
{% endif %}
|
||||
|
||||
{% if pictures.has_previous() or pictures.has_next() %}
|
||||
<div class="paginator">
|
||||
{{ paginate(pictures, paginator) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if edit_mode %}
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
{% if user.is_in_group(pk=settings.SITH_GROUP_SAS_ADMIN_ID) %}
|
||||
<form class="add-files" id="upload_form" action="" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="inputs">
|
||||
{{ form.as_p() }}
|
||||
|
||||
<input type="submit" value="{% trans %}Upload{% endtrans %}" />
|
||||
<h4>{% trans %}Pictures{% endtrans %}</h4>
|
||||
{% if pictures | length != 0 %}
|
||||
<div class="photos">
|
||||
{% for p in pictures %}
|
||||
{% if p.can_be_viewed_by(user) %}
|
||||
<a href="{{ url('sas:picture', picture_id=p.id) }}#pict">
|
||||
<div
|
||||
class="photo {% if p.is_vertical %}vertical{% endif %}"
|
||||
style="background-image: url('{{ p.get_download_thumb_url() }}')"
|
||||
>
|
||||
{% if not p.is_moderated %}
|
||||
<div class="overlay"> </div>
|
||||
<div class="text">{% trans %}To be moderated{% endtrans %}</div>
|
||||
{% else %}
|
||||
<div class="text"> </div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
{% if edit_mode %}
|
||||
<input type="checkbox" name="file_list" value="{{ p.id }}">
|
||||
{% endif %}
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% else %}
|
||||
{% trans %}This album does not contain any photos.{% endtrans %}
|
||||
{% endif %}
|
||||
|
||||
<hr>
|
||||
{% if pictures.has_previous() or pictures.has_next() %}
|
||||
<div class="paginator">
|
||||
{{ paginate(pictures, paginator) }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<p style="font-size: small; color: #444;">{% trans %}Template generation time: {% endtrans %}
|
||||
{% if edit_mode %}
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
{% if user.is_in_group(pk=settings.SITH_GROUP_SAS_ADMIN_ID) %}
|
||||
<form class="add-files" id="upload_form" action="" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="inputs">
|
||||
{{ form.as_p() }}
|
||||
|
||||
<input type="submit" value="{% trans %}Upload{% endtrans %}" />
|
||||
</div>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<hr>
|
||||
|
||||
<p style="font-size: small; color: #444;">{% trans %}Template generation time: {% endtrans %}
|
||||
{{ timezone.now() - start }}
|
||||
</p>
|
||||
</p>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
{{ super() }}
|
||||
<script>
|
||||
{{ super() }}
|
||||
<script>
|
||||
$("form#upload_form").submit(function (event) {
|
||||
let formData = new FormData($(this)[0]);
|
||||
let formData = new FormData($(this)[0]);
|
||||
|
||||
if(!formData.get('album_name') && !formData.get('images').name)
|
||||
return false;
|
||||
if(!formData.get('album_name') && !formData.get('images').name)
|
||||
return false;
|
||||
|
||||
if(!formData.get('images').name) {
|
||||
return true;
|
||||
if(!formData.get('images').name) {
|
||||
return true;
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
|
||||
let errorList;
|
||||
if((errorList = this.querySelector('#upload_form 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);
|
||||
|
||||
let progress;
|
||||
if((progress = this.querySelector('progress')) === null) {
|
||||
progress = document.createElement('progress');
|
||||
progress.value = 0;
|
||||
let p = document.createElement('p');
|
||||
p.appendChild(progress);
|
||||
this.insertBefore(p, this.lastElementChild);
|
||||
}
|
||||
|
||||
let 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',
|
||||
url: "{{ url('sas:album_upload', album_id=object.id) }}",
|
||||
data: dataHolder,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: onSuccess
|
||||
});
|
||||
}
|
||||
|
||||
let images = formData.getAll('images');
|
||||
let imagesCount = images.length;
|
||||
let completeCount = 0;
|
||||
|
||||
let poolSize = 1;
|
||||
let imagePool = [];
|
||||
|
||||
while(images.length > 0 && imagePool.length < poolSize) {
|
||||
let 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',
|
||||
url: "{{ url('sas:album_upload', album_id=object.id) }}",
|
||||
data: dataHolder,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
})
|
||||
.fail(onSuccess.bind(undefined, image))
|
||||
.done(onSuccess.bind(undefined, image))
|
||||
.always(next.bind(undefined, image));
|
||||
}
|
||||
|
||||
function next(image, _, __) {
|
||||
let index = imagePool.indexOf(image);
|
||||
let nextImage = images.shift();
|
||||
|
||||
if(index !== -1)
|
||||
imagePool.splice(index, 1);
|
||||
|
||||
if(nextImage) {
|
||||
imagePool.push(nextImage);
|
||||
sendImage(nextImage);
|
||||
}
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
function onSuccess(image, data, _, __) {
|
||||
let errors = [];
|
||||
|
||||
let errorList;
|
||||
if((errorList = this.querySelector('#upload_form ul.errorlist.nonfield')) === null) {
|
||||
errorList = document.createElement('ul');
|
||||
errorList.classList.add('errorlist', 'nonfield');
|
||||
this.insertBefore(errorList, this.firstElementChild);
|
||||
}
|
||||
if ($(data.responseText).find('.errorlist.nonfield')[0])
|
||||
errors = Array.from($(data.responseText).find('.errorlist.nonfield')[0].children);
|
||||
|
||||
while(errorList.childElementCount > 0)
|
||||
errorList.removeChild(errorList.firstElementChild);
|
||||
while(errors.length > 0)
|
||||
errorList.appendChild(errors.shift());
|
||||
|
||||
let progress;
|
||||
if((progress = this.querySelector('progress')) === null) {
|
||||
progress = document.createElement('progress');
|
||||
progress.value = 0;
|
||||
let p = document.createElement('p');
|
||||
p.appendChild(progress);
|
||||
this.insertBefore(p, this.lastElementChild);
|
||||
}
|
||||
|
||||
let 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',
|
||||
url: "{{ url('sas:album_upload', album_id=object.id) }}",
|
||||
data: dataHolder,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
success: onSuccess
|
||||
});
|
||||
}
|
||||
|
||||
let images = formData.getAll('images');
|
||||
let imagesCount = images.length;
|
||||
let completeCount = 0;
|
||||
|
||||
let poolSize = 1;
|
||||
let imagePool = [];
|
||||
|
||||
while(images.length > 0 && imagePool.length < poolSize) {
|
||||
let 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',
|
||||
url: "{{ url('sas:album_upload', album_id=object.id) }}",
|
||||
data: dataHolder,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
})
|
||||
.fail(onSuccess.bind(undefined, image))
|
||||
.done(onSuccess.bind(undefined, image))
|
||||
.always(next.bind(undefined, image));
|
||||
}
|
||||
|
||||
function next(image, _, __) {
|
||||
let index = imagePool.indexOf(image);
|
||||
let nextImage = images.shift();
|
||||
|
||||
if(index !== -1)
|
||||
imagePool.splice(index, 1);
|
||||
|
||||
if(nextImage) {
|
||||
imagePool.push(nextImage);
|
||||
sendImage(nextImage);
|
||||
}
|
||||
}
|
||||
|
||||
function onSuccess(image, data, _, __) {
|
||||
let errors = [];
|
||||
|
||||
if ($(data.responseText).find('.errorlist.nonfield')[0])
|
||||
errors = Array.from($(data.responseText).find('.errorlist.nonfield')[0].children);
|
||||
|
||||
while(errors.length > 0)
|
||||
errorList.appendChild(errors.shift());
|
||||
|
||||
progress.value = ++completeCount / imagesCount;
|
||||
if(progress.value === 1 && errorList.children.length === 0)
|
||||
document.location.reload()
|
||||
}
|
||||
progress.value = ++completeCount / imagesCount;
|
||||
if(progress.value === 1 && errorList.children.length === 0)
|
||||
document.location.reload()
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user