-
Notifications
You must be signed in to change notification settings - Fork 0
/
powers.html
91 lines (87 loc) · 3.46 KB
/
powers.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<title>DnD 4e</title>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<link href='./css/bootstrap.css' type="text/css" rel="stylesheet" />
<style type="text/css">
#filters label {display:inline-block;margin-right:1em;font-size:12px;}
#filters input {margin:0 0.15em}
#wrap {margin:2em 0;}
table{width:100%;clear:both;}
table tr.Encounter {background:#fcc}
table tr.Daily {background:#eee}
table tr.At-Will {background:#cfc}
div.dataTables_length label{width:460px;float:left;text-align:left;}
div.dataTables_length select{width:75px;}
div.dataTables_filter label{float:right;width:460px;}
div.dataTables_info{padding-top:8px;}
div.dataTables_paginate{float:right;margin:0;}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="./js/bootstrap.js"></script>
<script src="./js/jquery.dataTables.js"></script>
<script src="./js/bootstrap-dt.js"></script>
<script src="./js/powers.js"></script>
<script>
$(function() {
$.extend( $.fn.dataTableExt.oStdClasses, {
"sSortAsc": "header headerSortDown",
"sSortDesc": "header headerSortUp",
"sSortable": "header"
} );
$.each(["None", "Ardent", "Artificer", "Assassin", "Avenger", "Barbarian", "Bard", "Battlemind", "Cleric", "Druid", "Fighter", "Invoker", "Monk", "Paladin", "Psion", "Ranger", "Rogue", "Runepriest", "Seeker", "Shaman", "Sorcerer", "Swordmage", "Warden", "Warlock", "Warlord", "Wizard"], function(i,v) {
$('#filters').append('<label for="'+v+'"><input type="radio" name="class" value="'+v+'" id="'+v+'">'+v+'</label>')
});
$('#None').val('');
$('input').change(function() {
$('table').remove();
classs = $(this).val();
$('#wrap').html('<table id="table_'+classs+'"></table>');
var data = [];
$.each(powers, function(i,v) {
if (v.class == classs) {
data.push([v.name,v.level,v.Action_Type,v.Power_Usage,v.id]);
}
});
$('#table_'+classs).dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
'iDisplayLength':30,
"sPaginationType": "bootstrap",
'aaData': data,
'aoColumns': [
{sTitle:'Name'},
{sTitle:'Level',"sSortDataType": "dom-text", "sType": "numeric"},
{sTitle:'Action'},
{sTitle:'Power'}
],
fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$(nRow).addClass( aData[3] ).attr('data-id',aData[4] ).attr('data-toggle','modal').attr('data-target','#power');
return nRow;
},
"aaSorting": [[1,'asc'], [3, 'asc']]
});
});
$('tr').live('click', function() {
id = $(this).attr('data-id');
power = powers.filter(function(obj) {
return +obj.id === +id
})[0];
$('#power .modal-header').html('<h1>'+power.name+'</h1>');
$('#power .modal-body').html('<dl></dl>');
$.each(power, function(i,v) {
if (i!='id'&&i!='name'&&i!='Power_Usage'&&i!='class'&&i!='level'&&i!='Action_Type'&&i!='Level')
$('#power .modal-body dl').append('<dt>'+i+'</dt><dd>'+v+'</dd>');
});
console.log(power);
});
});
</script>
</head>
<body class="container">
<h1>Pick a class</h1>
<div id="filters"></div>
<div id="wrap"></div>
<div id="power" class="modal hide"><div class="modal-header"></div><div class="modal-body"></div></div>
</body>
</html>