Finish work on Vue Ajax project

+ Convert to Vue SFC
+ Use NPM and vue-cli to generate and serve project
+ README instructions

.gitignore

@@ -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]

README.md

@@ -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/).

babel.config.js

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

components/ProductDisplay.js

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

components/ReviewForm.js

@@ -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))
-        }
-    }
-})

components/ReviewList.js

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

index.html

@@ -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>

main.js

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

package.json

@@ -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"
+  ]
+}

public/index.html

@@ -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>

src/App.vue

@@ -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;
@@ -180,3 +231,4 @@ ul {
     width: 90%;
   }
 }
+</style>

src/components/ProductDisplay.vue

@@ -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>

src/components/ReviewForm.vue

@@ -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>

src/components/ReviewList.vue

@@ -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>

src/main.js

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