cgiacofei/TandoorRecipes
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

working on a recipe view

Browse Source
This commit is contained in:
vabene1111
2021-01-11 18:31:06 +01:00
parent df0cfc3677
commit 34028587fc
9 changed files with 120 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
vue/package.json
View File

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.21.1",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"vue": "^2.6.11",
@ -21,6 +22,7 @@
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"vuex": "^3.6.0",
"webpack-bundle-tracker": "0.4.3"
},
"eslintConfig": {

42
vue/src/apps/RecipeView/RecipeView.vue
View File

@ -1,8 +1,12 @@
<template>
<div id="app">
<h1>Recipe View</h1>
<div id="app" v-if="!loading">
<h1>{{ recipe.name }}</h1>
{{ recipe }}
<img v-bind:src="recipe.image">
<div v-for="s in recipe.steps" v-bind:key="s.id">
<Step v-bind:step="s" v-bind:servings="servings"></Step>
</div>
</div>
</template>
@ -15,25 +19,47 @@ import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import {makeToast} from "@/utils/utils.js";
import Step from "@/components/Step";
import axios from "axios";
Vue.use(BootstrapVue)
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
servings: 1
}
})
export default {
name: 'App',
components: {},
name: 'RecipeView',
store: store,
components: {
Step
},
data() {
return {
recipe: undefined
loading: true,
recipe: undefined,
servings: 1,
}
},
mounted() {
makeToast("Error", "Error", "danger")
//makeToast("Error", "Error", "danger")
this.loadRecipe(5)
},
methods: {
loadRecipe: function (recipe_id) {
fetch(`/api/recipe/${recipe_id}`).then((response) => {
axios.get(`/api/recipe/${recipe_id}`).then((response) => {
this.recipe = response.data;
this.loading = false;
}).catch((err) => {
console.log(err)
})

25
vue/src/components/HelloWorld.vue
View File

@ -1,25 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
{{ text }}
</div>
</template>
<script>
import {myCustomTestFunction} from "@/utils";
export default {
name: 'HelloWorld',
data() {
return {
text: ''
}
},
props: {
msg: String
},
mounted() {
this.text = myCustomTestFunction("Neuer Text")
}
}
</script>

20
vue/src/components/Ingredient.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div>
<input type="checkbox">
{{ingredient.amount}}
{{ingredient.unit}}
{{ingredient.food}}
{{ingredient.note}}
</div>
</template>
<script>
export default {
name: 'Ingredient',
props: {
ingredient: Object,
servings: Number
}
}
</script>

34
vue/src/components/Step.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div>
<div v-for="i in step.ingredients" v-bind:key="i.id">
<Ingredient v-bind:ingredient="i" v-bind:servings="servings"></Ingredient>
</div>
<br/>
Servings Step: {{servings}}
{{ step.instruction }}
<br/>
<br/>
</div>
</template>
<script>
import Ingredient from "@/components/Ingredient";
export default {
name: 'Step',
components: {
Ingredient
},
props: {
step: Object,
servings: Number,
}
}
</script>

27
vue/src/components/ToastComponent.vue
View File

@ -1,27 +0,0 @@
<template>
</template>
<script>
import Vue from 'vue'
import {BootstrapVue} from 'bootstrap-vue'
Vue.use(BootstrapVue)
export default {
name: "ToastComponent",
methods: {
this.$bvToast.toast(message, {
title: title,
variant: variant,
toaster: 'b-toaster-top-center',
solid: true
})
}
}
</script>
<style scoped>
</style>

2
vue/webpack-stats.json
View File

@ -1 +1 @@
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.500c161c00c1013409a2.hot-update.js","publicPath":"http://localhost:8080/recipe_view.500c161c00c1013409a2.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.500c161c00c1013409a2.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\utils\\utils.js\n 2:1 error 'Vue' is not defined no-undef\n\n✖ 1 problem (1 error, 0 warnings)\n"}
{"status":"done","publicPath":"http://localhost:8080/","chunks":{"chunk-vendors":[{"name":"js/chunk-vendors.js","publicPath":"http://localhost:8080/js/chunk-vendors.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\chunk-vendors.js"}],"recipe_view":[{"name":"js/recipe_view.js","publicPath":"http://localhost:8080/js/recipe_view.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\js\\recipe_view.js"},{"name":"recipe_view.2e57c38f0490ab82e173.hot-update.js","publicPath":"http://localhost:8080/recipe_view.2e57c38f0490ab82e173.hot-update.js","path":"F:\\Developement\\Django\\recipes\\cookbook\\static\\vue\\recipe_view.2e57c38f0490ab82e173.hot-update.js"}]},"error":"ModuleError","message":"Module Error (from ./node_modules/eslint-loader/index.js):\n\nF:\\Developement\\Django\\recipes\\vue\\src\\apps\\RecipeView\\RecipeView.vue\n 7:36 error Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive vue/valid-v-for\n 8:19 error 'i' is defined but never used vue/no-unused-vars\n 8:39 error Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive vue/valid-v-for\n\n✖ 3 problems (3 errors, 0 warnings)\n"}

14
vue/yarn.lock
View File

@ -1864,6 +1864,13 @@ aws4@^1.8.0:
resolved "https://registry.npm.taobao.org/aws4/download/aws4-1.11.0.tgz?cache=0&sync_timestamp=1604103580457&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Faws4%2Fdownload%2Faws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
integrity sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=
axios@^0.21.1:
version "0.21.1"
resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8"
integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA==
dependencies:
follow-redirects "^1.10.0"
babel-eslint@^10.1.0:
version "10.1.0"
resolved "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@ -3947,7 +3954,7 @@ flush-write-stream@^1.0.0:
inherits "^2.0.3"
readable-stream "^2.3.6"
follow-redirects@^1.0.0:
follow-redirects@^1.0.0, follow-redirects@^1.10.0:
version "1.13.1"
resolved "https://registry.npm.taobao.org/follow-redirects/download/follow-redirects-1.13.1.tgz?cache=0&sync_timestamp=1607917368794&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffollow-redirects%2Fdownload%2Ffollow-redirects-1.13.1.tgz#5f69b813376cee4fd0474a3aba835df04ab763b7"
integrity sha1-X2m4Ezds7k/QR0o6uoNd8Eq3Y7c=
@ -8280,6 +8287,11 @@ vue@^2.6.11:
resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
vuex@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.6.0.tgz#95efa56a58f7607c135b053350833a09e01aa813"
integrity sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ==
watchpack-chokidar2@^2.0.1:
version "2.0.1"
resolved "https://registry.npm.taobao.org/watchpack-chokidar2/download/watchpack-chokidar2-2.0.1.tgz?cache=0&sync_timestamp=1604989063099&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack-chokidar2%2Fdownload%2Fwatchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"