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 %}

        <h4 id="submission-activity-header"></h4>
        <div id="submission-activity" style="display: none;">
            <div id="submission-activity-actions">
                <a href="javascript:void(0)" id="prev-year-action">&laquo;</a>
                &nbsp;<span id="year"></span>&nbsp;
                <a href="javascript:void(0)" id="next-year-action">&raquo;</a>
            </div>
            <div id="submission-activity-display">
                <table id="submission-activity-table">
                    <tr id="submission-0">
                        <th class="submission-date-col info-text">
                            {{ _('Mon') }}
                        </th>
                    </tr>
                    <tr id="submission-1">
                        <th class="submission-date-col info-text">
                            {{ _('Tues') }}
                        </th>
                    </tr>
                    <tr id="submission-2">
                        <th class="submission-date-col info-text">
                            {{ _('Wed') }}
                        </th>
                    </tr>
                    <tr id="submission-3">
                        <th class="submission-date-col info-text">
                            {{ _('Thurs') }}
                        </th>
                    </tr>
                    <tr id="submission-4">
                        <th class="submission-date-col info-text">
                            {{ _('Fri') }}
                        </th>
                    </tr>
                    <tr id="submission-5">
                        <th class="submission-date-col info-text">
                            {{ _('Sat') }}
                        </th>
                    </tr>
                    <tr id="submission-6">
                        <th class="submission-date-col info-text">
                            {{ _('Sun') }}
                        </th>
                    </tr>
                </table>
                <div class="info-bar">
                    <span id="submission-total-count" class="info-text">
                    </span>
                    <table class="info-table">
                        <tr>
                            <th class="info-table-text info-text">{{ _('Less') }}</th>
                            <td class="activity-0"><div></div></td>
                            <td class="activity-1"><div></div></td>
                            <td class="activity-2"><div></div></td>
                            <td class="activity-3"><div></div></td>
                            <td class="activity-4"><div></div></td>
                            <th class="info-table-text info-text">{{ _('More') }}</th>
                        <tr>
                    </table>
                </div>
            </div>
        </div>

        {% 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 %}

    <script type="text/javascript">
        var submission_activity = {{ submission_data }};
        var metadata = {{ submission_metadata }};
        const activity_levels = 5; // 5 levels of activity

        $(function () {
            var active_tooltip = null;

            function display_tooltip(where) {
                if (active_tooltip !== null) {
                    active_tooltip.removeClass(['tooltipped', 'tooltipped-e', 'tooltipped-w']).removeAttr('aria-label');
                }
                if (where !== null) {
                    var day_num = parseInt(where.attr('data-day'));
                    var tooltip_direction = day_num < 183 ? 'tooltipped-e' : 'tooltipped-w';
                    where.addClass(['tooltipped', tooltip_direction])
                         .attr('aria-label', where.attr('data-submission-activity'));
                }
                active_tooltip = where;
            }

            function install_tooltips () {
                display_tooltip(null);
                $('.activity-label').each(function () {
                    var link = $(this);
                    link.hover(
                        function(e) {
                            display_tooltip(link);
                        },
                        function(e) {
                            display_tooltip(null);
                        }
                    );
                });
            }

            var current_year = new Date().getFullYear();
            var $div = $('#submission-activity');

            function draw_contribution(year) {
                $div.find('#submission-activity-table td').remove();
                $div.find('#year').attr('data-year', year);
                $div.find('#prev-year-action').css('display', year > metadata.min_year ? '' : 'none');
                $div.find('#next-year-action').css('display', year < current_year ? '' : 'none');
                var current_weekday = 0;
                var start_day = new Date(year, 0, 1)
                var end_day = new Date(year + 1, 0, 0);
                if (year == current_year) {
                    end_day = new Date();
                    start_day = new Date(end_day.getFullYear() - 1, end_day.getMonth(), end_day.getDate() + 1);
                    $div.find('#year').text("{{ _('past year') }}");
                } else {
                    $div.find('#year').text(year);
                }
                var days = [];
                for (var day = start_day, day_num = 1; day <= end_day; day.setDate(day.getDate() + 1), day_num++) {
                    var isodate = day.toISOString().split('T')[0];
                    days.push({
                        date: new Date(day),
                        weekday: day.getDay(),
                        day_num: day_num,
                        activity: submission_activity[isodate] || 0,
                    });
                }

                var sum_activity = days.map(obj => obj.activity).reduce((a, b) => a + b, 0);
                $div.find('#submission-total-count').text(
                    ngettext("%(cnt)d total submission", "%(cnt)d total submissions", sum_activity)
                        .replace("%(cnt)d", sum_activity)
                )
                if (year == current_year) {
                    $('#submission-activity-header').text(
                        ngettext("%(cnt)d submission in the last year", "%(cnt)d submissions in the last year", sum_activity)
                            .replace("%(cnt)d", sum_activity)
                    )
                }

                var max_activity = Math.max.apply(null, days.map(obj => obj.activity));
                var diff = max_activity / (activity_levels - 1);
                var activity_breakdown = [...Array(activity_levels).keys()].map(x => diff * x);

                for (; current_weekday < days[0].weekday; current_weekday++) {
                    $div.find('#submission-' + current_weekday)
                        .append($('<td>').addClass('activity-blank').append('<div>'));
                }

                days.forEach(obj => {
                    var level = activity_breakdown.findIndex(x => x >= obj.activity);
                    var text =
                        ngettext("%(cnt)d submission on %(date)s", "%(cnt)d submissions on %(date)s", obj.activity)
                            .replace('%(cnt)d', obj.activity)
                            .replace(
                                '%(date)s',
                                obj.date.toLocaleDateString(
                                    "{{ LANGUAGE_CODE }}",
                                    {month: 'short', year: 'numeric', day: 'numeric'}
                                )
                            )

                    $div.find('#submission-' + obj.weekday)
                        .append(
                            $('<td>').addClass(['activity-label', 'activity-' + level])
                                          .attr('data-submission-activity', text)
                                          .attr('data-day', obj.day_num)
                                          .append('<div>')
                        );
                });

                install_tooltips();
            }

            $('#prev-year-action').click(function () {
                draw_contribution(parseInt($div.find('#year').attr('data-year')) - 1);
            });
            $('#next-year-action').click(function () {
                draw_contribution(parseInt($div.find('#year').attr('data-year')) + 1);
            });

            draw_contribution(current_year);
            $('#submission-activity').css('display', '');
        });
    </script>


    {% 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 %}