diff --git a/src/app/components/library/library.php b/src/app/components/library/library.php index 307ab31cc2df3f209e1dfaefaabcf1fa88475afc..92abd3d5f21eea3b589eb46ca80f79086a1e8c9b 100644 --- a/src/app/components/library/library.php +++ b/src/app/components/library/library.php @@ -8,15 +8,13 @@ <!-- Page-specific CSS --> <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/library/library.css"> - <script type="text/javascript" src="<?= BASE_URL ?>/javascript/library/library2.js" defer></script> - <title>Library</title> </head> <body> - <button class="new-playlist-btn" onclick="toggle()">New Playlist</button> + <button class="new-playlist-btn">New Playlist</button> - <main> - <div class="playlist-container" id="blur"> + <main id="blur"> + <div class="playlist-container"> <?php include(dirname(__DIR__) . "/library/playlist.php")?> </div> </main> @@ -34,7 +32,4 @@ </form> </div> </body> - -<script type="text/javascript"> -</script> </html> \ No newline at end of file diff --git a/src/app/components/library/playlist.php b/src/app/components/library/playlist.php index 1f5c858f1f45840c9dc70e6e84f835ccc4c7384f..d4d14e9257d147a33df3c09ffa8a85ac6c698a00 100644 --- a/src/app/components/library/playlist.php +++ b/src/app/components/library/playlist.php @@ -1,4 +1,5 @@ <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/library/library.css"> +<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <?php if (!empty($this->data)): ?> <div class="user-playlist"> @@ -10,6 +11,7 @@ <div class="info"> <div class="sh5"><?=$playlist['title']?> </div> </div> + <i class='bx bx-trash' data-id="<?=$playlist["id_playlist"]?>"></i> </div> <?php endforeach; ?> </div> diff --git a/src/app/components/playlist/playlist.php b/src/app/components/playlist/playlist.php index a4dd9e9a1ddbb6704d86f52b378d9b9d672a8ff2..944ab65bd4f4d8f88d4fce204e56321b81bfd9ec 100644 --- a/src/app/components/playlist/playlist.php +++ b/src/app/components/playlist/playlist.php @@ -12,15 +12,10 @@ <title>Playlist</title> </head> <body> - <?php include(dirname(__DIR__) . "/common/sidebar.php")?> - <?php include(dirname(__DIR__) . "/common/profile.php")?> - - <main> <div class="playlist-container" data-id="<?=$_GET["playlist_id"]?>"> <?php include(dirname(__DIR__) . "/playlist/playlist_content.php")?> </div> </main> - <?php include(dirname(__DIR__) . "/common/player.php")?> </body> </html> \ No newline at end of file diff --git a/src/app/controllers/library/delete_library.php b/src/app/controllers/library/delete_library.php new file mode 100644 index 0000000000000000000000000000000000000000..6e4632e9974a0a25ee89ae443848aa604a30cbec --- /dev/null +++ b/src/app/controllers/library/delete_library.php @@ -0,0 +1,33 @@ +<?php + +class DeleteLibraryController +{ + public function call() + { + session_start(); + + if(!isset($_SESSION["user_id"])){ + header("Location: " . BASE_URL . "/login"); + + return; + } + + $playlistId = ""; + + if(isset($_GET["playlist_id"])){ + $playlistId = $_GET["playlist_id"]; + } + + $model = new PlaylistModel(); + + try{ + $model->deletePlaylist($playlistId); + http_response_code(201); + exit; + }catch(PDOException $e){ + http_response_code(200); + echo($e->getMessage()); + exit; + } + } +} diff --git a/src/app/controllers/playlist/post_playlist.php b/src/app/controllers/playlist/delete_playlist.php similarity index 73% rename from src/app/controllers/playlist/post_playlist.php rename to src/app/controllers/playlist/delete_playlist.php index fada90eac7ea0b386395aaa40ca9bbb6518341bb..04641e18547a7e49a9aaa8091e39037f91287213 100644 --- a/src/app/controllers/playlist/post_playlist.php +++ b/src/app/controllers/playlist/delete_playlist.php @@ -1,6 +1,6 @@ <?php -class PostPlaylistController +class DeletePlaylistController { public function call() { @@ -15,9 +15,9 @@ class PostPlaylistController $idPodcast = ""; $idPlaylist = ""; - if(isset($_POST["id_playlist"]) && isset($_POST["id_podcast"])){ - $idPlaylist = $_POST["id_playlist"]; - $idPodcast = $_POST["id_podcast"]; + if(isset($_GET["playlist_id"]) && isset($_GET["podcast_id"])){ + $idPlaylist = $_GET["playlist_id"]; + $idPodcast = $_GET["podcast_id"]; } $model = new PlaylistModel(); diff --git a/src/app/core/app.php b/src/app/core/app.php index 72ddb53ecfd2ceb5af10dffc6c0145098b628e38..495ea473496121481dff2ecb12f40a8f0a3007de 100644 --- a/src/app/core/app.php +++ b/src/app/core/app.php @@ -58,8 +58,8 @@ class App $router->get("public/signup", new GetSignupController()); $router->post("public/signup", new PostSignupController()); $router->post("public/library", new PostLibraryController()); - $router->get("public/playlist", new GetPlaylistController()); - $router->post("public/playlist", new PostPlaylistController()); + $router->delete("public/library", new DeleteLibraryController()); + $router->delete("public/playlist", new DeletePlaylistController()); $router->directRequest($url); } diff --git a/src/app/init.php b/src/app/init.php index 2022d21e6e3e26afa8dc5c730e45b11222eebf98..131eca5c7e8470d5649953a1e018048316ec8b91 100644 --- a/src/app/init.php +++ b/src/app/init.php @@ -34,9 +34,10 @@ require_once __DIR__ . "/controllers/login/post_login.php"; require_once __DIR__ . "/controllers/library/get_library.php"; require_once __DIR__ . "/controllers/playlist/get_playlist.php"; -require_once __DIR__ . "/controllers/playlist/post_playlist.php"; +require_once __DIR__ . "/controllers/playlist/delete_playlist.php"; require_once __DIR__ . "/controllers/library/get_library.php"; require_once __DIR__ . "/controllers/library/post_library.php"; +require_once __DIR__ . "/controllers/library/delete_library.php"; require_once __DIR__ . "/controllers/signup/get_signup.php"; require_once __DIR__ . "/controllers/signup/post_signup.php"; require_once __DIR__ . "/controllers/search/get_search.php"; diff --git a/src/public/javascript/app/app.js b/src/public/javascript/app/app.js index ac4d4093e4cea57b5d262ee7be35c69f3744d76f..0dd9d16448d610028e0f736c5195c685d986ce2b 100644 --- a/src/public/javascript/app/app.js +++ b/src/public/javascript/app/app.js @@ -1,4 +1,6 @@ import { handleDashboard } from "../dashboard/layout.mjs"; +import { handlePlaylist } from "../library/library.mjs"; +import { handleLibrary } from "../library/library2.mjs"; const mainSection = document.querySelector("#main-section"); const sidebar = document.querySelector(".sidebar"); @@ -29,6 +31,10 @@ const getPage = (page, queryParam) => { // handleSearch(); if (window.location.href.includes("dashboard")) { handleDashboard(); + } else if(window.location.href.includes("library")){ + handleLibrary(); + } else if(window.location.href.includes("playlist")){ + handlePlaylist(); } } }; diff --git a/src/public/javascript/library/library.js b/src/public/javascript/library/library.mjs similarity index 69% rename from src/public/javascript/library/library.js rename to src/public/javascript/library/library.mjs index 906458bd1d23dfa46bbfd6d7981687e7e3ae8074..f8e21b0f8ae1975c8def29395a584f7641b8a605 100644 --- a/src/public/javascript/library/library.js +++ b/src/public/javascript/library/library.mjs @@ -1,9 +1,6 @@ -"use strict" - import { showErrorToast, showSuccessToast } from "../toast.mjs"; - -document.addEventListener("DOMContentLoaded", (e) =>{ +export function handlePlaylist(){ const trashEl = document.querySelectorAll('.bx-trash'); const playlistContainer = document.querySelector('.playlist-container') @@ -12,20 +9,17 @@ document.addEventListener("DOMContentLoaded", (e) =>{ trashEl.forEach(function(trash){ trash.addEventListener("click", (e) => { e.preventDefault(); - - const data = new FormData(); - - const xhr = new XMLHttpRequest(); - data.append("id_podcast", trash.dataset.id); - data.append("id_playlist", playlistContainer.dataset.id); + const podcastId = trash.dataset.id; + const playlistId = playlistContainer.dataset.id; - xhr.open("POST", "/public/playlist", true); + xhr.open("DELETE", `/public/playlist?podcast_id=${podcastId}&playlist_id=${playlistId}`, true); xhr.onload = function () { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status === 201) { showSuccessToast("Podcast berhasil dihapus dari playlist!"); + }else{ // status code 200, some error showErrorToast("Podcast gagal dihapus dari playlist!"); } @@ -35,4 +29,4 @@ document.addEventListener("DOMContentLoaded", (e) =>{ }) }) } -}); \ No newline at end of file +} diff --git a/src/public/javascript/library/library2.js b/src/public/javascript/library/library2.js deleted file mode 100644 index c542a2a6ff5367d37c6b1a6c83a306e65717c185..0000000000000000000000000000000000000000 --- a/src/public/javascript/library/library2.js +++ /dev/null @@ -1,108 +0,0 @@ -"use strict"; - -function toggle(){ - const blur = document.getElementById("blur"); - const popup = document.getElementById("popup"); - blur.classList.toggle('active'); - popup.classList.toggle('active'); -} - -document.addEventListener("DOMContentLoaded", function () { - - const blurEl = document.getElementById("blur"); - const main = document.querySelector("main"); - const playlistTitleInput = document.getElementById("playlist-title"); - const playlistTitleAlert = document.getElementById("playlist-title-alert"); - const addPlaylistForm = document.getElementById("add-playlist-form"); - const deletePlaylistEl = document.querySelectorAll(".bx-trash"); - - let playlistTitleValid = false; - - main.addEventListener("click", (e) => { - - if(blurEl.classList.contains("active")){ - e.preventDefault(); - toggle(); - } - }); - - playlistTitleInput && playlistTitleInput.addEventListener("keyup", () => { - const playlistTitle = playlistTitleInput.value; - - - if(playlistTitle.length > 50){ - playlistTitleAlert.innerText = "Judul playlist tidak bisa lebih dari 50 karakter"; - playlistTitleAlert.className = "alert-show"; - playlistTitleValid = false; - }else{ - playlistTitleAlert.innerText = ""; - playlistTitleAlert.className = "alert-hide"; - playlistTitleValid = true; - } - }) - - - addPlaylistForm.addEventListener("submit", (e) => { - e.preventDefault(); - console.log("testing"); - - if(playlistTitleValid){ - - const playlistTitle = playlistTitleInput.value; - - const data = new FormData(); - data.append("playlistTitle", playlistTitle); - - const xhr = new XMLHttpRequest(); - - xhr.open("POST", "/public/library", true); - - xhr.onload = function () { - if (xhr.readyState === XMLHttpRequest.DONE) { - if (xhr.status === 201) { - toggle(); - location.reload(); - }else{ //status code 200 - toggle(); - alert("Ada yang aneh"); - } - } - } - xhr.send(data); - - } - }) - - if(deletePlaylistEl.length !== 0){ - deletePlaylistEl.forEach(function(trash){ - trash.addEventListener("click", (e) => { - e.preventDefault(); - const idPlaylist = trash.dataset.id; - - const xhr = new XMLHttpRequest(); - - xhr.open("DELETE", `/public/library?playlist_id=${idPlaylist}`, true); - - xhr.send(null); - - xhr.onload = function () { - if (xhr.readyState === XMLHttpRequest.DONE) { - if (xhr.status === 201) { - // showSuccessToast("Playlist berhasil dihapus dari library!"); - setTimeout(function(){ - location.reload(); - }, 500); - }else{ //status code 200 - // showErrorToast("Playlist gagal dihapus dari library!"); - console.log("ahai"); - } - } - } - }) - }) - } - - - - }); - diff --git a/src/public/javascript/library/library2.mjs b/src/public/javascript/library/library2.mjs new file mode 100644 index 0000000000000000000000000000000000000000..81d6228a3f12742993552d227b4707e5d8ecb583 --- /dev/null +++ b/src/public/javascript/library/library2.mjs @@ -0,0 +1,218 @@ +"use strict"; + +import { showErrorToast, showSuccessToast } from "../toast.mjs"; + +export function handleLibrary() { + + const blur = document.getElementById("blur"); + const popup = document.getElementById("popup"); + const main = document.querySelector("main"); + const playlistTitleInput = document.getElementById("playlist-title"); + const playlistTitleAlert = document.getElementById("playlist-title-alert"); + const addPlaylistForm = document.getElementById("add-playlist-form"); + const deletePlaylistEl = document.querySelectorAll(".bx-trash"); + const addPlaylistButton = document.querySelector(".new-playlist-btn"); + + function toggle(){ + blur.classList.toggle('active'); + popup.classList.toggle('active'); + } + + let playlistTitleValid = false; + + blur.addEventListener("click", (e) => { + if(blur.classList.contains("active")){ + e.preventDefault(); + toggle(); + } + }); + + addPlaylistButton.addEventListener("click", function(e){ + toggle(); + }) + + playlistTitleInput && playlistTitleInput.addEventListener("keyup", () => { + const playlistTitle = playlistTitleInput.value; + + + if(playlistTitle.length > 50){ + playlistTitleAlert.innerText = "Judul playlist tidak bisa lebih dari 50 karakter"; + playlistTitleAlert.className = "alert-show"; + playlistTitleValid = false; + }else{ + playlistTitleAlert.innerText = ""; + playlistTitleAlert.className = "alert-hide"; + playlistTitleValid = true; + } + }) + + addPlaylistForm.addEventListener("submit", (e) => { + e.preventDefault(); + + if(playlistTitleValid){ + + const playlistTitle = playlistTitleInput.value; + + const data = new FormData(); + data.append("playlistTitle", playlistTitle); + + const xhr = new XMLHttpRequest(); + + xhr.open("POST", "/public/library", true); + + xhr.onload = function () { + if (xhr.readyState === XMLHttpRequest.DONE) { + if (xhr.status === 201) { + toggle(); + showSuccessToast("Playlist berhasil dibuat!"); + setTimeout(function(){ + location.reload(); + }, 500); + }else{ //status code 200 + toggle(); + showErrorToast("Terjadi kesalahan! Playlist gagal dibuat"); + } + } + } + xhr.send(data); + + } + }) + + if(deletePlaylistEl.length !== 0){ + deletePlaylistEl.forEach(function(trash){ + trash.addEventListener("click", (e) => { + e.preventDefault(); + const idPlaylist = trash.dataset.id; + + const xhr = new XMLHttpRequest(); + + xhr.open("DELETE", `/public/library?playlist_id=${idPlaylist}`, true); + + xhr.send(null); + + xhr.onload = function () { + if (xhr.readyState === XMLHttpRequest.DONE) { + if (xhr.status === 201) { + showSuccessToast("Playlist berhasil dihapus dari library!"); + setTimeout(function(){ + location.reload(); + }, 500); + }else{ //status code 200 + showErrorToast("Playlist gagal dihapus dari library!"); + console.log("ahai"); + } + } + } + }) + }) + } + +} + +// function toggle(){ +// const blur = document.getElementById("blur"); +// const popup = document.getElementById("popup"); +// blur.classList.toggle('active'); +// popup.classList.toggle('active'); +// } + +// document.addEventListener("DOMContentLoaded", function () { + +// const blurEl = document.getElementById("blur"); +// const main = document.querySelector("main"); +// const playlistTitleInput = document.getElementById("playlist-title"); +// const playlistTitleAlert = document.getElementById("playlist-title-alert"); +// const addPlaylistForm = document.getElementById("add-playlist-form"); +// const deletePlaylistEl = document.querySelectorAll(".bx-trash"); + +// let playlistTitleValid = false; + +// main.addEventListener("click", (e) => { + +// if(blurEl.classList.contains("active")){ +// e.preventDefault(); +// toggle(); +// } +// }); + +// playlistTitleInput && playlistTitleInput.addEventListener("keyup", () => { +// const playlistTitle = playlistTitleInput.value; + + +// if(playlistTitle.length > 50){ +// playlistTitleAlert.innerText = "Judul playlist tidak bisa lebih dari 50 karakter"; +// playlistTitleAlert.className = "alert-show"; +// playlistTitleValid = false; +// }else{ +// playlistTitleAlert.innerText = ""; +// playlistTitleAlert.className = "alert-hide"; +// playlistTitleValid = true; +// } +// }) + + +// addPlaylistForm.addEventListener("submit", (e) => { +// e.preventDefault(); +// console.log("testing"); + +// if(playlistTitleValid){ + +// const playlistTitle = playlistTitleInput.value; + +// const data = new FormData(); +// data.append("playlistTitle", playlistTitle); + +// const xhr = new XMLHttpRequest(); + +// xhr.open("POST", "/public/library", true); + +// xhr.onload = function () { +// if (xhr.readyState === XMLHttpRequest.DONE) { +// if (xhr.status === 201) { +// toggle(); +// location.reload(); +// }else{ //status code 200 +// toggle(); +// alert("Ada yang aneh"); +// } +// } +// } +// xhr.send(data); + +// } +// }) + +// if(deletePlaylistEl.length !== 0){ +// deletePlaylistEl.forEach(function(trash){ +// trash.addEventListener("click", (e) => { +// e.preventDefault(); +// const idPlaylist = trash.dataset.id; + +// const xhr = new XMLHttpRequest(); + +// xhr.open("DELETE", `/public/library?playlist_id=${idPlaylist}`, true); + +// xhr.send(null); + +// xhr.onload = function () { +// if (xhr.readyState === XMLHttpRequest.DONE) { +// if (xhr.status === 201) { +// // showSuccessToast("Playlist berhasil dihapus dari library!"); +// setTimeout(function(){ +// location.reload(); +// }, 500); +// }else{ //status code 200 +// // showErrorToast("Playlist gagal dihapus dari library!"); +// console.log("ahai"); +// } +// } +// } +// }) +// }) +// } + + + +// }); + diff --git a/src/public/styles/library/library.css b/src/public/styles/library/library.css index ef37d80b8dd43b0978a40c768f47cceeb339d121..29dd4b9d60c3ef481d5a014a4f20603bf7bb312d 100644 --- a/src/public/styles/library/library.css +++ b/src/public/styles/library/library.css @@ -138,11 +138,11 @@ navbar { .bx-trash{ display: flex; align-self: center; - color: red; + color: var(--GRAY-500); font-size: 20px; - margin-top: -15px; + margin-top: -10px; cursor: pointer; - border: 0.5px solid red; + border: 0.5px solid var(--GRAY-500); padding: 2px; border-radius: 5px; } @@ -188,7 +188,7 @@ navbar { } #blur.active{ - filter: blur(20px); + filter: blur(5px); pointer-events: none; user-select: none; } \ No newline at end of file