Finish work on Vue Ajax

This commit is contained in:
Shaun Reed 2021-12-13 15:15:05 -05:00
parent 4bf6e77058
commit 489362c6ab
10 changed files with 473 additions and 0 deletions

2
.gitignore vendored
View File

@ -1,3 +1,5 @@
# JetBrains
**/.idea/**
# Byte-compiled / optimized / DLL files # Byte-compiled / optimized / DLL files
__pycache__/ __pycache__/
*.py[cod] *.py[cod]

Binary file not shown.

After

Width:  |  Height:  |  Size: 142 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 137 KiB

182
assets/styles.css Normal file
View File

@ -0,0 +1,182 @@
body {
background-color: #f2f2f2;
margin: 0px;
font-family: tahoma;
color: #282828;
}
.button {
margin: 30px;
background-color: #39495c;
border-radius: 5px;
font-size: 18px;
width: 200px;
height: 60px;
color: white;
padding: 20px;
box-shadow: inset 0 -0.6em 1em -0.35em rgba(0, 0, 0, 0.17),
inset 0 0.6em 2em -0.3em rgba(255, 255, 255, 0.15),
inset 0 0 0em 0.05em rgba(255, 255, 255, 0.12);
text-align: center;
cursor: pointer;
}
.cart {
margin: 25px 100px;
float: right;
border: 1px solid #d8d8d8;
padding: 10px 30px;
background-color: white;
-webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
box-shadow: 2px 15px -12px rgba(0, 0, 0, 0.57);
}
.color-circle {
width: 50px;
height: 50px;
margin-top: 8px;
border: 2px solid #d8d8d8;
border-radius: 50%;
}
.disabledButton {
background-color: #d8d8d8;
cursor: not-allowed;
}
h1 {
font-size: 50px;
}
h3 {
font-size: 25px;
}
img {
border: 2px solid #d8d8d8;
width: 70%;
margin: 40px;
padding: 15px;
-webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
box-shadow: 2px 15px -12px rgba(0, 0, 0, 0.57);
}
input {
width: 100%;
height: 40px;
margin-bottom: 20px;
}
label {
font-size: 20px;
margin-bottom: 5px;
}
li {
font-size: 18px;
}
.nav-bar {
background: linear-gradient(-90deg, #84cf6a, #16c0b0);
height: 60px;
margin-bottom: 25px;
-webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.57);
}
.out-of-stock-img {
opacity:0.5
}
p {
font-size: 22px;
}
.product-display {
display: flex;
flex-direction: column;
padding: 1rem;
}
.product-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.product-image,
.product-info {
width: 50%;
}
.review-form {
display: flex;
flex-direction: column;
width: 425px;
padding: 20px;
margin: 40px;
border: 2px solid #d8d8d8;
background-color: white;
-webkit-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 15px -12px rgba(0, 0, 0, 0.57);
box-shadow: 2px 15px -12px rgba(0, 0, 0, 0.57);
}
.review-container {
width: 425px;
padding: 20px;
background-color: white;
-webkit-box-shadow: 0px 2px 20px -12px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 2px 20px -12px rgba(0, 0, 0, 0.57);
box-shadow: 2px 20px -12px rgba(0, 0, 0, 0.57);
margin-left: 40px;
border: 2px solid #d8d8d8;
}
.review-container li {
margin-bottom: 30px;
}
.review-form .button {
display: block;
margin: 30px auto;
}
select {
height: 40px;
font-size: 20px;
background-color: white;
cursor: pointer;
}
textarea {
width: 95%;
height: 70px;
padding: 10px;
font-size: 20px;
margin-bottom: 20px;
}
ul {
list-style-type: none;
}
@media only screen and (max-width: 600px) {
.container {
flex-direction: column;
}
.product-image,
.product-info {
margin-left: 10px;
width: 100%;
}
.review-form {
width: 90%;
}
}

View 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
View 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
View 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
},
}
})

36
index.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vue Mastery</title>
<!-- Import Styles -->
<link rel="stylesheet" href="./assets/styles.css" />
<!-- Import Vue.js and Axios -->
<script src="https://unpkg.com/vue@3.0.0-beta.12/dist/vue.global.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<!-- Import App and Components -->
<script src="./main.js"></script>
<script src="components/ProductDisplay.js"> </script>
<script src="components/ReviewForm.js"></script>
<script src="components/ReviewList.js"></script>
<div id="app">
<div class="cart">
Cart({{ cart }})
</div>
</br> </br> </br> </br> </br>
<product-display
brand="Brand-A"
@add-to-cart="addToCart" @remove-from-cart="removeFromCart">
</product-display>
</div>
<!-- Import Js -->
<script src="./main.js"></script>
<script>
const mountedApp = app.mount('#app')
</script>
</body>
</html>

18
main.js Normal file
View File

@ -0,0 +1,18 @@
const app = Vue.createApp({
data() {
return {
cart: [],
}
},
methods: {
addToCart(item) {
this.cart.push(item)
},
removeFromCart(item) {
index = this.cart.indexOf(item)
if (index > -1) {
this.cart.splice(index, 1)
}
},
},
})

24
reviews.json Normal file
View File

@ -0,0 +1,24 @@
{
"reviews": [
{
"name": "Joe",
"review": "Good stuff",
"rating": 4
},
{
"name": "Jack",
"review": "Bad stuff",
"rating": 1
},
{
"name": "Jerry",
"review": "Ok stuff",
"rating": 3
},
{
"name": "Jim",
"review": "Great stuff",
"rating": 5
}
]
}