From a12f43ca0577cda215ceef4dafb5ab506fda43d2 Mon Sep 17 00:00:00 2001
From: Karthik Vempati <karthik.vempati@tum.de>
Date: Fri, 22 Jul 2022 20:44:29 +0200
Subject: [PATCH 1/5] Alignment issues and what not

More commits incoming
---
 frontend/src/components/RecipeModel.vue | 167 +++++++++++-------------
 1 file changed, 75 insertions(+), 92 deletions(-)

diff --git a/frontend/src/components/RecipeModel.vue b/frontend/src/components/RecipeModel.vue
index 7bfcc72..c6db830 100644
--- a/frontend/src/components/RecipeModel.vue
+++ b/frontend/src/components/RecipeModel.vue
@@ -30,67 +30,84 @@
           </ul>
         </div>
 
-        <div class="nav-background"/>
+
 
         <!-- input field -->
 
         <div>
-          <v-item-group>
-            <v-container>
-              <v-row>
-                <v-col
-                    v-for="recipe in recipes"
-                    :key="recipe.id"
-                    cols="4"
-                    md="3"
-                >
-                  <v-item>
-                    <v-card
-                        class="mx-auto"
-                        max-width="400"
+          <v-app>
+
+          </v-app>
+          <v-container
+              fluid
+              dark
+              style="background-color: transparent; height: 100%"
+          >
+            <v-row
+                align="align">
+              <v-col
+                  v-for="recipe in recipes"
+                  :key="recipe.id"
+                  cols="4"
+                  sm="3"
+              >
+                <v-item>
+                  <v-card
+                      class="pa-2"
+                      min-width="350"
+                      max-width="350"
+                      min-height="400"
+                      max-height="400"
+                      tile
+                      rounded = true
+                      color="#385F73"
+                      dark
+                  >
+                    <v-img
+                        class="white--text align-end"
+                        height="200px"
+                        :src="recipe.image"
                     >
-                      <v-img
-                          class="white--text align-end"
-                          height="200px"
-                          :src="recipe.image"
+                    </v-img>
+
+                    <v-card-title
+                        style="word-break: break-word"
+                    >{{ recipe.title }}</v-card-title>
+                    <v-card-subtitle class="pb-0">
+                      Ready in {{ recipe.readyInMinutes }} minutes
+                    </v-card-subtitle>
+
+                    <!--                      <v-card-text class="text&#45;&#45;primary">-->
+                    <!--                        <div>Whitehaven Beach</div>-->
+
+                    <!--                        <div>Whitsunday Island, Whitsunday Islands</div>-->
+                    <!--                      </v-card-text>-->
+
+                    <v-card-actions>
+                      <!--                        <v-btn-->
+                      <!--                            color="orange"-->
+                      <!--                            text-->
+                      <!--                        >-->
+                      <!--                          Share-->
+                      <!--                        </v-btn>-->
+
+                      <v-btn
+
+                          :href="recipe.sourceUrl"
+                          text
                       >
-                        <v-card-title>{{recipe.title}}</v-card-title>
-                      </v-img>
+                        <!--                            @click = ""-->
+                        Cook
+                      </v-btn>
+                    </v-card-actions>
+                  </v-card>
+                </v-item>
+              </v-col>
+            </v-row>
+          </v-container>
 
-                      <v-card-subtitle class="pb-0">
-                        {{ recipe.spoonacularSourceUrl }}
-                      </v-card-subtitle>
-
-                      <v-card-text class="text--primary">
-                        <div>Whitehaven Beach</div>
-
-                        <div>Whitsunday Island, Whitsunday Islands</div>
-                      </v-card-text>
-
-                      <v-card-actions>
-                        <v-btn
-                            color="orange"
-                            text
-                        >
-                          Share
-                        </v-btn>
-
-                        <v-btn
-                            color="orange"
-                            text
-                        >
-                          Explore
-                        </v-btn>
-                      </v-card-actions>
-                    </v-card>
-                  </v-item>
-                </v-col>
-              </v-row>
-            </v-container>
-          </v-item-group>
         </div>
 
-
       </div>
     </section>
 
@@ -98,43 +115,6 @@
   </body>
 </template>
 
-        <!-- input field -->
-
-<!--        <div class="field-header-box">-->
-<!--          <div class="inputField-header">-->
-<!--            <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"-->
-<!--                   @keyup.enter="addItem"/>-->
-<!--            <label for="inputTextField" class="formLabel">-->
-<!--              Add here ...-->
-<!--            </label>-->
-<!--          </div>-->
-<!--        </div>-->
-
-        <!-- Recipe element -->
-
-
-
-
-
-
-        <!-- response element -->
-
-<!--        <div class="item-section" v-show="items.length" v-cloak>-->
-<!--          <ul class="item-list">-->
-<!--            <li v-for="item in items"-->
-<!--                class="item"-->
-<!--                :key="item.id">-->
-<!--              <div class="view">-->
-<!--                <label class="item-name" @dblclick="editItem(item)">-->
-<!--                  <span class="item-name-fame">{{ item.name.toUpperCase() }} </span>-->
-<!--                  <span class="item-information-frame">{{ item.quantity }} {{ item.unit.toLowerCase() }}</span>-->
-<!--                </label>-->
-<!--                <button class="destroy" @click="removeItem(item)"></button>-->
-<!--              </div>-->
-<!--            </li>-->
-<!--          </ul>-->
-<!--        </div>-->
-
 <script>
 
 import api from '../Api';
@@ -148,6 +128,7 @@ const Recipes = {
   // app initial state
   data: function () {
     return {
+      items: [],
       recipes: [],
       loading: true,
       error: null,
@@ -314,12 +295,14 @@ body{
 /* item section */
 
 .item-section{
-  z-index: 0;
-  position: center;
+  z-index: 2;
+  position: absolute;
+  top: 80%;
+  left: 50%;
   width: 0;
   height: 0;
   font-size: 20px;
-  margin-left: 0px;
+  margin-left: 30px;
   border: 1px solid black;
 }
 

From c97d3e75b108fe733aebe20b01c5ab89ea808ee8 Mon Sep 17 00:00:00 2001
From: Karthik Vempati <karthik.vempati@tum.de>
Date: Fri, 22 Jul 2022 20:55:11 +0200
Subject: [PATCH 2/5] Move app views to v-app

---
 frontend/src/App.vue | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index ec3d87b..7420f12 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,3 +1,5 @@
+
+
 <script>
 import ItemModel from "@/components/ItemModel";
 import LoginPage from "@/components/LoginPage";
@@ -33,7 +35,30 @@ export default {
 </script>
 
 <template>
-  <component :is="currentView" />
+
+
+
+  <v-app
+      :is="currentView"
+  >
+    <v-navigation-drawer
+        v-model="drawer"
+        absolute
+        bottom
+        temporary
+    >
+      <v-list-item>
+        Test
+      </v-list-item>
+    </v-navigation-drawer>
+
+    <v-app-bar app>
+      <!-- -->
+    </v-app-bar>
+    <v-main>
+
+    </v-main>
+  </v-app>
 </template>
 
 

From de33798a715184e73afc497bb6330155b9036c51 Mon Sep 17 00:00:00 2001
From: Karthik Vempati <karthik.vempati@tum.de>
Date: Fri, 22 Jul 2022 20:56:07 +0200
Subject: [PATCH 3/5] rework random generation

---
 frontend/src/Api.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/frontend/src/Api.js b/frontend/src/Api.js
index 76ac30e..e9c31ac 100644
--- a/frontend/src/Api.js
+++ b/frontend/src/Api.js
@@ -22,5 +22,11 @@ export default {
         }]
     }),
 
+    getRandom: () => instance.get('/api/v1/recipe/random', {
+        transformResponse: [function (data) {
+            return data? JSON.parse(data) : data;
+        }]
+    }),
+
     removeForId: (id) => instance.delete('/api/v1/items/'+ id)
 }
\ No newline at end of file

From 8259f3b15876e0e05c26779741e65c1bbdf852ce Mon Sep 17 00:00:00 2001
From: Karthik Vempati <karthik.vempati@tum.de>
Date: Fri, 22 Jul 2022 21:21:01 +0200
Subject: [PATCH 4/5] rework recipes and random generation pt. 2

---
 frontend/src/components/RecipeModel.vue | 64 ++++++++++++++++++-------
 1 file changed, 47 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/RecipeModel.vue b/frontend/src/components/RecipeModel.vue
index c6db830..7374cbc 100644
--- a/frontend/src/components/RecipeModel.vue
+++ b/frontend/src/components/RecipeModel.vue
@@ -35,9 +35,7 @@
         <!-- input field -->
 
         <div>
-          <v-app>
 
-          </v-app>
           <v-container
               fluid
               dark
@@ -137,28 +135,60 @@ const Recipes = {
   },
 
   mounted() {
-    api.getRecipesForFridge()
-        .then(response => {
-          this.$log.debug("Data loaded: ", response.data)
-          this.recipes = response.data
-        })
-        .catch(error => {
-          this.$log.debug(error)
-          this.error = "Failed to load recipes"
-        })
-        .finally(() => this.loading = false)
+    this.populateRecipes()
   },
 
+  methods: {
+    populateFromFridge() {
+      api.getRecipesForFridge()
+          .then(response => {
+            this.$log.debug("Data loaded: ", response.data)
+            this.recipes = response.data
+          })
+          .catch(error => {
+            this.$log.debug(error)
+            this.error = "Failed to load recipes"
+          })
+          .finally(() => this.loading = false)
+    },
+
+    populateRandom() {
+      api.getRandom()
+          .then(response => {
+            this.$log.debug("Data loaded: ", response.data)
+            this.recipes = response.data
+          })
+          .catch(error => {
+            this.$log.debug(error)
+            this.error = "Failed to load recipes"
+          })
+          .finally(() => this.loading = false)
+    },
+
+    populateRecipes() {
+      api.getAll()
+          .then(response => {
+            this.$log.debug("Data loaded: ", response.data)
+            this.items = response.data
+          })
+          .catch(error => {
+            this.$log.debug(error)
+            this.error = "Failed to load items"
+          })
+          .finally(() => {
+            if (this.items.length > 3) {
+              this.populateFromFridge()
+            } else {
+              this.populateRandom()
+            }
+          })
+    }
+  }
 
 }
 export default Recipes
 </script>
 
-
-
-
-
-
 <style lang="scss">
 
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');

From 92d03120b1802f6216eaed0c282381d4263a95d3 Mon Sep 17 00:00:00 2001
From: Karthik Vempati <karthik.vempati@tum.de>
Date: Fri, 22 Jul 2022 21:29:50 +0200
Subject: [PATCH 5/5] fix colors and alignment everywhere

don't ask
---
 frontend/src/components/Custom404Page.vue |  6 +-
 frontend/src/components/ItemModel.vue     | 83 +++++++++++++++++------
 frontend/src/components/LoginPage.vue     |  2 +-
 frontend/src/components/RecipeModel.vue   | 32 ++++-----
 4 files changed, 83 insertions(+), 40 deletions(-)

diff --git a/frontend/src/components/Custom404Page.vue b/frontend/src/components/Custom404Page.vue
index 5ad891b..a91b58b 100644
--- a/frontend/src/components/Custom404Page.vue
+++ b/frontend/src/components/Custom404Page.vue
@@ -14,7 +14,7 @@ export default {
 
 <style lang="scss">
 
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200&display=swap");
 
 *,
 *::before,
@@ -30,7 +30,7 @@ export default {
   justify-content: center;
   align-items: center;
   align-content: space-between;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 .text {
@@ -83,7 +83,7 @@ h1::after{
 }
 
 h1::before{
-  background: #213737;
+  background: #006064;
   animation: shifteffect 4s steps(22) forwards;
 }
 
diff --git a/frontend/src/components/ItemModel.vue b/frontend/src/components/ItemModel.vue
index 5388dd2..9f62c45 100644
--- a/frontend/src/components/ItemModel.vue
+++ b/frontend/src/components/ItemModel.vue
@@ -35,13 +35,64 @@
         <!-- input field -->
 
         <div class="field-header-box">
-          <div class="inputField-header">
-            <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"
-                   @keyup.enter="addItem"/>
-            <label for="inputTextField" class="formLabel">
-              Add here ...
-            </label>
-          </div>
+<!--          <div class="inputField-header">-->
+<!--            <input class="newItemName" id="inputTextField" autofocus autocomplete="off" placeholder="Add here..." v-model="newItem"-->
+<!--                   @keyup.enter="addItem"/>-->
+<!--            <label for="inputTextField" class="formLabel">-->
+<!--              Add here ...-->
+<!--            </label>-->
+          <v-row>
+            <v-col cols="3">
+              <v-text-field
+                  label="Ingredient"
+                  value=""
+                  v-model="newItem"
+                  @keyup.enter="addItem"
+                  require
+              ></v-text-field>
+            </v-col>
+            <v-col cols="2">
+              <v-text-field
+                  label="Quantity"
+                  required
+                  v-model="newQuantity"
+                  @keyup.enter="addItem"
+              ></v-text-field>
+            </v-col>
+            <v-col cols="1">
+                <p>Unit</p>
+
+                <v-btn-toggle
+                    v-model="newUnit"
+                    tile
+                    color="deep-purple accent-3"
+                    group
+                    mandatory
+
+                >
+                  <v-btn value="units">
+                    units
+                  </v-btn>
+
+                  <v-btn value="g">
+                    g
+                  </v-btn>
+
+                  <v-btn value="ml">
+                    ml
+                  </v-btn>
+
+                </v-btn-toggle>
+            </v-col>
+            <v-col cols="1">
+<!--              <v-btn-->
+<!--                  elevation="2"-->
+<!--                  fab-->
+<!--                  @click="addItem"-->
+<!--              ><v-icon>mdi-plus</v-icon>-->
+<!--              </v-btn>-->
+            </v-col>
+          </v-row>
         </div>
 
         <!-- response element -->
@@ -197,7 +248,7 @@ export default Items
 body{
   margin: 0;
   padding: 0;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 .main {
@@ -208,7 +259,7 @@ body{
   justify-content: center;
   align-items: center;
   font-size: 1.25vh;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 /* navbar-background */
@@ -218,7 +269,7 @@ body{
   left: 0;
   top: 0;
   z-index: 3;
-  background: #213737;
+  background: #006064;
   width: 100vw;
   height: 15vh;
 }
@@ -226,15 +277,7 @@ body{
 /* input field styling */
 
 .field-header-box{
-  z-index: 3;
-  position: fixed;
-  width: 100vw;
-  height: 5vh;
-  left: 0;
-  top: 10vh;
-  display: grid;
-  align-content: center;
-  justify-content: center;
+  color: white
 }
 
 .inputField-header {
@@ -258,7 +301,7 @@ body{
   outline: none;
   padding: 0.5vh;// size of font
   box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font
-  background: #213737;
+  background: #006064;
 }
 
 .newItemName:hover {
diff --git a/frontend/src/components/LoginPage.vue b/frontend/src/components/LoginPage.vue
index 00f2238..d37060b 100644
--- a/frontend/src/components/LoginPage.vue
+++ b/frontend/src/components/LoginPage.vue
@@ -114,7 +114,7 @@ export default {
   display: grid;
   justify-content: center;
   align-items: center;
-  background: #213737;
+  background: #006064;
 }
 
 .logo {
diff --git a/frontend/src/components/RecipeModel.vue b/frontend/src/components/RecipeModel.vue
index 7374cbc..fc6de84 100644
--- a/frontend/src/components/RecipeModel.vue
+++ b/frontend/src/components/RecipeModel.vue
@@ -215,7 +215,7 @@ export default Recipes
 body{
   margin: 0;
   padding: 0;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 .main {
@@ -226,7 +226,7 @@ body{
   justify-content: center;
   align-items: center;
   font-size: 1.25vh;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 /* navbar-background */
@@ -236,30 +236,30 @@ body{
   left: 0;
   top: 0;
   z-index: 3;
-  background: #213737;
+  background: #006064;
   width: 100vw;
   height: 15vh;
 }
 
 /* input field styling */
 
-.field-header-box{
-  z-index: 3;
-  position: fixed;
-  width: 100vw;
-  height: 5vh;
-  left: 0;
-  top: 10vh;
-  display: grid;
-  align-content: center;
-  justify-content: center;
-}
+//.field-header-box{
+//  z-index: 3;
+//  position: center;
+//  width: 200vw;
+//  height: 5vh;
+//  left: 0;
+//  top: 10vh;
+//  display: grid;
+//  align-content: center;
+//  justify-content: center;
+//}
 
 .inputField-header {
   position: relative;
   z-index: 5;
   width: 20vh;
-  height: 3vh;
+  height: 2vh;
 }
 
 .newItemName {
@@ -276,7 +276,7 @@ body{
   outline: none;
   padding: 0.5vh;// size of font
   box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); // 0.5 size of font and 1.5 size of font
-  background: #213737;
+  background: #006064;
 }
 
 .newItemName:hover {