diff --git a/docker-compose.yaml b/docker-compose.yaml
index 50af719a2c1bfacc8a13ae0414c7ed90a376880c..e4edfa929cd46509f8602e80cc6c4588f30d8e43 100644
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -16,7 +16,7 @@ services:
ports:
- 3308:3307
expose:
- - 3307
+ - 3308
hostname: tubes-php-db
env_file: .env
volumes:
diff --git a/src/app/components/library/library.php b/src/app/components/library/library.php
index db770cb01a7dcef5fc05b3059ac3b0fe11ca0dbc..307ab31cc2df3f209e1dfaefaabcf1fa88475afc 100644
--- a/src/app/components/library/library.php
+++ b/src/app/components/library/library.php
@@ -7,13 +7,34 @@
<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/library/library.css">
+
+ <script type="text/javascript" src="<?= BASE_URL ?>/javascript/library/library2.js" defer></script>
+
<title>Library</title>
</head>
<body>
+ <button class="new-playlist-btn" onclick="toggle()">New Playlist</button>
+
<main>
- <div class="playlist-container">
+ <div class="playlist-container" id="blur">
<?php include(dirname(__DIR__) . "/library/playlist.php")?>
</div>
- </main>
+ </main>
+
+ <div class="wrapper" id="popup">
+ <form id="add-playlist-form" autocomplete="off">
+
+ <h2>Add New Playlist</h2>
+ <div class="input-box">
+ <input type="text" placeholder="Playlist Title" id="playlist-title" required>
+ <p id="playlist-title-alert" class="alert-hide"></p>
+ </div>
+
+ <button type="submit" class="btn">Submit</button>
+ </form>
+ </div>
</body>
+
+<script type="text/javascript">
+</script>
</html>
\ No newline at end of file
diff --git a/src/app/controllers/library/post_library.php b/src/app/controllers/library/post_library.php
new file mode 100644
index 0000000000000000000000000000000000000000..53ccef149bd83b6ca064a802eae41e1ca3d3b16f
--- /dev/null
+++ b/src/app/controllers/library/post_library.php
@@ -0,0 +1,35 @@
+<?php
+
+class PostLibraryController
+{
+ public function call()
+ {
+ session_start();
+
+ if(!isset($_SESSION["user_id"])){
+ header("Location: " . BASE_URL . "/login");
+
+ return;
+ }
+
+ $playlistTitle = "";
+ $idUser = $_SESSION["user_id"];
+
+ if(isset($_POST["playlistTitle"])){
+ $playlistTitle = $_POST["playlistTitle"];
+ }
+
+
+ $model = new PlaylistModel();
+
+ try{
+ $model->addPlaylist($idUser, $playlistTitle);
+ http_response_code(201);
+ exit;
+ }catch(PDOException $e){
+ http_response_code(200);
+ echo($e->getMessage());
+ exit;
+ }
+ }
+}
diff --git a/src/app/core/app.php b/src/app/core/app.php
index 2b08fb582639226cf9a8473a3ebd4a10d5c8708f..b1a9253c72be63c3259e4b762105bd6df4fc597c 100644
--- a/src/app/core/app.php
+++ b/src/app/core/app.php
@@ -54,7 +54,7 @@ class App
$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->post("public/library", new PostLibraryController());
$router->get("public/playlist", new GetPlaylistController());
$router->post("public/playlist", new PostPlaylistController());
diff --git a/src/app/init.php b/src/app/init.php
index c83fbbbbecf2eb21b94e1c426cf7e6526e30e3a6..2022d21e6e3e26afa8dc5c730e45b11222eebf98 100644
--- a/src/app/init.php
+++ b/src/app/init.php
@@ -36,6 +36,7 @@ require_once __DIR__ . "/controllers/library/get_library.php";
require_once __DIR__ . "/controllers/playlist/get_playlist.php";
require_once __DIR__ . "/controllers/playlist/post_playlist.php";
require_once __DIR__ . "/controllers/library/get_library.php";
+require_once __DIR__ . "/controllers/library/post_library.php";
require_once __DIR__ . "/controllers/signup/get_signup.php";
require_once __DIR__ . "/controllers/signup/post_signup.php";
require_once __DIR__ . "/controllers/search/get_search.php";
diff --git a/src/app/models/playlist.php b/src/app/models/playlist.php
index ba55193a3ebd0d41d076c6eba58a88a65414e2be..92e9631a05a3893d56139d8d6b5b999314986b80 100644
--- a/src/app/models/playlist.php
+++ b/src/app/models/playlist.php
@@ -37,17 +37,16 @@ class PlaylistModel
return $playlistPodcast;
}
- public function addPlaylist($id_user, $title, $id_playlist)
+ public function addPlaylist($id_user, $title)
{
$query = "
- INSERT INTO playlist (id_playlist, title, id_user)
- VALUES(:id_playlist, :title, :id_user)
+ INSERT INTO playlist (title, id_user)
+ VALUES(:title, :id_user)
";
$this->db->query($query);
$this->db->bind("id_user", $id_user);
$this->db->bind("title", $title);
- $this->db->bind("id_playlist", $id_playlist);
$this->db->execute();
}
diff --git a/src/public/javascript/app/route.js b/src/public/javascript/app/route.js
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/public/javascript/library/library2.js b/src/public/javascript/library/library2.js
new file mode 100644
index 0000000000000000000000000000000000000000..c542a2a6ff5367d37c6b1a6c83a306e65717c185
--- /dev/null
+++ b/src/public/javascript/library/library2.js
@@ -0,0 +1,108 @@
+"use strict";
+
+function toggle(){
+ const blur = document.getElementById("blur");
+ const popup = document.getElementById("popup");
+ blur.classList.toggle('active');
+ popup.classList.toggle('active');
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+
+ const blurEl = document.getElementById("blur");
+ const main = document.querySelector("main");
+ const playlistTitleInput = document.getElementById("playlist-title");
+ const playlistTitleAlert = document.getElementById("playlist-title-alert");
+ const addPlaylistForm = document.getElementById("add-playlist-form");
+ const deletePlaylistEl = document.querySelectorAll(".bx-trash");
+
+ let playlistTitleValid = false;
+
+ main.addEventListener("click", (e) => {
+
+ if(blurEl.classList.contains("active")){
+ e.preventDefault();
+ toggle();
+ }
+ });
+
+ playlistTitleInput && playlistTitleInput.addEventListener("keyup", () => {
+ const playlistTitle = playlistTitleInput.value;
+
+
+ if(playlistTitle.length > 50){
+ playlistTitleAlert.innerText = "Judul playlist tidak bisa lebih dari 50 karakter";
+ playlistTitleAlert.className = "alert-show";
+ playlistTitleValid = false;
+ }else{
+ playlistTitleAlert.innerText = "";
+ playlistTitleAlert.className = "alert-hide";
+ playlistTitleValid = true;
+ }
+ })
+
+
+ addPlaylistForm.addEventListener("submit", (e) => {
+ e.preventDefault();
+ console.log("testing");
+
+ if(playlistTitleValid){
+
+ const playlistTitle = playlistTitleInput.value;
+
+ const data = new FormData();
+ data.append("playlistTitle", playlistTitle);
+
+ const xhr = new XMLHttpRequest();
+
+ xhr.open("POST", "/public/library", true);
+
+ xhr.onload = function () {
+ if (xhr.readyState === XMLHttpRequest.DONE) {
+ if (xhr.status === 201) {
+ toggle();
+ location.reload();
+ }else{ //status code 200
+ toggle();
+ alert("Ada yang aneh");
+ }
+ }
+ }
+ xhr.send(data);
+
+ }
+ })
+
+ if(deletePlaylistEl.length !== 0){
+ deletePlaylistEl.forEach(function(trash){
+ trash.addEventListener("click", (e) => {
+ e.preventDefault();
+ const idPlaylist = trash.dataset.id;
+
+ const xhr = new XMLHttpRequest();
+
+ xhr.open("DELETE", `/public/library?playlist_id=${idPlaylist}`, true);
+
+ xhr.send(null);
+
+ xhr.onload = function () {
+ if (xhr.readyState === XMLHttpRequest.DONE) {
+ if (xhr.status === 201) {
+ // showSuccessToast("Playlist berhasil dihapus dari library!");
+ setTimeout(function(){
+ location.reload();
+ }, 500);
+ }else{ //status code 200
+ // showErrorToast("Playlist gagal dihapus dari library!");
+ console.log("ahai");
+ }
+ }
+ }
+ })
+ })
+ }
+
+
+
+ });
+
diff --git a/src/public/styles/library/library.css b/src/public/styles/library/library.css
index d641f13e1b8517df931668ee3b2d9b989c65ca30..ef37d80b8dd43b0978a40c768f47cceeb339d121 100644
--- a/src/public/styles/library/library.css
+++ b/src/public/styles/library/library.css
@@ -58,6 +58,94 @@ navbar {
text-overflow: ellipsis;
}
+.wrapper {
+ visibility: hidden;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ /* z-index: 999; To ensure it covers the playlist section */
+ background: var(--GRAY-600);
+ color: var(--WHITE);
+ padding: 30px;
+ border-radius: 10px;
+}
+
+.wrapper h2{
+ font-size: 28px;
+ text-align: center;
+ text-transform: none;
+}
+
+.wrapper .input-box{
+ position: relative;
+ width: 100%;
+ height: 40px;
+ margin: 40px 0;
+}
+
+.input-box input{
+ width: 100%;
+ height: 100%;
+ background: var(--GRAY-500);
+ border: none;
+ outline: none;
+ border: 2px solid rgba(255, 255, 255, .4);
+ border-radius: 40px;
+ font-size: 16px;
+ color: var(--WHITE);
+ padding: 20px 45px 20px 20px;
+}
+
+
+.input-box input::placeholder{
+ color: var(--WHITE);
+}
+
+
+.new-playlist-btn{
+ margin-top: 30px;
+ margin-left: 30px;
+ width: 200px;
+ height: 45px;
+ background: rgba(206, 4, 161, 0.79);
+ border: none;
+ outline: none;
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, .1);
+ cursor: pointer;
+ font-size: 16px;
+ color: var(--WHITE);
+ font-weight: 600;
+ text-align: center;
+}
+
+.wrapper .btn{
+ width: 100%;
+ height: 45px;
+ background: rgba(206, 4, 161, 0.79);
+ border: none;
+ outline: none;
+ border-radius: 40px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, .1);
+ cursor: pointer;
+ font-size: 16px;
+ color: var(--WHITE);
+ font-weight: 600;
+ text-align: center;
+}
+
+.bx-trash{
+ display: flex;
+ align-self: center;
+ color: red;
+ font-size: 20px;
+ margin-top: -15px;
+ cursor: pointer;
+ border: 0.5px solid red;
+ padding: 2px;
+ border-radius: 5px;
+}
@media (min-width: 768px) {
.user-playlist {
@@ -94,4 +182,13 @@ navbar {
}
}
+#popup.active{
+ visibility: visible;
+ transition: 0.5s;
+}
+#blur.active{
+ filter: blur(20px);
+ pointer-events: none;
+ user-select: none;
+}
\ No newline at end of file