Countdown

cdrCountdown.js

'use strict';

angular.module('cdrApp')
    .directive('cdrCountdown', function () {
        return {
            // template: '<div class="cajaUltimaHora"><div class="ultimaHoraIzda"><div class="ultimaHoraTira"></div><p class="claimUltimaHora">¡Tu reserva al límite!</p><p id="digitosUltimaHora" class="digitosUltimaHora"></p></div><div class="ultimaHoraDcha"></div></div>',
            restrict: 'E',
            replace: true,
            scope: {
                'time': '=time'
            },

            controller: ["$scope",function ($scope) {

                var time = diffBetweenNowAndFutureTimestamps($scope.time ? $scope.time : 0);

                $scope.timeAsText = "dddo";




                function nextStep() {
                    --time;
                }

                function diffBetweenNowAndFutureTimestamps(future) {
                    var now = parseInt((new Date().getTime() / 1000), 10),
                        diff;

                    // mock
                    // todo pasar a tests
                    // future = now + Math.round(Math.random() * 3600 * 24 * 5);
                    diff = future - now;

                    if (diff < 0) {
                        diff = 0;
                    }

                    return diff;
                }

                function getSeconds() {
                    return time;
                }

                /**
                 * actualiza el estilo del elemento
                 */
                function updateTextTimeStyle() {
//                    if (time > 600 && !elementTextTime.hasClass('prioriBaja')) {
//                        elementTextTime.addClass('prioriBaja');
//                    } else if (time > 300 && !elementTextTime.hasClass('tenmin')) {
//                        elementTextTime.addClass('prioriMedia');
//                        elementTextTime.removeClass('prioriBaja');
//                    } else if (time < 300 && !elementTextTime.hasClass('fivemin')) {
//                        elementTextTime.removeClass('prioriMedia');
//                        elementTextTime.addClass('prioriAlta');
//                    }
                }

                /**
                 * valores con dos dígitos
                 * @param val
                 * @returns {string}
                 */
                function twoDigits(val) {
                    return val < 10 ? '0' + val : val;
                }

                /**
                 * returns time in text format d. H:m:s
                 * @param countDowndInSeconds
                 * @param sep
                 * @returns {string}
                 */
                function getTimeText(countDowndInSeconds, sep) {
                    var totalTimeInSeconds = parseInt(countDowndInSeconds, 10),
                        days,
                        textTime = '',
                        time = [];

                    // days
                    days = Math.floor(totalTimeInSeconds / (3600 * 24));
                    if (days > 0) {
                        textTime = days + 'd. ';
                        // hours discounting days
                        time.push(twoDigits(Math.floor(totalTimeInSeconds % (3600 * 24) / 3600)));
                    } else {
                        // hours
                        time.push(twoDigits(Math.floor(totalTimeInSeconds / 3600)));
                    }
                    // mins
                    time.push(twoDigits(Math.floor(totalTimeInSeconds % 3600 / 60)));
                    // secs
                    time.push(twoDigits(Math.floor(totalTimeInSeconds % 60)));

                    textTime += time.join(sep ? sep : ':');

                    $scope.timeAsText = textTime;
                }

                setInterval(function () {
                    nextStep();
                    if (getSeconds() >= 0) {
                        console.log(".");
                        getTimeText(getSeconds());
                    }
                }, 1000);

            }],

            template: '<div></div>',
            compile: function(element, attrs, transclude) {
                var template;



                if(attrs.cdrType == 'simple') {
                    template = '<div id="digitosUltimaHora">**{{timeAsText}} - {{time}}</div>';
                } else {
                    template = '<div class="cajaUltimaHora">' +
                        '<div class="ultimaHoraIzda">' +
                        '<div class="ultimaHoraTira"></div>' +
                        '<p class="claimUltimaHora">¡Tu reserva al límite!</p>' +
                        '<p id="digitosUltimaHora" class="digitosUltimaHora">{{timeAsText}}</p>' +
                        '</div>' +
                        '<div class="ultimaHoraDcha"></div>' +
                        '</div>';
                }

                element.replaceWith(template);
            },

            link: function (scope, element, attrs) {
                if ( scope.time <= 0) {
                    element.hide();
                    return;
                }
            }
        };
    });