Ajout d'une page d'édition des quizz
This commit is contained in:
@@ -0,0 +1,204 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr" dir="ltr">
|
||||
<head>
|
||||
<div th:replace="~{html-head}"/>
|
||||
<link rel="stylesheet" th:href="@{/css/quizz-edit.css}"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div th:replace="~{header}"/>
|
||||
<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>
|
||||
<ol id="questions-list">
|
||||
</ol>
|
||||
<span id="error-textbox" style="color: red"></span>
|
||||
<script th:inline="javascript">
|
||||
/*<![CDATA[*/
|
||||
var quizzid = /*[[${quizzId}]]*/ -1;
|
||||
/*]]>*/
|
||||
</script>
|
||||
<script>
|
||||
function error(txt) {
|
||||
console.log(txt)
|
||||
$("#error-textbox").text(txt)
|
||||
}
|
||||
QTYPES = {
|
||||
"DCC": {
|
||||
"display" : makeAnswerBlockBCC,
|
||||
"edit": makeEditBlockBCC,
|
||||
"read": readEditBlockBCC
|
||||
}
|
||||
}
|
||||
questions={}
|
||||
function getdata() {
|
||||
$.ajax({
|
||||
url: "/questions/quizz-edit/"+quizzid+"/get",
|
||||
type: "POST",
|
||||
dataType: "json",
|
||||
success: function(res) {
|
||||
console.log(res)
|
||||
if(!res["success"]) {
|
||||
console.log(res["message"])
|
||||
error(res["message"])
|
||||
return
|
||||
}
|
||||
questions=res["questions"]
|
||||
qname=res["name"]
|
||||
$("#question-name").text(qname)
|
||||
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)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function contentMode(qid) {
|
||||
$(`#question-display-${qid}-content`).show()
|
||||
$(`#question-display-${qid}-button-edit`).show()
|
||||
$(`#question-display-${qid}-type-edit`).show()
|
||||
$(`#question-display-${qid}-edit`).hide()
|
||||
$(`#question-display-${qid}-validate-edit`).hide()
|
||||
$(`#question-display-${qid}-cancel-edit`).hide()
|
||||
}
|
||||
function editMode(qid) {
|
||||
$(`#question-display-${qid}-content`).hide()
|
||||
$(`#question-display-${qid}-button-edit`).hide()
|
||||
$(`#question-display-${qid}-type-edit`).hide()
|
||||
$(`#question-display-${qid}-edit`).show()
|
||||
$(`#question-display-${qid}-validate-edit`).show()
|
||||
$(`#question-display-${qid}-cancel-edit`).show()
|
||||
}
|
||||
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)
|
||||
}
|
||||
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)
|
||||
}
|
||||
|
||||
function setType(i,id) {
|
||||
//TODO à faire ^^
|
||||
}
|
||||
|
||||
function edit(id, qid) {
|
||||
editMode(qid)
|
||||
}
|
||||
|
||||
function commitEdit(i,qid) {
|
||||
const newvalue = readEditBlockBCC(qid)
|
||||
lockEdit(qid)
|
||||
$.ajax({
|
||||
url: "/questions/quizz-edit/"+quizzid+"/edit-question/"+qid,
|
||||
type: "POST",
|
||||
data: JSON.stringify(newvalue),
|
||||
dataType: "json",
|
||||
contentType: 'application/json',
|
||||
success: function(res) {
|
||||
console.log(res)
|
||||
if(!res["success"]) {
|
||||
console.log(res["message"])
|
||||
error(res["message"])
|
||||
unlockEdit(qid)
|
||||
return
|
||||
}
|
||||
questions[i]["value"] = newvalue
|
||||
newcontent = QTYPES[questions[i]["type"]]["display"](qid,questions[i]["value"])
|
||||
$(`#question-display-${qid}-content`).replaceWith(newcontent)
|
||||
|
||||
unlockEdit(qid)
|
||||
contentMode(qid)
|
||||
}
|
||||
})
|
||||
}
|
||||
function cancelEdit(i,qid) {
|
||||
newedit = QTYPES[questions[i]["type"]]["edit"](qid,questions[i]["value"])
|
||||
$(`#question-display-${qid}-edit`).replaceWith(newedit)
|
||||
contentMode(qid)
|
||||
}
|
||||
|
||||
function makeEditBlockBCC(id,question) {
|
||||
html = `
|
||||
<div class="content-box dcc-box" id="question-display-${id}-edit">
|
||||
<h5><input id="question-display-${id}-edit-question"
|
||||
type="text" value="${_.escape(question["text"])}"/></h5>
|
||||
<ol>
|
||||
<li class="right">☑ <input id="question-display-${id}-edit-good"
|
||||
type="text" value="${_.escape(question["good"])}"/></li>
|
||||
<li class="wrong">☒ <input id="question-display-${id}-edit-wrong1"
|
||||
type="text" value="${_.escape(question["wrong"][0])}"/></li>
|
||||
<li class="wrong">☒ <input id="question-display-${id}-edit-wrong2"
|
||||
type="text" value="${_.escape(question["wrong"][1])}"/></li>
|
||||
<li class="wrong">☒ <input id="question-display-${id}-edit-wrong3"
|
||||
type="text" value="${_.escape(question["wrong"][2])}"/></li>
|
||||
</ol>
|
||||
</div>
|
||||
`
|
||||
out = $('<div/>').html(html).contents()
|
||||
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()
|
||||
return {
|
||||
"text": questionText,
|
||||
"good": goodText,
|
||||
"wrong": [wrongText1,wrongText2,wrongText3]
|
||||
}
|
||||
}
|
||||
function makeAnswerBlockBCC(id,question) {
|
||||
html = `
|
||||
<div class="content-box dcc-box" id="question-display-${id}-content">
|
||||
<h5>${_.escape(question["text"])}</h5>
|
||||
<ol>
|
||||
<li class="right">☑ ${_.escape(question["good"])}</li>
|
||||
<li class="wrong">☒ ${_.escape(question["wrong"][0])}</li>
|
||||
<li class="wrong">☒ ${_.escape(question["wrong"][1])}</li>
|
||||
<li class="wrong">☒ ${_.escape(question["wrong"][2])}</li>
|
||||
</ol>
|
||||
</div>
|
||||
`
|
||||
out = $('<div/>').html(html).contents()
|
||||
return out
|
||||
}
|
||||
|
||||
getdata()
|
||||
</script>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -8,7 +8,7 @@
|
||||
<div th:replace="~{header}"/>
|
||||
<main>
|
||||
<ul>
|
||||
<li>Premier item ?</li>
|
||||
<li th:if="${#lists.isEmpty(quizz)}">Aucun quizz de disponible malheureusement :(</li>
|
||||
<li th:each="q : ${quizz}"><a th:href="@{/questions/form/{id}(id=${q.id})}">Quizz <span th:text="${q.name}"/></a></li>
|
||||
</ul>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user