104 lines
3.3 KiB
HTML
104 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Hello Bulma!</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="hero hero-body">
|
|
<h1 class="title">Cook Assistant</h1>
|
|
<h2 class="subtitle">Recettes</h2>
|
|
</div>
|
|
<!-- Details View -->
|
|
<section v-if="active_view > -1" class="section has-background-grey-lighter">
|
|
<div class="box">
|
|
<button @click="closeActiveView" class="button is-pulled-right">X close</button>
|
|
<h4 class="title">{{ items[active_view].title }}</h4>
|
|
<h6 class="subtitle">{{ categories[items[active_view].category].name }}</h6>
|
|
<p><strong>{{ items[active_view].ingredients }}</strong></p>
|
|
<button @click="deleteRecipe(active_view + 1)" class="button is-danger is-pulled-right">DELETE !</button>
|
|
</div>
|
|
</section>
|
|
<!-- Category List View -->
|
|
<section v-else class="section has-background-grey-lighter">
|
|
<div class="container">
|
|
<div v-if="active_category == -1" class="columns">
|
|
<div v-for="c in categories" :key="c.id" class="column">
|
|
<button @click="setActiveCategory(c.id)" class="button is-large is-primary has-text-dark">{{ c.name }}</button>
|
|
</div>
|
|
</div>
|
|
<div v-else class="box">
|
|
<button @click="setActiveCategory(-1)" class="button is-pulled-left"><< back</button>
|
|
<h2 class="subtitle">{{ categories[active_category].name }}</h2>
|
|
<ul>
|
|
<li v-for="item in displayed" :key="item.id">
|
|
<a href="" @click.prevent="setActiveView(items.findIndex((i) => i.id ==item.id))">{{ item.title }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
|
|
// TODO: Must find a viable use of Recipe.id instead of active_view !
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data () {
|
|
return {
|
|
categories: [
|
|
{id: 0, name: "Petit-déjeuner"},
|
|
{id: 1, name: "Entrée"},
|
|
{id: 2, name: "Plat principal"},
|
|
{id: 3, name: "Dessert"}
|
|
],
|
|
active_category: -1,
|
|
active_view: -1,
|
|
items: []
|
|
};
|
|
},
|
|
methods: {
|
|
setActiveCategory: function(id) {
|
|
this.active_category = id;
|
|
},
|
|
setActiveView: function(idx) {
|
|
this.active_view = idx;
|
|
},
|
|
closeActiveView: function() {
|
|
this.active_view = -1;
|
|
},
|
|
deleteRecipe: function(id) {
|
|
fetch("/api/delete/" + id)
|
|
.then((res) => res.json())
|
|
.then((data) => console.log("Deleted :" + data))
|
|
.catch((err) => console.error(err));
|
|
this.closeActiveView();
|
|
},
|
|
fetchRecipesList: function() {
|
|
fetch("/api/list")
|
|
.then((res) => res.json())
|
|
.then((data) => this.items = data)
|
|
.catch(function(err) {
|
|
console.error(err);
|
|
});
|
|
}
|
|
},
|
|
computed: {
|
|
displayed: function() {
|
|
return this.items.filter(
|
|
rec => rec.category == this.active_category
|
|
);
|
|
}
|
|
},
|
|
mounted () {
|
|
this.fetchRecipesList()
|
|
}
|
|
});
|
|
</script>
|
|
</html>
|