From 8bb4c31c09e07fd85a1c6724c862ef39ea753d39 Mon Sep 17 00:00:00 2001
From: Tony <anthony@correa.co>
Date: Fri, 20 May 2022 16:38:45 -0500
Subject: [PATCH] rename to dashboard, design improvements for dashboard and
 events

---
 teamsnap/templates/teamsnap/dashboard.html    | 150 ++++++++++++++++++
 .../templates/teamsnap/event/view_event.html  | 115 ++++++--------
 teamsnap/templates/teamsnap/teamsnap.html     | 101 ------------
 teamsnap/views.py                             |   3 +-
 4 files changed, 202 insertions(+), 167 deletions(-)
 create mode 100644 teamsnap/templates/teamsnap/dashboard.html
 delete mode 100644 teamsnap/templates/teamsnap/teamsnap.html

diff --git a/teamsnap/templates/teamsnap/dashboard.html b/teamsnap/templates/teamsnap/dashboard.html
new file mode 100644
index 0000000..4f4786c
--- /dev/null
+++ b/teamsnap/templates/teamsnap/dashboard.html
@@ -0,0 +1,150 @@
+{% extends "base.html" %}{% load static %}
+{% block title %} {{ title }}{% endblock %}
+{% block page_heading %}{% endblock %}
+{% block content %}
+    <h3>Dashboard</h3>
+
+    <div class="row">
+        <div class="col-md pb-2">
+            <div class="card">
+                <div class="card-header">
+                    <h4>Upcoming Games</h4>
+                </div>
+                <div class="card-body p-0 m-0">
+
+                    {% for event, availability_summary in events_availabilities|slice:":4" %}
+                        <div class="row m-0 p-2 border-bottom">
+                            <div class="col p-0 m-auto" style="flex: 0 0 100px;">
+                                <div class="d-inline-flex m-0 p-0">
+                                    <div class="chart-container" style="height: 100px;width: 100px;">
+                                        <canvas id="availability-donut-{{ event.data.id }}" class="availability-donut"
+                                                data-event-id="{{ event.data.id }}"
+                                                data-available-yes="{{ availability_summary.data.player_going_count }}"
+                                                data-available-no="{{ availability_summary.data.player_not_going_count }}"
+                                                data-available-maybe="{{ availability_summary.data.player_maybe_count }}"
+                                                data-available-unknown="{{ availability_summary.data.player_unknown_count }}"
+                                        >
+                                        </canvas></div>
+                                </div>
+                            </div>
+                            <div class="col">
+                                <div>
+                                    <h4><strong><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></strong></h4>
+                                    <h6 class="text-muted mb-2">{{ event.data.start_date|date:"D, F j, g:i A" }}</h6>
+                                    <h6 class="text-muted mb-2">{{ event.data.location_name }}</h6>
+                                </div>
+                                <div class="d-flex">
+                                    <a class="btn btn-primary btn-sm mx-1" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=request.user.profile.teamsnapsettings.managed_team.id %}">Go to Lineup</a>
+                                    <form method="get"
+                                          action="{% url "teamsnap_image_generator_generate" team_id=request.user.profile.teamsnapsettings.managed_team.id event_id=event.data.id %}">
+                                        <select hidden class="form-select" name="game_id" id="game_id">
+                                            <optgroup label="Events">
+                                                <option value="" disabled="disabled">Select an event...</option>
+                                                <option selected
+                                                        value="{{ event.data.id }}">{{ event.data.formatted_title }}</option>
+                                            </optgroup>
+                                        </select>
+                                        <input hidden class="form-check-input" type="radio" name="background"
+                                               id="backgroundLocation" checked value="location">
+                                        <input hidden class="form-check-input" type="radio" name="dimensions" id="square" checked
+                                               value="1080x1080">
+                                        <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-instagram"></i>
+                                        </button>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+
+                </div>
+            </div>
+        </div>
+        <div class="col-md pb-2">
+            <div class="card">
+                <div class="card-header">
+                    <h4>Past Games</h4>
+                </div>
+                <div class="card-body p-0 m-0">
+
+                    {% for event in ts_events_past|slice:":4" %}
+                        <div class="row m-0 p-2 border-bottom">
+                            <div class="col p-0 m-auto rounded-circle bg-light" style="flex: 0 0 100px;">
+                                <div class="d-inline-flex m-0 p-0">
+                                    <div class="d-flex align-items-center justify-content-center" style="height: 100px;width: 100px;">
+                                        <h4 class="text-center"><strong>{{ event.data.formatted_results }}</strong></h4>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col">
+                                <h4 class=""><strong><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></strong></h4>
+                                <h6 class="text-muted mb-2">{{ event.data.start_date|date:"D, F j" }}</h6>
+                                {#                                <h6 class="text-muted mb-2">{{ event.data.location_name }}</h6><a class="btn btn-primary btn-sm" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=request.user.profile.teamsnapsettings.managed_team.id %}">Go to Lineup</a>#}
+
+                                <div class="d-flex">
+                                    <form method="get"
+                                          action="{% url "teamsnap_image_generator_generate" team_id=request.user.profile.teamsnapsettings.managed_team.id event_id=event.data.id %}">
+                                        <select hidden class="form-select" name="game_id" id="game_id">
+                                            <optgroup label="Events">
+                                                <option value="" disabled="disabled">Select an event...</option>
+                                                <option selected
+                                                        value="{{ event.data.id }}">{{ event.data.formatted_title }}</option>
+                                            </optgroup>
+                                        </select>
+                                        <input hidden class="form-check-input" type="radio" name="background"
+                                               id="backgroundLocation" checked value="location">
+                                        <input hidden class="form-check-input" type="radio" name="dimensions" id="square" checked
+                                               value="1080x1080">
+                                        <button type="submit" class="btn btn-primary btn-sm"><i class="bi bi-instagram"></i>
+                                        </button>
+                                    </form>
+                                </div>
+                            </div>
+                        </div>
+                    {% endfor %}
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        function donut(ctx, yes_count, maybe_count, no_count, unknown_count) {
+            var style = getComputedStyle(document.body);
+            const myChart = new Chart(ctx, {
+                type: 'doughnut',
+                responsive: 'true',
+                data: {
+                    datasets: [{
+                        label: 'Availability',
+                        labels: [
+                            'Yes',
+                            'Maybe',
+                            'No',
+                            'Unknown'
+                        ],
+                        data: [yes_count, maybe_count, no_count, unknown_count],
+                        backgroundColor: [
+                            style.getPropertyValue('--bs-success'),
+                            style.getPropertyValue('--bs-info'),
+                            style.getPropertyValue('--bs-danger'),
+                            style.getPropertyValue('--bs-secondary')
+                        ],
+                        hoverOffset: 4
+                    }]
+                },
+            });
+
+        }
+        for (ctx of document.querySelectorAll('.availability-donut')){
+            donut(ctx,
+                ctx.dataset.availableYes,
+                ctx.dataset.availableMaybe,
+                ctx.dataset.availableNo,
+                ctx.dataset.availableUnknown,
+            )
+        }
+    </script>
+
+
+
+{% endblock %}
\ No newline at end of file
diff --git a/teamsnap/templates/teamsnap/event/view_event.html b/teamsnap/templates/teamsnap/event/view_event.html
index 443b3ea..aab9b4b 100644
--- a/teamsnap/templates/teamsnap/event/view_event.html
+++ b/teamsnap/templates/teamsnap/event/view_event.html
@@ -2,13 +2,46 @@
 {% block title %} {{ event.data.formatted_title }}{% endblock %}
 
 {% block content %}
-    <div class="card mx-auto">
+    <div class="card mx-auto" style="max-width: 455px">
         <div class="border-bottom p-2">
             <h4 class="card-title text-nowrap">{{ event.data.formatted_title }}</h4>
             <h6 class="text-muted card-subtitle text-nowrap">{{ event.data.start_date|date:"D, F j, Y g:i A" }}</h6>
+
+            <div class="row">
+                <div class="col text-end">
+                    <form method="get"
+                          action="{% url "teamsnap_image_generator_generate" team_id=request.user.profile.teamsnapsettings.managed_team.id event_id=event.data.id %}">
+                        <select hidden class="form-select" name="game_id" id="game_id">
+                            <optgroup label="Events">
+                                <option value="" disabled="disabled">Select an event...</option>
+                                <option selected
+                                        value="{{ event.data.id }}">{{ event.data.formatted_title }}</option>
+                            </optgroup>
+                        </select>
+                        <input hidden class="form-check-input" type="radio" name="background"
+                               id="backgroundLocation" checked value="location">
+                        <input hidden class="form-check-input" type="radio" name="dimensions" id="square" checked
+                               value="1080x1080">
+                        <button type="submit" class="btn btn-primary btn-sm py-0 m-1"><i class="bi bi-instagram"></i>
+                        </button>
+                    </form>
+                    <a class="btn btn-primary btn-sm py-0 m-1"
+                       href="{% url "teamsnap_image_generator" team_id=request.user.profile.teamsnapsettings.managed_team.id event_id=event.data.id %}"
+                       role="button">
+                        <div class="d-inline-block"><i class="bi bi-instagram"></i> <i class="bi bi-three-dots"></i>
+                        </div>
+                    </a>
+                </div>
+            </div>
         </div>
+
         <div class="card-body p-0 m-0">
             <div>
+                <div class="row m-0">
+                    <div class="col border-bottom bg-light">
+                        <span class="text-uppercase fw-bold small"></span>
+                    </div>
+                </div>
                 <div class="row m-0">
                     <div class="table-responsive p-0">
                         <table class="table table-sm">
@@ -43,20 +76,18 @@
                         </table>
                     </div>
                 </div>
+            </div>
+
+            <div>
                 <div class="row m-0">
-                    <div class="col border-bottom">
-                        <i class="bi bi-clipboard-check me-1"></i><span class="text-uppercase fw-bold small">Availabilities</span>
+                    <div class="col border-bottom border-top bg-light">
+                        <span class="text-uppercase fw-bold small">Availabilities</span>
                     </div>
                 </div>
+                <div class="row m-0">
                     <div class="table-responsive p-0">
                         <table class="table table-sm">
-                            {#            <thead>#}
-                            {#            <th scope="row">#}
-                            {#                <td>Status</td>#}
-                            {#            <td>Last</td>#}
-                            {#            <td>First</td>#}
-                            {#            </th>#}
-                            {#            </thead>#}
+
                             <tbody>
                             <tr>
                                 <th scope="col" class="col-1">
@@ -92,65 +123,19 @@
                         </table>
                     </div>
                 </div>
-                <div class="row m-0">
-                    <div class="col border-bottom mb-1">
-                        <i class="bi bi-clipboard me-1"></i><span class="text-uppercase fw-bold small">Lineup</span>
-                    </div>
-                    <div class="flexrow">
-                    <a class="btn btn-primary btn-sm"
-                       href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=request.user.profile.teamsnapsettings.managed_team.id %}"
-                       role="button">Edit</a>
-                    </div>
-                    <div class="table-responsive p-0">
-                        <table class="table table-striped table-sm">
-                            {#            <thead>#}
-                            {#            <th scope="row">#}
-                            {#                <td>Status</td>#}
-                            {#            <td>Last</td>#}
-                            {#            <td>First</td>#}
-                            {#            </th>#}
-                            {#            </thead>#}
-                            <tbody>
-                            {% for lineup_entry in lineup_entries %}
-                                <tr>
+            </div>
 
-                                </tr>
-                            {% endfor %}
-                            </tbody>
-                        </table>
+            <div>
+                <div class="row m-0">
+                    <div class="col border-bottom border-top bg-light">
+                        <span class="text-uppercase fw-bold small">Lineup</span>
                     </div>
                 </div>
                 <div class="row m-0">
-                    <div class="col border-bottom mb-1">
-                        <i class="bi bi-share"></i><span class="text-uppercase fw-bold small"> Functions</span>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <form method="get"
-                                  action="{% url "teamsnap_image_generator_generate" team_id=request.user.profile.teamsnapsettings.managed_team.id event_id=event.data.id %}">
-                                <select hidden class="form-select" name="game_id" id="game_id">
-                                    <optgroup label="Events">
-                                        <option value="" disabled="disabled">Select an event...</option>
-                                        <option selected
-                                                value="{{ event.data.id }}">{{ event.data.formatted_title }}</option>
-                                    </optgroup>
-                                </select>
-                                <input hidden class="form-check-input" type="radio" name="background"
-                                       id="backgroundLocation" checked value="location">
-                                <input hidden class="form-check-input" type="radio" name="dimensions" id="square" checked
-                                       value="1080x1080">
-                                <button type="submit" class="btn btn-primary btn-block"><i class="bi bi-instagram"></i>
-                                </button>
-                            </form>
-                        </div>
-                        <div class="col">
-                            <a class="btn btn-primary"
-                               href="{% url "teamsnap_image_generator" team_id=request.user.profile.teamsnapsettings.managed_team.id event_id=event.data.id %}"
-                               role="button">
-                                <div class="d-inline-block"><i class="bi bi-instagram"></i> <i class="bi bi-three-dots"></i>
-                                </div>
-                            </a>
-                        </div>
+                    <div class="flex-column m-2">
+                        <a class="btn btn-primary btn-sm"
+                           href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=request.user.profile.teamsnapsettings.managed_team.id %}"
+                           role="button">Edit</a>
                     </div>
                 </div>
             </div>
diff --git a/teamsnap/templates/teamsnap/teamsnap.html b/teamsnap/templates/teamsnap/teamsnap.html
deleted file mode 100644
index ba2028e..0000000
--- a/teamsnap/templates/teamsnap/teamsnap.html
+++ /dev/null
@@ -1,101 +0,0 @@
-{% extends "base.html" %}{% load static %}
-{% block title %} {{ title }}{% endblock %}
-{% block page_heading %}{% endblock %}
-{% block content %}
-    <h3>Dashboard</h3>
-
-    <div class="row">
-        <div class="col">
-            <div class="card">
-                <div class="card-header">
-                    <h4>Upcoming Games</h4>
-                </div>
-                <div class="card-body p-1">
-                    <div class="row m-0">
-                        {% for event, availability_summary in events_availabilities|slice:":4" %}
-                            <div class="col">
-                                <div class="d-inline-flex my-1 p-2 rounded-3 border">
-                                    <div class="chart-container" style="position: relative;height: 100px;width: 100px;">
-                                        <canvas id="availability-donut-{{ event.data.id }}" class="availability-donut"
-                                                data-event-id="{{ event.data.id }}"
-                                                data-available-yes="{{ availability_summary.data.player_going_count }}"
-                                                data-available-no="{{ availability_summary.data.player_not_going_count }}"
-                                                data-available-maybe="{{ availability_summary.data.player_maybe_count }}"
-                                                data-available-unknown="{{ availability_summary.data.player_unknown_count }}"
-                                        >
-
-                                        </canvas></div>
-                                    <div>
-                                        <h4><strong>{{ event.data.formatted_title }}</strong></h4>
-                                        <h6 class="text-muted mb-2">{{ event.data.start_date|date:"D, F j, Y g:i A" }}</h6>
-                                        <h6 class="text-muted mb-2">{{ event.data.location_name }}</h6><a class="btn btn-primary btn-sm" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=request.user.profile.teamsnapsettings.managed_team.id %}">Go to Lineup</a>
-                                    </div>
-                                </div>
-                            </div>
-                        {% endfor %}
-                    </div>
-                </div>
-            </div>
-        </div>
-    <div class="col">
-            <div class="card">
-                <div class="card-header">
-                    <h4>Past Games</h4>
-                </div>
-                <div class="card-body p-1">
-                        {% for event in ts_events_past|slice:":4" %}
-                            <div class="row m-1">
-                                <div class="p-2 rounded-3 border">
-                                        <h4 class="text-muted">{{ event.data.formatted_title }}</h4>
-                                        <h6 class="text-muted mb-2">{{ event.data.start_date|date:"D, F j" }}</h6>
-                                        <h4><strong>{{ event.data.formatted_results }}</strong></h4>
-                                </div>
-                            </div>
-                        {% endfor %}
-                </div>
-            </div>
-        </div>
-
-    </div>
-
-    <script>
-        function donut(ctx, yes_count, maybe_count, no_count, unknown_count) {
-            var style = getComputedStyle(document.body);
-            const myChart = new Chart(ctx, {
-                type: 'doughnut',
-                responsive: 'true',
-                data: {
-                    datasets: [{
-                        label: 'Availability',
-                        labels: [
-                            'Yes',
-                            'Maybe',
-                            'No',
-                            'Unknown'
-                        ],
-                        data: [yes_count, maybe_count, no_count, unknown_count],
-                        backgroundColor: [
-                            style.getPropertyValue('--bs-success'),
-                            style.getPropertyValue('--bs-info'),
-                            style.getPropertyValue('--bs-danger'),
-                            style.getPropertyValue('--bs-secondary')
-                        ],
-                        hoverOffset: 4
-                    }]
-                },
-            });
-
-        }
-        for (ctx of document.querySelectorAll('.availability-donut')){
-            donut(ctx,
-                ctx.dataset.availableYes,
-                ctx.dataset.availableMaybe,
-                ctx.dataset.availableNo,
-                ctx.dataset.availableUnknown,
-            )
-        }
-    </script>
-
-
-
-{% endblock %}
\ No newline at end of file
diff --git a/teamsnap/views.py b/teamsnap/views.py
index 165a57e..64efba4 100644
--- a/teamsnap/views.py
+++ b/teamsnap/views.py
@@ -73,7 +73,8 @@ def dashboard(request, team_id):
     ts_events_future = [e for e in ts_events if e.data['start_date'] > datetime.datetime.now(datetime.timezone.utc)]
     ts_events_past = [e for e in reversed(ts_events) if e.data['start_date'] < datetime.datetime.now(datetime.timezone.utc)]
 
-    return render(request, 'teamsnap/teamsnap.html', {
+    return render(request, 'teamsnap/dashboard.html', {
+        'team_id':team_id,
         'ts_events_future':ts_events_future,
         'ts_events_past': ts_events_past,
         'events_availabilities' : [(e, ts_availability_summaries_d[e.data['id']]) for e in ts_events_future]