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.

173 lines
4.4 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>Users currently connected: <span id="current_clients"></span></li>
  13. <li>Unique users this week: <span id="unique_clients"></span></li>
  14. <li>Countries active this week: <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><strong>Server: voice.dotanoobs.com</strong></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="//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.7/highcharts.js"></script>
  37. <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.7/modules/map.src.js"></script>
  38. <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.7/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. $('#current_clients').html("{{ ts3_current_clients() }}");
  44. $('#country_clients').html("{{ ts3_countries_active(teamspeak_data) }}");
  45. Highcharts.setOptions({
  46. global: {
  47. useUTC: false
  48. }
  49. });
  50. var chart = new Highcharts.Chart({
  51. chart: {
  52. renderTo: 'teamspeak_active_users',
  53. alignTicks: false,
  54. },
  55. title: {
  56. text: null,
  57. },
  58. xAxis: {
  59. type: 'datetime',
  60. dateTimeLabelFormats: {
  61. hour: '%l%P',
  62. day: '%a',
  63. },
  64. },
  65. yAxis: {
  66. title: {
  67. text: 'Active Users',
  68. },
  69. min: 0,
  70. tickInterval: 5,
  71. },
  72. tooltip: {
  73. formatter: function() {
  74. return Highcharts.dateFormat('%a %b %e @ %l%P', this.x) + ' <b>(' + this.y + ')</b>';
  75. }
  76. },
  77. plotOptions: {
  78. series: {
  79. marker: {
  80. enabled: false
  81. }
  82. }
  83. },
  84. series: [{
  85. showInLegend: false,
  86. type: 'areaspline',
  87. data: [
  88. {% for data in teamspeak_data %}
  89. [new Date('{{ data.time | js_datetime }}').valueOf(), {{ data.clients | count }}],
  90. {% endfor %}
  91. ],
  92. }],
  93. });
  94. var map_options = {
  95. chart: {
  96. renderTo: 'teamspeak_map',
  97. borderWidth: 1,
  98. zoomType: 'xy'
  99. },
  100. title: {
  101. text: 'Doobs by country'
  102. },
  103. legend: {
  104. align: 'left',
  105. verticalAlign: 'bottom',
  106. floating: true,
  107. layout: 'vertical',
  108. valueDecimals: 0
  109. },
  110. series: [{
  111. name: 'Active users',
  112. data: [],
  113. valueRanges: [{
  114. to: 1,
  115. color: 'rgba(19,64,117,0.05)'
  116. }, {
  117. from: 1,
  118. to: 5,
  119. color: 'rgba(19,64,117,0.4)'
  120. }, {
  121. from: 5,
  122. to: 10,
  123. color: 'rgba(19,64,117,0.5)'
  124. }, {
  125. from: 10,
  126. to: 20,
  127. color: 'rgba(19,64,117,0.6)'
  128. }, {
  129. from: 20,
  130. to: 30,
  131. color: 'rgba(19,64,117,0.8)'
  132. }, {
  133. from: 30,
  134. color: 'rgba(19,64,117,1)'
  135. }],
  136. states: {
  137. hover: {
  138. color: '#DD6E28'
  139. }
  140. }
  141. }]
  142. };
  143. // Populate the data points
  144. var data = {{ num_unique_clients_by_country(teamspeak_data) | tojson | safe }};
  145. var country_names = {{ country_abbreviation_mapping() | tojson | safe }};
  146. for (var key in shapes) {
  147. var num = 0;
  148. if (key in data) {
  149. num = data[key];
  150. }
  151. map_options.series[0].data.push({
  152. y: num,
  153. name: country_names[key],
  154. path: shapes[key],
  155. states: {
  156. hover: {
  157. color: '#FF7F00'
  158. }
  159. }
  160. });
  161. }
  162. // Finalize the map
  163. var map = new Highcharts.Map(map_options);
  164. });
  165. </script>
  166. {% endcache %}
  167. {% endblock %}