diff --git a/truthinquiry/static/css/admin_ui_traits.css b/truthinquiry/static/css/admin_ui_traits.css new file mode 100644 index 0000000..9e98772 --- /dev/null +++ b/truthinquiry/static/css/admin_ui_traits.css @@ -0,0 +1,17 @@ +.delete_trait_btn, #add_trait, #save_changes { + margin-left: auto; + margin-right: auto; +} + +.trait_description_container, .trait_name_container { + display: flex; + flex-wrap: wrap; + align-content: center; + justify-content: center; + align-items: center; + flex-direction: row; +} + +.trait_description_input, .trait_name_input { + width: 30em; +} diff --git a/truthinquiry/static/js/admin.js b/truthinquiry/static/js/admin.js deleted file mode 100644 index fd4b6ae..0000000 --- a/truthinquiry/static/js/admin.js +++ /dev/null @@ -1,53 +0,0 @@ -//functions for places.html - -function addInputPlaces(){ - let newPlace = places.lastElementChild.cloneNode(true); - newPlace.id = ""; - newPlace.querySelector("input").value = ""; - places.appendChild(newPlace); -} - -function deleteInputPlaces(buttonNode){ - let placeNode = buttonNode.parentNode; - placeNode.parentNode.removeChild(placeNode); -} - -function saveFormPlaces(){ - let data = []; - for(let section of places.querySelectorAll("section")){ - let place = {}; - place["id"] = section.id - place["name"] = section.querySelector("input").value - data.push(place); - } - makeAPIRequest("admin/setPlaces", {"places": data, "lang": "FR"}, {"content": "json"}) -} - - -//functions for traits.html - - -function addInputTraits(){ - let newTrait = traits.lastElementChild.cloneNode(true); - newTrait.id = ""; - newTrait.querySelector(".name_input").value = ""; - newTrait.querySelector(".desc_input").value = ""; - traits.appendChild(newTrait); -} - -function deleteInputTraits(buttonNode){ - let traitNode = buttonNode.parentNode; - traitNode.parentNode.removeChild(traitNode); -} - -function saveFormTraits(){ - let data = []; - for(let section of traits.querySelectorAll("section")){ - let trait = {}; - trait["id"] = section.id - trait["name"] = section.querySelector(".name_input").value - trait["desc"] = section.querySelector(".desc_input").value - data.push(trait); - } - makeAPIRequest("admin/setTraits", {"traits": data, "lang": "FR"}, {"content": "json"}) -} diff --git a/truthinquiry/static/js/admin_traits.js b/truthinquiry/static/js/admin_traits.js new file mode 100644 index 0000000..ef8a592 --- /dev/null +++ b/truthinquiry/static/js/admin_traits.js @@ -0,0 +1,127 @@ +function addTrait() { + const traitElement = document.createElement("div"); + traitElement.classList.add("trait"); + traitElement.setAttribute("data-id", ""); + + const traitNameContainerElement = document.createElement("div"); + traitNameContainerElement.classList.add("trait_name_container"); + + const traitNameTitleElement = document.createElement("h3"); + traitNameTitleElement.classList.add("trait_name"); + traitNameTitleElement.appendChild(document.createTextNode("Nom de la réaction\u00A0:")); + + traitNameContainerElement.appendChild(traitNameTitleElement); + + const traitNameInputElement = document.createElement("input"); + traitNameInputElement.classList.add("trait_name_input"); + traitNameInputElement.setAttribute("type", "text"); + traitNameInputElement.setAttribute("value", ""); + + traitNameContainerElement.appendChild(traitNameInputElement); + + traitElement.appendChild(traitNameContainerElement); + + const traitDescriptionElement = document.createElement("div"); + traitDescriptionElement.classList.add("trait_description_container"); + + const traitDescriptionTitleElement = document.createElement("h3"); + traitDescriptionTitleElement.classList.add("trait_description"); + traitDescriptionTitleElement.appendChild(document.createTextNode("Description de la réaction\u00A0:")); + + traitDescriptionElement.appendChild(traitDescriptionTitleElement); + + const traitDescriptionInputElement = document.createElement("input"); + traitDescriptionInputElement.classList.add("trait_description_input"); + traitDescriptionInputElement.setAttribute("type", "text"); + traitDescriptionInputElement.setAttribute("value", ""); + + traitDescriptionElement.appendChild(traitDescriptionInputElement); + + traitElement.appendChild(traitDescriptionElement); + + const buttonElement = document.createElement("button"); + buttonElement.classList.add("delete_trait_btn", "action_button", "short_color_transition"); + buttonElement.setAttribute("title", "Cliquez ici pour supprimer cette réaction"); + + 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 réaction")); + buttonElement.addEventListener("click", () => deleteTrait(buttonElement)); + + traitElement.appendChild(buttonElement); + + const traitsElement = document.getElementById("traits"); + if (traitsElement === null) { + // No places element, this should never happen + // Do nothing in this case + return; + } + + traitsElement.appendChild(traitElement); +} + +function deleteTrait(traitDeletionButton) { + if (!confirm("Voulez-vous vraiement supprimer cette réaction ?")) { + return; + } + + const traitNode = traitDeletionButton.parentNode; + traitNode.parentNode.removeChild(traitNode); +} + +function saveChanges() { + const data = []; + + for (const traitElement of document.getElementsByClassName("trait")) { + const trait = {}; + trait["id"] = traitElement.getAttribute("data-id"); + trait["name"] = traitElement.querySelector(".trait_name_input").value; + trait["desc"] = traitElement.querySelector(".trait_description_input").value; + data.push(trait); + } + + makeAPIRequest("admin/setTraits", {"traits": data, "lang": "FR"}, {"content": "json"}).then(() => { + alert("Opération effectuée avec succès"); + }); +} + +function setListenersToTraitDeletionButtons() { + for (const deleteTraitButton of document.getElementsByClassName("delete_trait_btn")) { + deleteTraitButton.addEventListener("click", () => deleteTrait(deleteTraitButton)); + }; +} + +function setListenersToTraitAdditionButton() { + const addTraitButton = document.getElementById("add_trait"); + if (addTraitButton === null) { + // There is no add_place button, this should never happen + // Do nothing in this case + return; + } + + addTraitButton.addEventListener("click", addTrait); +} + +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); +} + +setListenersToTraitDeletionButtons(); +setListenersToTraitAdditionButton(); +setListenersToSaveChangesButton(); diff --git a/truthinquiry/templates/admin/traits.html b/truthinquiry/templates/admin/traits.html index a4e2bb0..5060b5a 100644 --- a/truthinquiry/templates/admin/traits.html +++ b/truthinquiry/templates/admin/traits.html @@ -1,29 +1,71 @@ - Traits - - - + Truth Inquiry - Gestion des réactions + + + + + + + + + + + - go Back
- -
+
+ Accueil + Gestion des questions + Gestion des lieux + Gestion des réactions + Déconnexion +
+

Truth Inquiry - Interface d'administration

+

Gestion des réactions

+

Cliquez sur les champs pour éditer les informations. Les images des émotions sont disponibles par personnage dans leur page de gestion dédiée.

+
{%for trait in traits%} -
-

Name:

- -

Description:

- - -
+
+
+

Nom de la réaction :

+ +
+
+

Description de la réaction :

+ +
+ +
{%endfor%} -
- - - -

Images are viewable in the npc views

+ + + + + + - \ No newline at end of file +