rename to dashboard, design improvements for dashboard and events
This commit is contained in:
150
teamsnap/templates/teamsnap/dashboard.html
Normal file
150
teamsnap/templates/teamsnap/dashboard.html
Normal file
@@ -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 %}
|
||||||
@@ -2,13 +2,46 @@
|
|||||||
{% block title %} {{ event.data.formatted_title }}{% endblock %}
|
{% block title %} {{ event.data.formatted_title }}{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<div class="card mx-auto">
|
<div class="card mx-auto" style="max-width: 455px">
|
||||||
<div class="border-bottom p-2">
|
<div class="border-bottom p-2">
|
||||||
<h4 class="card-title text-nowrap">{{ event.data.formatted_title }}</h4>
|
<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>
|
<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>
|
||||||
|
|
||||||
<div class="card-body p-0 m-0">
|
<div class="card-body p-0 m-0">
|
||||||
<div>
|
<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="row m-0">
|
||||||
<div class="table-responsive p-0">
|
<div class="table-responsive p-0">
|
||||||
<table class="table table-sm">
|
<table class="table table-sm">
|
||||||
@@ -43,20 +76,18 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
<div class="row m-0">
|
<div class="row m-0">
|
||||||
<div class="col border-bottom">
|
<div class="col border-bottom border-top bg-light">
|
||||||
<i class="bi bi-clipboard-check me-1"></i><span class="text-uppercase fw-bold small">Availabilities</span>
|
<span class="text-uppercase fw-bold small">Availabilities</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="row m-0">
|
||||||
<div class="table-responsive p-0">
|
<div class="table-responsive p-0">
|
||||||
<table class="table table-sm">
|
<table class="table table-sm">
|
||||||
{# <thead>#}
|
|
||||||
{# <th scope="row">#}
|
|
||||||
{# <td>Status</td>#}
|
|
||||||
{# <td>Last</td>#}
|
|
||||||
{# <td>First</td>#}
|
|
||||||
{# </th>#}
|
|
||||||
{# </thead>#}
|
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="col" class="col-1">
|
<th scope="col" class="col-1">
|
||||||
@@ -92,65 +123,19 @@
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row m-0">
|
</div>
|
||||||
<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>
|
|
||||||
|
|
||||||
</tr>
|
<div>
|
||||||
{% endfor %}
|
<div class="row m-0">
|
||||||
</tbody>
|
<div class="col border-bottom border-top bg-light">
|
||||||
</table>
|
<span class="text-uppercase fw-bold small">Lineup</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row m-0">
|
<div class="row m-0">
|
||||||
<div class="col border-bottom mb-1">
|
<div class="flex-column m-2">
|
||||||
<i class="bi bi-share"></i><span class="text-uppercase fw-bold small"> Functions</span>
|
<a class="btn btn-primary btn-sm"
|
||||||
</div>
|
href="{% url 'teamsnap_edit_lineup' event_ids=event.data.id team_id=request.user.profile.teamsnapsettings.managed_team.id %}"
|
||||||
<div class="row">
|
role="button">Edit</a>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -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 %}
|
|
||||||
@@ -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_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)]
|
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_future':ts_events_future,
|
||||||
'ts_events_past': ts_events_past,
|
'ts_events_past': ts_events_past,
|
||||||
'events_availabilities' : [(e, ts_availability_summaries_d[e.data['id']]) for e in ts_events_future]
|
'events_availabilities' : [(e, ts_availability_summaries_d[e.data['id']]) for e in ts_events_future]
|
||||||
|
|||||||
Reference in New Issue
Block a user