klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-10 08:13:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

add spinner during loading

Browse Source
This commit is contained in:
thomas girod 2024-08-09 17:06:35 +02:00
parent 48f605dbe0
commit d545becf24
4 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
core/static/core/style.scss
View File

@ -617,7 +617,7 @@ a:not(.button) {
.select2 { .select2 {
margin: 0; margin: 10px 0!important;
max-width: 100%; max-width: 100%;
min-width: 100%; min-width: 100%;

5
sas/static/sas/css/picture.scss
View File

@ -140,6 +140,11 @@
width: 100%; width: 100%;
justify-content: space-between; justify-content: space-between;
&.loader {
margin-top: 10px;
--loading-size: 20px
}
@media (max-width: 1000px) { @media (max-width: 1000px) {
max-width: calc(50% - 5px); max-width: calc(50% - 5px);
} }

6
sas/static/sas/js/relation.js
View File

@ -4,6 +4,7 @@ document.addEventListener("alpine:init", () => {
selector: undefined, selector: undefined,
async init() { async init() {
this.loading = true;
this.identifications = await ( this.identifications = await (
await fetch(`/api/sas/picture/${picture_id}/identified`) await fetch(`/api/sas/picture/${picture_id}/identified`)
).json(); ).json();
@ -15,9 +16,11 @@ document.addEventListener("alpine:init", () => {
}), }),
picture_getter: (user) => user.profile_pict, picture_getter: (user) => user.profile_pict,
}); });
this.loading = false;
}, },
async submit_identification() { async submit_identification() {
this.loading = true;
const url = `/api/sas/picture/${picture_id}/identified`; const url = `/api/sas/picture/${picture_id}/identified`;
await fetch(url, { await fetch(url, {
method: "PUT", method: "PUT",
@ -26,6 +29,7 @@ document.addEventListener("alpine:init", () => {
// refresh the identified users list // refresh the identified users list
this.identifications = await (await fetch(url)).json(); this.identifications = await (await fetch(url)).json();
this.selector.empty().trigger("change"); this.selector.empty().trigger("change");
this.loading = false;
}, },
can_be_removed(item) { can_be_removed(item) {
@ -33,6 +37,7 @@ document.addEventListener("alpine:init", () => {
}, },
async remove(item) { async remove(item) {
this.loading = true;
const res = await fetch(`/api/sas/relation/${item.id}`, { const res = await fetch(`/api/sas/relation/${item.id}`, {
method: "DELETE", method: "DELETE",
}); });
@ -41,6 +46,7 @@ document.addEventListener("alpine:init", () => {
(i) => i.id !== item.id, (i) => i.id !== item.id,
); );
} }
this.loading = false;
}, },
})); }));
}); });

15
sas/templates/sas/picture.jinja
View File

@ -128,14 +128,14 @@
</div> </div>
</div> </div>
<div class="tags" x-data="user_identification" x-cloak> <div class="tags" x-data="user_identification">
<h5>{% trans %}People{% endtrans %}</h5> <h5>{% trans %}People{% endtrans %}</h5>
{% if user.was_subscribed %} {% if user.was_subscribed %}
<form @submit.prevent="submit_identification" > <form @submit.prevent="submit_identification" x-show="!!selector">
{% csrf_token %} <select x-ref="search" multiple="multiple"></select>
<select x-ref="search" multiple="multiple"></select> <input type="submit" value="{% trans %}Go{% endtrans %}"/>
<input type="submit" value="{% trans %}Go{% endtrans %}"/> </form>
</form>{% endif %} {% endif %}
<ul> <ul>
<template x-for="identification in identifications" :key="identification.id"> <template x-for="identification in identifications" :key="identification.id">
<li> <li>
@ -148,6 +148,9 @@
</template> </template>
</li> </li>
</template> </template>
<template x-if="loading">
<li class="loader" aria-busy="true"></li>
</template>
</ul> </ul>
</div> </div>
</div> </div>