Merge branch 'web_layout_improvements' into dev

# Conflicts:
#	benchcoach/static/css/base.css
#	lineups/templates/lineups/lineup.html
#	templates/base.html

benchcoach/static/css/base.css

@@ -1,7 +0,0 @@
-body {
-  padding-top: 5rem;
-}
-.starter-template {
-  padding: 3rem 1.5rem;
-  text-align: center;
-}

events/views.py

@@ -14,6 +14,7 @@ class EventsListView(BenchcoachListView):
     page_title = "Events"
     title_strf = '{item.away_team} vs. {item.home_team}'
     body_strf = "{item.start:%a, %b %-d, %-I:%M %p},\n{item.venue}"
+    active_tabs = ['events_tab']
 
     def get_context_data(self):
         context = super().get_context_data()

lib/views.py

@@ -21,6 +21,7 @@ class BenchcoachListView(TemplateView):
     title_strf = "{item}"
     subtitle_strf = ""
     body_strf = ""
+    active_tabs = []
 
     def get_context_data(self):
         items = self.Model.objects.all()
@@ -42,6 +43,8 @@ class BenchcoachListView(TemplateView):
                 for item in items
             ]
         }
+        for tab in self.active_tabs:
+            context[tab] = 'active'
         return context
 
 class BenchcoachEditView(TemplateView):

lineups/models.py

@@ -20,7 +20,7 @@ class Positioning(models.Model):
       ('DH','DH')
    ]
    position = models.CharField(choices=positions, default=None, max_length=2, null=True, blank=True)
-   order = models.PositiveSmallIntegerField(default=0, null=True)
+   order = models.PositiveSmallIntegerField(default=None, null=True)
 
    class Meta:
       unique_together = ('player', 'event',)

lineups/templates/lineups/lineup.html

@@ -1,47 +1,68 @@
 {% extends 'base.html' %}{% block title %} {{ title }} {% endblock %}{% load crispy_forms_tags %}{% load static %}
+{% with events_active="active" %}
+{% block precontent %}
+    <div class="d-flex justify-content-center justify-content-md-center border-bottom bg-white">
+        <a class="btn btn-outline-secondary btn-sm d-md-flex my-auto align-items-md-center my-3 mx-3" href="{% url 'edit lineup' event_id=previous_event.id %}" role="button">&lt; {{ previous_event.start|date:"D" }}&nbsp;{{ previous_event.start|date:"n/j" }}</a>
+        <div>
+            <h6 class="text-center m-1">{{ event.away_team.name }} vs. {{ event.home_team.name }}</h6>
+            <p class="text-center text-muted m-1">{{ event.start|date:"l, F j, Y g:i A" }}<br>{{ event.venue.name }}</p>
+            <h6 class="text-muted m-1"></h6>
+        </div>
+        <a class="btn btn-outline-secondary btn-sm align-items-center my-auto my-3 mx-3" href="{% url 'edit lineup' event_id=next_event.id %}" role="button">{{ next_event.start|date:"D" }}&nbsp;{{ next_event.start|date:"n/j" }} &gt;</a>
+    </div>
 
+    <ul class="nav nav-pills nav-fill bg-white" role="tablist">
+        <li class="nav-item m-1" role="presentation"><a id="event-details-tab" class="nav-link active px-2 py-0" data-bs-toggle="pill" data-bs-target="#event-details" role="tab" aria-controls="event-details" aria-selected="true">Details</a></li>
+        <li class="nav-item m-1" role="presentation"><a id="event-lineup-tab" class="nav-link px-2 py-0" data-bs-toggle="pill" data-bs-target="#event-lineup" role="tab" aria-controls="event-lineup" aria-selected="false">Lineup</a></li>
+    </ul>
+
+{% endblock %}{% endwith %}
 {% block content %}
-    <h1>{{ title }}</h1>
+    <div id="pills-tabContent" class="container-fluid tab-content bg-white my-1" data-toggle="tab">
-    {{ event.away_team.name }} vs. {{ event.home_team.name }} <br>
+    <div id="event-details" class="tab-pane show active" role="tabpanel" aria-labelledby="event-details-tab">
-    {{ event.start|date:"l, F j, Y g:i A" }} <br>
+        <div>
-    {{ event.venue.name }} <br>
+            <p class="m-1">Away Team: {{ event.away_team.name }}</p>
-    <div class="container">
+            <p class="m-1">Home Team: {{ event.home_team.name }}</p>
+            <p class="m-1">Day: {{ event.start|date:"l, F j Y" }}</p>
+            <p class="m-1">Time: {{ event.start|date:"g:i A" }}</p>
+            <p class="m-1">Venue: {{ event.venue.name }}</p>
+        </div>
+    </div>
+    <div id="event-lineup" class="tab-pane" role="tabpanel" aria-labelledby="event-lineup-tab">
         <form action="{%  url 'edit lineup' event_id=event.id%}" method="post">
             {% csrf_token %}
             {{ formset.management_form }}
             <div class="row">
+{#                    <input type="submit" value="Submit" class="btn btn-sm btn-success mx-3 my-0 my-0">#}
                 <div class="col-md-6">
-                    <h5>Lineup</h5>
+                    <div class="card my-1">
-                    <table class="table">
+                        <div class="card-header"><h5>DH'd</h5></div>
-                        {% include 'lineups/player-table-header.html' %}
+                        <div class="card-body p-0">
-                        <tbody  id="lineup">
+                            {% include 'lineups/player-table.html' with table_id="dhd" formset=formset_dhd available_class="d-none" order_class="d-none"%}
-                        {% for form in formset %}
+                        </div>
-                            {% if form.instance.order or form.instance.position == "P"  %}
+                    </div>
-                                {% include 'lineups/player-table-row.html' with form=form available_display="none" order_display="table-cell" %}
+                    <div class="card my-1">
-                            {% endif %}
+                        <div class="card-header"><h5>Lineup</h5></div>
-                        {% endfor %}
+                        <div class="card-body p-0">
-                        </tbody>
+                            {% include 'lineups/player-table.html' with table_id="lineup" formset=formset_lineup available_class="d-none"%}
-                    </table>
+                            <div class="justify-content-md-end d-md-flex m-2"><input type="submit" value="Submit" class="btn btn-primary"></div>
-                    <input type="submit" value="Submit">
+                        </div>
+                    </div>
                 </div>
 
                 <div class="col-md-6">
-                    <h5>Players</h5>
+                    <div class="card my-1">
-                    <table class="table">
+                        <div class="card-header"><h5>Bench</h5></div>
-                        {% include 'lineups/player-table-header.html' %}
+                        <div class="card-body p-0">
-                        <tbody id="bench">
+                            {% include 'lineups/player-table.html' with table_id="bench" formset=formset_bench order_class="d-none"%}
-                        {% for form in formset|dictsortreversed:"availability.available"%}
+                        </div>
-                            {% if not form.instance.order and not form.instance.position == "P"  %}
+                    </div>
-                                {% include 'lineups/player-table-row.html' with form=form available_display="table-cell" order_display="none" %}
-                            {% endif %}
-                        {% endfor %}
-                        </tbody>
-                    </table >
                 </div>
 
             </div>
         </form>
     </div>
+    </div>
     <script src="{% static 'js/Sortable.js' %}"></script>
     <script id="sortable">
         function refresh_lineup_order (){
@@ -65,6 +86,16 @@
                 form_element_order.value = parseInt(player_rows[i].dataset.order)
             }
         }
+        var lineup = new Sortable.create(
+            document.getElementById('dhd'), {
+                animation: 150,
+                ghostClass: "ghost",
+                {#handle: ".bars-move",#}
+                group: {
+                    put: true,
+                    pull: true
+                }
+            })
         var lineup = new Sortable.create(
             document.getElementById('lineup'), {
                 animation: 150,
@@ -75,6 +106,7 @@
                     pull:true
                 },
                 onAdd: function (/**Event*/evt) {
+                    // Add to Lineup
                     var itemEl = evt.item;  // dragged HTMLElement
                     var player_id = itemEl.dataset.playerId
                     console.log(itemEl)
@@ -86,16 +118,10 @@
                     toggle_in_lineup(player_order_button)
                     player_order.parentElement.dataset.order = evt.newIndex
                     refresh_lineup_order()
-                    player_available.parentElement.style.display="none"
+                    {#player_available.parentElement.style.display="none"#}
-                    player_order.style.display="table-cell"
+                    player_available.parentElement.classList.add('d-none')
-                    evt.to;    // target list
+                    {#player_order.style.display="table-cell"#}
-                    evt.from;  // previous list
+                    player_order.classList.remove('d-none')
-                    evt.oldIndex;  // element's old index within old parent
-                    evt.newIndex;  // element's new index within new parent
-                    evt.oldDraggableIndex; // element's old index within old parent, only counting draggable elements
-                    evt.newDraggableIndex; // element's new index within new parent, only counting draggable elements
-                    evt.clone // the clone element
-                    evt.pullMode;  // when item is in another sortable: `"clone"` if cloning, `true` if moving
                 },
                 onUpdate: function (/**Event*/evt) {
                     console.log('update to lineup')
@@ -120,10 +146,12 @@
                     var form_element_order =itemEl.querySelector('[id$="order"]')
                     var player_order = itemEl.querySelector('[id^="player-order"]')
                     var player_available =itemEl.querySelector('[id^="player-available"]')
-                    player_available.parentElement.style.display="table-cell"
+                    {#player_available.parentElement.style.display="table-cell"#}
+                    player_available.parentElement.classList.remove('d-none')
                     form_element_order.value = 0
                     player_order.innerHTML = 1
-                    player_order.style.display="none"
+                    {#player_order.style.display="none"#}
+                    player_order.classList.add('d-none')
                     var player_id = itemEl.dataset.playerId
                     refresh_lineup_order()
                 }

lineups/templates/lineups/player-table-header.html

@@ -1,8 +0,0 @@
-<thead>
-<tr>
-    <th scope="col" style="display: none"></th>
-    <th scope="col"></th>
-    <th scope="col">Name</th>
-    <th scope="col">Pos</th>
-</tr>
-</thead>

lineups/templates/lineups/player-table-row.html

@@ -1,70 +0,0 @@
-<tr data-player-id="{{ form.instance.player.id }}"
-    data-position="{{ form.instance.position }}"
-    data-order="{{ form.instance.order }}">
-    {{ form.id.as_hidden }}
-    {{ form.event.as_hidden }}
-    {{ form.order.as_hidden }}
-    {{ form.player.as_hidden }}
-    <td id="player-availability-{{ form.instance.player.id }}"
-        style="display:{{ available_display }};"
-    >
-        {% if form.availability.available == 2 %}
-            <img class="bg-success p-2 rounded-circle"
-                 width="5"
-                 height="5"
-                 id="player-available-{{ form.instance.player.id }}"
-            >
-            <span class="visually-hidden">Yes</span>
-        {% elif form.availability.available == 1%}
-            <img class="bg-info p-2 rounded-circle"
-                 width="5"
-                 height="5"
-                 id="player-available-{{ form.instance.player.id }}"
-            >
-            <span class="visually-hidden">Maybe</span>
-        {% elif form.availability.available == 0%}
-            <img class="bg-danger p-2 rounded-circle"
-                 width="5" height="5"
-                 id="player-available-{{ form.instance.player.id }}"
-            >
-            <span class="visually-hidden">No</span>
-        {% elif form.availability.available == -1%}
-            <img class="bg-secondary p-2 rounded-circle"
-                 width="5"
-                 height="5"
-                 id="player-available-{{ form.instance.player.id }}"
-            >
-            <span class="visually-hidden">Unknown</span>
-        {% endif %}
-    </td>
-    <th scope="row"
-        id="player-order-{{ form.instance.player.id }}"
-        style="display:{{ order_display }};">
-        {% if form.order.value %}
-            <button type="button"
-                    class="btn btn-light"
-                    id="player-order-button-{{ form.instance.player.id }}"
-                    onclick="toggle_in_lineup(this)"
-            >
-                {{ form.order.value }}
-            </button>
-        {% elif  form.order.value == 0 %}
-            <button type="button"
-                    class="btn btn-dark"
-                    id="player-order-button-{{ form.instance.player.id }}"
-                    onclick="toggle_in_lineup(this)"
-            >
-                D
-            </button>
-        {% endif %}
-    </th>
-    <th>
-        {{ form.instance.player.first_name }}&nbsp;{{ form.instance.player.last_name }}&nbsp;
-        <small class="text-muted fw-light">#{{ form.instance.player.jersey_number }}</small><br>
-        <code><small>{{ form.statline }}</small></code>
-    </th>
-    <td>
-        {{ form.position }}
-    </td>
-    {#                                    <td>{{ form.instance.position }}</td>#}
-</tr>

lineups/templates/lineups/player-table.html

@@ -0,0 +1,86 @@
+<table class="table table-sm">
+    <thead>
+    <tr class="border border-light">
+        {#    <th scope="col" style="display: none"></th>#}
+        {#    <th scope="col" class="border border-light"></th>#}
+        {#    <th scope="col">Name</th>#}
+        {#    <th scope="col">Pos</th>#}
+    </tr>
+    </thead>
+    <tbody id={{ table_id }}>
+    {% for form in formset %}
+        <tr data-player-id="{{ form.instance.player.id }}"
+            data-position="{{ form.instance.position }}"
+            data-order="{{ form.instance.order }}">
+            {{ form.id.as_hidden }}
+            {{ form.event.as_hidden }}
+            {{ form.order.as_hidden }}
+            {{ form.player.as_hidden }}
+            {{ form.teamsnap_id.as_hidden }}
+            <td id="player-availability-{{ form.instance.player.id }}"
+                class="{{ available_class }}"
+            >
+                {% if form.availability.available == 1 %}
+                    <button class="btn btn-light bg-info p-1"
+                            id="player-available-{{ form.instance.player.id }}"
+                    >
+                        <span style="visibility: hidden">2</span>
+                        <span class="visually-hidden">Maybe</span>
+                    </button>
+                {% elif form.availability.available == 2%}
+                    <button class="btn btn-light bg-success p-1"
+                            id="player-available-{{ form.instance.player.id }}"
+                    >
+                        <span style="visibility: hidden">1</span>
+                    </button>
+                    <span class="visually-hidden">Yes</span>
+                {% elif form.availability.available == 0%}
+                    <button class="btn btn-light bg-danger p-1"
+                            id="player-available-{{ form.instance.player.id }}"
+                    >
+                        <span style="visibility: hidden">0</span>
+                    </button>
+                    <span class="visually-hidden">No</span>
+                {% else %}
+                    <button class="btn btn-light bg-secondary p-1"
+                            id="player-available-{{ form.instance.player.id }}"
+                    >
+                        <span style="visibility: hidden">X</span>
+                    </button>
+                    <span class="visually-hidden">Unknown</span>
+                {% endif %}
+            </td>
+            <th scope="row"
+                id="player-order-{{ form.instance.player.id }}"
+                class="{{ order_class }}">
+                {% if form.order.value %}
+                    <button type="button"
+                            class="btn btn-light p-1"
+                            id="player-order-button-{{ form.instance.player.id }}"
+                            onclick="toggle_in_lineup(this)"
+                    >
+                        {{ form.order.value }}
+                    </button>
+                {% elif  form.order.value == 0 %}
+                    <button type="button"
+                            class="btn btn-dark p-1"s
+                            id="player-order-button-{{ form.instance.player.id }}"
+                            onclick="toggle_in_lineup(this)"
+                    >
+                        D
+                    </button>
+                {% endif %}
+            </th>
+            <th>
+                {{ form.instance.player.first_name }}&nbsp;{{ form.instance.player.last_name }}&nbsp;
+                <small class="text-muted fw-light">#{{ form.instance.player.jersey_number }}</small>
+                {#        <br><code><small>{{ form.statline }}</small></code>#}
+            </th>
+            <td>
+                {{ form.position }}
+            </td>
+            {#                                    <td>{{ form.instance.position }}</td>#}
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>

lineups/views.py

@@ -5,6 +5,13 @@ from events.models import Event
 from players.models import Player
 from django.forms.models import model_to_dict
 from django.db.models import Q
+from django.db.models import Case, When
+
+def queryset_from_ids(Model, id_list):
+    #https://stackoverflow.com/questions/4916851/django-get-a-queryset-from-array-of-ids-in-specific-order
+    preserved = Case(*[When(pk=pk, then=pos) for pos, pk in enumerate(id_list)])
+    queryset = Model.objects.filter(pk__in=id_list).order_by(preserved)
+    return queryset
 
 # Create your views here.
 def edit(request, event_id):
@@ -30,7 +37,10 @@ def edit(request, event_id):
                 pass
         return render(request, 'success.html', {'call_back':'edit lineup','id':event_id, 'errors':[error for error in formset.errors if error]}, status=200)
             # return render(request, 'success.html', {'call_back':'schedule'})
+    previous_event = Event.objects.get(id=event_id-1)
+
     event = Event.objects.get(id=event_id)
+    next_event = Event.objects.get(id=event_id+1)
     players = Player.objects.all().prefetch_related('availability_set', 'statline_set', 'positioning_set')
     players_info = { player.id:{
         'availability': player.availability_set.get(event_id=event_id),
@@ -39,33 +49,47 @@ def edit(request, event_id):
     }
         for player in players
     }
+    players = Player.objects.prefetch_related('availability_set', 'positioning_set')
     # players_d.sort(key=lambda d: (-d['availability'].available, d['last_name']))
 
-    players_with_positioning = [i.player for i in Positioning.objects.filter(event_id=event_id)]
+    for player in players:
-    players_without_positioning = [i for i in players if i not in players_with_positioning]
+        Positioning.objects.get_or_create(player_id=player.id, event_id=event_id)
-    Positioning.objects.bulk_create([Positioning(event_id=event_id, player=player) for player in players_without_positioning])
-    qset = Positioning.objects.filter(event_id=event_id)
 
-    formset = PositioningFormSet(queryset=qset.order_by('order'))
+    qs_starting_lineup = Positioning.objects.filter(event_id=event_id, order__isnull=False).order_by(
-    pass
+        'order')
-    formset_starting = PositioningFormSet(
+    qs_bench = Positioning.objects.filter(event_id=event_id, order__isnull=True).prefetch_related(
-        queryset=Positioning.objects.exclude(order__isnull=True).filter(event_id=event_id))
+        'player__availability_set').order_by('player__last_name')
-    formset_bench = PositioningFormSet(
+
-        queryset=Positioning.objects.exclude(order__isnull=False).filter(event_id=event_id))
+    # This is all a compromise to get the sorting just the way I wanted. THERE'S GOT TO BE A BETTER WAY
+    ids_starting_lineup = [item.id for item in qs_starting_lineup]
+    ids_bench_available = [item.id for item in qs_bench
+                           if item.player.availability_set.get(event_id=event_id).available == 2]
+    ids_bench_maybe = [item.id for item in qs_bench
+                       if item.player.availability_set.get(event_id=event_id).available == 1]
+    ids_bench_no = [item.id for item in qs_bench
+                    if item.player.availability_set.get(event_id=event_id).available == 0]
+    ids_bench_unknown = [item.id for item in qs_bench
+                         if item.player.availability_set.get(event_id=event_id).available == -1]
+    qset = queryset_from_ids(Positioning,
+                             ids_starting_lineup + ids_bench_available + ids_bench_maybe + ids_bench_no + ids_bench_unknown)
+
+    formset = PositioningFormSet(queryset=qset)
 
     for f in formset:
         if f.instance.player_id:
             f.availability = f.instance.player.availability_set.get(event_id=event_id)
-            f.statline = f.instance.player.statline_set.get()
+            # f.statline = f.instance.player.statline_set.get()
-
 
+    formset_lineup = [f for f in formset if f.instance.order]
+    formset_dhd = [f for f in formset if not f.instance.order and f.instance.position]
+    formset_bench = [f for f in formset if f not in formset_lineup and f not in formset_dhd]
 
     return render(request, 'lineups/lineup.html', {'title': 'Lineup',
                                                    'event': event,
-                                                   'players_info': players_info,
+                                                   'previous_event': previous_event,
+                                                   'next_event': next_event,
                                                    'formset': formset,
-                                                   # 'players': players_d,
+                                                   'formset_lineup':formset_lineup,
-                                                   # 'positionings_players_initial':[player for player in players if player['positioning']],
+                                                   'formset_bench':formset_bench,
-                                                   'formset_starting':formset_starting,
+                                                       'formset_dhd': formset_dhd
-                                                   'formset_bench':formset_bench
                                                    })

players/views.py

@@ -15,6 +15,7 @@ class PlayerListView(BenchcoachListView):
     page_title = "Players"
     title_strf = "{first_name} {last_name}"
     subtitle_strf = "#{jersey_number}"
+    active_tabs = ['members_tab']
 
 def root(request):
     return redirect('/players/list')

teams/views.py

@@ -13,6 +13,7 @@ class TeamsListView(BenchcoachListView):
     edit_url = 'edit team'
     list_url = 'teams list'
     page_title = "Teams"
+    active_tabs = ['opponents_tab']
 
 class TeamEditView(BenchcoachEditView):
     Model = Team

templates/base.html

@@ -13,33 +13,40 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="default">
     <meta name="apple-mobile-web-app-title" content="BenchCoach">
     <meta name='viewport' content='viewport-fit=cover, width=device-width, initial-scale=1.0'>
-<link rel="apple-touch-icon" href="{% static 'favicon.ico' %}">
+    <link rel="apple-touch-icon" href="{% static 'favicon.ico' %}">
 </head>
 
 <body class="bg-light">
-<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" style="padding-top: env(safe-area-inset-top);">
+<nav class="navbar navbar-dark navbar-expand-md bg-dark py-0">
-    <div class="container-fluid">
+    <a class="navbar-brand d-flex text-uppercase fw-bold me-auto text-dark" href="{% url 'home' %}">
-    <a class="navbar-brand fw-bolder text-uppercase" href="{% url 'home' %}">⚾️ Bench Coach</a>
+        <img class="d-inline-block" width="32" height="32" src="{% static 'benchcoach.svg' %}" />
-
+        <span class="d-none d-print-inline-block d-sm-inline-block d-md-inline-block d-lg-inline-block d-xl-inline-block d-xxl-inline-block mx-1 my-auto text-white">bench coach</span>
-    <div class="collapse navbar-collapse">
+    </a>
-        <ul class="navbar-nav mr-auto">
+    <button class="navbar-toggler m-1 p-0" data-bs-toggle="collapse" data-bs-target="#navcol-2">
-            <li>
+        <span class="visually-hidden">Toggle navigation</span>
-                <a class="nav-link" href="{% url 'events list' %}">Events</a>
+        <span class="navbar-toggler-icon m-1"></span></button>
-            </li>
+    <div id="navcol-2" class="collapse navbar-collapse">
-            <li class="nav-item">
+        <ul class="navbar-nav">
-                <a class="nav-link" href="{% url 'players list' %}">Players</a>
+            <li class="nav-item"><a class="nav-link {{ events_tab }}" href="{% url 'events list' %}">Events</a></li>
-            </li>
+            <li class="nav-item"><a class="nav-link {{ members_tab }}" href="{% url 'players list' %}">Members</a></li>
-            <li class="nav-item">
+            <li class="nav-item"><a class="nav-link {{ opponents_tab }}" href="{% url 'teams list' %}">Opponents</a></li>
-                <a class="nav-link" href="{% url 'teams list' %}">Teams</a>
+            <li class="nav-item"><a class="nav-link {{ venues_tab }}" href="{% url 'venues list' %}">Venues</a></li>
-            </li>
+        </ul>
-            <li class="nav-item">
+        <span class="navbar-text mx-auto"></span>
-                <a class="nav-link" href="{% url 'venues list' %}">Venues</a>
+        <ul class="navbar-nav me-auto">
+            <li class="nav-item dropdown">
+                <a class="dropdown-toggle nav-link" aria-expanded="false" data-bs-toggle="dropdown" href="#">User <img class="rounded-circle" height="24" src="{% static 'tommy-lasorda.jpg' %}" width="24" /></a>
+                <div class="dropdown-menu">
+                    <a class="dropdown-item" href="#">Menu Item</a>
+                </div>
             </li>
+            <li class="nav-item"></li>
         </ul>
     </div>
-    </div>
 </nav>
 
+{% block precontent %}{% endblock %}
+
 <main role="main" class="container">
     {% block content %}{% endblock %}
 </main>

venues/views.py

@@ -13,6 +13,7 @@ class VenueListView(BenchcoachListView):
     edit_url = 'edit venue'
     list_url = 'venues list'
     page_title = "Venues"
+    active_tabs = ['venues_tab']
 
 class VenueEditView(BenchcoachEditView):
     Model = Venue