driverstatsframe.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
  6. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  7. <script src="/Scripts/jquery-fontspy.js"></script>
  8. <!-- <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />-->
  9. <link href="/css/fonts.css" rel="stylesheet" />
  10. <style>
  11. table {
  12. width: 100%;
  13. border-collapse: collapse;
  14. }
  15. h1 {
  16. font-family: veneer;
  17. font-size: 20px;
  18. font-weight: normal;
  19. background-color: rgb(235,37,42);
  20. color: white;
  21. margin: 0 0 0 0;
  22. padding: 5px 5px 5px 5px;
  23. }
  24. footer {
  25. margin-top: 30px;
  26. background-color: black;
  27. color: white;
  28. padding: 5px 5px 5px 5px;
  29. }
  30. footer a {
  31. color: rgb(70, 181, 255);
  32. }
  33. th {
  34. text-align: left;
  35. font-family: function-pro-demi;
  36. font-weight: normal;
  37. }
  38. .table-striped > tbody > tr:nth-child(even) > td {
  39. background-color: rgb(227, 227, 227);
  40. }
  41. .table-striped > tbody > tr:nth-child(odd) > td {
  42. background-color: rgb(214, 214, 214);
  43. }
  44. .content {
  45. overflow-y: auto;
  46. position: absolute;
  47. }
  48. header, footer{
  49. position: absolute;
  50. }
  51. body, select, option {
  52. font-family: function-pro-book;
  53. }
  54. body {
  55. overflow: hidden;
  56. -webkit-font-smoothing: antialiased;
  57. }
  58. @media screen and (max-width: 300px) {
  59. thead select {
  60. max-width: 112px;
  61. }
  62. }
  63. @media (min-width: 301px) {
  64. td:first-child, th:first-child {
  65. padding: 0 0 0 5px;
  66. }
  67. }
  68. </style>
  69. <script>
  70. $(function () {
  71. function onresize() {
  72. var header = $("header");
  73. var footer = $("footer");
  74. var content = $(".content");
  75. var w = $(window).width();
  76. var h = $(window).height();
  77. header.offset({ left: 0, top: 0 });
  78. header.width(w);
  79. footer.offset({ left: 0, top: h - footer.outerHeight() });
  80. footer.width(w);
  81. content.offset({ left: 0, top: header.outerHeight() });
  82. content.width(w);
  83. content.height(h - footer.outerHeight() - header.outerHeight());
  84. };
  85. $(window).resize(onresize);
  86. fontSpy('veneer', { success: onresize });
  87. fontSpy('function-pro-demi', { success: onresize });
  88. fontSpy('function-pro-book', { success: onresize });
  89. onresize();
  90. });
  91. </script>
  92. <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  93. <script>
  94. var serieses = [
  95. { id: 1, name: "Formula Drift USA PRO" },
  96. { id: 3, name: "Formula Drift USA PRO2" },
  97. { id: 2, name: "Formula Drift Asia" }
  98. ];
  99. var statTypes = [
  100. { procedure: "record_highesteventwinpercentage.wins" , name: "Event Win Count" },
  101. { procedure: "record_highestpodiumcount.podiums" , name: "Podium Count" },
  102. { procedure: "record_highestpodiumpercentage.percentage" , name: "Podium Percentage" },
  103. { procedure: "record_highestresultaverage.averageresult" , name: "Result Average" },
  104. { procedure: "record_highestmatchwincount.wins" , name: "Match Win Count" },
  105. { procedure: "record_highestmatchwinpercentage.percentage" , name: "Match Win Percentage" },
  106. { procedure: "record_highestqualifyingaverage.averagequalify" , name: "Qualifying Average" },
  107. { procedure: "record_top4count.topcount" , name: "Top 4 Count" },
  108. { procedure: "record_top8count.topcount" , name: "Top 8 Count" },
  109. { procedure: "record_top16count.topcount" , name: "Top 16 Count" },
  110. { procedure: "record_top32count.topcount" , name: "Top 32 Count" }
  111. ];
  112. function queryObj() {
  113. var result = {}, queryString = location.search.slice(1),
  114. re = /([^&=]+)=([^&]*)/g, m;
  115. while (m = re.exec(queryString)) {
  116. result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  117. }
  118. return result;
  119. }
  120. function driverStatsFrame($scope, $http) {
  121. $scope.statType = statTypes[0].procedure;
  122. var query = queryObj();
  123. var mySeries = serieses.slice(0);
  124. var qs = [];
  125. if (query.seriesid) {
  126. qs = query.seriesid.split(',').map(function(s){ return +s; });
  127. var newSeries = [];
  128. for (var i = 0; i < mySeries.length; i++) {
  129. if (qs.indexOf(mySeries[i].id) != -1) {
  130. newSeries.push(mySeries[i]);
  131. }
  132. }
  133. mySeries = newSeries;
  134. }
  135. if (query.seriesid) $scope.seriesid = qs[0];
  136. if (query.stattypeid) $scope.statType = statTypes[+query.stattypeid - 1].procedure;
  137. $scope.serieses = mySeries;
  138. $scope.statTypes = statTypes;
  139. window.$scope = $scope;
  140. $scope.year = null;
  141. $scope.hash = function () {
  142. return [$scope.seriesid, $scope.statType, $scope.year].join(".");
  143. };
  144. $scope.$watch("seriesid", function () {
  145. if ($scope.seriesid) {
  146. $http.post("/Service.asmx/GetSeries", {
  147. series: +$scope.seriesid
  148. }).success(function (res) {
  149. $scope.championshipData = res.d;
  150. $scope.championshipData.Seasons.forEach(function (season) {
  151. season.Label = season.Year.toString();
  152. });
  153. $scope.championshipData.Seasons.unshift({
  154. Label: "Lifetime",
  155. Year: null
  156. });
  157. var validYears = $scope.championshipData.Seasons.map(function (season) {
  158. return season.Year;
  159. });
  160. if ($scope.year && validYears.indexOf($scope.year) == -1) {
  161. $scope.year = null;
  162. }
  163. });
  164. }
  165. });
  166. $scope.$watch("hash()", function () {
  167. if ($scope.seriesid && $scope.statType) {
  168. var words = $scope.statType.split("."),
  169. procedure = words[0],
  170. column = $scope.column = words[1];
  171. $scope.data = null;
  172. $http.post("/Service.asmx/QueryRecords", {
  173. procedure: procedure,
  174. arguments: [+$scope.seriesid, $scope.year]
  175. })
  176. .success(function (dataset) {
  177. $scope.dataset = dataset;
  178. window.dataset = dataset;
  179. $scope.data = window.data = dataset.d.Tables[0].Data.map(function(row) {
  180. return row.reduce(function (pv, cv, i, a) {
  181. var column = dataset.d.Tables[0].Columns[i];
  182. pv[column] = column == "percentage" ?
  183. (Math.floor(cv * 10000) / 100) + "%"
  184. : isFinite(cv) ? (Math.floor(cv * 100) / 100) :
  185. cv
  186. return pv;
  187. }, {});
  188. });
  189. });
  190. }
  191. });
  192. }
  193. </script>
  194. </head>
  195. <body ng-app ng-controller="driverStatsFrame">
  196. <header>
  197. <h1>Driver Stats</h1>
  198. <table>
  199. <thead>
  200. <tr>
  201. <th>Championship</th>
  202. <th>Year</th>
  203. <th>Stat Type</th>
  204. </tr>
  205. <tr>
  206. <td>
  207. <select ng-model="seriesid" ng-options="series.id as series.name for series in serieses"></select>
  208. </td>
  209. <td>
  210. <select ng-model="year" ng-options="season.Year as season.Label for season in championshipData.Seasons">
  211. </select>
  212. </td>
  213. <td>
  214. <select ng-model="statType" ng-options="st.procedure as st.name for st in statTypes"></select>
  215. <!-- <select ng-model="statType">
  216. <option value="record_highesteventwinpercentage.wins" >Event Win Count</option>
  217. <option value="record_highestpodiumcount.podiums" >Podium Count</option>
  218. <option value="record_highestpodiumpercentage.percentage" >Podium Percentage</option>
  219. <option value="record_highestresultaverage.averageresult" >Result Average</option>
  220. <option value="record_highestmatchwincount.wins" >Match Win Count</option>
  221. <option value="record_highestmatchwinpercentage.percentage" >Match Win Percentage</option>
  222. <option value="record_highestqualifyingaverage.averagequalify" >Qualifying Average</option>
  223. <option value="record_top4count.topcount" >Top 4 Count</option>
  224. <option value="record_top8count.topcount" >Top 8 Count</option>
  225. <option value="record_top16count.topcount" >Top 16 Count</option>
  226. <option value="record_top32count.topcount" >Top 32 Count</option>
  227. </select>-->
  228. </td>
  229. </tr>
  230. </thead>
  231. </table>
  232. </header>
  233. <div class="content">
  234. <table>
  235. <tbody>
  236. <tr>
  237. <td colspan="3">
  238. <table class="table-striped">
  239. <tbody>
  240. <tr ng-repeat="row in data">
  241. <td width="66%">{{row.drivername}}</td>
  242. <td width="34%">{{row[column]}}</td>
  243. </tr>
  244. </tbody>
  245. </table>
  246. </td>
  247. </tr>
  248. </tbody>
  249. </table>
  250. </div>
  251. <footer>
  252. Powered by <a target="_blank" href="http://www.driftstats.com">DriftStats.com</a>
  253. </footer>
  254. </body>
  255. </html>