add some alpine to picture download

core/templates/core/user_pictures.jinja

@@ -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 %}
-    <script>
-      document.addEventListener("DOMContentLoaded", () => {
-        document.getElementById("download").disabled = false;
-      });
-      async function download(url) {
-
-        let pictures = await (await fetch(url)).json();
-
-        let progressBar = document.getElementById("download_progress");
-        let button = document.getElementById("download");
-        let picturesDownloaded = 0;
-
-        button.disabled = true;
-        progressBar.value = picturesDownloaded;
-        progressBar.hidden = false;
-
-        let fileHandle = await window.showSaveFilePicker({
-          _preferPolyfill: false,
-          suggestedName: "{%- trans -%} pictures {%- endtrans -%}.zip",
-          types: {},
-          excludeAcceptAllOption: false,
-        })
-        let writeStream = 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 zipWriter.close();
-
-        button.disabled = false;
-        progressBar.hidden = true;
-      }
-    </script>
   </main>
 {% endblock %}
+{% block script %}
+
+  {{ super() }}
+  <script>
+    /**
+     * @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
+     */
+
+    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;
+
+            /** @type Picture[] */
+          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());
+
+          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 %}