From 4d46c62aae833f1454b81d5baa8e25db18349040 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Sat, 1 Apr 2023 19:38:55 +0200 Subject: [PATCH] [Client] Improve questions on admin page + fix its JavaScript and deduplicate common style - Use proper HTML; - Add CSS file specific to this page; - Deduplicate common style by moving it into the admin_ui CSS file and do the corresponding changes in the admin CSS and HTML files; - Add common header; - Move questions's JavaScript in a dedicated file, improve its code and fix its access to DOM elements. --- truthinquiry/static/css/admin_ui.css | 49 ++++++---- truthinquiry/static/css/admin_ui_home.css | 26 ++--- truthinquiry/static/css/admin_ui_npc.css | 39 -------- .../static/css/admin_ui_questions.css | 32 +++++++ truthinquiry/static/js/admin.js | 36 ------- truthinquiry/static/js/admin_questions.js | 95 +++++++++++++++++++ truthinquiry/templates/admin/index.html | 4 +- truthinquiry/templates/admin/questions.html | 83 +++++++++++----- 8 files changed, 225 insertions(+), 139 deletions(-) create mode 100644 truthinquiry/static/css/admin_ui_questions.css create mode 100644 truthinquiry/static/js/admin_questions.js diff --git a/truthinquiry/static/css/admin_ui.css b/truthinquiry/static/css/admin_ui.css index db69d63..36a37b7 100644 --- a/truthinquiry/static/css/admin_ui.css +++ b/truthinquiry/static/css/admin_ui.css @@ -33,9 +33,24 @@ body { margin: var(--body-margin); } +button { + align-items: center; + border-radius: 1em; + cursor: pointer; + display: flex; + justify-content: center; +} + button, input { + background-color: transparent; + border-color: var(--admin-white-color); + border-style: solid; + border-width: 0.125em; + color: var(--admin-white-color); font-family: "Roboto Mono", sans-serif; font-size: 1em; + margin: 1em; + padding: 0.25em; } header { @@ -56,11 +71,15 @@ header a { text-decoration: none; } -header a:hover { +a:hover { background-color: var(--admin-white-color); color: var(--admin-grey-color); } +a:hover > .action_icon, .action_button:hover > .action_icon { + fill: var(--admin-grey-color); +} + html { background-color: var(--admin-grey-color); margin: 0; @@ -70,6 +89,17 @@ svg { fill: var(--admin-white-color); } +.action_button:hover { + background-color: var(--admin-white-color); + color: var(--admin-grey-color); +} + +.action_icon { + height: 2em; + transition-property: fill !important; + width: 2em; +} + .page_category { font-size: 2em; } @@ -112,20 +142,3 @@ svg { #section>input{ width: 100%; } - -.questionTypeTag{ - border: thin solid red; - margin-top: 20px; -} -.questionTypeTag input{ - width: 100%; -} - -.questionType{ - border: thin solid red; - margin-top: 20px; -} -.question input{ - width: 100%; - margin: 10px; -} diff --git a/truthinquiry/static/css/admin_ui_home.css b/truthinquiry/static/css/admin_ui_home.css index 24d3dec..427e1c7 100644 --- a/truthinquiry/static/css/admin_ui_home.css +++ b/truthinquiry/static/css/admin_ui_home.css @@ -1,13 +1,3 @@ -.add_npc_icon { - height: 2em; - transition-property: fill; - width: 2em; -} - -.add_npc_icon:hover { - transition-property: fill; -} - .add_npc_link { align-items: center; border-color: var(--admin-white-color); @@ -24,26 +14,22 @@ padding: 0.25em; } -.add_npc_link:hover { - background-color: var(--admin-white-color); - color: var(--admin-grey-color); -} - -.add_npc_link:hover > .add_npc_icon { - fill: var(--admin-grey-color); -} - .character_item { font-size: 1.5em; list-style-type: none; - margin: 1em; + margin: 0.5em; } .character_item a { + padding: 0.25em; text-decoration: underline; text-decoration-color: var(--admin-white-color); } +.character_item a:hover { + text-decoration-color: var(--admin-grey-color); +} + .character_list { align-content: center; align-items: center; diff --git a/truthinquiry/static/css/admin_ui_npc.css b/truthinquiry/static/css/admin_ui_npc.css index b20e796..9ec1079 100644 --- a/truthinquiry/static/css/admin_ui_npc.css +++ b/truthinquiry/static/css/admin_ui_npc.css @@ -1,17 +1,3 @@ -button { - display: flex; -} - -button, input { - background-color: transparent; - border-color: var(--admin-white-color); - border-style: solid; - border-width: 0.125em; - color: var(--admin-white-color); - margin: 1em; - padding: 0.25em; -} - input[type="text"] { width: 20em; } @@ -23,31 +9,6 @@ input[type="text"] { justify-content: center; } -.action_button { - align-items: center; - border-radius: 1em; - cursor: pointer; - display: flex; - flex-direction: row; - justify-content: center; - padding: 0.25em; -} - -.action_button:hover { - background-color: var(--admin-white-color); - color: var(--admin-grey-color); -} - -.action_button:hover > .action_icon { - fill: var(--admin-grey-color); -} - -.action_icon { - height: 2em; - transition-property: fill; - width: 2em; -} - .character_image { width: 15em; } diff --git a/truthinquiry/static/css/admin_ui_questions.css b/truthinquiry/static/css/admin_ui_questions.css new file mode 100644 index 0000000..9e8da1d --- /dev/null +++ b/truthinquiry/static/css/admin_ui_questions.css @@ -0,0 +1,32 @@ +.add_question_btn, #save_changes { + margin-left: auto; + margin-right: auto; +} + +.delete_question_btn, .question_input { + margin: 1em; +} + +.question { + align-content: center; + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.question_input { + flex-grow: 1; +} + +.question_type { + border-color: var(--admin-white-color); + border-radius: 1em; + border-style: solid; + margin: 1em; +} + +.question_type_title { + font-size: 1.5em; + text-align: center; +} diff --git a/truthinquiry/static/js/admin.js b/truthinquiry/static/js/admin.js index e452a1f..fd4b6ae 100644 --- a/truthinquiry/static/js/admin.js +++ b/truthinquiry/static/js/admin.js @@ -51,39 +51,3 @@ function saveFormTraits(){ } makeAPIRequest("admin/setTraits", {"traits": data, "lang": "FR"}, {"content": "json"}) } - - - -//functions for questions.html - - - - -function addInputQuestions(button){ - let questionTypeContent = button.parentNode.querySelector(".questionTypeContent"); - let newQuestion = questionTypeContent.querySelector(".question").cloneNode(true); - newQuestion.id = ""; - newQuestion.querySelector("input").value = ""; - questionTypeContent.appendChild(newQuestion); -} - -function deleteInputQuestions(buttonNode){ - let placeNode = buttonNode.parentNode; - placeNode.parentNode.removeChild(placeNode); -} - -function saveFormQuestions(){ - let data = []; - - for(let questionTypeNode of allQuestions.querySelectorAll(".questionType")){ - let questionsJson = []; - let questionTypeJson = {"questions": questionsJson}; - data.push(questionTypeJson); - - for(let questionNode of questionTypeNode.querySelectorAll("input")){ - questionsJson.push({"text": questionNode.value}) - } - } - - makeAPIRequest("admin/setQuestions", {"questions": data, "lang": "FR"}, {"content": "json"}) -} diff --git a/truthinquiry/static/js/admin_questions.js b/truthinquiry/static/js/admin_questions.js new file mode 100644 index 0000000..19807c7 --- /dev/null +++ b/truthinquiry/static/js/admin_questions.js @@ -0,0 +1,95 @@ +function addQuestion(questionAddButton) { + const questionElement = document.createElement("div"); + questionElement.classList.add("question"); + + const inputElement = document.createElement("input"); + inputElement.classList.add("question_input"); + inputElement.setAttribute("type", "text"); + + questionElement.appendChild(inputElement); + + const buttonElement = document.createElement("button"); + buttonElement.classList.add("delete_question_btn", "action_button", "short_color_transition"); + buttonElement.setAttribute("title", "Cliquez ici pour supprimer cette question"); + + const svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svgElement.classList.add("action_icon", "short_color_transition"); + svgElement.setAttribute("viewBox", "0 0 48 48"); + + const pathElement = document.createElementNS("http://www.w3.org/2000/svg", "path"); + pathElement.setAttribute("d", + "M12.45 38.7 9.3 35.55 20.85 24 9.3 12.5l3.15-3.2L24 20.8 35.55 9.3l3.15 3.2L27.2 24l11.5 11.55-3.15 3.15L24 27.2Z"); + + svgElement.appendChild(pathElement); + + buttonElement.appendChild(svgElement); + buttonElement.appendChild(document.createTextNode("Supprimer la question")); + buttonElement.addEventListener("click", () => deleteQuestion(buttonElement)); + + questionElement.appendChild(buttonElement); + + const questionTypeListElements = questionAddButton.parentNode.getElementsByClassName("question_type_list"); + if (questionTypeListElements.length == 0) { + // No question_type_list element, this should never happen + // Do nothing in this case + return; + } + + // There should be at most one question_type_list element per question type + questionTypeListElements[0].appendChild(questionElement); +} + +function deleteQuestion(questionRemoveButton) { + if (!confirm("Voulez-vous vraiement supprimer ce lieu ?")) { + return; + } + + const questionElement = questionRemoveButton.parentNode; + questionElement.parentNode.removeChild(questionElement); +} + +function saveChanges() { + const data = []; + + for (const questionTypeNode of document.getElementsByClassName("question_type")) { + const questionsJson = []; + + for (const questionNode of questionTypeNode.querySelectorAll( + ".question_type_list .question .question_input")) { + questionsJson.push({"text": questionNode.value}); + } + + const questionTypeJson = {"questions": questionsJson}; + data.push(questionTypeJson); + } + + makeAPIRequest("admin/setQuestions", {"questions": data, "lang": "FR"}, {"content": "json"}).then(() => { + alert("Opération effectuée avec succès"); + }) +} + +function setListenersToQuestionAdditionButtons() { + for (const deleteQuestionButton of document.getElementsByClassName("add_question_btn")) { + deleteQuestionButton.addEventListener("click", () => addQuestion(deleteQuestionButton)); + }; +} + +function setListenersToQuestionDeletionButtons() { + for (const deleteQuestionButton of document.getElementsByClassName("delete_question_btn")) { + deleteQuestionButton.addEventListener("click", () => deleteQuestion(deleteQuestionButton)); + }; +} + +function setListenersToSaveChangesButton() { + const saveChangesButton = document.getElementById("save_changes"); + if (saveChangesButton === null) { + // There is no save_changes button, this should never happen + // Do nothing in this case + return; + } + saveChangesButton.addEventListener("click", saveChanges); +} + +setListenersToQuestionAdditionButtons(); +setListenersToQuestionDeletionButtons(); +setListenersToSaveChangesButton(); diff --git a/truthinquiry/templates/admin/index.html b/truthinquiry/templates/admin/index.html index 2ce2a50..de264c4 100644 --- a/truthinquiry/templates/admin/index.html +++ b/truthinquiry/templates/admin/index.html @@ -29,12 +29,12 @@ - + Nouveau personnage diff --git a/truthinquiry/templates/admin/questions.html b/truthinquiry/templates/admin/questions.html index 0059d0e..507a23f 100644 --- a/truthinquiry/templates/admin/questions.html +++ b/truthinquiry/templates/admin/questions.html @@ -1,34 +1,69 @@ - Admin Page - - - + Truth Inquiry - Gestion des questions + + + + + + + + + + + - - go Back
- -
- {%for questionType in questions%} -
-
- {%for question in questionType["questions"]%} -
- - -
- {%endfor%} -
- +
+ Accueil + Gestion des questions + Gestion des lieux + Gestion des réactions + Déconnexion +
+

Truth Inquiry - Interface d'administration

+

Gestion des questions

+

Cliquez sur les champs pour éditer les questions.

+ {%for questionType in questions%} +
+

Type de question {{loop.index0}}

+
+ {%for question in questionType["questions"]%} +
+ + +
+ {%endfor%}
- {%endfor%} +
- -
- - + {%endfor%} + + + +