From 90fa1046415db7cf99f30514833a7ab0cd943ee6 Mon Sep 17 00:00:00 2001
From: Fawwaz Anugrah Wiradhika Dharmasatya <13520086.std.stei.itb.ac.id>
Date: Fri, 2 Dec 2022 14:39:01 +0700
Subject: [PATCH] fix: fix cancel and delete button
---
View/Pages/EditLagu.php | 14 +--
static/css/form.css | 4 +
static/js/editLaguPage.js | 20 ++++
static/js/modifylagu.js | 197 +-------------------------------------
4 files changed, 33 insertions(+), 202 deletions(-)
diff --git a/View/Pages/EditLagu.php b/View/Pages/EditLagu.php
index 3f1eaa1..a9b9ed7 100644
--- a/View/Pages/EditLagu.php
+++ b/View/Pages/EditLagu.php
@@ -13,7 +13,7 @@ $this->layout("Templates/PageTemplate", [
],
]);
?>
-<p id="status"><?= $status ?? "" ?></p>
+<div id="status_"></div>
<div class="container__lagu">
<h1>Edit Lagu</h1>
<label for="image">Pilih Gambar:
@@ -33,11 +33,13 @@ $this->layout("Templates/PageTemplate", [
<input id="genre" name="genre" type="text" placeholder="<?= $genre ?>">
</label>
<p id="duration">Durasi: <?= $duration ?></p>
- <?php if (isset($auth) && $auth->is_admin) {
- echo <<<XYZ
- <button id="edit" type="submit">Edit Lagu</button>
- XYZ;
- } ?>
+ <?php if (isset($auth) && $auth->is_admin) { ?>
+ <div>
+ <button id="cancel" type="submit">Batalkan</button>
+ <button id="edit" type="submit">Edit Lagu</button>
+ <button id="delete" type="submit">Hapus Lagu</button>
+ </div>
+ <?php } ?>
</div>
<input id="songId" type="hidden" name="id" value=<?= $id ?>>
\ No newline at end of file
diff --git a/static/css/form.css b/static/css/form.css
index 45e3b75..922228c 100644
--- a/static/css/form.css
+++ b/static/css/form.css
@@ -18,4 +18,8 @@
}
button{
color: black;
+}
+
+#delete{
+ background-color: red;
}
\ No newline at end of file
diff --git a/static/js/editLaguPage.js b/static/js/editLaguPage.js
index cba776e..6df8cbe 100644
--- a/static/js/editLaguPage.js
+++ b/static/js/editLaguPage.js
@@ -1,4 +1,6 @@
const editButton = document.querySelector("#edit")
+const cancelButton = document.querySelector("#cancel")
+const deleteButton = document.querySelector("#delete")
const image = document.querySelector("#image")
const audio = document.querySelector("#audio")
const title = document.querySelector("#title")
@@ -37,4 +39,22 @@ editButton.onclick = async () => {
let data = status_update["data"]
console.log(status_update)
+}
+cancelButton.onclick = () => {
+ window.location = "/lagu/" + document.querySelector("input[name='id'").value
+}
+
+deleteButton.onclick = async (e) => {
+ let status = await http.delete("/lagu/delete/" + document.querySelector("input[name='id'").value)
+ console.log(status)
+ let sta = status["data"]["deleted"]
+ if (sta === true) {
+ document.querySelector(".container__lagu").innerHTML =
+ `
+ <h1> Lagu Berhasil Dihapus!</h1>
+ <a href="/">
+ <button id="returnButton"> Kembali ke halaman awal</button>
+ </a>
+ `
+ }
}
\ No newline at end of file
diff --git a/static/js/modifylagu.js b/static/js/modifylagu.js
index c2e720a..212d209 100644
--- a/static/js/modifylagu.js
+++ b/static/js/modifylagu.js
@@ -1,200 +1,5 @@
const editButton = document.querySelector("button#edit");
const idInput = document.querySelector("#songId")
-// const image = document.querySelector("#image")
-// const audio = document.querySelector("#audio")
-// const title = document.querySelector("#title")
-// const singer_name = document.querySelector("#singer_name")
-// const release_date = document.querySelector("#release_date")
-// const genre = document.querySelector("#genre")
-// const imageContainer = document.querySelector("#imageContainer")
-// const audioPlayer = document.querySelector("audio")
-// const duration = document.querySelector("#duration")
-// const content_div = title.parentNode
-// let initialData = {}
-// let modifiedData = {}
editButton.onclick = ()=>{
window.location = `/lagu/${idInput.value}/edit`
-}
-// function getContent(parent) {
-// let text = parent.innerHTML.split(" ")
-// parent.innerHTML = text.shift()
-// let contentText = ""
-// if (text.length > 1) {
-// contentText = text.join(" ")
-// }
-// else if (text.length === 1) {
-// contentText = text[0]
-// }
-// return contentText;
-// }
-// editButton.onclick = (e) => {
-// //edit gambar
-// const inputGambar = document.createElement("input")
-// inputGambar.type = "file"
-// inputGambar.accept = "image/*"
-// imageContainer.appendChild(inputGambar)
-// let srcc = image.src.split('/')
-// for (i = 0; i < 3; i++) {
-// srcc.shift()
-// }
-// initialData["image_path"] = ('/' + srcc.join("/")).replace("%20", " ")
-// //edit lagu
-// const inputLagu = document.createElement("input")
-// inputLagu.accept = "audio/*"
-// inputLagu.type = "file"
-// audioPlayer.parentNode.insertBefore(inputLagu, audioPlayer.nextSibling)
-// srcc = audio.src.split('/')
-// for (i = 0; i < 3; i++) {
-// srcc.shift()
-// }
-// initialData["audio_path"] = ('/' + srcc.join("/")).replace("%20", " ")
-// //edit judul
-// let titleText = getContent(title)
-// const ubahJudul = document.createElement("input")
-// ubahJudul.type = "text"
-// ubahJudul.value = titleText
-// title.parentNode.insertBefore(ubahJudul, title.nextSibling)
-
-// initialData["title"] = titleText
-
-// //edit tanggal rilis
-// let dateText = release_date.getAttribute("data-date-type")
-// console.log(dateText)
-// const ubahDate = document.createElement("input")
-// ubahDate.type = "date"
-// ubahDate.value = dateText
-// release_date.parentNode.insertBefore(ubahDate, release_date.nextSibling)
-// initialData["release_date"] = dateText
-// //edit genre
-// let genreText = getContent(genre)
-// const ubahGenre = document.createElement("input")
-// ubahGenre.type = "text"
-// ubahGenre.value = genreText
-// genre.parentNode.insertBefore(ubahGenre, genre.nextSibling)
-// initialData["genre"] = genreText
-// //tambahin tombol cancel dan update
-// let buttonsList = document.createElement("div")
-// buttonsList.id = "list__button"
-// duration.parentNode.insertBefore(buttonsList, duration.nextSibling)
-// //button cancel
-// let cancelButton = document.createElement("button")
-// cancelButton.innerText = "Batalkan"
-// cancelButton.onclick = (e) => {
-// status.innerHTML = ''
-// title.innerHTML = title.innerHTML + " " + initialData["title"]
-// genre.innerHTML = genre.innerHTML + " " + initialData["genre"]
-// //hapus input field
-// imageContainer.removeChild(inputGambar)
-// audioPlayer.parentNode.removeChild(inputLagu)
-// content_div.removeChild(ubahJudul)
-// content_div.removeChild(ubahDate)
-// content_div.removeChild(ubahGenre)
-// //hapus tombol
-// buttonsList.innerHTML = ''
-// buttonsList.parentNode.removeChild(buttonsList)
-// //tampilin lagi edit button
-// editButton.style.display = "inline-block"
-// }
-
-// buttonsList.appendChild(cancelButton)
-// //button update
-// let updateButton = document.createElement("button")
-// updateButton.innerText = "Ubah"
-// buttonsList.appendChild(updateButton)
-
-// updateButton.onclick = async (e) => {
-// modifiedData["title"] = ubahJudul.value
-// modifiedData["release_date"] = ubahDate.value
-// modifiedData["genre"] = ubahGenre.value
-// modifiedData["id"] = document.querySelector("input[name='id'").value
-// modifiedData["audio"] = inputLagu.files[0];
-// modifiedData["image"] = inputGambar.files[0];
-
-// console.log(modifiedData)
-// //bikin form data
-// let formData = new FormData()
-// if (modifiedData["title"] !== initialData["title"]) {
-// formData.append("title", modifiedData["title"])
-// }
-// if (modifiedData["release_date"] !== initialData["release_date"]) {
-// formData.append("release_date", modifiedData["release_date"])
-// }
-// if (modifiedData["genre"] !== initialData["genre"]) {
-// formData.append("genre", modifiedData["genre"])
-// }
-// formData.append("id", modifiedData["id"])
-// if (modifiedData["release_date"] !== initialData["release_date"]) {
-// formData.append("release_date", modifiedData["release_date"])
-// }
-// if (modifiedData["image"] !== null && modifiedData["image"] !== undefined) {
-// formData.append("image", modifiedData["image"])
-// }
-// if (modifiedData["audio"] !== null && modifiedData["audio"] !== undefined) {
-// formData.append("audio", modifiedData["audio"])
-// }
-// console.log(formData)
-// console.log("/lagu/" + document.querySelector("input[name='id'").value)
-// const status_update = await http.post("/lagu/" + document.querySelector("input[name='id'").value, formData, {
-// json: false,
-// // headers: {
-// // "Content-Type": "multipart/form-data"
-// // },
-// });
-// let data = status_update["data"]
-// console.log(status_update)
-// console.log(data)
-// //update
-// audio.src = data["audio_path"]
-// audio.type = data["sound_type"]
-// image.src = data["image_path"]
-// title.innerHTML = title.innerHTML + " " + data["title"]
-// getContent(release_date)
-// release_date.innerHTML = "Tanggal Rilis: " + data["release_date"]
-// genre.innerHTML = genre.innerHTML + " " + data["genre"]
-// release_date.dataset.dateType = data["date"]
-// let status_ = document.querySelector("#status")
-// status_.innerText = data["status"]
-// status_.classList.add("success__added")
-// //hapus input field
-// imageContainer.removeChild(inputGambar)
-// audioPlayer.parentNode.removeChild(inputLagu)
-// content_div.removeChild(ubahJudul)
-// content_div.removeChild(ubahDate)
-// content_div.removeChild(ubahGenre)
-// //hapus tombol
-// buttonsList.innerHTML = ''
-// buttonsList.parentNode.removeChild(buttonsList)
-// //tampilin lagi edit button
-// editButton.style.display = "inline-block"
-
-// }
-// //button delete
-// let deleteButton = document.createElement("button")
-// deleteButton.innerText = "Hapus Lagu"
-// deleteButton.classList.add("remove__button")
-// deleteButton.style.backgroundColor = "red"
-// buttonsList.appendChild(deleteButton)
-// deleteButton.onclick = async (e) => {
-// let status = await http.delete("/lagu/delete/" + document.querySelector("input[name='id'").value)
-// console.log(status)
-// let sta = status["data"]["deleted"]
-// if (sta === true) {
-// let contess = document.querySelector(".content")
-// contess.innerHTML = `
-// <h1> Lagu Berhasil Dihapus!</h1>
-// <a href="/">
-// <button id="returnButton"> Kembali ke halaman awal</button>
-// </a>
-// `
-// }
-// }
-// //tulisan kalau lagi di mode edit
-// let status = document.querySelector("#status")
-// status.innerText = "Edit Lagu"
-// imageContainer.parentNode.insertBefore(status, imageContainer)
-
-// //hapus edit button
-// //editButton.parentElement.removeChild(editButton)
-// editButton.style.display = "none"
-// console.log(initialData)
-// }
\ No newline at end of file
+}
\ No newline at end of file
--
GitLab