tutor_pairing.html

{% extends "dashboard/action.html" %}{% load staticfiles %}{% load bootstrap3 %}{% load i18n %}

{% block title%}{% trans "Tutoren paaren" %} | {% trans "Dashboard" %}{% endblock %}

{% block content_dashboard_view %}
<link rel="stylesheet" href="{% static 'vendor/bootstrap-chosen/bootstrap-chosen.css' %}" />

<h3>{% trans "Tutoren auf Kleingruppen verteilen" %}</h3>

<div class="well well-sm">
    {% trans "Die Zahl in Klammern gibt die Erfahrung als Ophasentutor der jeweiligen Person an." %}
</div>

<form role="form" action="{{action}}" method="POST">
    {% csrf_token %}
    {% bootstrap_form form %}
    {% buttons %}
    <button type="submit" class="btn btn-success pull-right">
        {% bootstrap_icon "ok" %} {% trans "Paarungen speichern" %}
    </button>
    {% endbuttons %}
</form>
{% endblock %}

{% block bottom_script %}
<script src="{% static 'vendor/chosen-js/chosen.jquery.js' %}"></script>
<script>
    // function to hide all groups which do not belong to the chosen group category
    function showSelectedGroups(e) {
        $(".tutor-select").parent().hide();
        var categoryCssClass = $("select[name=category] option:selected").text().toLowerCase().replace(/ /g, '-');
        $("." + categoryCssClass).parent().show();
    }
    // enable chosen for category field
    $("select[name=category]").chosen({
        disable_search: true
    });
    // trigger group hiding function on change of category field
    $("select[name=category]").on("change", showSelectedGroups);
    //enable chosen for all group fields
    $(".tutor-select").chosen({
        no_results_text: "Kein Tutor namens",
        placeholder_text_multiple: "Noch keine Tutoren zugewiesen",
        search_contains: true,
        display_disabled_options: false,
        display_selected_options: false
    });
    // disable selected tutor for other groups
    $(".tutor-select").on("change", function(evt, params) {
        if("selected" in params) {
            $(".tutor-select option[value='" + params.selected + "']").not($(this).children("option[value='" + params.selected + "']")).prop('disabled', true);
        } else if("deselected" in params) {
            $(".tutor-select option[value='" + params.deselected + "']").prop('disabled', false);
        }
        $(".tutor-select").trigger('chosen:updated');
    });
    // trigger initial call to group hiding function
    $(document).ready(showSelectedGroups);
    // initially disable preselected tutors for other groups
    $(document).ready(function() {
        $(".tutor-select option:selected").each(function() {
            $(".tutor-select option[value='" + this.value + "']").not(":selected").prop('disabled', true);
        });
        $(".tutor-select").trigger('chosen:updated');
    })
</script>
{% endblock %}