From c6fa363cd91f1bd10c9da98ddc0a0045eab40203 Mon Sep 17 00:00:00 2001
From: Samy Avrillon <samy.avrillon@ens-lyon.fr>
Date: Fri, 13 Jun 2025 12:51:38 +0200
Subject: [PATCH] Added item reordering - end of quizz edit page

---
 src/main/resources/static/css/style.css      |   2 +-
 src/main/resources/templates/quizz-edit.html | 258 ++++++++++++++-----
 2 files changed, 199 insertions(+), 61 deletions(-)

diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index ce7dfb3..d705758 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -50,7 +50,7 @@ main{
   color: #96c7e8;
   font-size: 24px;
   flex-direction: column;
-  margin-top: 75px;
+  margin-top: 115px;
 }
 .button a{
   position: fixed;
diff --git a/src/main/resources/templates/quizz-edit.html b/src/main/resources/templates/quizz-edit.html
index 3b1df65..2f761d0 100644
--- a/src/main/resources/templates/quizz-edit.html
+++ b/src/main/resources/templates/quizz-edit.html
@@ -19,9 +19,10 @@
         </h1>
         
         <div class="buttonbar">
-            <button id="add-question">Ajouter</button>
-            <button id="delete-questions">Supprimer</button>
-            <button id="reorder-questions">Réordonner</button>
+            <button class="display-button" id="add-question">Ajouter</button>
+            <button class="display-button" id="reorder-questions">Réordonner</button>
+            <button class="reorder-button" id="reorder-questions-commit">Valider l'ordre</button>
+            <button class="reorder-button" id="reorder-questions-cancel">Annuler</button>
         </div>
 
         <ol id="questions-list">
@@ -53,6 +54,8 @@
             qpositions={}
             // the name of the quizz
             quizzName = ""
+
+            editing = new Set()
             
             function getdata() {
                 $.ajax({
@@ -74,6 +77,7 @@
                             qpositions[questions[i]["id"]] = i
                             internalCreateQuestion(i)
                         }
+                        $(`.reorder-button`).hide()
                     }
                 })
             }
@@ -83,62 +87,64 @@
                 qu = questions[i]
                 qid = qu["id"]
                 newhtml = `
-                    <li id="question-display-${qid}">
-                        <div class="content-box" id="question-display-${qid}-content"/>
-                        <div class="content-box" id="question-display-${qid}-edit"/>
+                    <li id="q-${qid}">
+                        <div class="content-box" id="q-${qid}-content"/>
+                        <div class="content-box" id="q-${qid}-edit"/>
                         <div class="button-box">
-                            <button id="question-display-${qid}-button-edit">Edit</button>
-                            <button id="question-display-${qid}-type-edit">Type</button>
-                            <button id="question-display-${qid}-remove">Supprimer</button>
-                            <button id="question-display-${qid}-validate-edit">Valider</button>
-                            <button id="question-display-${qid}-cancel-edit">Annuler</button>
+                            <button class="display-button display-button-${qid}" id="q-${qid}-button-edit">Edit</button>
+                            <button class="display-button display-button-${qid}" id="q-${qid}-type-edit">Type</button>
+                            <button class="display-button display-button-${qid}" id="q-${qid}-remove">Supprimer</button>
+                            <button class="edit-button edit-button-${qid}" id="q-${qid}-validate-edit">Valider</button>
+                            <button class="edit-button edit-button-${qid}" id="q-${qid}-cancel-edit">Annuler</button>
+                            <button class="reorder-button" id="q-${qid}-reorder-uup">Uup</button>
+                            <button class="reorder-button" id="q-${qid}-reorder-up">Up</button>
+                            <button class="reorder-button" id="q-${qid}-reorder-down">Down</button>
+                            <button class="reorder-button" id="q-${qid}-reorder-ddown">DDown</button>
                         </div>
                     </li>
                 `
                 newdom = $('<li/>').html(newhtml).contents()
                 $("#questions-list").append(newdom)
                 const theqid = qid
-                $(`#question-display-${qid}-button-edit`).on('click',e => edit(theqid))
-                $(`#question-display-${qid}-type-edit`).on('click',e => setType(theqid))
-                $(`#question-display-${qid}-remove`).on('click',e => removeQuestion(theqid))
-                $(`#question-display-${qid}-validate-edit`).on('click',e => commitEdit(theqid))
-                $(`#question-display-${qid}-cancel-edit`).on('click',e => cancelEdit(theqid))
+                $(`#q-${qid}-button-edit`).on('click',e => edit(theqid))
+                $(`#q-${qid}-type-edit`).on('click',e => setType(theqid))
+                $(`#q-${qid}-remove`).on('click',e => removeQuestion(theqid))
+                $(`#q-${qid}-validate-edit`).on('click',e => commitEdit(theqid))
+                $(`#q-${qid}-cancel-edit`).on('click',e => cancelEdit(theqid))
+                $(`#q-${qid}-reorder-uup`).on('click',e => reorderMove(theqid,'uup'))
+                $(`#q-${qid}-reorder-up`).on('click',e => reorderMove(theqid,'up'))
+                $(`#q-${qid}-reorder-down`).on('click',e => reorderMove(theqid,'down'))
+                $(`#q-${qid}-reorder-ddown`).on('click',e => reorderMove(theqid,'ddown'))
 
                 newcontent = QTYPES[qu["type"]]["display"](qid,qu["value"])
-                $(`#question-display-${qid}-content`).replaceWith(newcontent)
+                $(`#q-${qid}-content`).replaceWith(newcontent)
                 newedit = QTYPES[qu["type"]]["edit"](qid,qu["value"])
-                $(`#question-display-${qid}-edit`).replaceWith(newedit)
+                $(`#q-${qid}-edit`).replaceWith(newedit)
 
                 contentMode(qid)
             }
 
             function contentMode(qid) {
-                $(`#question-display-${qid}-content`).show()
-                $(`#question-display-${qid}-button-edit`).show()
-                $(`#question-display-${qid}-type-edit`).show()
-                $(`#question-display-${qid}-remove`).show()
-                $(`#question-display-${qid}-edit`).hide()
-                $(`#question-display-${qid}-validate-edit`).hide()
-                $(`#question-display-${qid}-cancel-edit`).hide()
+                $(`#q-${qid}-content`).show()
+                $(`.display-button-${qid}`).show()
+                $(`#q-${qid}-edit`).hide()
+                $(`.edit-button-${qid}`).hide()
+                $('.reorder-button').hide()
             }
             function editMode(qid) {
-                $(`#question-display-${qid}-content`).hide()
-                $(`#question-display-${qid}-button-edit`).hide()
-                $(`#question-display-${qid}-type-edit`).hide()
-                $(`#question-display-${qid}-remove`).hide()
-                $(`#question-display-${qid}-edit`).show()
-                $(`#question-display-${qid}-validate-edit`).show()
-                $(`#question-display-${qid}-cancel-edit`).show()
+                $(`#q-${qid}-content`).hide()
+                $(`.display-button-${qid}`).hide()
+                $(`#q-${qid}-edit`).show()
+                $(`.edit-button-${qid}`).show()
+                $('.reorder-button').hide()
             }
             function lockEdit(qid) {
-                $(`#question-display-${qid}-edit *`).prop('disabled', true)
-                $(`#question-display-${qid}-validate-edit`).prop('disabled', true)
-                $(`#question-display-${qid}-cancel-edit`).prop('disabled', true)
+                $(`#q-${qid}-edit *`).prop('disabled', true)
+                $(`.edit-button-${qid}`).prop('disabled', true)
             }
             function unlockEdit(qid) {
-                $(`#question-display-${qid}-edit *`).prop('disabled', false)
-                $(`#question-display-${qid}-validate-edit`).prop('disabled', false)
-                $(`#question-display-${qid}-cancel-edit`).prop('disabled', false)
+                $(`#q-${qid}-edit *`).prop('disabled', false)
+                $(`.edit-button-${qid}`).prop('disabled', false)
             }
             function contentNameMode() {
                 $("#question-name").show()
@@ -155,12 +161,32 @@
                 $(`#edit-question-name-cancel`).show()
             }
 
+            function reorderMode() {
+                $(`.display-button`).hide()
+                $(`.edit-button`).hide()
+                $(`.reorder-button`).show()
+                for (let qid of editing) {
+                    lockEdit(qid)
+                }
+            }
+            function unReorderMode() {
+                $(`.reorder-button`).hide()
+                $(`.display-button`).show()
+                for (let qid of editing) {
+                    $(`.display-button-${qid}`).hide()
+                    $(`.edit-button-${qid}`).show()
+                    editMode(qid)
+                    unlockEdit(qid)
+                }
+            }
+
             function setType(qid) {
                 //TODO à faire ^^
             }
 
 
             function edit(qid) {
+                editing.add(qid)
                 editMode(qid)
             }
 
@@ -184,17 +210,18 @@
                         i = qpositions[qid]
                         questions[i]["value"] = newvalue
                         newcontent = QTYPES[questions[i]["type"]]["display"](qid,questions[i]["value"])
-                        $(`#question-display-${qid}-content`).replaceWith(newcontent)
+                        $(`#q-${qid}-content`).replaceWith(newcontent)
 
                         unlockEdit(qid)
+                        editing.delete(qid)
                         contentMode(qid)
                     }
                 })
             }
             function removeQuestion(qid) {
-                $(`#question-display-${qid}-remove`).prop('disabled',true)
+                $(`#q-${qid}-remove`).prop('disabled',true)
                 if(!confirm(`Voulez-vous vraiment supprimer la question ${qpositions[qid]+1}`)) {
-                    $(`#question-display-${qid}-remove`).prop('disabled', false)
+                    $(`#q-${qid}-remove`).prop('disabled', false)
                     return;
                 }
                 $.ajax({
@@ -206,22 +233,23 @@
                         if(!res["success"]) {
                             console.log(res["message"])
                             error(res["message"])
-                            $(`#question-display-${qid}-remove`).prop('disabled', false)
+                            $(`#q-${qid}-remove`).prop('disabled', false)
                             return
                         }
-                        $(`#question-display-${qid}-remove`).prop('disabled', false)
+                        $(`#q-${qid}-remove`).prop('disabled', false)
                         i = qpositions[qid]
                         qpositions[qid] = null
                         questions.splice(i,1)
 
-                        $(`#question-display-${qid}`).remove()
+                        $(`#q-${qid}`).remove()
                     }
                 })
             }
             function cancelEdit(qid) {
                 i = qpositions[qid]
                 newedit = QTYPES[questions[i]["type"]]["edit"](qid,questions[i]["value"])
-                $(`#question-display-${qid}-edit`).replaceWith(newedit)
+                $(`#q-${qid}-edit`).replaceWith(newedit)
+                editing.delete(qid)
                 contentMode(qid)
             }
 
@@ -231,9 +259,9 @@
                 $.ajax({
                     url: "/questions/quizz-edit/"+quizzid+"/set-name",
                     type: "POST",
-                    data: JSON.stringify(newname),
-                    dataType: "json",
-                    contentType: 'application/json',
+                    data: newname,
+                    dataType: 'json',
+                    contentType: 'text/plain',
                     success: function(res) {
                         console.log(res)
                         if(!res["success"]) {
@@ -277,21 +305,128 @@
                     }
                 })
             }
+
+            // Map newindex -> oldindex
+            ordermapping = []
+
+            function startReorder() {
+                ordermapping = new Array(questions.length)
+                for (let i=0;i<questions.length;i++){
+                    ordermapping[i] = i
+                }
+                reorderMode()
+            }
+
+            function reorderMove(qid,direction){
+                // Actual position of qid
+                i = ordermapping.indexOf(qpositions[qid])
+                switch(direction) {
+                    case "uup":
+                        j = 0
+                        break
+                    case "up":
+                        j = Math.max(i-1,0)
+                        break
+                    case "down":
+                        j = Math.min(i+1,ordermapping.length-1)
+                        break
+                    case "ddown":
+                        j = ordermapping.length-1
+                        break
+                }
+                moveQuestion(i,j)
+            }
+            // Move question from index i to index j
+            function moveQuestion(i,j) {
+                console.log(`Moving ${i} to ${j}`)
+                if (i == j) return
+
+                // The question we move
+                qid = questions[ordermapping[i]]['id']
+                
+                
+                oldomi = ordermapping[i]
+                if (i<j){
+                    for (let k=i;k<j;k++){
+                        ordermapping[k] = ordermapping[k+1]
+                    }
+                } else {
+                    for (let k=i;k>j;k--){
+                        ordermapping[k] = ordermapping[k-1]
+                    }
+                }
+                ordermapping[j] = oldomi
+                
+                if(j==ordermapping.length-1) {
+                    $(`#q-${qid}`).appendTo($("#questions-list"))
+                } else {
+                    // We want the one _currently_ at position j+1
+                    qid2 = questions[ordermapping[j+1]]['id']
+                    console.log(`Moving ${qid} before ${qid2}`)
+                    $(`#q-${qid}`).insertBefore($(`#q-${qid2}`))
+                }
+                
+            }
+
+            function commitReorder() {
+                $(".reorder-button").prop('disabled', true)
+                newIdOrders = []
+                for(let p=0;p<ordermapping.length;p++) {
+                    newIdOrders[p] = questions[ordermapping[p]]["id"]
+                }
+                $.ajax({
+                    url: "/questions/quizz-edit/"+quizzid+"/reorder-questions",
+                    type: "POST",
+                    contentType: 'application/json',
+                    data: JSON.stringify(newIdOrders),
+                    dataType: 'json',
+                    success: function(res) {
+                        console.log(res)
+                        if(!res["success"]) {
+                            console.log(res["message"])
+                            error(res["message"])
+                            $(".reorder-button").prop('disabled', false)
+                            return
+                        }
+                        // question position -> question data
+                        newquestions=new Array(questions.length)
+                        newqpositions={}
+                        for(let p=0;p<ordermapping.length;p++){
+                            newquestions[p] = questions[ordermapping[p]]
+                            newqpositions[newquestions[p]['id']] = p
+                        }
+                        questions = newquestions
+                        qpositions = newqpositions
+                        $(".reorder-button").prop('disabled', false)
+                        unReorderMode()
+                    }
+                })
+            }
+
+            function cancelReorder() {
+                questionsBlock = $("#questions-list")
+                // We just put all the blocks back in order
+                for (let q of questions) {
+                    qid = q["id"]
+                    $(`#q-${qid}`).appendTo(questionsBlock)
+                }
+                unReorderMode()
+            }
             
 
             function makeEditBlockBCC(id,question) {
                 html = `
-                    <div class="content-box dcc-box" id="question-display-${id}-edit">
-                        <h5><input id="question-display-${id}-edit-question"
+                    <div class="content-box dcc-box" id="q-${id}-edit">
+                        <h5><input id="q-${id}-edit-question"
                             type="text" value="${_.escape(question["text"])}"/></h5>
                         <ol>
-                            <li class="right">&#x2611; <input id="question-display-${id}-edit-good"
+                            <li class="right">&#x2611; <input id="q-${id}-edit-good"
                             type="text" value="${_.escape(question["good"])}"/></li>
-                            <li class="wrong">&#x2612; <input id="question-display-${id}-edit-wrong1"
+                            <li class="wrong">&#x2612; <input id="q-${id}-edit-wrong1"
                                 type="text" value="${_.escape(question["wrong"][0])}"/></li>
-                            <li class="wrong">&#x2612; <input id="question-display-${id}-edit-wrong2"
+                            <li class="wrong">&#x2612; <input id="q-${id}-edit-wrong2"
                                 type="text" value="${_.escape(question["wrong"][1])}"/></li>
-                            <li class="wrong">&#x2612; <input id="question-display-${id}-edit-wrong3"
+                            <li class="wrong">&#x2612; <input id="q-${id}-edit-wrong3"
                                 type="text" value="${_.escape(question["wrong"][2])}"/></li>
                         </ol>
                     </div>
@@ -300,11 +435,11 @@
                 return out
             }
             function readEditBlockBCC(id) {
-                questionText = $(`#question-display-${id}-edit-question`).val()
-                goodText = $(`#question-display-${id}-edit-good`).val()
-                wrongText1 = $(`#question-display-${id}-edit-wrong1`).val()
-                wrongText2 = $(`#question-display-${id}-edit-wrong2`).val()
-                wrongText3 = $(`#question-display-${id}-edit-wrong3`).val()
+                questionText = $(`#q-${id}-edit-question`).val()
+                goodText = $(`#q-${id}-edit-good`).val()
+                wrongText1 = $(`#q-${id}-edit-wrong1`).val()
+                wrongText2 = $(`#q-${id}-edit-wrong2`).val()
+                wrongText3 = $(`#q-${id}-edit-wrong3`).val()
                 return {
                     "text": questionText,
                     "good": goodText,
@@ -313,7 +448,7 @@
             }
             function makeAnswerBlockBCC(id,question) {
                 html = `
-                    <div class="content-box dcc-box" id="question-display-${id}-content">
+                    <div class="content-box dcc-box" id="q-${id}-content">
                         <h5>${_.escape(question["text"])}</h5>
                         <ol>
                             <li class="right">&#x2611; ${_.escape(question["good"])}</li>
@@ -328,6 +463,9 @@
             }
 
             contentNameMode()
+            $("#reorder-questions").on("click",startReorder)
+            $("#reorder-questions-commit").on("click",commitReorder)
+            $("#reorder-questions-cancel").on("click",cancelReorder)
             $("#edit-question-name-button").on("click",editNameMode)
             $("#edit-question-name-confirm").on("click",commitEditName)
             $("#edit-question-name-cancel").on("click",cancelEditName)