Instantly share code, notes, and snippets.

Embed
What would you like to do?
# 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()
<input type="text" ng-model="myValue">
Value: {{ myValue }}
# 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment