<!DOCTYPE html>
<html ng-app="app" ng-controller="appCtrl">
<head>
    <meta charset="utf-8" />
    <title>Wijmo StockPortfolio</title>

    <!-- ensure IE uses the latest version of IE (yes, yes...) -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- jQuery/Angular/Bootstrap -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js" type="text/javascript"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

    <!-- Wijmo -->
    <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.input.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.chart.min.js" type="text/javascript"></script>
    <script src="scripts/vendor/wijmo.angular.min.js" type="text/javascript"></script>

    <link rel="stylesheet" type="text/css" href="styles/vendor/wijmo.min.css" />

    <!-- app scripts and styles -->
    <script src="scripts/portfolio.js" type="text/javascript"></script>
    <script src="scripts/app.js" type="text/javascript"></script>
    <script src="scripts/directives/appDctv.js" type="text/javascript"></script>
    <script src="scripts/controllers/appCtrl.js" type="text/javascript"></script>
    <link href="styles/app.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.grapecity.com/wijmo/wijmo.sample.toolbar.js" type="text/javascript"></script>
</head>
<body>
    <div class="header">
        <div class="container">
            <h1>
                <img src="resources/finance.png" />
                Wijmo StockPortfolio
            </h1>
            <p>
                This application was developed using TypeScript, Bootstrap, and
                <a href="http://www.componentone.com">ComponentOne's Wijmo</a> controls.
                The stock prices come from one of <a href="https://www.quandl.com/">Quandl's</a> free
                financial databases.
            </p>
            <p>
                This view uses a standard HTML table element to display the portfolio items.
                <a href="defaultFlex.htm">
                    Click here to switch to a view that shows the items in a FlexGrid.
                </a>
            </p>
        </div>
    </div>

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">Portfolio</div>
            <div class="table-responsive" style="overflow-y:visible">
                <table class="table table-condensed">
                    <thead ng-click="portfolio.view.moveCurrentTo(null)">
                        <tr>
                            <th class="text-left" style="width:23px"><app-sorter view="portfolio.view" binding="name">Name</app-sorter></th>
                            <th class="text-left"><app-sorter view="portfolio.view" binding="symbol">Symbol</app-sorter></th>
                            <th class="text-center"><app-sorter view="portfolio.view" binding="chart">Chart</app-sorter></th>
                            <th class="text-right"><app-sorter view="portfolio.view" binding="lastPrice">Last Price</app-sorter></th>
                            <th class="text-right"><app-sorter view="portfolio.view" binding="change">Change</app-sorter></th>
                            <th class="text-right"><app-sorter view="portfolio.view" binding="shares">Shares</app-sorter></th>
                            <th class="text-right"><app-sorter view="portfolio.view" binding="purchasePrice">Price</app-sorter></th>
                            <th class="text-right"><app-sorter view="portfolio.view" binding="costBasis">Cost Basis</app-sorter></th>
                            <th class="text-right"><app-sorter view="portfolio.view" binding="marketValue">Market Value</app-sorter></th>
                            <th class="text-right"><app-sorter view="portfolio.view" binding="gain">Gain</app-sorter></th>
                            <th class="text-center">Remove</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr style="cursor: pointer"
                            ng-repeat="item in portfolio.view.items"
                            ng-class="{active: item.symbol == portfolio.view.currentItem.symbol}"
                            ng-click="portfolio.view.moveCurrentTo(item)">
                            <td class="clipCell">
                                <span ng-style="{'background-color' : item.color}">
                                    &nbsp;&nbsp;&nbsp;
                                </span>
                                &nbsp;
                                {{item.name}}
                            </td>
                            <td>
                                <a ng-href="https://www.quandl.com/data/WIKI/{{item.symbol}}" target="_blank">
                                    {{item.symbol}}
                                </a>
                            </td>
                            <td class="text-center">
                                <input type="checkbox" ng-model="item.chart" />
                            </td>
                            <td class="text-right">
                                {{item.lastPrice | glbz:'n2'}}
                            </td>
                            <td class="text-right">
                                <span ng-style="{color: getAmountColor(item.change)}">
                                    {{item.changePercent | glbz:'p2'}}
                                </span>
                            </td>
                            <td class="text-right inputCell" style="padding: 2px;">
                                <wj-input-number value="item.shares"
                                                 is-required="false"
                                                 min="0"
                                                 format="n0">
                                </wj-input-number>
                            </td>
                            <td class="text-right inputCell" style="padding: 2px;">
                                <wj-input-number value="item.purchasePrice"
                                                 is-required="false"
                                                 min="0"
                                                 format="n2">
                                </wj-input-number>
                            </td>
                            <td class="text-right">
                                {{item.costBasis | glbz:'n2'}}
                            </td>
                            <td class="text-right">
                                {{item.marketValue | glbz:'n2'}}
                            </td>
                            <td class="text-right">
                                <span ng-style="{color: getAmountColor(item.gain)}">
                                    {{item.gainPercent | glbz:'p2'}}
                                </span>
                            </td>
                            <td class="text-center">
                                <a href="" ng-click="portfolio.removeItem(item.symbol)">
                                    <span class="glyphicon glyphicon-remove" style="color:#D14836"></span>
                                </a>
                            </td>
                        </tr>
                    </tbody>

                    <!-- table footer -->
                    <tfoot>
                        <tr class="panel-footer"
                            ng-click="portfolio.view.moveCurrentTo(null)">
                            <td class="text-right">
                                <b>Add to portfolio:</b>
                            </td>
                            <td colspan="4">
                                <div class="input-group">
                                    <wj-auto-complete items-source-function="searchCompany"
                                                      display-member-path="symbolName"
                                                      selected-value-path="symbol"
                                                      selected-value="portfolio.newItemSymbol"
                                                      show-drop-down-button="false"
                                                      placeholder="company name or symbol"
                                                      css-match="match">
                                    </wj-auto-complete>
                                    <span>
                                        <button type="button" class="btn btn-primary"
                                                ng-click="portfolio.addNewItem()"
                                                ng-disabled="!portfolio.canAddNewItem()">
                                            <span class="glyphicon glyphicon-plus"></span>
                                        </button>
                                    </span>
                                </div>
                            </td>
                            <td class="text-right" colspan="2">
                                <b>Total:</b>
                            </td>
                            <td class="text-right">
                                <b>{{portfolio.cost | glbz:'n2'}}</b>
                            </td>
                            <td class="text-right">
                                <b>{{portfolio.value | glbz:'n2'}}</b>
                            </td>
                            <td class="text-right">
                                <span ng-style="{color: getAmountColor(portfolio.gain)}">
                                    <b>{{portfolio.gainPercent | glbz:'p2'}}</b>
                                </span>
                            </td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>

        <!-- chart -->
        <div class="panel panel-default">
            <div class="panel-heading">
                Chart
                <div class="btn-group btn-group-xs pull-right">
                    <button type="button" class="btn btn-default" ng-click="portfolio.chartPeriod=0" ng-class="{active: portfolio.chartPeriod == 0}">YTD</button>
                    <button type="button" class="btn btn-default" ng-click="portfolio.chartPeriod=1" ng-class="{active: portfolio.chartPeriod == 1}">6m</button>
                    <button type="button" class="btn btn-default" ng-click="portfolio.chartPeriod=2" ng-class="{active: portfolio.chartPeriod == 2}">12m</button>
                    <button type="button" class="btn btn-default" ng-click="portfolio.chartPeriod=3" ng-class="{active: portfolio.chartPeriod == 3}">24m</button>
                    <button type="button" class="btn btn-default" ng-click="portfolio.chartPeriod=4" ng-class="{active: portfolio.chartPeriod == 4}">36m</button>
                    <button type="button" class="btn btn-default" ng-click="portfolio.chartPeriod=5" ng-class="{active: portfolio.chartPeriod == 5}">All</button>
                </div>
            </div>
            <wj-flex-chart binding="change"
                           binding-x="date"
                           chart-type="Line"
                           selection-mode="Series"
                           selection-changed="selectionChanged(s,e)"
                           control="ctx.chart"
                           style="height:300px;margin:14px;border:none">
                <wj-flex-chart-series ng-repeat="item in portfolio.view.items"
                                      items-source="item.chartData"
                                      name="{{item.symbol}}"
                                      ng-attr-style="{ 'stroke' : item.color }"
                                      visibility="item.chart ? 'Visible' : 'Hidden'">
                </wj-flex-chart-series>
                <wj-flex-chart-axis wj-property="axisY" format="p0"></wj-flex-chart-axis>
                <wj-flex-chart-axis wj-property="axisX" format="MMM-yyyy"></wj-flex-chart-axis>
                <wj-flex-chart-legend position="None"></wj-flex-chart-legend>
            </wj-flex-chart>
        </div>
    </div>

    <!-- Google analytics -->
    
</body>
</html>
