asc/benchcoach-django
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refine dashboard (remove chart.js in favor of bs progressbar), modify lineup to fit

Browse Source
This commit is contained in:
Anthony Correa
2022-06-14 14:08:11 -05:00
parent fe5a904ff6
commit ad15830535
6 changed files with 94 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
teamsnap/dashboard/templates/dashboard.html
View File

@@ -19,54 +19,7 @@
<div class="col">
<div class="pb-3 flex-nowrap d-flex">
{% for event, availability_summary in events_availabilities|slice:":5" %}
<div class="card mx-2" style="min-width: 320px;max-width: 375px;">
<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>
{% include "widgets/event-card.html"%}
{% endfor %}
</div>
</div>
@@ -82,41 +35,7 @@
<div class="col">
<div class="pb-3 flex-nowrap d-flex">
{% for event in ts_events_past|slice:":4" %}
<div class="card mx-2" style="min-width: 320px;max-width: 375px;">
<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>
{% include "widgets/event-card.html"%}
{% endfor %}
</div>
</div>
@@ -124,42 +43,3 @@
</div>
{% 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 %}