diff --git a/src/public/js/deleteCatalog.js b/src/public/js/deleteCatalog.js index ecb8f46b43773a68e80a953b86f0f5978928e647..6671a08ee4aea6f48cd77ed74e65a1308538f9e2 100644 --- a/src/public/js/deleteCatalog.js +++ b/src/public/js/deleteCatalog.js @@ -1,74 +1,27 @@ -function showToast(title, message, type = "error") { - const toast = document.getElementById("toast"); - if (toast) { - toast.classList.remove("hidden"); - toast.setAttribute("data-type", type); - h3 = toast.querySelector("h3"); - h3.textContent = title; - p = toast.querySelector("p"); - p.textContent = message; - } -} - -function showDialog(uuid, title) { - const body = document.querySelector("body"); - - const dialog = document.createElement("div"); - dialog.classList.add("dialog"); - dialog.id = `dialog-${uuid}`; - dialog.innerHTML = ` - <div class="dialog__content"> - <h2> - Delete Catalog - </h2> - <p> - Are you sure you want to delete ${title}? - </p> - <div class="dialog__button-container"> - <button id="cancel"> - Cancel - </button> - <button id="delete" class="btn-bold"> - Delete - </button> - </div> - </div> - `; - - body.appendChild(dialog); - - const cancelButton = dialog.querySelector("#cancel"); - cancelButton.addEventListener("click", () => { - dialog.remove(); - }); - - const deleteButton = dialog.querySelector("#delete"); - deleteButton.addEventListener("click", () => { - dialog.remove(); - const xhttp = new XMLHttpRequest(); - xhttp.open("DELETE", `/api/catalog/${uuid}/delete`, true); - xhttp.setRequestHeader("Content-Type", "application/json"); - - xhttp.onreadystatechange = function () { - if (xhttp.readyState === 4) { - if (xhttp.status === 200) { - showToast("Success", `Catalog ${title} deleted`, "success"); - setTimeout(() => { - window.location.reload(); - }, 1000); - } else { - try { - const response = JSON.parse(xhttp.responseText); - showToast("Error", response.message, "error"); - } catch (error) { - showToast("Error", "Something went wrong", "error"); - } +function deleteCatalog(uuid, title) { + const xhttp = new XMLHttpRequest(); + xhttp.open("DELETE", `/api/catalog/${uuid}/delete`, true); + xhttp.setRequestHeader("Content-Type", "application/json"); + + xhttp.onreadystatechange = function () { + if (xhttp.readyState === 4) { + if (xhttp.status === 200) { + showToast("Success", `Catalog ${title} deleted`, "success"); + setTimeout(() => { + window.location.reload(); + }, 1000); + } else { + try { + const response = JSON.parse(xhttp.responseText); + showToast("Error", response.message, "error"); + } catch (error) { + showToast("Error", "Something went wrong", "error"); } } - }; + } + }; - xhttp.send(); - }); + xhttp.send(); } const deleteTriggerButtons = document.querySelectorAll( @@ -79,7 +32,16 @@ deleteTriggerButtons.forEach((deleteTriggerButton) => { deleteTriggerButton.addEventListener("click", () => { const uuid = deleteTriggerButton.getAttribute("data-uuid"); const title = deleteTriggerButton.getAttribute("data-title"); - showDialog(uuid, title); + dialog( + "Delete Catalog", + `Are you sure you want to delete ${title}?`, + uuid, + "delete", + "Delete", + () => { + deleteCatalog(uuid, title); + } + ); }); } }); diff --git a/src/public/js/editCatalog.js b/src/public/js/editCatalog.js index 4df7a61c89705d4b5725febfa64efaaad8880253..8bb3c98aeb14f26d90a962d33e8e394f399ee861 100644 --- a/src/public/js/editCatalog.js +++ b/src/public/js/editCatalog.js @@ -1,20 +1,4 @@ -function showToast(title, message, type = "error") { - const toast = document.getElementById("toast"); - if (toast) { - toast.classList.remove("hidden"); - toast.setAttribute("data-type", type); - h3 = toast.querySelector("h3"); - h3.textContent = title; - p = toast.querySelector("p"); - p.textContent = message; - } -} - -const form = document.getElementById("catalog-edit-form"); - -form.addEventListener("submit", function (event) { - event.preventDefault(); - +function updateCatalog(form) { const urlParts = window.location.pathname.split("/"); const uuidIndex = urlParts.indexOf("catalog") + 1; const uuid = urlParts[uuidIndex]; @@ -34,7 +18,9 @@ form.addEventListener("submit", function (event) { if (xhttp.readyState === 4) { if (xhttp.status === 200) { showToast("Success", "Catalog updated", "success"); - window.location.href = `/catalog/${uuid}`; + setTimeout(() => { + window.location.href = `/catalog/${uuid}`; + }, [1000]); } else { try { const response = JSON.parse(xhttp.responseText); @@ -47,4 +33,21 @@ form.addEventListener("submit", function (event) { }; xhttp.send(formData); +} + +const form = document.getElementById("catalog-edit-form"); + +form.addEventListener("submit", function (event) { + event.preventDefault(); + + dialog( + "Update Catalog", + `Are you sure you want to update this catalog?`, + "update", + "update", + "Update", + () => { + updateCatalog(form); + } + ); }); diff --git a/src/public/js/global.js b/src/public/js/global.js index e643b9c5565980bf4eff8eec05c4a0b2203f8c14..f02cd2c0ec44fc7a9aaea2e2cad4dcc6963c6955 100644 --- a/src/public/js/global.js +++ b/src/public/js/global.js @@ -10,6 +10,52 @@ function showToast(title, message, type = "error") { } } +function dialog( + title, + message, + dialogId, + actionId, + actionButtonText, + onaction +) { + const body = document.querySelector("body"); + + const dialog = document.createElement("div"); + dialog.classList.add("dialog"); + dialog.id = `dialog-${dialogId}`; + dialog.innerHTML = ` + <div class="dialog__content"> + <h2> + ${title} + </h2> + <p> + ${message} + </p> + <div class="dialog__button-container"> + <button id="cancel"> + Cancel + </button> + <button id=${actionId} class="btn-bold"> + ${actionButtonText} + </button> + </div> + </div> + `; + + body.appendChild(dialog); + + const cancelButton = dialog.querySelector("#cancel"); + cancelButton.addEventListener("click", () => { + dialog.remove(); + }); + + const actionButton = dialog.querySelector(`#${actionId}`); + actionButton.addEventListener("click", () => { + dialog.remove(); + onaction(); + }); +} + function like() { const btnLikes = document.querySelectorAll(".btn__like"); btnLikes.forEach((btn) => { diff --git a/src/server/app/View/catalog/edit.php b/src/server/app/View/catalog/edit.php index ff7194cc3a5eb382f356f167e5271742de6a6f1d..f7ee08e2a1af908db006c1bc152d8aae59332213 100644 --- a/src/server/app/View/catalog/edit.php +++ b/src/server/app/View/catalog/edit.php @@ -43,8 +43,8 @@ <label for="trailerField">Trailer</label> <input type="file" id="trailerField" name="trailer" accept="trailer/mp4"> </div> - <button class="btn-bold" type="submit"> - Submit + <button id="edit" class="btn-bold" type="submit"> + Edit </button> </form> </main> \ No newline at end of file