djbrown/hbscorez

{% extends 'teams/base.j2' %}
{% block description %}Übersichtsseite der Mannschaft '{{ team.name }}' in der Liga '{{ team.league.name }}' des
    Bereichs '{{ team.league.district.name }}'{% endblock %}
{% block content %}
    {{ super() }}
    <nav class="nav nav-pills mb-3">
        <a class="nav-item nav-link m-1 active" href="#/">Übersicht</a>
        <a class="nav-item nav-link m-1" href="{{ url('teams:games', args=[team.bhv_id]) }}">Spiele</a>
        <a class="nav-item nav-link m-1" href="{{ url('teams:players', args=[team.bhv_id]) }}">Spieler</a>
        <a class="nav-item nav-link m-1" href="{{ url('teams:scorers', args=[team.bhv_id]) }}">Schützen</a>
        <a class="nav-item nav-link m-1" href="{{ url('teams:offenders', args=[team.bhv_id]) }}">Straffällige</a>
    </nav>
    <h2>Übersicht</h2>

    <h5>Kalender</h5>
    <div class="input-group">
        <div class="input-group-prepend">
            <button type="button" id="button-copy" class="btn btn-outline-secondary">Kopieren</button>
        </div>
        <input type="text" class="form-control" readonly value="{{ request.build_absolute_uri(url('teams:calendar', kwargs={'bhv_id': team.bhv_id})) }}" />
    </div>
    <small id="passwordHelpBlock" class="form-text text-muted mb-3">
        <em>Anleitung</em> für <a href="https://support.google.com/calendar/answer/37100">Google / Android</a>,
        <a href="https://support.apple.com/HT202361">iCloud</a> oder
        <a href="https://support.apple.com/guide/calendar/icl1022">macOS</a>
    </small>
{% endblock %}

{% block scripts %}
{{ super() }}
<script>
    const calendar_url  = '{{ request.build_absolute_uri(url('teams:calendar', kwargs={'bhv_id': team.bhv_id})) }}';
    const $alerts = $('#alerts');
    const $copyAlert = $(`<div class="alert alert-info alert-dismissible fade show mt-3" role="alert">
        Link zum Kalender wurde erfolgreich in die Zwischenablage kopiert.
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>`);

    $('#button-copy').click(function() {
        navigator.clipboard.writeText(calendar_url).then(function() {
            console.log('Async: Copying to clipboard was successful!');
            $copyAlert.addClass('show');
            $alerts.append($copyAlert);
        }, function(err) {
            console.error('Async: Could not copy text: ', err);
        })
    });
</script>
{% endblock %}