Mysaa/misael
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added item reordering - end of quizz edit page

Browse Source
This commit is contained in:
Samy Avrillon 2025-06-13 12:51:38 +02:00
parent 33d1f1871a
commit c6fa363cd9
Signed by: Mysaa
GPG Key ID: 0220AC4A3D6A328B
2 changed files with 199 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/resources/static/css/style.css
View File

@ -50,7 +50,7 @@ main{
color: #96c7e8; color: #96c7e8;
font-size: 24px; font-size: 24px;
flex-direction: column; flex-direction: column;
margin-top: 75px; margin-top: 115px;
} }
.button a{ .button a{
position: fixed; position: fixed;

258
src/main/resources/templates/quizz-edit.html
View File

@ -19,9 +19,10 @@
</h1> </h1>
<div class="buttonbar"> <div class="buttonbar">
<button id="add-question">Ajouter</button> <button class="display-button" id="add-question">Ajouter</button>
<button id="delete-questions">Supprimer</button> <button class="display-button" id="reorder-questions">Réordonner</button>
<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> </div>
<ol id="questions-list"> <ol id="questions-list">
@ -53,6 +54,8 @@
qpositions={} qpositions={}
// the name of the quizz // the name of the quizz
quizzName = "" quizzName = ""
editing = new Set()
function getdata() { function getdata() {
$.ajax({ $.ajax({
@ -74,6 +77,7 @@
qpositions[questions[i]["id"]] = i qpositions[questions[i]["id"]] = i
internalCreateQuestion(i) internalCreateQuestion(i)
} }
$(`.reorder-button`).hide()
} }
}) })
} }
@ -83,62 +87,64 @@
qu = questions[i] qu = questions[i]
qid = qu["id"] qid = qu["id"]
newhtml = ` newhtml = `
<li id="question-display-${qid}"> <li id="q-${qid}">
<div class="content-box" id="question-display-${qid}-content"/> <div class="content-box" id="q-${qid}-content"/>
<div class="content-box" id="question-display-${qid}-edit"/> <div class="content-box" id="q-${qid}-edit"/>
<div class="button-box"> <div class="button-box">
<button id="question-display-${qid}-button-edit">Edit</button> <button class="display-button display-button-${qid}" id="q-${qid}-button-edit">Edit</button>
<button id="question-display-${qid}-type-edit">Type</button> <button class="display-button display-button-${qid}" id="q-${qid}-type-edit">Type</button>
<button id="question-display-${qid}-remove">Supprimer</button> <button class="display-button display-button-${qid}" id="q-${qid}-remove">Supprimer</button>
<button id="question-display-${qid}-validate-edit">Valider</button> <button class="edit-button edit-button-${qid}" id="q-${qid}-validate-edit">Valider</button>
<button id="question-display-${qid}-cancel-edit">Annuler</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> </div>
</li> </li>
` `
newdom = $('<li/>').html(newhtml).contents() newdom = $('<li/>').html(newhtml).contents()
$("#questions-list").append(newdom) $("#questions-list").append(newdom)
const theqid = qid const theqid = qid
$(`#question-display-${qid}-button-edit`).on('click',e => edit(theqid)) $(`#q-${qid}-button-edit`).on('click',e => edit(theqid))
$(`#question-display-${qid}-type-edit`).on('click',e => setType(theqid)) $(`#q-${qid}-type-edit`).on('click',e => setType(theqid))
$(`#question-display-${qid}-remove`).on('click',e => removeQuestion(theqid)) $(`#q-${qid}-remove`).on('click',e => removeQuestion(theqid))
$(`#question-display-${qid}-validate-edit`).on('click',e => commitEdit(theqid)) $(`#q-${qid}-validate-edit`).on('click',e => commitEdit(theqid))
$(`#question-display-${qid}-cancel-edit`).on('click',e => cancelEdit(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"]) 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"]) newedit = QTYPES[qu["type"]]["edit"](qid,qu["value"])
$(`#question-display-${qid}-edit`).replaceWith(newedit) $(`#q-${qid}-edit`).replaceWith(newedit)
contentMode(qid) contentMode(qid)
} }
function contentMode(qid) { function contentMode(qid) {
$(`#question-display-${qid}-content`).show() $(`#q-${qid}-content`).show()
$(`#question-display-${qid}-button-edit`).show() $(`.display-button-${qid}`).show()
$(`#question-display-${qid}-type-edit`).show() $(`#q-${qid}-edit`).hide()
$(`#question-display-${qid}-remove`).show() $(`.edit-button-${qid}`).hide()
$(`#question-display-${qid}-edit`).hide() $('.reorder-button').hide()
$(`#question-display-${qid}-validate-edit`).hide()
$(`#question-display-${qid}-cancel-edit`).hide()
} }
function editMode(qid) { function editMode(qid) {
$(`#question-display-${qid}-content`).hide() $(`#q-${qid}-content`).hide()
$(`#question-display-${qid}-button-edit`).hide() $(`.display-button-${qid}`).hide()
$(`#question-display-${qid}-type-edit`).hide() $(`#q-${qid}-edit`).show()
$(`#question-display-${qid}-remove`).hide() $(`.edit-button-${qid}`).show()
$(`#question-display-${qid}-edit`).show() $('.reorder-button').hide()
$(`#question-display-${qid}-validate-edit`).show()
$(`#question-display-${qid}-cancel-edit`).show()
} }
function lockEdit(qid) { function lockEdit(qid) {
$(`#question-display-${qid}-edit *`).prop('disabled', true) $(`#q-${qid}-edit *`).prop('disabled', true)
$(`#question-display-${qid}-validate-edit`).prop('disabled', true) $(`.edit-button-${qid}`).prop('disabled', true)
$(`#question-display-${qid}-cancel-edit`).prop('disabled', true)
} }
function unlockEdit(qid) { function unlockEdit(qid) {
$(`#question-display-${qid}-edit *`).prop('disabled', false) $(`#q-${qid}-edit *`).prop('disabled', false)
$(`#question-display-${qid}-validate-edit`).prop('disabled', false) $(`.edit-button-${qid}`).prop('disabled', false)
$(`#question-display-${qid}-cancel-edit`).prop('disabled', false)
} }
function contentNameMode() { function contentNameMode() {
$("#question-name").show() $("#question-name").show()
@ -155,12 +161,32 @@
$(`#edit-question-name-cancel`).show() $(`#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) { function setType(qid) {
//TODO à faire ^^ //TODO à faire ^^
} }
function edit(qid) { function edit(qid) {
editing.add(qid)
editMode(qid) editMode(qid)
} }
@ -184,17 +210,18 @@
i = qpositions[qid] i = qpositions[qid]
questions[i]["value"] = newvalue questions[i]["value"] = newvalue
newcontent = QTYPES[questions[i]["type"]]["display"](qid,questions[i]["value"]) newcontent = QTYPES[questions[i]["type"]]["display"](qid,questions[i]["value"])
$(`#question-display-${qid}-content`).replaceWith(newcontent) $(`#q-${qid}-content`).replaceWith(newcontent)
unlockEdit(qid) unlockEdit(qid)
editing.delete(qid)
contentMode(qid) contentMode(qid)
} }
}) })
} }
function removeQuestion(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}`)) { 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; return;
} }
$.ajax({ $.ajax({
@ -206,22 +233,23 @@
if(!res["success"]) { if(!res["success"]) {
console.log(res["message"]) console.log(res["message"])
error(res["message"]) error(res["message"])
$(`#question-display-${qid}-remove`).prop('disabled', false) $(`#q-${qid}-remove`).prop('disabled', false)
return return
} }
$(`#question-display-${qid}-remove`).prop('disabled', false) $(`#q-${qid}-remove`).prop('disabled', false)
i = qpositions[qid] i = qpositions[qid]
qpositions[qid] = null qpositions[qid] = null
questions.splice(i,1) questions.splice(i,1)
$(`#question-display-${qid}`).remove() $(`#q-${qid}`).remove()
} }
}) })
} }
function cancelEdit(qid) { function cancelEdit(qid) {
i = qpositions[qid] i = qpositions[qid]
newedit = QTYPES[questions[i]["type"]]["edit"](qid,questions[i]["value"]) 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) contentMode(qid)
} }
@ -231,9 +259,9 @@
$.ajax({ $.ajax({
url: "/questions/quizz-edit/"+quizzid+"/set-name", url: "/questions/quizz-edit/"+quizzid+"/set-name",
type: "POST", type: "POST",
data: JSON.stringify(newname), data: newname,
dataType: "json", dataType: 'json',
contentType: 'application/json', contentType: 'text/plain',
success: function(res) { success: function(res) {
console.log(res) console.log(res)
if(!res["success"]) { 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) { function makeEditBlockBCC(id,question) {
html = ` html = `
<div class="content-box dcc-box" id="question-display-${id}-edit"> <div class="content-box dcc-box" id="q-${id}-edit">
<h5><input id="question-display-${id}-edit-question" <h5><input id="q-${id}-edit-question"
type="text" value="${_.escape(question["text"])}"/></h5> type="text" value="${_.escape(question["text"])}"/></h5>
<ol> <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> 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> 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> 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> type="text" value="${_.escape(question["wrong"][2])}"/></li>
</ol> </ol>
</div> </div>
@ -300,11 +435,11 @@
return out return out
} }
function readEditBlockBCC(id) { function readEditBlockBCC(id) {
questionText = $(`#question-display-${id}-edit-question`).val() questionText = $(`#q-${id}-edit-question`).val()
goodText = $(`#question-display-${id}-edit-good`).val() goodText = $(`#q-${id}-edit-good`).val()
wrongText1 = $(`#question-display-${id}-edit-wrong1`).val() wrongText1 = $(`#q-${id}-edit-wrong1`).val()
wrongText2 = $(`#question-display-${id}-edit-wrong2`).val() wrongText2 = $(`#q-${id}-edit-wrong2`).val()
wrongText3 = $(`#question-display-${id}-edit-wrong3`).val() wrongText3 = $(`#q-${id}-edit-wrong3`).val()
return { return {
"text": questionText, "text": questionText,
"good": goodText, "good": goodText,
@ -313,7 +448,7 @@
} }
function makeAnswerBlockBCC(id,question) { function makeAnswerBlockBCC(id,question) {
html = ` 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> <h5>${_.escape(question["text"])}</h5>
<ol> <ol>
<li class="right">&#x2611; ${_.escape(question["good"])}</li> <li class="right">&#x2611; ${_.escape(question["good"])}</li>
@ -328,6 +463,9 @@
} }
contentNameMode() 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-button").on("click",editNameMode)
$("#edit-question-name-confirm").on("click",commitEditName) $("#edit-question-name-confirm").on("click",commitEditName)
$("#edit-question-name-cancel").on("click",cancelEditName) $("#edit-question-name-cancel").on("click",cancelEditName)