Setup to handle book objects from sqlalchemy.

pyShelf.py

@@ -9,7 +9,6 @@ from src.backend.lib.storage import Storage
 from src.backend.pyShelf_MakeCollections import MakeCollections
 from src.backend.pyShelf_ScanLibrary import execute_scan
 from src.frontend.lib.FastAPIServer import FastAPIServer
-from src.frontend.lib.objects import JSInterface
 # import websockets
 
 
@@ -30,7 +29,6 @@ def run_import():
 
 async def main():
     """Program entrypoint."""
-    JSInterface(config=config).install()
     Storage(config=config).create_tables()
     _import_thread = Thread(target=run_import)
     _import_thread.start()

src/backend/lib/storage.py

@@ -164,3 +164,27 @@ class Storage:
                                     f"Collection {_s} failed: {e}")
                     _collections.append(_p)
         self.config.logger.info("Finished making collections.")
+
+    def get_books(self, collection=None):
+        """Get books from database.
+
+        Parameters
+        ----------
+        collection : str
+            Collection to filter by.
+
+        Returns
+        -------
+        _result : ScalarResult Object
+        """
+        session = Session(self.engine)
+        if collection:
+            _result = session.execute(
+                select(Book).join(Collection).where(
+                    Collection.collection == collection
+                )
+            ).all()
+        else:
+            _result = session.execute(select(Book)).all()
+        session.close()
+        return _result

src/frontend/lib/FastAPIServer.py

@@ -1,11 +1,15 @@
 """pyShelf's main frontend library."""
 import uvicorn
+import os
 import sass
 from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse
 from fastapi.routing import APIRoute
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
+from ...backend.lib.storage import Storage
+from .objects import JSInterface
+from ...backend.lib.config import Config
 
 app = FastAPI()
 templates = Jinja2Templates(directory="src/frontend/templates")
@@ -23,6 +27,7 @@ class FastAPIServer():
         self.fe_config = uvicorn.Config(app, port=8080,
                                         log_level="info", reload=True)
         self.fe_server = uvicorn.Server(self.fe_config)
+        self.JSInterface: JSInterface = JSInterface(self.config)
         self.compile_static_files()
 
     def compile_static_files(self):
@@ -34,6 +39,7 @@ class FastAPIServer():
         with open('src/frontend/static/styles/pyShelf.css', 'w') as _pyShelf:
             _pyShelf.write(_pyShelf_src[0])
         _pyShelf.close()
+        self.JSInterface.install()
         return True
 
     def use_route_names_as_operation_ids(self, app: FastAPI) -> None:
@@ -44,15 +50,12 @@ class FastAPIServer():
 
     @app.get("/", response_class=HTMLResponse)
     async def index(request: Request):
+        storage = Storage(Config(os.path.abspath(os.getcwd())))
+        books = storage.get_books()
         """Home page responder."""
-        return templates.TemplateResponse(
-            "index.html",
-            {
-                "request": request,
-                "package": {
-                    "test": "This is a test variable"
-                }
-            })
+        # _books = self.storage.get_books()
+        context = {"request": request, "books": books}
+        return templates.TemplateResponse("index.html", context )
 
     @app.get("/users/me")
     async def about_me(self):

src/frontend/lib/objects.py

@@ -17,7 +17,14 @@ class JSInterface():
     def install(self):
         """Install the JavaScript dependencies."""
         if which("npm"):
+            self.config.logger.info("Installing JavaScript dependencies...")
             run(["npm", "install"], cwd=self.package_json.parent)
         else:
             self.config.logger.error("npm is not installed.")
             exit(1)
+        if which("npx"):
+            self.config.logger.info("Compiling TypeScript...")
+            run(["npx", "tsc", "static/script/pyshelf.ts"], cwd=self.package_json.parent)
+        else:
+            self.config.logger.error("npx is not installed.")
+            exit(1)

src/frontend/static/script/pyshelf.js

@@ -0,0 +1,21 @@
+function getScreenSize() {
+    return {
+        width: window.innerWidth,
+        height: window.innerHeight
+    };
+}
+function sizeMaster() {
+    var size = getScreenSize();
+    var navbar = $('#navbar-main').height();
+    var footer = $('#footer-main').height();
+    var master = $('#master').height(size.height - navbar - footer);
+}
+$(document).ready(function () {
+    // Get the current URL
+    var url = window.location.href;
+    // Get the last part of the URL
+    sizeMaster();
+    $(window).on('resize', function () {
+        sizeMaster();
+    });
+});

src/frontend/static/script/pyshelf.ts

@@ -4,12 +4,20 @@ function getScreenSize() {
         height: window.innerHeight
     };
 }
+
+function sizeMaster() {
+  var size = getScreenSize();
+  var navbar = $('#navbar-main').height();
+  var footer = $('#footer-main').height();
+  var master = $('#master').height(size.height - navbar - footer);
+}
+
 $(document).ready(function() {
   // Get the current URL
   var url = window.location.href;
   // Get the last part of the URL
-    var screenSize = getScreenSize();
-    var x: number = screenSize.width;
-    var y: number = screenSize.height;
-    console.log(x, y);
-}
+  sizeMaster();
+  $(window).on('resize', function() {
+    sizeMaster();
+  });
+})

src/frontend/templates/example.tpl

@@ -0,0 +1,7 @@
+<!doctype html>
+{% include 'header.html' %}
+  {% include 'navigation.html' %}
+      <section id="master">
+        {{ package.test }}
+      </section>
+{% include 'footer.html' %}

src/frontend/templates/footer.html

@@ -1,4 +1,4 @@
-<footer class="footer is-dark">
+<footer class="footer is-dark" id="footer-main">
     <a href="https://python.org">
       <img
 	src="{{ url_for('static', path='images/python-logo-transparent.svg') }}"

src/frontend/templates/index.html

@@ -1,7 +1,34 @@
 <!doctype html>
 {% include 'header.html' %}
   {% include 'navigation.html' %}
-      <section id="master">
-        {{ package.test }}
-      </section>
+<section id="master">
+  <div class="container is-dark">
+    {% for book in books %}
+    <div class="card">
+      <div class="card-image">
+        <figure class="image is-4by3">
+          <img src="{{ book[0].cover }}" alt="{{ book[0].title }}">
+        </figure>
+      </div>
+      <div class="card-content">
+        <div class="media">
+          <div class="media-left">
+            <figure class="image is-48x48">
+              <img src="{{ book.image }}" alt="Placeholder image">
+            </figure>
+          </div>
+          <div class="media-content">
+            <p class="title is-4">{{ book[0].title }}</p>
+            <p class="subtitle is-6">{{ book[0].author }}</p>
+          </div>
+        </div>
+        <div class="content">
+          {{ book[0].description }}
+          <br>
+          <time datetime="2016-1-1">{{ book[0].date }}</time>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+</section>
 {% include 'footer.html' %}

src/frontend/templates/navigation.html

@@ -1,4 +1,4 @@
-<nav class="navbar is-fixed-top is-dark" role="navigation" aria-label="main navigation">
+<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">
       <img src="{{ url_for('static', path='images/svg/logo-no-background-no-border.svg') }}" width="112" height="28" />