Startseite Erkunden Hilfe
Anmelden
bmallred
/
AngularJS-WowRepository
Beobachten 1
Favorit hinzufügen 0
Fork 0
Code Issues 0 Pull-Requests 0 Commits 6 Releases 0 Wiki
Quellcode durchsuchen

Dynamically retrieve "realms" and allow custom "guild" input. Basic styles and cosmetic touch-ups done.

bmallred vor 13 Jahren
Ursprung
8a9467c9da
Commit
20e7b3e9c8
3 geänderte Dateien mit 143 neuen und 17 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 36 5
      armory.js
  2. 52 12
      index.html
  3. 55 0
      site.css

+ 36 - 5
armory.js
Datei anzeigen 

@ -1,9 +1,40 @@
1 1 
angular.module('WowArmory', ['ngResource']);
2 2
3 
function ArmoryController($scope, $resource) {
4 
    $scope.armory = $resource('//:server/api/wow/guild/:realm/:guild',
5 
        { server: 'us.battle.net', realm: 'hellscream', guild: 'alkaline', fields: 'members', jsonp: 'angular.callbacks._0' },
6 
        { query: { method: 'JSONP' }});
3 
window.WowArmory = {};
4 
window.WowArmory.counter = 0;
7 5
8 
    $scope.Guild = $scope.armory.get();
6 
// This was done because I don't think I can use "callback: 'JSON_CALLBACK'" and
7 
// I didn't want to hand-jam it everytime.
8 
window.WowArmory.NewCallback = function(id) {
9 
    if (id == undefined) {
10 
        id = window.WowArmory.counter++;
11 
    }
12
13 
    return 'angular.callbacks._' + id;
14 
};
15
16 
window.WowArmory.ArmoryController = function($scope, $resource) {
17 
    // Some bindable values.
18 
    $scope.realm = { name: '', slug: '' };
19 
    $scope.guild = '';
20
21 
    // Resource for the realms.
22 
    $scope.apiRealms = $resource('//:server/api/wow/realm/status',
23 
        { server: 'us.battle.net', jsonp: window.WowArmory.NewCallback() },
24 
        { get: { method: 'JSONP' }});
25 
    $scope.realms = $scope.apiRealms.get();
26
27 
    // Handle the members and its resource(s).
28 
    $scope.members = [];
29 
    $scope.fetchMembers = function() {
30 
        if ($scope.realm.slug.length > 0 && $scope.guild.length > 0) {
31
32 
            // Resource for the guild members.
33 
            $scope.apiMembers = $resource('//:server/api/wow/guild/:realm/:guild',
34 
                { server: 'us.battle.net', realm: $scope.realm.slug, guild: $scope.guild, fields: 'members', jsonp: window.WowArmory.NewCallback() },
35 
                { get: { method: 'JSONP' }});
36
37 
            $scope.members = $scope.apiMembers.get();
38 
        }
39 
    };
9 40 
};

+ 52 - 12
index.html
Datei anzeigen 

@ -4,23 +4,63 @@
4 4 
    <script type="text/javascript" src="//code.angularjs.org/1.0.0rc6/angular-1.0.0rc6.min.js"></script>
5 5 
    <script type="text/javascript" src="//code.angularjs.org/1.0.0rc6/angular-resource-1.0.0rc6.min.js"></script>
6 6 
    <script type="text/javascript" src="armory.js"></script>
7
8 
    <link type="text/css" rel="stylesheet" href="site.css" />
7 9 
</head>
8 10 
<body>
9 
    <div ng-controller="ArmoryController">
10 
        <h2>Members</h2>
11 
    <div role="main" ng-controller="WowArmory.ArmoryController">
12 
        <form>
13 
        <label for="myRealm">Realm</label>
14 
        <select id="myRealm" ng-model="realm" ng-options="r.name for r in realms.realms">
15 
            <option value="">-- Select a realm --</option>
16 
        </select>
17
18 
        <label for="myGuild">Guild</label>
19 
        <input id="myGuild" type="text" ng-model="guild" placeholder="Guild name" />
20
21 
        <button type="submit" ng-click="fetchMembers()">Get Members</button>
22 
        </form>
23
24 
        <hr />
25
26 
        <h2>Notice</h2>
27 
        <p class="notice">
28 
            This was purely created for experimentating with AngularJS. Sometimes the callbacks receive an HTTP error code of 500 from the servers. Just wait a second if this is the case and try again.
29 
        </p>
11 30
12 
        <div ng-repeat="member in Guild.members" style="clear: both;">
13 
            <img src="//us.battle.net/static-render/us/{{member.character.thumbnail}}" style="float: left; padding: 1em;" />
31 
        <hr />
14 32
15 
            <div style="float: left;">
16 
                <h3>Character: {{member.character.name}}</h3>
33 
        <h2>{{guild}}</h2>
34 
        <div class="character" ng-repeat="member in members.members">
35 
            <img class="thumbnail" ng:src="//us.battle.net/static-render/us/{{member.character.thumbnail}}" />
17 36
18 
                <div>Realm: {{member.character.realm}}</div>
19 
                <div>Class: {{member.character.class}}</div>
20 
                <div>Race: {{member.character.race}}</div>
21 
                <div>Gender: {{member.character.gender}}</div>
22 
                <div>Achievement Points: {{member.character.achievementPoints}}</div>
23 
                <div>Rank: {{member.rank}}</div>
37 
            <div class="stats">
38 
                <table>
39 
                    <tr>
40 
                        <td>Character</td>
41 
                        <td class="italic">{{member.character.name}}</td>
42 
                    </tr>
43 
                    <tr>
44 
                        <td>Class</td>
45 
                        <td class="italic">{{member.character.class}}</td>
46 
                    </tr>
47 
                    <tr>
48 
                        <td>Race</td>
49 
                        <td class="italic">{{member.character.race}}</td>
50 
                    </tr>
51 
                    <tr>
52 
                        <td>Gender</td>
53 
                        <td class="italic">{{member.character.gender}}</td>
54 
                    </tr>
55 
                    <tr>
56 
                        <td>Achievement Points</td>
57 
                        <td class="italic">{{member.character.achievementPoints}}</td>
58 
                    </tr>
59 
                    <tr>
60 
                        <td>Rank</td>
61 
                        <td class="italic">{{member.rank}}</td>
62 
                    </tr>
63 
                </table>
24 64 
            </div>
25 65 
        </div>
26 66 
    </div>

+ 55 - 0
site.css
Datei anzeigen 

@ -0,0 +1,55 @@
1 
body {
2 
    background-color: #666;
3 
    margin: 0;
4 
    padding: 0;
5 
}
6
7 
div[role="main"] {
8 
    background-color: #eee;
9 
    margin: 0 20% 0 20%;
10 
    padding: 1em;
11 
    text-align: center;
12 
    min-height: 600px;
13 
}
14
15 
h2 {
16 
    clear: both;
17 
    text-transform: capitalize;
18 
}
19
20 
label {
21 
    font-weight: bold;
22 
}
23
24 
button, input, select {
25 
    padding: 0.55em 0.45em;
26 
}
27
28 
.italic {
29 
    font-style: italic;
30 
    padding-left: 2em;
31 
}
32
33 
.character {
34 
    clear: both;
35 
    padding-top: 1em;
36 
}
37
38 
.character .thumbnail {
39 
    float: left;
40 
    padding-right: 1em;
41 
    width: 100px;
42 
}
43
44 
.character .stats {
45 
    float: left;
46 
    text-align: left;
47 
    vertical-align: text-top;
48 
}
49
50 
.notice {
51 
    border: 1px #000 dashed;
52 
    padding: 1em;
53 
    background-color: #fee;
54 
    text-align: left;
55 
}