path: root/templates/main/jams/team_view.html

{% extends "main/base.html" %}
{% block title %}Team {{ team.name }}{% endblock %}
{% block og_title %}Team {{ team.name }}{% endblock %}

{% block page_classes %}jam-team-view{% endblock %}

{% block content %}
    <div class="uk-section">
        <div class="uk-container uk-container-small">
            <h1 class="uk-header uk-article-title">
                Team <strong>{{ team.name }}</strong>
            </h1>
            <p class="uk-article-meta">
                Code Jam {{ team.jam.number }}
            </p>
            <p>
                <a href="{{ url_for('main.jams.jam_team_list', jam_id=team.jam.number) }}"
                   class="uk-button uk-button-default">
                    <i class="uk-icon fa-fw far fa-users"></i> &nbsp;Competing Teams
                </a>
                {% if logged_in %}
                    <a href="{{ url_for('main.jams.user_team_list') }}"
                       class="uk-button uk-button-default">
                        <i class="uk-icon fa-fw far fa-user"></i> &nbsp;My Teams
                    </a>
                {% endif %}
            </p>

            <div class="uk-grid">
                <div class="uk-width-1-2@m">
                    <h2>
                        Team Members
                    </h2>
                    <div class="participant-card-list">
                        {% for member in team.members %}
                            <div class="participant-card uk-card-default">
                                <img src="{{ member.avatar }}" class="uk-border-circle participant-avatar"
                                     height="20px">
                                <strong>{{ member.username }}#{{ member.discriminator }}</strong>
                                <div class="participant-links">
                                    <a href="https://discordapp.com/users/{{ member.user_id }}" target="_blank"
                                       class="uk-button uk-button-default">
                                        <i class="uk-icon fa-fw fab fa-discord"></i>
                                    </a>
                                    <a href="https://gitlab.com/{{ member.gitlab_username }}" target="_blank"
                                       class="uk-button uk-button-default">
                                        <i class="uk-icon fa-fw fab fa-gitlab"></i>
                                    </a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="uk-width-1-2@m">
                    <h2>
                        Activity
                    </h2>
                    <p>
                        {% if team.repo %}
                            <a href="https://gitlab.com/{{ team.repo }}" target="_blank"
                               class="uk-button uk-button-primary">
                                <i class="uk-icon fa-fw fab fa-gitlab"></i> &nbsp;View on GitLab
                            </a>
                        {% else %}
                            <a href="https://gitlab.com/{{ team.repo }}" target="_blank" id="view-repo-button"
                               class="uk-button uk-button-darkish uk-disabled">
                                <i class="uk-icon fa-fw fab fa-gitlab"></i> &nbsp;View on GitLab
                            </a>
                        {% endif %}
                        {% if is_own_team %}
                            <a class="uk-button uk-button-default" id="edit-repo-button">
                                <i class="uk-icon fa-fw far fa-pencil"></i>
                            </a>
                        {% endif %}
                    </p>
                    <div id="gitlab-activity" class="gitlab-activity uk-card-default
                        {% if not team.repo %}
                            uk-hidden
                        {% endif %}
                        ">
                        <div id="gitlab-activity-loading" class="gitlab-activity-loading">
                            <div class="gitlab-activity-loading-content">
                                <p>
                                    Loading GitLab activity, hang tight...
                                </p>
                                <div uk-spinner class="gitlab-activity-spinner"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if is_own_team %}
        <div id="repo-modal" class="uk-flex-top" uk-modal>
            <div class="uk-modal-dialog">
                <button class="uk-modal-close-default" type="button" uk-close></button>

                <div class="uk-modal-header">
                    <h2 class="uk-modal-title">Edit Repository</h2>
                </div>
                <form>
                    <input type="hidden" name="csrf_token" id="csrf_token" value="{{ csrf_token() }}"/>
                    <div class="uk-modal-body">
                        <p>
                            Enter your team's GitLab repository URL in the field below.
                        </p>
                        <p>
                            Note: it should be a fork of the jam's GitLab repository
                            (<strong>{{ team.jam.repo }}</strong>).
                        </p>
                        <div class="uk-form-horizontal">
                            <div>
                                <div class="uk-form-label">
                                    <label class="uk-form-label" for="repo-url">Repository URL</label>
                                </div>

                                <div class="uk-form-controls uk-form-controls-text">
                                    <input class="uk-input" type="text" name="repo-url" id="repo-url"
                                           value="https://gitlab.com/{{ team.repo }}" required>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="uk-modal-footer">
                        <div class="uk-text-center">
                            <button class="uk-button uk-button-default uk-modal-close" type="button" id="repo-cancel">
                                <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Cancel
                            </button>
                            <a class="uk-button uk-button-primary" id="repo-submit">
                                <i class="uk-icon fa-fw far fa-check"></i> &nbsp;Save
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    {% endif %}
    <script type="application/javascript">
        "use strict";

        {% if is_own_team %}
            /* Modal */

            const csrf_token = "{{ csrf_token() }}";
            const repo_edit_target = "{{ url_for('main.jams.team.edit_repo', team_id=team.id) }}";
            const repo_modal = UIkit.modal(document.getElementById("repo-modal"));
            const repo_cancel = document.getElementById("repo-cancel");
            const repo_submit = document.getElementById("repo-submit");
            const repo_url = document.getElementById("repo-url");
            const repo_edit_button = document.getElementById("edit-repo-button");

            repo_cancel.onclick = function () {
                repo_modal.hide();
            };

            repo_edit_button.onclick = () => {
                repo_modal.show();
            };

            function editTeamRepoURL(repo, callback) {
                $.ajax(repo_edit_target, {
                    "data": {"repo_url": repo},
                    "dataType": "json",
                    "headers": {"X-CSRFToken": csrf_token},
                    "method": "POST",
                }).done(data => {
                    if ("error_code" in data) {
                        return callback(false, data);
                    }

                    return callback(true, data);
                }).fail((xhr) => callback(false, xhr["responseJSON"]));
            }

            repo_submit.onclick = () => {
                let repo = repo_url.value;
                editTeamRepoURL(repo, (success, data) => {
                    if (success) {
                        UIkit.notification({
                            "message": "Edited repository successfully",
                            "status": "success",
                            "pos": "bottom-center",
                            "timeout": 5000,
                        });

                        GITLAB_PROJECT_ID = data["project_path"];
                        repo_modal.hide();
                        resetGitLabActivity();
                    } else {
                        console.log(data);
                        let message = (data && "error_message" in data) ? `Failed: ${data["error_message"]}` : "Failed to edit repository.";
                        UIkit.notification({
                            "message": message,
                            "status": "danger",
                            "pos": "bottom-center",
                            "timeout": 5000
                        });
                    }
                });
            };

        {% endif %}


        /* GitLab activity */

        function resetGitLabActivity() {
            $("#gitlab-activity-events").remove();
            $("#gitlab-activity-loading").show();
            $("#gitlab-activity").removeClass("uk-hidden");
            $("#view-repo-button").attr("href", `https://gitlab.com/${GITLAB_PROJECT_ID}`)
                .removeClass("uk-button-darkish")
                .removeClass("uk-disabled")
                .addClass("uk-button-primary");
            loadGitLabActivity();
        }

        let GITLAB_PROJECT_ID = "{{ team.repo }}"; // the gitlab project id
        function loadGitLabActivity() {
            const GITLAB_EVENT_ACTIONS = ["pushed"]; // the actions to filter in the event list
            const JAM_START_DATE = "{{ team.jam.date_start.strftime("%Y-%m-%d") }}"; // the start date of the jam, in order to ignore pushes prior to start
            const JAM_END_DATE = "{{ team.jam.date_end.strftime("%Y-%m-%d") }}"; // the end date of the jam, in order to ignore pushes after the end
            const GITLAB_PROJECT_EVENTS_ENDPOINT = () => `https://gitlab.com/api/v4/projects/${encodeURIComponent(GITLAB_PROJECT_ID)}/events?action=${GITLAB_EVENT_ACTIONS.join(",")}&after=${JAM_START_DATE}&before=${JAM_END_DATE}`;

            function gitlabBranchURL(branch) {
                return `https://gitlab.com/${GITLAB_PROJECT_ID}/tree/${branch}`
            }

            function gitlabCommitURL(commit) {
                return `https://gitlab.com/${GITLAB_PROJECT_ID}/commit/${commit}`
            }

            function onEventsLoaded(events) {
                $("#gitlab-activity-loading").hide();

                let eventList = $("<div id=\"gitlab-activity-events\"></div>")
                    .addClass("gitlab-activity-events");

                let eventCount = 0;
                for (let i = 0; i < events.length; i++) {
                    let event = events[i];
                    if (event["push_data"]["action"] !== "pushed") {
                        continue;
                    }
                    let commit = event["push_data"]["commit_to"];
                    let branch = event["push_data"]["ref"];
                    let eventDate = Date.parse(event["created_at"]);
                    let eventElement = $(
                        ""
                        + "<div class=\"gitlab-activity-event-item\">"
                        + "<div class=\"gitlab-activity-event-item-content\">"
                        + `<span><strong>${event["author"]["username"]}</strong> pushed: "${event["push_data"]["commit_title"]}"</span>`
                        + "<br>"
                        + `<a target=\"blank\" href=\"${gitlabCommitURL(commit)}\" class=\"pasta\">${commit.substring(0, 8)}</a>`
                        + `<a target=\"blank\" href=\"${gitlabBranchURL(branch)}\" class=\"pasta\"><i class="uk-icon fa-fw far fa-code-branch"></i> ${branch}</a>`
                        + ``
                        + "</div>"
                        + "</div>"
                    );
                    eventList.append(eventElement);
                    eventCount++;
                }

                let footerMessage = eventCount > 0 ? "We've reached the end!" : "There is no activity to show at this time.";

                // add the footer
                let eventListFooter = $(
                    ""
                    + "<div class=\"gitlab-activity-events-footer\">"
                    + `<span>${footerMessage}</span>`
                    + "</div>"
                ).appendTo(eventList);

                $("#gitlab-activity").append(eventList);
            }

            function onEventsFailed(xhr) {
                console.error(xhr);
            }

            $.get(
                GITLAB_PROJECT_EVENTS_ENDPOINT()
            ).done(onEventsLoaded).fail(onEventsFailed);
        }

        window.onload = loadGitLabActivity;
    </script>
{% endblock %}