Finish work on Vue Ajax project
+ Convert to Vue SFC + Use NPM and vue-cli to generate and serve project + README instructions
This commit is contained in:
234
src/App.vue
Normal file
234
src/App.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Vue Mastery</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- div element with id="app" initialized by public/index.html-->
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductDisplay from './components/ProductDisplay.vue'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
ProductDisplay
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cart: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addToCart(item) {
|
||||
this.cart.push(item)
|
||||
},
|
||||
removeFromCart(item) {
|
||||
let index = this.cart.indexOf(item)
|
||||
if (index > -1) {
|
||||
this.cart.splice(index, 1)
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
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%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
131
src/components/ProductDisplay.vue
Normal file
131
src/components/ProductDisplay.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<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, index) in details" :key="index">
|
||||
{{detail}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Product Variants -->
|
||||
<!-- :key="variant.id"-->
|
||||
<div v-for="(variant, index) in variants"
|
||||
:key="index"
|
||||
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-form/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ReviewList from "./ReviewList.vue";
|
||||
import ReviewForm from "./ReviewForm.vue";
|
||||
|
||||
export default {
|
||||
name: 'ProductDisplay',
|
||||
components: {
|
||||
ReviewList, ReviewForm
|
||||
},
|
||||
props: {
|
||||
brand: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['add-to-cart', 'remove-from-cart'],
|
||||
data() {
|
||||
return {
|
||||
product: 'Socks',
|
||||
selectedVariant: 0,
|
||||
inventory: 11,
|
||||
details: ['50% cotton', '30% wool', '20% polyester'],
|
||||
variants: [
|
||||
{id: 1, color: 'green', image: './images/socks_green.jpg', quantity: 11, ordered: 0},
|
||||
{id: 2, color: 'blue', image: './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
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
60
src/components/ReviewForm.vue
Normal file
60
src/components/ReviewForm.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<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>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'ReviewForm',
|
||||
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))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
44
src/components/ReviewList.vue
Normal file
44
src/components/ReviewList.vue
Normal file
@@ -0,0 +1,44 @@
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
name: 'ReviewList',
|
||||
data() {
|
||||
return {
|
||||
current_reviews: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.load()
|
||||
},
|
||||
methods: {
|
||||
load() {
|
||||
let data = this
|
||||
axios.get('./reviews.json')
|
||||
.then(function (response) {
|
||||
data.current_reviews = response.data.reviews
|
||||
})
|
||||
.catch(function (error) {
|
||||
console.log("AJAX FAILED: " + error)
|
||||
})
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
reviews() {
|
||||
return this.current_reviews
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
4
src/main.js
Normal file
4
src/main.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
Reference in New Issue
Block a user