Github : Event Filter

HTML

<script src='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.0.4/bootstrap.min.js' type='text/javascript'></script>
<script src='http://code.angularjs.org/1.0.1/angular-1.0.1.js' type='text/javascript'></script>
<script src='http://code.angularjs.org/1.0.1/angular-resource-1.0.1.js' type='text/javascript'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js'></script>


<div class='navbar'>
  <div class='navbar-inner'>
    <div class='container'>
      <a class='brand' href='#'>Github Events Filter</a>
      <ul class='nav pull-right'>
        <li>
        <a href='http://xtargets.com'>by XTargets</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="span12">
      <div ng-controller="GithubControl">

        <p class="well"> Search for events on a specific user and repository. Uses <a href="http://angularjs.org">angularjs</a> </p>

        <div class="well">
          User: <input type="text" ng-model="user"/>
          <div class="input-append">
            Repo: <input type="text" ng-model="repo"/>
            <button class="btn" ng-click="search()">Search</button>
          </div>
        </div>

        <div>

          <ul class="unstyled well" ng-repeat="event in events.data">
            <li>
            <div class="avatar">
              <a href="{{event.actor.url}}">
                <img class="avatar" src="{{event.actor.avatar_url}}"/>
              </a>  
            </div>                  

            <div class="details">
              <b class="badge">{{event.type}}</b>
              <br/>                
              {{event.actor.login}}
              <br/>
              {{event.created_at | date}}
              <div ng-switch on="event.type">
                <div ng-switch-when="PullRequestEvent">
                  <a href="https://github.com/{{user}}/{{repo}}/pull/{{event.payload.number}}" 
                   ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

img.avatar {
    height: 100px;
    width: 100px;
}

li div.avatar {
   display: inline-block;
}

div.details {
    display: inline-block;
}

CoffeeScript

mod = angular.module 'modGit', ['ngResource']

# A directive for prettyfying JSON output. It can be used like
#
#    {{someJsonObject | prettyjson}}
#
# in the html template
mod.filter 'prettyjson', ->
  (input)->
    if input?
      JSON.stringify(input, undefined, 2)
    else
      ""

@GithubControl = ($scope, $http, $resource, $timeout) ->
       
  $scope.busy = -> $http.pendingRequests.length
       
  $scope.RepoEvents = $resource 'https://api.github.com/repos/:user/:repo/events'
    callback: 'JSON_CALLBACK'
    user: ''
    repo: ''
  ,
    get:
      method: 'JSONP'
 
  $scope.user = 'bradphelan'
  $scope.repo = 'rocket_tag'
  
  $scope.search = ->
    $scope.events = $scope.RepoEvents.get
      user: $scope.user
      repo: $scope.repo
      
  $scope.search()
 
 
angular.bootstrap(document, ['ngResource', 'modGit'])