101 lines
4.6 KiB
HTML
101 lines
4.6 KiB
HTML
{% 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 %} |