44 lines
1.7 KiB
HTML
44 lines
1.7 KiB
HTML
|
<div class="h3" id="player-name"></div>
|
||
|
|
<div class="h4">Badges</div>
|
||
|
|
<div id="loading-badges">
|
||
|
|
<i class="fa fa-spinner fa-pulse"></i> Loading...
|
||
|
|
</div>
|
||
|
|
<div class="row" id="badges">
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
function popBadge(name, desc) {
|
||
|
|
navigator.notification.alert(desc, null, name, "Close");
|
||
|
|
}
|
||
|
|
|
||
|
|
function loadProfile(user) {
|
||
|
|
$('#player-name').text(user);
|
||
|
|
loadBadges(user);
|
||
|
|
}
|
||
|
|
|
||
|
|
// TODO: Make this actually use the database/API!
|
||
|
|
function loadBadges(user) {
|
||
|
|
$('#loading-badges').html('<i class="fa fa-spinner fa-pulse"></i> Loading...');
|
||
|
|
$('#loading-badges').css('display', 'block');
|
||
|
|
$.getJSON(
|
||
|
|
mkApiUrl('getbadges') + '?user=' + user,
|
||
|
|
function (data) {
|
||
|
|
if (data.status === 'OK') {
|
||
|
|
data.badges.forEach(function (item) {
|
||
|
|
$('#badges').append('<div class="col col-xs-3 col-md-2 col-lg-1" \
|
||
|
|
onclick="popBadge(\'' + item.badgename + '\', \'' + item.badgedesc + '\')">\n\
|
||
|
|
<img class="badge-img img-circle img-responsive" alt="" src="assets/badges/' + item.badgesid + '.png"/>\n\
|
||
|
|
</div>');
|
||
|
|
});
|
||
|
|
$('#loading-badges').css('display', 'none');
|
||
|
|
} else {
|
||
|
|
$('#loading-badges').html('Loading failed. <a onclick="loadAchievements(\'' + user + '\')">Reload</a>"');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
).fail(
|
||
|
|
function (err) {
|
||
|
|
$('#loading-badges').html('Loading failed. <a onclick="loadBadges(\'' + user + '\')">Reload</a>"');
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}
|
||
|
|
</script>
|