Added remove and add buttons (remove bug if you remove in a row)

src/main/java/com/bernard/misael/service/QuizzManagerImpl.java

@@ -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;

src/main/resources/static/css/quizz-edit.css

@@ -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;

src/main/resources/static/css/style.css

@@ -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;

src/main/resources/templates/quizz-edit.html

@@ -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"]
+                        quizzName=res["name"]
-                        $("#question-name").text(qname)
+                        $("#question-name").text(quizzName)
+                        $("#edit-question-name").val(quizzName)
                         for(var i=0;i<questions.length;i++){
-                            qu = questions[i]
+                            qpositions[questions[i]["id"]] = i
-                            qid = qu["id"]
+                            internalCreateQuestion(i)
-                            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 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>