klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2025-07-09 19:40:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

better download button style

Browse Source
This commit is contained in:
thomas girod
2024-07-30 19:57:56 +02:00
parent 91344741a5
commit 819e2b5f9f
6 changed files with 70 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
core/templates/core/user_pictures.jinja
View File

@ -19,12 +19,14 @@
{% block content %}
<main>
{% if can_edit(profile, user) %}
{% if user.id == object.id and albums|length > 0 %}
<div x-data="picture_download" x-cloak>
<button
:disabled="in_progress"
class="btn btn-blue"
@click="download('{{ url("api:pictures") }}?users_identified={{ object.id }}')"
>
<i class="fa fa-download"></i>
{% trans %}Download all my pictures{% endtrans %}
</button>
<progress x-ref="progress" x-show="in_progress"></progress>
@ -32,6 +34,7 @@
{% endif %}
{% for album, pictures in albums|items %}
<h4>{{ album }}</h4>
<br />
<div class="photos">
{% for picture in pictures %}
{% if picture.can_be_viewed_by(user) %}
@ -60,11 +63,13 @@
<br>
{% endfor %}
</main>
{% endblock %}
{% endblock content %}
{% block script %}
{{ super() }}
<script>
{% if user.id == object.id %}
<script>
/**
* @typedef Picture
* @property {number} id
@ -77,40 +82,41 @@
* @property {string} thumb_url
*/
document.addEventListener("alpine:init", () => {
Alpine.data("picture_download", () => ({
in_progress: false,
document.addEventListener("alpine:init", () => {
Alpine.data("picture_download", () => ({
in_progress: false,
async download(url) {
this.in_progress = true;
const bar = this.$refs.progress;
bar.value = 0;
async download(url) {
this.in_progress = true;
const bar = this.$refs.progress;
bar.value = 0;
/** @type Picture[] */
const pictures = await (await fetch(url)).json();
bar.max = pictures.length;
const pictures = await (await fetch(url)).json();
bar.max = pictures.length;
const fileHandle = await window.showSaveFilePicker({
_preferPolyfill: false,
suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
types: {},
excludeAcceptAllOption: false,
})
const zipWriter = new zip.ZipWriter(await fileHandle.createWritable());
const fileHandle = await window.showSaveFilePicker({
_preferPolyfill: false,
suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
types: {},
excludeAcceptAllOption: false,
})
const zipWriter = new zip.ZipWriter(await fileHandle.createWritable());
await Promise.all(pictures.map(p => {
const img_name = "IMG_" + p.date.replaceAll(/[:\-]/g, "_") + p.name.slice(p.name.lastIndexOf("."));
return zipWriter.add(
img_name,
new zip.HttpReader(p.full_size_url),
{level: 9, lastModDate: new Date(p.date), onstart: () => bar.value += 1}
);
}))
await Promise.all(pictures.map(p => {
const img_name = "IMG_" + p.date.replaceAll(/[:\-]/g, "_") + p.name.slice(p.name.lastIndexOf("."));
return zipWriter.add(
img_name,
new zip.HttpReader(p.full_size_url),
{level: 9, lastModDate: new Date(p.date), onstart: () => bar.value += 1}
);
}));
await zipWriter.close();
this.in_progress = false;
}
}))
});
</script>
{% endblock %}
await zipWriter.close();
this.in_progress = false;
}
}))
});
</script>
{% endif %}
{% endblock script %}