develop templates for consolidated apps benchcoach

attempted to use as much generic view as possible. the previous views were generic anyway. also did some managing of inheritance (extends/includes)

benchcoach/templates/benchcoach/detail.html

@@ -0,0 +1,22 @@
+{% extends 'base.html' %}
+
+{% block navbar %}
+    {% with events_tab="active" %}
+        {{ block.super }}
+    {% endwith %}
+{% endblock %}
+
+{% block page_heading %}
+    Object
+{% endblock %}
+
+{% block content %}
+    <div class="card p-0">
+        <div class="card-body p-0">
+        <table class="table m-0">
+        {% block rows %}
+        {% endblock %}
+        </table>
+        </div>
+    </div>
+{% endblock %}

benchcoach/templates/benchcoach/event-detail.html

@@ -0,0 +1,19 @@
+{% extends 'benchcoach/detail.html' %}
+
+{% block navbar %}
+    {% with events_tab="active" %}
+        {{ block.super }}
+    {% endwith %}
+{% endblock %}
+
+{% block page_heading %}
+    Event
+{% endblock %}
+
+{% block rows %}
+    <tr><th>Date</th><td>{{ event.start.date|date }}</td></tr>
+    <tr><th>Time</th><td>{{ event.start.time|time }}</td></tr>
+    <tr><th>Away</th><td>{{ event.away_team.name }}</td></tr>
+    <tr><th>Home</th><td>{{ event.home_team.name }}</td></tr>
+    <tr><th>Venue</th><td>{{ event.venue }}</td></tr>
+{% endblock %}

benchcoach/templates/benchcoach/event-list.html

@@ -0,0 +1,23 @@
+{% extends 'base.html' %}
+
+{% block navbar %}
+    {% with events_tab="active" %}
+        {{ block.super }}
+    {% endwith %}
+{% endblock %}
+
+{% block page_heading %}
+Events
+{% endblock %}
+
+{% block content %}
+    <ul class="list-group">
+        {% for event in events %}
+            <li class="list-group-item">
+                {{ event.start.date }}<br>{{ event.start.time }}<br>
+            <a href="{% url 'edit lineup' event_id=event.id %}">Edit Lineup...</a>
+            </li>
+        {% endfor %}
+    </ul>
+{% endblock %}
+</html>

benchcoach/templates/benchcoach/info-table.html

@@ -0,0 +1,8 @@
+<table class="table">
+    {% for key, value in d.items %}
+        <tr>
+        <th>{{ key }}</th>
+        <td>{{ value }}</td>
+        </tr>
+    {% endfor %}
+</table>

benchcoach/templates/benchcoach/lineup.html

@@ -0,0 +1,207 @@
+{% extends 'base.html' %}{% block title %} {{ title }} {% endblock %}{% load static %}
+{% with events_active="active" %}
+    {% block header %}
+        <div class="d-flex justify-content-center justify-content-md-center border-bottom bg-white">
+            {% if previous_event %}
+                <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">
+                    <i class="bi bi-chevron-left"></i>{{ previous_event.start|date:"D" }}&nbsp;{{ previous_event.start|date:"n/j" }}
+                </a>
+            {% endif %}
+            <div>
+                <h5 class="text-center m-1 d-none d-md-block">{{ event.away_team.name }} vs. {{ event.home_team.name }}</h5>
+                <h5 class="text-center my-0 d-md-none">
+                    {% if event.home_team.name == "Hounds" %}
+                        v{{ event.away_team }}
+                    {% endif %}
+                    {% if event.away_team.name == "Hounds" %}
+                        @{{ event.home_team }}
+                    {% endif %}
+                </h5>
+                <p class="text-center text-muted m-1 d-none d-md-block">{{ event.start|date:"l, F j, Y g:i A" }}<br>{{ event.venue.name }}</p>
+                <p class="text-center text-muted my-0 d-md-none">{{ event.start|date:"D" }}&nbsp;{{ event.start|date:"n/j" }}, {{ event.start|date:"g:i" }}<br><span class="text-truncate">{{ event.venue.name }}</span></p>
+                <h6 class="text-muted m-1"></h6>
+            </div>
+            {% if next_event %}
+                <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" }}<i class="bi bi-chevron-right"></i>
+                </a>
+            {% endif %}
+        </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 %}
+    {% include 'messages.html' %}
+    <div id="pills-tabContent" class="container-fluid tab-content my-1" data-toggle="tab">
+        <div id="event-details" class="tab-pane show active" role="tabpanel" aria-labelledby="event-details-tab">
+            <form method="post" action="{% url "sync teamsnap db" %}">{% csrf_token %}
+                <input type="hidden" name="event_id" value={{ event.id }}>
+            <div>
+                <div class="card my-1">
+                    <div class="card-header d-inline-flex">
+                        <div class="d-inline-flex flex-grow-1"><h5>Event</h5></div>
+                        <div class="d-inline-flex">
+                                <button class="btn btn-sm btn-outline-secondary d-xl-flex align-items-xl-center mx-1" type="submit">
+                                    <i class="bi bi-arrow-clockwise"></i>TeamSnap
+                                </button>
+                                <button type="button" value="Submit" class="btn btn-sm btn-outline-primary d-xl-flex align-items-xl-center mx-1">
+                                    <i class="bi bi-pencil-square mx-1"></i>Edit
+                                </button>
+                        </div>
+                    </div>
+                    <div class="card-body p-0">
+                        {% include 'benchcoach/info-table.html' with d=details %}
+                    </div>
+                </div>
+            </div>
+            </form>
+        </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">
+                    <div class="col-md-6">
+                        <div class="card my-1">
+                            <div class="card-header d-inline-flex">
+                                <div class="d-inline-flex flex-grow-1"><h5>Lineup</h5></div>
+                                <div>
+                                    <input type="submit" value="Submit" class="btn btn-sm btn-success d-xl-flex align-items-xl-center">
+                                </div>
+                            </div>
+                            <div class="card-body p-0">
+                                {% include 'benchcoach/player-table.html' with table_id="dhd" formset=formset_dhd available_class="d-none" %}
+
+                                <hr class="m-0">
+                                {% include 'benchcoach/player-table.html' with table_id="lineup" formset=formset_lineup available_class="d-none"%}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="col-md-6">
+                        <div class="card my-1">
+                            <div class="card-header d-inline-flex">
+                                <div class="d-inline-flex flex-grow-1">
+                                    <h5>Bench</h5>
+                                </div>
+                                <div>
+                                    <button class="btn btn-sm btn-outline-secondary d-xl-flex align-items-xl-center" type="button">
+                                        <i class="bi bi-arrow-clockwise"></i>TeamSnap
+                                    </button>
+                                </div>
+                            </div>
+
+                            <div class="card-body p-0">
+                                {% include 'benchcoach/player-table.html' with table_id="bench" formset=formset_bench order_class="d-none" %}
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </form>
+        </div>
+    </div>
+    <script src="{% static 'js/Sortable.js' %}"></script>
+    <script id="sortable">
+        function refresh_lineup_order (){
+            var player_rows = document.getElementById('lineup').querySelectorAll('tr')
+            for (let i = 0; i < player_rows.length; i++) {
+                var player_order = player_rows[i].querySelector('[id^="player-order"]')
+                var form_element_order = player_rows[i].querySelector('[id$="order"]')
+                {#player_order.innerText = parseInt(player_rows[i].dataset.order)#}
+                player_rows[i].dataset.order = i+1
+                form_element_order.value = i+1
+                player_order.innerHTML = i+1
+            }
+            var player_rows = document.getElementById('bench').querySelectorAll('tr')
+            for (let i = 0; i < player_rows.length; i++) {
+                var player_order = player_rows[i].querySelector('[id^="player-order"]')
+                var form_element_order = player_rows[i].querySelector('[id$="order"]')
+                {#player_order.innerText = parseInt(player_rows[i].dataset.order)#}
+                player_rows[i].dataset.order = null
+                form_element_order.value = null
+                player_order.innerHTML = null
+            }
+            var player_rows = document.getElementById('dhd').querySelectorAll('tr')
+            for (let i = 0; i < player_rows.length; i++) {
+                var player_order = player_rows[i].querySelector('[id^="player-order"]')
+                var form_element_order = player_rows[i].querySelector('[id$="order"]')
+                {#player_order.innerText = parseInt(player_rows[i].dataset.order)#}
+                player_rows[i].dataset.order = 0
+                form_element_order.value = 0
+                player_order.innerHTML = null
+            }
+        }
+        var dhd = new Sortable.create(
+            document.getElementById('dhd'), {
+                animation: 150,
+                ghostClass: "ghost",
+                handle: ".drag-handle",
+                {#handle: ".bars-move",#}
+                group: {
+                    put: true,
+                    pull: true
+                },
+                onAdd: function (/**Event*/evt){
+                    // Add to DH'd
+                    var itemEl = evt.item;  // dragged HTMLElement
+                    var player_order = itemEl.querySelector('[id^="player-order"]')
+                    var player_available =itemEl.querySelector('[id^="player-availability"]')
+                    refresh_lineup_order()
+                    player_order.classList.remove('d-none')
+                    player_available.classList.add('d-none')
+                }
+            })
+        var lineup = new Sortable.create(
+            document.getElementById('lineup'), {
+                animation: 150,
+                handle: ".drag-handle",
+                ghostClass:"ghost",
+                {#handle: ".bars-move",#}
+                group:{
+                    put:true,
+                    pull:true
+                },
+                onAdd: function (/**Event*/evt) {
+                    // Add to Lineup
+                    var itemEl = evt.item;  // dragged HTMLElement
+                    var player_order = itemEl.querySelector('[id^="player-order"]')
+                    var player_available =itemEl.querySelector('[id^="player-availability"]')
+                    refresh_lineup_order()
+                    player_order.classList.remove('d-none')
+                    player_available.classList.add('d-none')
+                },
+                onUpdate: function (/**Event*/evt) {
+                    console.log('update to lineup')
+                    var itemEl = evt.item;  // dragged HTMLElement
+                    refresh_lineup_order()
+                },
+            });
+        var bench = new Sortable.create(
+            document.getElementById('bench'), {
+                animation: 150,
+                ghostClass:"ghost",
+                sort: false,
+                handle: ".drag-handle",
+                {#handle: ".bars-move",#}
+                group:{
+                    put:true,
+                    pull:true
+                },
+                onAdd: function (/**Event*/evt) {
+                    var itemEl = evt.item;  // dragged HTMLElement
+                    var player_order = itemEl.querySelector('[id^="player-order"]')
+                    var player_available =itemEl.querySelector('[id^="player-availability"]')
+                    refresh_lineup_order()
+                    player_order.classList.add('d-none')
+                    player_available.classList.remove('d-none')
+                }
+            });
+
+    </script>
+
+{% endblock %}

benchcoach/templates/benchcoach/list.html

@@ -0,0 +1,20 @@
+{% extends 'base.html' %}
+
+{% block navbar %}
+    {% with events_tab=events_tab_active members_tab=members_tab_active opponents_tab=opponents_tab_active venues_tab=venues_tab_active %}
+        {{ block.super }}
+    {% endwith %}
+{% endblock %}
+
+{% block page_heading %}
+{{ page_title }}
+{% endblock %}
+
+{% block content %}
+    <ul class="list-group">
+        {% for object in object_list %}
+            <li class="list-group-item">{{ object }}</li>
+        {% endfor %}
+    </ul>
+{% endblock %}
+</html>

benchcoach/templates/benchcoach/player-table.html

@@ -0,0 +1,49 @@
+<table class="table table-sm my-0">
+    <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 class="col-1">
+                <div class="mx-1">
+                    <span id="player-order-{{ form.instance.player.id }}">
+                {% if form.order.value > 0 %} {{ form.order.value }} {% endif %}
+                </span>
+
+                    <span id="player-availability-{{ form.instance.player.id }}" class="{{ available_class }}">
+                {% if form.instance.event_availability == 2 %}
+                    <i class="bi bi-circle-fill text-success"></i>
+                {% elif form.instance.event_availabilitye == 1 %}
+                    <i class="bi bi-circle-fill text-info"></i>
+                {% elif form.instance.event_availability == 0 %}
+                    <i class="bi bi-circle-fill text-danger"></i>
+                {% else %}
+                    <i class="bi bi-circle-fill text-secondary"></i>
+                {% endif %}
+                </span>
+                </div>
+            </td>
+
+            <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 class="col-2">
+                {{ form.position }}
+            </td>
+            <td class="col-1 drag-handle">
+                <i class="bi bi-grip-vertical text-secondary"></i>
+            </td>
+            {#                                    <td>{{ form.instance.position }}</td>#}
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>