Category feature

public/index.html

@@ -13,9 +13,9 @@
 
 <div id="container">
   <header id="home-header">
-    <div class="home-header-center left-side">
+    <div class="home-header-center left-side" style="display: flex; align-items: center; gap: 8px;">
       <img class="logo" src="/media/icons/logo.svg" alt="logo">
-      <h1>myLibrary</h1>
+      <h1 style="font-size: 42px;">myLibrary</h1>
     </div>
   </header>
   <main>
@@ -80,8 +80,8 @@ <h2>Register an account</h2>
 
   </main>
   <footer>
-    <p>Copyright © 2025 melovii</p>
-    <a href="https://github.com/melovii" target="blank">
+    <p>Copyright © 2025 melovii & veryvroosh</p>
+    <a href="https://github.com/myLibrary" target="blank">
       <img class="github" src="media/icons/github.png" aria-hidden="true" alt="github logo"></img>
     </a>
   </footer>

public/js/Book.js

@@ -1,11 +1,12 @@
 // Book class definition
 export class Book {
-    constructor(title, author, pages, isRead, book_id) {
+    constructor(title, author, pages, isRead, book_id, category) {
         this.title = title;
         this.author = author;
         this.pages = pages;
         this.isRead = Boolean(isRead);
         this.id = String(book_id); // Ensure ID is always stored as string
+        this.category = category;
     }
 
     toggleReadStatus() {

public/js/Library.js

@@ -8,22 +8,41 @@ export class Library {
 
     // Fetch all books from the database
     async loadFromDB() {
-        const response = await fetch('/books');
-        const data = await response.json();
-        data.forEach(bookOBJ => {
-            const newBook = new Book(
-                bookOBJ.title,
-                bookOBJ.author,
-                bookOBJ.pages,
-                bookOBJ.is_read,
-                bookOBJ.book_id
-            );
-            this.books.push(newBook);
-            this.addCard(newBook.title, newBook.author, newBook.pages, { checked: newBook.isRead }, newBook);
-        });
-        console.log('Books loaded from database:', this.books);
+        try {
+            const response = await fetch('/books');
+            if (!response.ok) {
+                console.error('Failed to load books: Not logged in or server error');
+                return;
+            }
+
+            const data = await response.json();
+            data.forEach(bookOBJ => {
+                const newBook = new Book(
+                    bookOBJ.title,
+                    bookOBJ.author,
+                    bookOBJ.pages,
+                    bookOBJ.is_read,
+                    bookOBJ.book_id,
+                    bookOBJ.category_name
+                );
+                this.books.push(newBook);
+                this.addCard(
+                    newBook.title,
+                    newBook.author,
+                    newBook.pages,
+                    { checked: newBook.isRead },
+                    newBook
+                );
+            });
+
+            console.log('Books loaded from database:', this.books);
+            this.toggleEmptyLibraryMessage();
+        } catch (error) {
+            console.error('Error loading books from DB:', error);
+        }
     }
 
+
     // Fetch and display all books from the database for debugging
     async displayBooksFromDB() {
         const response = await fetch('/books');
@@ -36,8 +55,8 @@ export class Library {
     }
 
     // Add a new book to the database
-    async addBook(title, author, pages, isRead, userId) {
-        const newBook = new Book(title.trim(), author.trim(), pages.trim(), isRead.checked);
+    async addBook(title, author, pages, isRead, categoryName) {
+        const newBook = new Book(title.trim(), author.trim(), pages.trim(), isRead, null, categoryName);
 
 		// TODO: CHANGE USER_ID LATER :SOB:
         const response = await fetch('/addBook', {
@@ -48,8 +67,7 @@ export class Library {
                 author: newBook.author,
                 pages: newBook.pages,
                 isRead: newBook.isRead,
-				userId: userId // Pass userId to the server (Replace with actual user ID later on)
-
+                categoryName: categoryName // send the name instead of number
             })
         });
 
@@ -59,6 +77,7 @@ export class Library {
 
             this.books.push(newBook);
             this.addCard(newBook.title, newBook.author, newBook.pages, isRead, newBook);
+            this.toggleEmptyLibraryMessage();
         } else {
             console.error('Error adding book');
         }
@@ -82,6 +101,7 @@ export class Library {
                 this.books.splice(index, 1);
             }
             cardDIV.remove();
+            this.toggleEmptyLibraryMessage();
             library.displayBooksFromDB(); // ! could be this. instead !
         } else {
             console.error('Error removing book');
@@ -149,6 +169,27 @@ export class Library {
         authorPara.classList.add('author');
         authorPara.textContent = author;
 
+        const categoryPara = document.createElement('p');
+        categoryPara.classList.add('category');
+
+        // Emoji mapping
+        const emojiMap = {
+            "Biography": "🧑‍🏫",
+            "Educational": "📘",
+            "Fantasy": "🧙",
+            "Fiction": "📖",
+            "Horror": "👻",
+            "Mystery": "🕵️",
+            "Religious": "🙏",
+            "Romance": "💖",
+            "Sci-Fi": "🚀",
+            "Self-Improvement": "💡",
+            "Other": "📚"
+        };
+
+        const emoji = emojiMap[newBook.category] || "📚";
+        categoryPara.textContent = `${emoji} ${newBook.category}`;
+
         const pagesPara = document.createElement('p');
         pagesPara.classList.add('pages');
         pagesPara.textContent = `${pages} pages`;
@@ -170,7 +211,7 @@ export class Library {
         });
 
         this.emptyInput();
-        cardDIV.append(titlePara, authorPara, pagesPara, isReadButton, removeButton);
+        cardDIV.append(titlePara, authorPara, categoryPara, pagesPara, isReadButton, removeButton);
         main.appendChild(cardDIV);
     }
 
@@ -181,4 +222,15 @@ export class Library {
         document.getElementById('pages').value = '';
         document.getElementById('read-check').checked = false;
     }
+
+    toggleEmptyLibraryMessage() {
+        const emptyMessage = document.getElementById('empty-library-message');
+        const cards = document.querySelectorAll('.card');
+        if (cards.length === 0) {
+            emptyMessage.style.display = 'block';
+        } else {
+            emptyMessage.style.display = 'none';
+        }
+    }
+
 }

public/js/auth.js

@@ -193,4 +193,8 @@ loginForm.addEventListener('submit', async (e) => {
   }
 });
 
+// document.getElementById('logout').addEventListener('click', () => {
+//   window.location.href = '/logout';
+// });
+
 

public/js/formHandlers.js

@@ -7,6 +7,19 @@ export function setupFormHandlers(library) {
     const titleInput = document.getElementById('title');
     const authorInput = document.getElementById('author');
     const pagesInput = document.getElementById('pages');
+    const categorySelect = document.getElementById('category');
+    const categoryError = document.getElementById('category-error');
+    const isRead = document.getElementById('read-check');
+
+    function resetForm() {
+        form.reset();
+        categorySelect.selectedIndex = 0;
+        categoryError.textContent = '';
+        titleInput.classList.remove('error');
+        authorInput.classList.remove('error');
+        pagesInput.classList.remove('error');
+        categorySelect.classList.remove('error');
+    }
 
     popupButton.addEventListener('click', () => {
         document.querySelector('.popup').classList.add('active');
@@ -18,25 +31,42 @@ export function setupFormHandlers(library) {
         document.querySelector('.popup').classList.remove('active');
         document.querySelector('.center').classList.remove('active');
         document.body.classList.remove('no-scroll');
+        resetForm(); // 🔁 Reset form on close
     });
 
     submitBook.addEventListener('click', (event) => {
         event.preventDefault();
-        if (!form.checkValidity()) {
-            event.stopPropagation();
+
+        // Reset previous errors
+        categoryError.textContent = '';
+        categorySelect.classList.remove('error');
+
+        let valid = form.checkValidity();
+
+        // Additional check for category
+        if (!categorySelect.value) {
+            valid = false;
+            categoryError.textContent = 'Please select a category.';
+            categorySelect.classList.add('error');
+        }
+
+        if (!valid) {
             form.reportValidity();
-        } else {
-            const title = titleInput.value;
-            const author = authorInput.value;
-            const pages = pagesInput.value;
-            const isRead = document.getElementById('read-check');
-
-			// TODO: CHANGE IT LATER :SOB:
-			const userId = 1; // Assuming userId is 1 for now, you can change this as needed
-            library.addBook(title, author, pages, isRead, userId);
-            document.querySelector('.popup').classList.remove('active');
-            document.querySelector('.center').classList.remove('active');
-            document.body.classList.remove('no-scroll');
+            return;
         }
+
+        const title = titleInput.value;
+        const author = authorInput.value;
+        const pages = pagesInput.value;
+        const category = categorySelect.value;
+
+        // Pass category to library method too (update your `addBook()` if needed)
+        library.addBook(title, author, pages, isRead.checked, category);
+
+        // Close popup and reset form
+        document.querySelector('.popup').classList.remove('active');
+        document.querySelector('.center').classList.remove('active');
+        document.body.classList.remove('no-scroll');
+        resetForm();
     });
 }