klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith3.git synced 2024-09-20 09:58:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

implement back feature on sas ajax view

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-09-04 11:14:45 +02:00 committed by thomas girod
parent bc40b92744
commit 71602b43bd
2 changed files with 37 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
sas/static/sas/js/picture.js
View File

@ -15,7 +15,7 @@ document.addEventListener("alpine:init", () => {
/** /**
* The users identified on the currently displayed picture * The users identified on the currently displayed picture
* @type PictureIdentification[] * @type PictureIdentification[]
*/ **/
identifications: [], identifications: [],
/** /**
* The currently displayed picture * The currently displayed picture
@ -28,23 +28,29 @@ document.addEventListener("alpine:init", () => {
**/ **/
next_picture: null, next_picture: null,
/** /**
* The picture which will be dispalyed next if the user press the "previous" button * The picture which will be displayed next if the user press the "previous" button
* @type ?Picture * @type ?Picture
**/ **/
previous_picture: null, previous_picture: null,
/** /**
* The select2 component used to identify users * The select2 component used to identify users
*/ **/
selector: undefined, selector: undefined,
/** /**
* true if the page is in a loading state, else false * true if the page is in a loading state, else false
*/ **/
loading: true, loading: true,
/** /**
* Error message when a moderation operation fails * Error message when a moderation operation fails
* @type string * @type string
*/ **/
moderation_error: "", moderation_error: "",
/**
* Method of pushing new url to the browser history
* Used by popstate event and always reset to it's default value when used
* @type History
**/
pushstate: History.PUSH,
async init() { async init() {
this.pictures = await fetch_paginated(picture_endpoint); this.pictures = await fetch_paginated(picture_endpoint);
@ -60,6 +66,16 @@ document.addEventListener("alpine:init", () => {
(i) => i.id === first_picture_id, (i) => i.id === first_picture_id,
); );
this.$watch("current_picture", () => this.update_picture()); this.$watch("current_picture", () => this.update_picture());
window.addEventListener("popstate", async (event) => {
if (!event.state || event.state.sas_picture_id === undefined){
return;
}
this.pushstate = History.REPLACE;
this.current_picture = this.pictures.find(
(i) => i.id === parseInt(event.state.sas_picture_id),
);
});
this.pushstate = History.REPLACE; /* Avoid first url push */
await this.update_picture(); await this.update_picture();
}, },
@ -73,11 +89,19 @@ document.addEventListener("alpine:init", () => {
*/ */
async update_picture() { async update_picture() {
this.loading = true; this.loading = true;
window.history.pushState(
{}, const update_args = [
{sas_picture_id: this.current_picture.id},
"", "",
`/sas/picture/${this.current_picture.id}/`, `/sas/picture/${this.current_picture.id}/`,
); ];
if (this.pushstate === History.REPLACE){
window.history.replaceState(...update_args);
this.pushstate = History.PUSH;
} else {
window.history.pushState(...update_args);
}
this.moderation_error = ""; this.moderation_error = "";
const index = this.pictures.indexOf(this.current_picture); const index = this.pictures.indexOf(this.current_picture);
this.previous_picture = this.pictures[index - 1] || null; this.previous_picture = this.pictures[index - 1] || null;

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

@ -24,7 +24,7 @@
<div class="title"> <div class="title">
<h3 x-text="current_picture.name"></h3> <h3 x-text="current_picture.name"></h3>
<h4 x-text="`${pictures.indexOf(current_picture)} / ${pictures.length}`"></h4> <h4 x-text="`${pictures.indexOf(current_picture) + 1 } / ${pictures.length}`"></h4>
</div> </div>
<br> <br>