Finish work on Vue Ajax
This commit is contained in:
120
components/ProductDisplay.js
Normal file
120
components/ProductDisplay.js
Normal file
@@ -0,0 +1,120 @@
|
||||
app.component('product-display', {
|
||||
props: {
|
||||
brand:{
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
template:
|
||||
`<div class="product-display">
|
||||
<div class="product-container">
|
||||
<div class="product-image">
|
||||
<img :class="[!inStock ? 'out-of-stock-img' : '']"
|
||||
v-bind:src="image">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<!-- Product title, stock -->
|
||||
<h1> {{ title }} </h1>
|
||||
<p v-if="inStock <= 10 && inStock > 0">
|
||||
Only {{ inStock }} left!
|
||||
</p>
|
||||
<p v-else-if="inStock">
|
||||
In Stock
|
||||
</p>
|
||||
<p v-else>
|
||||
Out of Stock
|
||||
</p>
|
||||
|
||||
<!-- Product Details -->
|
||||
<ul>
|
||||
<li v-for="detail in details">
|
||||
{{detail}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Product Variants -->
|
||||
<div v-for="(variant, index) in variants"
|
||||
key="variant.id"
|
||||
class="color-circle"
|
||||
:style="{backgroundColor: variant.color}"
|
||||
@mouseover="updateVariant(index)">
|
||||
</div>
|
||||
|
||||
<!-- Product Sizes -->
|
||||
<div v-for="size in sizes"
|
||||
key="size.id">
|
||||
{{ size.size }}
|
||||
</div>
|
||||
|
||||
<!-- Cart Controls -->
|
||||
<button class="button"
|
||||
:class="{disabledButton: !inStock}"
|
||||
:disabled="!inStock"
|
||||
v-on:click="addToCart">
|
||||
Add to Cart
|
||||
</button>
|
||||
<button class="button"
|
||||
:class="[cartContains ? '' : 'disabledButton']"
|
||||
:disabled="!cartContains"
|
||||
v-on:click="removeFromCart">
|
||||
Remove from Cart
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<review-list></review-list>
|
||||
<review-form></review-form>`,
|
||||
data() {
|
||||
return {
|
||||
product: 'Socks',
|
||||
selectedVariant: 0,
|
||||
inventory: 11,
|
||||
details: ['50% cotton', '30% wool', '20% polyester'],
|
||||
variants: [
|
||||
{id: 1, color: 'green', image: './assets/images/socks_green.jpg', quantity: 11, ordered: 0},
|
||||
{id: 2, color: 'blue', image: './assets/images/socks_blue.jpg', quantity: 0, ordered: 0},
|
||||
],
|
||||
sizes: [
|
||||
{id: 3, size: 'small'},
|
||||
{id: 4, size: 'large'},
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addToCart() {
|
||||
this.variants[this.selectedVariant].ordered += 1
|
||||
this.variants[this.selectedVariant].quantity -= 1
|
||||
this.$emit('add-to-cart', this.titleLong)
|
||||
},
|
||||
removeFromCart() {
|
||||
this.variants[this.selectedVariant].ordered -= 1
|
||||
this.variants[this.selectedVariant].quantity += 1
|
||||
this.$emit('remove-from-cart', this.titleLong)
|
||||
},
|
||||
updateVariant(index) {
|
||||
this.selectedVariant = index
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
title() {
|
||||
return this.brand + ' ' + this.product
|
||||
},
|
||||
titleLong() {
|
||||
return this.brand
|
||||
+ '-' + this.product
|
||||
+ '-' + this.variants[this.selectedVariant].id
|
||||
},
|
||||
image() {
|
||||
return this.variants[this.selectedVariant].image
|
||||
},
|
||||
|
||||
cartContains() {
|
||||
return (this.variants[this.selectedVariant].ordered > 0)
|
||||
},
|
||||
inStock() {
|
||||
return this.variants[this.selectedVariant].quantity
|
||||
},
|
||||
|
||||
}
|
||||
})
|
||||
53
components/ReviewForm.js
Normal file
53
components/ReviewForm.js
Normal file
@@ -0,0 +1,53 @@
|
||||
app.component('review-form', {
|
||||
template:
|
||||
`<form class="review-form" @submit.prevent="onSubmit">
|
||||
<h3>Leave a review</h3>
|
||||
<label for="name">Name:</label>
|
||||
<input id="name" v-model="name">
|
||||
|
||||
<label for="review">Review:</label>
|
||||
<textarea id="review" v-model="review"></textarea>
|
||||
|
||||
<label for="rating">Rating:</label>
|
||||
<select id="rating" v-model.number="rating">
|
||||
<option>5</option>
|
||||
<option>4</option>
|
||||
<option>3</option>
|
||||
<option>2</option>
|
||||
<option>1</option>
|
||||
</select>
|
||||
|
||||
<input class="button" type="submit" value="Submit">
|
||||
|
||||
</form>`,
|
||||
data() {
|
||||
return {
|
||||
name: '',
|
||||
review: '',
|
||||
rating: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
if (this.name == '' || this.review == '' || this.rating == null) {
|
||||
alert("Review is incomplete. Please fill out every field.")
|
||||
return
|
||||
}
|
||||
|
||||
let productReview = {
|
||||
name: this.name,
|
||||
review: this.review,
|
||||
rating: this.rating
|
||||
}
|
||||
this.addReview(productReview)
|
||||
|
||||
this.name = ''
|
||||
this.review = ''
|
||||
this.rating = null
|
||||
},
|
||||
addReview(review){
|
||||
// TODO: Append review to json
|
||||
axios.post('./reviews.json', JSON.stringify(review))
|
||||
}
|
||||
}
|
||||
})
|
||||
38
components/ReviewList.js
Normal file
38
components/ReviewList.js
Normal file
@@ -0,0 +1,38 @@
|
||||
app.component('review-list', {
|
||||
template:
|
||||
`
|
||||
<div class="review-container">
|
||||
<h3>Reviews:</h3>
|
||||
<ul>
|
||||
<li v-for="(review, index) in reviews" :key="index">
|
||||
{{ review.name }} gave this {{ review.rating }} stars
|
||||
<br/>
|
||||
"{{ review.review }}"
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
`,
|
||||
data() {
|
||||
return {
|
||||
current_reviews: this.reviews
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
data = this
|
||||
axios.get('./reviews.json')
|
||||
.then( function (response) {
|
||||
data.current_reviews = response.data.reviews
|
||||
})
|
||||
.catch( function (error) {
|
||||
console.log("FAIL: " + error)
|
||||
})
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
reviews() {
|
||||
this.load()
|
||||
return this.current_reviews
|
||||
},
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user