last commit...pushing to github

mwmcode · Jan 15, 2017 · 55f61c0 · 55f61c0
commit 55f61c0
Show file tree

Hide file tree

Showing 22 changed files with 4,457 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["latest", { "modules": false }],
+    "stage-2"
+  ]
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+.DS_Store
+node_modules/
+dist/
+*.log
diff --git a/README.md b/README.md
@@ -0,0 +1,12 @@
+# Stock Trader
+
+A simple VueJS app that makes use of [Vuex](https://github.com/vuejs/vuex) and [vue-router](https://github.com/vuejs/vue-router)
+
+### Build Setup
+
+- `yarn` _or_  `npm install` to install dependencies
+- `npm run dev` to serve with hot reload at _localhost:8080_ 
+- `npm run build` to build for production with minification
+
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/index.html b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Stock Trader</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+  </head>
+  <body>
+    <div id="app">
+        <!-- Vue app lives here -->
+    </div>
+    <script src="/dist/build.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "stocktrader",
+  "description": "A simple VueJS app using vue-router & vuex.",
+  "version": "1.0.0",
+  "author": "mustafa",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+  },
+  "dependencies": {
+    "axios": "^0.15.3",
+    "vue": "^2.1.0",
+    "vue-router": "^2.1.1",
+    "vuex": "^2.1.1"
+  },
+  "devDependencies": {
+    "babel-core": "^6.0.0",
+    "babel-loader": "^6.0.0",
+    "babel-preset-latest": "^6.16.0",
+    "babel-preset-stage-2": "^6.18.0",
+    "cross-env": "^3.0.0",
+    "css-loader": "^0.25.0",
+    "file-loader": "^0.9.0",
+    "vue-loader": "^10.0.0",
+    "vue-template-compiler": "^2.1.0",
+    "webpack": "^2.1.0-beta.25",
+    "webpack-dev-server": "^2.1.0-beta.9"
+  }
+}
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,59 @@
+<template>
+    <div class="container">
+
+        <app-header></app-header>
+
+        <div class="col-xs-12">
+            <transition name='slide'>
+                <router-view></router-view>
+            </transition>
+        </div>
+    </div>
+</template>
+
+<script>
+    import AppHeader from './components/Header.vue' 
+    
+    export default {
+        name: 'app',
+        components: {
+            AppHeader
+        },
+        created() {
+            this.$store.dispatch('initStocks');
+        }
+    }
+</script>
+
+<style>
+    body {
+        padding: 30px;
+    }
+    .slide-enter-active {
+        animation: slide-in 200ms ease-out forwards;
+    }
+    .slide-leave-active {
+        /*animation: slide-out 200ms ease-out forwards;*/
+    }
+    @keyframes slide-in {
+        from {
+            transform: translateY(-30px);
+            opacity: 0;
+        }
+        to {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes slide-out {
+        from {
+            transform: translateY(0);
+            opacity: 1;
+        }
+        to {
+            transform: translateY(-30px);
+            opacity: 0;
+        }
+    }
+</style>
diff --git a/src/_data.js b/src/_data.js
@@ -0,0 +1,6 @@
+export default [
+    { id: 1, name: "BMW", price: 240 },
+    { id: 2, name: "Adobe", price: 130 },
+    { id: 3, name: "Google", price: 450 },
+    { id: 4, name: "Microsoft", price: 350 }
+];
diff --git a/src/bootstrap.js b/src/bootstrap.js
@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+import axios from 'axios';
+import VueRouter from 'vue-router';
+
+Vue.use(Vuex);
+Vue.use(VueRouter);
+
+window.Vue = Vue;
+window.axios = axios;
+
+
+window.axios.defaults.headers.common = {
+    'X-Requested-With': 'XMLHttpRequest'
+};
diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -0,0 +1,91 @@
+<template>
+    <nav class="navbar navbar-default">
+        <div class="container-fluid">
+            <div class="navbar-header">
+                <router-link to="/" class="navbar-brand">
+                    Stock Trader
+                </router-link>
+            </div>
+
+            <div class="collapse navbar-collapse">
+                <ul class="nav navbar-nav">
+                   <router-link to="/portfolio" tag="li">
+                       <a>Portfolio</a>
+                   </router-link>
+                   <router-link to="/stocks" tag="li">
+                       <a>Stocks</a>
+                   </router-link>
+                </ul>
+                <strong class="navbar-text navbar-right"> 
+                    Fnds: {{ funds | currency }}
+                </strong>
+                <ul class="nav navbar-nav navbar-right">
+                    <li>
+                        <a href="#" @click="endDay">End Day</a>
+                    </li>
+                    <li @click="dropDownOpen =! dropDownOpen"
+                        class="dropdown" 
+                        :class="{open: dropDownOpen}"
+                    > 
+                        <a href="#"class="dropdown-toggle"data-toggle="dropdown"
+                            role="button"aria-haspopup="true"aria-expanded="false"
+                        >   
+                            Save & Load <span class="caret"> </span>
+                        </a>
+                        <ul class="dropdown-menu">
+                            <li @click="saveData">
+                                <a href="#" >Save Data</a>
+                            </li>
+                            <li @click="loadData">
+                                <a href="#" >Load Data</a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div><!-- /.navbar-collapse -->
+        </div><!-- /.container-fluid -->
+    </nav>
+</template>
+
+<script>
+    import { mapActions, mapGetters } from 'vuex';
+
+    export default {
+        data() {
+            return {
+                dropDownOpen: false
+            };
+        },
+        computed: {
+            funds() {
+                return this.$store.getters.funds;
+            },
+            ...mapGetters([
+                'funds',
+                'stockPortfolio',
+                'stocks'
+            ])
+        },
+        methods: {
+            ...mapActions([
+                'randomizeStocks',
+                'fetchData'
+            ]),
+            endDay() {
+                this.randomizeStocks();
+            },
+            saveData() {
+                const data = {
+                    funds: this.funds,
+                    stocks: this.stocks, 
+                    stockPortfolio: this.stockPortfolio,
+                };  
+
+                axios.put('https://stock-trader-58055.firebaseio.com/data.json', data);
+            },
+            loadData() {
+                this.fetchData();
+            }
+        }
+    }
+</script>
diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -0,0 +1,23 @@
+<template>
+    <div>
+        <h1>Trade or View your Portfolio</h1>
+        <h6>You may Save and Load your Data</h6>
+        <h6>Click on 'End Day' to begin a New Day!</h6>
+        <hr>
+        <p>Your Funds: {{ funds | currency }}</p>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex';
+
+    export default {
+        computed: {
+            ...mapGetters(['funds'])
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/portfolio/Portfolio.vue b/src/components/portfolio/Portfolio.vue
@@ -0,0 +1,26 @@
+<template>
+    <div>
+        <Stock v-for="stock in stocks" :stock="stock"> </Stock>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex';
+    import Stock from './Stock.vue';
+
+    export default {
+        components: {
+            Stock
+        },
+
+        computed: {
+            ...mapGetters({
+                stocks: 'stockPortfolio'
+            })
+        } 
+    }
+</script>
+
+<style scoped>
+
+</style>    
diff --git a/src/components/portfolio/Stock.vue b/src/components/portfolio/Stock.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="col-sm-6 col-md-4">
+        <div class="panel panel-info">
+            <div class="panel-heading">
+                <h3 class="panel-title">
+                    {{ stock.name }}
+                    <small>Price: {{ stock.price }} | {{ stock.quantity }} </small>
+                </h3>
+            </div>
+            <div class="panel-body">
+                <div class="pull-left">
+                    <input 
+                        v-model="quantity"
+                        type="number" class='form-control' placeholder="Quantity"
+                        :class="{ danger: insufficientQuantity }"
+                    >
+                </div>
+                <div class="pull-right">
+                    <button 
+                        @click="sell"
+                        :disabled="insufficientQuantity || quantity < 1 || !Number.isInteger(quantity)"
+                        class ="btn"
+                        :class="[insufficientQuantity ? 'btn-danger' : 'btn-success']"
+                    >
+                        {{ insufficientQuantity ? 'No can do' : 'Sell' }}
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+    import { mapActions } from 'vuex';
+
+    export default {
+        props: ['stock'],
+        
+        data() {
+            return {
+                quantity: 0
+            };
+        },
+        computed: {
+            insufficientQuantity() {
+                return this.quantity > this.stock.quantity;
+            }
+        },
+        methods: {
+            ...mapActions([
+                'sellStocks'
+            ]),
+            sell() {
+                const order = {
+                    id: this.stock.id,
+                    price: this.stock.price,
+                    quantity: this.quantity,
+                };
+                this.sellStocks(order);
+                this.quantity = 0;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .danger {
+        border: 1px solid red;
+    }
+</style>