fix: fix cancel and delete button

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

static/css/form.css

@@ -18,4 +18,8 @@
 }
 button{
   color: black;
+}
+
+#delete{
+  background-color: red;
 }
\ No newline at end of file

static/js/editLaguPage.js

 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

static/js/modifylagu.js

  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) {
+}
\ No newline at end of file
-//   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