eds/templates/cms/evaluation.html
2017-04-06 16:08:55 +02:00

115 lines
2.3 KiB
HTML

{% extends "./base_site.html" %}
{% load i18n static %}
{% block coltype %}colMS{% endblock %}
{% block bodyclass %}{{ block.super }}{% endblock %}
{% block content %}
<script type="text/javascript" src="{% static 'js/Chart.min.js' %}"></script>
<style>
.container{
width: 1200px;
margin: 0 auto;
}
ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}
ul.tabs li.current{
background: #ededed;
color: #222;
}
.tab-content{
display: none;
background: #ededed;
padding: 15px;
}
.tab-content.current{
display: inherit;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('select').change(function(){
cl = $(this).attr('class');
tt = 'select.' + cl +' option:selected'
tot = 0;
max = $(tt).length * 3;
$(tt).each(function(){
tot = tot + parseInt($(this).val());
});
$('#tot_' + cl).text(Math.round(tot/max*100) + ' %');
});
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
});
});
</script>
<div id="content-main">
<h1>Evaluation des compétences</h1>
<div class="container">
<div>
<ul class="tabs">
<li class="tab-link current" data-tab="P01">P01</li>
<li class="tab-link" data-tab="P02">P02</li>
<li class="tab-link" data-tab="P03">P03</li>
<li class="tab-link" data-tab="P04">P04</li>
<li class="tab-link" data-tab="P05">P05</li>
<li class="tab-link" data-tab="P06">P06</li>
<li class="tab-link" data-tab="P07">P07</li>
<li class="tab-link" data-tab="P08">P08</li>
</ul>
<hr/>
</div>
{% for p in object_list %}
<div id="{{p.code}}" class="tab-content">
<table>
<tr><th>{{p}}</th><td width="100px"><div id="tot_{{p.code}}"></div></td></tr>
{% for c in p.competence_set.all %}
<tr><td>{{c}}</td><td><select class="{{p.code}}" ><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select></td></tr>
{% endfor %}
</table>
</div>
{% endfor %}
</div><!-- container -->
</div>
{% endblock %}