Updated to show collections in navigation.

.pre-commit-config.yaml

@@ -13,7 +13,3 @@ repos:
     rev: v0.4.0
     hooks:
     -   id: autoflake8
--   repo: https://github.com/ambv/black
-    rev: 22.10.0
-    hooks:
-    - id: black

src/frontend/lib/FastAPIServer.py

@@ -101,22 +101,30 @@ def book_tojson(book) -> dumps:
             "publisher": book[0].publisher,
         })
 
+def tojson(obj) -> dumps:
+    return dumps(obj)
 
 def collections_tojson(collection) -> dumps:
     """Convert a collections object to json."""
     _collections = []
+    _collection_id_set = set()
     for _collection in collection:
-        _collections.append({
+        if _collection[0].id in _collection_id_set:
-            "collection_id": _collection[0].collection_id,
+            pass
-            "book_id": _collection[0].book_id,
+        else:
-            "collection": _collection[0].collection,
+            _collection_id_set.add(_collection[0].id)
-        })
+            _collections.append({
+                "collection_id": _collection[0].id,
+                "collection": _collection[0].collection,
+            })
     return dumps(_collections)
 
 
 templates.env.filters["b64decode"] = base64decode
 templates.env.filters["summarize"] = summarize
 templates.env.filters["books_tojson"] = books_tojson
+templates.env.filters["collections_tojson"] = collections_tojson
+templates.env.filters["tojson"] = tojson
 
 
 class FastAPIServer():
@@ -143,13 +151,6 @@ class FastAPIServer():
         with open('src/frontend/static/styles/pyShelf.css', 'w') as _pyShelf:
             _pyShelf.write(_pyShelf_src[0])
 
-        #_bulma_src = sass.compile(
-        #    filename='src/frontend/static/styles/bulma.sass',
-        #    source_map_filename='src/frontend/static/styles/bulma.sass',
-        #    output_style='compressed')
-        #with open('src/frontend/static/styles/bulma.css', 'w') as _bulma:
-        #    _bulma.write(_bulma_src[0])
-
         self.JSInterface.install()
         return True
 
@@ -163,11 +164,12 @@ class FastAPIServer():
     async def index(request: Request, skip: int = 0, limit: int = 10):
         storage = Storage(Config(os.path.abspath(os.getcwd())))
         books = storage.get_books(collection=None, skip=skip, limit=limit)
+        collections = storage.get_collections()
         """Home page responder."""
-        context = {"request": request, "books": books}
+        context = {"request": request, "books": books, "collections": collections}
         return templates.TemplateResponse("index.html", context)
 
-    @app.get("/books", response_class=JSONResponse)
+    @app.get("/api/books", response_class=JSONResponse)
     async def books(request: Request, skip: int = 0, limit: int = 10, collection=None):
         storage = Storage(Config(os.path.abspath(os.getcwd())))
         books = storage.get_books(collection, skip=skip, limit=limit)
@@ -176,14 +178,14 @@ class FastAPIServer():
         return JSONResponse(content=books_tojson(books))
         # return JSONResponse(content=books)
 
-    @app.get("/book/{book_id}", response_class=JSONResponse)
+    @app.get("/api/book/{book_id}", response_class=JSONResponse)
     async def book(request: Request, book_id: int):
         storage = Storage(Config(os.path.abspath(os.getcwd())))
         book = storage.get_book(book_id)
         """Home page responder."""
         return JSONResponse(content=book_tojson(book))
 
-    @app.get("/collections", response_class=JSONResponse)
+    @app.get("/api/collections", response_class=JSONResponse)
     async def collections(request: Request):
         storage = Storage(Config(os.path.abspath(os.getcwd())))
         collections = storage.get_collections()

src/frontend/static/script/pyshelf.ts

@@ -12,15 +12,38 @@ function sizeMaster() {
   var master = $('#master').height(size.height - navbar - footer);
 }
 
-$(document).ready(function() {
+function getParams() {
-  // Get the current URL
   var url = window.location.href;
-  console.log(url);
+  var params = url.split('?')[1];
-  // Get the last part of the URL
+  if (params) {
+    var paramstr = params.split('&');
+    var paramsObj = {};
+    for (var i = 0; i < paramstr.length; i++) {
+      var param = paramstr[i].split('=');
+      paramsObj[param[0]] = param[1];
+    }
+    return paramsObj;
+  }
+  return null;
+}
+
+function localStorePutTest(data) {
+  console.log('localStorePutTest');
+  localStorage.setItem('test', JSON.stringify(data));
+}
+
+function localStoreGetTest() {
+  console.log('localStoreGetTest');
+  console.log(localStorage.getItem('test'));
+}
+
+$(document).ready(function() {
+  console.log(getParams());
   $(".navbar-burger").click(function(){
     $(".navbar-burger").toggleClass("is-active");
     $(".navbar-menu").toggleClass("is-active");
   });
+
   sizeMaster();
   $(window).on('resize', function() {
     sizeMaster();

src/frontend/static/styles/pyShelf.sass

@@ -101,3 +101,25 @@ $footer-padding: 0.5rem 0.5rem
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
+
+#master-container
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+
+#book-shelf
+  display: grid;
+  justify-content: space-evenly;
+  align-items: center;
+  align-content: center;
+  padding: 1rem;
+  margin: 1rem;
+  // background-color: $ps-color-background;
+.collection
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  align-content: center;
+  background-color: $ps-color-background;

src/frontend/templates/index.html

@@ -2,7 +2,7 @@
 {% block javascript %}
 <script type="text/javascript" src=static/script/pako.min.js>
 <script type="text/javascript">
-  var books = {{ books|books_tojson }};
+  const books = {{ books|books_tojson }};
   let inflatedJSON = {};
   const pako = require('pako');
   inflatedJSON = JSON.parse(pako.inflate(books, { to: 'string'}));
@@ -10,26 +10,31 @@
 {% endblock %}
 {% include 'header.html' %}
   {% include 'navigation.html' %}
-<section id="master">
+  <section id="master-container">
-  <div class="container is-dark">
+    <div id="book-shelf" class="container is-dark">
-    {% for book in books %}
+      {% for book in books %}
-	{% set cover = book[0].cover|b64decode %}
+      {% set cover = book[0].cover|b64decode %}
-	{% if cover != 'None' %}
+      {% if cover != 'None' %}
-	    <div class="box is-dark book" id="{{book[0].id}}">
+      <div class="is-dark book" id="{{book[0].id}}">
-	    <div class="image book-thumbnail">
+        <div class="image book-thumbnail">
-		<figure class="image is-4by3">
+          <figure class="image is-4by3">
-		<img src="data:;base64,{{ book[0].cover|b64decode }}" alt="{{ book[0].title }}">
+            <img src="data:;base64,{{ book[0].cover|b64decode }}" alt="{{ book[0].title }}">
-		</figure>
+          </figure>
-	    </div>
+        </div>
-	    </div>
+      </div>
-	    {% else %}
+      {% else %}
-	    <div class="box is-dark book" id="{{book[0].id}}">
+      <div class="is-dark book" id="{{book[0].id}}">
-	      <h3 class="title is-3">{{ book[0].title }}</h3>
+        <div class="image book-thumbnail">
-	      <h4 class="subtitle is-4">{{ book[0].author }}</h4>
+          <figure class="image is-4by3">
-	      <p class="content">{{ book[0].description|summarize }}</p>
+            <img src="static/images/no-cover.jpg" alt="{{ book[0].title }}">
-	    </div>
+          </figure>
-	{% endif %}
+        </div>
-    {% endfor %}
+        <h3 class="title is-3">{{ book[0].title }}</h3>
-  </div>
+        <h4 class="subtitle is-4">{{ book[0].author }}</h4>
-</section>
+        <p class="content">{{ book[0].description|summarize }}</p>
+      </div>
+      {% endif %}
+      {% endfor %}
+    </div>
+  </section>
 {% include 'footer.html' %}

src/frontend/templates/navigation.html

@@ -1,3 +1,6 @@
+<script type="text/javascript">
+  const collections = {{ collections|collections_tojson }};
+</script>
 <nav id="navbar-main" class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
   <div class="navbar-brand">
     <a class="navbar-item" href="https://github.com/th3r00t/pyShelf">
@@ -43,6 +46,13 @@
             </a>
         </div>
       </div>
+      <div class="select is-small is-rounded is-link" id="collection_dropdown">
+        <select id="collection_select">
+          {% for collection in collections %}
+          <option value={{collection[0].id}} class="collection_selection">{{collection[0].collection}}</option>
+          {% endfor %}
+        </select>
+      </div>
     </div>
     <div class="navbar-end">
       <div class="navbar-item">