cato447/EIST-Teamprojekt
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Karthik Vempati
2022-07-22 21:37:02 +02:00
parent dafe8e7430 92d03120b1
commit 5e7f6edc8b
6 changed files with 182 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/Api.js
View File

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

27
frontend/src/App.vue
View File

@@ -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>

6
frontend/src/components/Custom404Page.vue
View File

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

24
frontend/src/components/ItemModel.vue
View File

@@ -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{
// z-index: 3;
// position: center;
// width: 200vw;
// height: 5vh;
// left: 0;
// top: 10vh;
// display: grid;
// align-content: center;
// justify-content: center;
//}
.field-header-box{
color: white
}
.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 {

2
frontend/src/components/LoginPage.vue
View File

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

180
frontend/src/components/RecipeModel.vue
View File

@@ -30,22 +30,36 @@
</ul>
</div>
<div class="nav-background"/>
<!-- input field -->
<v-item-group>
<v-row>
<div>
<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"
md="3"
sm="3"
>
<v-item>
<v-card
class="mx-auto"
max-width="400"
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"
@@ -54,39 +68,43 @@
>
</v-img>
<v-card-title>{{recipe.title}}</v-card-title>
<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--primary">
<div>Whitehaven Beach</div>
<!-- <v-card-text class="text&#45;&#45;primary">-->
<!-- <div>Whitehaven Beach</div>-->
<div>Whitsunday Island, Whitsunday Islands</div>
</v-card-text>
<!-- <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-->
<!-- >-->
<!-- Share-->
<!-- </v-btn>-->
<v-btn
color="orange"
:href="recipe.sourceUrl"
text
>
<!-- @click = ""-->
Explore
<!-- @click = ""-->
Cook
</v-btn>
</v-card-actions>
</v-card>
</v-item>
</v-col>
</v-row>
</v-item-group>
</v-container>
</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,6 +135,11 @@ const Recipes = {
},
mounted() {
this.populateRecipes()
},
methods: {
populateFromFridge() {
api.getRecipesForFridge()
.then(response => {
this.$log.debug("Data loaded: ", response.data)
@@ -165,16 +152,43 @@ const 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{
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 {
@@ -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;
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;
}