Merge pull request #84 from th3r00t/0.8.0--dev-table_refactor

Finished Pagination

src/backend/lib/storage.py

@@ -251,13 +251,15 @@ class Storage:
                     .join(BookCollection)
                     .where(BookCollection.collection_id == collection)
                     .offset(skip or 0)
-                    .limit(limit or 100)
+                    # .limit(limit or 100)
+                    .limit(limit)
                 ).scalars().all()
             else:
                 result = session.execute(
                     select(Book)
                     .offset(skip or 0)
-                    .limit(limit or 100)
+                    # .limit(limit or 100)
+                    .limit(limit)
                 ).scalars().all()
         return result
 

src/frontend/lib/FastAPIServer.py

@@ -3,6 +3,7 @@ import uvicorn
 import os
 import sass
 import datetime
+import math
 # import gzip
 # import brotli
 from json import dumps
@@ -176,7 +177,15 @@ class FastAPIServer():
         books = storage.get_books(collection=None, skip=skip_num, limit=limit)
         collections = storage.get_collections()
         """Home page responder."""
-        context = {"request": request, "books": books, "collections": collections, "page": skip, "limit": limit}
+        total_books = len(storage.get_books())
+        context = {
+            "request": request,
+            "total_pages": math.ceil(total_books / limit),
+            "books": books,
+            "collections": collections,
+            "page": skip,
+            "limit": limit
+        }
         return templates.TemplateResponse("index.html", context)
 
     @app.get("/api/books", response_class=JSONResponse)
@@ -222,12 +231,14 @@ class FastAPIServer():
         else:
             skip_num = skip * limit
         books = storage.get_books(collection, skip=skip_num, limit=limit)
+        total_books = len(storage.get_books(collection))
         collections = storage.get_collections()
         context = {
             "request": request,
             "books": books,
             "collections": collections,
             "collection": collection,
+            "total_pages": math.ceil(total_books / limit),
             "page": skip,
             "limit": limit
         }

src/frontend/static/styles/pyShelf.sass

@@ -108,8 +108,45 @@ $footer-background-color: $ps-color-primary-trans !important
   align-content: center;
   background-color: $ps-color-background;
 
+#collection_dropdown
+  margin-top: auto;
+  margin-bottom: auto;
+
 .footer
   display: flex;
   padding: 1rem !important;
 
+
+#pagination-container
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.5rem;
+
+#pagination-left, #pagination-right
+  background-color: $ps-color-secondary;
+
+#pagination-left
+  display: flex;
+  justify-content: flex-start;
+
+#pagination-center
+  display: flex;
+  justify-content: center;
+  flex: 1;
+
+#pagination-right
+  display: flex;
+  justify-content: flex-end;
+
 @import "../../node_modules/bulma/bulma.scss"
+
+.container-full
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;

src/frontend/templates/collection.html

@@ -27,7 +27,7 @@
 			<div class="is-dark book" id="{{book.id}}" onclick="window.location.href='/api/get_book/{{ book.id }}'">
 				<div class="image book-thumbnail"
 						 style="
-										background-image: url("{{ url_for('static', path='images/no-cover.jpg') }}");
+										background-image: url({{ url_for('static', path='images/no-cover.jpg') }});
 										background-size: cover;
 										background-position: center;
 										background-repeat: no-repeat;
@@ -42,11 +42,16 @@
 			{% endif %}
 			{% endfor %}
 		</div>
-		<div id="pagination" class="container is-dark">
+		<div id="pagination-container" class="container-full is-dark">
-			<nav class="pagination is-centered" role="navigation" aria-label="pagination">
+			<div id="pagination-left">
-				<a class="pagination-previous" href="/api/collection/{{collection}}?skip={{ page|int - 1 }}" id="prev-page">Previous</a>
+				<a class="pagination-previous" href="/api/collection/{{ collection }}/?skip={{ page-1 }}" id="prev-page">< Previous</a>
-				<a class="pagination-next" href="/api/collection/{{collection}}?skip={{ page|int + 1 }}" id="next-page">Next</a>
+			</div>
-			</nav>
+			<div id="pagination-center">
+				<span id="pagination-list">page {{ page }} of {{ total_pages }}</span>
+			</div>
+			<div id="pagination-right">
+				<a class="pagination-next" href="/api/collection/{{ collection }}/?skip={{ page+1 }}" id="next-page">Next ></a>
+			</div>
 		</div>
 	</section>
 	{% include 'footer.html' %}

src/frontend/templates/footer.html

@@ -1,18 +1,18 @@
-<footer class="footer is-dark" id="footer-main">
+<!-- <footer class="footer is-dark" id="footer-main"> -->
-	<a href="https://python.org">
+	<!-- <a href="https://python.org"> -->
-		<img
+	<!-- 	<img -->
-				src="{{ url_for('static', path='images/python-logo-transparent.svg') }}"
+	<!-- 			src="{{ url_for('static', path='images/python-logo-transparent.svg') }}" -->
-				alt="Powered by Python"
+	<!-- 			alt="Powered by Python" -->
-				width="128"
+	<!-- 			width="128" -->
-				height="24">
+	<!-- 			height="24"> -->
-	</a>
+	<!-- </a> -->
-	<a href="https://bulma.io">
+	<!-- <a href="https://bulma.io"> -->
-		<img
+	<!-- 	<img -->
-				src="https://bulma.io/assets/images/made-with-bulma--dark.png"
+	<!-- 			src="https://bulma.io/assets/images/made-with-bulma--dark.png" -->
-				alt="Made with Bulma"
+	<!-- 			alt="Made with Bulma" -->
-				width="128"
+	<!-- 			width="128" -->
-				height="24">
+	<!-- 			height="24"> -->
-	</a>
+	<!-- </a> -->
-</footer>
+<!-- </footer> -->
 </body>
 </html>

src/frontend/templates/index.html

@@ -26,7 +26,7 @@
 			<div class="is-dark book" id="{{book.id}}" onclick="window.location.href='/api/get_book/{{ book.id }}'">
 				<div class="image book-thumbnail"
 						 style="
-										background-image: url("{{ url_for('static', path='images/no-cover.jpg') }}");
+										background-image: url({{ url_for('static', path='images/no-cover.jpg') }});
 										background-size: cover;
 										background-position: center;
 										background-repeat: no-repeat;
@@ -41,11 +41,16 @@
 			{% endif %}
 			{% endfor %}
 		</div>
-		<div id="pagination" class="container is-dark">
+		<div id="pagination-container" class="container-full is-dark">
-			<nav class="pagination is-centered" role="navigation" aria-label="pagination">
+			<div id="pagination-left">
-				<a class="pagination-previous" href="/?skip={{ page-1 }}" id="prev-page">Previous</a>
+				<a class="pagination-previous" href="/?skip={{ page-1 }}" id="prev-page">< Previous</a>
-				<a class="pagination-next" href="/?skip={{ page+1 }}" id="next-page">Next</a>
+			</div>
-			</nav>
+			<div id="pagination-center">
+				<span id="pagination-list">page {{ page }} of {{ total_pages }}</span>
+			</div>
+			<div id="pagination-right">
+				<a class="pagination-next" href="/?skip={{ page+1 }}" id="next-page">Next ></a>
+			</div>
 		</div>
 	</section>
 	{% include 'footer.html' %}

src/frontend/templates/navigation.html

@@ -49,6 +49,10 @@
       <div class="select is-small is-rounded is-link" id="collection_dropdown">
 				<!-- <select id="collection_select" onchange="window.location.href='/api/collection/' + this.value"> -->
 				<select id="collection_select">
+					<option value="" disabled selected>Select a collection</option>
+					{% if collections is not defined or collections|length == 0 %}
+						<option value="" disabled>No collections available</option>
+					{% endif %}
           {% for collection in collections %}
 						<option	value="{{collection.id}}" class="collection_selection">{{collection.name}}</option>
           {% endfor %}