Added item reordering - end of quizz edit page
This commit is contained in:
parent
33d1f1871a
commit
c6fa363cd9
GPG Key ID:
0220AC4A3D6A328B
@ -50,7 +50,7 @@ main{
|
||||
color: #96c7e8;
|
||||
font-size: 24px;
|
||||
flex-direction: column;
|
||||
margin-top: 75px;
|
||||
margin-top: 115px;
|
||||
}
|
||||
.button a{
|
||||
position: fixed;
|
||||
|
||||
@ -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">☑ <input id="question-display-${id}-edit-good"
|
||||
<li class="right">☑ <input id="q-${id}-edit-good"
|
||||
type="text" value="${_.escape(question["good"])}"/></li>
|
||||
<li class="wrong">☒ <input id="question-display-${id}-edit-wrong1"
|
||||
<li class="wrong">☒ <input id="q-${id}-edit-wrong1"
|
||||
type="text" value="${_.escape(question["wrong"][0])}"/></li>
|
||||
<li class="wrong">☒ <input id="question-display-${id}-edit-wrong2"
|
||||
<li class="wrong">☒ <input id="q-${id}-edit-wrong2"
|
||||
type="text" value="${_.escape(question["wrong"][1])}"/></li>
|
||||
<li class="wrong">☒ <input id="question-display-${id}-edit-wrong3"
|
||||
<li class="wrong">☒ <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">☑ ${_.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)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user