penracourses/atlas/templates/atlas/series_view.html

{% extends 'atlas/base.html' %}

{% load render_table from django_tables2 %}
{% block content_container_class %}container-fluid content-wide px-3{% endblock %}

{% block content %}

    <div class="container-fluid">
        <h2>My Series</h2>
        <details>
            <summary>
                <h4>Filter</h4>
            </summary>
            <div id="view-filter-options">
                <form action="" method="get">
                    {{ filter.form }}
                    <input class="btn btn-primary btn-sm mt-1 mb-1" type="submit" />
                </form>
            </div>
            View my <a href='{% url "atlas:case_view" %}?author={{request.user.id}}'>cases</a>.
        </details>

        <details class="mt-3">
            <summary>
                <strong>Actions</strong>
            </summary>
            <form id="bulk-delete-form" method="post" action="{% url 'atlas:series_bulk_delete' %}">
                {% csrf_token %}
                <button type="submit" class="btn btn-danger mb-2" onclick="return confirm('Delete selected series?');">
                    Delete Selected
                </button>
            </form>
        </details>
        {% render_table table %}
    </div>

<script>
document.getElementById('bulk-delete-form').addEventListener('submit', function(e) {
    // Remove any previously added hidden inputs
    document.querySelectorAll('#bulk-delete-form input[name="series_ids"]').forEach(el => el.remove());

    // Find all checked checkboxes
    const checked = document.querySelectorAll('input[name="selection"]:checked');
    if (checked.length === 0) {
        alert("Please select at least one series to delete.");
        e.preventDefault();
        return false;
    }
    // Add hidden inputs for each checked series
    checked.forEach(cb => {
        const hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = 'series_ids';
        hidden.value = cb.value;
        this.appendChild(hidden);
    });
});
</script>

    <div id="exam-options"></div>
{% endblock %}

{% block js %}
    <script>
document.addEventListener('DOMContentLoaded', function() {
});
    </script>
{% endblock %}


{% block css %}
    <style>
</style>
{% endblock css %}