BinaryMuse/controllers.coffee

## controllers.coffee
# RealmsController is the only controller in the application, which fetches
# the realm list from the Realms service and displays them in a list.
app.controller 'RealmsController', ($scope, $timeout, $window, Realms, hashChange) ->
  $scope.realms = []
  $scope.search = ''
  $scope.lastUpdate = null

  # Any time the URL hash changes, update the `search` variable.
  hashChange (value) ->
    $scope.search = value

  # Conversely, if the user types into the search box and updates
  # the `search` value, represent the change in the URL.
  $scope.updateHash = ->
    $window.location.hash = $scope.search

  # Updates the server list and schedules another update in 5 minutes
  refresh = ->
    $scope.loading = true
    Realms (realms) ->
      $scope.realms = realms
      $scope.loading = false
      $scope.lastUpdate = new Date()
      $timeout(refresh, 60 * 5 * 1000)

  # Trigger the initial data fetch from the API
  refresh()

## example.html
<input type="text" ng-model="myValue">
Value: {{ myValue }}

## filters.coffee
# The realmType filter simply formats the raw `type` string provided by
# the Blizzard API so that it is presented nicely in the view.
app.filter 'realmType', ->
  (type) ->
    switch type
      when 'pve'   then "PvE"
      when 'pvp'   then "PvP"
      when 'rp'    then "RP"
      when 'rppvp' then "RP PvP"

# The capitalize filter capitalizes the first character in a string.
app.filter 'capitalize', ->
  (str) -> if str then str[0].toUpperCase() + str[1..-1].toLowerCase() else ""

# The boolToString filter returns the first string if the value is
# turthy and the second string otherwise.
app.filter 'boolToString', ->
  (boolean, trueString, falseString) -> if boolean then trueString else falseString

## services.coffee
# The Realms service provides a function that takes a callback and
# calls it with an array of Realms from the Blizzard API.
app.factory 'Realms', ($http) ->
  (cb) ->
    url = "http://us.battle.net/api/wow/realm/status?jsonp=JSON_CALLBACK"
    $http.jsonp(url).success (json) -> cb(json.realms)

# The hashChange service is a function that calls a passed-in callback
# every time the URL's hash changes with the new value of the hash.
app.factory 'hashChange', ($window, $rootScope) ->
  (listener) ->
    $window.onhashchange = ->
      $rootScope.$apply ->
        listener($window.location.hash?.substr(1) ? '')
    # Invoke once immediately
    listener($window.location.hash?.substr(1) ? '')

## view-body.html
<body ng-app='wowRealmStatus'>
  <!-- ... -->
  <div id='main' class='ng-cloak' ng-cloak ng-controller='RealmsController'>

## view-input.html
<p id='search'>
  Search:
  <input type='text' size='30' ng-model='search' ng-change='updateHash()'>
  <span id='loading'>
    <img ng-show='loading' alt='loading' src='images/loading.gif'>
  </span>
</p>

## view-repeat.html
<div ng-repeat="realm in realms | filter:{name:search}">
  <h1><a ng-href='#{{realm.name}}'>{{realm.name}}</a>
    ({{realm.type | realmType}})</h1>

  <p>
    Status: {{realm.status | boolToString:'Up':'Down'}}<br>
    Population: {{realm.population | capitalize}}<br>
    Queue: {{realm.queue | boolToString:'Yes':'No'}}
  </p>
</div>

## view-reset.html
<p id='reset' ng-show='search'>
  <a ng-href='#'>Show All</a>
</p>

## view-time.html
<p id='time'>
  Last updated:
  <span ng-hide='lastUpdate'>never</span>
  <span ng-show='lastUpdate'>{{lastUpdate | date:'MMM d, h:mm a'}}</span><br>
  <em>Data updates every 5 minutes</em>
</p>

## view.html
<html>
<head>
  <title>WoW Realm Status</title>
  <script type='text/javascript' src='js/angular.js'></script>
  <script type='text/javascript' src='js/app.js'></script>
  <link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body ng-app='wowRealmStatus'>
  <a href='https://github.com/BinaryMuse/wow-realm-status-angular'>
    <img id='forkme' src='images/forkme.png'>
  </a>

  <div id='main' class='ng-cloak' ng-cloak ng-controller='RealmsController'>
    <p id='search'>
      Search:
      <input type='text' size='30' ng-model='search' ng-change='updateHash()'>
      <span id='loading'>
        <img ng-show='loading' alt='loading' src='images/loading.gif'>
      </span>
    </p>

    <p id='time'>
      Last updated:
      <span ng-hide='lastUpdate'>never</span>
      <span ng-show='lastUpdate'>{{lastUpdate | date:'MMM d, h:mm a'}}</span><br>
      <em>Data updates every 5 minutes</em>
    </p>

    <p id='reset' ng-show='search'>
      <a ng-href='#'>Show All</a>
    </p>

    <div ng-repeat="realm in realms | filter:{name:search}">
      <h1><a ng-href='#{{realm.name}}'>{{realm.name}}</a>
        ({{realm.type | realmType}})</h1>

      <p>
        Status: {{realm.status | boolToString:'Up':'Down'}}<br>
        Population: {{realm.population | capitalize}}<br>
        Queue: {{realm.queue | boolToString:'Yes':'No'}}
      </p>
    </div>
  </div>

</body>
</html>
	# RealmsController is the only controller in the application, which fetches
	# the realm list from the Realms service and displays them in a list.
	app.controller 'RealmsController', ($scope, $timeout, $window, Realms, hashChange) ->
	$scope.realms = []
	$scope.search = ''
	$scope.lastUpdate = null

	# Any time the URL hash changes, update the `search` variable.
	hashChange (value) ->
	$scope.search = value

	# Conversely, if the user types into the search box and updates
	# the `search` value, represent the change in the URL.
	$scope.updateHash = ->
	$window.location.hash = $scope.search

	# Updates the server list and schedules another update in 5 minutes
	refresh = ->
	$scope.loading = true
	Realms (realms) ->
	$scope.realms = realms
	$scope.loading = false
	$scope.lastUpdate = new Date()
	$timeout(refresh, 60 * 5 * 1000)

	# Trigger the initial data fetch from the API
	refresh()
	# The realmType filter simply formats the raw `type` string provided by
	# the Blizzard API so that it is presented nicely in the view.
	app.filter 'realmType', ->
	(type) ->
	switch type
	when 'pve' then "PvE"
	when 'pvp' then "PvP"
	when 'rp' then "RP"
	when 'rppvp' then "RP PvP"

	# The capitalize filter capitalizes the first character in a string.
	app.filter 'capitalize', ->
	(str) -> if str then str[0].toUpperCase() + str[1..-1].toLowerCase() else ""

	# The boolToString filter returns the first string if the value is
	# turthy and the second string otherwise.
	app.filter 'boolToString', ->
	(boolean, trueString, falseString) -> if boolean then trueString else falseString
	# The Realms service provides a function that takes a callback and
	# calls it with an array of Realms from the Blizzard API.
	app.factory 'Realms', ($http) ->
	(cb) ->
	url = "http://us.battle.net/api/wow/realm/status?jsonp=JSON_CALLBACK"
	$http.jsonp(url).success (json) -> cb(json.realms)

	# The hashChange service is a function that calls a passed-in callback
	# every time the URL's hash changes with the new value of the hash.
	app.factory 'hashChange', ($window, $rootScope) ->
	(listener) ->
	$window.onhashchange = ->
	$rootScope.$apply ->
	listener($window.location.hash?.substr(1) ? '')
	# Invoke once immediately
	listener($window.location.hash?.substr(1) ? '')
	<body ng-app='wowRealmStatus'>
	<!-- ... -->
	<div id='main' class='ng-cloak' ng-cloak ng-controller='RealmsController'>
	<p id='search'>
	Search:
	<input type='text' size='30' ng-model='search' ng-change='updateHash()'>
	<span id='loading'>
	<img ng-show='loading' alt='loading' src='images/loading.gif'>
	</span>
	</p>
	<div ng-repeat="realm in realms \| filter:{name:search}">
	<h1><a ng-href='#{{realm.name}}'>{{realm.name}}</a>
	({{realm.type \| realmType}})</h1>

	<p>
	Status: {{realm.status \| boolToString:'Up':'Down'}}<br>
	Population: {{realm.population \| capitalize}}<br>
	Queue: {{realm.queue \| boolToString:'Yes':'No'}}
	</p>
	</div>
	<p id='reset' ng-show='search'>
	<a ng-href='#'>Show All</a>
	</p>
	<p id='time'>
	Last updated:
	<span ng-hide='lastUpdate'>never</span>
	<span ng-show='lastUpdate'>{{lastUpdate \| date:'MMM d, h:mm a'}}</span><br>
	<em>Data updates every 5 minutes</em>
	</p>
	<html>
	<head>
	<title>WoW Realm Status</title>
	<script type='text/javascript' src='js/angular.js'></script>
	<script type='text/javascript' src='js/app.js'></script>
	<link rel="stylesheet" type="text/css" href="css/app.css" />
	</head>
	<body ng-app='wowRealmStatus'>
	<a href='https://github.com/BinaryMuse/wow-realm-status-angular'>
	<img id='forkme' src='images/forkme.png'>
	</a>

	<div id='main' class='ng-cloak' ng-cloak ng-controller='RealmsController'>
	<p id='search'>
	Search:
	<input type='text' size='30' ng-model='search' ng-change='updateHash()'>
	<span id='loading'>
	<img ng-show='loading' alt='loading' src='images/loading.gif'>
	</span>
	</p>

	<p id='time'>
	Last updated:
	<span ng-hide='lastUpdate'>never</span>
	<span ng-show='lastUpdate'>{{lastUpdate \| date:'MMM d, h:mm a'}}</span><br>
	<em>Data updates every 5 minutes</em>
	</p>

	<p id='reset' ng-show='search'>
	<a ng-href='#'>Show All</a>
	</p>

	<div ng-repeat="realm in realms \| filter:{name:search}">
	<h1><a ng-href='#{{realm.name}}'>{{realm.name}}</a>
	({{realm.type \| realmType}})</h1>

	<p>
	Status: {{realm.status \| boolToString:'Up':'Down'}}<br>
	Population: {{realm.population \| capitalize}}<br>
	Queue: {{realm.queue \| boolToString:'Yes':'No'}}
	</p>
	</div>
	</div>

	</body>
	</html>