vikingeducation · eating247 · Mar 18, 2017 · Mar 18, 2017 · Mar 18, 2017 · Apr 26, 2017
diff --git a/README.md b/README.md
@@ -1,4 +1,25 @@
-# assignment_fideligard_spa
-Buy low, sell high.
+# fideligard
 
-[An AngularJS JavaScript single-page web application using services, directives, ui-router, and good modular code to create a stock portfolio simulator using Yahoo's finance trading data](http://www.vikingcodeschool.com)
+An AngularJS single-page web application using UI-Router multi-view states, NoSQL data modeling, and modular code to create a historical stock portfolio simulator with trading data via the Yahoo Finance API.
+
+To fire on local server, `git clone` the repository and run `ruby -run -e httpd . -p 3000`.
+
+![Welcome](https://github.com/eating247/fideligard/blob/master/screenshots/1.png)
+
+## Features
+
+### User Flow
+
+- Users are prompted to begin trading after stock data loads.
+- Via the stocks panel, users enter trades through the trade form, where fields are auto-populated with respective stock and date info. 
+- Submission disabled if user attempts to buy more stocks than their available cash, or sell more quantity than they own.
+
+![Trade](https://github.com/eating247/fideligard/blob/master/screenshots/2.png)
+
+- All transactions up to selected date can be sorted according to date, price, ticker, or type (buy/sell).
+
+![Transactions](https://github.com/eating247/fideligard/blob/master/screenshots/3.png)
+
+- User's portfolio updates according to selected date, as adjusted through the date slider.
+
+![Portfolio](https://github.com/eating247/fideligard/blob/master/screenshots/4.png)
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,26 @@
+.alert {
+    margin-top: -21px; 
+}
+
+.template {
+  border: 3px solid black;
+  margin-bottom: 20px;
+  padding: 5px 10px 30px 15px;
+}
+
+.bottom {
+  margin-top: 25px;
+}
+
+table td {
+    border-top: none !important;
+}
+
+th {
+    white-space: nowrap;
+}
+
+button a, a:hover, a:focus {
+  color: white;
+  text-decoration: none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html ng-app="Fideligard">
+<head>
+  <title>Fideligard</title>
+
+  <!-- Bootstrap CSS -->
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cosmo/bootstrap.min.css">
+
+  <link rel="stylesheet" type="text/css" href="css/main.css">
+
+  <!-- jQuery library -->
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
+  <!-- Bootstrap JavaScript -->
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
+</head>
+<body>
+
+  <!-- nav -->
+  <nav class="navbar navbar-default">
+    <div class="container-fluid">
+      <div class="navbar-header">
+        <a class="navbar-brand" href="#">Fideligard Historical Portfolio Simulator</a>
+      </div>
+    </div>
+  </nav>
+
+  <!-- flash -->
+  <div class="alert alert-info alert-dismissable text-center">
+    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
+    <strong>Please be patient!</strong> Data may require a few seconds to load at start.
+    <br>
+    <small>*This app is dependent on the Yahoo Finance API. Please refresh the page if the Stocks panel remains empty.</small>
+  </div>
+
+<div class="container">
+  <div class="row">
+
+    <!-- stocks panel -->
+    <div class="col-sm-4">
+      <div ui-view="stocks" class="template"></div>
+    </div>
+
+    <div class="col-sm-8">
+      <!-- date slider -->
+      <div ui-view="date" class="template"></div>
+
+      <!-- portfolio simulator -->
+      <div ui-view="portfolio" class="template"></div>
+    </div>
+
+  </div>
+</div>
+
+<script type="text/javascript" src="js/app.js"></script>
+
+<!-- controllers -->
+<script type="text/javascript" src="js/controllers/stocks_controller.js"></script>
+<script type="text/javascript" src="js/controllers/date_controller.js"></script>
+<script type="text/javascript" src="js/controllers/trade_controller.js"></script>
+<script type="text/javascript" src="js/controllers/transactions_controller.js"></script>
+<script type="text/javascript" src="js/controllers/portfolio_controller.js"></script>
+
+
+<!-- services -->
+<script type="text/javascript" src="js/services/date_service.js"></script>
+<script type="text/javascript" src="js/services/stock_service.js"></script>
+<script type="text/javascript" src="js/services/trade_service.js"></script>
+<script type="text/javascript" src="js/services/portfolio_service.js"></script>
+<!-- directives -->
+<script type="text/javascript" src="js/directives/stock_table_row.js"></script>
+<script type="text/javascript" src="js/directives/portfolio_header.js"></script>
+<script type="text/javascript" src="js/directives/transaction_table_row.js"></script>
+<script type="text/javascript" src="js/directives/welcome.js"></script>
+<script type="text/javascript" src="js/directives/portfolio_positions_table_row.js"></script>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,61 @@
+var Fideligard = angular.module("Fideligard", ['ui.router']);
+
+Fideligard.config(["$stateProvider", "$urlRouterProvider", 
+  function($stateProvider, $urlRouterProvider) {
+  $urlRouterProvider.otherwise("/stocks")
+
+  $stateProvider
+    .state('stocks', {
+      url: '/stocks',
+      views: {
+        "date": {
+          templateUrl: "js/templates/date.html",
+          controller: "DateCtrl"
+        },
+        "stocks": {
+          templateUrl: "js/templates/stocks.html",
+          controller: "StocksCtrl"
+        },
+        "portfolio": {
+          templateUrl: "js/templates/portfolio.html",
+          controller: "PortfolioCtrl"
+        }
+      },
+      resolve: {
+        stockData: function(StockService) {
+          return StockService.all();
+        }
+      }
+    })
+    .state('stocks.trade', {
+      url: '/trade',
+      params: { // default params
+        date: '2016-08-29',
+        symbol: "AAPL",
+        price: '106.82'
+      },
+      views: {
+        "portfolio@": {
+          templateUrl: "js/templates/trade.html",
+          controller: "TradeCtrl"
+        }
+      }
+    })
+    .state('stocks.transactions', {
+      url: '/transactions',
+      views: {
+        "portfolio@": {
+          templateUrl: "js/templates/transactions.html",
+          controller: "TransactionsCtrl"
+        }
+      }
+    })
+}])
+
+Fideligard.factory('_', ['$window', function($window) {
+  return $window._;
+}]);
+
+Fideligard.run(function($rootScope){
+  $rootScope.$on("$stateChangeError", console.log.bind(console));
+});
diff --git a/js/controllers/date_controller.js b/js/controllers/date_controller.js
@@ -0,0 +1,17 @@
+Fideligard.controller("DateCtrl", ["$scope", "DateService", "StockService", "$rootScope",
+  function($scope, DateService, StockService, $rootScope) {
+
+    $scope.dateValue;
+
+    $scope.displayDate = function() {
+      return DateService.stringFormat();
+    }
+
+    $scope.setDateValue = function(dateForm) {
+      if (dateForm.date.$valid) {
+        $scope.date = DateService.setDateValue($scope.dateValue);
+        $rootScope.$broadcast('change.date');
+      }
+    }
+
+}]);
diff --git a/js/controllers/portfolio_controller.js b/js/controllers/portfolio_controller.js
@@ -0,0 +1,21 @@
+Fideligard.controller("PortfolioCtrl", 
+  ["$scope", "TradeService", "DateService", "PortfolioService",
+  function($scope, TradeService, DateService, PortfolioService) {
+
+    $scope.trades = TradeService.getTrades();
+
+    $scope.date = DateService.stringFormat();
+
+    $scope.positions = PortfolioService.getPositions();
+
+    $scope.overview = PortfolioService.getOverview();
+
+    // update portfolio table with current date selections
+    $scope.$on('change.date', function(event) {
+      $scope.trades = TradeService.getTrades();
+      $scope.date = DateService.hyphenFormat();
+      $scope.positions = PortfolioService.getPositions();
+      $scope.overview = PortfolioService.getOverview();
+    })
+
+}]);
diff --git a/js/controllers/stocks_controller.js b/js/controllers/stocks_controller.js
@@ -0,0 +1,25 @@
+Fideligard.controller("StocksCtrl", 
+  ["$scope", "DateService", "StockService", "stockData", "$state",
+  function($scope, DateService, StockService, stockData, $state) {
+
+    $scope.displayDate = DateService.stringFormat();
+
+    $scope.date = DateService.hyphenFormat();
+
+    $scope.symbolFilterValue = false;
+
+    $scope.changeSymbolFilter = function() {
+      $scope.symbolFilterValue = !$scope.symbolFilterValue;
+    }
+
+    $scope.tableData = StockService.formatStockData();
+
+    // update stock table with new date selections
+    $scope.$on('change.date', function(event) {
+      $scope.date = DateService.hyphenFormat();
+      $scope.displayDate = DateService.stringFormat();
+      $scope.tableData = StockService.formatStockData();
+    })
+
+
+}]);
diff --git a/js/controllers/trade_controller.js b/js/controllers/trade_controller.js
@@ -0,0 +1,41 @@
+Fideligard.controller("TradeCtrl", 
+  ["$scope", "$stateParams", "StockService", "TradeService", "$state", "PortfolioService",
+  function($scope, $stateParams, StockService, TradeService, $state, PortfolioService) {
+
+    var _stocks = StockService.formatStockData();
+
+    // convert params into newTrade
+    $scope.newTrade = {
+      date: $stateParams.date,
+      price: $stateParams.price,
+      symbol: $stateParams.symbol,
+      quantity: 10,
+      type: true,
+    };
+
+    $scope.cash = TradeService.getCash();
+
+    $scope.cost = function() {
+      return !isNaN($scope.newTrade.quantity) ? ($scope.newTrade.quantity * $scope.newTrade.price) : '--';
+    }
+
+    $scope.orderStatus = function() {
+      if ($scope.newTrade.type) {
+        // if buying: make sure cash can cover trade
+        return $scope.cost() < $scope.cash ? true : false;
+      } else {
+        // if selling: cannot sell more quantity than they own
+        var position = PortfolioService.findPos($scope.newTrade.symbol)
+        return position && (position.quantity >= $scope.newTrade.quantity) ? true: false; 
+      } 
+    }
+
+    $scope.submitTrade = function() {
+      // validate + store in trade service
+      if ($scope.orderStatus()) {
+        TradeService.save($scope.newTrade);
+        $state.go('stocks.transactions');
+      }
+    }
+
+}]);
diff --git a/js/controllers/transactions_controller.js b/js/controllers/transactions_controller.js
@@ -0,0 +1,19 @@
+Fideligard.controller("TransactionsCtrl", 
+  ["$scope", "TradeService",
+  function($scope, TradeService) {
+
+    $scope.transactions = TradeService.getTrades();
+
+    $scope.changeSort = function(arg) {
+      $scope.sortType = arg;
+      $scope.sortValue = !$scope.sortValue;
+    }
+
+    $scope.sortDisplay = function(arg) {
+      if ($scope.sortType === arg) {
+        return $scope.sortValue ? 'glyphicon glyphicon-triangle-top' : 'glyphicon glyphicon-triangle-bottom';
+      }
+    }
+
+
+}]);
diff --git a/js/directives/portfolio_header.js b/js/directives/portfolio_header.js
@@ -0,0 +1,11 @@
+Fideligard.directive('portfolioHeader', function(){
+    return {
+        templateUrl: "js/templates/portfolio_header.html",
+        restrict: "A",
+        transclude: true,
+        scope: {
+          stock: "=",
+          date: "="
+        }
+    };
+});
diff --git a/js/directives/portfolio_positions_table_row.js b/js/directives/portfolio_positions_table_row.js
@@ -0,0 +1,10 @@
+Fideligard.directive('portfolioPositionsTableRow', function(){
+    return {
+        templateUrl: "js/templates/portfolio_positions_table_row.html",
+        restrict: "A",
+        scope: {
+          position: "=",
+          date: "="
+        }
+    };
+});
diff --git a/js/directives/stock_table_row.js b/js/directives/stock_table_row.js
@@ -0,0 +1,10 @@
+Fideligard.directive('stockTableRow', function(){
+    return {
+        templateUrl: "js/templates/stock_table_row.html",
+        restrict: "A",
+        scope: {
+          stock: "=",
+          date: "="
+        }
+    };
+});
diff --git a/js/directives/transaction_table_row.js b/js/directives/transaction_table_row.js
@@ -0,0 +1,9 @@
+Fideligard.directive('transactionTableRow', function(){
+    return {
+        templateUrl: "js/templates/transaction_table_row.html",
+        restrict: "A",
+        scope: {
+          transaction: "=",
+        }
+    };
+});
diff --git a/js/directives/welcome.js b/js/directives/welcome.js
@@ -0,0 +1,6 @@
+Fideligard.directive('welcome', function(){
+    return {
+        templateUrl: "js/templates/welcome.html",
+        restrict: "A",
+    };
+});