ss13_se/templates/server_detail.html

{{template "header" .}}
    <h1>{{.server.Title}}</h1>

    <a class="btn btn-default" {{.server.GameUrl |safe_href }} rel="nofollow">Launch game</a>
    {{if .server.SiteUrl}}
        <a class="btn btn-default" href="{{.server.SiteUrl}}" rel="nofollow">Homepage</a>
    {{else}}
        <button class="btn btn-default">No homepage</button>
    {{end}}

    <h3>Status</h3>
        {{ if .server.TimeIsGreater 24}}
    <p id="server_status" class="status_offline">
        <span title="Offline: was not seen during the last week." class="glyphicon glyphicon-remove-sign"></span>
        {{ else if .server.TimeIsGreater 1}}
    <p id="server_status" class="status_unknown">
        <span title="Unknown: was not seen during the last day." class="glyphicon glyphicon-question-sign"></span>
        {{else}}
    <p id="server_status" class="status_online">
        <span title="Online: was seen during the last hour." class="glyphicon glyphicon-ok-sign"></span>
        {{end}}
        Last seen <span class="bold" title="{{.server.Timestamp}}">
            {{.server.TimeSince}}
        </span>ago.
    </p>

    <h3>Players</h3>
    <table id="player_stats" class="table table-hover">
        <thead>
            <tr>
                <th>Currently online</th>
                <th>Average</th>
                <th>Min</th>
                <th>Max</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>{{.server.PlayersCurrent}}</th>
                <th>{{.server.PlayersAvg}}</th>
                <th>{{.server.PlayersMin}}</th>
                <th>{{.server.PlayersMax}}</th>
            </tr>
    </table>

    <h3>History</h3>
    <b>Last week</b>
    <div id="weekhistory"></div>
    <b>Last month</b>
    <div id="monthhistory"></div>
    <h3>Average per day</h3>
    <b> Last month</b>
    <div id="weekdayavg"></div>
    <div id="tooltip"></div>

    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.flot.js"></script>
    <script type="text/javascript" src="/static/js/jquery.flot.time.js"></script>
    <script type="text/javascript" src="/static/js/jquery.flot.categories.js"></script>
    <script type="text/javascript">
        $(function() {
            var data = [
                {{range .weekhistory}}[{{.Timestamp |inms}}, {{.Players}}], {{end}}
            ];
            $.plot("#weekhistory", [data], {
                xaxis: {
                    mode: "time",
                    timezone: "browser",
                },
                lines: {
                    show: true,
                    fill: true,
                },
                grid: {
                    hoverable: true,
                    borderWidth: 0,
                },
            });

            var data = [
                {{range .monthhistory}}[{{.Timestamp |inms}}, {{.Players}}], {{end}}
            ];
            $.plot("#monthhistory", [data], {
                xaxis: {
                    mode: "time",
                    timezone: "browser",
                },
                lines: {
                    show: true,
                    fill: true,
                },
                grid: {
                    hoverable: true,
                    borderWidth: 0,
                },
            });

            var data= [
            {{range .weekdayavg}}[{{.Day}}, {{.Players}}], {{end}}
            ];
            $.plot("#weekdayavg", [data], {
                xaxis: {
                    mode: "categories",
                },
                bars: {
                    show: true,
                    barWidth: 0.75,
                    align: "center",
                },
                grid: {
                    hoverable: true,
                    borderWidth: 0,
                },
            });

            $("#weekhistory").bind("plothover", function (event, pos, item) {
                if (item) {
                    var time = item.datapoint[0];
                    var players = item.datapoint[1];
                    var timestamp = new Date(time).toString();
                    $("#tooltip")
                        .html(players + " players at " + timestamp)
                        .css({top: item.pageY+5, left: item.pageX+5})
                        .fadeIn(200);
                } else {
                    $("#tooltip").hide();
                }
            });
            $("#monthhistory").bind("plothover", function (event, pos, item) {
                if (item) {
                    var time = item.datapoint[0];
                    var players = item.datapoint[1];
                    var timestamp = new Date(time).toString();
                    $("#tooltip")
                        .html(players + " players at " + timestamp)
                        .css({top: item.pageY+5, left: item.pageX+5})
                        .fadeIn(200);
                } else {
                    $("#tooltip").hide();
                }
            });
            $("#weekdayavg").bind("plothover", function (event, pos, item) {
                if (item) {
                    var players = item.datapoint[1];
                    $("#tooltip")
                        .html(players + " players")
                        .css({top: item.pageY+5, left: item.pageX+5})
                        .fadeIn(200);
                } else {
                    $("#tooltip").hide();
                }
            });
        });
    </script>
{{template "footer"}}