diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000000000000000000000000000000000000..13566b81b018ad684f3a35fee301741b2734c8f4
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000000000000000000000000000000000000..f25caf3a5fc1d37ced68af62586a59fd16c19088
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="ProjectModuleManager">
+ <modules>
+ <module fileurl="file://$PROJECT_DIR$/.idea/tugas-besar-1.iml" filepath="$PROJECT_DIR$/.idea/tugas-besar-1.iml" />
+ </modules>
+ </component>
+</project>
\ No newline at end of file
diff --git a/.idea/php.xml b/.idea/php.xml
new file mode 100644
index 0000000000000000000000000000000000000000..8e445c25a80737997e0eef9176899c8fc0f7a132
--- /dev/null
+++ b/.idea/php.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="MessDetectorOptionsConfiguration">
+ <option name="transferred" value="true" />
+ </component>
+ <component name="PHPCSFixerOptionsConfiguration">
+ <option name="transferred" value="true" />
+ </component>
+ <component name="PHPCodeSnifferOptionsConfiguration">
+ <option name="highlightLevel" value="WARNING" />
+ <option name="transferred" value="true" />
+ </component>
+ <component name="PhpProjectSharedConfiguration" php_language_level="7.0">
+ <option name="suggestChangeDefaultLanguageLevel" value="false" />
+ </component>
+ <component name="PhpStanOptionsConfiguration">
+ <option name="transferred" value="true" />
+ </component>
+ <component name="PsalmOptionsConfiguration">
+ <option name="transferred" value="true" />
+ </component>
+</project>
\ No newline at end of file
diff --git a/.idea/tugas-besar-1.iml b/.idea/tugas-besar-1.iml
new file mode 100644
index 0000000000000000000000000000000000000000..c956989b29ad0767edc6cf3a202545927c3d1e76
--- /dev/null
+++ b/.idea/tugas-besar-1.iml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+ <component name="NewModuleRootManager">
+ <content url="file://$MODULE_DIR$" />
+ <orderEntry type="inheritedJdk" />
+ <orderEntry type="sourceFolder" forTests="false" />
+ </component>
+</module>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000000000000000000000000000000000000..35eb1ddfbbc029bcab630581847471d7f238ec53
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+ <component name="VcsDirectoryMappings">
+ <mapping directory="" vcs="Git" />
+ </component>
+</project>
\ No newline at end of file
diff --git a/src/app/components/app/app_page.php b/src/app/components/app/app_page.php
new file mode 100644
index 0000000000000000000000000000000000000000..b9e26b3dbcca9d3e9b438b3644fb02736d825d5a
--- /dev/null
+++ b/src/app/components/app/app_page.php
@@ -0,0 +1,30 @@
+<!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">
+ <!-- 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="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">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,700;1,9..40,400;1,9..40,700&display=swap" rel="stylesheet">
+ <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")?>
+ <main>
+ <!-- Called by app.js -->
+ </main>
+ <?php include(dirname(__DIR__) . "/common/player.php")?>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/app/components/common/sidebar.php b/src/app/components/common/sidebar.php
index 268ac6e1e61c9118e534c8c41b991ef24cfb3e31..114c2dc8fab2e09bd79c8e3b14dd8a1c851cf8e9 100644
--- a/src/app/components/common/sidebar.php
+++ b/src/app/components/common/sidebar.php
@@ -1,33 +1,26 @@
-<div class="sidebar">
- <div class="sidebar-container">
- <a href="<?= BASE_URL ?>/home">
- <div class="sidebar-item">
- <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/home_icon.svg" alt="home">
- <div class="sh5">Home</div>
- </div>
- </a>
- <a href="<?= BASE_URL ?>/search">
- <div class="sidebar-item">
- <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/search_icon.svg" alt="home">
- <div class="sh5">Search</div>
- </div>
- </a>
- <a href="<?= BASE_URL ?>/library">
- <div class="sidebar-item">
- <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/library_icon.svg" alt="home">
- <div class="sh5">Library</div>
- </div>
- </a>
+<aside>
+ <div class="sidebar-container">
+ <div class="sidebar-item" onclick="getPage('home')">
+ <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/home_icon.svg" alt="home">
+ <div class="sh5">Home</div>
+ </div>
+ <div class="sidebar-item" onclick="getPage('search')">
+ <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/search_icon.svg" alt="search">
+ <div class="sh5">Search</div>
+ </div>
+ <div class="sidebar-item" onclick="getPage('library')">
+ <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/library_icon.svg" alt="library">
+ <div class="sh5">Library</div>
+ </div>
+
<?php if (isset($_SESSION["role_id"] )) :?>
<?php if ($_SESSION["role_id"] == 1) :?>
- <a href="<?= BASE_URL ?>/dashboard">
- <div class="sidebar-item">
- <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/fire_icon.svg" alt="home">
+ <div class="sidebar-item" onclick="getPage('dashboard')">
+ <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/fire_icon.svg" alt="dashboard">
<div class="sh5">Dashboard</div>
</div>
- </a>
<?php endif;?>
<?php endif;?>
</div>
-</div>
\ No newline at end of file
+</aside>
\ No newline at end of file
diff --git a/src/app/components/dashboard/layout.php b/src/app/components/dashboard/layout.php
index e7d0eaddf61857dc77156d58a603dc89636119a5..52c7fb2c9a81fd41b415b247f02471b928448bac 100644
--- a/src/app/components/dashboard/layout.php
+++ b/src/app/components/dashboard/layout.php
@@ -17,7 +17,6 @@
</head>
<body>
- <?php include(dirname(__DIR__) . "/common/sidebar.php") ?>
<?php include(dirname(__DIR__) . "/common/toast.php") ?>
<div id="overlay-layout" class="overlay hidden"></div>
@@ -55,8 +54,6 @@
<section id="dashboard-section"></section>
</main>
-
- <?php include(dirname(__DIR__) . "/common/player.php") ?>
</body>
</html>
\ 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 65be2a3bde47723b410571a9cd97833c15bbfe47..d482164b20887594e1d52b75c0a3c5fb827d4422 100644
--- a/src/app/components/home/home_page.php
+++ b/src/app/components/home/home_page.php
@@ -15,11 +15,9 @@
<title>Homepage</title>
</head>
<body>
- <?php include(dirname(__DIR__) . "/common/sidebar.php")?>
- <?php include(dirname(__DIR__) . "/common/profile.php")?>
<main>
- <div class="main-content">
- <h4>TECHONOLOGY</h4>
+ <div class="comedy-content">
+ <h4>COMEDY</h4>
<div class="podcast-list">
<?php if (isset($this->data["tech_podcasts"])): ?>
<div class="podcast-list">
@@ -41,6 +39,5 @@
</div>
</div>
</main>
- <?php include(dirname(__DIR__) . "/common/player.php")?>
</body>
</html>
\ No newline at end of file
diff --git a/src/app/components/library/library.php b/src/app/components/library/library.php
index 401460ea4aa629a8df64ca1ba0d4399e19930183..db770cb01a7dcef5fc05b3059ac3b0fe11ca0dbc 100644
--- a/src/app/components/library/library.php
+++ b/src/app/components/library/library.php
@@ -10,15 +10,10 @@
<title>Library</title>
</head>
<body>
- <?php include(dirname(__DIR__) . "/common/sidebar.php")?>
- <?php include(dirname(__DIR__) . "/common/profile.php")?>
-
-
<main>
<div class="playlist-container">
<?php include(dirname(__DIR__) . "/library/playlist.php")?>
</div>
</main>
- <?php include(dirname(__DIR__) . "/common/player.php")?>
</body>
</html>
\ No newline at end of file
diff --git a/src/app/components/search/search_page.php b/src/app/components/search/search_page.php
index 54f93665eb66882dd3fe0e0aea26235bc7945657..a3a3a5feab73908a161429df11357ca3461e9285 100644
--- a/src/app/components/search/search_page.php
+++ b/src/app/components/search/search_page.php
@@ -1,86 +1,60 @@
-<!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">
- <!-- Page-specific CSS -->
- <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/search/search.css">
- <!-- JavaScript Library -->
- <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>
+<navbar>
+ <!-- SEARCH BAR -->
+ <div class="search-bar">
+ <img src="<?= BASE_URL ?>/images/assets/search_icon.svg" alt="home" width="24px" height="24px">
+ <input id="search-input" type="text">
+ </div>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,700;1,9..40,400;1,9..40,700&display=swap" rel="stylesheet">
- <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
- <title>Search Page</title>
-</head>
-<body>
- <?php include(dirname(__DIR__) . "/common/sidebar.php")?>
- <?php include(dirname(__DIR__) . "/common/profile.php")?>
- <navbar>
- <!-- SEARCH BAR -->
- <div class="search-bar">
- <img src="<?= BASE_URL ?>/images/assets/search_icon.svg" alt="home" width="24px" height="24px">
- <input id="search-input" type="text">
- </div>
-
- <!-- FILTER -->
- <div class="filter">
- <!-- GENRE FILTER -->
- <div class="dropdown genre">
- <button class="dropbtn genre-button">
- <div class="genre-display">
- All genre
- </div>
- <img src="<?= BASE_URL ?>/images/assets/arrow_down.svg" alt="home" width="12px" height="12px">
- </button>
- <div class="dropdown-content genre-content">
- <div class="item genre-option" data-value="comedy">Comedy</div>
- <div class="item genre-option" data-value="sports">Sports</div>
- <div class="item genre-option" data-value="technology">Technology</div>
- </div>
- </div>
-
- <!-- Number of Episode FILTER -->
- <div class="dropdown eps">
- <button class="dropbtn eps-button">
- <div class="eps-display">
- All episodes
- </div>
- <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" data-value="eps-cat-1">Less than 20 episodes</div>
- <div class="item eps-option" data-value="eps-cat-2">20-50 episodes</div>
- <div class="item eps-option" data-value="eps-cat-3">50-100 episodes</div>
- <div class="item eps-option" data-value="eps-cat-4">More than 100 episodes</div>
+ <!-- FILTER -->
+ <div class="filter">
+ <!-- GENRE FILTER -->
+ <div class="dropdown genre">
+ <button class="dropbtn genre-button">
+ <div class="genre-display">
+ All genre
</div>
+ <img src="<?= BASE_URL ?>/images/assets/arrow_down.svg" alt="home" width="12px" height="12px">
+ </button>
+ <div class="dropdown-content genre-content">
+ <div class="item genre-option" data-value="">All genre</div>
+ <div class="item genre-option" data-value="comedy">Comedy</div>
+ <div class="item genre-option" data-value="sports">Sports</div>
+ <div class="item genre-option" data-value="technology">Technology</div>
</div>
</div>
-
- <!-- SORTING -->
- <div class="dropdown date" id="sort">
- <button class="dropbtn sort-button">
- <div class="sort-display">
- Sort by
+
+ <!-- Number of Episode FILTER -->
+ <div class="dropdown eps">
+ <button class="dropbtn eps-button">
+ <div class="eps-display">
+ All episodes
</div>
<img src="<?= BASE_URL ?>/images/assets/arrow_down.svg" alt="home" width="12px" height="12px">
</button>
- <div class="dropdown-content sort-content">
- <div class="item sort-option" data-value="alphabet">alphabetical</div>
- <div class="item sort-option" data-value="sort">date joined</div>
+ <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>
</div>
-
- </navbar>
- <main>
- <div class="result-container">
- <?php include(dirname(__DIR__) . "/search/result.php")?>
+ </div>
+
+ <!-- SORTING -->
+ <div class="dropdown date" id="sort">
+ <button class="dropbtn sort-button">
+ <div class="sort-display">
+ Sort by
+ </div>
+ <img src="<?= BASE_URL ?>/images/assets/arrow_down.svg" alt="home" width="12px" height="12px">
+ </button>
+ <div class="dropdown-content sort-content">
+ <div class="item sort-option" data-value="alphabet">alphabetical</div>
+ <div class="item sort-option" data-value="sort">date joined</div>
</div>
- </main>
- <?php include(dirname(__DIR__) . "/common/player.php")?>
-</body>
-</html>
\ No newline at end of file
+ </div>
+</navbar>
+<div class="result-container">
+ <?php include(dirname(__DIR__) . "/search/result.php")?>
+</div>
diff --git a/src/app/controllers/app/app_controller.php b/src/app/controllers/app/app_controller.php
new file mode 100644
index 0000000000000000000000000000000000000000..88d69f645e873eee1089ef7578eee6c99a6c5933
--- /dev/null
+++ b/src/app/controllers/app/app_controller.php
@@ -0,0 +1,54 @@
+<?php
+
+class AppController
+{
+ public function call()
+ {
+ // Session validation
+ session_start();
+ if (!isset($_SESSION["user_id"])) {
+ 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_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 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;
+ }
+
+ // App View
+ require_once __DIR__ . "/../../views/app/app_view.php";
+ $appView = new AppView($data);
+ $appView->render();
+ }
+}
\ No newline at end of file
diff --git a/src/app/controllers/home/get_home.php b/src/app/controllers/home/get_home.php
index 81b6c709b02b2fc97e8e333c893952073b323aba..5344363de2f3605c0ad767b2cfe3b3ab5e426720 100644
--- a/src/app/controllers/home/get_home.php
+++ b/src/app/controllers/home/get_home.php
@@ -6,46 +6,17 @@ class GetHomeController
{
session_start();
- require_once __DIR__ . "/../../views/home/home_view.php";
$data = [];
-
+
// podcast Info
$podcastModel = new PodcastModel();
- $epsId = "";
- if (isset($_SESSION["eps_id"])) {
- $epsId = $_SESSION["eps_id"];
- }
- $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;
- }
-
- $podcastTech = $podcastModel->getPodcastByGenre("technology");
+ $podcastTech = $podcastModel->getPodcastByGenre("comedy");
if ($podcastTech){
- var_dump($podcastTech);
$data["tech_podcasts"] = $podcastTech;
}
-
- // user info
- $userModel = new UserModel();
- $userId = "";
- if (isset($_SESSION["user_id"])) {
- $userId = $_SESSION["user_id"];
- }
- $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;
- }
-
+ // Home View
+ require_once __DIR__ . "/../../views/home/home_view.php";
$view = new HomeView($data);
$view->render();
}
diff --git a/src/app/controllers/search/get_search.php b/src/app/controllers/search/get_search.php
index f7a0f541c14d497bb76c8d52aa1858aad26f9cea..92cda4bf8a8d0a5654da388a55c987fd55adb377 100644
--- a/src/app/controllers/search/get_search.php
+++ b/src/app/controllers/search/get_search.php
@@ -13,24 +13,6 @@ class GetSearchController
return;
}
- require_once __DIR__ . "/../../views/search/search_view.php";
- $data = [];
-
- // podcast Info
- $podcastModel = new PodcastModel();
- $epsId = "";
- if (isset($_GET["eps_id"])) {
- $epsId = $_GET["eps_id"];
- }
- $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;
- }
-
// List of all podcasts
// search bar
$keyword = "";
@@ -43,7 +25,7 @@ class GetSearchController
if (isset($_GET["genre"])) {
$genre = $_GET["genre"];
}
-
+
// eps
$eps = "";
if (isset($_GET["eps"])) {
@@ -55,35 +37,23 @@ class GetSearchController
if (isset($_GET["sort"])) {
$sort = $_GET["sort"];
}
-
+
// isAsc
$isAsc = "";
if (isset($_GET["isAsc"])) {
$isAsc = $_GET["isAsc"];
}
-
+
+ $podcastModel = new PodcastModel();
$podcasts = $podcastModel->getAllPodcast($keyword, $genre, $eps, $sort, $isAsc);
- // print_r($podcasts);
-
+
+ $data = [];
if ($podcasts){
$data["podcasts"] = $podcasts;
}
- // user info
- $userModel = new UserModel();
- $userId = "";
- if (isset($_GET["user_id"])) {
- $userId = $_GET["user_id"];
- }
- $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;
- }
-
+ // Search View
+ require_once __DIR__ . "/../../views/search/search_view.php";
$view = new SearchView($data);
if (isset($_GET["keyword"]) && $_GET["keyword"]="1"){
$view->render_match();
diff --git a/src/app/core/app.php b/src/app/core/app.php
index 84324758f190492eb357f91e9147ebab99974514..326ce639ff35217d7aa4eb3a33480ecf00dbf142 100644
--- a/src/app/core/app.php
+++ b/src/app/core/app.php
@@ -7,8 +7,20 @@ class App
$url = $this->parseURL();
$router = new Router();
+ $router->get("public", new AppController());
+ $router->get("public/home", new AppController());
+ $router->get("public/search", new AppController());
+ $router->get("public/library", new AppController());
+ $router->get("public/playlist", new AppController());
+ $router->get("public/dashboard", new AppController());
+
+ $router->get("public/components/home", new GetHomeController());
+ $router->get("public/components/search", new GetSearchController());
+ $router->get("public/components/library", new GetLibraryController());
+ $router->get("public/components/playlist", new GetPlaylistController());
+
// Dashboard page routes
- $router->get("public/dashboard", new GetDashboardLayoutController());
+ $router->get("public/components/dashboard", new GetDashboardLayoutController());
$router->get("public/dashboard/main", new GetDashboardLayoutController());
$router->get("public/dashboard/episode", new GetDashboardLayoutController());
$router->get("public/dashboard/add-episode", new GetAddEpisodeController());
@@ -28,17 +40,12 @@ class App
$router->delete("public/dashboard/podcast", new DeletePodcastController());
$router->get("public/podcast", new GetPodcastPageController());
-
- $router->post("public/logout", new LogoutController());
-
- $router->get("public/home", new GetHomeController());
- $router->get("public/search", new GetSearchController());
+
$router->get("public/login", new GetLoginController());
$router->post("public/login", new PostLoginController());
$router->get("public/signup", new GetSignupController());
$router->post("public/signup", new PostSignupController());
- $router->get("public/library", new GetLibraryController());
- $router->get("public/playlist", new GetPlaylistController());
+ $router->post("public/logout", new LogoutController());
$router->directRequest($url);
}
diff --git a/src/app/init.php b/src/app/init.php
index a984ef3b9c391d1bf4ebff7fd6a1e7c0ae97011d..f936aa1b16d90ab1a10cd76a44456e9d6ad83485 100644
--- a/src/app/init.php
+++ b/src/app/init.php
@@ -36,6 +36,8 @@ require_once __DIR__ . "/controllers/signup/get_signup.php";
require_once __DIR__ . "/controllers/signup/post_signup.php";
require_once __DIR__ . "/controllers/search/get_search.php";
+require_once __DIR__ . "/controllers/app/app_controller.php";
+
require_once __DIR__ . "/models/podcast.php";
require_once __DIR__ . "/models/episode.php";
require_once __DIR__ . "/models/user.php";
diff --git a/src/app/models/podcast.php b/src/app/models/podcast.php
index e77bc641d91dcaee11fa3cd5aa89de56660cac2a..f0c3eabfc0359b25d03e5042d7ebc2470f8e6f81 100644
--- a/src/app/models/podcast.php
+++ b/src/app/models/podcast.php
@@ -95,7 +95,7 @@ class PodcastModel
public function getPodcastByGenre($genre)
{
- $queryByGenre =
+ $query =
"SELECT title, category, url_thumbnail, description, name
FROM podcast
NATURAL JOIN user
@@ -103,6 +103,7 @@ class PodcastModel
LIMIT 7
";
+ $this->db->query($query);
$this->db->bind("genre", $genre);
$podcasts = $this->db->fetchAll();
diff --git a/src/app/views/app/app_view.php b/src/app/views/app/app_view.php
new file mode 100644
index 0000000000000000000000000000000000000000..40abe6675d613733260a5d73fbc09102c0bdf9f9
--- /dev/null
+++ b/src/app/views/app/app_view.php
@@ -0,0 +1,16 @@
+<?php
+
+class AppView
+{
+ public $data;
+
+ public function __construct($data = [])
+ {
+ $this->data = $data;
+ }
+
+ public function render()
+ {
+ require_once __DIR__ . "/../../components/app/app_page.php";
+ }
+}
\ No newline at end of file
diff --git a/src/app/views/search/search_view.php b/src/app/views/search/search_view.php
index fd29538a4f5bbeef9e8c3208529eee56dbdc01c2..3d76394e83518f6d3c43c3c002c9567c9ab1a691 100644
--- a/src/app/views/search/search_view.php
+++ b/src/app/views/search/search_view.php
@@ -17,4 +17,4 @@ class SearchView
{
require_once __DIR__ . "/../../components/search/result.php";
}
-}
+}
\ No newline at end of file
diff --git a/src/public/javascript/app/app.js b/src/public/javascript/app/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..68eb6c49afbb79fd42d94cb4c46da18ea2909320
--- /dev/null
+++ b/src/public/javascript/app/app.js
@@ -0,0 +1,29 @@
+const mainSection = document.querySelector('main');
+const sidebar = document.querySelector('.sidebar');
+
+const urls = window.location.href.split("?")[0].split("/");
+let lastURL = urls[urls.length - 1];
+
+window.onload = () => {
+ getPage(lastURL);
+}
+
+getPage = (page) => {
+ const xhr = new XMLHttpRequest();
+ xhr.open('GET', `/public/components/${page}`, true);
+
+ xhr.onreadystatechange = () => {
+ if(xhr.readyState == 4 && xhr.status == 200) {
+ mainSection.innerHTML = xhr.responseText;
+ handleSearch();
+ handleDashboard();
+ }
+ }
+
+ xhr.send();
+ history.pushState(
+ {},
+ "",
+ `http://localhost:8080/public/${page}`
+ );
+}
diff --git a/src/public/javascript/app/route.js b/src/public/javascript/app/route.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/public/javascript/dashboard/layout.js b/src/public/javascript/dashboard/layout.js
index e0941aa6605eebd45fefb675c2dedc1adabeb13e..bc717f2dbe0a0d70d86a89f24ec43d108ffbd588 100644
--- a/src/public/javascript/dashboard/layout.js
+++ b/src/public/javascript/dashboard/layout.js
@@ -1,64 +1,131 @@
-"use strict";
-
import { showSuccessToast } from "../toast.mjs";
+const handleDashboard = () => {
+ "use strict";
-// Get DOM elements
-const dashboardLink = document.getElementById("dashboard-link");
-const episodeLink = document.getElementById("episode-link");
-const dashboardSection = document.getElementById("dashboard-section");
-const overlayEl = document.getElementById("overlay-layout");
-const choosePodcastButtonEl = document.getElementById("choose-podcast-btn");
-const podcastChoicesEl = document.getElementById("podcast-choices");
+ // Get DOM elements
+ const dashboardLink = document.getElementById("dashboard-link");
+ const episodeLink = document.getElementById("episode-link");
+ const dashboardSection = document.getElementById("dashboard-section");
-const urls = window.location.href.split("?")[0].split("/");
-let lastURL = urls[urls.length - 1];
+ const overlayEl = document.getElementById("overlay-layout");
+ const choosePodcastButtonEl = document.getElementById("choose-podcast-btn");
+ const podcastChoicesEl = document.getElementById("podcast-choices");
-let idPodcast = new URLSearchParams(window.location.search).get("id_podcast");
-let page = new URLSearchParams(window.location.search).get("page");
-let podcasts = [];
+ const urls = window.location.href.split("?")[0].split("/");
+ let lastURL = urls[urls.length - 1];
-// Initial request to fetch user podcasts
-const xhr = new XMLHttpRequest();
-xhr.open("GET", "/public/dashboard/user-podcast");
-xhr.send(null);
+ let idPodcast = new URLSearchParams(window.location.search).get("id_podcast");
+ let page = new URLSearchParams(window.location.search).get("page");
+ let podcasts = [];
-xhr.onreadystatechange = () => {
- if (xhr.readyState === 4 && xhr.status === 200) {
- const resJson = JSON.parse(xhr.response);
+ // Initial request to fetch user podcasts
+ const xhr = new XMLHttpRequest();
+ xhr.open("GET", "/public/dashboard/user-podcast");
+ xhr.send(null);
- podcasts = resJson?.podcasts;
- // Redirect if the user doesnt have any podcast
- if (podcasts.length === 0) {
- window.location.replace("/public/dashboard/add-podcast");
- return;
- }
+ xhr.onreadystatechange = () => {
+ if (xhr.readyState === 4 && xhr.status === 200) {
+ const resJson = JSON.parse(xhr.response);
- if (!idPodcast) {
- idPodcast = podcasts[0].id_podcast;
- }
+ podcasts = resJson?.podcasts;
+ // Redirect if the user doesnt have any podcast
+ if (podcasts.length === 0) {
+ window.location.replace("/public/dashboard/add-podcast");
+ return;
+ }
- if (lastURL === "dashboard") {
- lastURL = "main";
- }
+ if (!idPodcast) {
+ idPodcast = podcasts[0].id_podcast;
+ }
+
+ if (lastURL === "dashboard") {
+ lastURL = "main";
+ }
+
+ if (lastURL === "main") {
+ dashboardLink.classList.add("nav-active");
+ } else {
+ episodeLink.classList.add("nav-active");
+ }
- if (lastURL === "main") {
- dashboardLink.classList.add("nav-active");
- } else {
- episodeLink.classList.add("nav-active");
+ // Get main content
+ const xhr2 = new XMLHttpRequest();
+ xhr2.open(
+ "GET",
+ `/public/dashboard/internal/${lastURL}?id_podcast=${idPodcast}${
+ lastURL === "episode" ? `&page=${page || 1}` : ""
+ }`
+ );
+ xhr2.send(null);
+
+ xhr2.onreadystatechange = function () {
+ if (this.readyState === XMLHttpRequest.DONE) {
+ dashboardSection.innerHTML = this.response;
+
+ const deleteEpisodeButtonEl = document.querySelectorAll(
+ ".delete-episode-btn"
+ );
+ Array.from(deleteEpisodeButtonEl).forEach((el) => {
+ el.addEventListener("click", (e) => {
+ e.preventDefault();
+
+ handleDeleteEpisode(el.dataset.id);
+ });
+ });
+
+ const allEpisodeButtonEl = document.getElementById("all-episode-btn");
+ allEpisodeButtonEl &&
+ allEpisodeButtonEl.addEventListener("click", changeToEpisode);
+ }
+ };
+
+ history.pushState(
+ {},
+ "",
+ `/public/dashboard/${lastURL}?id_podcast=${idPodcast}${
+ lastURL === "episode" ? `&page=${page || 1}` : ""
+ }`
+ );
}
+ };
- // Get main content
- const xhr2 = new XMLHttpRequest();
- xhr2.open(
+ // Add event listeners to dashboard nav
+ episodeLink.addEventListener("click", changeToEpisode);
+ dashboardLink.addEventListener("click", changeToMain);
+
+ overlayEl.addEventListener("click", (e) => {
+ e.preventDefault();
+
+ podcastChoicesEl.classList.toggle("hidden");
+ overlayEl.classList.toggle("hidden");
+ });
+ choosePodcastButtonEl.addEventListener("click", (e) => {
+ e.preventDefault();
+
+ podcastChoicesEl.classList.toggle("hidden");
+ overlayEl.classList.toggle("hidden");
+ });
+
+ // Handles change to episode page
+ function changeToEpisode() {
+ history.pushState(
+ {},
+ "",
+ `http://localhost:8080/public/dashboard/episode?id_podcast=${idPodcast}&page=1`
+ );
+
+ dashboardLink.classList.toggle("nav-active");
+ episodeLink.classList.toggle("nav-active");
+
+ const xhr = new XMLHttpRequest();
+ xhr.open(
"GET",
- `/public/dashboard/internal/${lastURL}?id_podcast=${idPodcast}${
- lastURL === "episode" ? `&page=${page || 1}` : ""
- }`
+ `/public/dashboard/internal/episode?id_podcast=${idPodcast}&page=1`
);
- xhr2.send(null);
+ xhr.send(null);
- xhr2.onreadystatechange = function () {
+ xhr.onreadystatechange = function () {
if (this.readyState === XMLHttpRequest.DONE) {
dashboardSection.innerHTML = this.response;
@@ -72,139 +139,74 @@ xhr.onreadystatechange = () => {
handleDeleteEpisode(el.dataset.id);
});
});
-
- const allEpisodeButtonEl = document.getElementById("all-episode-btn");
- allEpisodeButtonEl &&
- allEpisodeButtonEl.addEventListener("click", changeToEpisode);
}
};
+ }
+ // Handles change to main page
+ function changeToMain() {
history.pushState(
{},
"",
- `/public/dashboard/${lastURL}?id_podcast=${idPodcast}${
- lastURL === "episode" ? `&page=${page || 1}` : ""
- }`
+ `http://localhost:8080/public/dashboard/main?id_podcast=${idPodcast}`
);
- }
-};
-
-// Add event listeners to dashboard nav
-episodeLink.addEventListener("click", changeToEpisode);
-dashboardLink.addEventListener("click", changeToMain);
-
-overlayEl.addEventListener("click", (e) => {
- e.preventDefault();
-
- podcastChoicesEl.classList.toggle("hidden");
- overlayEl.classList.toggle("hidden");
-});
-choosePodcastButtonEl.addEventListener("click", (e) => {
- e.preventDefault();
- podcastChoicesEl.classList.toggle("hidden");
- overlayEl.classList.toggle("hidden");
-});
+ dashboardLink.classList.toggle("nav-active");
+ episodeLink.classList.toggle("nav-active");
-// Handles change to episode page
-function changeToEpisode() {
- history.pushState(
- {},
- "",
- `http://localhost:8080/public/dashboard/episode?id_podcast=${idPodcast}&page=1`
- );
+ const xhr1 = new XMLHttpRequest();
+ xhr1.open("GET", `/public/dashboard/internal/main?id_podcast=${idPodcast}`);
+ xhr1.send(null);
- dashboardLink.classList.toggle("nav-active");
- episodeLink.classList.toggle("nav-active");
-
- const xhr = new XMLHttpRequest();
- xhr.open(
- "GET",
- `/public/dashboard/internal/episode?id_podcast=${idPodcast}&page=1`
- );
- xhr.send(null);
-
- xhr.onreadystatechange = function () {
- if (this.readyState === XMLHttpRequest.DONE) {
- dashboardSection.innerHTML = this.response;
+ xhr1.onreadystatechange = function () {
+ if (this.readyState === XMLHttpRequest.DONE) {
+ dashboardSection.innerHTML = this.response;
- const deleteEpisodeButtonEl = document.querySelectorAll(
- ".delete-episode-btn"
- );
- Array.from(deleteEpisodeButtonEl).forEach((el) => {
- el.addEventListener("click", (e) => {
- e.preventDefault();
+ const allEpisodeButtonEl = document.getElementById("all-episode-btn");
+ allEpisodeButtonEl &&
+ allEpisodeButtonEl.addEventListener("click", changeToEpisode);
+ }
+ };
+ }
- handleDeleteEpisode(el.dataset.id);
- });
- });
- }
- };
-}
-
-// Handles change to main page
-function changeToMain() {
- history.pushState(
- {},
- "",
- `http://localhost:8080/public/dashboard/main?id_podcast=${idPodcast}`
- );
-
- dashboardLink.classList.toggle("nav-active");
- episodeLink.classList.toggle("nav-active");
-
- const xhr1 = new XMLHttpRequest();
- xhr1.open("GET", `/public/dashboard/internal/main?id_podcast=${idPodcast}`);
- xhr1.send(null);
-
- xhr1.onreadystatechange = function () {
- if (this.readyState === XMLHttpRequest.DONE) {
- dashboardSection.innerHTML = this.response;
-
- const allEpisodeButtonEl = document.getElementById("all-episode-btn");
- allEpisodeButtonEl &&
- allEpisodeButtonEl.addEventListener("click", changeToEpisode);
+ // Handle delete episode
+ function handleDeleteEpisode(idEpisode) {
+ if (confirm("Are you sure?") === false) {
+ return;
}
- };
-}
-// Handle delete episode
-function handleDeleteEpisode(idEpisode) {
- if (confirm("Are you sure?") === false) {
- return;
- }
+ const xhr1 = new XMLHttpRequest();
+ xhr1.open("DELETE", `/public/dashboard/episode?id_episode=${idEpisode}`);
+ xhr1.send(null);
- const xhr1 = new XMLHttpRequest();
- xhr1.open("DELETE", `/public/dashboard/episode?id_episode=${idEpisode}`);
- xhr1.send(null);
+ xhr1.onreadystatechange = function () {
+ if (xhr1.readyState === 4 && xhr1.status === 200) {
+ showSuccessToast("Episode deleted successfully!");
- xhr1.onreadystatechange = function () {
- if (xhr1.readyState === 4 && xhr1.status === 200) {
- showSuccessToast("Episode deleted successfully!");
+ const xhr2 = new XMLHttpRequest();
+ xhr2.open(
+ "GET",
+ `/public/dashboard/internal/episode?id_podcast=${idPodcast}&page=1`
+ );
+ xhr2.send(null);
- const xhr2 = new XMLHttpRequest();
- xhr2.open(
- "GET",
- `/public/dashboard/internal/episode?id_podcast=${idPodcast}&page=1`
- );
- xhr2.send(null);
+ xhr2.onreadystatechange = function () {
+ if (this.readyState === XMLHttpRequest.DONE) {
+ dashboardSection.innerHTML = this.response;
- xhr2.onreadystatechange = function () {
- if (this.readyState === XMLHttpRequest.DONE) {
- dashboardSection.innerHTML = this.response;
+ const deleteEpisodeButtonEl = document.querySelectorAll(
+ ".delete-episode-btn"
+ );
+ Array.from(deleteEpisodeButtonEl).forEach((el) => {
+ el.addEventListener("click", (e) => {
+ e.preventDefault();
- const deleteEpisodeButtonEl = document.querySelectorAll(
- ".delete-episode-btn"
- );
- Array.from(deleteEpisodeButtonEl).forEach((el) => {
- el.addEventListener("click", (e) => {
- e.preventDefault();
-
- handleDeleteEpisode(el.dataset.id);
+ handleDeleteEpisode(el.dataset.id);
+ });
});
- });
- }
- };
- }
- };
-}
+ }
+ };
+ }
+ };
+ }
+}
\ No newline at end of file
diff --git a/src/public/javascript/search/search.js b/src/public/javascript/search/search.js
index c55e6c97d00dfcf3d37720bc6ca936a57ae04fc7..a4859bf6688b11d89716bef56aff4568185848ed 100644
--- a/src/public/javascript/search/search.js
+++ b/src/public/javascript/search/search.js
@@ -1,153 +1,165 @@
-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');
-
-
-console.log(epsDisplay);
-
-var keyword = "";
-var genre = "";
-var sort = "";
-var eps = "";
-var isAsc = "true";
-
-searchInput &&
- searchInput.addEventListener(
- "keyup",
- debounce(()=> {
- keyword = searchInput.value;
+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";
+ });
+ });
+
+
+
+ // 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;
- console.log("ajax amsterdam");
}
}
-
+
ajax.open('GET',
- `/public/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true);
+ `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true);
ajax.send();
- }, DEBOUNCE_TIMEOUT)
-);
-
-
-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;
-
-
- genre = selectedGenre;
- const ajax = new XMLHttpRequest();
-
- ajax.onreadystatechange = () => {
- if(ajax.readyState == 4 && ajax.status == 200) {
- resultContainer.innerHTML = ajax.responseText;
- }
- }
-
- ajax.open('GET',
- `/public/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true);
- ajax.send();
-
- genreContent.style.display = "none";
+ epsContent.style.display = "none";
+ });
});
-});
-
-genreButton.addEventListener('click', function() {
- genreContent.style.display = "block";
-})
-
-
-// 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;
-
-
- 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/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true);
- ajax.send();
+
+ ajax.open('GET',
+ `/public/components/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true);
+ ajax.send();
- epsContent.style.display = "none";
+ sortContent.style.display = "none";
+ });
});
-});
-
-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/search?keyword=${keyword}&genre=${genre}&eps=${eps}&sort=${sort}&isAsc=${isAsc}`, true);
- ajax.send();
- sortContent.style.display = "none";
+ 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";
+ }
});
-});
-
-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";
- }
-});
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/public/styles/globals.css b/src/public/styles/globals.css
index d14cfb890ec8fcdc7851c4ca4bca9fef0989974b..303883faeba1392aa20ca485f3b5775cd9e9026e 100644
--- a/src/public/styles/globals.css
+++ b/src/public/styles/globals.css
@@ -37,17 +37,19 @@ body {
color: white;
padding: 0;
margin: 0;
- display: flex;
font-family: "DM Sans", sans-serif;
+ height: 100vh;
+ overflow-y: hidden;
}
+
main {
min-width: 0;
- flex: auto;
- overflow-y: scroll;
- width: 100%;
+ width: fit-content;
background-color: var(--BLACK);
- padding: 0 auto;
+ width: 100%;
+ overflow-y: auto;
}
+
button {
all: unset;
}
@@ -167,8 +169,7 @@ h6 {
}
/* Navigation Bar */
-.sidebar {
- overflow-y: hidden;
+aside {
display: flex;
flex-direction: column;
align-items: center;
@@ -181,14 +182,14 @@ h6 {
flex-grow: 1;
}
-.sidebar-container {
+aside .sidebar-container {
display: flex;
flex-direction: column;
max-width: 194px;
gap: 16px;
}
-.sidebar-item {
+aside .sidebar-item {
display: flex;
align-items: center;
gap: 8px;
@@ -197,6 +198,7 @@ h6 {
padding-top: 4px;
padding-bottom: 4px;
border-radius: 20px;
+ cursor:pointer;
}
/* Bottom Bar and Audio Player */
diff --git a/src/public/styles/home/Home.css b/src/public/styles/home/Home.css
index 502c146c6461832bc0e894f2a1ea3dc5cb621d2f..5fdd9122f2b95b2d781af0e6b9b093dbddecf466 100644
--- a/src/public/styles/home/Home.css
+++ b/src/public/styles/home/Home.css
@@ -1,4 +1,12 @@
-.main-content {
+.comedy-content {
display: flex;
+ flex-direction: column;
padding: 100px 100px;
+}
+
+.podcast-list {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: space-between;
}
\ No newline at end of file
diff --git a/src/public/styles/search/search.css b/src/public/styles/search/search.css
index 6a99a0eee5e6100860f2dbf86c93a84e6736a7f8..fb307e6fa2b9b13d7ebb4896aaeb909d610d8699 100644
--- a/src/public/styles/search/search.css
+++ b/src/public/styles/search/search.css
@@ -2,13 +2,13 @@
navbar {
position: fixed;
display: flex;
+ flex-direction: row;
gap: 24px;
- margin-left: 256px;
background-color: var(--BLACK);
top: 0;
- width: 100%;
height: 78px;
align-items: center;
+ width: 100%;
}
/* Search Bar */
@@ -84,7 +84,6 @@ navbar .dropbtn {
/* result */
.result-container {
- width: 100%;
display: flex;
margin-top: 150px;
justify-content: center;