diff --git a/README.md b/README.md index baa1842e07812beb577c91c0d20cf81bc5148acf..243cafb64d504fa2ce5489b612ed8bd729a2be57 100644 --- a/README.md +++ b/README.md @@ -18,16 +18,24 @@ Webtune merupakan suatu aplikasi pemutaran lagu berbasis web yang dibuat menggun    + + ## Penjelasan mengenai pembagian tugas masing-masing anggota -Login: 13520128 -Register: 13520128 -Home: 13520128 -Daftar user: 13520128 -Daftar Album: 13520047 -Detail Album: 13520047 -CRUD album: 13520047 -CRUD lagu: 13520086 -search: 13520086 -sort: 13520086 -filter: 13520086 -detail lagu: 13520086 +### Milestone 1 +- Login: 13520128 +- Register: 13520128 +- Home: 13520128 +- Daftar user: 13520128 +- Daftar Album: 13520047 +- Detail Album: 13520047 +- CRUD album: 13520047 +- CRUD lagu: 13520086 +- search: 13520086 +- sort: 13520086 +- filter: 13520086 +- detail lagu: 13520086 +### Milestone 2 +- Perubahan Database: 13520128 +- Halaman List Penyanyi Premium: 13520086 +- Halaman List Lagu Premium: 13520047, 13520128 +- Endpoint Callback: 13520128 diff --git a/View/Pages/EditLagu.php b/View/Pages/EditLagu.php index 3f1eaa1bb078d1c8e26cfaa176a42980ebb77307..a9b9ed77cb6a70747063425b94451ab74065746e 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/image-7.png b/image-7.png new file mode 100644 index 0000000000000000000000000000000000000000..626494d62ff9b1f6910e4ca2167178d7f888e75f Binary files /dev/null and b/image-7.png differ diff --git a/image-8.png b/image-8.png new file mode 100644 index 0000000000000000000000000000000000000000..10c11338b0f3ac10a84f76689aa695e975284d50 Binary files /dev/null and b/image-8.png differ diff --git a/static/css/form.css b/static/css/form.css index 45e3b7583d9ef1e911d927b2e3a87c2dbff9cfb6..922228c227907880d05f319692699ad2430643e9 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 cba776e72c543ea8bdeb0f90ae84af47388ca330..6df8cbe259e41eea968ac929269fcbbf3f125604 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 c2e720a0f6b459da2c5de7de9da8da822b388e07..212d209fec892b02e70a59139a818a01efc63f39 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