mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-10 00:03:24 +00:00
add some alpine to picture download
This commit is contained in:
parent
ffa3936878
commit
91344741a5
@ -10,6 +10,7 @@
|
||||
window.showSaveFilePicker = showSaveFilePicker; /* Export function to normal javascript */
|
||||
</script>
|
||||
<script defer type="text/javascript" src="{{ static('core/js/zipjs/zip-fs-full.min.js') }}"></script>
|
||||
<script defer src="{{ static("core/js/alpinejs.min.js") }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}
|
||||
@ -19,8 +20,15 @@
|
||||
{% block content %}
|
||||
<main>
|
||||
{% if can_edit(profile, user) %}
|
||||
<button disabled id="download" onclick="download('{{ url('api:pictures') }}?users_identified={{ object.id }}')">{% trans %}Download all my pictures{% endtrans %}</button>
|
||||
<progress id="download_progress" max="100" hidden></progress>
|
||||
<div x-data="picture_download" x-cloak>
|
||||
<button
|
||||
:disabled="in_progress"
|
||||
@click="download('{{ url("api:pictures") }}?users_identified={{ object.id }}')"
|
||||
>
|
||||
{% trans %}Download all my pictures{% endtrans %}
|
||||
</button>
|
||||
<progress x-ref="progress" x-show="in_progress"></progress>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% for album, pictures in albums|items %}
|
||||
<h4>{{ album }}</h4>
|
||||
@ -51,50 +59,58 @@
|
||||
</div>
|
||||
<br>
|
||||
{% endfor %}
|
||||
</main>
|
||||
{% endblock %}
|
||||
{% block script %}
|
||||
|
||||
{{ super() }}
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.getElementById("download").disabled = false;
|
||||
});
|
||||
async function download(url) {
|
||||
/**
|
||||
* @typedef Picture
|
||||
* @property {number} id
|
||||
* @property {string} name
|
||||
* @property {number} size
|
||||
* @property {string} date
|
||||
* @property {Object} author
|
||||
* @property {string} full_size_url
|
||||
* @property {string} compressed_url
|
||||
* @property {string} thumb_url
|
||||
*/
|
||||
|
||||
let pictures = await (await fetch(url)).json();
|
||||
document.addEventListener("alpine:init", () => {
|
||||
Alpine.data("picture_download", () => ({
|
||||
in_progress: false,
|
||||
|
||||
let progressBar = document.getElementById("download_progress");
|
||||
let button = document.getElementById("download");
|
||||
let picturesDownloaded = 0;
|
||||
async download(url) {
|
||||
this.in_progress = true;
|
||||
const bar = this.$refs.progress;
|
||||
bar.value = 0;
|
||||
|
||||
button.disabled = true;
|
||||
progressBar.value = picturesDownloaded;
|
||||
progressBar.hidden = false;
|
||||
/** @type Picture[] */
|
||||
const pictures = await (await fetch(url)).json();
|
||||
bar.max = pictures.length;
|
||||
|
||||
let fileHandle = await window.showSaveFilePicker({
|
||||
const fileHandle = await window.showSaveFilePicker({
|
||||
_preferPolyfill: false,
|
||||
suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
|
||||
types: {},
|
||||
excludeAcceptAllOption: false,
|
||||
})
|
||||
let writeStream = await fileHandle.createWritable();
|
||||
const zipWriter = new zip.ZipWriter(await fileHandle.createWritable());
|
||||
|
||||
let zipWriter = new zip.ZipWriter(writeStream);
|
||||
|
||||
async function progress() {
|
||||
progressBar.value = picturesDownloaded++ * 100 / (pictures.length - 1);
|
||||
}
|
||||
|
||||
await Promise.all(pictures.map(picture =>
|
||||
zipWriter.add(
|
||||
"IMG_" + picture.date.replaceAll(":", "_").replaceAll("-", "_") + picture.name.slice(picture.name.lastIndexOf(".")),
|
||||
new zip.HttpReader(picture.full_size_url),
|
||||
{ level: 9, lastModDate: new Date(picture.date), onstart: progress }
|
||||
)
|
||||
)
|
||||
)
|
||||
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();
|
||||
|
||||
button.disabled = false;
|
||||
progressBar.hidden = true;
|
||||
this.in_progress = false;
|
||||
}
|
||||
}))
|
||||
});
|
||||
</script>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
Loading…
Reference in New Issue
Block a user