-
Notifications
You must be signed in to change notification settings - Fork 3
/
script.js
82 lines (75 loc) · 2.77 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// I. API and database functions
async function getAPI(endpoint) {
try {
let response = await fetch(endpoint)
let result = await response.json()
return result
}
catch (error) {
console.log(error);
}
}
// DEUXIEME VERSION PLUS SIMPLE
function getAPI2() {
console.log("fetching")
fetch("http://localhost:4000/items")
.then(res => res.json())
.then(
(res) => {
console.log(res)
this.setState({
isLoaded : true,
items : res
})
console.log("fetched")
})
return res
}
async function get4LastFurniture() {
const data = await getAPI("http://localhost:4000/last4items")
const res = await data.slice(0,4)
return res
}
async function getCategoryFurniture(category) {
const url = "http://localhost:4000/get-items-byCategory/"+category
const data = await getAPI(url)
return data
}
//II. Vue objects management
//Template of Vue displayers
const displayerTemplate = `
<div class="card col-sm-3">
<img v-bind:src="obj.img_url" class="card-img-top">
<div class="card-body">
<h3 class="card-title"> {{ this.obj.name }} </h3>
<p class="card-text"> {{ this.obj.description }} </p>
<h5 class="card-price"> {{ this.obj.price }}€ </h5>
<div class="discover-btn-container">
<a href="#" class="btn btn-outline-secondary btn-discover"> Découvrir </a>
</div>
</div>
</div>
`
//Creator allows to create a displayer in a single function call.
//Requires a promise to feed its data
//Still requires mounting + creation of <product-card> html + import of vue script in all html pages
function productCardCreator(promise) {
const vm = Vue.createApp({
data() {
return { //contient toutes les données nécessaires à l'affichage de l'objet => vide au début, le remplissage se fait avec un appel API (promise) au moment du montage
objects: []
}
},
mounted() { //événement de déclenchement (comme click). Ici c'est lui qui déclenche la résolution de la promesse liée à l'appel API
promise.then((payload) => {
this.objects = payload; //peuplement de data.objects avec le résultat de la promesse
})
.catch(err => console.log(err + "when mounted()"))
}
})
vm.component('product-card', { //la partie front de l'objet => permet de créer une balise <product-card> dans le HTML
props: ['obj'], //le(s) paramètre(s) qui définissent le composant front. Ici obj est un objet qui contient toutes les infos nécessaires à l'affichage
template: displayerTemplate //défini au dessus : le code jsx qui définit l'apparence du module
})
return vm
}