From 2b20185ff5eef5103d6edce4e07e9b847bb6dd22 Mon Sep 17 00:00:00 2001 From: AudricV <74829229+AudricV@users.noreply.github.com> Date: Sat, 1 Apr 2023 23:40:37 +0200 Subject: [PATCH] [Client] Improve places admin page + fix its JavaScript - Use proper HTML; - Add specific CSS of this page in a dedicated file; - Add common header; - Move places' JavaScript in a dedicated file, improve its code and fix its access to DOM elements. --- truthinquiry/static/css/admin_ui_places.css | 16 ++++ truthinquiry/static/js/admin_places.js | 95 +++++++++++++++++++++ truthinquiry/templates/admin/places.html | 70 +++++++++++---- 3 files changed, 165 insertions(+), 16 deletions(-) create mode 100644 truthinquiry/static/css/admin_ui_places.css create mode 100644 truthinquiry/static/js/admin_places.js diff --git a/truthinquiry/static/css/admin_ui_places.css b/truthinquiry/static/css/admin_ui_places.css new file mode 100644 index 0000000..1b6d55a --- /dev/null +++ b/truthinquiry/static/css/admin_ui_places.css @@ -0,0 +1,16 @@ +.place { + align-content: center; + align-items: center; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.place_input { + flex-grow: 1; +} + +#add_place, #save_changes { + margin-left: auto; + margin-right: auto; +} diff --git a/truthinquiry/static/js/admin_places.js b/truthinquiry/static/js/admin_places.js new file mode 100644 index 0000000..c536e98 --- /dev/null +++ b/truthinquiry/static/js/admin_places.js @@ -0,0 +1,95 @@ +function addPlace() { + const placeElement = document.createElement("div"); + placeElement.classList.add("place"); + + const inputElement = document.createElement("input"); + inputElement.classList.add("place_input"); + inputElement.setAttribute("type", "text"); + inputElement.setAttribute("id", ""); + + placeElement.appendChild(inputElement); + + const buttonElement = document.createElement("button"); + buttonElement.classList.add("delete_place_btn", "action_button", "short_color_transition"); + buttonElement.setAttribute("title", "Cliquez ici pour supprimer ce lieu"); + + 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 le lieu")); + buttonElement.addEventListener("click", () => deletePlace(buttonElement)); + + placeElement.appendChild(buttonElement); + + const placesElement = document.getElementById("places"); + if (placesElement === null) { + // No places element, this should never happen + // Do nothing in this case + return; + } + + placesElement.appendChild(placeElement); +} + +function deletePlace(placeRemoveButton) { + if (!confirm("Voulez-vous vraiement supprimer ce lieu ?")) { + return; + } + + const placeElement = placeRemoveButton.parentNode; + placeElement.parentNode.removeChild(placeElement); +} + +function saveChanges() { + const data = []; + for (const section of document.getElementsByClassName("place")) { + const place = {}; + place["id"] = section.id; + place["name"] = section.querySelector("input").value; + data.push(place); + } + + makeAPIRequest("admin/setPlaces", {"places": data, "lang": "FR"}, {"content": "json"}).then(() => { + alert("Opération effectuée avec succès"); + }); +} + +function setListenersToPlaceAdditionButton() { + const addPlaceButton = document.getElementById("add_place"); + if (addPlaceButton === null) { + // There is no add_place button, this should never happen + // Do nothing in this case + return; + } + + addPlaceButton.addEventListener("click", addPlace); +} + +function setListenersToPlaceDeletionButtons() { + for (const deletePlaceButton of document.getElementsByClassName("delete_place_btn")) { + deletePlaceButton.addEventListener("click", () => deletePlace(deletePlaceButton)); + }; +} + +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); +} + +setListenersToPlaceDeletionButtons(); +setListenersToPlaceAdditionButton(); +setListenersToSaveChangesButton(); diff --git a/truthinquiry/templates/admin/places.html b/truthinquiry/templates/admin/places.html index 2b091b9..fe7c98e 100644 --- a/truthinquiry/templates/admin/places.html +++ b/truthinquiry/templates/admin/places.html @@ -1,26 +1,64 @@ - Places - - - + Truth Inquiry - Gestion des lieux + + + + + + + + + + + - go Back
- - -
+
+ Accueil + Gestion des questions + Gestion des lieux + Gestion des réactions + Déconnexion +
+

Truth Inquiry - Interface d'administration

+

Gestion des lieux

+

Cliquez sur les champs pour éditer les lieux.

+
{%for place in places%} -
- - -
+
+ + +
{%endfor%} -
- - - + + + + + +