diff options
author | 2018-07-04 23:43:37 +0000 | |
---|---|---|
committer | 2018-07-04 23:43:37 +0000 | |
commit | 8519357d2613a870a56a4c1769b4da9069bb0db4 (patch) | |
tree | 3e34a5468aac7c588fefd51edb04a67e25794794 /templates | |
parent | Update channel listing (diff) |
Revamp jam index, add winner team staff backend and user frontend
Diffstat (limited to 'templates')
-rw-r--r-- | templates/main/jams/index.html | 40 | ||||
-rw-r--r-- | templates/main/jams/team_list.html | 17 | ||||
-rw-r--r-- | templates/staff/jams/teams/view.html | 222 |
3 files changed, 219 insertions, 60 deletions
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> 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> 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> Generate Teams</button> + <button class="uk-button uk-button-primary" id="init-button" disabled><i + class="uk-icon fa-fw far fa-play"></i> Generate Teams + </button> {% else %} - <button class="uk-button uk-button-primary" id="init-button"><i class="uk-icon fa-fw far fa-play"></i> Generate Teams</button> + <button class="uk-button uk-button-primary" id="init-button"><i class="uk-icon fa-fw far fa-play"></i> + Generate Teams + </button> {% endif %} - <button class="uk-button uk-button-secondary" id="add-button"><i class="uk-icon fa-fw far fa-plus"></i> 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> + 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> + 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> + 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); } |