NDOJ/templates/user/user-about.html

{% extends "user/user-base.html" %}

{% block title_ruler %}{% endblock %}

{% block title_row %}
    {% set tab = 'about' %}
    {% include "user/user-tabs.html" %}
{% endblock %}

{% block user_content %}
    <div class="content-description">
        {% if request.user != user.user %}
        <form method="post">
            {% csrf_token %}
            <button class="{{ 'unfollow' if followed else 'follow' }}">
                {% if followed %}
                    <i class="fa fa-remove"></i>
                    {{ _('Unfollow') }}
                {% else %}
                    <i class="fa fa-user-plus"></i>
                    {{ _('Follow') }}
                {% endif %}
            </button>
        </form>
        {% endif %}
        {% with orgs=user.organizations.all() %}
            {% if orgs %}
                <p style="margin-top: 0"><b>{{ _('From') }}</b>
                    {% for org in orgs -%}
                        <a href="{{ org.get_absolute_url() }}">{{ org.name }}</a>
                        {%- if not loop.last %}, {% endif %}
                    {% endfor %}
                </p>
            {% endif %}
        {% endwith %}
        {% if perms.judge.change_profile %}
            {% with notes=user.notes %}
                {% if notes %}
                    <p style="margin-top: 0"><b>{{ _('Admin Notes') }}: </b>
                        {{ notes }}
                    </p>
                {% endif %}
            {% endwith %}
        {% endif%}

        {% if user.about %}
            <h4>{{ _('About') }}</h4>
            {% cache 86400 'user_about' user.id MATH_ENGINE %}
                {{ user.about|markdown('self-description', MATH_ENGINE)|reference|str|safe }}
            {% endcache %}
        {% else %}
            <i>
                {% if user.user == request.user %}
                    {{ _('You have not shared any information.') }}
                {% else %}
                    {{ _('This user has not shared any information.') }}
                {% endif %}
            </i>
            <br>
        {% endif %}

        {% if rating %}
            <h4>Rating History</h4>
            <div id="rating-chart">
                <canvas></canvas>
            </div>
            <div id="rating-tooltip">
                <div class="contest"></div>
                <div class="date"></div>
                <div class="rate-group">
                    <span class="rate-box"><span></span></span>
                    <span class="rating"></span>, #<span class="rank"></span>
                </div>
            </div>
        {% endif %}
    </div>
{% endblock %}

{% block bodyend %}
    {% if REQUIRE_JAX %}
        {% include "mathjax-load.html" %}
    {% endif %}

    {% if ratings %}
        <script type="text/javascript" src="{{ static('libs/chart.js/Chart.js') }}"></script>
        <script type="text/javascript">
            var rating_history = {{rating_data}};

            $.each(rating_history, function (index, item) {
                item.x = new Date(item.timestamp);
                item.y = item.rating;
            });

            $(function () {
                var $canvas = $('#rating-chart').find('canvas');
                var ctx = $canvas.get(0).getContext('2d');

                var getItem = function (index) {
                    return rating_history[index];
                };

                window.rating_chart = new Chart(ctx, {
                    type: 'scatter',
                    data: {
                        datasets: [{
                            label: 'rating',
                            backgroundColor: 'rgb(0,0,0,0)',
                            borderColor: '#A31515',
                            pointBackgroundColor: '#A31515',
                            pointHoverBackgroundColor: '#FFF',
                            pointRadius: 5,
                            pointHoverRadius: 5,
                            showLine: true,
                            data: rating_history,
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        elements: {
                            line: {
                                tension: 0,
                            },
                        },
                        legend: {
                            display: false,
                        },
                        layout: {
                            padding: {
                                right: 10,
                            },
                        },
                        scales: {
                            xAxes: [{
                                type: 'time',
                                distribution: 'linear',
                            }],
                            yAxes: [{
                                ticks: {
                                    precision: 0,
                                },
                            }],
                        },
                        tooltips: {
                            enabled: false,
                            custom: function (tooltipModel) {
                                var $tooltip = $('#rating-tooltip');

                                if (tooltipModel.opacity == 0) {
                                    $tooltip.hide();
                                    return;
                                }

                                var element = tooltipModel.dataPoints[0]
                                var item = getItem(element.index);

                                $tooltip.find('.contest').text(item.label);
                                $tooltip.find('.date').text(item.date);
                                $tooltip.find('.rate-box').attr('class', 'rate-box ' + item.class)
                                        .find('span').css('height', item.height);
                                $tooltip.find('.rating').text(item.rating).attr('class', 'rating ' + item.class);
                                $tooltip.find('.rank').text(item.ranking);

                                $tooltip.removeClass('above below');
                                $tooltip.addClass(element.y < $tooltip.height() ? 'below' : 'above');

                                var position = $canvas.offset();
                                var container = $('#page-container').offset();
                                $tooltip.css({
                                    left: position.left - container.left + element.x + $tooltip.width() / 2,
                                    top: position.top - container.top + element.y - $tooltip.height() - 13,
                                    fontFamily: tooltipModel._bodyFontFamily,
                                    fontSize: tooltipModel._bodyFontSize,
                                    fontStyle: tooltipModel._bodyFontStyle,
                                }).show();
                            },
                        }
                    }
                });

                $canvas.click(function (evt) {
                    var elements = window.rating_chart.getElementsAtEvent(evt);
                    if (elements.length > 0) {
                        var item = getItem(elements[0]._index);
                        window.location.href = item.link;
                    }
                });

                $canvas.mousemove(function (evt) {
                    var elements = window.rating_chart.getElementsAtEvent(evt);
                    if (elements.length > 0) {
                        $canvas.css('cursor', 'pointer');
                    } else {
                        $canvas.css('cursor', '');
                    }
                });
            });
        </script>
    {% endif %}
{% endblock %}