Skip to content
Snippets Groups Projects
Commit c2b55915 authored by Rava Maulana's avatar Rava Maulana
Browse files

feat: updated login and logout

parent eca51107
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 334 additions and 340 deletions
src/app/components/app/app_page.php
+ 11
− 6
View file @ c2b55915
<!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
src/app/components/common/player.php
+ 39
− 51
View file @ c2b55915
<!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
src/app/components/common/profile.php
+ 22
− 31
View file @ c2b55915
<!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
src/app/components/home/home_page.php
+ 2
− 2
View file @ c2b55915
<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">
......
src/app/components/search/search_page.php
+ 9
− 8
View file @ c2b55915
<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
src/app/controllers/app/app_controller.php
+ 57
− 56
View file @ c2b55915
......@@ -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();
}
}
src/app/controllers/login/get_login.php
+ 2
− 1
View file @ c2b55915
......@@ -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();
......
src/app/controllers/login/post_login.php
+ 3
− 3
View file @ c2b55915
......@@ -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();
......@@ -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;
......
src/public/javascript/app/app.js
+ 2
− 2
View file @ c2b55915
......@@ -15,8 +15,8 @@ getPage = (page) => {
xhr.onreadystatechange = () => {
if(xhr.readyState == 4 && xhr.status == 200) {
mainSection.innerHTML = xhr.responseText;
handleSearch();
handleDashboard();
// handleSearch();
// handleDashboard();
}
}
......
src/public/javascript/profile/profile.js
+ 23
− 25
View file @ c2b55915
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";
}
});
src/public/javascript/search/search.js
+ 163
− 154
View file @ c2b55915
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";
}
});
// };
src/public/styles/home/Home.css
+ 1
− 1
View file @ c2b55915
......@@ -4,7 +4,7 @@
padding: 100px 100px;
}
.podcast-list {
.home-podcast-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment