Firebase target pillar

by anup1986

HTML

<script src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script>
<script src="//hiroshi.github.io/knockoutFire/knockoutfire-0.0.5.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="statusBox">
                <div class="nextTarget"><span>Next target: <!-- ko text: nextTarget--><!-- /ko --> -</span>
                </div>
              <div class="pillar" data-bind="attr: { style: progress }">
                     <h3 data-bind="text: progressText"></h3>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.statusBox {
    width: 100%;
    min-height: 200px;
    position: relative;
    border-left: 1px solid lightgrey;
    margin-left: 6em;
}
.nextTarget {
    position: absolute;
    top: 0;
    left: -7em;
}
.pillar {
    border: 1px solid lightgrey;
    border-radius: 5px;
    background: lightgreen;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80%;
    text-align: center;
    vertical-align: middle;
    color: white;
    padding: 0 20px 0 20px;
}

.pillar h3 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    text-align: center;
    margin: -13px 0 0 0;
}

JavaScript

var firebase = new Firebase('https://uppstrom.firebaseio.com/items');

var viewModel = function () {
    var self = this;

    self.posts = KnockoutFire.observable(firebase, {
        "$tweet": {
            "likes": true
        }
    });
    
    self.nextTarget = ko.observable(20);
    self.progress = ko.observable('height: 0%');

    self.totalLikes = ko.computed(function () {
        var likes = 0;
        ko.utils.arrayForEach(self.posts(), function (tweet) {
            if (tweet().likes() > 0) likes += tweet().likes();
        });
        return likes;
    });

    self.progressText = ko.computed(function () {
        return self.totalLikes() + " / " + self.nextTarget();
    });

    self.totalLikes.subscribe(function () {
        $('.pillar').stop().animate({
            height: self.totalLikes() / self.nextTarget() * 100 + '%'
        });
    });
};

ko.applyBindings(new viewModel());