jm2l/jm2l/templates/Participant/list.mako

# -*- coding: utf-8 -*- 
<%inherit file="jm2l:templates/layout.mako"/>

<%def name="cssAddOn()">
<style>
.data {
	display:none;
}

.table thead th {
	background-color: lightblue;
	vertical-align:middle;
	text-align:center;
}

th.SortUp {
    background: url("/static/img/up.gif") right center no-repeat;
}

th.SortDown {
    background: url("/static/img/down.gif") right center no-repeat;
}

</style>
</%def>
<script src="/vendor/jquery.min.js"></script>  
<script>

$(function () {

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find("tr:not(:has('th'))").toArray().sort(comparer($(this).index(),this.asc))
    this.asc = !this.asc
    table.find('th').removeClass( "SortDown SortUp" );
    if (!this.asc){
    	rows = rows.reverse(); 
    	table.find('th:eq('+$(this).index()+')').toggleClass('SortDown');
    } else {
    	table.find('th:eq('+$(this).index()+')').toggleClass('SortUp');
    }
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index, order) {
	if (index==3 || index==7)
	    return function(a, b) {
		    var dateA = new Date(getCellValue(a, index)).getTime();
		    var dateB = new Date(getCellValue(b, index)).getTime();
			if (isNaN(dateA) && isNaN(dateB))  return 0
			if (isNaN(dateA)) return order ? -1 : 1
			if (isNaN(dateB)) return order ? 1 : -1
		    return dateA > dateB ? 1 : -1;  
	    }	
	else
	    return function(a, b) {
	        var valA = getCellValue(a, index), valB = getCellValue(b, index)
	        if (valA==="" && valB==="") return 0
	        if (valA==="") return order ? -1 : 1
	        if (valB==="") return order ? 1 : -1
	        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB)
	    }
}

function no_accent(my_string) {
	var new_string = "";
	var pattern_accent = new Array("é", "è", "ê", "ë", "ç", "à", "â", "ä", "î", "ï", "ù", "ô", "ó", "ö");
	var pattern_replace_accent = new Array("e", "e", "e", "e", "c", "a", "a", "a", "i", "i", "u", "o", "o", "o");
	if (my_string && my_string!= "") {
	    for(var i = 0; i < pattern_accent.length; i++){
	        my_string = my_string.replace(pattern_accent[i], pattern_replace_accent[i]);
	    }	
	}
	return my_string;
}

function getCellValue(row, index){ 
	switch (index) {
	case 0: // Name
		return no_accent( $(row).children('td').eq(index).children('a').text().toLowerCase() );
		break;
	default:
		return no_accent( $(row).children('td').eq(index).children('span').text() );
		//return $(row).children('td').eq(index).html();
	} 
}

// additional code to apply a filter
$('table').each(function(){
    var table = $(this)
    var headers = table.find('th').length;
    var filterrow = table.find('th:first()').prepend($('<div>').attr('class','input-append').click(function(){return false;}));
    filterrow.find('div').append($('<input>').attr('type','text').keyup(function(){
	        table.find('tr').show()
            filterrow.find('input[type=text]').each(function(){
	            var index = $(this).parent().index() + 1;
	            var filter = $(this).val() != '';
	            $(this).toggleClass('filtered', filter);
	            if (filter){
	                var el = 'td:nth-child('+index+') > span.data';
	                var criteria = ":contains('"+$(this).val().toLowerCase()+"')";
	                table.find(el+':not('+no_accent(criteria)+')').parent().parent().hide();
	            }
            });
        }));
    filterrow.find('div').append($('<span>').attr('class','btn').attr('type','button').text('C').click(function(){
        $(this).parent().parent().find('input[type=text]').val('').toggleClass('filtered', false)
        table.find('tr').show()
    }))
})
     
});

</script>
<%
import datetime
import itertools
now = datetime.datetime.now()
%>

<form class="filterform" action="#">
	<table class="table table-bordered table-hover">
      <thead>
        <tr>
            <th style="width:7em;text-align:center;"></th>
            <th style="width:5em;text-align:center;">Visite</th>
            <th style="width:7em;text-align:center;">Activité</th>
            <th style="text-align:center;">Arrivée prévue</th>
            <th style="width:5em;text-align:center;">${DicRepas['Ven']} Repas Vendredi</th>
            <th style="width:5em;text-align:center;">${DicRepas['Midi']} Repas Midi </th>
            <th style="width:5em;text-align:center;">${DicRepas['Soir']} Repas Soir</th>
            <th style="text-align:center;">Départ prévu</th>
            <th style="text-align:center;">Notes</th>
        </tr>
      </thead>
      <tbody id="list">
		% for u, s in Users:      
            <tr>
                <td style="text-align:center;">
                	<span class="data">${u.slug}</span>
					<a href="/MesJM2L?user=${u.uid}">${u.nom} ${u.prenom}</a><br /> 
                        <span style="align:center">
		                    ${u.vote_logo}
                            <a href="mailto:${u.mail}"> 
                                <i class="icon-envelope"></i>
                            </a>                            
							% if u.Staff==1:
	                            <a href="javascript:alert('${u.nom}, ${u.prenom}\nStaff JM2L');"> 
	                                <i class="icon-star"></i>
	                            </a>
							% endif
							% if u.Staff==0:
	                            <a href="javascript:alert('${u.nom}, ${u.prenom}\nIntervenant');"> 
	                                <i class="icon-user"></i>
	                            </a>
							% endif
							% if u.active==0:							
                            <a href="javascript:alert('${u.nom}, ${u.prenom}\nInactive');"> 
                                <i class="icon-ban-circle"></i>
                            </a>
							% endif
							% if u.phone:							
                            <a href="javascript:alert('${u.nom}, ${u.prenom}\n${u.phone}');"> 
                                <i class="icon-headphones"></i>
                            </a>
							% endif                            
                        </span>
                </td>
                <td style="text-align:center;">
                	<span class="data">${(now - u.last_logged).days}</span>${(now - u.last_logged).days} j
                </td>
                <td style="text-align:center;">
                    % if u.events:
                    	<span class="data">${len(u.events)}</span>
                    	<select style="width:7em;">
                    		<option><strong>${len(u.events)} Intérv.</strong></option>
	                    	% for y, g in itertools.groupby(sorted(u.events, key=lambda k:k.for_year, reverse=True), key=lambda k:k.for_year):
						    <OPTGROUP LABEL="${y}">
						    	% for event in g:
		                    	${event.for_year}
		                    	<OPTION onclick="location='/event/${event.for_year}/${event.slug}';">${event.event_type} - ${event.name}</OPTION>
			                    % endfor
							</OPTGROUP>
		                    % endfor
	                    </select>
                    %else:
                        <span class="data"></span>
                    	<i> - </i>
                    % endif
                </td>
                <td style="text-align:center;">
                    % if s and s.arrival_time:
                    	<span class="data">${s.arrival_time.strftime('%m/%d/%Y %H:%M:%S')}</span>
                    	${s.arrival_time.strftime('%a %d <strong>%H:%M</strong>') | n}<br/>
                    	${s.arrival_place}
                    	% if s.arrival_text:
                    		- NB: <strong>${s.arrival_text}</strong>
                    	% endif
                    %else:
                    	<span class="data"></span>                    
                    	<i>Pas d'informations</i>
                    % endif
                </td>
	            % if s and s.repas:
	        		% for i, d in enumerate(['Ven Soir', 'Sam midi', 'Sam soir']):
	        		<td style="text-align:center">
	                	% if (s.repas & 2**i):
	                		<span class="data">Oui</span>Oui
	                	% else:
	                		<span class="data">Non</span>Non
	                	% endif
	        		</td>
	        		% endfor
                %else:
	                <td style="text-align:center;" colspan="3">
	                	<i>Pas d'informations</i>
	                </td>
                % endif
                </td>
                <td style="text-align:center;">
                    % if s and s.depart_time:
                    	<span class="data">${s.depart_time.strftime('%m/%d/%Y %H:%M:%S')}</span>                    
                    	${s.depart_time.strftime('%a %d <strong>%H:%M</strong>') | n}<br/>
                    	${s.depart_place}                    	
                    	% if s.depart_text:
                    		- NB: <strong>${s.arrival_text}</strong>
                    	% endif
                    %else:
                    	<span class="data"></span>
                    	<i>Pas d'informations</i>
                    % endif
                </td>
                <td>
		            % if s:
		            	% if s.repas_allerg:
		            		<u>Allergies</u> : ${s.repas_allerg}<br/>
		            	% endif
		            	% if s.repas_contr:
		            		<u>Contraintes</u> : ${s.repas_contr}<br/>
		            	% endif
                    % endif
                </td>
            </tr>
        % endfor
      </tbody>
    </table>
</form>