From 8519357d2613a870a56a4c1769b4da9069bb0db4 Mon Sep 17 00:00:00 2001
From: Momo <momothereal.mc@gmail.com>
Date: Wed, 4 Jul 2018 23:43:37 +0000
Subject: Revamp jam index, add winner team staff backend and user frontend

---
 templates/main/jams/index.html       |  40 ++++---
 templates/main/jams/team_list.html   |  17 ++-
 templates/staff/jams/teams/view.html | 222 ++++++++++++++++++++++++++++-------
 3 files changed, 219 insertions(+), 60 deletions(-)

(limited to 'templates')

diff --git a/templates/main/jams/index.html b/templates/main/jams/index.html
index 9a228b74..3546bd71 100644
--- a/templates/main/jams/index.html
+++ b/templates/main/jams/index.html
@@ -58,7 +58,7 @@
 
             {% if jams %}
                 {% for jam in jams %}
-                    <h1 class="uk-article-title uk-heading-divider">
+                    <h1 class="uk-article-title">
                         Code Jam {{ jam.number }}: {{ jam.title }}
                         <span class="uk-float-right">
                             {% if jam.state == "announced" %}
@@ -86,25 +86,29 @@
                             State: {{ jam.state.title() }}
                         </p>
                     </h1>
-
-                    <p>
+                    <div class="uk-grid-match uk-grid-small uk-text-center uk-grid-gap-none uk-grid-collapse jam-tiles uk-margin-small-top" uk-grid>
+                        <div class="uk-width-1-2@m uk-tile uk-tile-success uk-padding-small">
+                            <p class="uk-h4 jam-tile-text">Start: {{ format_datetime(jam.date_start) }} UTC</p>
+                        </div>
+                        <div class="uk-width-1-2@m uk-tile uk-tile-danger uk-padding-small">
+                            <p class="uk-h4 jam-tile-text">End: {{ format_datetime(jam.date_end) }} UTC</p>
+                        </div>
                         {% if jam.participants %}
-                            <span class="uk-label uk-label">
-                                Participants: {{ jam.participants | length }}
-                            </span>
+                            {% if jam.winning_team %}
+                                <a href="{{ url_for('main.jams.jam_team_list', jam_id=jam.number) }}"  class="uk-link-reset uk-width-1-2@m uk-tile uk-tile-primary uk-padding-small">
+                                    <p class="uk-h4 jam-tile-text">Participants: {{ jam.participants | length }}</p>
+                                </a>
+                                <a href="{{ url_for('main.jams.team_view', team_id=jam.winning_team.id) }}" class="uk-link-reset uk-width-1-2@m uk-tile uk-tile-winner uk-padding-small">
+                                    <p class="uk-h4 jam-tile-text">Champions: {{ jam.winning_team.name }}</p>
+                                </a>
+                            {% else %}
+                                <a href="{{ url_for('main.jams.jam_team_list', jam_id=jam.number) }}"  class="uk-link-reset uk-width-1-1@m uk-tile uk-tile-primary uk-padding-small">
+                                    <p class="uk-h4 jam-tile-text">Participants: {{ jam.participants | length }}</p>
+                                </a>
+                            {% endif %}
                         {% endif %}
-                        <span class="uk-label uk-label-success">
-                            {{ format_datetime(jam.date_start) }} UTC
-                        </span>
-
-                        <span class="date-separator">
-                            <i class="uk-icon fa-fw far fa-arrow-right" ></i>
-                        </span>
-
-                        <span class="uk-label uk-label-danger">
-                            {{ format_datetime(jam.date_end) }} UTC
-                        </span>
-
+                    </div>
+                    <p>
                         {% if jam.state in ["running", "judging", "finished"] %}
                             <span class="uk-label uk-align-right theme-label">
                             Theme: {{ jam.theme }}
diff --git a/templates/main/jams/team_list.html b/templates/main/jams/team_list.html
index 65d58f8a..75c48337 100644
--- a/templates/main/jams/team_list.html
+++ b/templates/main/jams/team_list.html
@@ -38,12 +38,25 @@
                 <div class="uk-flex uk-flex-row uk-flex-wrap uk-flex-center 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
+                        {% if not user_teams %}
+                            {% if logged_in and user.user_id in member_ids(team.members) %}
+                                team-card-own
+                            {% endif %}
+                            {% if jam.winning_team and jam.winning_team == team.id %}
+                                team-card-winner
+                            {% endif %}
                         {% endif %}
                         ">
                             <div class="uk-card-body">
                                 <div class="uk-card-title">
+                                    {% if not user_teams %}
+                                        {% if logged_in and user.user_id in member_ids(team.members) %}
+                                            <i class="uk-icon fa-fw far fa-user team-badge-own" uk-tooltip="Your Team"></i>
+                                        {% endif %}
+                                        {% if jam.winning_team and jam.winning_team == team.id %}
+                                            <i class="uk-icon fa-fw far fa-trophy team-badge-winner" uk-tooltip="Champions"></i>
+                                        {% endif %}
+                                    {% endif %}
                                     Team <strong>{{ team.name }}</strong>
                                     {% if user_teams %}
                                         <p class="uk-article-meta team-subtitle">
diff --git a/templates/staff/jams/teams/view.html b/templates/staff/jams/teams/view.html
index 909c4c94..659a60c2 100644
--- a/templates/staff/jams/teams/view.html
+++ b/templates/staff/jams/teams/view.html
@@ -2,6 +2,7 @@
 {% block title %}Staff | Jams | Teams{% endblock %}
 {% block og_title %}Staff | Jams | Teams{% endblock %}
 {% block og_description %}Manage Teams{% endblock %}
+{% block page_classes %}page-staff-jams-edit-teams{% endblock %}
 {% block content %}
     <div class="uk-flex">
         <div class="uk-flex-column uk-padding-small uk-background-muted" id="member-answers-sidebar">
@@ -13,7 +14,7 @@
             <div id="hidden-user-info" hidden>
                 {% for participant in jam.participants %}
                     <div class="user-info" id="user-info-{{ participant.user_id }}">
-                        <img src="{{ participant.avatar }}" class="uk-border-circle avatar" />
+                        <img src="{{ participant.avatar }}" class="uk-border-circle avatar"/>
                         <div class="uk-text-center">
                             <strong>{{ participant.username }}#{{ participant.discriminator }}</strong>
                         </div>
@@ -26,7 +27,7 @@
                                 <i class="uk-icon fab fa-fw fa-gitlab"></i> {{ participant.profile.gitlab_username }}
                             </a>
                         </div>
-                        <hr class="uk-divider-icon" />
+                        <hr class="uk-divider-icon"/>
 
                         {% for answer in participant.answers %}
                             <strong>{{ questions[answer.question].title }}</strong>
@@ -42,23 +43,45 @@
         <div class="uk-section uk-flex-column uk-flex-stretch">
             <h1>Code Jam {{ jam.number }}: Teams</h1>
 
-            <a class="uk-button uk-button-default" href="{{ url_for("staff.jams.index") }}"><i class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Back</a>
+            <a class="uk-button uk-button-default" href="{{ url_for("staff.jams.index") }}"><i
+                    class="uk-icon fa-fw far fa-arrow-left"></i> &nbsp;Back</a>
 
             {% if teams %}
-                <button class="uk-button uk-button-primary" id="init-button" disabled><i class="uk-icon fa-fw far fa-play"></i> &nbsp;Generate Teams</button>
+                <button class="uk-button uk-button-primary" id="init-button" disabled><i
+                        class="uk-icon fa-fw far fa-play"></i> &nbsp;Generate Teams
+                </button>
             {% else %}
-                <button class="uk-button uk-button-primary" id="init-button"><i class="uk-icon fa-fw far fa-play"></i> &nbsp;Generate Teams</button>
+                <button class="uk-button uk-button-primary" id="init-button"><i class="uk-icon fa-fw far fa-play"></i>
+                    &nbsp;Generate Teams
+                </button>
             {% endif %}
 
-            <button class="uk-button uk-button-secondary" id="add-button"><i class="uk-icon fa-fw far fa-plus"></i> &nbsp;Add Team</button>
-            <br />
-            <br />
+            <button class="uk-button uk-button-secondary" id="add-button"><i class="uk-icon fa-fw far fa-plus"></i>
+                &nbsp;Add Team
+            </button>
+
+            {% if jam.winning_team %}
+                <button class="uk-button team-winner-unset-button uk-button-secondary" id="winner-unset-button"><i
+                        class="uk-icon fa-fw far fa-trophy"></i>
+                    &nbsp;Unset Winner
+                </button>
+            {% else %}
+                <button class="uk-button team-winner-unset-button uk-hidden" id="winner-unset-button"><i
+                        class="uk-icon fa-fw far fa-trophy"></i>
+                    &nbsp;Unset Winner
+                </button>
+            {% endif %}
+
+            <br/>
+            <br/>
             <div class="uk-hidden hidden-participants" hidden>
                 {% for participant in jam.participants %}
                     {% if participant.user_id not in assigned %}
-                        <div class="uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left" id="participant-line-{{ participant.user_id }}" title="{{ participant.user_id }}">
+                        <div class="uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left"
+                             id="participant-line-{{ participant.user_id }}" title="{{ participant.user_id }}">
                             <span class="participant-handle" draggable="true" data-user-id="{{ participant.user_id }}">
-                                <img class="uk-icon-image uk-border-circle" draggable="false" src="{{ participant.avatar }}" />
+                                <img class="uk-icon-image uk-border-circle" draggable="false"
+                                     src="{{ participant.avatar }}"/>
                                 {{ participant.username }}#{{ participant.discriminator }} ({{ participant.profile.timezone }})
                             </span>
                         </div>
@@ -68,19 +91,29 @@
             <div class="uk-flex uk-flex-row uk-flex-wrap" id="participant-handles">
                 {% for participant in jam.participants %}
                     {% if participant.user_id not in assigned %}
-                        <div class="participant-handle uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left" id="participant-{{ participant.user_id }}" title="{{ participant.profile.timezone }} - {{ participant.user_id }}" draggable="true" data-user-id="{{ participant.user_id }}">
-                            <div class="uk-card uk-card-primary uk-card-small" id="participant-{{ participant.user_id }}-card">
+                        <div class="participant-handle uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left"
+                             id="participant-{{ participant.user_id }}"
+                             title="{{ participant.profile.timezone }} - {{ participant.user_id }}" draggable="true"
+                             data-user-id="{{ participant.user_id }}">
+                            <div class="uk-card uk-card-primary uk-card-small"
+                                 id="participant-{{ participant.user_id }}-card">
                                 <div class="uk-card-body">
-                                    <img class="uk-icon-image uk-border-circle" draggable="false" src="{{ participant.avatar }}" />
+                                    <img class="uk-icon-image uk-border-circle" draggable="false"
+                                         src="{{ participant.avatar }}"/>
                                     {{ participant.username }}#{{ participant.discriminator }}
                                 </div>
                             </div>
                         </div>
                     {% else %}
-                        <div class="participant-handle uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left" id="participant-{{ participant.user_id }}" title="{{ participant.profile.timezone }} - {{ participant.user_id }}" draggable="true" data-user-id="{{ participant.user_id }}">
-                            <div class="uk-card uk-card-secondary uk-card-small" id="participant-{{ participant.user_id }}-card">
+                        <div class="participant-handle uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left"
+                             id="participant-{{ participant.user_id }}"
+                             title="{{ participant.profile.timezone }} - {{ participant.user_id }}" draggable="true"
+                             data-user-id="{{ participant.user_id }}">
+                            <div class="uk-card uk-card-secondary uk-card-small"
+                                 id="participant-{{ participant.user_id }}-card">
                                 <div class="uk-card-body">
-                                    <img class="uk-icon-image uk-border-circle" draggable="false" src="{{ participant.avatar }}" />
+                                    <img class="uk-icon-image uk-border-circle" draggable="false"
+                                         src="{{ participant.avatar }}"/>
                                     {{ participant.username }}#{{ participant.discriminator }}
                                 </div>
                             </div>
@@ -99,28 +132,48 @@
 
                 <div class="uk-flex uk-flex-row uk-flex-stretch uk-flex-wrap uk-flex-center" id="team-targets">
                     {% for id, team in teams.items() %}
-                        <div class="team-handle uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left" id="team-{{ team.id }}" data-team-id="{{ team.id }}">
-                            <div class="uk-card uk-card-default uk-card-small">
+                        <div class="team-handle uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left"
+                             id="team-{{ team.id }}" data-team-id="{{ team.id }}">
+                            <div class="uk-card uk-card-default uk-card-small
+                                {% if jam.winning_team and jam.winning_team == team.id %}
+                                    team-card-winner
+                                {% endif %}
+                                ">
                                 <div class="uk-card-header">
-                                    <h3 class="uk-card-title">{{ team.name }}</h3>
+                                    <h3 class="uk-card-title">
+                                        {{ team.name }}
+                                    </h3>
                                 </div>
                                 <div class="uk-card-body team-target" data-team-id="{{ team.id }}">
                                     <p>Drop users here to assign them</p>
 
                                     {% for user_id in team.members %}
-                                        <div class="uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left" id="participant-line-{{ user_id }}" title="{{ participants[user_id].user_id }}">
-                                            <span class="participant-handle" draggable="true" data-user-id="{{ participants[user_id].user_id }}">
-                                                <img class="uk-icon-image uk-border-circle" draggable="false" src="{{ participants[user_id].avatar }}" />
+                                        <div class="uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left"
+                                             id="participant-line-{{ user_id }}"
+                                             title="{{ participants[user_id].user_id }}">
+                                            <span class="participant-handle" draggable="true"
+                                                  data-user-id="{{ participants[user_id].user_id }}">
+                                                <img class="uk-icon-image uk-border-circle" draggable="false"
+                                                     src="{{ participants[user_id].avatar }}"/>
                                                 {{ participants[user_id].username }}#{{ participants[user_id].discriminator }} ({{ participants[user_id].profile.timezone }})
                                             </span>
                                         </div>
                                     {% endfor %}
                                 </div>
                                 <div class="uk-card-footer uk-text-right">
-                                    <button class="team-reroll-button uk-button uk-button-primary uk-button-small" data-team-id="{{ team.id }}">
+                                    <button class="team-winner-button uk-button uk-button-small
+                                                {% if jam.winning_team %}
+                                                    uk-hidden
+                                                {% endif %}"
+                                            data-team-id="{{ team.id }}">
+                                        <i class="uk-icon fa-fw far fa-trophy"></i>
+                                    </button>
+                                    <button class="team-reroll-button uk-button uk-button-primary uk-button-small"
+                                            data-team-id="{{ team.id }}">
                                         <i class="uk-icon fa-fw far fa-dice"></i>
                                     </button>
-                                    <button class="team-delete-button uk-button uk-button-danger uk-button-small" data-team-id="{{ team.id }}">
+                                    <button class="team-delete-button uk-button uk-button-danger uk-button-small"
+                                            data-team-id="{{ team.id }}">
                                         <i class="uk-icon fa-fw far fa-trash"></i>
                                     </button>
                                 </div>
@@ -136,12 +189,23 @@
         "use strict";
         const jam = parseInt("{{ jam.number }}");
         const actions = new JamActions("{{ url_for("staff.jams.action") }}", "{{ csrf_token() }}");
+        let jam_winning_team = "{{ jam.winning_tam or "" }}";
+        const has_winner = function () {
+            return jam_winning_team !== "";
+        };
+        const set_winner_button = function (team) {
+            return `
+            <button class="team-winner-button uk-button uk-button-small ${has_winner() ? "uk-hidden" : ""}" data-team-id="${team.id}">
+                <i class="uk-icon fa-fw far fa-trophy"></i>
+            </button>
+            `
+        };
 
         $("#init-button").on(
             "click",
             () => actions.generate_teams(jam, (result, data) => {
                 if (result) {
-                    data.teams.forEach( (team) => {
+                    data.teams.forEach((team) => {
                         let elem = `
                             <div class="team-handle uk-margin-small-bottom uk-margin-small-right uk-margin-small-top uk-margin-small-left" id="team-${team.id}" data-team-id="${team.id}">
                                 <div class="uk-card uk-card-default uk-card-small">
@@ -152,6 +216,7 @@
                                         <p>Drop users here to assign them</p>
                                     </div>
                                     <div class="uk-card-footer uk-text-right">
+                                        ${set_winner_button(team)}
                                         <button class="team-reroll-button uk-button uk-button-primary uk-button-small" data-team-id="${team.id}">
                                             <i class="uk-icon fa-fw far fa-dice"></i>
                                         </button>
@@ -202,6 +267,7 @@
                                     <p>Drop users here to assign them</p>
                                 </div>
                                 <div class="uk-card-footer uk-text-right">
+                                    ${set_winner_button(team)}
                                     <button class="team-reroll-button uk-button uk-button-primary uk-button-small" data-team-id="${team.id}">
                                         <i class="uk-icon fa-fw far fa-dice"></i>
                                     </button>
@@ -234,6 +300,41 @@
             })
         );
 
+        function unset_winning_team(callback) {
+            actions.unset_winning_team(jam, (result, data) => {
+                if (result) {
+                    $("#winner-unset-button").addClass("uk-hidden");
+                    $(".team-winner-button").removeClass("uk-hidden");
+                    $(".team-card-winner").removeClass("team-card-winner");
+                    UIkit.notification({
+                        "message": "Winning team unset",
+                        "status": "success",
+                        "pos": "bottom-center",
+                        "timeout": 5000
+                    });
+                    jam_winning_team = "";
+                    if (callback) {
+                        callback(true);
+                    }
+                } else {
+                    console.error(data);
+                    UIkit.notification({
+                        "message": "Failed to unset winning team",
+                        "status": "danger",
+                        "pos": "bottom-center",
+                        "timeout": 5000
+                    });
+                    if (callback) {
+                        callback(false);
+                    }
+                }
+            });
+        }
+
+        $("#winner-unset-button").on(
+            "click", unset_winning_team
+        );
+
         $(".participant-handle").on(
             "dragstart",
             (e) => {
@@ -312,46 +413,52 @@
             });
         }
 
-        function reroll_team(e) {
+        function set_winning_team(e) {
             let team = this.getAttribute("data-team-id");
 
-            actions.reroll_team(team, (result, data) => {
+            actions.set_winning_team(team, (result, data) => {
                 if (result) {
-                    $(`#team-${team}`).find("h3").text(data.name);
-
+                    $(".team-winner-button").addClass("uk-hidden");
+                    $("#winner-unset-button").removeClass("uk-hidden");
+                    $(".team-card-winner").removeClass("team-card-winner");
+                    $(`#team-${team}`).find(".uk-card").addClass("team-card-winner");
                     UIkit.notification({
-                        "message": `Team rerolled: ${data.name}`,
+                        "message": "Winning team updated",
                         "status": "success",
                         "pos": "bottom-center",
                         "timeout": 5000
                     });
+                    jam_winning_team = team;
                 } else {
-                    console.log(data);
-
+                    console.error(data);
                     UIkit.notification({
-                        "message": "Failed to reroll team",
+                        "message": "Failed to set winning team",
                         "status": "danger",
                         "pos": "bottom-center",
                         "timeout": 5000
                     });
                 }
-            })
+            });
         }
 
-        function delete_team(e) {
+        function reroll_team(e) {
             let team = this.getAttribute("data-team-id");
 
-            actions.delete_team(team, (result, data) => {
+            actions.reroll_team(team, (result, data) => {
                 if (result) {
-                    let target = $(`#team-${team}`);
+                    $(`#team-${team}`).find("h3").text(data.name);
 
-                    target.find(".team-target").children("div").appendTo(".hidden-participants");
-                    target.remove();
+                    UIkit.notification({
+                        "message": `Team rerolled: ${data.name}`,
+                        "status": "success",
+                        "pos": "bottom-center",
+                        "timeout": 5000
+                    });
                 } else {
                     console.log(data);
 
                     UIkit.notification({
-                        "message": "Failed to delete team",
+                        "message": "Failed to reroll team",
                         "status": "danger",
                         "pos": "bottom-center",
                         "timeout": 5000
@@ -360,8 +467,43 @@
             })
         }
 
+        function delete_team(e) {
+            let team = this.getAttribute("data-team-id");
+            const perform = () => {
+                actions.delete_team(team, (result, data) => {
+                    if (result) {
+                        let target = $(`#team-${team}`);
+
+                        target.find(".team-target").children("div").appendTo(".hidden-participants");
+                        target.remove();
+                    } else {
+                        console.log(data);
+
+                        UIkit.notification({
+                            "message": "Failed to delete team",
+                            "status": "danger",
+                            "pos": "bottom-center",
+                            "timeout": 5000
+                        });
+                    }
+                })
+            };
+
+            if (jam_winning_team === team) {
+                // unset the winning team first
+                unset_winning_team(result => {
+                    if (result) {
+                        perform();
+                    }
+                });
+            } else {
+                perform();
+            }
+        }
+
         function assign_handlers() {
             $(".team-target").off("dragover").off("drop").on("dragover", drag_over).on("drop", drop);
+            $(".team-winner-button").off("click").on("click", set_winning_team);
             $(".team-reroll-button").off("click").on("click", reroll_team);
             $(".team-delete-button").off("click").on("click", delete_team);
         }
-- 
cgit v1.2.3