dodano book.html

src/main.rs

@@ -106,7 +106,7 @@ async fn get_ksiazka(
             autor,
             cena,
             COALESCE('/images/' || obraz_url, '/images/placeholder.jpg') as obraz_url,
-            opis
+            COALESCE(opis, 'Brak opisu') as opis
         FROM ksiazki 
         WHERE id = $1
         "#,
@@ -116,8 +116,11 @@ async fn get_ksiazka(
     .await
     {
         Ok(Some(book)) => HttpResponse::Ok().json(book),
-        Ok(None) => HttpResponse::NotFound().finish(),
-        Err(e) => HttpResponse::InternalServerError().body(format!("Błąd: {}", e)),
+        Ok(None) => HttpResponse::NotFound().json(json!({"error": "Książka nie znaleziona"})),
+        Err(e) => {
+            log::error!("Błąd bazy danych: {}", e);
+            HttpResponse::InternalServerError().json(json!({"error": "Błąd serwera"}))
+        }
     }
 }
 
@@ -162,6 +165,7 @@ async fn main() -> std::io::Result<()> {
             .wrap(cors)
             .wrap(actix_web::middleware::Logger::default())
             .service(get_ksiazki)
+            .service(get_ksiazka)
             .service(auth::rejestracja)
             .service(auth::login)
             .service(

static/book.html

@@ -78,6 +78,8 @@
         </div>
     </footer>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="/js/main.js"></script>
     <script src="/js/book.js"></script>
 </body>
 </html>

static/css/styles.css

@@ -66,31 +66,50 @@ footer {
 }
 
 #books-container {
-    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    gap: 1rem;
+    padding: 1rem;
 }
 
 .book-card {
-    max-width: none;
-    width: 100%;
-}
-
-.book-cover {
-    height: 360px;
+    aspect-ratio: 5/8;
+    position: relative;
+    transition: transform 0.3s;
 }
 
 .book-cover img {
-    object-fit: contain;
-    padding: 15px;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 5px;
+}
+
+.book-cover {
+    height: 100%;
+    width: 100%;
+    border-radius: 2px;
+    overflow: hidden;
+}
+
+.book-card:hover {
+    transform: scale(1.05);
+    z-index: 1;
 }
 
 .book-overlay {
-    background: linear-gradient(0deg, rgba(7,44,36,0.9) 0%, rgba(7,44,36,0.7) 100%);
-    padding: 20px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 1rem;
+    background: linear-gradient(0deg, rgba(7,44,36,0.9) 0%, rgba(0,0,0,0) 100%);
 }
 
 .book-title {
-    font-size: 1.2rem;
-    line-height: 1.4;
+    font-size: 1rem;
+    margin: 0;
+    color: #E3CB9A;
 }
 
 .book-cover:hover .book-overlay {

static/index.html

@@ -76,6 +76,7 @@
         </div>
     </footer>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script src="/js/main.js"></script>
 </body>
 </html>

static/js/book.js

@@ -1,23 +1,36 @@
 document.addEventListener('DOMContentLoaded', async () => {
     const urlParams = new URLSearchParams(window.location.search);
     const bookId = urlParams.get('id');
+    const bookDetails = document.getElementById('book-details');
+
+    if (!bookId) {
+        bookDetails.innerHTML = `
+            <div class="col-12 text-center py-5">
+                <h2 class="text-danger">Nieprawidłowe ID książki</h2>
+                <a href="/" class="btn btn-gothic mt-3">Powrót do strony głównej</a>
+            </div>
+        `;
+        return;
+    }
 
     try {
         const response = await fetch(`/api/ksiazki/${bookId}`);
-        if (!response.ok) throw new Error('Książka nie znaleziona');
-        
+        if (!response.ok) {
+            throw new Error(`Status: ${response.status}`);
+        }
         const book = await response.json();
         
         document.getElementById('book-title').textContent = book.tytul;
         document.getElementById('book-author').textContent = `Autor: ${book.autor}`;
         document.getElementById('book-price').textContent = `Cena: ${book.cena} PLN`;
-        document.getElementById('book-description').textContent = book.opis || 'Brak opisu';
-        document.getElementById('book-cover').src = book.obraz_url || 'https://via.placeholder.com/400x600';
+        document.getElementById('book-description').textContent = book.opis;
+        document.getElementById('book-cover').src = book.obraz_url;
     } catch (error) {
         console.error('Błąd:', error);
-        document.getElementById('book-details').innerHTML = `
-            <div class="col-12 text-center">
-                <h2 class="text-danger">Książka nie znaleziona</h2>
+        bookDetails.innerHTML = `
+            <div class="col-12 text-center py-5">
+                <h2 class="text-danger">Błąd ładowania książki</h2>
+                <p>${error.message}</p>
                 <a href="/" class="btn btn-gothic mt-3">Powrót do strony głównej</a>
             </div>
         `;