pyrot/webgui/stats/templates/stats/networks.html

{% extends "base.html" %}
{% load static %}
{% block head %}
    <meta name="nonfiction" content="true">
    <script type="text/javascript" src="{% static "javascript/loader.js" %}"></script>
{% endblock %}
{% block title %}Networks{% endblock %}
{% block description %}Configred networks{% endblock %}
{% block keywords %}irc networks{% endblock %}
{% block keywords-not %}{% endblock %}
{% block content %}
    <article class="ui container">
        <header class="ui five statistics">
            <div class="statistic">
                <div class="value">
                    <i class="sitemap icon"></i> {{ totalnetworks }}
                </div>
                <div class="label">
                    Networks
                </div>
            </div>
            <a class="statistic" href="/">
                <div class="value">
                    <i class="hashtag icon"></i> {{ totalchannels }}
                </div>
                <div class="label">
                    Channels
                </div>
            </a>
            <a class="statistic" href="/">
                <div class="value">
                    <i class="users icon"></i> {{ totalusers }}
                </div>
                <div class="label">
                    Users
                </div>
            </a>
            <a class="statistic" href="/">
                <div class="value">
                    <i class="comments outline icon"></i> {{ totalmessages }}
                </div>
                <div class="label">
                    Messages
                </div>
            </a>
        </header>
        <section class="ui basic text segment container">
            <div class="ui basic segment">
                <div class="ui celled selection link list">
                    {% for network in networkslist.items %}
                        <a class="item" href="{% url 'stats:network' network.0 %}">
                            <div class="right floated content">
                                <div class="ui horizontal list">
                                    {% if network.1.password %}
                                        <div class="item">
                                            <i class="green privacy icon" title="NickServ password saved"></i>
                                        </div>
                                    {% endif %}
                                    {% if network.1.usessl %}
                                        <div class="item">
                                            <i class="green lock icon" title="Encrypted connection"></i>
                                        </div>
                                    {% endif %}
                                    <div class="item">
                                        <i class="hashtag icon"></i>
                                            {{ network.1.channelcount }}
                                    </div>
                                    <div class="item">
                                        <i class="users icon"></i>
                                            {{ network.1.usercount }}
                                    </div>
                                    <div class="item">
                                        <i class="comments outline icon"></i>
                                            {{ network.1.messagecount }}
                                    </div>
                                </div>
                            </div>
                            <i class="middle aligned server icon"></i>
                            <div class="content">
                                <div class="header">
                                    <div class="content" href="{% url 'stats:network' network.0 %}">{{ network.0 }}</div>
                                </div>
                                <div class="description">
                                    {{ network.1.host }}:{{ network.1.port }}
                                </div>
                            </div>
                        </a>
                    {% endfor %}
                </div>
            </div>
        </section>
    </article>
    <div class="ui segment">
        <article class="ui centered stackable cards">
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart0);
                function drawChart0() {
                    var data = google.visualization.arrayToDataTable([
                        ['Network', 'Messages'],
                        {% for network in networkslist.items %}
                            ['{{ network.0|escapejs }}',     {{ network.1.messagecount }}],
                        {% endfor %}
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('messageschart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Messages seen per network" class="content">
                    <div class="header">
                        <div>
                            <i class="ui comments icon"></i>
                            /
                            <i class="ui sitemap icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="messageschart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                        ['Network', 'Users'],
                            {% for network in networkslist.items %}
                                ['{{ network.0|escapejs }}',     {{ network.1.usercount }}],
                            {% endfor %}
                        ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('userschart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div class="content" title="Users seen per network">
                    <div class="header">
                        <div>
                            <i class="ui users icon"></i>
                            /
                            <i class="ui sitemap icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="userschart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart1);
                function drawChart1() {
                    var data = google.visualization.arrayToDataTable([
                        ['Network', 'Channels'],
                            {% for network in networkslist.items %}
                                ['{{ network.0|escapejs }}',     {{ network.1.channelcount }}],
                            {% endfor %}
                        ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('channelschart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div class="content" title="Channels joined per network">
                    <div class="header">
                        <div>
                            <i class="ui hashtag icon"></i>
                            /
                            <i class="ui sitemap icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="channelschart"></div>
                </div>
            </section>
            {% if isxpspent %}
                <script type="text/javascript">
                    google.charts.load("current", {packages:["corechart"]});
                    google.charts.setOnLoadCallback(drawChart2);
                    function drawChart2() {
                        var data = google.visualization.arrayToDataTable([
                            ['Network', 'XP spent'],
                                {% for network in networkslist.items %}
                                    ['{{ network.0|escapejs }}',     {{ network.1.xpspentcount }}],
                                {% endfor %}
                            ]);
                        var options = {
                            legend: 'none',
                            pieSliceText: 'label',
                            height: '275',
                            pieHole: 0.1,
                            'chartArea': {'width': '95%', 'height': '100%'},
                        };
                        var chart = new google.visualization.PieChart(document.getElementById('xpspentchart'));
                        chart.draw(data, options);
                    }
                </script>
                <section class="ui card">
                    <div class="content" title="XP spent per network">
                        <div class="header">
                            <div>
                                <i class="ui dashboard icon"></i>
                                /
                                <i class="ui sitemap icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div id="xpspentchart"></div>
                    </div>
                </section>
            {% endif %}
            {% if iscoinspent %}
                <script type="text/javascript">
                    google.charts.load("current", {packages:["corechart"]});
                    google.charts.setOnLoadCallback(drawChart3);
                    function drawChart3() {
                        var data = google.visualization.arrayToDataTable([
                            ['network', 'Coin given / coin spent'],
                            {% for network in networkslist.items %}
                                ['{{ network.0|escapejs }}',     {{ network.1.coingivencount }} / {{ network.1.coinspentcount }}],
                            {% endfor %}
                        ]);
                        var options = {
                            legend: 'none',
                            pieSliceText: 'label',
                            height: '275',
                            pieHole: 0.1,
                            'chartArea': {'width': '95%', 'height': '100%'},
                            pieSliceText: 'label',
                        };
                        var chart = new google.visualization.PieChart(document.getElementById('spentvsgivenchart'));
                        chart.draw(data, options);
                    }
                </script>
                <section class="ui card">
                    <div title="Coin spent per given per network" class="content">
                        <div class="header">
                            <div>
                                <i class="icons">
                                    <i class="ui send icon"></i>
                                    <i class="left top corner money icon"></i>
                                </i>
                                /
                                <i class="icons">
                                    <i class="ui cart icon"></i>
                                    <i class="top right corner money icon"></i>
                                </i>
                                /
                                <i class="sitemap icon"></i>
                            </div>
                        </div>
                    </div>
                    <div class="content">
                        <div id="spentvsgivenchart"></div>
                    </div>
                </section>
            {% endif %}
        </article>
    </div>
{% endblock content %}
{% block breadcrumbs %}
    <i class="sitemap icon"></i>
    <div class="active section">Networks</div>
{% endblock %}