implemented recipe frontend

Floskinner · Feb 17, 2022 · fc4fd16 · fc4fd16
1 parent 0d9a0a0
commit fc4fd16
Show file tree

Hide file tree

Showing 14 changed files with 193 additions and 24 deletions.
diff --git a/README.md b/README.md
@@ -114,6 +114,6 @@ poetry export -f requirements.txt -o requirements.txt
 ### pip 
 To install the requierd dependencies via pip:
 ```console
-pip install -r requirements_dev.txt
+pip install -r requirements-dev.txt
 ```
 Here you have to manuel manage the requirements.txt files. Use a fixed versions only.
diff --git a/app/main.py b/app/main.py
@@ -21,6 +21,7 @@
 from views import error
 from views import index
 from views import restaurant
+from views import recipe
 from views import signin
 from views import rating
 
@@ -68,6 +69,7 @@ def configure_routing():
     app.mount("/static", StaticFiles(directory="static"), name="static")
     app.include_router(index.router)
     app.include_router(restaurant.router)
+    app.include_router(recipe.router)
     app.include_router(signin.router)
     app.include_router(error.router)
     app.include_router(rating.router)
@@ -176,6 +178,6 @@ async def general_exception_handler(request: fastapi.Request, exc: Exception):
 
 if __name__ == "__main__":
     configure()
-    uvicorn.run(app, port=8000, host="192.168.0.112")
+    uvicorn.run(app, port=8000, host="172.0.0.1")
 else:
     configure()
diff --git a/app/schemes/__init__.py b/app/schemes/__init__.py
@@ -21,7 +21,7 @@ class Cuisine(Enum):
     VEGETARIAN = "Vegetarisch"
     FASTFOOD = "Fastfood"
     AMERICAN = "Amerikanisch"
-    FOOD = "Essen"  # used when no cuisine is selected
+    RESTAURANT = "Restaurant"  # used when no cuisine is selected
 
 
 class Allergies(Enum):

diff --git a/app/services/service_rec.py b/app/services/service_rec.py
@@ -18,13 +18,13 @@ def search_recipe(recipe_filter: FilterRecipe) -> Recipe:
     random_recipe: pandas.DataFrame = __apply_filter(recipe_db.pd_frame, recipe_filter).sample()
 
     return Recipe(
-        id=random_recipe["_id.$oid"][0],
-        name=random_recipe["name"][0],
-        ingredients=random_recipe["ingredients"][0],
-        url=random_recipe["url"][0],
-        image=random_recipe["image"][0],
-        cookTime=random_recipe["cookTime"][0],
-        prepTime=random_recipe["prepTime"][0],
+        id=random_recipe["_id.$oid"].array[0],
+        name=random_recipe["name"].array[0],
+        ingredients=random_recipe["ingredients"].array[0],
+        url=random_recipe["url"].array[0],
+        image=random_recipe["image"].array[0],
+        cookTime=random_recipe["cookTime"].array[0],
+        prepTime=random_recipe["prepTime"].array[0],
     )
 
 

diff --git a/app/static/js/recipe.js b/app/static/js/recipe.js
@@ -0,0 +1,50 @@
+function change_recipe_url() {
+    var length_int = get_length()
+    if (length_int == 0) {
+        var length = 900;
+    } else if (length_int == 1) {
+        var length = 1800;
+    } else if (length_int == 2) {
+        var length = 3600;
+    } else if (length_int == 3) {
+        var length = 7200;
+    } else {
+        var length = 0;
+    }
+    var keywords = get_keywords()
+    document.getElementById("search_recipe").href = "/findrecipe?length=" + length + "&keywords=" + keywords;
+}
+
+function reload_page() {
+    window.location.reload(true);
+}
+
+function get_keywords() {
+    return ""
+}
+
+function get_length() {
+    return document.getElementById('recipe_filter_length').value;
+}
+
+function update_recipe_modal_on_show() {
+    update_length_text(document.getElementById('recipe_filter_length').value);
+}
+
+function update_length_text(val) {
+    if (val == 0) {
+        document.getElementById('recipe_filter_length_text').value = "höchstens 15 min";
+    } else if (val == 1) {
+        document.getElementById('recipe_filter_length_text').value = "höchstens 30 min";
+    } else if (val == 2) {
+        document.getElementById('recipe_filter_length_text').value = "höchstens 60 min";
+    } else if (val == 3) {
+        document.getElementById('recipe_filter_length_text').value = "höchstens 120 min";
+    } else {
+        document.getElementById('recipe_filter_length_text').value = "Länge irrelevant";
+    }
+}
+
+function strToArray(commaSeperatedString) {
+    return commaSeperatedString.split(',');
+}
diff --git a/app/static/js/restaurant.js b/app/static/js/restaurant.js
@@ -24,7 +24,8 @@ $('#restaurantFilter').on('hide.bs.modal', function(e) {
     document.getElementById("allergies_selected").innerHTML = get_allergies();
 })
 
-function change_url() {
+function change_restaurant_url() {
+    update_restaurant_modal_on_show();
     var latitude = get_latitude();
     var longitude = get_longitude();
     var zipcode = get_zipcode();
@@ -133,7 +134,7 @@ function update_allergies_options() {
     }
 }
 
-function update_modal_on_show() {
+function update_restaurant_modal_on_show() {
     update_radius_text(document.getElementById('restaurant_filter_radius').value);
     update_costs_text(document.getElementById('restaurant_filter_costs').value);
     update_cuisine_options();
@@ -151,7 +152,7 @@ function update_cuisine_selected() {
 function update_cuisine_options() {
     var cuisines_options = strToArray(document.getElementById('cuisine_options').innerHTML);
     for (const cuisine of cuisines_options) {
-        if (cuisine != "Essen") {
+        if (cuisine != "Restaurant") {
             if ($('#restaurant_filter_cuisine').find("option[value='" + cuisine + "']").length) {
                 $('#restaurant_filter_cuisine').val(cuisine).trigger('change');
             } else {

diff --git a/app/templates/main.html b/app/templates/main.html
@@ -3,25 +3,25 @@
 <div class="row justify-content-center">
     <div class="col-10 limit-width">
         <div class="d-flex">
-            <div class="btn btn-outline-dark w-100 flex-grow-1 m-2 py-4 box-shadow prevent-dark-fill d-flex align-items-center justify-content-center flex-column">
+            <a id="search_recipe" onclick="change_recipe_url()" class="btn btn-outline-dark w-100 flex-grow-1 m-2 py-4 box-shadow prevent-dark-fill d-flex align-items-center justify-content-center flex-column">
                 <img src="/static/img/icons8-recipe-book-large.png" alt="" class="img-display">
                 <h1 class="fs-5">Rezept Finden</h1>
-            </div>
-            <div class="btn btn-outline-dark w-50 m-2 py-4 box-shadow prevent-dark-fill grid align-items-center justify-content-center flex-column">
+            </a>
+            <a data-bs-toggle="modal" data-bs-target="#recipeFilter" onclick="update_recipe_modal_on_show()" class="btn btn-outline-dark w-50 m-2 py-4 box-shadow prevent-dark-fill grid align-items-center justify-content-center flex-column">
                 <img src="/static/img/icons8-filter-large.png" alt="" class="img-display p-2">
                 <h1 class="fs-5">Filter</h1>
-            </div>
+            </a>
         </div>
     </div>
 </div>
 <div class="row justify-content-center">
     <div class="col-10 limit-width">
         <div class="d-flex">
-            <a id="search_restaurant" onclick="change_url()" class="btn btn-outline-dark w-100 flex-grow-1 m-2 py-4 box-shadow prevent-dark-fill d-flex align-items-center justify-content-center flex-column">
+            <a id="search_restaurant" onclick="change_restaurant_url()" class="btn btn-outline-dark w-100 flex-grow-1 m-2 py-4 box-shadow prevent-dark-fill d-flex align-items-center justify-content-center flex-column">
                 <img src="/static/img/icons8-plate-and-utensils-large.png" alt="" class="img-display">
                 <h1 class="fs-5">Restaurant Finden</h1>
             </a>
-            <a data-bs-toggle="modal" data-bs-target="#restaurantFilter" onclick="update_modal_on_show()" class="btn btn-outline-dark w-50 m-2 py-4 box-shadow prevent-dark-fill grid align-items-center justify-content-center flex-column">
+            <a data-bs-toggle="modal" data-bs-target="#restaurantFilter" onclick="update_restaurant_modal_on_show()" class="btn btn-outline-dark w-50 m-2 py-4 box-shadow prevent-dark-fill grid align-items-center justify-content-center flex-column">
                 <img src="/static/img/icons8-filter-large.png" alt="" class="img-display p-2">
                 <h1 class="fs-5">Filter</h1>
             </a>
@@ -31,8 +31,8 @@ <h1 class="fs-5">Filter</h1>
 
 {% include "signin/account_modal.html" %}
 {% include "restaurant/restaurant_filter_modal.html" %}
-
+{% include "recipe/recipe_filter_modal.html" %}
 <script src="/static/js/index.js"></script>
 <script src="/static/js/restaurant.js"></script>
-
+<script src="/static/js/recipe.js"></script>
 {% endblock %}
diff --git a/app/templates/recipe/recipe_filter_modal.html b/app/templates/recipe/recipe_filter_modal.html
@@ -0,0 +1,28 @@
+<!-- Modal -->
+<div class="modal fade modal-sm modal-lg center" id="recipeFilter" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="staticBackdropLabel">Rezeptfilter</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="p-2">
+                    <p>Die Filter werden automatisch gespeichert.</p>
+                </div>
+
+                <!-- length range -->
+                <div class="p-2">
+                    <label for="recipe_filter_length" class="form-label">Länge</label>
+                    <!-- value="recp_filter.length" -->
+                    <input type="range" class="form-range" id="recipe_filter_length" name="recipe_filter_length" min="0" max="4" value="" oninput="update_length_text(this.value)"></input>
+                    <input class="form-label text-center" id="recipe_filter_length_text" value="" readonly></input>
+                </div>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Schließen</button>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/app/templates/recipe/recipe_navbar.html b/app/templates/recipe/recipe_navbar.html
@@ -0,0 +1,13 @@
+<div class="row justify-content-center">
+    <div class="col-10" style="max-width: 480px;">
+        <nav class="navbar navbar-light bg-white justify-content-between my-2">
+            <a class="navbar-brand" href="/rating" style="margin-right:0rem;">
+                <img src="/static/img/icons8-star-96.png" width="30" height="30" alt="Bewertungen" class="drop-shadow">
+            </a>
+            <img src="/static/img/essensfinder-draft.png" id="logo" width="30" height="30" alt="logo">
+            <a class="navbar-brand" href="/main" style="margin-right:0rem;">
+                <img src="/static/img/icons8-home-192.png" width="30" height="30" alt="Home" class="drop-shadow">
+            </a>
+        </nav>
+    </div>
+</div>
diff --git a/app/templates/recipe/recipe_result.html b/app/templates/recipe/recipe_result.html
@@ -0,0 +1,32 @@
+{% extends "shared/layout.html" %} {% block content %} {% include "recipe/recipe_navbar.html" %}
+<div class="row justify-content-center">
+    <div class="col-10  mb-2" style="max-width: 480px;">
+        <h1>{{recipe.name}}</h1>
+    </div>
+</div>
+<div class="row justify-content-center">
+    <div class="col-10" style="max-width: 480px;">
+        <p>{{recipe.ingredients}}</p>
+        <p>{{recipe.url}}</p>
+        <p>{{recipe.cookTime}}</p>
+        <p>{{recipe.prepTime}}</p>
+        <p>{{recipe.image}}</p>
+    </div>
+</div>
+<div class="row justify-content-center">
+    <div class="col-10 m-3 text-center" style="max-width: 480px;">
+        <a href="/main" class="btn btn-lg btn-dark">TODO: zum Rezept</a>
+    </div>
+</div>
+<div class="row justify-content-center">
+    <div class="col-10 m-3 text-center" style="max-width: 480px;">
+        <img id="recipe-image" index="recipe-image" src="/static/img/glaser.JPG"></img>
+    </div>
+</div>
+<div class="row justify-content-center">
+    <div class="col-10 text-center m-3" style="max-width: 480px;">
+        <a onclick="reload_page()" class="btn btn-dark btn-lg">Erneut suchen!</a>
+    </div>
+</div>
+<script src="/static/js/recipe.js"></script>
+{% endblock %}
diff --git a/app/templates/restaurant/restaurant_result.html b/app/templates/restaurant/restaurant_result.html
@@ -13,7 +13,7 @@ <h1>{{restaurant.name}}</h1>
 {% if restaurant.homepage%}
 <div class="row justify-content-center">
     <div class="col-10 m-3 text-center" style="max-width: 480px;">
-        <a href="{{restaurant.homepage}}" class="btn btn-lg btn-dark">Homepage</a>
+        <a href="{{restaurant.homepage}}" class="btn btn-sm btn-outline-dark box-shadow prevent-dark-fill align-items-center justify-content-center flex-column">{{restaurant.homepage}}</a>
     </div>
 </div>
 {% endif %}
@@ -27,7 +27,7 @@ <h1>{{restaurant.name}}</h1>
 </div>
 <div class="row justify-content-center">
     <div class="col-10 text-center m-3" style="max-width: 480px;">
-        <a onclick="reload_page()" class="btn btn-dark btn-lg">Erneut suchen!</a>
+        <a onclick="reload_page()" class="btn btn-lg btn-outline-dark box-shadow prevent-dark-fill">Erneut suchen!</a>
     </div>
 </div>
 <script src="/static/js/restaurant.js"></script>

diff --git a/app/templates/shared/layout.html b/app/templates/shared/layout.html
@@ -11,6 +11,7 @@
     <link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon">
 
     <link rel="stylesheet" href="/static/css/bootstrap.min.css">
+    <link rel="shortcut icon" href="/static/img/favicon.ico" type="image/x-icon">
     <!-- own js and css-->
     <link rel="stylesheet" href="/static/css/style.css">
 

diff --git a/app/views/recipe.py b/app/views/recipe.py
@@ -0,0 +1,42 @@
+"""Router for the Home of the Website"""
+from typing import Union
+
+from datetime import timedelta
+import fastapi
+from fastapi.responses import HTMLResponse
+from sqlalchemy.orm import Session
+from starlette.requests import Request
+from starlette.templating import Jinja2Templates
+
+from schemes import scheme_filter
+from services import service_rec
+from schemes import scheme_cuisine
+
+
+templates = Jinja2Templates("templates")
+router = fastapi.APIRouter()
+
+
+@router.get("/findrecipe", response_class=HTMLResponse)
+async def findrecipe(
+    request: Request,
+    length: int,
+    keywords: Union[str, None] = None,
+):
+    if length == 0:
+        total_length = timedelta(days=100)
+    else:
+        total_length = timedelta(seconds=length)
+    rec_filter = scheme_filter.FilterRecipe(
+        cuisines = [scheme_cuisine.PydanticCuisine(name="Restaurant")],
+        rating = 1,
+        keyword = keywords,
+        total_time = total_length,
+    )
+    recipe = service_rec.search_recipe(recipe_filter=rec_filter)
+
+    # TODO: Rezept suchen/auswählen
+
+    return templates.TemplateResponse(
+        "recipe/recipe_result.html", {"request": request, "recipe": recipe}
+    )
diff --git a/app/views/restaurant.py b/app/views/restaurant.py
@@ -40,7 +40,7 @@ async def findrestaurant(
     if cuisine is not None:
         cuisine_list = [scheme_cuisine.PydanticCuisine(name=cuisine) for cuisine in cuisine.split(",")]
     else:
-        cuisine_list = [scheme_cuisine.PydanticCuisine(name="Essen")]
+        cuisine_list = [scheme_cuisine.PydanticCuisine(name="Restaurant")]
     allergies_list = allergies
     if allergies is not None:
         allergies_list = [scheme_allergie.PydanticAllergies(name=allergie) for allergie in allergies.split(",")]