Merge branch 'add-recipe-page' into fix-item-input

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)
 }

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>
 
 

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;
 }
 

frontend/src/components/ItemModel.vue

@@ -48,7 +48,7 @@
                   value=""
                   v-model="newItem"
                   @keyup.enter="addItem"
-                  required
+                  require
               ></v-text-field>
             </v-col>
             <v-col cols="2">
@@ -248,7 +248,7 @@ export default Items
 body{
   margin: 0;
   padding: 0;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 .main {
@@ -259,7 +259,7 @@ body{
   justify-content: center;
   align-items: center;
   font-size: 1.25vh;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 /* navbar-background */
@@ -269,24 +269,16 @@ body{
   left: 0;
   top: 0;
   z-index: 3;
-  background: #213737;
+  background: #006064;
   width: 100vw;
   height: 15vh;
 }
 
 /* input field styling */
 
-//.field-header-box{
+.field-header-box{
-//  z-index: 3;
+  color: white
-//  position: center;
+}
-//  width: 200vw;
-//  height: 5vh;
-//  left: 0;
-//  top: 10vh;
-//  display: grid;
-//  align-content: center;
-//  justify-content: center;
-//}
 
 .inputField-header {
   position: relative;
@@ -309,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 {

frontend/src/components/LoginPage.vue

@@ -114,7 +114,7 @@ export default {
   display: grid;
   justify-content: center;
   align-items: center;
-  background: #213737;
+  background: #006064;
 }
 
 .logo {

frontend/src/components/RecipeModel.vue

@@ -30,63 +30,81 @@
           </ul>
         </div>
 
-        <div class="nav-background"/>
+
 
         <!-- input field -->
 
-          <v-item-group>
+        <div>
-              <v-row>
+
-                <v-col
+          <v-container
-                    v-for="recipe in recipes"
+              fluid
-                    :key="recipe.id"
+              dark
-                    cols="4"
+              style="background-color: transparent; height: 100%"
-                    md="3"
+          >
-                >
+            <v-row
-                  <v-item>
+                align="align">
-                    <v-card
+              <v-col
-                        class="mx-auto"
+                  v-for="recipe in recipes"
-                        max-width="400"
+                  :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
+                    </v-img>
-                          class="white--text align-end"
+
-                          height="200px"
+                    <v-card-title
-                          :src="recipe.image"
+                        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-img>
+                        <!--                            @click = ""-->
-
+                        Cook
-                      <v-card-title>{{recipe.title}}</v-card-title>
+                      </v-btn>
-                      <v-card-subtitle class="pb-0">
+                    </v-card-actions>
-                        Ready in {{ recipe.readyInMinutes }} minutes
+                  </v-card>
-                      </v-card-subtitle>
+                </v-item>
-
+              </v-col>
-                      <v-card-text class="text--primary">
+            </v-row>
-                        <div>Whitehaven Beach</div>
+          </v-container>
-
-                        <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
-                            >
-<!--                            @click = ""-->
-                          Explore
-                        </v-btn>
-                      </v-card-actions>
-                    </v-card>
-                  </v-item>
-                </v-col>
-              </v-row>
-          </v-item-group>
 
+        </div>
 
       </div>
     </section>
@@ -95,43 +113,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';
@@ -145,6 +126,7 @@ const Recipes = {
   // app initial state
   data: function () {
     return {
+      items: [],
       recipes: [],
       loading: true,
       error: null,
@@ -153,28 +135,60 @@ const Recipes = {
   },
 
   mounted() {
-    api.getRecipesForFridge()
+    this.populateRecipes()
-        .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)
   },
 
+  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');
@@ -201,7 +215,7 @@ export default Recipes
 body{
   margin: 0;
   padding: 0;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 .main {
@@ -212,7 +226,7 @@ body{
   justify-content: center;
   align-items: center;
   font-size: 1.25vh;
-  background-color: #213737;
+  background-color: #006064;
 }
 
 /* navbar-background */
@@ -222,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{
+//.field-header-box{
-  z-index: 3;
+//  z-index: 3;
-  position: fixed;
+//  position: center;
-  width: 100vw;
+//  width: 200vw;
-  height: 5vh;
+//  height: 5vh;
-  left: 0;
+//  left: 0;
-  top: 10vh;
+//  top: 10vh;
-  display: grid;
+//  display: grid;
-  align-content: center;
+//  align-content: center;
-  justify-content: center;
+//  justify-content: center;
-}
+//}
 
 .inputField-header {
   position: relative;
   z-index: 5;
   width: 20vh;
-  height: 3vh;
+  height: 2vh;
 }
 
 .newItemName {
@@ -262,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 {
@@ -311,12 +325,14 @@ body{
 /* item section */
 
 .item-section{
-  z-index: 0;
+  z-index: 2;
-  position: center;
+  position: absolute;
+  top: 80%;
+  left: 50%;
   width: 0;
   height: 0;
   font-size: 20px;
-  margin-left: 0px;
+  margin-left: 30px;
   border: 1px solid black;
 }