fideligard

app/app.js

@@ -0,0 +1,45 @@
+var fideligard = angular.module("fideligard", ['ui.router']);
+
+fideligard.factory('_', [
+  '$window',
+  function($window) {
+    return $window._;
+  }
+]);
+
+fideligard.config([
+  '$stateProvider',
+  '$urlRouterProvider',
+  function($stateProvider, $urlRouterProvider) {
+
+    $urlRouterProvider.otherwise('/')
+
+    $stateProvider.state('dashboard', {
+      url: '/',
+      views: {
+        'stocks@': {
+          templateUrl: '/app/templates/stocks.html',
+          controller: 'StockCtrl'
+        },
+        'datepicker@': {
+          templateUrl: '/app/templates/slider.html',
+          controller: 'DatePickerCtrl'
+        }
+      },
+      resolve: {
+        stocks: ['StockService', function(StockService) {
+            return StockService.getAllStocks();
+          }
+        ],
+        date: ['DateService', function(DateService) {
+          DateService.setDate(1439784000000);
+          return DateService.getDate().time;
+        }]
+      }
+    })
+  }
+]);
+
+fideligard.run(function($rootScope) {
+  $rootScope.$on("$stateChangeError", console.log.bind(console));
+});

app/controllers/date_picker_ctrl.js

@@ -0,0 +1,12 @@
+fideligard.controller('DatePickerCtrl', [
+  '$scope', 'DateService', 'date',
+  function($scope, DateService, date) {
+    $scope.currentDate = date;
+
+    $scope.setDate = function() {
+      console.log('setting date')
+      var date = parseInt($scope.currentDate)
+      DateService.setDate(date);
+    }
+
+}]);

app/controllers/stock_ctrl.js

@@ -0,0 +1,8 @@
+fideligard.controller('StockCtrl', ['$scope', 'StockService',
+'stocks', 'DateService', function($scope, StockService, stocks, DateService){
+
+  $scope.stocks = stocks;
+  $scope.date = DateService.getDate().time;
+
+
+}])

app/directives/stock_ticker_directive.js

@@ -0,0 +1,29 @@
+fideligard.directive('stockTicker', ["StockService", "DateService", function(StockService, DateService){
+
+
+  return{
+    restrict: 'AE',
+    templateUrl: '/app/templates/stock_template.html',
+    scope: {
+      stock: '=',
+    },
+    link: function(scope, element, attrs) {
+      scope.currentDate =  DateService.getDate()
+      scope.updateStock = function() {
+        var formattedTime = scope.currentDate.time.toISOString().substring(0,10);
+        scope.currentStock = scope.stock[formattedTime]
+        var rawSym = scope.currentStock.Symbol
+        scope.symbol = rawSym.substring(0, rawSym.length-3);
+        scope.oneDay = StockService.stockChange(rawSym, formattedTime, 1);
+        scope.sevenDay = StockService.stockChange(rawSym, formattedTime, 7);
+        scope.thirtyDay = StockService.stockChange(rawSym, formattedTime, 30);
+
+      }
+      scope.$watch('currentDate.time', function(){
+        scope.updateStock();
+      })
+      scope.updateStock();
+    }
+  }
+
+}]);

app/services/date_service.js

@@ -0,0 +1,18 @@
+fideligard.factory('DateService', function() {
+
+  var _currentDate = {}
+
+  var setDate = function(date) {
+    _currentDate.time = new Date(date);
+  }
+
+  var getDate = function() {
+    return _currentDate
+  }
+
+  return {
+    setDate: setDate,
+    getDate: getDate
+  }
+
+})

app/services/stock_service.js

@@ -0,0 +1,77 @@
+fideligard.factory('StockService', [
+  '$http',
+  '$q',
+  '_',
+  function($http, $q, _) {
+
+    var obj = {}
+    var _stocks = {};
+    var _dates = {}
+    var _stockSyms = ['GOOG', 'VTI', 'COF', 'COF', 'IBM']
+
+    obj.getAllStocks = function() {
+      console.log('getting stocks')
+      if (!_.isEmpty(_stocks)) {
+        return _stocks
+      } else {
+        var requests = []
+        _stockSyms.forEach(function(sym) {
+          requests.push(obj.getStock(sym));
+        });
+        return $q.all(requests).then(function(response) {
+          response.forEach(function(data) {
+            _buildStock(data.data.query.results.quote)
+          })
+          return _stocks
+        })
+      }
+    }
+
+    var _buildStock = function(stocks) {
+      stocks.forEach(function(stock){
+        if (_stocks[stock.Symbol]) {
+          _stocks[stock.Symbol][stock.Date] = stock
+        } else {
+          _stocks[stock.Symbol] = {}
+          _stocks[stock.Symbol][stock.Date] = stock
+        }
+      })
+    }
+
+    var _stockQueryUrl = function(stockSym) {
+      var url = 'http://query.yahooapis.com/v1/public/yql?q=%20select%20*%20from%20yahoo.finance.historicaldata%20where%20symbol%20=%20%22' + stockSym + '%20%22and%20startDate%20=%20' + '"2015-07-01"' + '%20and%20endDate%20=%20' + '"2015-12-31"' + '%20&format=json&diagnostics=true%20&env=store://datatables.org/alltableswithkeys%20&callback=';
+      console.log('getting url')
+      return url
+    }
+
+    obj.getStock = function(stockSym) {
+      return $http({url: _stockQueryUrl(stockSym), method: 'GET'})
+    };
+
+    obj.getDates = function() {
+      return Object.keys(_stocks).sort();
+    }
+
+    var setPastDate = function(current, range) {
+      var past = new Date(new Date(current) - 86400000 * range)
+      return past.toISOString().substring(0,10)
+    }
+
+
+    obj.stockChange = function(sym, current, range) {
+      var currentStock = _stocks[sym][current]
+      var pastStock;
+      var counter = 0;
+      while (!pastStock){
+        if (counter > 4) { break }
+        pastDate = setPastDate(current, range)
+        pastStock = _stocks[sym][pastDate]
+        range++
+        counter++
+      }
+      return ((currentStock.Close - pastStock.Close) / (pastStock.Close))*100
+    };
+
+    return obj;
+  }
+])

app/styles.css

@@ -0,0 +1,3 @@
+body{
+  margin-top: 60px;
+}

app/templates/slider.html

@@ -0,0 +1,9 @@
+<div class="col-md-12">
+
+  <span>{{ 1438401600000 | date}}</span>
+  <input type="range" min="1438401600000" max="1451538000000" step="86400000" ng-model="currentDate" ng-change="setDate()">
+  <span>{{ 1451538000000 | date}}</span>
+  <div>
+    currentdate: {{currentDate | date}}
+  </div>
+</div>

app/templates/stock_template.html

@@ -0,0 +1,8 @@
+<tr>
+	<td> {{ symbol }} </td>
+  <td> {{ currentStock.Close | currency }} </td>
+  <td> {{oneDay | number : 2}}%</td>
+  <td> {{sevenDay | number : 2}}%</td>
+  <td> {{thirtyDay | number : 2}}%</td>
+  <td>trade</td>
+</tr>

app/templates/stocks.html

@@ -0,0 +1,18 @@
+<h2>Stocks</h2>
+<!-- <input type="text" ng-model="stockFilter"> -->
+<table class='tabel table-striped'>
+
+  <tr>
+    <th>Symbol</th>
+    <th>Price</th>
+    <th>1d</th>
+    <th>7d</th>
+    <th>30d</th>
+    <th>Trade?</th>
+  </tr>
+
+  <tr stock-ticker ng-repeat="stock in stocks" stock='stock'> </tr>
+  <div class="">
+    date{{date}}
+  </div>
+</table>