Added remove and add buttons (remove bug if you remove in a row)
This commit is contained in:
parent
c62f070e39
commit
33d1f1871a
GPG Key ID:
0220AC4A3D6A328B
@ -297,6 +297,7 @@ public class QuizzManagerImpl implements QuizzManager {
|
||||
|
||||
ObjectNode out = JsonNodeFactory.instance.objectNode();
|
||||
out.set("success", JsonNodeFactory.instance.booleanNode(true));
|
||||
out.set("id", JsonNodeFactory.instance.numberNode(q.getId()));
|
||||
out.set("type", JsonNodeFactory.instance.textNode(DEFAULT_QTYPE.name()));
|
||||
out.set("value", n);
|
||||
return out;
|
||||
|
||||
@ -1,3 +1,22 @@
|
||||
main h1 input, main h1 span{
|
||||
font-size: 30pt;
|
||||
font-weight: bold;
|
||||
color: teal;
|
||||
}
|
||||
|
||||
main h1 button{
|
||||
width: 7em;
|
||||
}
|
||||
|
||||
main .buttonbar button{
|
||||
width: 7em;
|
||||
}
|
||||
|
||||
main .buttonbar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
ol#questions-list {
|
||||
display: table;
|
||||
border-spacing: 2px;
|
||||
|
||||
@ -44,13 +44,13 @@ nav .navbar .menu{
|
||||
}
|
||||
main{
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #96c7e8;
|
||||
font-size: 24px;
|
||||
flex-direction: column;
|
||||
margin-top: 75px;
|
||||
}
|
||||
.button a{
|
||||
position: fixed;
|
||||
|
||||
@ -10,10 +10,25 @@
|
||||
<script th:src="@{/webjars/jquery/1.9.1/jquery.min.js}" type="text/javascript"></script>
|
||||
<script th:src="@{/webjars/lodash/4.17.21/lodash.js}" type="text/javascript"></script>
|
||||
<main>
|
||||
<h1>Quizz <span id="question-name"></span><button id="edit-question-name">Edit</button></h1>
|
||||
<h1>Quizz
|
||||
<span id="question-name"></span>
|
||||
<input id="edit-question-name"/>
|
||||
<button id="edit-question-name-button">Edit</button>
|
||||
<button id="edit-question-name-confirm">Valider</button>
|
||||
<button id="edit-question-name-cancel">Annuler</button>
|
||||
</h1>
|
||||
|
||||
<div class="buttonbar">
|
||||
<button id="add-question">Ajouter</button>
|
||||
<button id="delete-questions">Supprimer</button>
|
||||
<button id="reorder-questions">Réordonner</button>
|
||||
</div>
|
||||
|
||||
<ol id="questions-list">
|
||||
</ol>
|
||||
|
||||
<span id="error-textbox" style="color: red"></span>
|
||||
|
||||
<script th:inline="javascript">
|
||||
/*<![CDATA[*/
|
||||
var quizzid = /*[[${quizzId}]]*/ -1;
|
||||
@ -31,7 +46,14 @@
|
||||
"read": readEditBlockBCC
|
||||
}
|
||||
}
|
||||
|
||||
// question position -> question data
|
||||
questions={}
|
||||
// Map question id -> question position
|
||||
qpositions={}
|
||||
// the name of the quizz
|
||||
quizzName = ""
|
||||
|
||||
function getdata() {
|
||||
$.ajax({
|
||||
url: "/questions/quizz-edit/"+quizzid+"/get",
|
||||
@ -45,47 +67,56 @@
|
||||
return
|
||||
}
|
||||
questions=res["questions"]
|
||||
qname=res["name"]
|
||||
$("#question-name").text(qname)
|
||||
quizzName=res["name"]
|
||||
$("#question-name").text(quizzName)
|
||||
$("#edit-question-name").val(quizzName)
|
||||
for(var i=0;i<questions.length;i++){
|
||||
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"/>
|
||||
<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}-validate-edit">Valider</button>
|
||||
<button id="question-display-${qid}-cancel-edit">Annuler</button>
|
||||
</div>
|
||||
</li>
|
||||
`
|
||||
newdom = $('<li/>').html(newhtml).contents()
|
||||
$("#questions-list").append(newdom)
|
||||
const thei = i
|
||||
const theqid = qid
|
||||
$(`#question-display-${qid}-button-edit`).on('click',e => edit(thei,theqid))
|
||||
$(`#question-display-${qid}-type-edit`).on('click',e => setType(thei,theqid))
|
||||
$(`#question-display-${qid}-validate-edit`).on('click',e => commitEdit(thei,theqid))
|
||||
$(`#question-display-${qid}-cancel-edit`).on('click',e => cancelEdit(thei,theqid))
|
||||
|
||||
newcontent = QTYPES[qu["type"]]["display"](qid,qu["value"])
|
||||
$(`#question-display-${qid}-content`).replaceWith(newcontent)
|
||||
newedit = QTYPES[qu["type"]]["edit"](qid,qu["value"])
|
||||
$(`#question-display-${qid}-edit`).replaceWith(newedit)
|
||||
|
||||
contentMode(qid)
|
||||
qpositions[questions[i]["id"]] = i
|
||||
internalCreateQuestion(i)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function internalCreateQuestion(i){
|
||||
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"/>
|
||||
<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>
|
||||
</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))
|
||||
|
||||
newcontent = QTYPES[qu["type"]]["display"](qid,qu["value"])
|
||||
$(`#question-display-${qid}-content`).replaceWith(newcontent)
|
||||
newedit = QTYPES[qu["type"]]["edit"](qid,qu["value"])
|
||||
$(`#question-display-${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()
|
||||
@ -94,6 +125,7 @@
|
||||
$(`#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()
|
||||
@ -108,16 +140,31 @@
|
||||
$(`#question-display-${qid}-validate-edit`).prop('disabled', false)
|
||||
$(`#question-display-${qid}-cancel-edit`).prop('disabled', false)
|
||||
}
|
||||
function contentNameMode() {
|
||||
$("#question-name").show()
|
||||
$(`#edit-question-name-button`).show()
|
||||
$("#edit-question-name").hide()
|
||||
$(`#edit-question-name-confirm`).hide()
|
||||
$(`#edit-question-name-cancel`).hide()
|
||||
}
|
||||
function editNameMode() {
|
||||
$("#question-name").hide()
|
||||
$(`#edit-question-name-button`).hide()
|
||||
$("#edit-question-name").show()
|
||||
$(`#edit-question-name-confirm`).show()
|
||||
$(`#edit-question-name-cancel`).show()
|
||||
}
|
||||
|
||||
function setType(i,id) {
|
||||
function setType(qid) {
|
||||
//TODO à faire ^^
|
||||
}
|
||||
|
||||
function edit(id, qid) {
|
||||
|
||||
function edit(qid) {
|
||||
editMode(qid)
|
||||
}
|
||||
|
||||
function commitEdit(i,qid) {
|
||||
function commitEdit(qid) {
|
||||
const newvalue = readEditBlockBCC(qid)
|
||||
lockEdit(qid)
|
||||
$.ajax({
|
||||
@ -134,6 +181,7 @@
|
||||
unlockEdit(qid)
|
||||
return
|
||||
}
|
||||
i = qpositions[qid]
|
||||
questions[i]["value"] = newvalue
|
||||
newcontent = QTYPES[questions[i]["type"]]["display"](qid,questions[i]["value"])
|
||||
$(`#question-display-${qid}-content`).replaceWith(newcontent)
|
||||
@ -143,12 +191,94 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
function cancelEdit(i,qid) {
|
||||
function removeQuestion(qid) {
|
||||
$(`#question-display-${qid}-remove`).prop('disabled',true)
|
||||
if(!confirm(`Voulez-vous vraiment supprimer la question ${qpositions[qid]+1}`)) {
|
||||
$(`#question-display-${qid}-remove`).prop('disabled', false)
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
url: "/questions/quizz-edit/"+quizzid+"/remove-question/"+qid,
|
||||
type: "POST",
|
||||
contentType: 'application/json',
|
||||
success: function(res) {
|
||||
console.log(res)
|
||||
if(!res["success"]) {
|
||||
console.log(res["message"])
|
||||
error(res["message"])
|
||||
$(`#question-display-${qid}-remove`).prop('disabled', false)
|
||||
return
|
||||
}
|
||||
$(`#question-display-${qid}-remove`).prop('disabled', false)
|
||||
i = qpositions[qid]
|
||||
qpositions[qid] = null
|
||||
questions.splice(i,1)
|
||||
|
||||
$(`#question-display-${qid}`).remove()
|
||||
}
|
||||
})
|
||||
}
|
||||
function cancelEdit(qid) {
|
||||
i = qpositions[qid]
|
||||
newedit = QTYPES[questions[i]["type"]]["edit"](qid,questions[i]["value"])
|
||||
$(`#question-display-${qid}-edit`).replaceWith(newedit)
|
||||
contentMode(qid)
|
||||
}
|
||||
|
||||
function commitEditName() {
|
||||
const newname = $("#edit-question-name").val()
|
||||
$("#edit-question-name").prop('disabled', true)
|
||||
$.ajax({
|
||||
url: "/questions/quizz-edit/"+quizzid+"/set-name",
|
||||
type: "POST",
|
||||
data: JSON.stringify(newname),
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function(res) {
|
||||
console.log(res)
|
||||
if(!res["success"]) {
|
||||
console.log(res["message"])
|
||||
error(res["message"])
|
||||
$("#edit-question-name").prop('disabled', false)
|
||||
return
|
||||
}
|
||||
quizzName = newname
|
||||
$(`#question-name`).text(quizzName)
|
||||
|
||||
$("#edit-question-name").prop('disabled', false)
|
||||
contentNameMode()
|
||||
}
|
||||
})
|
||||
}
|
||||
function cancelEditName(i,qid) {
|
||||
$("#edit-question-name").val(quizzName)
|
||||
contentNameMode()
|
||||
}
|
||||
|
||||
function addQuestion() {
|
||||
$("#add-question").prop('disabled', true)
|
||||
$.ajax({
|
||||
url: "/questions/quizz-edit/"+quizzid+"/add-question",
|
||||
type: "POST",
|
||||
contentType: 'application/json',
|
||||
success: function(res) {
|
||||
console.log(res)
|
||||
if(!res["success"]) {
|
||||
console.log(res["message"])
|
||||
error(res["message"])
|
||||
$("#add-question").prop('disabled', false)
|
||||
return
|
||||
}
|
||||
q = {id: res["id"], type: res["type"], value: res["value"]}
|
||||
qpositions[q["id"]] = questions.length
|
||||
questions.push(q)
|
||||
internalCreateQuestion(questions.length-1)
|
||||
$("#add-question").prop('disabled', false)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function makeEditBlockBCC(id,question) {
|
||||
html = `
|
||||
<div class="content-box dcc-box" id="question-display-${id}-edit">
|
||||
@ -197,6 +327,11 @@
|
||||
return out
|
||||
}
|
||||
|
||||
contentNameMode()
|
||||
$("#edit-question-name-button").on("click",editNameMode)
|
||||
$("#edit-question-name-confirm").on("click",commitEditName)
|
||||
$("#edit-question-name-cancel").on("click",cancelEditName)
|
||||
$("#add-question").on("click",addQuestion)
|
||||
getdata()
|
||||
</script>
|
||||
</main>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user