273 lines
9.1 KiB
HTML
273 lines
9.1 KiB
HTML
{% extends "admin/base_site.html" %}
|
||
{% load i18n admin_static %}
|
||
{% load url from future %}
|
||
|
||
{% block extrastyle %}
|
||
<style>
|
||
div#period_choice { margin: 0 auto; text-align: center; width: 60%; padding: 0.5em; margin-bottom: 1em; background-color: #EDF3FE;}
|
||
select#section_select { width: 8em; margin-right: 2em; }
|
||
select#period_select { width: 16em; }
|
||
|
||
div#student_choice { float: left; width: 18%; }
|
||
select#student_select, select#student_filter { width: 100%; }
|
||
|
||
div#corp_choice { float: right; width: 18%; }
|
||
select#corp_select, select#corp_filter { width: 100%; }
|
||
|
||
div#student_detail { float:left; width: 40%; margin: 1em; padding: 0.5em; border: 3px solid red; min-height: 4em; border-radius: 8px; }
|
||
div#corp_detail { float:right; width: 40%; margin: 1em; padding: 0.5em; border: 3px solid red; min-height: 4em; border-radius: 8px; }
|
||
div#corp_total, div#student_total { font-style: italic; color: gray; }
|
||
div.filled { border-color: green !important; }
|
||
|
||
div#training_form { text-align: center; }
|
||
div#buttons_div { margin-top: 1em; }
|
||
input#valid_training { display: none; }
|
||
|
||
div#trainings { clear: both; padding-top: 1em; }
|
||
|
||
.missing { font-style: italic; color: red; }
|
||
</style>
|
||
{% endblock %}
|
||
|
||
{% block extrahead %}
|
||
<script type="text/javascript" src="{% static "admin/js/jquery.js" %}"></script>
|
||
<script type="text/javascript">
|
||
function update_periods(section_id) {
|
||
$.getJSON('/section/' + section_id + '/periods/', function(data) {
|
||
var sel = $('#period_select');
|
||
sel.append($("<option />").val('').text('-------'));
|
||
if (data.length > 0) {
|
||
$.each(data, function() {
|
||
sel.append($("<option />").val(this[0]).text(this[1]));
|
||
})
|
||
}
|
||
update_students('');
|
||
update_corporations('');
|
||
update_trainings('');
|
||
});
|
||
}
|
||
|
||
function update_class_filter(section_id) {
|
||
$('#student_filter').empty();
|
||
$.getJSON('/section/' + section_id + '/classes/', function(data) {
|
||
var sel = $('#student_filter');
|
||
sel.append($("<option />").val('').text('Toutes les classes'));
|
||
if (data.length > 0) {
|
||
$.each(data, function() {
|
||
sel.append($("<option />").val(this[1]).text(this[1]));
|
||
})
|
||
}
|
||
});
|
||
}
|
||
|
||
function update_students(period_id) {
|
||
$('#student_select').empty();
|
||
$('#student_detail').html('').removeClass("filled");
|
||
current_student = null;
|
||
$('input#valid_training').hide();
|
||
if (period_id == '') return;
|
||
$.getJSON('/period/' + period_id + '/students/', function(data) {
|
||
var sel = $('#student_select');
|
||
var options = [];
|
||
$.each(data, function() {
|
||
if (this.training_id == null) {
|
||
options.push(this);
|
||
sel.append($("<option />").val(this.id).text(this.name + ' (' + this.klass + ')'));
|
||
}
|
||
});
|
||
// Keep options as data to enable filtering
|
||
sel.data('options', options);
|
||
$('div#student_total').html(options.length + " étudiant-e-s").data('num', options.length);
|
||
});
|
||
}
|
||
|
||
function update_corporations(period_id) {
|
||
$('#corp_select').empty();
|
||
$('#corp_detail').html('').removeClass("filled");
|
||
current_avail = null;
|
||
$('input#valid_training').hide();
|
||
if (period_id == '') return;
|
||
$.getJSON('/period/' + period_id + '/corporations/', function(data) {
|
||
var sel = $('#corp_select');
|
||
var domains = [];
|
||
var options = [];
|
||
$('#corp_filter').empty().append($("<option />").val('').text('Tous les domaines'));
|
||
$.each(data, function() {
|
||
if (this.free) {
|
||
options.push(this);
|
||
sel.append($("<option />").val(this.id).text(this.corp_name));
|
||
}
|
||
if (domains.indexOf(this.domain) == -1) {
|
||
domains.push(this.domain);
|
||
$('#corp_filter').append($("<option />").val(this.domain).text(this.domain));
|
||
}
|
||
});
|
||
sel.data('options', options);
|
||
$('div#corp_total').html(options.length + " disponibilités").data('num', options.length);
|
||
});
|
||
}
|
||
|
||
function update_trainings(period_id) {
|
||
if (period_id == '') $('ul#training_list').html('');
|
||
else $('ul#training_list').load('/training/by_period/' + period_id + '/', function() {
|
||
$('img.delete_training').click(function() {
|
||
if (!confirm("Voulez-vous vraiment supprimer ce stage ?")) return;
|
||
var li = $(this).parents('li');
|
||
$.post('/training/del/',
|
||
{pk: li.attr('id').split('_')[1],
|
||
csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val()}, function() {
|
||
li.remove();
|
||
// dispatch student and corp in their listings
|
||
update_students($('#period_select').val());
|
||
update_corporations($('#period_select').val());
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
$(document).ready(function() {
|
||
$('#section_select').change(function(ev) {
|
||
// Update period list when section is modified
|
||
$('#period_select').empty();
|
||
update_periods($(this).val());
|
||
update_class_filter($(this).val());
|
||
});
|
||
|
||
$('#period_select').change(function(ev) {
|
||
// Update student/corporation list when period is modified
|
||
update_students($(this).val());
|
||
update_corporations($(this).val());
|
||
update_trainings($(this).val());
|
||
});
|
||
|
||
$('#student_filter').change(function(ev) {
|
||
var sel = $('#student_select');
|
||
var options = sel.data('options');
|
||
var filter_val = $(this).val();
|
||
sel.empty();
|
||
$.each(options, function(i) {
|
||
var option = options[i];
|
||
if (option.klass == filter_val || filter_val == '') {
|
||
sel.append($("<option />").val(option.id).text(option.name + ' (' + option.klass + ')'));
|
||
}
|
||
});
|
||
});
|
||
|
||
$('#student_select').change(function(ev) {
|
||
$('#student_detail').load('/student/' + $(this).val() + '/summary/').addClass("filled");
|
||
current_student = $(this).val();
|
||
if (current_avail !== null) $('input#valid_training').show()
|
||
});
|
||
|
||
$('#corp_filter').change(function(ev) {
|
||
var sel = $('#corp_select');
|
||
var options = sel.data('options');
|
||
var filter_val = $(this).val();
|
||
sel.empty();
|
||
$.each(options, function(i) {
|
||
var option = options[i];
|
||
if (option.domain == filter_val || filter_val == '') {
|
||
sel.append($("<option />").val(option.id).text(option.corp_name));
|
||
}
|
||
});
|
||
});
|
||
|
||
$('#corp_select').change(function(ev) {
|
||
$('#corp_detail').load('/availability/' + $(this).val() + '/summary/').addClass("filled");
|
||
current_avail = $(this).val();
|
||
if (current_student !== null) $('input#valid_training').show()
|
||
});
|
||
|
||
$('#valid_training').click(function() {
|
||
$.post('/training/new/', {
|
||
student: current_student, avail: current_avail,
|
||
referent: $('#referent_select').val(),
|
||
csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val()},
|
||
function(data) {
|
||
if (data != 'OK') {
|
||
alert(data);
|
||
return;
|
||
}
|
||
// Clear selected student/corp
|
||
$('option:selected', '#student_select').remove();
|
||
var prev_num = $('div#student_total').data('num');
|
||
$('div#student_total').html((prev_num - 1) + " étudiant-e-s").data('num', prev_num - 1);
|
||
$('#student_detail').html('').removeClass("filled");
|
||
$('option:selected', '#corp_select').remove();
|
||
prev_num = $('div#corp_total').data('num');
|
||
$('div#corp_total').html((prev_num - 1) + " disponibilités").data('num', prev_num - 1);
|
||
$('#corp_detail').html('').removeClass("filled");
|
||
current_student = null;
|
||
current_avail = null;
|
||
$('input#valid_training').hide();
|
||
$('#referent_select').val('');
|
||
update_trainings($('#period_select').val());
|
||
}
|
||
);
|
||
});
|
||
|
||
update_periods($('#section_select').val());
|
||
update_class_filter($('#section_select').val());
|
||
});
|
||
|
||
var current_student = null;
|
||
var current_avail = null;
|
||
</script>
|
||
{% endblock %}
|
||
|
||
{% block breadcrumbs %}
|
||
<div class="breadcrumbs">
|
||
<a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
|
||
› Attributions
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
<div id="period_choice">
|
||
<form>
|
||
<label for="section_select">Filière:</label>
|
||
<select id="section_select">{% for sect in sections %}<option value="{{ sect.id }}">{{ sect.name }}</option>{% endfor %}</select>
|
||
<label for="period_select">Période:</label>
|
||
<select id="period_select"></select>
|
||
</form>
|
||
</div>
|
||
|
||
<div id="student_choice">
|
||
<form>
|
||
<select id="student_filter" size="1"></select>
|
||
<select id="student_select" size="15"></select>
|
||
<div id="student_total"></div>
|
||
</form>
|
||
</div>
|
||
|
||
<div id="corp_choice">
|
||
<form>
|
||
<select id="corp_filter" size="1"></select>
|
||
<select id="corp_select" size="15"></select>
|
||
<div id="corp_total"></div>
|
||
</form>
|
||
</div>
|
||
|
||
<div id="training_main">
|
||
|
||
<div style="overflow: auto;">
|
||
<div id="student_detail"></div>
|
||
<div id="corp_detail"></div>
|
||
</div>
|
||
<div id="training_form">
|
||
<form>{% csrf_token %}
|
||
<div id="referent_choice"><label for="referent_select">Référent:</label>
|
||
<select id="referent_select"><option value="">-------</option>
|
||
{% for ref in referents %}<option value="{{ ref.id }}">{{ ref }}</option>{% endfor %}</select>
|
||
</div>
|
||
<div id="buttons_div"><input id="valid_training" type="button" value="Valider ce stage"></div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="trainings">
|
||
<h3>Stages planifiés pour la période choisie</h3>
|
||
<ul id="training_list">-
|
||
</ul>
|
||
</div>
|
||
{% endblock %}
|