21/11/2012 Development / java script

<html ng-app>
    <head>
        <title>Lista de compras</title>
        <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript"></script>
        <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
        <script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js" type="text/javascript"></script>
        <script src="Scripts/angular-ui-0.3.1/build/angular-ui.js" type="text/javascript"></script>


        <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
        <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
       
        <style type="text/css">
            .negative { color: white; background: red}
            .positive { color: white; background: green}
         td { font-family: Arial; font-size: 11px; width: 50px; text-align: center }
        </style>

    </head>
    <body>
   
    <h1>Grid de Cotações utilizando AngularJS</h1>
    <div ng-controller="GridModel">
        <table border="1" cellspacing="0" cellpadding="7">
            <tr>
                <td></td>
                <td>Stock</td>
                <td>Volume</td>
                <td>Date</td>
                <td>Time</td>
                <td>Change</td>
                <td>Sales</td>
                <td>Price</td>
                <td>Stock</td>
                <td>Volume</td>
                <td>Date</td>
                <td>Time</td>
                <td>Change</td>
                <td>Sales</td>
                <td>Price</td>
                <td>Stock</td>
                <td>Volume</td>
                <td>Date</td>
                <td>Time</td>
                <td>Change</td>
                <td>Sales</td>
                <td>Price</td>
                <td></td>
            </tr>
            <tr ng-repeat="item in itens">
                <td><input type="text" value="{{ item.price }}" /></td>
                <td>{{ item.stock }}</td>
                <td>{{ item.volume }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.change }}</td>
                <td>{{ item.sales }}</td>
                <td ng-class="{positive:showCssPriceMajor(item), 'negative' : showCssPriceMenor(item)}">{{ item.price }}</td>
                <td>{{ item.stock }}</td>
                <td>{{ item.volume }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.change }}</td>
                <td>{{ item.sales }}</td>
                <td ng-class="{positive:showCssPriceMajor(item), 'negative' : showCssPriceMenor(item)}">{{ item.price }}</td>
                <td>{{ item.stock }}</td>
                <td>{{ item.volume }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.time }}</td>
                <td>{{ item.change }}</td>
                <td>{{ item.sales }}</td>
                <td ng-class="{positive:showCssPriceMajor(item), 'negative' : showCssPriceMenor(item)}">{{ item.price }}</td>
                <td ng-click="removeItem()"><i class="icon-remove"></i></td>
            </tr>
        </table>

        <input type="text" id="cotacaotxtStock" />
        <button type="button" ng-click="addItem()">Adicionar Ativo</button>
        <button type="button" ng-click="removeItem()">Remover Ativo</button>
    </div>

        <script>

            var change = ['+', '-', '='];

            function getTime() {
                var now = new Date();
                var hours = now.getHours();
                var minutes = now.getMinutes();
                var seconds = now.getSeconds();
                var timeValue = "" + ((hours > 12) ? hours - 12 : hours);
                timeValue += ((minutes < 10) ? ":0" : ":") + minutes;
                timeValue += ((seconds < 10) ? ":0" : ":") + seconds;
                timeValue += (hours >= 12) ? " PM" : " AM";
                return timeValue.toString();
            };

            function Quote(stock) {

                this.stock = stock;
                this.volume;
                this.date;
                this.time;
                this.change;
                this.sales;
                this.price;
            };

            var initialStockData = [];
            var arrStocks = ['PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'BRKM5', 'ITUB4', 'EMBR3', 'SANB11', 'ITSA4', 'CYRE3', 'PETR4', 'CESP6', 'VALE5', 'TAMM4', 'BBDC4', 'USIM5', 'MMXM3', 'LLXL3', 'OGXP3', 'GOAU4', 'BBAS3', 'NETC4', 'AMBV4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4', 'LIGT3', 'LREN3', 'SBSP3', 'GGBR4', 'GFSA3', 'GOLL4'];
            for (var x in arrStocks) {
                initialStockData.push(new Quote(arrStocks[x]));
            }

            function GridModel($scope) {
                $scope.itens = initialStockData;

                $scope.addItem = function () {
                    $scope.itens.push(new Quote(document.getElementById('txtStock').value));
                };

                $scope.removeItem = function () {
                    $scope.itens.pop();
                };

                $scope.update = function () {

                    var items = $scope.itens;
                    var len = items.length;

                    var rnd = Math.floor(Math.random() * len);

                    var stock = items[rnd];
                    stock.sales = (Math.floor(Math.random() * 50));
                    stock.price = (Math.floor(Math.random() * 90) - 30);
                    stock.change = (change[Math.floor(Math.random() * change.length)]);
                    stock.time = getTime();

                    $scope.$apply();

                };

                $scope.showCssPriceMajor = function($scope) {
                    return ($scope.price > 30 ? true : false);
                };

                $scope.showCssPriceMenor = function ($scope) {
                    return ($scope.price < 0 ? true : false);
                };


                var that = this;
                setInterval(function () { $scope.update() }, 1);

            };
        </script>

    </body>
</html>