|
|
{% extends "layout.html" %}
{% block title %}Dota Noobs - Teamspeak{% endblock %}
{% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/ts3_viewer.css') }}"> {% endblock %}
{% block content %}
<div class="uk-grid"> <div class="uk-width-large-1-2 uk-width-medium-1-1"> <h3 class="uk-text-bold uk-text-center">Recent Activity</h3> <div class="uk-panel"> <ul> <li>Users currently connected: <span id="current_clients"></span></li> <li>Unique users this week: <span id="unique_clients"></span></li> <li>Countries active this week: <span id="country_clients"></span></li> </div> <div class="uk-panel" id="teamspeak_active_users"></div> <div class="uk-panel" id="teamspeak_map"></div> <div class="uk-panel uk-panel-divider"></div> </div> <div class="uk-width-large-1-2 uk-width-medium-1-1"> <div class="uk-panel uk-panel-space uk-panel-box uk-text-center"> <h3 class="uk-text-bold uk-text-center">Current Status</h3> <a class="uk-button uk-button-success" href="ts3server://voice.dotanoobs.com">Connect</a> <a class="uk-button uk-button-primary" href="http://www.teamspeak.com/download">Download</a> <h5><strong>Server: voice.dotanoobs.com</strong></h5> <div class="uk-panel uk-text-left"> {{ ts3_viewer() | safe }} </div> </div> </div> </div> {% endblock %}
{% block pagescripts %} {% cache 60*5 %} {% set teamspeak_data = get_teamspeak_window() %} <script src="//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.7/highcharts.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.7/modules/map.src.js"></script> <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/3.0.7/modules/data.src.js"></script> <script type="text/javascript" src="{{ url_for('static', filename='js/world-map-shapes.js') }}"></script> <script> $(document).ready(function() { $('#unique_clients').html("{{ ts3_active_clients(teamspeak_data) }}"); $('#current_clients').html("{{ ts3_current_clients() }}"); $('#country_clients').html("{{ ts3_countries_active(teamspeak_data) }}"); Highcharts.setOptions({ global: { useUTC: false } }); var chart = new Highcharts.Chart({ chart: { renderTo: 'teamspeak_active_users', alignTicks: false, }, title: { text: null, }, xAxis: { type: 'datetime', dateTimeLabelFormats: { hour: '%l%P', day: '%a', }, }, yAxis: { title: { text: 'Active Users', }, min: 0, tickInterval: 5, }, tooltip: { formatter: function() { return Highcharts.dateFormat('%a %b %e @ %l%P', this.x) + ' <b>(' + this.y + ')</b>'; } }, plotOptions: { series: { marker: { enabled: false } } }, series: [{ showInLegend: false, type: 'areaspline', data: [ {% for data in teamspeak_data %} [new Date('{{ data.time | js_datetime }}').valueOf(), {{ data.clients | count }}], {% endfor %} ], }], }); var map_options = { chart: { renderTo: 'teamspeak_map', borderWidth: 1, zoomType: 'xy' }, title: { text: 'Doobs by country' }, legend: { align: 'left', verticalAlign: 'bottom', floating: true, layout: 'vertical', valueDecimals: 0 }, series: [{ name: 'Active users', data: [], valueRanges: [{ to: 1, color: 'rgba(19,64,117,0.05)' }, { from: 1, to: 5, color: 'rgba(19,64,117,0.4)' }, { from: 5, to: 10, color: 'rgba(19,64,117,0.5)' }, { from: 10, to: 20, color: 'rgba(19,64,117,0.6)' }, { from: 20, to: 30, color: 'rgba(19,64,117,0.8)' }, { from: 30, color: 'rgba(19,64,117,1)' }], states: { hover: { color: '#DD6E28' } } }] }; // Populate the data points var data = {{ num_unique_clients_by_country(teamspeak_data) | tojson | safe }}; var country_names = {{ country_abbreviation_mapping() | tojson | safe }}; for (var key in shapes) { var num = 0; if (key in data) { num = data[key]; } map_options.series[0].data.push({ y: num, name: country_names[key], path: shapes[key], states: { hover: { color: '#FF7F00' } } }); } // Finalize the map var map = new Highcharts.Map(map_options); }); </script> {% endcache %}
{% endblock %}
|