Feature/favorite quotes

app/database/models.py

@@ -462,6 +462,7 @@ class Quote(Base):
     id = Column(Integer, primary_key=True, index=True)
     text = Column(String, nullable=False)
     author = Column(String)
+    is_favorite = Column(Boolean, default=False, nullable=False)
 
 
 class Comment(Base):
@@ -565,3 +566,11 @@ def insert_data(target, session: Session, **kw):
 
 
 event.listen(Language.__table__, "after_create", insert_data)
+
+
+class UserQuotes(Base):
+    __tablename__ = "user_quotes"
+
+    id = Column(Integer, primary_key=True, index=True)
+    user_id = Column(Integer, ForeignKey("users.id"), nullable=False)
+    quote_id = Column(Integer, ForeignKey("quotes.id"), nullable=False)

app/internal/daily_quotes.py

@@ -1,11 +1,16 @@
 from datetime import date
-from typing import Dict, Optional
+from os.path import join, relpath
+from typing import Dict, List, Optional
 
 from sqlalchemy.orm import Session
 from sqlalchemy.sql.expression import func
 
-from app.database.models import Quote
+from app.database.models import Quote, UserQuotes
+from app.dependencies import MEDIA_PATH
 
+EMPTY_HEART_PATH = relpath(join(MEDIA_PATH, "empty_heart.png"), "app")
+FULL_HEART_PATH = relpath(join(MEDIA_PATH, "full_heart.png"), "app")
+FAVORITES_PATH = join("../..", FULL_HEART_PATH)
 TOTAL_DAYS = 366
 
 
@@ -19,13 +24,15 @@ def get_quote(quote_: Dict[str, Optional[str]]) -> Quote:
         A new Quote object.
     """
     return Quote(
-        text=quote_['text'],
-        author=quote_['author'],
+        text=quote_["text"],
+        author=quote_["author"],
+        is_favorite=False,
     )
 
 
 def get_quote_of_day(
-        session: Session, requested_date: date = date.today()
+    session: Session,
+    requested_date: date = date.today(),
 ) -> Optional[Quote]:
     """Returns the Quote object for the specific day.
 
@@ -39,9 +46,32 @@ def get_quote_of_day(
         A Quote object.
     """
     day_number = requested_date.timetuple().tm_yday
-    quote = (session.query(Quote)
-             .filter(Quote.id % TOTAL_DAYS == day_number)
-             .order_by(func.random())
-             .first()
-             )
+    quote = (
+        session.query(Quote)
+        .filter(Quote.id % TOTAL_DAYS == day_number)
+        .order_by(func.random())
+        .first()
+    )
     return quote
+
+
+def get_quotes(session: Session, user_id: int) -> List[Quote]:
+    """Retrieves the users' favorite quotes from the database."""
+    return session.query(Quote).filter_by(id=UserQuotes.quote_id).all()
+
+
+def is_quote_favorite(
+    session: Session,
+    user_id: int,
+    quote_of_day: Quote,
+) -> bool:
+    """Checks if the daily quote is in favorites list."""
+    if not quote_of_day:
+        return False
+
+    exists = (
+        session.query(UserQuotes)
+        .filter(user_id == user_id, UserQuotes.quote_id == quote_of_day.id)
+        .all()
+    )
+    return bool(exists)

app/main.py

@@ -19,9 +19,9 @@
 )
 from app.internal import daily_quotes, json_data_loader
 from app.internal.languages import set_ui_language
+from app.internal.security.dependencies import current_user
 from app.internal.security.ouath2 import auth_exception_handler
 from app.routers.salary import routes as salary
-from app.utils.extending_openapi import custom_openapi
 
 
 def create_tables(engine, psql_environment):
@@ -66,6 +66,7 @@ def create_tables(engine, psql_environment):
     email,
     event,
     export,
+    favorite_quotes,
     four_o_four,
     friendview,
     google_connect,
@@ -85,8 +86,6 @@ def create_tables(engine, psql_environment):
     whatsapp,
 )
 
-json_data_loader.load_to_database(next(get_db()))
-
 
 @app.get("/docs", include_in_schema=False)
 async def custom_swagger_ui_html():
@@ -117,6 +116,7 @@ async def swagger_ui_redirect():
     email.router,
     event.router,
     export.router,
+    favorite_quotes.router,
     four_o_four.router,
     friendview.router,
     google_connect.router,
@@ -140,20 +140,33 @@ async def swagger_ui_redirect():
 for router in routers_to_include:
     app.include_router(router)
 
+json_data_loader.load_to_database(next(get_db()))
+
 
-# TODO: I add the quote day to the home page
-# until the relevant calendar view will be developed.
 @app.get("/", include_in_schema=False)
 @logger.catch()
-async def home(request: Request, db: Session = Depends(get_db)):
-    quote = daily_quotes.get_quote_of_day(db)
+async def home(
+    request: Request,
+    db: Session = Depends(get_db),
+) -> templates.TemplateResponse:
+    """Home page for the website."""
+    user_id = False
+    if "Authorization" in request.cookies:
+        jwt = request.cookies["Authorization"]
+        user = await current_user(request=request, db=db, jwt=jwt)
+        user_id = user.user_id
+    is_connected = bool(user_id)
+    quote_of_day = daily_quotes.get_quote_of_day(db)
+    quote = daily_quotes.is_quote_favorite(db, user_id, quote_of_day)
+    if is_connected and quote:
+        quote_of_day.is_favorite = True
     return templates.TemplateResponse(
         "index.html",
         {
             "request": request,
-            "quote": quote,
+            "is_connected": is_connected,
+            "quote": quote_of_day,
+            "empty_heart": daily_quotes.EMPTY_HEART_PATH,
+            "full_heart": daily_quotes.FULL_HEART_PATH,
         },
     )
-
-
-custom_openapi(app)

app/routers/favorite_quotes.py

@@ -0,0 +1,65 @@
+from fastapi import APIRouter, Depends, Form, Request
+from sqlalchemy.orm import Session
+
+from app.database import models
+from app.dependencies import get_db, templates
+from app.internal import daily_quotes
+from app.internal.security.dependencies import current_user
+
+router = APIRouter(
+    prefix="/quotes",
+    tags=["quotes"],
+    responses={404: {"description": "Not found"}},
+)
+
+
+@router.post("/save")
+async def save_quote(
+    user: models.User = Depends(current_user),
+    quote_id: int = Form(...),
+    db: Session = Depends(get_db),
+) -> None:
+    """Saves a quote in the database."""
+    record = (
+        db.query(models.UserQuotes)
+        .filter(
+            models.UserQuotes.user_id == user.user_id,
+            models.UserQuotes.quote_id == quote_id,
+        )
+        .first()
+    )
+    if not record:
+        db.merge(models.UserQuotes(user_id=user.user_id, quote_id=quote_id))
+        db.commit()
+
+
+@router.delete("/delete")
+async def delete_quote(
+    user: models.User = Depends(current_user),
+    quote_id: int = Form(...),
+    db: Session = Depends(get_db),
+) -> None:
+    """Deletes a quote from the database."""
+    db.query(models.UserQuotes).filter(
+        models.UserQuotes.user_id == user.user_id,
+        models.UserQuotes.quote_id == quote_id,
+    ).delete()
+    db.commit()
+
+
+@router.get("/favorites")
+async def favorite_quotes(
+    request: Request,
+    db: Session = Depends(get_db),
+    user: models.User = Depends(current_user),
+) -> templates.TemplateResponse:
+    """html page for displaying the users' favorite quotes."""
+    quotes = daily_quotes.get_quotes(db, user.user_id)
+    return templates.TemplateResponse(
+        "favorite_quotes.html",
+        {
+            "request": request,
+            "quotes": quotes,
+            "full_heart": daily_quotes.FAVORITES_PATH,
+        },
+    )

app/static/favorite_quotes.js

@@ -0,0 +1,68 @@
+const FULL_HEART = "../../media/full_heart.png";
+const EMPTY_HEART = "../../media/empty_heart.png";
+
+// Adding event listener
+window.addEventListener("load", function () {
+  const quoteContainer = document.getElementById("quote-container");
+  if (!quoteContainer) {
+    return;
+  }
+  const isConnected = quoteContainer.dataset.connected;
+  if (isConnected !== "True") {
+    return;
+  }
+  const fullHeart = document.getElementsByClassName("full-heart")[0];
+  const emptyHeart = document.getElementsByClassName("empty-heart")[0];
+  if (fullHeart) {
+    fullHeart.classList.toggle("full-heart");
+  } else if (emptyHeart) {
+    emptyHeart.classList.toggle("empty-heart");
+  }
+
+  let hearts = Array.from(document.getElementsByClassName("heart"));
+  hearts.forEach((heart_element) => {
+    if (heart_element) {
+      heart_element.addEventListener("click", function () {
+        onHeartClick(heart_element);
+      });
+    }
+  });
+});
+
+/**
+ * @summary This function is a handler for the event of heart-click.
+ * Whenever a user clicks on a heart icon, in case of empty heart:
+ * saves quote in favorites, as well as changing
+ * the heart icon from empty to full.
+ * In case of full heart:
+ * Removes it and switch back to empty heart icon.
+ * Uses the save_or_remove_quote function to handle db operations.
+ */
+function onHeartClick(heart_element) {
+  const quote_id = heart_element.dataset.qid;
+  if (heart_element.dataset.heart == "off") {
+    heart_element.src = FULL_HEART;
+    heart_element.dataset.heart = "on";
+    save_or_remove_quote(quote_id, true);
+  } else {
+    heart_element.src = EMPTY_HEART;
+    heart_element.dataset.heart = "off";
+    save_or_remove_quote(quote_id, false);
+    if (heart_element.classList.contains("favorites")) {
+      heart_element.parentNode.parentNode.remove();
+    }
+  }
+}
+
+/**
+ * @summary Saves or removes a quote from favorites.
+ */
+function save_or_remove_quote(quote_id, to_save) {
+  const method = to_save ? "post" : "delete";
+  const url = method == "post" ? "/quotes/save" : "/quotes/delete";
+  const xhr = new XMLHttpRequest();
+  quote_id = parseInt(quote_id);
+  xhr.open(method, url);
+  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+  xhr.send(`quote_id=${quote_id}`);
+}

app/static/style.css

@@ -49,6 +49,15 @@ p {
   justify-content: space-around;
 }
 
+p#p-quote {
+  align-items: center;
+  justify-content: center;
+}
+
+#author {
+  font-size: small;
+}
+
 #inner:hover {
   cursor: pointer;
   padding: 50px;
@@ -156,6 +165,27 @@ p {
   font-size: 1.25rem;
 }
 
+.subtitle {
+    font-size: 1.25rem;
+}
+
+.heart {
+  width: 1.5em;
+  height: 1.5em;
+}
+
+.full-heart {
+  display: none;
+}
+
+.empty-heart {
+  display: none;
+}
+
+.favorite-quotes {
+  margin-bottom: 1.5em;
+}
+
 .error-message {
   line-height: 0;
   color: red;

app/templates/base.html

@@ -95,6 +95,7 @@
     <!-- This bootstrap version is needed here because of the toggler bug in the beta version-->
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>
     <script src="{{ url_for('static', path='/horoscope.js') }}"></script>
+    <script src="{{ url_for('static', path='/favorite_quotes.js') }}"></script>
     <script src="{{ url_for('static', path='/graph.js') }}"></script>
     <script type="text/javascript" src="{{ url_for( 'static', path='/audio_settings.js' ) }}"></script>
     <script src="{{ url_for('static', path='/js/darkmode.js') }}"></script>

app/templates/favorite_quotes.html

@@ -0,0 +1,20 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="d-flex position-relative" id="quote-container" data-connected="True">
+  <div class="container mx-auto gap-3">
+    <h2 id="favorite-quotes">Favorite Quotes</h2>
+    {% for quote in quotes %}
+      <p id="p-quote"><cite><q id="quote">{{ quote.text }}</q></cite>
+      {% if quote.author %}
+        <span id="author">&nbsp; \ {{ quote.author }}
+      {% else %}
+        <span>&nbsp;
+      {% endif %}
+        <img src="{{full_heart}}" data-heart="on" data-qid="{{quote.id}}" class="heart favorites">
+      </span>
+      </p>
+    {% endfor %}
+  </div>
+</div>
+{% endblock %}