Fixing team assignment and adding extra info to the team display (#266)

Author: stefdworschak

accounts/models.py

@@ -1,4 +1,6 @@
+from datetime import datetime
 from enum import Enum
+import pytz
 
 from django.db import models
 from django.contrib.auth.models import AbstractUser
@@ -116,12 +118,33 @@ def human_readable_current_lms_module(self):
         return self.current_lms_module.replace('_', ' ')
 
     def to_team_member(self):
+        teams = self.participated_hackteams.filter(
+            hackathon__status='finished')
         return {
             'userid': self.id,
             'name': self.slack_display_name or self.email,
-            'level': LMS_LEVELS.get(self.current_lms_module) or 1
+            'level': LMS_LEVELS.get(self.current_lms_module) or 1,
+            'timezone': self.timezone_to_offset(),
+            'num_hackathons': teams.count(),
+            'participant_label': self.participant_label(),
         }
 
+    def timezone_to_offset(self):
+        if not self.timezone:
+            return
+        offset = datetime.now(pytz.timezone(self.timezone)).strftime('%z')
+        return f'UTC{offset[:-2]}'
+
+    def participant_label(self):
+        teams = self.participated_hackteams.filter(
+            hackathon__status='finished')
+        if teams.count() == 0:
+            return 'Hackathon Newbie'
+        elif teams.count() < 2:
+            return 'Hackathon Enthusiast'
+        else:
+            return 'Hackathon Veteran'
+
     @property
     def user_type(self):
         """ Return the user's main designation.

hackathon/migrations/0046_auto_20220113_1350.py

@@ -0,0 +1,20 @@
+# Generated by Django 3.1.13 on 2022-01-13 13:50
+
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+        ('hackathon', '0045_hackprojectscorecategory_is_active'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='hackteam',
+            name='participants',
+            field=models.ManyToManyField(related_name='participated_hackteams', to=settings.AUTH_USER_MODEL),
+        ),
+    ]

hackathon/models.py

@@ -169,7 +169,7 @@ class HackTeam(models.Model):
     # Issue is that a user could join more than one team on the same Hackathon.
     # Could use a custom save method to prevent it.
     participants = models.ManyToManyField(User,
-                                          related_name="hackteam")
+                                          related_name="participated_hackteams")
     # A team has one mentor, a mentor has numerous teams: One to Many.
     mentor = models.ForeignKey(User,
                                null=True,

hackathon/views.py

@@ -197,7 +197,7 @@ def check_projects_scores(request, hackathon_id):
 
         hack_awards_formset = HackAwardFormSet(
             form_kwargs={'hackathon_id': hackathon_id},
-            queryset=HackAward.objects.filter(hackathon=hackathon))
+            queryset=hackathon.awards.all())
 
         return render(request, 'hackathon/final_score.html', {
             'hackathon': hackathon.display_name,
@@ -373,7 +373,6 @@ def view_hackathon_public(request, hackathon_id):
     """ A limited view of the hackathon page for the public """
     hackathon = get_object_or_404(Hackathon, pk=hackathon_id)
     redirect_url = (request.META.get('HTTP_REFERER') or reverse('home'))
-    print(f"REFERER: {request.META.get('HTTP_REFERER')}")
     if hackathon.status == 'deleted':
         messages.error(request, 'This hackathon does not exist.')
         return redirect(redirect_url)

home/templatetags/home_tags.py

@@ -11,5 +11,4 @@ def convert_rating(rating):
     half_star = '<i class="fas fa-star-half-alt"></i>'
 
     rating_split = [int(rating) for rating in str(rating).split('.')]
-    print(rating_split[0] * star)
     return rating_split[0] * star + int(bool(rating_split[1])) * half_star

showcase/templates/showcase.html showcase/templates/showcases.htmlshowcase/templates/showcase.html renamed to showcase/templates/showcases.html

@@ -0,0 +1,71 @@
+{% extends "base.html" %}
+{% load static %}
+{% load teams_tags %}
+{% load account_tags %}
+
+{% block extra_meta %}
+
+<meta property='og:title' content='{{showcase.hack_project.display_name}}'>
+    {% if showcase.get_image %}
+    <meta property='og:image' content='{{showcase.image_url}}'>
+    {% endif %}
+<meta property='og:description' content='{{showcase.hack_project.description}}'>
+<meta property='og:url' content='{{showcase.url}}'>
+<meta property='og:author' content='Team {{showcase.hack_project.hackteam.display_name}}'>
+
+{% endblock %}
+
+{% block css %}
+<link rel="stylesheet" href="{% static 'hackathon/css/hackathon.css' %}" />
+{% endblock %}
+
+{% block content %}
+<div class="row">
+    <div class="col teams-page">
+
+        <div class="container-fluid">
+            {% if team.header_image %}
+            <div class="row teams-header" 
+                style="background-image:url('{{ team.header_image }}')">
+            {% else %}
+            <div class="row teams-header" 
+                style="background-image:url({% static 'img/ci-hackathon--horizontal.png' %})">
+            {% endif %}
+                <div class="team-name">
+                    <h2>Team: <i>{{team}}</i></h2>
+                </div>
+            </div>
+
+            <div class="row mb-2 mt-5 ml-4"> 
+                <div class="col">
+
+                    <h3>About the team</h3>
+                    <div class="share-linkedin">
+                        <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
+                        <script type="IN/Share" data-url="{{showcase.url}}"></script>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row mt-3 team-members-display">              
+                <div class="col my-3 text-center">
+                    {% for member in showcase.showcase_participants.all %}
+                    {% include 'includes/showcase_member.html' %}
+                    {% endfor %}
+
+                    {% for anon in anon_members %}
+                    {% include 'includes/anon_member.html' %}
+                    {% endfor %}
+                </div>
+            </div>
+            
+            {% if team.project %}
+                {% include 'includes/project.html' %}
+            {% else %}
+                {% include 'includes/empty_project.html' %}
+            {% endif %}
+        </div>
+
+    </div>
+</div>
+{% endblock %}

showcase/templates/view_showcase.html

@@ -13,7 +13,7 @@ def view_showcases(request):
     """ Shows the project showcase page """
     showcase_settings = ShowcaseSiteSettings.objects.first()
     if not showcase_settings:
-        return render(request, 'showcase.html', {
+        return render(request, 'showcases.html', {
             'top_results': None,
             'all_showcases': None,
         })
@@ -40,7 +40,7 @@ def view_showcases(request):
     page = request.GET.get('page')
     paginated_showcases = paginator.get_page(page)
 
-    return render(request, 'showcase.html', {
+    return render(request, 'showcases.html', {
         'top_results': top_results,
         'all_showcases': paginated_showcases,
     })
@@ -58,7 +58,7 @@ def view_showcase(request, showcase_id):
     anon_members = range(len(team.participants.all())
                          - len(showcase.showcase_participants.all()))
 
-    return render(request, 'team.html', {
+    return render(request, 'view_showcase.html', {
         'team': team,
         'rename_team_form': None,
         'showcase': showcase,

showcase/views.py

@@ -17,6 +17,13 @@
     --img-highlighter: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
     --contact-bg: linear-gradient(48deg, rgb(229, 71, 37) 50%, rgb(255, 49, 134));
     --star-rating: #f2d230;
+    --s-teal-half-opacity: rgba(35, 187, 187, 0.5);
+    --bronze: #e99644;
+    --bronze-font: #5c3105;
+    --silver: #dddddd;
+    --silver-font: #535353;
+    --gold: #ffd700;
+    --gold-font: #635403;
 }
 
 html,
@@ -488,6 +495,43 @@ form.distribute-teams-form, form.clear-teams-form {
     background: var(--s-grey);
 }
 
+.team-drop-area li span {
+    color: var(--white);
+}
+
+.team-drop-area li span:not(.member-name), .team-member-label {
+    font-size: 0.9em;
+}
+
+.team-member-label {
+    display: block;
+    color: var(--white);
+}
+
+.team-drop-area li span.newbie,
+.team-member-label span.newbie {
+    color: var(--bronze-font);
+    background: var(--bronze);
+}
+
+.team-drop-area li span.enthusiast,
+.team-member-label span.enthusiast {
+    color: var(--silver-font);
+    background: var(--silver);
+}
+
+.team-drop-area li span.veteran,
+.team-member-label span.veteran {
+    color: var(--gold-font);
+    background: var(--gold);
+}
+
+.team-drop-area li span.member-name {
+    color: var(--p-grey);
+    min-width: 250px;
+    display: inline-block;
+}
+
 /* Profile image */
 .profile-image {
     border-radius: 50%;
@@ -548,7 +592,7 @@ form.distribute-teams-form, form.clear-teams-form {
 }
 
 .team-members-display div.col {
-    text-overflow: ellipsis;
+    text-overflow: scroll;
     white-space: nowrap;
     overflow-y: auto;
     margin: 0rem 2rem;
@@ -819,7 +863,10 @@ img.showcase-image-edit {
     #carousel-wrapper {
         margin-top: 30px;
     }
-
+    .team-drop-area li span.member-name {
+        display: inline;
+        min-width: none;
+    }
 }
 
 @media (max-width:993px) {
@@ -828,3 +875,16 @@ img.showcase-image-edit {
     font-size: 1.1rem;
     }
 }
+
+@media (max-width:650px){
+    .team-menu-dropdown-container {
+        position: relative;
+        right: 0;
+    }
+    .teams-dropdown {
+        transform: translate3d(0px, 38px, 0) !important;
+    }
+    .dropdown-menu.teams-dropdown {
+        width: 100%;
+    }
+}

static/css/style.css

@@ -3,7 +3,8 @@ let teams = JSON.parse(document.getElementById('_teams').textContent);
 let leftover_participants = JSON.parse(document.getElementById('_leftover_participants').textContent);
 
 addNewTeam();
-distributeTeams();
+confirmBeforeAction('.clear-teams-form', 'submit', 'Do you really want to clear all teams and re-distribute them?');
+confirmBeforeAction('.distribute-teams-form', 'submit', 'Some participants have not been assigned to a team. Do you still want to proceed?');
 
 function allowDrop(ev) {
     ev.preventDefault();
@@ -24,11 +25,20 @@ function drop(ev) {
     if(ev.target.nodeName == 'LI') {
         targetElement = ev.target.parentElement.id;
         ev.target.parentElement.appendChild(movingElement);
-    } else {
+    } else if(ev.target.nodeName == 'SPAN'){
+        targetElement = ev.target.parentElement.parentElement.id;
+        ev.target.parentElement.parentElement.appendChild(movingElement);
+    } else if(ev.target.nodeName == 'H5') {
+        targetElement = ev.target.nextElementSibling.id;
+        ev.target.nextElementSibling.appendChild(movingElement);
+    } else if(ev.target.nodeName == 'DIV') {
+        targetElement = ev.target.children[1].id;
+        ev.target.children[1].appendChild(movingElement);
+    }
+    else {
         targetElement = ev.target.id;
         ev.target.appendChild(movingElement);
     }
-
     changeTeamData(movingElement, movingElementParent.id, targetElement);
     changeTeamScores(movingElement, movingElementParent.id, targetElement);
 }
@@ -41,35 +51,34 @@ function changeTeamScores(movedElement, movedElementParentId, targetElementId){
     if (targetElementId != 'leftover_participants'){
         let teamScoreSpan = document.getElementById(targetElementId +'_score');
         teamScoreSpan.innerText = parseInt(teamScoreSpan.innerText) + movedLevel;
-    }
-
-    if(movedElementParentId.includes('team')) {
         let removeScoreSpan = document.getElementById(movedElementParentId +'_score');
-        removeScoreSpan.innerText = parseInt(removeScoreSpan.innerText) - movedLevel;
+        if(removeScoreSpan != null) {
+            removeScoreSpan.innerText = parseInt(removeScoreSpan.innerText) - movedLevel;
+        }
     }
 }
 
 function changeTeamData(movedElement, movedElementParentId, targetElementId){
     /* Removes the participant from the team the participant was previously 
     part of and adds it to the new team in the team data object which is used
     to create or edit the teams */
-    let team = movedElementParentId.includes('team')
-                ? teams[movedElementParentId]
-                : leftover_participants;
-    let targetTeam = targetElementId.includes('team')
-                    ? teams[targetElementId]
-                    : leftover_participants;
+    if (movedElementParentId == targetElementId) {
+        return;
+    }
+    let team = movedElementParentId.includes('leftover_participants')
+                ? leftover_participants
+                : teams[movedElementParentId];
+    let targetTeam = targetElementId.includes('leftover_participants')
+                    ? leftover_participants
+                    : teams[targetElementId];
     let userid = movedElement.dataset.userid;
     let user = team.filter(x => x.userid == userid)[0];
-    targetTeam.push(user)
-
-    if(movedElementParentId.includes('team')){
-        teams[movedElementParentId] = teams[movedElementParentId]
-                                        .filter(x => x.userid != userid);
+    if(movedElementParentId.includes('leftover_participants')){
+        leftover_participants = leftover_participants.filter(x => x.userid != userid);
     } else {
-        leftover_participants = leftover_participants
-                                    .filter(x => x.userid != userid);
+        teams[movedElementParentId] = teams[movedElementParentId].filter(x => x.userid != userid);
     }
+    targetTeam.push(user);
     $('input[name="teams"]').val(JSON.stringify(teams));
 }
 
@@ -92,11 +101,10 @@ function addNewTeam(){
     });
 }
 
-function distributeTeams(){
-    $('.distribute-teams-form').on('submit', function(event){
+function confirmBeforeAction(className, action, msg){
+    $(className).on(action, function(event){
         if(leftover_participants.length > 0) {
-            let confirm_msg = 'Some participants have not been assigned to a team. Do you still want to proceed?';
-            let confirmation = window.confirmconfirm_msg(confirm_msg);
+            let confirmation = window.confirm(msg);
             if(!confirmation){
                 event.preventDefault();
             }