more frontend

application/static/main.css

@@ -2,13 +2,15 @@
 
 #main{
     width: 65rem;
-    height: 38rem;
+    height: 45rem;
     position: relative;
     top: 10rem;
     left: -50%;
     display: block;
-   padding: 0;
+    padding: 0;
-   background-color: transparent !important;
+    background-color: transparent !important;
+    overflow-y: scroll;
+    overflow-x: hidden;
 }
 
 
@@ -32,3 +34,31 @@
     float: right;
     width: 12%;
 }
+
+.disable-scrollbars::-webkit-scrollbar {
+    width: 0px;
+    background: transparent; /* Chrome/Safari/Webkit */
+}
+
+.disable-scrollbars {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;  /* IE 10+ */
+}
+
+.recipe-img{
+    width:100%;
+    
+}
+.recipe-name{
+
+}
+.recipe-instructions{
+    display: grid;
+    width:70%;
+}
+.recipe-score{
+    
+}
+.recipe-container{
+    padding:0;
+}

application/static/main.js

@@ -1,24 +1,70 @@
 
-rl = document.getElementById("recipe-list")
+var rl = document.getElementById("recipe-list")
 
 function loadData() {
+    rl = document.getElementById("recipe-list")
+
     searchString = document.getElementById("search-field").value
     searchArray = searchString.split(',');
     getParams = ""
     searchArray.forEach(
-        function(item, index){
+        function (item, index) {
-            if (index > 0){
+            if (index > 0) {
                 getParams += "&ingred=" + item.trim()
             }
-            else{
+            else {
                 getParams += "?ingred=" + item.trim()
             }
-    });
+        });
     console.log(getParams)
-    getJSON("/api/v1/recipe/"+getParams,
+    getJSON("/api/v1/recipe/" + getParams,
         function (error, data) {
             data = data["data"] // remove wrapper
             console.log(data)
+            let keys = Object.keys(data).reverse();
+            rl.innerHTML = ""
+            keys.forEach(
+                function (key) {
+                    data1 = data[key]
+                    ingredString = ""
+                    data1[3].forEach(
+                        function(ingred){
+                            ingredString += `${ingred}<br>`
+                        }
+                    )
+                    
+                    recString = `
+                        <a href="${data1[2]}"> 
+                            <div class="card text-white bg-dark mb-3" style="max-width: 100%">
+                                <div class="card-body recipe-container">
+                                    <div class="row">
+                                        <div class="col-4">
+                                            <img class="recipe-img" src="https://images.lecker.de/,id=091149c4,b=lecker,w=610,cg=c.jpg">
+                                        </div>
+                                        <div class="col-7">
+                                            <div class="row">
+                                                <div class="col">
+                                                    <span><h4 class="recipe-name">${data1[1]}</h4></span>
+                                                </div>
+                                            </div>
+                                            <div class="row">
+                                                <div class="col">
+                                                <div class="recipe-ingredients">${ingredString}</div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                        
+                                        <div class="col-1">
+                                        <span class="recipe-score badge badge-primary badge-pill">${(key*100).toFixed(0) + "%"}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </a>
+                    
+                    `
+                    rl.innerHTML += recString
+                })
         },
         null
     );

application/templates/index.html

@@ -34,7 +34,7 @@
 
 
     <div style="position: fixed; left: 50%;">
-        <div class="container bg-dark" id="main">
+        <div class="container bg-dark disable-scrollbars" id="main">
             <nav class="navbar navbar-expand-lg navbar-dark bg-primary" id="nav-container">
                   <form class="form-inline my-2 my-lg-0" id="search-form" onsubmit="loadData();return false" action="#">
                     <input class="form-control" type="text" id="search-field" placeholder="Mehl, Eier, Zucker" style="width:88%">

run.py

@@ -1,5 +1,5 @@
 from application import app
 
-app.run(host="localhost", port='5001', debug=True, threaded=True)
+app.run(host="0.0.0.0", port='5001', debug=True, threaded=True)
 
 

search.py

@@ -61,7 +61,7 @@ def getRecDict(indx, inputArr):
     for key in heapq.nlargest(10, outDict.keys()):
         key2 = outDict[key]
         rec = dbSession.query(Recipe).filter(Recipe.recipe_id==key2).first()
-        outDict2[key] = (key2, rec.name, rec.instructions, rec.url,  [r[0] for r in dbSession.query(Ingredient.name).filter(Ingredient.recipe_id==key2).all()])
+        outDict2[key] = (key2, rec.name, rec.url,  [r[0] + ": " + r[1] for r in dbSession.query(Ingredient.name, Ingredient.ingredient_amount).filter(Ingredient.recipe_id==key2).all()])
     return outDict2
 
 def printDict(indx, inputArr):