diff --git a/src/app/components/app/app_page.php b/src/app/components/app/app_page.php index ebb38f8ecaf79087701cc9846a3e190c6859d082..8584782b1f4b399db8cc38906018dfe2123d1f23 100644 --- a/src/app/components/app/app_page.php +++ b/src/app/components/app/app_page.php @@ -1,18 +1,19 @@ <!DOCTYPE html> <html lang="en"> + <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Global CSS --> <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/globals.css"> - <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/search/search.css"> + <!-- Page CSS --> <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/home/Home.css"> + <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/search/search.css"> <!-- JavaScript Library --> <script type="text/javascript" src="<?= BASE_URL ?>/javascript/player.js" defer></script> - <script type="text/javascript" src="<?= BASE_URL ?>/javascript/dashboard/layout.js" defer></script> + <script type="module" src="<?= BASE_URL ?>/javascript/dashboard/layout.js" defer></script> <script type="text/javascript" src="<?= BASE_URL ?>/javascript/util/debounce.js" defer></script> - <script type="text/javascript" src="<?= BASE_URL ?>/javascript/search/search.js" defer></script> <script type="text/javascript" src="<?= BASE_URL ?>/javascript/app/app.js" defer></script> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com"> @@ -21,12 +22,16 @@ <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <title>Spotify</title> </head> + <body> - <?php include(dirname(__DIR__) . "/common/sidebar.php")?> - <?php include(dirname(__DIR__) . "/common/profile.php")?> + <?php include(dirname(__DIR__) . "/common/toast.php") ?> + + <?php include(dirname(__DIR__) . "/common/sidebar.php") ?> + <?php include(dirname(__DIR__) . "/common/profile.php") ?> <main id="main-section"> <!-- Called by app.js --> </main> - <?php include(dirname(__DIR__) . "/common/player.php")?> + <?php include(dirname(__DIR__) . "/common/player.php") ?> </body> + </html> \ No newline at end of file diff --git a/src/app/components/common/player.php b/src/app/components/common/player.php index 01085911bc924a2741351954de750735710a77f9..7fcb9cc9bfc1437e88465bddd3bb3aa6eec1dd29 100644 --- a/src/app/components/common/player.php +++ b/src/app/components/common/player.php @@ -1,58 +1,46 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <script type="text/javascript" src="<?= BASE_URL ?>/javascript/player.js" defer></script> - <title>Audio Player</title> -</head> -<body> - <div class="player"> - <?php if (isset($this->data["title"])) :?> - <div class="podcast-details"> - <img class="thumbnail" src="<?= STORAGE_URL . $this->data["url_thumbnail"] ?>" alt="image" width="110" height="110"> - <div class="podcast-info"> - <div class="b3"><?= $this->data["title"] ?></div> - <div class="b4"><?= $this->data["podcast"] ?></div> - </div> +<div class="player"> + <?php if (isset($this->data["title"])) : ?> + <div class="podcast-details"> + <img class="thumbnail" src="<?= STORAGE_URL . $this->data["url_thumbnail"] ?>" alt="image" width="110" height="110"> + <div class="podcast-info"> + <div class="b3"><?= $this->data["title"] ?></div> + <div class="b4"><?= $this->data["podcast"] ?></div> </div> - <div class="audio-player"> - <div class="audio-controller"> - <div class="prevButton"> - <img src="<?= BASE_URL ?>/images/assets/prev_icon.svg" alt="prev"> - </div> - <div class="button-player"> - <div class="play-button"> - <img src="<?= BASE_URL ?>/images/assets/play_icon.svg" alt="pause"> - </div> - <div class="pause-button"> - <img src="<?= BASE_URL ?>/images/assets/pause_icon.svg" alt="pause"> - </div> + </div> + <div class="audio-player"> + <div class="audio-controller"> + <div class="prevButton"> + <img src="<?= BASE_URL ?>/images/assets/prev_icon.svg" alt="prev"> + </div> + <div class="button-player"> + <div class="play-button"> + <img src="<?= BASE_URL ?>/images/assets/play_icon.svg" alt="pause"> </div> - <div class="nextButton"> - <img src="<?= BASE_URL ?>/images/assets/next_icon.svg" alt="next"> + <div class="pause-button"> + <img src="<?= BASE_URL ?>/images/assets/pause_icon.svg" alt="pause"> </div> </div> - <div class="progress-control"> - <div class="current-time">00.00</div> - <input type="range" name="progress-bar" class="progress-bar" step="0.01" value="0"> - <div class="duration">00:00</div> + <div class="nextButton"> + <img src="<?= BASE_URL ?>/images/assets/next_icon.svg" alt="next"> </div> </div> - <div class="volume-control"> - <div></div> - </div> - <div class="hide-player"> - <audio controls class="audio-player"> - <source src="<?= STORAGE_URL . $this->data["url_audio"]?>" type="audio/mpeg"> - </audio> - </div> - <? else : ?> - <div class="sh3 caption"> - play your favorite podcast! + <div class="progress-control"> + <div class="current-time">00.00</div> + <input type="range" name="progress-bar" class="progress-bar" step="0.01" value="0"> + <div class="duration">00:00</div> </div> - <? endif;?> - </div> - -</body> -</html> \ No newline at end of file + </div> + <div class="volume-control"> + <div></div> + </div> + <div class="hide-player"> + <audio controls class="audio-player"> + <source src="<?= STORAGE_URL . $this->data["url_audio"] ?>" type="audio/mpeg"> + </audio> + </div> + <? else : ?> + <div class="sh3 caption"> + play your favorite podcast! + </div> + <? endif; ?> +</div> \ No newline at end of file diff --git a/src/app/components/common/profile.php b/src/app/components/common/profile.php index 1639fb1c5e61a28609facfc8460adee6a3be6b18..f6416c0e9ae9a32ba58097f21bd5a4b89a6c2ba9 100644 --- a/src/app/components/common/profile.php +++ b/src/app/components/common/profile.php @@ -1,20 +1,11 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="UTF-8"> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <!-- script --> - <script type="text/javascript" src="<?= BASE_URL ?>/javascript/profile/profile.js" defer></script> - <title>Profile</title> -</head> -<body> +<section> <?php if (!isset($this->data["username"])) : ?> <div class="profile-section login-button"> <h5><a href="<?= BASE_URL ?>/login">LOGIN</a></h5> </div> - <?php else:?> - <div class="profile-section profile" > - <img class="profpic" src="<?= STORAGE_URL . $this->data["url_profpic"] ?>" alt="image" width="110" height="110"> + <?php else : ?> + <div class="profile-section profile"> + <img class="profpic" src="<?= STORAGE_URL . $this->data["url_profpic"] ?>" alt="image" width="110" height="110"> <div class="sh5"><?= substr($this->data["name"], 0, 10) ?></div> </div> <div class="profile-menu"> @@ -24,7 +15,7 @@ <div class="edit-profile-back"> <div class="edit-profile-container"> <div class="profile-detail"> - <img class="profpic-edit" src="<?= STORAGE_URL . $this->data["url_profpic"] ?>" alt="image"> + <img class="profpic-edit" src="<?= STORAGE_URL . $this->data["url_profpic"] ?>" alt="image"> <div class="edit-info"> <div class="sh5">Nama</div> <input type="text"> @@ -37,20 +28,20 @@ <button class="sh4">Submit</button> </div> </div> -<?php endif;?> -</body> - <script> - const logoutBtn = document.getElementById("logout"); - logoutBtn.addEventListener("click", (e) => { - e.preventDefault(); - const xhr = new XMLHttpRequest(); - xhr.open("POST", "/public/logout"); - xhr.send() - xhr.onreadystatechange = function() { - if (this.readyState === 4 && this.status === 200) { - window.location.replace("/public/login") - } - } - }) - </script> -</html> \ No newline at end of file + <?php endif; ?> +</section> +<script type="text/javascript" src="<?= BASE_URL ?>/javascript/profile/profile.js" defer></script> +<script> + const logoutBtn = document.getElementById("logout"); + logoutBtn.addEventListener("click", (e) => { + e.preventDefault(); + const xhr = new XMLHttpRequest(); + xhr.open("POST", "/public/logout"); + xhr.send() + xhr.onreadystatechange = function() { + if (this.readyState === 4 && this.status === 200) { + window.location.replace("/public/login") + } + } + }) +</script> \ No newline at end of file diff --git a/src/app/components/home/home_page.php b/src/app/components/home/home_page.php index 2ae5877b96be04fefe9bdb25181be5050ac0c11d..4b7afcd6090337705d1c0ae2a7eb49d827af9a18 100644 --- a/src/app/components/home/home_page.php +++ b/src/app/components/home/home_page.php @@ -1,9 +1,9 @@ <section> <div class="comedy-content"> <h4>COMEDY</h4> - <div class="podcast-list"> + <div class="home-podcast-list"> <?php if (isset($this->data["tech_podcasts"])) : ?> - <div class="podcast-list"> + <div class="home-podcast-list"> <?php foreach ($this->data["tech_podcasts"] as $podcast) : ?> <div class="podcast"> <img class="thumbnail" src="<?= STORAGE_URL . $podcast->url_thumbnail ?>" alt="image"> diff --git a/src/app/components/search/search_page.php b/src/app/components/search/search_page.php index a3a3a5feab73908a161429df11357ca3461e9285..9dafe1d7fe6ce1644e8f78db3538e7b7864dc048 100644 --- a/src/app/components/search/search_page.php +++ b/src/app/components/search/search_page.php @@ -1,7 +1,7 @@ <navbar> <!-- SEARCH BAR --> <div class="search-bar"> - <img src="<?= BASE_URL ?>/images/assets/search_icon.svg" alt="home" width="24px" height="24px"> + <img src="<?= BASE_URL ?>/images/assets/search_icon.svg" alt="home" width="24px" height="24px"> <input id="search-input" type="text"> </div> @@ -32,15 +32,15 @@ <img src="<?= BASE_URL ?>/images/assets/arrow_down.svg" alt="home" width="12px" height="12px"> </button> <div class="dropdown-content eps-content"> - <div class="item eps-option" >All episodes</div> - <div class="item eps-option" >Less than 20 episodes</div> - <div class="item eps-option" >20-50 episodes</div> - <div class="item eps-option" >50-100 episodes</div> - <div class="item eps-option" >More than 100 episodes</div> + <div class="item eps-option">All episodes</div> + <div class="item eps-option">Less than 20 episodes</div> + <div class="item eps-option">20-50 episodes</div> + <div class="item eps-option">50-100 episodes</div> + <div class="item eps-option">More than 100 episodes</div> </div> </div> </div> - + <!-- SORTING --> <div class="dropdown date" id="sort"> <button class="dropbtn sort-button"> @@ -56,5 +56,6 @@ </div> </navbar> <div class="result-container"> - <?php include(dirname(__DIR__) . "/search/result.php")?> + <?php include(dirname(__DIR__) . "/search/result.php") ?> </div> +<script type="text/javascript" src="<?= BASE_URL ?>/javascript/search/search.js" defer></script> \ No newline at end of file diff --git a/src/app/controllers/app/app_controller.php b/src/app/controllers/app/app_controller.php index 03b558a60e1ef71beff3b15efb5bbda7926f1d81..5c8d734c32d1b6d8a47921335bfa6d68faed11e2 100644 --- a/src/app/controllers/app/app_controller.php +++ b/src/app/controllers/app/app_controller.php @@ -2,68 +2,69 @@ class AppController { - public function call() - { - // Session validation - session_start(); + public function call() + { + // Session validation + session_start(); - if (isset($_SESSION["is_premium"]) && $_SESSION["is_premium"]) { - http_response_code(403); - header("Location: http://localhost:5173"); - return; - } - - if (!isset($_SESSION["user_id"])) { - http_response_code(403); - header("Location: " . BASE_URL . "/login"); - return; - } + if (isset($_SESSION["is_premium"]) && $_SESSION["is_premium"]) { + http_response_code(403); + header("Location: http://localhost:5173"); + return; + } + + if (!isset($_SESSION["user_id"])) { + session_destroy(); + http_response_code(403); + header("Location: " . BASE_URL . "/login"); + return; + } - if ($_SESSION["expire"] < time()) { - session_destroy(); - http_response_code(403); - header('Location: ' . BASE_URL . "/login"); - return; - } + if ($_SESSION["expire"] < time()) { + session_destroy(); + http_response_code(403); + header('Location: ' . BASE_URL . "/login"); + return; + } - // Get id_episode from session - $epsId = ""; - if (isset($_SESSION["eps_id"])) { - $epsId = $_SESSION["eps_id"]; - } + // Get id_episode from session + $epsId = ""; + if (isset($_SESSION["eps_id"])) { + $epsId = $_SESSION["eps_id"]; + } - // Get id_user from session - $userId = ""; - if (isset($_SESSION["user_id"])) { - $userId = $_SESSION["user_id"]; - } + // Get id_user from session + $userId = ""; + if (isset($_SESSION["user_id"])) { + $userId = $_SESSION["user_id"]; + } - $data = []; - - // Data Player - $podcastModel = new PodcastModel(); - $podcastInfo = $podcastModel->getPodcastInfo($epsId); - if ($podcastInfo){ - $data["title"] = $podcastInfo->title; - $data["url_thumbnail"] = $podcastInfo->url_thumbnail; - $data["podcast"] = $podcastInfo->name; - $data["url_audio"] = $podcastInfo->url_audio; - } + $data = []; - // Data Profile - $userModel = new UserModel(); - $userInfo = $userModel->getUserInfo($userId); - if ($userInfo) { - $data["name"] = $userInfo->name; - $data["username"] = $userInfo->username; - $data["url_profpic"] = $userInfo->url_profpic ?? "/images/default-profpic.jpeg"; - $data["is_admin"] = $userInfo->is_admin; - } + // Data Player + $podcastModel = new PodcastModel(); + $podcastInfo = $podcastModel->getPodcastInfo($epsId); + if ($podcastInfo) { + $data["title"] = $podcastInfo->title; + $data["url_thumbnail"] = $podcastInfo->url_thumbnail; + $data["podcast"] = $podcastInfo->name; + $data["url_audio"] = $podcastInfo->url_audio; + } - // App View - require_once __DIR__ . "/../../views/app/app_view.php"; - $appView = new AppView($data); - $appView->render(); + // Data Profile + $userModel = new UserModel(); + $userInfo = $userModel->getUserInfo($userId); + if ($userInfo) { + $data["name"] = $userInfo->name; + $data["username"] = $userInfo->username; + $data["url_profpic"] = $userInfo->url_profpic ?? "/images/default-profpic.jpeg"; + $data["is_admin"] = $userInfo->is_admin; } -} \ No newline at end of file + + // App View + require_once __DIR__ . "/../../views/app/app_view.php"; + $appView = new AppView($data); + $appView->render(); + } +} diff --git a/src/app/controllers/login/get_login.php b/src/app/controllers/login/get_login.php index 7d60ec202c37317ec5533bf1ae844afb459bc603..69fcc89eb46eb790e746c900c897ba093b19c70e 100644 --- a/src/app/controllers/login/get_login.php +++ b/src/app/controllers/login/get_login.php @@ -9,9 +9,10 @@ class GetLoginController session_start(); if (isset($_SESSION['user_id']) && $_SESSION["expire"] >= time()) { - header("Location: " . BASE_URL . "/home?user_id=" . $_SESSION["user_id"]); } else { + session_destroy(); + $data = []; $view = new LoginView($data); $view->render(); diff --git a/src/app/controllers/login/post_login.php b/src/app/controllers/login/post_login.php index 6af4226a2cf70eec82d7d6617675c92497505a0f..7a54b65eddcf81c3429f032464d329746adb8b5c 100644 --- a/src/app/controllers/login/post_login.php +++ b/src/app/controllers/login/post_login.php @@ -23,7 +23,8 @@ class PostLoginController } else { if (password_verify($password, $user['password'])) { $_SESSION["start"] = time(); - $_SESSION["expire"] = time() + 60; + $_SESSION["expire"] = time() + 60 * 5; + $_SESSION["user_id"] = $user['id_user']; if ($username == "premium") { $ch = curl_init(); @@ -35,7 +36,7 @@ class PostLoginController curl_setopt( $ch, CURLOPT_POSTFIELDS, - http_build_query(array('username' => $_POST["username"])) + http_build_query(array('idUser' => $user["id_user"])) ); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); @@ -47,14 +48,13 @@ class PostLoginController $jwtToken = json_decode($output, TRUE)["token"]; $_SESSION["is_premium"] = true; - + http_response_code(201); header('Content-type: application/json'); echo json_encode(["redirect_url" => "http://localhost:5173/?token=" . $jwtToken]); exit; } - $_SESSION["user_id"] = $user['id_user']; $_SESSION["eps_id"] = ""; $_SESSION["role_id"] = $user['is_admin']; $_SESSION["is_premium"] = false; diff --git a/src/public/javascript/app/app.js b/src/public/javascript/app/app.js index 67c843ee10af3dcd38dbb506df9b6c893f7fa418..8ac2668abdee1d7d5925f8426aab3ff28ccb64a7 100644 --- a/src/public/javascript/app/app.js +++ b/src/public/javascript/app/app.js @@ -15,8 +15,8 @@ getPage = (page) => { xhr.onreadystatechange = () => { if(xhr.readyState == 4 && xhr.status == 200) { mainSection.innerHTML = xhr.responseText; - handleSearch(); - handleDashboard(); + // handleSearch(); + // handleDashboard(); } } diff --git a/src/public/javascript/profile/profile.js b/src/public/javascript/profile/profile.js index 7bb60726c0194c2a1bf80e24badc17f20cbe5b76..9ff5d5761ba20e1a791353291686f235e6958915 100644 --- a/src/public/javascript/profile/profile.js +++ b/src/public/javascript/profile/profile.js @@ -1,31 +1,29 @@ -const profile = document.querySelector('.profile'); -const profileMenu = document.querySelector('.profile-menu'); +const profile = document.querySelector(".profile"); +const profileMenu = document.querySelector(".profile-menu"); +console.log("masuk"); +profile && + profile.addEventListener("click", (e) => { + profileMenu.style.display = "flex"; + }); -console.log("masokkdf"); -profile && - profile.addEventListener('click', (e) => { - profileMenu.style.display = 'flex'; +window.addEventListener("click", function (e) { + if (!profileMenu.contains(e.target) && !profile.contains(e.target)) { + profileMenu.style.display = "none"; + } }); - -window.addEventListener('click', function(e){ - if (!profileMenu.contains(e.target) && !profile.contains(e.target)){ - profileMenu.style.display = 'none'; - } -}); - -const editProfile = document.querySelector('.edit-profile-back'); -const menuProfile = document.getElementById('menu-profile'); -const editSection = document.querySelector('.edit-profile-container'); +const editProfile = document.querySelector(".edit-profile-back"); +const menuProfile = document.getElementById("menu-profile"); +const editSection = document.querySelector(".edit-profile-container"); menuProfile && - menuProfile.addEventListener('click', (e) => { - console.log("keklik cok"); - editProfile.style.display = 'flex'; -}); + menuProfile.addEventListener("click", (e) => { + console.log("keklik cok"); + editProfile.style.display = "flex"; + }); -window.addEventListener('click', function(e){ - if (!editSection.contains(e.target) && !menuProfile.contains(e.target)){ - editProfile.style.display = 'none'; - } -}); \ No newline at end of file +window.addEventListener("click", function (e) { + if (!editSection.contains(e.target) && !menuProfile.contains(e.target)) { + editProfile.style.display = "none"; + } +}); diff --git a/src/public/javascript/search/search.js b/src/public/javascript/search/search.js index a4859bf6688b11d89716bef56aff4568185848ed..f7d852b6b7aa695985708c1a69ab276459a52cba 100644 --- a/src/public/javascript/search/search.js +++ b/src/public/javascript/search/search.js @@ -1,165 +1,174 @@ -const handleSearch = () => { - - const searchInput = document.getElementById('search-input'); - const resultContainer = document.querySelector('.result-container'); - - const genreDisplay = document.querySelector('.genre-display'); - const genreOptions = document.querySelectorAll('.genre-option'); - const genreButton = document.querySelector('.genre-button'); - const genreContent = document.querySelector('.genre-content'); - - const epsDisplay = document.querySelector('.eps-display'); - const epsOptions = document.querySelectorAll('.eps-option'); - const epsButton = document.querySelector('.eps-button'); - const epsContent = document.querySelector('.eps-content'); - - const sortDisplay = document.querySelector('.sort-display'); - const sortOptions = document.querySelectorAll('.sort-option'); - const sortButton = document.querySelector('.sort-button'); - const sortContent = document.querySelector('.sort-content'); - - - const defaultGenre = ""; - const defaultEps = ""; - const defaultSort = ""; - const defaultIsAsc = "true"; - - var keyword = ""; - var genre = defaultGenre; - var sort = defaultSort; - var eps = defaultEps; - var isAsc = defaultIsAsc; - - searchInput && - searchInput.addEventListener( - "keyup", - debounce(()=> { - keyword = searchInput.value; - const ajax = new XMLHttpRequest(); - - ajax.onreadystatechange = () => { - if(ajax.readyState == 4 && ajax.status == 200) { - resultContainer.innerHTML = ajax.responseText; - console.log("ajax amsterdam"); - } - } - - ajax.open('GET', - `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true); - ajax.send(); - - }, DEBOUNCE_TIMEOUT) - ); - - // FILTER BY GENRE - genreButton.addEventListener('click', function() { - genreContent.style.display = "block"; - }) - - genreOptions.forEach(option => { - option.addEventListener('click', function() { - // Get the selected genre value - const selectedGenre = option.innerHTML; - - // Update the button text with the selected genre - genreDisplay.textContent = selectedGenre; - if (selectedGenre === "All genre") { - genre = ""; - } else { - genre = selectedGenre; - } - const ajax = new XMLHttpRequest(); - - ajax.onreadystatechange = () => { - if(ajax.readyState == 4 && ajax.status == 200) { - resultContainer.innerHTML = ajax.responseText; - } - } - - ajax.open('GET', - `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true); - ajax.send(); - - genreContent.style.display = "none"; - }); +// const handleSearch = () => { + const searchInput = document.getElementById("search-input"); + const resultContainer = document.querySelector(".result-container"); + + const genreDisplay = document.querySelector(".genre-display"); + const genreOptions = document.querySelectorAll(".genre-option"); + const genreButton = document.querySelector(".genre-button"); + const genreContent = document.querySelector(".genre-content"); + + const epsDisplay = document.querySelector(".eps-display"); + const epsOptions = document.querySelectorAll(".eps-option"); + const epsButton = document.querySelector(".eps-button"); + const epsContent = document.querySelector(".eps-content"); + + const sortDisplay = document.querySelector(".sort-display"); + const sortOptions = document.querySelectorAll(".sort-option"); + const sortButton = document.querySelector(".sort-button"); + const sortContent = document.querySelector(".sort-content"); + + const defaultGenre = ""; + const defaultEps = ""; + const defaultSort = ""; + const defaultIsAsc = "true"; + + var keyword = ""; + var genre = defaultGenre; + var sort = defaultSort; + var eps = defaultEps; + var isAsc = defaultIsAsc; + + searchInput && + searchInput.addEventListener( + "keyup", + debounce(() => { + keyword = searchInput.value; + const ajax = new XMLHttpRequest(); + + ajax.onreadystatechange = () => { + if (ajax.readyState == 4 && ajax.status == 200) { + resultContainer.innerHTML = ajax.responseText; + console.log("ajax amsterdam"); + } + }; + + ajax.open( + "GET", + `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, + true + ); + ajax.send(); + }, DEBOUNCE_TIMEOUT) + ); + + // FILTER BY GENRE + genreButton && + genreButton.addEventListener("click", function () { + genreContent.style.display = "block"; }); + genreOptions.forEach((option) => { + option.addEventListener("click", function () { + // Get the selected genre value + const selectedGenre = option.innerHTML; + + // Update the button text with the selected genre + genreDisplay.textContent = selectedGenre; + if (selectedGenre === "All genre") { + genre = ""; + } else { + genre = selectedGenre; + } + const ajax = new XMLHttpRequest(); + + ajax.onreadystatechange = () => { + if (ajax.readyState == 4 && ajax.status == 200) { + resultContainer.innerHTML = ajax.responseText; + } + }; + ajax.open( + "GET", + `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, + true + ); + ajax.send(); - // FILTER BY EPS - epsOptions.forEach(option => { - option.addEventListener('click', function() { - // Get the selected eps value - const selectedEps = option.innerHTML; - - // Update the button text with the selected eps - epsDisplay.textContent = selectedEps; - - if (selectedEps === "All eps") { - eps = ""; - } else { - eps = selectedEps; - } - const ajax = new XMLHttpRequest(); - - ajax.onreadystatechange = () => { - if(ajax.readyState == 4 && ajax.status == 200) { - resultContainer.innerHTML = ajax.responseText; - } - } - - ajax.open('GET', - `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true); - ajax.send(); - - epsContent.style.display = "none"; - }); + genreContent.style.display = "none"; }); + }); + + // FILTER BY EPS + epsOptions.forEach((option) => { + option.addEventListener("click", function () { + // Get the selected eps value + const selectedEps = option.innerHTML; + + // Update the button text with the selected eps + epsDisplay.textContent = selectedEps; + + if (selectedEps === "All eps") { + eps = ""; + } else { + eps = selectedEps; + } + const ajax = new XMLHttpRequest(); + + ajax.onreadystatechange = () => { + if (ajax.readyState == 4 && ajax.status == 200) { + resultContainer.innerHTML = ajax.responseText; + } + }; - epsButton.addEventListener('click', function() { - epsContent.style.display = "block"; - }) - - // FILTER BY EPS - sortOptions.forEach(option => { - option.addEventListener('click', function() { - // Get the selected sort value - const selectedSort = option.innerHTML; - - // Update the button text with the selected sort - sortDisplay.textContent = selectedSort; - - - sort = selectedSort; - const ajax = new XMLHttpRequest(); - - ajax.onreadystatechange = () => { - if(ajax.readyState == 4 && ajax.status == 200) { - resultContainer.innerHTML = ajax.responseText; - } - } - - ajax.open('GET', - `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true); - ajax.send(); - - sortContent.style.display = "none"; - }); + ajax.open( + "GET", + `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, + true + ); + ajax.send(); + + epsContent.style.display = "none"; }); + }); - sortButton.addEventListener('click', function() { - sortContent.style.display = "block"; - }) + epsButton && + epsButton.addEventListener("click", function () { + epsContent.style.display = "block"; + }); - window.addEventListener('click', function(e) { - if (!genreButton.contains(e.target)){ - genreContent.style.display = "none"; - } - if (!epsButton.contains(e.target)){ - epsContent.style.display = "none"; - } - if (!sortButton.contains(e.target)){ - sortContent.style.display = "none"; + // FILTER BY EPS + sortOptions.forEach((option) => { + option.addEventListener("click", function () { + // Get the selected sort value + const selectedSort = option.innerHTML; + + // Update the button text with the selected sort + sortDisplay.textContent = selectedSort; + + sort = selectedSort; + const ajax = new XMLHttpRequest(); + + ajax.onreadystatechange = () => { + if (ajax.readyState == 4 && ajax.status == 200) { + resultContainer.innerHTML = ajax.responseText; } + }; + + ajax.open( + "GET", + `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, + true + ); + ajax.send(); + + sortContent.style.display = "none"; }); -} \ No newline at end of file + }); + + sortButton && + sortButton.addEventListener("click", function () { + sortContent.style.display = "block"; + }); + + window.addEventListener("click", function (e) { + if (!genreButton.contains(e.target)) { + genreContent.style.display = "none"; + } + if (!epsButton.contains(e.target)) { + epsContent.style.display = "none"; + } + if (!sortButton.contains(e.target)) { + sortContent.style.display = "none"; + } + }); +// }; diff --git a/src/public/styles/home/Home.css b/src/public/styles/home/Home.css index 5fdd9122f2b95b2d781af0e6b9b093dbddecf466..b8adaf9718f4476d2a687c2bec6e3d0eb8850f49 100644 --- a/src/public/styles/home/Home.css +++ b/src/public/styles/home/Home.css @@ -4,7 +4,7 @@ padding: 100px 100px; } -.podcast-list { +.home-podcast-list { display: flex; flex-direction: row; flex-wrap: wrap;