Browse Source

Finish work on Vue Ajax project

+ Convert to Vue SFC
+ Use NPM and vue-cli to generate and serve project
+ README instructions
master
Shaun Reed 5 months ago
parent
commit
4beb29331f
  1. 28
      .gitignore
  2. 24
      README.md
  3. 5
      babel.config.js
  4. 120
      components/ProductDisplay.js
  5. 53
      components/ReviewForm.js
  6. 38
      components/ReviewList.js
  7. 36
      index.html
  8. 18
      main.js
  9. 12243
      package-lock.json
  10. 43
      package.json
  11. BIN
      public/favicon.ico
  12. 0
      public/images/socks_blue.jpg
  13. 0
      public/images/socks_green.jpg
  14. 17
      public/index.html
  15. 0
      public/reviews.json
  16. 56
      src/App.vue
  17. BIN
      src/assets/logo.png
  18. 131
      src/components/ProductDisplay.vue
  19. 60
      src/components/ReviewForm.vue
  20. 44
      src/components/ReviewList.vue
  21. 4
      src/main.js

28
.gitignore vendored

@ -1,5 +1,33 @@ @@ -1,5 +1,33 @@
# JetBrains
**/.idea/**
# NPM
**/node_modules/**
# Vue
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]

24
README.md

@ -1,2 +1,26 @@ @@ -1,2 +1,26 @@
# sreed-web-programming
Stuff for Web Programming
## Project setup
```
sudo apt install npm
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
babel.config.js

@ -0,0 +1,5 @@ @@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

120
components/ProductDisplay.js

@ -1,120 +0,0 @@ @@ -1,120 +0,0 @@
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

@ -1,53 +0,0 @@ @@ -1,53 +0,0 @@
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

@ -1,38 +0,0 @@ @@ -1,38 +0,0 @@
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

@ -1,36 +0,0 @@ @@ -1,36 +0,0 @@
<!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

@ -1,18 +0,0 @@ @@ -1,18 +0,0 @@
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)
}
},
},
})

12243
package-lock.json generated

File diff suppressed because it is too large Load Diff

43
package.json

@ -0,0 +1,43 @@ @@ -0,0 +1,43 @@
{
"name": "store-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"axios": "^0.24.0",
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
public/favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

0
assets/images/socks_blue.jpg → public/images/socks_blue.jpg

Before

Width:  |  Height:  |  Size: 142 KiB

After

Width:  |  Height:  |  Size: 142 KiB

0
assets/images/socks_green.jpg → public/images/socks_green.jpg

Before

Width:  |  Height:  |  Size: 137 KiB

After

Width:  |  Height:  |  Size: 137 KiB

17
public/index.html

@ -0,0 +1,17 @@ @@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

0
reviews.json → public/reviews.json

56
assets/styles.css → src/App.vue

@ -1,3 +1,54 @@ @@ -1,3 +1,54 @@
<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;
@ -15,8 +66,8 @@ body { @@ -15,8 +66,8 @@ body {
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);
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;
}
@ -180,3 +231,4 @@ ul { @@ -180,3 +231,4 @@ ul {
width: 90%;
}
}
</style>

BIN
src/assets/logo.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

131
src/components/ProductDisplay.vue

@ -0,0 +1,131 @@ @@ -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

@ -0,0 +1,60 @@ @@ -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

@ -0,0 +1,44 @@ @@ -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

@ -0,0 +1,4 @@ @@ -0,0 +1,4 @@
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Loading…
Cancel
Save