DotaNoobs main site.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

172 lines
4.3 KiB

  1. {% extends "layout.html" %}
  2. {% block title %}Dota Noobs - Teamspeak{% endblock %}
  3. {% block head %}
  4. <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/ts3_viewer.css') }}">
  5. {% endblock %}
  6. {% block content %}
  7. <div class="uk-grid">
  8. <div class="uk-width-large-1-2 uk-width-medium-1-1">
  9. <h3 class="uk-text-bold uk-text-center">Recent Activity</h3>
  10. <div class="uk-panel">
  11. <ul>
  12. <li>Active users connected: <span id="unique_clients"></span></li>
  13. <li>Total users connected: <span id="current_clients">{{ ts3_current_clients() }}</span></li>
  14. <li>Countries active on server: <span id="country_clients"></span></li>
  15. </div>
  16. <div class="uk-panel" id="teamspeak_active_users"></div>
  17. <div class="uk-panel" id="teamspeak_map"></div>
  18. <div class="uk-panel uk-panel-divider"></div>
  19. </div>
  20. <div class="uk-width-large-1-2 uk-width-medium-1-1">
  21. <div class="uk-panel uk-panel-space uk-panel-box uk-text-center">
  22. <h3 class="uk-text-bold uk-text-center">Current Status</h3>
  23. <a class="uk-button uk-button-success" href="ts3server://voice.dotanoobs.com">Connect</a>
  24. <a class="uk-button uk-button-primary" href="http://www.teamspeak.com/download">Download</a>
  25. <h5>Server: voice.dotanoobs.com</h5>
  26. <div class="uk-panel uk-text-left">
  27. {{ ts3_viewer() | safe }}
  28. </div>
  29. </div>
  30. </div>
  31. </div>
  32. {% endblock %}
  33. {% block pagescripts %}
  34. {% cache 60*5 %}
  35. {% set teamspeak_data = get_teamspeak_window() %}
  36. <script src="http://code.highcharts.com/3.0.1/highcharts.js"></script>
  37. <script type="text/javascript" src="http://github.highcharts.com/75c66eb3/modules/map.src.js"></script>
  38. <script type="text/javascript" src="http://github.highcharts.com/75c66eb3/modules/data.src.js"></script>
  39. <script type="text/javascript" src="{{ url_for('static', filename='js/world-map-shapes.js') }}"></script>
  40. <script>
  41. $(document).ready(function() {
  42. $('#unique_clients').html("{{ ts3_active_clients(teamspeak_data) }}");
  43. $('#country_clients').html("{{ ts3_countries_active(teamspeak_data) }}");
  44. Highcharts.setOptions({
  45. global: {
  46. useUTC: false
  47. }
  48. });
  49. var chart = new Highcharts.Chart({
  50. chart: {
  51. renderTo: 'teamspeak_active_users',
  52. alignTicks: false,
  53. },
  54. title: {
  55. text: null,
  56. },
  57. xAxis: {
  58. type: 'datetime',
  59. dateTimeLabelFormats: {
  60. hour: '%l%P',
  61. day: '%a',
  62. },
  63. },
  64. yAxis: {
  65. title: {
  66. text: 'Active Users',
  67. },
  68. min: 0,
  69. tickInterval: 5,
  70. },
  71. tooltip: {
  72. formatter: function() {
  73. return Highcharts.dateFormat('%a %b %e @ %l%P', this.x) + ' <b>(' + this.y + ')</b>';
  74. }
  75. },
  76. plotOptions: {
  77. series: {
  78. marker: {
  79. enabled: false
  80. }
  81. }
  82. },
  83. series: [{
  84. showInLegend: false,
  85. type: 'areaspline',
  86. data: [
  87. {% for data in teamspeak_data %}
  88. [new Date('{{ timestamp_to_js_date(data.time) }}').valueOf(), {{ data.clients | count }}],
  89. {% endfor %}
  90. ],
  91. }],
  92. });
  93. var map_options = {
  94. chart: {
  95. renderTo: 'teamspeak_map',
  96. borderWidth: 1,
  97. zoomType: 'xy'
  98. },
  99. title: {
  100. text: 'Doobs by country'
  101. },
  102. legend: {
  103. align: 'left',
  104. verticalAlign: 'bottom',
  105. floating: true,
  106. layout: 'vertical',
  107. valueDecimals: 0
  108. },
  109. series: [{
  110. name: 'Active users',
  111. data: [],
  112. valueRanges: [{
  113. to: 1,
  114. color: 'rgba(19,64,117,0.05)'
  115. }, {
  116. from: 1,
  117. to: 5,
  118. color: 'rgba(19,64,117,0.4)'
  119. }, {
  120. from: 5,
  121. to: 10,
  122. color: 'rgba(19,64,117,0.5)'
  123. }, {
  124. from: 10,
  125. to: 20,
  126. color: 'rgba(19,64,117,0.6)'
  127. }, {
  128. from: 20,
  129. to: 30,
  130. color: 'rgba(19,64,117,0.8)'
  131. }, {
  132. from: 30,
  133. color: 'rgba(19,64,117,1)'
  134. }],
  135. states: {
  136. hover: {
  137. color: '#DD6E28'
  138. }
  139. }
  140. }]
  141. };
  142. // Populate the data points
  143. var data = {{ num_unique_clients_by_country(teamspeak_data) | tojson | safe }};
  144. var country_names = {{ country_abbreviation_mapping() | tojson | safe }};
  145. for (var key in shapes) {
  146. var num = 0;
  147. if (key in data) {
  148. num = data[key];
  149. }
  150. map_options.series[0].data.push({
  151. y: num,
  152. name: country_names[key],
  153. path: Highcharts.pathToArray(shapes[key]),
  154. states: {
  155. hover: {
  156. color: '#FF7F00'
  157. }
  158. }
  159. });
  160. }
  161. // Finalize the map
  162. var map = new Highcharts.Map(map_options);
  163. });
  164. </script>
  165. {% endcache %}
  166. {% endblock %}