refine dashboard (remove chart.js in favor of bs progressbar), modify lineup to fit
This commit is contained in:
@@ -19,54 +19,7 @@
|
|||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="pb-3 flex-nowrap d-flex">
|
<div class="pb-3 flex-nowrap d-flex">
|
||||||
{% for event, availability_summary in events_availabilities|slice:":5" %}
|
{% for event, availability_summary in events_availabilities|slice:":5" %}
|
||||||
<div class="card mx-2" style="min-width: 320px;max-width: 375px;">
|
{% include "widgets/event-card.html"%}
|
||||||
<div class="row m-0 p-2">
|
|
||||||
<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=event.data.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 text-nowrap" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=event.data.team_id %}">
|
|
||||||
Go to Lineup
|
|
||||||
</a>
|
|
||||||
<a class="btn btn-primary btn-sm mx-1" role="button" href="{% url 'gamecard' event_id=event.data.id team_id=event.data.team_id %}">
|
|
||||||
<i class="bi bi-book"></i>
|
|
||||||
</a>
|
|
||||||
<form method="get"
|
|
||||||
action="{% url 'instagen_generate' team_id=event.data.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>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -82,41 +35,7 @@
|
|||||||
<div class="col">
|
<div class="col">
|
||||||
<div class="pb-3 flex-nowrap d-flex">
|
<div class="pb-3 flex-nowrap d-flex">
|
||||||
{% for event in ts_events_past|slice:":4" %}
|
{% for event in ts_events_past|slice:":4" %}
|
||||||
<div class="card mx-2" style="min-width: 320px;max-width: 375px;">
|
{% include "widgets/event-card.html"%}
|
||||||
<div class="row m-0 p-2">
|
|
||||||
<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=event.data.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.teamsnapsettings.managed_team.id %}">Go to Lineup</a>#}
|
|
||||||
|
|
||||||
<div class="d-flex">
|
|
||||||
<form method="get"
|
|
||||||
action="{% url 'instagen_generate' team_id=event.data.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>
|
|
||||||
</div>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -124,42 +43,3 @@
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
{% block inline_javascript %}
|
|
||||||
<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 %}
|
|
||||||
|
|||||||
44
teamsnap/dashboard/templates/widgets/event-card.html
Normal file
44
teamsnap/dashboard/templates/widgets/event-card.html
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
{% load availability_percentage %}
|
||||||
|
<div class="card mx-2" style="min-width: 320px;max-width: 375px;">
|
||||||
|
<div class="row m-0 p-2">
|
||||||
|
<div class="col">
|
||||||
|
<div>
|
||||||
|
<span class="h4"><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=event.data.team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></span>
|
||||||
|
<h6 class="text-muted mb-2">
|
||||||
|
{{ event.data.start_date|date:"D, F j, g:i A" }}<br>
|
||||||
|
{{ event.data.location_name }}
|
||||||
|
</h6>
|
||||||
|
</div>
|
||||||
|
{% if not event.data.results %}
|
||||||
|
<div>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar" style="width: {% availability_percentage availability_summary 'player_going' %}%">{{ availability_summary.data.player_going_count }}</div>
|
||||||
|
<div class="progress-bar bg-info" role="progressbar" style="width: {% availability_percentage availability_summary 'player_maybe' %}%">{{ availability_summary.data.player_maybe_count }}</div>
|
||||||
|
<div class="progress-bar bg-danger" role="progressbar" style="width: {% availability_percentage availability_summary 'player_not_going' %}%" >{{ availability_summary.data.player_not_going_count }}</div>
|
||||||
|
<div class="progress-bar text-secondary" role="progressbar" style="width: {% availability_percentage availability_summary 'player_unknown' %}%;background-color:#e9ecef;">{{ availability_summary.data.player_unknown_count }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if event.data.results %}
|
||||||
|
<div>
|
||||||
|
<span class="h4">{{ event.data.formatted_results }}</span>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
<hr/>
|
||||||
|
<div class="d-flex">
|
||||||
|
<a class="card-link m-auto" role="button" href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=event.data.team_id %}">
|
||||||
|
<i class="bi bi-clipboard"></i>
|
||||||
|
</a>
|
||||||
|
<a class="card-link m-auto" role="button" href="{% url 'gamecard' event_id=event.data.id team_id=event.data.team_id %}">
|
||||||
|
<i class="bi bi-book"></i>
|
||||||
|
</a>
|
||||||
|
<a class="card-link m-auto"
|
||||||
|
href="{% url 'instagen' team_id=event.data.team_id event_id=event.data.id %}">
|
||||||
|
<i class="bi bi-instagram"></i>
|
||||||
|
</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
@@ -1,9 +1,22 @@
|
|||||||
import datetime
|
import datetime
|
||||||
|
|
||||||
|
from django import template
|
||||||
from django.shortcuts import redirect, render
|
from django.shortcuts import redirect, render
|
||||||
|
|
||||||
from teamsnap.views import get_teamsnap_client
|
from teamsnap.views import get_teamsnap_client
|
||||||
|
|
||||||
|
register = template.Library()
|
||||||
|
|
||||||
|
|
||||||
|
@register.simple_tag
|
||||||
|
def multiply(a, b):
|
||||||
|
return a * b
|
||||||
|
|
||||||
|
|
||||||
|
@register.simple_tag
|
||||||
|
def divide(a, b):
|
||||||
|
return int(a / b)
|
||||||
|
|
||||||
|
|
||||||
def dashboard(request, team_id=None):
|
def dashboard(request, team_id=None):
|
||||||
if not team_id:
|
if not team_id:
|
||||||
|
|||||||
@@ -4,40 +4,27 @@
|
|||||||
{#{% block page_subheading %}{% endblock %}#}
|
{#{% block page_subheading %}{% endblock %}#}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
{# <div class="container overflow-scroll mx-0 px-0">#}
|
<div class="container overflow-scroll">
|
||||||
{# <div class="row flex-row flex-nowrap">#}
|
<div id="popup-messages-content">
|
||||||
{# {% for event_data in contexts %}#}
|
|
||||||
{# <div class="col border-start border-end">#}
|
|
||||||
{# <div class = "border-bottom">#}
|
|
||||||
{# <h4>{{ event_data.event.data.formatted_title }}</h4>#}
|
|
||||||
{# <h6 class="text-muted" >{{ event_data.data.start_date }}</h6>#}
|
|
||||||
{# </div>#}
|
|
||||||
{# {% include 'teamsnap/lineup/widgets/lineup.html' with formset_lineup=event_data.formset_lineup formset_bench=event_data.formset_bench event_id=event_data.event.data.id %}#}
|
|
||||||
{# </div>#}
|
|
||||||
{# {% endfor %}#}
|
|
||||||
{# </div>#}
|
|
||||||
{# </div>#}
|
|
||||||
<div class="container overflow-scroll">
|
|
||||||
<div id="popup-messages-content">
|
|
||||||
</div>
|
|
||||||
<div class="row flex-row flex-nowrap">
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr class="align-top mx-1">
|
|
||||||
{% for event_data in contexts %}
|
|
||||||
<td class="px-1">
|
|
||||||
{% include "lineup/widgets/lineup.html" with event=event_data.event event_id=event_data.event.data.id formset=event_data.formset formset_startinglineup=event_data.formset_startinglineup formset_bench=event_data.formset_bench formset_out=event_data.formset_out formset_startingpositionalonly=event_data.formset_startingpositionalonly %}
|
|
||||||
</td>
|
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row flex-row flex-nowrap">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr class="align-top mx-1">
|
||||||
|
{% for event_data in contexts %}
|
||||||
|
<td class="px-1">
|
||||||
|
{% include "lineup/widgets/lineup.html" with event=event_data.event event_id=event_data.event.data.id formset=event_data.formset formset_startinglineup=event_data.formset_startinglineup formset_bench=event_data.formset_bench formset_out=event_data.formset_out formset_startingpositionalonly=event_data.formset_startingpositionalonly availability_summary=event_data.availability_summary %}
|
||||||
|
</td>
|
||||||
|
{% endfor %}
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block inline_javascript %}
|
{% block inline_javascript %}
|
||||||
{{ block.super }}
|
{{ block.super }}
|
||||||
<script src="{% static 'js/Sortable.js' %}"></script>
|
<script src="{% static 'js/Sortable.js' %}"></script>
|
||||||
<script src="{% static 'lineup/js/lineup.js' %}"></script>
|
<script src="{% static 'lineup/js/lineup.js' %}"></script>
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@@ -1,11 +1,21 @@
|
|||||||
{% load static %}
|
{% load static %}
|
||||||
|
{% load availability_percentage %}
|
||||||
<div class="card mx-auto benchcoach-lineup" style="max-width: 455px" id="benchcoach-lineup-{{ event_id }}">
|
<div class="card mx-auto benchcoach-lineup" style="max-width: 455px" id="benchcoach-lineup-{{ event_id }}">
|
||||||
<form method="post" id="form-lineup-{{ event.data.id }}">
|
<form method="post" id="form-lineup-{{ event.data.id }}">
|
||||||
{{ formset.management_form }}
|
{{ formset.management_form }}
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<div class="border-bottom p-2">
|
<div class="border-bottom p-2">
|
||||||
<h4 class="card-title text-nowrap">{{ event.data.formatted_title }}</h4>
|
<span class="h4"><a class="text-decoration-none text-black" href="{% url 'teamsnap_view_event' team_id=event.data.team_id event_id=event.data.id %}">{{ event.data.formatted_title }}</a></span>
|
||||||
<h6 class="text-muted card-subtitle text-nowrap">{{ event.data.start_date|date:"D, F j, Y g:i A" }}</h6>
|
<h6 class="text-muted mb-2">
|
||||||
|
{{ event.data.start_date|date:"D, F j, g:i A" }}<br>
|
||||||
|
{{ event.data.location_name }}
|
||||||
|
</h6>
|
||||||
|
<div class="progress">
|
||||||
|
<div class="progress-bar bg-success" role="progressbar" style="width: {% availability_percentage availability_summary 'player_going' %}%">{{ availability_summary.data.player_going_count }}</div>
|
||||||
|
<div class="progress-bar bg-info" role="progressbar" style="width: {% availability_percentage availability_summary 'player_maybe' %}%">{{ availability_summary.data.player_maybe_count }}</div>
|
||||||
|
<div class="progress-bar bg-danger" role="progressbar" style="width: {% availability_percentage availability_summary 'player_not_going' %}%" >{{ availability_summary.data.player_not_going_count }}</div>
|
||||||
|
<div class="progress-bar text-secondary" role="progressbar" style="width: {% availability_percentage availability_summary 'player_unknown' %}%;background-color:#e9ecef;">{{ availability_summary.data.player_unknown_count }}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col text-end d-inline">
|
<div class="col text-end d-inline">
|
||||||
|
|||||||
@@ -42,7 +42,11 @@ def edit_lineup(request, event_ids, team_id):
|
|||||||
][0]
|
][0]
|
||||||
ts_availabilities = Availability.search(client, event_id=ts_event.data["id"])
|
ts_availabilities = Availability.search(client, event_id=ts_event.data["id"])
|
||||||
ts_lineup_entries = EventLineupEntry.search(client, event_id=event_id)
|
ts_lineup_entries = EventLineupEntry.search(client, event_id=event_id)
|
||||||
|
ts_availability_summary = [
|
||||||
|
i
|
||||||
|
for i in ts_bulkload
|
||||||
|
if isinstance(i, AvailabilitySummary) and i.data["event_id"] == event_id
|
||||||
|
][0]
|
||||||
ts_members = [i for i in ts_bulkload if isinstance(i, Member)]
|
ts_members = [i for i in ts_bulkload if isinstance(i, Member)]
|
||||||
ts_member_lookup = {m.data["id"]: m for m in ts_members}
|
ts_member_lookup = {m.data["id"]: m for m in ts_members}
|
||||||
gc_player_lookup = {
|
gc_player_lookup = {
|
||||||
@@ -179,6 +183,7 @@ def edit_lineup(request, event_ids, team_id):
|
|||||||
contexts.append(
|
contexts.append(
|
||||||
{
|
{
|
||||||
"event": ts_event,
|
"event": ts_event,
|
||||||
|
"availability_summary": ts_availability_summary,
|
||||||
"formset": formset,
|
"formset": formset,
|
||||||
"formset_bench": formset_bench,
|
"formset_bench": formset_bench,
|
||||||
"formset_startinglineup": formset_startinglineup,
|
"formset_startinglineup": formset_startinglineup,
|
||||||
|
|||||||
Reference in New Issue
Block a user