-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (112 loc) · 5.87 KB
/
index.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Valor Scout</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" type="text/css" href="./styles.css">
<script type="text/javascript" src="dist/sorttable.js"></script>
</head>
<body class="w3-padding-64">
<div class="w3-top w3-bar w3-black w3-hide-small">
<a href="index.html" class="w3-bar-item w3-button" id="home_button">Home</a>
<a href="all.html" class="w3-bar-item w3-button">All regionals/districts</a>
<a href="prediction.html" class="w3-bar-item w3-button">Match Prediction</a>
<a href="#" class="w3-bar-item w3-button w3-mobile w3-right viper-black-hover" id="questions_button">
<i class="fa fa-question-circle" alt="Questions?"></i>
</a>
</div>
<!-- Navbar on small screens (Hidden on medium and large screens) -->
<div class="w3-top w3-light-grey w3-hide-large w3-hide-medium" id="myNavbar">
<div class="w3-bar w3-center w3-large">
<a href="index.html" class="w3-bar-item w3-button w3-grey" style="width:25% !important" id="home_button"><i class="fa fa-home" alt="Home"></i></a>
<a href="all.html" class="w3-bar-item w3-button w3-light-grey" style="width:25% !important">All</a>
<a href="prediction.html" class="w3-bar-item w3-button w3-light-grey" style="width:25% !important">Predict</a>
</div>
</div>
<!-- Page Content -->
<div class="w3-padding-large" id="main">
<!-- Questions pop-up -->
<div id="questions_alert" class="w3-justify w3-panel grey-no-hover w3-display-container w3-animate-opacity">
<span id="getStartedClose" class="w3-button w3-xlarge red-hover w3-display-topright">×</span>
<h3>Getting Started</h3>
<p>Use the search-bar below and start typing a name, location, or code for a regional or district event.
After finding your event, click the row to open up the stats page</p>
<p>OPR on this site is generated by summing up all columns EXCEPT penalties. OPRP is OPR with penalties subtracted,
which is an attempt to penalize teams that are committing lots of fouls.</p>
<p>The OPR you see here WILL be different from thebluealliance.com as TBA only uses final scores for its' OPR calculations,
which has penalties baked in</p>
</div>
<!-- Container for the regional list -->
<div class="w3-justify w3-text-white" id="regional_list">
<!-- Search box -->
<input class="w3-input w3-border w3-padding search-box" type="text" placeholder="Search regional name, code, location" id="filter_box" onkeyup="filter_results()">
<!-- Item table -->
<table class="sortable w3-card w3-table w3-striped w3-hoverable w3-margin-top" id="regional_table">
<!--Generated items will go here-->
</table>
</div>
<!-- END PAGE CONTENT -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.6.0/math.js"></script>
<script type="text/javascript" src="dist/scripts.js"></script>
<script src="./dist/min.tba.js"></script>
<script src="./dist/min.tba_generator.js"></script>
</body>
<script id="reg-header-table" type="text/template">
<thead class="viper-grey">
<th>Name</th>
<th>Location</th>
<th>Code</th>
</thead>
</script>
<script id="reg-template-table-entry" type="text/template">
<tr class="table_entry" id="{{name}}">
<td class="table_entry_name" id="{{name}}">{{name}}</td>
<td class="table_entry_location" id="{{location}}">{{location}}</td>
<td class="table_entry_code" id="{{code}}">{{code}}</td>
</tr>
</script>
<script>
$('#getStartedClose').on('click', function() {
$('#questions_alert').hide();
Cookies.set('getStartedClose', true, { expires: 365 });
});
$('#questions_button').on('click', function() {
$("#questions_alert").show();
});
var tba = new TBA();
tba.setYear('2023');
tba.setAuthToken('LCBZ7qqYrBR0e06C4QJEjaW1O7r2TZat7KZwvQcfDqShwIxV4N7epHK9lbafjc4M');
tba.getEvents(function(results) {
// Cache of the template
var regHeader = document.getElementById("reg-header-table");
var regTemplate = document.getElementById("reg-template-table-entry");
// Get the contents of the template
var regionalHeaderHtml = regHeader.innerHTML;
var regionalTemplateHtml = regTemplate.innerHTML;
// Final HTML variable as empty string
var listHtml = regionalHeaderHtml;
// Loop through dataObject, replace placeholder tags
// with actual data, and generate final HTML
for (var regional in results) {
listHtml += regionalTemplateHtml.replace(/{{name}}/g, results[regional].name)
.replace(/{{location}}/g, results[regional].city + ', ' + results[regional].state_prov + ', ' + results[regional].country)
.replace(/{{code}}/g, results[regional].key);
}
// Replace the HTML of #list with final HTML
document.getElementById("regional_table").innerHTML = listHtml;
$('#regional_table tr').not(':first').each(function(index, element) {
// $(element).on('click', renderEvent.bind(element));
$(element).on('click', function() {
let key = $(element).find('.table_entry_code').attr('id');
window.location.href = "event.html?event=" + key;
});
});
});
</script>
</html>