Skip to content

Instantly share code, notes, and snippets.

@AlSquire

AlSquire/index.html

Last active December 17, 2015 14:20
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AlSquire/5624137 to your computer and use it in GitHub Desktop.
Save AlSquire/5624137 to your computer and use it in GitHub Desktop.
Download ZIP
* Moved to https://github.com/AlSquire/GW2Dash * GW2 APIs + AngularJS example. Demo here: http://gw2api-angularjs.herokuapp.com/
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GW2API - AngularJS</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular-resource.min.js"></script>
<script src="script.js"></script>
<style>
.infos {
font-size: 0.8em;
margin-top: 1em;
}
</style>
</head>
<body ng-app="gw2App" ng-controller="gw2Ctrl">
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<div class="brand">Guild Wars 2 API + AngularJS (BETA I suppose)</a>
</div>
</div>
<div class="row">
<div class="span3">
<label for="world_select">World</label>
<select id="world_select" ng-model="worldId" ng-options="world.id as world.name for world in worlds"></select>
<label for="interval_select">Refresh every</label>
<select id="interval_select" ng-model="interval">
<option value="10000">10s</option>
<option value="30000">30s</option>
<option value="60000">1min</option>
<option value="300000">5min</option>
<option value="0">... time I hit the refresh button</option>
</select>
<button class="btn" ng-click="refresh()">Refresh</button>
<button class="btn btn-primary" ng-click="toggleEventNotifications()" ng-disabled="!desktopNotificationsCapable()" title="Desktop notifications, webkit only">{{ isEventNotificationsEnabled() && 'Disable notifications' || 'Can I Has Notify?' }} </button>
<p class="infos">
Select a world, a refresh interval (or not) and that's it. If you have a Webkit browser (Chrome or Safari) you can also receive desktop notifications for "Active" dragon events by pressing the big blue button.
</p>
<hr>
<p class="infos">
<a href="https://forum-en.guildwars2.com/forum/community/api/AngularJS-example/" target="_blank">GW2 forum's thread (for feedback)</a> -
<a href="https://gist.github.com/AlSquire/5624137" target="_blank">Source</a><br>
By AlSquire.9203 (donations of silvers, minis, precursors, pictures of quaggans... are welcomed)
</p>
</div>
<section id="wvw" class="span4">
<h2>WvW score</h2>
<section>
<h3>Red: {{redWorld.name}}</h3>
{{redWorld.score}}
</section>
<section>
<h3>Blue: {{blueWorld.name}}</h3>
{{blueWorld.score}}
</section>
<section>
<h3>Green: {{greenWorld.name}}</h3>
{{greenWorld.score}}
</section>
</section>
<section id="watched_events" class="span4">
<h2>Dragons watcher</h2>
<section ng-repeat="e in watchedEvents" class="state_{{e.state | lowercase}}">
<h3>{{e.name}}</h3>
{{e.state}}
</section>
</section>
</div>
</div>
</body>
</html>
Raw
script.js
var app = angular.module('gw2App', ['ngResource']);
app.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/world/:worldId', { controller: 'gw2Ctrl' })
});
app.controller('gw2Ctrl', function($scope, $http, $resource, $location, $route, $routeParams, $timeout) {
$http.defaults.useXDomain = true;
// So CORS works event without OPTIONS requests supported by API server
delete $http.defaults.headers.common['X-Requested-With'];
$scope.$on("$routeChangeSuccess", function($currentRoute, $previousRoute) {
$scope.worldId = $routeParams.worldId;
});
Worlds = $resource('https://api.guildwars2.com/v1/world_names.json');
Matches = $resource('https://api.guildwars2.com/v1/wvw/matches.json');
MatchDetails = $resource('https://api.guildwars2.com/v1/wvw/match_details.json');
Events = $resource('https://api.guildwars2.com/v1/events.json');
var timer;
$scope.interval = 0;
$scope.worlds = Worlds.query();
$scope.redWorld = {};
$scope.blueWorld = {};
$scope.greenWorld = {};
$scope.watchedEvents = [
{ id: "0464CB9E-1848-4AAA-BA31-4779A959DD71", name: "Claw of Jormag" },
{ id: "568A30CF-8512-462F-9D67-647D69BEFAED", name: "Tequatl the Sunless" },
{ id: "03BF176A-D59F-49CA-A311-39FC6F533F2F", name: "The Shatterer" },
{ id: "31CEBA08-E44D-472F-81B0-7143D73797F5", name: "Shadow behemoth."},
{ id: "33F76E9E-0BB6-46D0-A3A9-BE4CDFC4A3A4", name: "Fire elemental"},
{ id: "C5972F64-B894-45B4-BC31-2DEEA6B7C033", name: "Jungle wurm"},
{ id: "9AA133DC-F630-4A0E-BB5D-EE34A2B306C2", name: "Golem Mark II"}
]
var eventNotificationsEnabled = false;
var eventsToNotify = [];
var fetch = function() {
Matches.get({}, function(data) {
// Loop through the matches to find in wich one the selected world is participating
for (var i = 0; i < data.wvw_matches.length; i++) {
m = data.wvw_matches[i];
if (m.red_world_id == $scope.worldId || m.blue_world_id == $scope.worldId || m.green_world_id == $scope.worldId) {
// Found!
$scope.matchId = m.wvw_match_id;
// Moar details pliz
MatchDetails.get({ match_id: $scope.matchId }, function(data) {
$scope.matchDetails = data;
$scope.redWorld.score = data.scores[0];
$scope.blueWorld.score = data.scores[1];
$scope.greenWorld.score = data.scores[2];
});
// Retrieve the name of the three worlds in this match
for (var j = 0; j < $scope.worlds.length; j++) {
w = $scope.worlds[j];
if (m.red_world_id == w.id) { $scope.redWorld.name = w.name; }
if (m.blue_world_id == w.id) { $scope.blueWorld.name = w.name; }
if (m.green_world_id == w.id) { $scope.greenWorld.name = w.name; }
}
break;
}
}
});
// Get the new states for the watched events
Events.get({ world_id: $scope.worldId }, function(data) {
events = data.events;
for (var i = 0; i < $scope.watchedEvents.length; i++) {
we = $scope.watchedEvents[i];
we.state = "Inactive";
for (var j = 0; j < events.length; j++) {
e = events[j];
if (e && e.event_id == we.id) {
we.state = e.state;
break;
}
}
}
});
}
// When a world is selected...
$scope.$watch('worldId', function() {
if (typeof $scope.worldId != 'undefined') {
fetch();
// Update the uri so the page for the selected world can be refreshed and bookmarked
$location.path('/world/' + $scope.worldId);
}
});
// Set the selected refresh time interval
$scope.$watch('interval', setTimer);
$scope.$watch('watchedEvents', function(newVal, oldVal) {
for (var i = 0; i < oldVal.length; i++) {
if (oldVal[i].state != 'Active' && newVal[i].state == 'Active') {
notifyEvent(newVal[i]);
}
}
}, true);
var setTimer = function() {
$timeout.cancel(timer);
if ($scope.interval != "0") {
timer = $timeout(function() {
fetch();
setTimer();
}, $scope.interval);
}
}
$scope.desktopNotificationsCapable = function() {
return (window.webkitNotifications) ? true : false;
}
$scope.toggleEventNotifications = function() {
if (eventNotificationsEnabled == false || (window.webkitNotifications && webkitNotifications.checkPermission() != 0)) {
webkitNotifications.requestPermission(function() { eventNotificationsEnabled = true; $scope.$apply(); });
} else {
eventNotificationsEnabled = false;
}
}
$scope.isEventNotificationsEnabled = function() {
return eventNotificationsEnabled && window.webkitNotifications && webkitNotifications.checkPermission() == 0;
}
var notifyEvent = function(e) {
if ($scope.isEventNotificationsEnabled()) {
text = '"' + e.name + '" is active NAO!';
webkitNotifications.createNotification('', "A Wild Dragon has Appeared in Tyria!", text).show();
}
}
$scope.refresh = function() {
fetch();
setTimer(); // Reset the timer;
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment