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.

148 lines
6.7 KiB

  1. {% extends "layout.html" %}
  2. {% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/ts3_viewer.css') }}"> {% endblock %}
  3. {% block title %}Dota Noobs{% endblock %}
  4. {% block content %}
  5. {% set teamspeak_data = get_teamspeak_window() %}
  6. {% set latest_news = get_latest_news() %}
  7. <div class="uk-grid">
  8. <div id="events_large" class="uk-width-1-2 uk-visible-large uk-panel uk-panel-space">
  9. {% include "events_widget.html" %}
  10. </div>
  11. <div id="teamspeak" class="uk-width-large-1-2 uk-width-medium-1-1 uk-panel uk-panel-box uk-text-center">
  12. <a href="#" data-uk-modal="{target: '#tsviewer'}"><div class="uk-badge uk-panel-badge uk-badge-success"><i class="uk-icon-user"></i> Users</div></a>
  13. <h1 class="uk-panel-title">Teamspeak</h1>
  14. <div class="uk-grid uk-margin-bottom">
  15. <div class="uk-width-1-3 uk-panel">
  16. <h3>Users<br/><span class="ts_num">{{ ts3_current_clients() }}</span></h3>
  17. </div>
  18. <div class="uk-width-1-3 uk-panel">
  19. <h3 class="uk-text-success">Online</h3>
  20. </div>
  21. <div class="uk-width-1-3 uk-panel">
  22. <h3>Countries<br/><span class="ts_num">{{ ts3_countries_active(teamspeak_data) }}</span></h3>
  23. </div>
  24. </div>
  25. <a class="uk-button uk-button-success uk-width-1-1" href="ts3server://voice.dotanoobs.com"><i class="uk-icon-microphone"></i> Connect</a>
  26. <a class="uk-button uk-width-1-1 uk-margin" href="{{ url_for('teamspeak') }}"><i class="uk-icon-globe"></i> Stats</a>
  27. <a class="uk-button uk-width-1-1" href="http://www.teamspeak.com/?page=downloads"><i class="uk-icon-download"></i> Download</a>
  28. <div id="tsviewer" class="uk-modal uk-text-left">
  29. <div class="uk-modal-dialog">
  30. <a class="uk-modal-close uk-close"></a>
  31. {{ ts3_viewer() | safe }}
  32. </div>
  33. </div>
  34. </div>
  35. <div id="events_small" class="uk-width-1-1 uk-hidden-large uk-panel uk-panel-space">
  36. {% include "events_widget.html" %}
  37. </div>
  38. <div id="streams" class="uk-width-1-1 uk-text-center uk-panel">
  39. </div>
  40. <div class="uk-width-1-1 uk-panel uk-panel-header uk-panel-space">
  41. <h1 class="uk-panel-title">News and Announcements</h1>
  42. {% for news in latest_news %}
  43. <article class="uk-article dn-news-article">
  44. <h4 class="uk-article-title" title="{{ news['title'] }}"><a href="{{ news['url'] }}">{{ news['title'] }}</a></h4>
  45. <p class="uk-article-meta">{{ news['date'] }}</p>
  46. <p>{{ news['text'] | shorten }}</p>
  47. </article>
  48. {% endfor %}
  49. </div>
  50. </div>
  51. {# ERRORS WHEN CACHING WTF? DISABLE TEMPORARILY #}
  52. {% cache 60*5 %}
  53. {% endcache %}
  54. {% endblock %}
  55. {% block pagescripts %}
  56. <script>
  57. $(document).ready(function() {
  58. if ($('#events_large > dl').length < 1) {
  59. var msg = "<h2>Events</h2><em>No events planned for the near future. Suggest one on the forum!</em>"
  60. $('#events_small').append(msg);
  61. $('#events_large').append(msg);
  62. }
  63. // Add the twitch streams
  64. var stream_url = "https://api.twitch.tv/kraken/streams/";
  65. // var channels = ["dotanoobs", "bearhugdota", "kreejaffakree", "prettypenguins", "shaneomad"];
  66. var channels = {{ streamers['twitch']|tojson|safe }};
  67. for (var idx in channels) {
  68. $.getJSON(stream_url+channels[idx]+"?callback=?", function(data) {
  69. if (data.stream) {
  70. var $a = $("<a href='"+data.stream.channel.url+"'></a>");
  71. var $strm = $("<div class='dn-streamer uk-text-success uk-panel uk-panel-box' id='"+data.stream.channel.name+"'></div>");
  72. $strm.append("<p class='uk-text-bold'>" + data.stream.channel.display_name + "</p>");
  73. $strm.append("<img src='" + data.stream.preview.small + "' />");
  74. $strm.append("<p><i class='uk-icon-male'></i> "+data.stream.viewers+"</p>");
  75. $a.append($strm);
  76. $("#streams").prepend($a);
  77. } else {
  78. $.getJSON(data._links.channel+"?callback=?", function(data) {
  79. var $a = $("<a href='"+data.url+"'></a>");
  80. var $strm = $("<div class='dn-streamer-offline uk-text-success uk-panel uk-panel-box' id='"+data.name+"'></div>");
  81. $strm.append("<p class='uk-text-bold'>" + data.display_name + "</p>");
  82. $strm.append("<img src='" + data.logo + "' />");
  83. $strm.append("<p class='dn-offline'>Offline</p>");
  84. $a.append($strm);
  85. $("#streams").append($a);
  86. });
  87. }
  88. });
  89. }
  90. // Add the hitbox streams
  91. var stream_url = "http://api.hitbox.tv/media/live/";
  92. //var channels = ["Bandita", "Gibb3d"];
  93. var channels = {{ streamers['hitbox']|tojson|safe }};
  94. for (var idx in channels) {
  95. $.getJSON(stream_url+channels[idx], function(data) {
  96. var livestream = data.livestream[0];
  97. var $a = $("<a href='"+livestream.channel.channel_link+"'></a>");
  98. if (livestream.media_is_live == "1") {
  99. var $strm = $("<div class='dn-streamer uk-text-success uk-panel uk-panel-box' id='"+livestream.media_name+"'></div>");
  100. $strm.append("<p class='uk-text-bold'>" + livestream.media_user_name + "</p>");
  101. $strm.append("<img src='http://edge.sf.hitbox.tv" + livestream.media_thumbnail + "' />");
  102. $strm.append("<p><i class='uk-icon-male'></i> " + livestream.media_views + "</p>");
  103. $a.append($strm);
  104. $("#streams").prepend($a);
  105. } else {
  106. var $strm = $("<div class='dn-streamer-offline uk-text-success uk-panel uk-panel-box' id='"+livestream.media_name+"'></div>");
  107. $strm.append("<p class='uk-text-bold'>" + livestream.media_user_name + "</p>");
  108. $strm.append("<img src='http://edge.sf.hitbox.tv" + livestream.channel.user_logo + "' />");
  109. $strm.append("<p class='dn-offline'>Offline</p>");
  110. $a.append($strm);
  111. $("#streams").append($a);
  112. }
  113. });
  114. }
  115. $("#streams").on({
  116. mouseover: function() {
  117. $(this).addClass('dn-streamer-hover');
  118. },
  119. mouseleave: function() {
  120. $(this).removeClass('dn-streamer-hover');
  121. }
  122. }, "div");
  123. });
  124. </script>
  125. {% endblock %}