{{include("header")/}}


<style>
    .pre-log-content{
        height: calc(100vh - 270px); /* -251px */
        margin-bottom: 0;
    }

    .event-source{
        font-weight: 700 !important;
        text-decoration: none !important;
    }

    /* Experimental */
    .highlight-player{
        background-color: #ffeaa7;
        color: rgb(27, 27, 27) !important;
    }
</style>


<div class="text-center" style="margin-bottom: 5px">
    <h3>Server Log</h3>
    <span><span class="badge badge-danger">NEW</span> You can now log custom commands like <code>/car</code>. Read the <a href="https://github.com/tabarra/txAdmin/blob/master/docs/extra_logging.md" target="_blank">docs</a> for more information.</span>
</div>
<div class="card border-primary">
    <div class="card-body">
        <pre id="console" class="thin-scroll pre-log-content">{{log|safe}}</pre>
    </div>
</div>


{{include("footer")/}}


<script>
    $(document).ready(function () {
        scrollToBottom();
        setupHovers();
    });

    setInterval(getNewData, 5000);

    var currOffset = '{{offset}}';
    function getNewData(){
        $.ajax({
            type: "GET",
            url: `/serverLog?offset=${currOffset}`,
            timeout: timeoutMedium,
            success: function (data) {
                //FIXME: temporary before database
                if(typeof data.offset !== 'undefined') currOffset = data.offset;
                if(typeof data.log !== 'undefined' && data.log !== false && data.log.length){
                    $("#console").append(data.log);
                    scrollToBottom();
                    setupHovers();
                }
            },
            error: function (xmlhttprequest, textstatus, message) {
                console.log(`Error refreshing server log: ${message}`)
            }
        });
    }

    function scrollToBottom(){
        try {
            $("#console").scrollTop($("#console")[0].scrollHeight);
        } catch (error) {}
    }

    //Player name click function
    function setupHovers(){
        $('.event-source').click(function(e){
            let ids = $(this).data('player-identifiers');
            if(!ids) return;
            let name = $(this).data('player-name') || 'unknown';

            $("#modPlayerInfoTitle").text(name);
            $("#modPlayerInfoIdentifiers").html(ids.split(';').join(', <br>\n'));
            $("#modPlayerInfoButtons").html('<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>');
            $('#modPlayerInfo').modal('show');
        });
    }
</script>
