From 1adf10c5086eed0bc9a4e09ee6971ad2bc416fe3 Mon Sep 17 00:00:00 2001
From: 135 Gitlab <alilo.ghazali@gmail.com>
Date: Mon, 9 Oct 2023 13:54:55 +0700
Subject: [PATCH] fix sort and fitler, pagination still error
---
src/web/controller/albumController.php | 2 +-
src/web/controller/musicController.php | 2 +-
src/web/presentation/home/home.php | 2 +-
src/web/presentation/home/home.view.php | 4 +-
src/web/presentation/music/list/albumList.php | 3 +-
.../music/list/albumList.view.php | 3 +-
.../presentation/music/list/css/albumList.css | 2 +-
.../presentation/music/list/css/musicList.css | 3 +-
.../presentation/music/list/js/albumList.js | 90 +++----------------
.../presentation/music/list/js/musicList.js | 88 +++---------------
.../music/list/musicList.view.php | 6 +-
.../presentation/template/sidebar.view.php | 2 +-
src/web/util/album-finder.php | 40 ++-------
13 files changed, 47 insertions(+), 200 deletions(-)
diff --git a/src/web/controller/albumController.php b/src/web/controller/albumController.php
index 5ba3bfa..fec8d53 100644
--- a/src/web/controller/albumController.php
+++ b/src/web/controller/albumController.php
@@ -42,7 +42,7 @@ try {
exit;
}
- $query = 'SELECT * FROM album INNER JOIN account ON album.owner_account_id = account.account_id WHERE (album.name LIKE :searchQuery OR account.username LIKE :searchQuery) '.$creatorCondition.' ORDER BY '.$sortBy.' '.$order;
+ $query = 'SELECT *, account.username as username FROM album INNER JOIN account ON album.owner_account_id = account.account_id WHERE (album.name LIKE :searchQuery OR account.username LIKE :searchQuery) '.$creatorCondition.' ORDER BY '.$sortBy.' '.$order;
$params = [
'searchQuery' => '%'.$searchQuery.'%',
diff --git a/src/web/controller/musicController.php b/src/web/controller/musicController.php
index e5d5993..f0ea665 100644
--- a/src/web/controller/musicController.php
+++ b/src/web/controller/musicController.php
@@ -44,7 +44,7 @@ try {
exit;
}
- $query = 'SELECT * FROM music WHERE (title LIKE :searchQuery OR genre LIKE :searchQuery) '.$genreCondition.' '.$creatorCondition.' ORDER BY '.$sortBy.' '.$order;
+ $query = 'SELECT *, username FROM music INNER JOIN account ON music.owner_account_id = account.account_id WHERE (music.title LIKE :searchQuery OR music.genre LIKE :searchQuery) '.$genreCondition.' '.$creatorCondition.' ORDER BY '.$sortBy.' '.$order;
$params = [
'searchQuery' => '%'.$searchQuery.'%',
diff --git a/src/web/presentation/home/home.php b/src/web/presentation/home/home.php
index db2c294..fb2bd98 100644
--- a/src/web/presentation/home/home.php
+++ b/src/web/presentation/home/home.php
@@ -15,6 +15,6 @@ if(!isset($_COOKIE['token'])) {
//Get id
$accountId = authenticateToken($_COOKIE['token']);
// Get random songs
-$eightalbums = execSelect('SELECT * FROM album ORDER BY RANDOM() LIMIT 8', []);
+$shownalbums = execSelect('SELECT * FROM album ORDER BY RANDOM() LIMIT 6', []);
require 'presentation/home/home.view.php';
\ No newline at end of file
diff --git a/src/web/presentation/home/home.view.php b/src/web/presentation/home/home.view.php
index ea3de69..71a1fe5 100644
--- a/src/web/presentation/home/home.view.php
+++ b/src/web/presentation/home/home.view.php
@@ -22,11 +22,11 @@
<?php include('presentation/template/navbar.php') ?>
<section class="container-album">
<div class="category">
- <?php if(isset($eightalbums[0])) {?>
+ <?php if(isset($shownalbums[0])) {?>
<h2>Albums for you</h2>
<div class="album-wrapper">
<?php
- foreach ($eightalbums as $row) { ?>
+ foreach ($shownalbums as $row) { ?>
<div id="<?php echo $row['album_id'] ?>" class="album">
<img src="presentation/music/info/img/defalbum.jpg" alt="Playlist 1">
<h3><?php echo $row['name'] ?></h3>
diff --git a/src/web/presentation/music/list/albumList.php b/src/web/presentation/music/list/albumList.php
index aa1b1e8..f51881a 100644
--- a/src/web/presentation/music/list/albumList.php
+++ b/src/web/presentation/music/list/albumList.php
@@ -2,7 +2,7 @@
require_once 'db/db-executor.php';
require_once 'auth/authenticator.php';
-require_once 'util/album-finder.php';
+require_once 'auth/authorizer.php';
$errMsg = '';
@@ -15,7 +15,6 @@ if(!isset($_COOKIE['token'])) {
//Get id of account to verify user
$accountId = authenticateToken($_COOKIE['token']);
-
$allCreators = execSelect('SELECT DISTINCT username, account_id FROM account WHERE is_admin = CAST(1 AS SMALLINT)', []);
diff --git a/src/web/presentation/music/list/albumList.view.php b/src/web/presentation/music/list/albumList.view.php
index 23d7656..18317a5 100644
--- a/src/web/presentation/music/list/albumList.view.php
+++ b/src/web/presentation/music/list/albumList.view.php
@@ -59,7 +59,8 @@
<div class="album" id="<?php echo $row['album_id']?>" >
<img src="<? echo getAlbumImageByID($row['album_id']) ?>" alt="Album Cover">
<h3><? echo $row['name'] ?></h3>
- <p><? echo $row['year'] ?></p>
+ <p>By : <? echo getAlbumCreator($row['album_id']) ?></p>
+ <p>Released : <? echo $row['year'] ?></p>
<p>ID : <? echo $row['album_id'] ?></p>
</div>
<?php } ?>
diff --git a/src/web/presentation/music/list/css/albumList.css b/src/web/presentation/music/list/css/albumList.css
index b7cb590..ead13e6 100644
--- a/src/web/presentation/music/list/css/albumList.css
+++ b/src/web/presentation/music/list/css/albumList.css
@@ -59,7 +59,7 @@
.album p {
margin-top: 5px;
- margin-bottom: 22px;
+ margin-bottom: 5px;
}
.no-result {
diff --git a/src/web/presentation/music/list/css/musicList.css b/src/web/presentation/music/list/css/musicList.css
index c93fa77..392b98e 100644
--- a/src/web/presentation/music/list/css/musicList.css
+++ b/src/web/presentation/music/list/css/musicList.css
@@ -43,6 +43,7 @@
justify-content: space-evenly;
background-color: rgb(206, 206, 206);
border-radius: 5px;
+ cursor: pointer;
}
.music img {
@@ -58,7 +59,7 @@
.music p {
margin-top: 5px;
- margin-bottom: 22px;
+ margin-bottom: 5px;
}
.search {
diff --git a/src/web/presentation/music/list/js/albumList.js b/src/web/presentation/music/list/js/albumList.js
index 44ed477..e3c795f 100644
--- a/src/web/presentation/music/list/js/albumList.js
+++ b/src/web/presentation/music/list/js/albumList.js
@@ -1,17 +1,13 @@
const searchInput = document.querySelector(".input-search");
-
const prevButton = document.querySelector("#previous");
const nextButton = document.querySelector("#next");
const buttonSearch = document.querySelector(".search");
const pageNumber = document.querySelector("#page-number");
const pagesCount = document.querySelector("#pages");
-
const pageText = document.querySelector("#pagination-text");
-const songsResult = document.querySelector(".album-wrapper");
+const albumResult = document.querySelector(".album-wrapper");
const pagination = document.querySelector(".pagination");
-
const albums = document.querySelectorAll(".album");
-
const sortInput = document.querySelector(".sort-select");
const orderInput = document.querySelector(".order-select");
const creatorInput = document.querySelector(".creator-select");
@@ -29,53 +25,6 @@ const debounce = (func, delay) => {
let currentPage = 1;
let limit = 6;
-
-
-prevButton &&
- prevButton.addEventListener("click", async () => {
- if (currentPage === 1) {
- return;
- }
- currentPage -= 1;
- const xhr = new XMLHttpRequest();
- xhr.open(
- "GET",
- `/public/song/fetch/${currentPage}?csrf_token=${CSRF_TOKEN}&q=${searchInput.value}&filter=${filterInput.value}&sort=${sortInput.value}`
- );
-
- xhr.send();
-
- xhr.onreadystatechange = function () {
- if (this.readyState === XMLHttpRequest.DONE) {
- data = JSON.parse(this.responseText);
- updateData(data);
- }
- };
- });
-
-
-nextButton &&
- nextButton.addEventListener("click", async () => {
- if (currentPage === PAGES) {
- return;
- }
- currentPage += 1;
- const xhr = new XMLHttpRequest();
- xhr.open(
- "GET",
- `/public/song/fetch/${currentPage}?csrf_token=${CSRF_TOKEN}&q=${searchInput.value}&filter=${filterInput.value}&sort=${sortInput.value}`
- );
-
- xhr.send();
-
- xhr.onreadystatechange = function () {
- if (this.readyState === XMLHttpRequest.DONE) {
- data = JSON.parse(this.responseText);
- updateData(data);
- }
- };
- });
-
searchInput &&
searchInput.addEventListener("keyup",
debounce(
@@ -141,12 +90,23 @@ const updateData = (data) => {
<div class="album" id="${album.album_id}" >
<img src="presentation/music/info/img/defalbum.jpg" alt="Playlist 1">
<h3>${album.name}</h3>
- <p>${album.year}</p>
+ <p>By : ${album.username}</p>
+ <p>Released : ${album.year}</p>
<p>ID : ${album.album_id}</p>
</div>
`;
});
- songsResult.innerHTML = newHTML;
+ albumResult.innerHTML = newHTML;
+ albumResult.addEventListener("click", function (e) {
+ const clickedElement = e.target;
+ const albumElement = clickedElement.closest(".album");
+ if (albumElement) {
+ const albumId = albumElement.id;
+ // Redirect
+ window.location.href = `/album?id=${albumId}`;
+ }
+ });
+
pageNumber.innerHTML = currentPage;
if (currentPage == 1) {
prevButton.disabled = true;
@@ -161,32 +121,10 @@ const updateData = (data) => {
}
};
-const newData = (data) => {
- pages = data.pages;
- let newHTML = "";
- if (pages === 0) {
- newHTML += `
- <p class="no-result">
- No album found!
- </p>
- `;
- songsResult.innerHTML = newHTML;
- pageText.innerHTML = `Page <span id="page-number">0</span> out of <span id="pages">0</span> pages`;
- prevButton.disabled = true;
- nextButton.disabled = true;
- pagination.style.display = "none";
- } else {
- pagination.style.display = "block";
- currentPage = 1;
- pageText.innerHTML = `Page <span id="page-number">1</span> out of <span id="pages">${pages}</span> pages`;
- updateData(data);
- }
-};
albums.forEach((album) => {
album.addEventListener("click", async (e) => {
e.preventDefault();
- console.log(album.id);
// Redirect to album page
window.location.href = `/album?id=${album.id}`;
diff --git a/src/web/presentation/music/list/js/musicList.js b/src/web/presentation/music/list/js/musicList.js
index 726fe76..c8f366a 100644
--- a/src/web/presentation/music/list/js/musicList.js
+++ b/src/web/presentation/music/list/js/musicList.js
@@ -1,25 +1,15 @@
const searchInput = document.querySelector(".input-search");
-// const filterInput = document.querySelector("#filter");
-// const sortInput = document.querySelector("#sort");
-
const prevButton = document.querySelector("#previous");
const nextButton = document.querySelector("#next");
const buttonSearch = document.querySelector(".search");
-const pageNumber = document.querySelector("#page-number");
-
-const pageText = document.querySelector("#pagination-text");
const songsResult = document.querySelector(".music-wrapper");
const pagination = document.querySelector(".pagination");
// Sorting
const sortInput = document.querySelector(".sort-select");
-console.log(sortInput.value);
const orderInput = document.querySelector(".order-select");
-console.log(orderInput.value);
const genreInput = document.querySelector(".genre-select");
-console.log(genreInput.value);
const creatorInput = document.querySelector(".creator-select");
-console.log(creatorInput.value);
const debounce = (func, delay) => {
let timer;
@@ -32,49 +22,6 @@ const debounce = (func, delay) => {
};
let currentPage = 1;
-prevButton &&
- prevButton.addEventListener("click", async () => {
- if (currentPage === 1) {
- return;
- }
- currentPage -= 1;
- const xhr = new XMLHttpRequest();
- xhr.open(
- "GET",
- `/public/song/fetch/${currentPage}?csrf_token=${CSRF_TOKEN}&q=${searchInput.value}&filter=${filterInput.value}&sort=${sortInput.value}`
- );
-
- xhr.send();
-
- xhr.onreadystatechange = function () {
- if (this.readyState === XMLHttpRequest.DONE) {
- data = JSON.parse(this.responseText);
- updateData(data);
- }
- };
- });
-
-nextButton &&
- nextButton.addEventListener("click", async () => {
- if (currentPage === PAGES) {
- return;
- }
- currentPage += 1;
- const xhr = new XMLHttpRequest();
- xhr.open(
- "GET",
- `/public/song/fetch/${currentPage}?csrf_token=${CSRF_TOKEN}&q=${searchInput.value}&filter=${filterInput.value}&sort=${sortInput.value}`
- );
-
- xhr.send();
-
- xhr.onreadystatechange = function () {
- if (this.readyState === XMLHttpRequest.DONE) {
- data = JSON.parse(this.responseText);
- updateData(data);
- }
- };
- });
searchInput &&
searchInput.addEventListener("keyup",
@@ -141,12 +88,23 @@ const updateData = (data) => {
<div class="music" id=${music.album_id} >
<img src="presentation/music/info/img/defalbum.jpg" alt="Playlist 1">
<h3>${music.title}</h3>
- <p>${music.year}dsf</p>
+ <p>By : ${music.username}</p>
+ <p>Released : ${music.year}dsf</p>
<p>ID : ${music.music_id}</p>
</div>
`;
});
songsResult.innerHTML = newHTML;
+ songsResult.addEventListener("click", function (e) {
+ const clickedElement = e.target;
+ const musicElement = clickedElement.closest(".music");
+ if (musicElement) {
+ const musicId = musicElement.id;
+ // Redirect
+ window.location.href = `/music?id=${musicId}`;
+ }
+ });
+
pageNumber.innerHTML = currentPage;
if (currentPage == 1) {
prevButton.disabled = true;
@@ -161,28 +119,6 @@ const updateData = (data) => {
}
};
-const newData = (data) => {
- pages = data.pages;
- let newHTML = "";
- if (pages === 0) {
- newHTML += `
- <p class="no-result">
- Your search did not match any songs in our database!
- </p>
- `;
- songsResult.innerHTML = newHTML;
- pageText.innerHTML = `Page <span id="page-number">0</span> out of 0 pages`;
- prevButton.disabled = true;
- nextButton.disabled = true;
- pagination.style.display = "none";
- } else {
- pagination.style.display = "block";
- currentPage = 1;
- pageText.innerHTML = `Page <span id="page-number">1</span> out of ${data.pages} pages`;
- updateData(data);
- }
-};
-
const albums = document.querySelectorAll(".music");
albums.forEach((album) => {
diff --git a/src/web/presentation/music/list/musicList.view.php b/src/web/presentation/music/list/musicList.view.php
index 5282f4c..31d6f07 100644
--- a/src/web/presentation/music/list/musicList.view.php
+++ b/src/web/presentation/music/list/musicList.view.php
@@ -1,3 +1,4 @@
+<?php require_once 'util/album-finder.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
@@ -25,7 +26,7 @@
<section class="container-music">
<div class="category">
<form class="search" method="GET">
- <input class="input-search" type="text" placeholder="Search title or creator" value="<?php echo (isset($searchInput) ? $searchInput : null)?>">
+ <input class="input-search" type="text" placeholder="Search title or genre" value="<?php echo (isset($searchInput) ? $searchInput : null)?>">
<button class="search-button" type="submit"><img src="presentation\template\images\search.png" alt="Search"></button>
</form>
<!-- Sort -->
@@ -64,7 +65,8 @@
<div class="music" id=<?php echo $row['music_id']?> >
<img src="presentation/music/info/img/defalbum.jpg" alt="Playlist 1">
<h3><?php echo $row['title'] ?></h3>
- <p><?php echo $row['year'] ?></p>
+ <p>By : <? echo getAlbumCreator($row['album_id']) ?></p>
+ <p>Released : <?php echo $row['year'] ?></p>
<p>ID : <?php echo $row['music_id'] ?></p>
</div>
<?php } ?>
diff --git a/src/web/presentation/template/sidebar.view.php b/src/web/presentation/template/sidebar.view.php
index a44a7da..fd64a18 100644
--- a/src/web/presentation/template/sidebar.view.php
+++ b/src/web/presentation/template/sidebar.view.php
@@ -1,7 +1,7 @@
<!-- Sidebar -->
<aside class="sidebar">
<a class="logo" href="/">
- <img src="presentation\template\images\logo.png" alt="Logo">
+ <img src="./presentation/template/images/logo.png" alt="Logo">
</a>
<ul>
<a href="/" <?php if ($currentUrl == "/") { ?>class="currentMenu"<?php } ?>>
diff --git a/src/web/util/album-finder.php b/src/web/util/album-finder.php
index 422d8ae..828ec5b 100644
--- a/src/web/util/album-finder.php
+++ b/src/web/util/album-finder.php
@@ -5,6 +5,11 @@ function getAlbumName(mixed $album_id) {
return $result[0]['name'];
}
+function getAlbumCreator(mixed $album_id) {
+ $result = execSelect("SELECT username FROM account WHERE account_id = (SELECT owner_account_id FROM album WHERE album_id = :id)", ['id' => $album_id]);
+ return $result[0]['username'];
+}
+
function getAlbumImage(): string {
$image = '/presentation/music/edit/img/defalbum.jpg';
@@ -76,38 +81,3 @@ function getAlbumImageByID($id): string {
return $image;
}
-
-function getAlbumImageByID($ID): string {
- $image = '/presentation/music/edit/img/defalbum.jpg';
-
- // get album cover filename from db
- $q_result = execSelect("SELECT album_cover_filename, owner_account_id FROM album WHERE album_id = :id", ['id' => $ID]);
- echo $q_result[0]['album_cover_filename'];
-
- if (count($q_result) != 0) {
- $filename = $q_result[0]['album_cover_filename'];
- $accountId = $q_result[0]['owner_account_id'];
-
- // prepare curl request
- $url = 'object-storage:80/object';
-
- $data = http_build_query(array(
- 'owner' => $accountId, // account id,
- 'fileType' => 'album-cover',
- 'fileName' => $filename
- ));
- $getUrl = $url.'?'.$data;
-
- $curl = curl_init($getUrl);
- curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
- $result = curl_exec($curl);
-
- if (!curl_errno($curl) && curl_getinfo($curl, CURLINFO_HTTP_CODE) == 200) {
- $contentType = curl_getinfo($curl, CURLINFO_CONTENT_TYPE);
- $image = 'data:'.$contentType.';base64,'.base64_encode($result);
- }
- curl_close($curl);
- }
-
- return $image;
-}
--
GitLab