diff --git a/src/app/components/app/app_page.php b/src/app/components/app/app_page.php index 8584782b1f4b399db8cc38906018dfe2123d1f23..e74a7afc70728c6ee19126be6371533b3069db1d 100644 --- a/src/app/components/app/app_page.php +++ b/src/app/components/app/app_page.php @@ -10,11 +10,17 @@ <!-- 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"> + + <!-- <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/globals.css"> --> + <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/dashboard/layout.css"> + <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/dashboard/pages/main.css"> + <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/dashboard/pages/episode.css"> + <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/dashboard/components/button.css"> <!-- JavaScript Library --> <script type="text/javascript" src="<?= BASE_URL ?>/javascript/player.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/app/app.js" defer></script> + <script type="module" src="<?= BASE_URL ?>/javascript/dashboard/layout.mjs" defer></script> + <script type="module" 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> diff --git a/src/app/components/common/sidebar.php b/src/app/components/common/sidebar.php index 114c2dc8fab2e09bd79c8e3b14dd8a1c851cf8e9..dde5e04197d174ff58af84be9d42dc833df4af5c 100644 --- a/src/app/components/common/sidebar.php +++ b/src/app/components/common/sidebar.php @@ -1,26 +1,26 @@ <aside> - <div class="sidebar-container"> - <div class="sidebar-item" onclick="getPage('home')"> + <div class="sidebar-container"> + <div id="sidebar-home" class="sidebar-item"> <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')"> + <div id="sidebar-search" class="sidebar-item"> <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')"> + <div id="sidebar-library" class="sidebar-item"> <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) :?> - <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> - <?php endif;?> - <?php endif;?> + <?php if (isset($_SESSION["role_id"])) : ?> + <?php if ($_SESSION["role_id"] == 1) : ?> + <div id="sidebar-dashboard" class="sidebar-item"> + <img width="32" height="32" src="<?= BASE_URL ?>/images/assets/fire_icon.svg" alt="dashboard"> + <div class="sh5">Dashboard</div> + </div> + <?php endif; ?> + <?php endif; ?> </div> </aside> \ No newline at end of file diff --git a/src/app/components/common/toast.php b/src/app/components/common/toast.php index c588d6a6b3f98573868fb25b8c12c041ae7913b6..bc6eae1630dea48a1d467331e231730206daacc8 100644 --- a/src/app/components/common/toast.php +++ b/src/app/components/common/toast.php @@ -1,8 +1,8 @@ -<aside id="toast" class="hidden"> +<div id="toast" class="hidden"> <p class="b3"></p> <button id="toast-close-btn"> <img width="12" height="12" src="<?= BASE_URL ?>/images/dashboard/cross.svg" alt="close toast"> </button> -</aside> +</div> <div id="overlay-toast" class="overlay hidden"></div> \ No newline at end of file diff --git a/src/app/components/dashboard/layout.php b/src/app/components/dashboard/layout.php index 52c7fb2c9a81fd41b415b247f02471b928448bac..b642c54dce626674ae69fbabc9da9cd411dae995 100644 --- a/src/app/components/dashboard/layout.php +++ b/src/app/components/dashboard/layout.php @@ -1,4 +1,4 @@ -<!DOCTYPE html> +<!-- <!DOCTYPE html> <html lang="en"> <head> @@ -16,7 +16,7 @@ <title>Main Dashboard</title> </head> -<body> +<body> --> <?php include(dirname(__DIR__) . "/common/toast.php") ?> <div id="overlay-layout" class="overlay hidden"></div> @@ -36,7 +36,7 @@ <ul id="podcast-choices" class="hidden"> <?php foreach ($this->data["podcasts"] as $podcast) : ?> <li> - <a href="/public/dashboard/main?id_podcast=<?= $podcast->id_podcast ?>"> + <a href="/public/dashboard-main?id_podcast=<?= $podcast->id_podcast ?>"> <p class="b3"><?= $podcast->title ?></p> </a> </li> @@ -54,6 +54,6 @@ <section id="dashboard-section"></section> </main> -</body> +<!-- </body> -</html> \ No newline at end of file +</html> --> \ No newline at end of file diff --git a/src/app/components/dashboard/pages/dash_form.php b/src/app/components/dashboard/pages/dash_form.php index 32eef95dcbc1665120081b22322b45e332b14a8a..84741e792141863425383428bc59f9e82174bf0a 100644 --- a/src/app/components/dashboard/pages/dash_form.php +++ b/src/app/components/dashboard/pages/dash_form.php @@ -19,7 +19,7 @@ <?php include(dirname(__DIR__) . "/../common/toast.php") ?> <main> - <a class="back-link" href="<?= BASE_URL ?>/dashboard/main?id_podcast=<?= $this->data["id_podcast"] ?? "" ?>"> + <a class="back-link" href="<?= BASE_URL ?>/dashboard-main?id_podcast=<?= $this->data["id_podcast"] ?? "" ?>"> <img src="<?= BASE_URL ?>/images/dashboard/right_arrow.svg" alt=""> <p class="sh4">Kembali Ke Dashboard</p> </a> diff --git a/src/app/components/dashboard/pages/episode.php b/src/app/components/dashboard/pages/episode.php index 3952f958b8511bd8b0dd85b1153c7d5c0ce171a4..b054d7e897f363d997516781f35ab62cfd5e728a 100644 --- a/src/app/components/dashboard/pages/episode.php +++ b/src/app/components/dashboard/pages/episode.php @@ -33,7 +33,7 @@ <ul style="display: flex; gap: 8px; justify-content: center"> <?php foreach ($this->data["page_count"] as $idx => $episode) : ?> - <li style="padding: 0; border: none;"><a style="padding: 8px; background-color: red" href="<?= BASE_URL ?>/dashboard/episode?id_podcast=<?= $this->data["id_podcast"] ?? "" ?>&page=<?= $idx + 1 ?>"><?= $idx + 1 ?></a></li> + <li style="padding: 0; border: none;"><a style="padding: 8px; background-color: red" href="<?= BASE_URL ?>/dashboard-episode?id_podcast=<?= $this->data["id_podcast"] ?? "" ?>&page=<?= $idx + 1 ?>"><?= $idx + 1 ?></a></li> <?php endforeach; ?> </ul> </section> \ No newline at end of file diff --git a/src/app/core/app.php b/src/app/core/app.php index b1a9253c72be63c3259e4b762105bd6df4fc597c..72ddb53ecfd2ceb5af10dffc6c0145098b628e38 100644 --- a/src/app/core/app.php +++ b/src/app/core/app.php @@ -15,7 +15,9 @@ class App $router->get("public/library", new AppController()); $router->get("public/playlist", new AppController()); $router->get("public/dashboard", new AppController()); - + $router->get("public/dashboard-main", new AppController()); + $router->get("public/dashboard-episode", new AppController()); + $router->get("public/components/home", new GetHomeController()); $router->get("public/components/search", new GetSearchController()); $router->get("public/components/library", new GetLibraryController()); @@ -23,16 +25,17 @@ class App // Dashboard page routes $router->get("public/components/dashboard", new GetDashboardLayoutController()); - $router->get("public/dashboard/main", new GetDashboardLayoutController()); - $router->get("public/dashboard/episode", new GetDashboardLayoutController()); + $router->get("public/components/dashboard-main", new GetDashboardLayoutController()); + $router->get("public/components/dashboard-episode", new GetDashboardLayoutController()); + $router->get("public/dashboard/add-episode", new GetAddEpisodeController()); $router->get("public/dashboard/add-podcast", new GetAddPodcastController()); $router->get("public/dashboard/edit-episode", new GetEditEpisodeController()); $router->get("public/dashboard/edit-podcast", new GetEditPodcastController()); // Dashboard data-fetching routes - $router->get("public/dashboard/internal/main", new GetDashboardMainController()); - $router->get("public/dashboard/internal/episode", new GetDashboardEpisodeController()); + $router->get("public/dashboard/internal/dashboard-main", new GetDashboardMainController()); + $router->get("public/dashboard/internal/dashboard-episode", new GetDashboardEpisodeController()); $router->post("public/dashboard/add-episode", new PostAddEpisodeController()); $router->post("public/dashboard/edit-episode", new PostEditEpisodeController()); $router->get("public/dashboard/user-podcast", new GetUserPodcastController()); diff --git a/src/public/javascript/app/app.js b/src/public/javascript/app/app.js index 8ac2668abdee1d7d5925f8426aab3ff28ccb64a7..ac4d4093e4cea57b5d262ee7be35c69f3744d76f 100644 --- a/src/public/javascript/app/app.js +++ b/src/public/javascript/app/app.js @@ -1,29 +1,46 @@ -const mainSection = document.querySelector('#main-section'); -const sidebar = document.querySelector('.sidebar'); +import { handleDashboard } from "../dashboard/layout.mjs"; + +const mainSection = document.querySelector("#main-section"); +const sidebar = document.querySelector(".sidebar"); + +const sidebarHome = document.getElementById("sidebar-home"); +const sidebarSearch = document.getElementById("sidebar-search"); +const sidebarLibrary = document.getElementById("sidebar-library"); +const sidebarDashboard = document.getElementById("sidebar-dashboard"); const urls = window.location.href.split("?")[0].split("/"); let lastURL = urls[urls.length - 1]; +const queryParam = window.location.href.split("?")[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(); - } + getPage(lastURL, queryParam); +}; + +const getPage = (page, queryParam) => { + const query = queryParam !== "" ? "?" + queryParam : queryParam; + + const xhr = new XMLHttpRequest(); + xhr.open("GET", `/public/components/${page}${query}`, true); + + xhr.onreadystatechange = () => { + if (xhr.readyState == 4 && xhr.status == 200) { + mainSection.innerHTML = xhr.responseText; + // handleSearch(); + if (window.location.href.includes("dashboard")) { + handleDashboard(); + } } + }; + + xhr.send(); + history.pushState({}, "", `http://localhost:8080/public/${page}${query}`); +}; - xhr.send(); - history.pushState( - {}, - "", - `http://localhost:8080/public/${page}` - ); -} +sidebarHome && sidebarHome.addEventListener("click", () => getPage("home", "")); +sidebarSearch && + sidebarSearch.addEventListener("click", () => getPage("search", "")); +sidebarLibrary && + sidebarLibrary.addEventListener("click", () => getPage("library", "")); +sidebarDashboard && + sidebarDashboard.addEventListener("click", () => getPage("dashboard", "")); diff --git a/src/public/javascript/dashboard/inputForm.js b/src/public/javascript/dashboard/inputForm.js index 7e9172f7f2bb614aaf527ab034c7ddca8622ead1..0fa4c2be74dad4b2a16ea88784ecb3c5c4467c26 100644 --- a/src/public/javascript/dashboard/inputForm.js +++ b/src/public/javascript/dashboard/inputForm.js @@ -227,7 +227,7 @@ saveButtonEl.addEventListener("click", (e) => { showSuccessToast("Episode added successfully!"); setTimeout(() => { window.location.replace( - `http://localhost:8080/public/dashboard/episode?id_podcast=${idPodcast}` + `http://localhost:8080/public/dashboard-episode?id_podcast=${idPodcast}` ); }, 1000); } @@ -262,7 +262,7 @@ saveButtonEl.addEventListener("click", (e) => { showSuccessToast("Episode updated successfully!"); setTimeout(() => { window.location.replace( - `http://localhost:8080/public/dashboard/episode?id_podcast=${idPodcast}` + `http://localhost:8080/public/dashboard-episode?id_podcast=${idPodcast}` ); }, 1000); } @@ -341,7 +341,7 @@ saveButtonEl.addEventListener("click", (e) => { showSuccessToast("Podcast updated successfully!"); setTimeout(() => { window.location.replace( - `http://localhost:8080/public/dashboard/main?id_podcast=${idPodcast}` + `http://localhost:8080/public/dashboard-main?id_podcast=${idPodcast}` ); }, 1000); } diff --git a/src/public/javascript/dashboard/layout.js b/src/public/javascript/dashboard/layout.mjs similarity index 88% rename from src/public/javascript/dashboard/layout.js rename to src/public/javascript/dashboard/layout.mjs index bc717f2dbe0a0d70d86a89f24ec43d108ffbd588..bd6b475741668298f6d22f1e14e629ec9b60aaad 100644 --- a/src/public/javascript/dashboard/layout.js +++ b/src/public/javascript/dashboard/layout.mjs @@ -1,8 +1,7 @@ -import { showSuccessToast } from "../toast.mjs"; -const handleDashboard = () => { - "use strict"; - +"use strict"; +import { showSuccessToast } from "../toast.mjs"; +export function handleDashboard() { // Get DOM elements const dashboardLink = document.getElementById("dashboard-link"); const episodeLink = document.getElementById("episode-link"); @@ -40,10 +39,10 @@ const handleDashboard = () => { } if (lastURL === "dashboard") { - lastURL = "main"; + lastURL = "dashboard-main"; } - if (lastURL === "main") { + if (lastURL === "dashboard-main") { dashboardLink.classList.add("nav-active"); } else { episodeLink.classList.add("nav-active"); @@ -54,7 +53,7 @@ const handleDashboard = () => { xhr2.open( "GET", `/public/dashboard/internal/${lastURL}?id_podcast=${idPodcast}${ - lastURL === "episode" ? `&page=${page || 1}` : "" + lastURL === "dashboard-episode" ? `&page=${page || 1}` : "" }` ); xhr2.send(null); @@ -83,8 +82,8 @@ const handleDashboard = () => { history.pushState( {}, "", - `/public/dashboard/${lastURL}?id_podcast=${idPodcast}${ - lastURL === "episode" ? `&page=${page || 1}` : "" + `/public/${lastURL}?id_podcast=${idPodcast}${ + lastURL === "dashboard-episode" ? `&page=${page || 1}` : "" }` ); } @@ -112,7 +111,7 @@ const handleDashboard = () => { history.pushState( {}, "", - `http://localhost:8080/public/dashboard/episode?id_podcast=${idPodcast}&page=1` + `http://localhost:8080/public/dashboard-episode?id_podcast=${idPodcast}&page=1` ); dashboardLink.classList.toggle("nav-active"); @@ -121,7 +120,7 @@ const handleDashboard = () => { const xhr = new XMLHttpRequest(); xhr.open( "GET", - `/public/dashboard/internal/episode?id_podcast=${idPodcast}&page=1` + `/public/dashboard/internal/dashboard-episode?id_podcast=${idPodcast}&page=1` ); xhr.send(null); @@ -148,14 +147,14 @@ const handleDashboard = () => { history.pushState( {}, "", - `http://localhost:8080/public/dashboard/main?id_podcast=${idPodcast}` + `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.open("GET", `/public/dashboard/internal/dashboard-main?id_podcast=${idPodcast}`); xhr1.send(null); xhr1.onreadystatechange = function () { @@ -186,7 +185,7 @@ const handleDashboard = () => { const xhr2 = new XMLHttpRequest(); xhr2.open( "GET", - `/public/dashboard/internal/episode?id_podcast=${idPodcast}&page=1` + `/public/dashboard/internal/dashboard-episode?id_podcast=${idPodcast}&page=1` ); xhr2.send(null); @@ -209,4 +208,4 @@ const handleDashboard = () => { } }; } -} \ No newline at end of file +} diff --git a/src/public/javascript/search/search.js b/src/public/javascript/search/search.js index f7d852b6b7aa695985708c1a69ab276459a52cba..677aa6dc04169a733809b08616a70f6a3ec217d0 100644 --- a/src/public/javascript/search/search.js +++ b/src/public/javascript/search/search.js @@ -1,4 +1,4 @@ -// const handleSearch = () => { +export const handleSearch = () => { const searchInput = document.getElementById("search-input"); const resultContainer = document.querySelector(".result-container"); @@ -171,4 +171,4 @@ sortContent.style.display = "none"; } }); -// }; +}; diff --git a/src/public/styles/globals.css b/src/public/styles/globals.css index f7951e9ea118c840b231903f3a08a6f324945d1e..030ccbdd3637ad689ffd1fc0b1e30287c6a8dfdc 100644 --- a/src/public/styles/globals.css +++ b/src/public/styles/globals.css @@ -198,7 +198,7 @@ aside .sidebar-item { padding-top: 4px; padding-bottom: 4px; border-radius: 20px; - cursor:pointer; + cursor: pointer; } /* Bottom Bar and Audio Player */ @@ -331,6 +331,7 @@ aside .sidebar-item { padding: 10px 24px 12px; transform: translateX(-50%); z-index: 110; + /* height: 50px; */ } #toast > button > img { margin-top: 6px;