Merge branch 'teams-user-frontend' into 'master'

User frontend for teams

See merge request python-discord/projects/site!9

5 files changed, 382 insertions, 2 deletions

diff --git a/templates/main/jams/index.html b/templates/main/jams/index.html
index e2201398..3bd7a8c7 100644
--- a/templates/main/jams/index.html
+++ b/templates/main/jams/index.html
@@ -66,8 +66,13 @@
                                     <i class="uk-icon fa-fw far fa-plus"></i> &nbsp;Join
                                 </a>
                             {% else %}
+                                {% if jam.teams and jam.teams | length > 0 %}
+                                    <a class="uk-button uk-button-primary" href="{{ url_for('main.jams.jam_team_list', jam_id=jam.number) }}">
+                                        <i class="uk-icon fa-fw far fa-users"></i> &nbsp;Teams
+                                    </a>
+                                {% endif %}
                                 <a class="uk-button uk-button-default" target="_blank" href="{{ jam.repo }}">
-                                    <i class="uk-icon fa-fw fab fa-gitlab"></i> &nbsp;Repository
+                                    <i class="uk-icon fa-fw fab fa-gitlab"></i>
                                 </a>
                             {% endif %}
                         </span>
diff --git a/templates/main/jams/team_list.html b/templates/main/jams/team_list.html
new file mode 100644
index 00000000..87a2e189
--- /dev/null
+++ b/templates/main/jams/team_list.html
@@ -0,0 +1,79 @@
+{% extends "main/base.html" %}
+{% block title %}Code Jams | My Teams{% endblock %}
+{% block og_title %}Code Jams | My Teams{% endblock %}
+
+{% block page_classes %}jam-team-list{% endblock %}
+
+{% block content %}
+    <div class="uk-section">
+        <div class="uk-container uk-container-small">
+            <h1 class="uk-header uk-article-title uk-heading-divider">
+                {% if user_teams %}
+                    Code Jams: My Teams
+                {% else %}
+                    Code Jam {{ jam.number }}: Teams
+                {% endif %}
+            </h1>
+            {% if not user_teams %}
+                <p>
+                    <a id="back" class="uk-button uk-button-default" href="{{ url_for("main.jams.index") }}">
+                        <i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;All Jams
+                    </a>
+                </p>
+            {% endif %}
+            {% if teams %}
+                <div class="uk-flex uk-flex-row uk-flex-wrap team-list-cards">
+                    {% for team in teams %}
+                        <div class="uk-card uk-card-default uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left
+                        {% if not user_teams and logged_in and user.user_id in member_ids(team.members) %}
+                            team-card-own
+                        {% endif %}
+                        ">
+                            <div class="uk-card-body">
+                                <div class="uk-card-title">
+                                    Team <strong>{{ team.name }}</strong>
+                                    {% if user_teams %}
+                                        <p class="uk-article-meta team-subtitle">
+                                            Code Jam {{ team.jam.number }}
+                                        </p>
+                                    {% endif %}
+                                </div>
+                                <div class="team-member-avatars">
+                                    {% for member in team.members %}
+                                        <a href="https://discordapp.com/users/{{ member.user_id }}"
+                                           title="{{ member.username }}#{{ member.discriminator }}"
+                                           target="_blank"
+                                           class="team-member-avatar-link">
+                                            <img src="{{ member.avatar }}" class="team-member-avatar uk-border-circle"/>
+                                        </a>
+                                    {% endfor %}
+                                </div>
+                                <div class="team-links">
+                                    <a href="{{ url_for('main.jams.team_view', team_id=team.id) }}"
+                                       class="uk-button uk-button-primary">
+                                        <i class="uk-icon fa-fw far fa-eye"></i> &nbsp;View
+                                    </a>
+                                    {% if team.repo %}
+                                        <a href="https://gitlab.com/{{ team.repo }}" target="_blank" class="uk-button uk-button-default">
+                                            <i class="uk-icon fa-fw fab fa-gitlab"></i>
+                                        </a>
+                                    {% else %}
+                                        <a href="#" target="_blank" class="uk-button uk-button-darkish uk-disabled">
+                                            <i class="uk-icon fa-fw fab fa-gitlab"></i>
+                                        </a>
+                                    {% endif %}
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+                </div>
+            {% else %}
+                {% if user_teams %}
+                    <p>You are not part of any team.</p>
+                {% else %}
+                    <p>There are no teams in this jam.</p>
+                {% endif %}
+            {% endif %}
+        </div>
+    </div>
+{% endblock %}
diff --git a/templates/main/jams/team_view.html b/templates/main/jams/team_view.html
new file mode 100644
index 00000000..95cbb0b1
--- /dev/null
+++ b/templates/main/jams/team_view.html
@@ -0,0 +1,290 @@
+{% 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 %}
diff --git a/templates/main/navigation.html b/templates/main/navigation.html
index cd5b967f..a32ac1c1 100644
--- a/templates/main/navigation.html
+++ b/templates/main/navigation.html
@@ -143,6 +143,12 @@
                                 <li><a href="{{ url_for('main.jams.profile') }}">My Profile</a></li>
                             {% endif %}
 
+                            {% if current_page == "main.jams.user_team_list" %}
+                                <li class="uk-active"><a href="{{ url_for('main.jams.user_team_list') }}">My Teams</a></li>
+                            {% else %}
+                                <li><a href="{{ url_for('main.jams.user_team_list') }}">My Teams</a></li>
+                            {% endif %}
+
                             <li class="uk-nav-divider"></li>
 
                             {% if current_page.startswith("main.about.privacy") %}
diff --git a/templates/staff/jams/index.html b/templates/staff/jams/index.html
index f140aecc..e4e1e242 100644
--- a/templates/staff/jams/index.html
+++ b/templates/staff/jams/index.html
@@ -205,7 +205,7 @@
                                 case "preparing":
                                     document.getElementById("state-" + jam + "-preparing").removeAttribute("hidden");
 
-                                    document.getElementById("jam-" + jam + "-button-info").removeAttribute("hidden");
+                                    document.getElementById("jam-" + jam + "-button-info").setAttribute("hidden", "hidden");
                                     document.getElementById("jam-" + jam + "-button-ending").setAttribute("hidden", "hidden");
                                     break;
                                 case "running":