jm2l/jm2l/templates/helpers.mako

## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##                   Afficher un form
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=    
<%def name="DisplayForm(form, DicFormat)">
<% 
TabJs = {'select':[], 'desc':[]} 
%>
% for FieldName, Field in form._fields.items():
        % if DicFormat.has_key(Field.name) and DicFormat[Field.name].get("Ignore"):
            <% continue %>
        % endif
        % if Field.type in ['HiddenField', 'CSRFTokenField']:
            ${Field}
            <% continue %>
        % elif Field.type=="SelectField":
            <% TabJs['select'].append(Field.label.field_id) %>
        % endif
% if DicFormat.has_key(Field.name) and DicFormat[Field.name].get("fieldset"):
    <fieldset> 
        <legend>${Field.label.text}</legend>
% else:
    % if DicFormat.has_key(Field.name) and DicFormat[Field.name].get("ContainerStyle"):
        <div style="padding-right:5px;${DicFormat[Field.name].get("ContainerStyle")}">
    % else:
        <div style="padding-right:5px;">
    % endif
            <label for="${Field.label.field_id}">${Field.label.text}
                % if Field.description:
                    <% TabJs['desc'].append(Field.label.field_id) %>
                    <a id="${Field.label.field_id}-help" data-toggle="popover"
                        data-original-title="${Field.label.text}"
                        data-content="${Field.description}">
                        <i class="icon-me" style="background-image: url('/img/Help.png');background-position:1px 2px;"></i>
                    </a>
                % endif
            </label>
% endif
            % if DicFormat.has_key(Field.name):
                <%
                PlaceHolder = DicFormat[Field.name].get("PlaceHolder")
                FieldStyle = DicFormat[Field.name].get("FieldStyle")
                Class = [None,"ckeditor"][ DicFormat[Field.name].has_key("ckeditor") ]
                %> 
                ${Field(placeholder=PlaceHolder, style=FieldStyle, class_=Class)}
            % else:
                ${Field()}
            % endif
            % for error in Field.errors:
                <div class="alert alert-error">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <h4>Erreur!</h4>
                    ${ error }
                </div>
            % endfor
% if DicFormat.has_key(Field.name) and DicFormat[Field.name].get("fieldset"):
    </fieldset>
% else:
        </div>
% endif
% endfor
<%
    for jsitem in TabJs['select']:
        context._kwargs['postpone_js'].append( "$('#%s').select2({});" % jsitem )
    for jsitem in TabJs['desc']:
        context._kwargs['postpone_js'].append( "$('#%s-help').popover();" % jsitem )
%>

</%def>
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##                   Wrapper pour la form Sejour
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=    
<%def name="sejour_wrapper(Places)">

<div class="form-inline">
    Départ :
    <select style="width:12em;" id="Arrival:Place" name="Arrival:Place" title="Lieu">
        % for place in Places:
            <option value="${place.place_id}">${place.display_name}</option>
        % endfor
    </select>
</div>
<br />
<div class="form-inline">
    Arrivée :
    <select style="width:12em;" id="Arrival:Place" name="Arrival:Place" title="Lieu">
        % for place in Places:
            <option value="${place.place_id}">${place.display_name}</option>
        % endfor
    </select>
</div>

</%def>
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##                   Wrapper pour la form Itineraire
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=    
<%def name="itin_wrapper(itin_form)">
    <div style="padding:5px;">
        <div style="float:left;padding-right:5px;">
            <label for="${itin_form.start_place.label.field_id}">
                ${itin_form.start_place.label}
            </label>
            % for error in itin_form.start_place.errors:
                <div class="alert error">Le Depart ${ error }</div>
            % endfor            
            ${itin_form.start_place(style='width:17em;')},
        </div>
        <div>
            <label for="${itin_form.arrival_place.label.field_id}">
                ${itin_form.arrival_place.label}
            </label>            
            % for error in itin_form.arrival_place.errors:
                <div class="alert error">Arrivee ${ error }</div>
            % endfor
           ${itin_form.arrival_place(style='width:17em;')}
        </div>
        <div style="padding:5px;">
            <small style="color:#999">Si je n´ai pas trouvé le lieu dont j´ai besoin dans ces listes...</small>
            <br />
            <small style="color:#999">Je peux </small>
            <a class="btn btn-mini btn-info" role="button" href="javascript:DoGetLieu('/2015/modal/Place/0');">
                <i class="icon-plus-sign icon-white"></i> Ajouter un lieu
            </a>
        </div>
    </div>
    <script>
        $("#${itin_form.start_place.label.field_id}").select2({});
        $("#${itin_form.arrival_place.label.field_id}").select2({});
    </script>    
</%def> \
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##           Wrapper pour afficher les fichiers
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="medias(MediaType, UID, desc=None)"> \

</%def>
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##                   Wrapper pour uploader
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=    
<%def name="uploader(MediaType, UID, desc=None)"> \
    <!-- The file upload form used as target for the file upload widget -->
    <form class="fileupload" id="fileupload_${MediaType}" action="/uploader/${MediaType}/${UID}/proceed" method="POST" enctype="multipart/form-data">
        <!-- Redirect browsers with JavaScript disabled to the origin page -->
        <noscript><input type="hidden" name="redirect" value="/"></noscript>
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="fileupload-buttonbar">
                <!-- The fileinput-button span is used to style the file input field as button -->    
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    % if desc:
                        <span>Ajouter ${desc}</span>
                    % else:
                        <span>Ajouter</span>
                    % endif:
                    <input type="file" name="files[]" multiple>
                </span>
                <!-- The global file processing state -->
                <span class="fileupload-process"></span>
            <!-- The global progress state -->
            <div class="fileupload-progress fade" style="float:right;">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="bar progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
    </form>
</%def> \
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##           Wrapper pour uploader - Partie JavaScript
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="uploader_js()"> \
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td style="width: 80px;">
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar progress-bar progress-bar-success" style="width:0%;"></div></div>
        </td>
        <td style="width: 85px;">
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn-mini btn-primary start" disabled style="width: 80px;">
                    <i class="icon-upload icon-white"></i>
                    <span>Upload</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn-mini btn-warning cancel" style="width: 80px;">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Annuler</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        <td style="width: 80px;">
            <span class="preview">
                {% if (file.thumbnailUrl) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a>
                {% } %}
            </span>
        </td>
        <td>
            <p class="name">
                {% if (file.url) { %}
                    <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a>
                {% } else { %}
                    <span>{%=file.name%}</span>
                {% } %}
            </p>
            <p><span class="size">{%=o.formatFileSize(file.size)%}</span></p>
            {% if (file.error) { %}
                <div><span class="label label-danger">Erreur</span> {%=file.error%}</div>
            {% } %}
        </td>
        <td style="width: 85px;">
            {% if (file.deleteUrl) { %}
                <button class="btn-mini btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}>
                    <i class="icon-trash icon-white"></i>
                    <span>Suppr.</span>
                </button>
                <input type="checkbox" name="delete" value="1" class="toggle">
            {% } else { %}
                <button class="btn-mini btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Annuler</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}
</script>
%if 1:
##<script src="/vendor/fileupload/js/jquery-uploader.min.js"></script>
##<script src="/js/main.js"></script>
plop
% else:
<script src="/static/jquery.min.js"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script src="/static/js/vendor/jquery.ui.widget.js"></script>
<!-- The Templates plugin is included to render the upload/download listings -->
<script src="/static/js/tmpl.min.js"></script>
<!-- The Load Image plugin is included for the preview images and image resizing functionality -->
<script src="/static/js/load-image.all.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="/static/js/canvas-to-blob.min.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="/static/bootstrap.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="/static/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="/static/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="/static/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="/static/js/jquery.fileupload-image.js"></script>
<!-- The File Upload audio preview plugin -->
<script src="/static/js/jquery.fileupload-audio.js"></script>
<!-- The File Upload video preview plugin -->
<script src="/static/js/jquery.fileupload-video.js"></script>
<!-- The File Upload validation plugin -->
<script src="/static/js/jquery.fileupload-validate.js"></script>
<!-- The File Upload user interface plugin -->
<script src="/static/js/jquery.fileupload-ui.js"></script>
<!-- The main application script -->
<script src="/static/js/main.js"></script>
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE 8 and IE 9 -->
<!--[if (gte IE 8)&(lt IE 10)]>
<script src="/static/js/cors/jquery.xdr-transport.js"></script>
<![endif]-->
% endif
</%def> \
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##           Wrapper pour les intervention utilisateur 
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="show_Interventions(ListEvent, HeadTitle=None, NotFoundTitle=None)"> \
<table width="100%" class="table table-striped table-bordered table-hover">
    <tr>
        <th style="width:6em;text-align:center;">Date</th>
        % if HeadTitle:
            <th style="text-align:center;">${HeadTitle}</th>        
        % else:
            <th style="text-align:center;">L'historique des interventions</th>
        % endif
    </tr>
% if len(ListEvent)==0:
    <tr>
        <td style="text-align:center;" colspan="2">
            % if NotFoundTitle:
                <i>${NotFoundTitle}</i>
            % else:
                <i>Désolé, Il n'y a rien dans l'historique.</i>
            % endif
        </td>
    </tr>
% else:
    % for event in ListEvent:
    <tr>
        <td style="text-align:center;">
            <% 
                start = event.start_time.time()
                end = event.end_time.time()
                vid = event.video.first()
                pres = event.presentation.first()
            %>  
                ${event.start_time.strftime('%d %b %Y').decode('utf-8')}
                ${start.hour}:${"%.2d" % start.minute}-${end.hour}:${"%.2d" % end.minute}                 
        </td>
        <td style="position: relative;">${event.event_type}:
            <strong>
                <a href="/event/${event.for_year}/${event.slug}">${event.name}</a>            
            </strong>
                <span style="float:right;">
                    % if vid:
                    <a href="${vid.get_path}">
                        <i class="icon-film"></i>
                    </a>
                    % endif
                    % if pres:
                    <a href="${pres.get_path}"> 
                        <i class="icon-list-alt"></i>
                    </a>
                    % endif
                </span>
                    % if event.Salle:
                    <div style="position: absolute; bottom: 2px; right: 5px;">
                        ${event.Salle.name}
                    </div>
                    % endif
            <br/>
            % if event.intervenants.count()>1:
                avec
                % for num, inter in enumerate(event.intervenants.all()):
                    <%
                    if inter==uprofil:
                        continue
                    %>
                    <a href="/user/${inter.slug}">${inter.prenom} ${inter.nom}</a>,
                % endfor
            % endif
        </td>
    </tr>
    % endfor
% endif
</table>
</%def>
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##           Wrapper pour les badges des entités utilisateur 
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="show_SummaryEntities(ListEntities)"> \
<ul class="thumbnails">
% for tiers in ListEntities:
    <% Entity = tiers.get_entity_type %>
    <li class="span3 tiers">
        <div class="media">
            <a class="pull-left" href="/entity/${Entity.entity_type}/${tiers.slug}">
                % if tiers.ThumbLinks:
                    <img class="media-object" src="${tiers.ThumbLinks.pop()}" />
                % else:
                    <img class="media-object" src="/img/no-image-thumb.jpg"  />
                % endif
            </a>
            <div class="media-body">
            %if Entity.entity_subtype!=Entity.entity_type:
                <h5 style="margin:0">${Entity.entity_type} ${Entity.entity_subtype}</h5>
            %else:
                <h5 style="margin:0">${Entity.entity_type}</h5>
            %endif
            <a href="/entity/${Entity.entity_type}/${tiers.slug}">
                <h4 class="media-heading">${tiers.name}</h4>
            </a>
                % if Entity.entity_role:
                    <span><i>${Entity.entity_role}</i></span>
                % endif
            </div>
        </div>
    </li>
% endfor
</ul>
</%def>
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##                  Wrapper pour les photos
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="show_my_pictures(uprofil)"> \
    <div class="profile-icon" style="float:right;height:250px;width:250px;">
        <% photos = uprofil.PhotosLinks %>
            <div style="text-align: center;line-height:20px;">
                <a data-target="#AjaxModal" Myhref="/2015/modal/Password/1" role="button" handle="modal">Changer mon mot de passe</a>
            </div>
            <div style="text-align: center;line-height:20px;">
                <a data-target="#AjaxModal" Myhref="/2015/modal/UserPicture/${uprofil.uid}" handle="modal">Changer ma photo</a>
            </div>
        <div id="MyPictureCarousel" class="carousel slide">
            % if len(photos)>1:
            <!-- Carousel nav -->
            <a class="Ucarousel-control left" href="#MyPictureCarousel" data-slide="prev">&lsaquo;</a>
            <a class="Ucarousel-control right" href="#MyPictureCarousel" data-slide="next">&rsaquo;</a>
            % endif
            <!-- Carousel items -->
            <div class="carousel-inner" style="height: 220px;">
            % if len(photos):
                % for num, link in enumerate(photos):
                <div class="${['','active '][num==0]}item" id="UserPic${num}">
                    <div style="margin:auto;">
                        <img src="${link}" class="img-polaroid" style="max-height:205px;max-width:235px;" alt="Photo ${uprofil.slug}" />
                    </div>
                </div>
                % endfor
            % else:
                <div class="active item" id="UserPic0">
                    <div style="margin:auto;width:170px;">
                        <img src="/img/default-user.png" class="img-polaroid" alt="Photo ${uprofil.slug}" style="max-height:205px;"  />
                    </div>
                </div>
            % endif
            </div>
        </div>
    </div>
</%def> \
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="show_pictures(uprofil)"> \
<div class="profile-icon pull-right">
    <% photos = uprofil.PhotosLinks %>
    <div id="MyPictureCarousel" class="carousel slide">
        % if len(photos)>1:
        <!-- Carousel nav -->
        <a class="Ucarousel-control left" href="#MyPictureCarousel" data-slide="prev">&lsaquo;</a>
        <a class="Ucarousel-control right" href="#MyPictureCarousel" data-slide="next">&rsaquo;</a>
        % endif
        <!-- Carousel items -->
        <div class="carousel-inner" style="height: 220px;">
        % if len(photos):
            % for num, link in enumerate(photos):
            <div class="${['','active '][num==0]}item" id="UserPic${num}">
                <div style="margin:auto;">
                    <img src="${link}" class="img-polaroid" style="max-height:205px;max-width:235px;" alt="Photo ${uprofil.nom} ${uprofil.prenom}" />
                </div>
            </div>
            % endfor
        % else:
            <div class="active item" id="UserPic0">
                <div style="margin:auto;width:170px;">
                    <img src="/img/default-user.png" class="img-polaroid" alt="Photo ${uprofil.nom} ${uprofil.prenom}" style="max-height:205px;"  />
                </div>
            </div>
        % endif
        </div>
    </div>
</div>
</%def> \
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##          Wrapper pour les échanges utilisateurs
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="show_exchange(Exchange, Asker, Provider)"> \
    <div class="media">
        % if Asker:    
        <a class="pull-left" href="/user/${Asker.slug}">
            % if Asker.PhotosThumb:        
            <img class="media-object" 
                src="${Asker.PhotosThumb.pop()}"
                alt="${Asker.prenom} ${Asker.nom}"/>
            % else:
            <img class="media-object" 
                src="/img/no-image-thumb.jpg"
                alt="${Asker.prenom} ${Asker.nom}"/>
            % endif
        </a>
        % else:
        <a class="pull-left" href="#">
            <img class="media-object" src="/img/personne.jpg" alt="Personne"/>        
        </a>                
        % endif
        % if Provider:           
        <a class="pull-right" href="/user/${Provider.slug}">
            % if Provider.PhotosThumb:
            <img class="media-object" 
                src="${Provider.PhotosThumb.pop()}"
                alt="${Provider.prenom} ${Provider.nom}"/>
            % else:
            <img class="media-object" 
                src="/img/no-image-thumb.jpg"
                alt="${Provider.prenom} ${Provider.nom}"/>
            % endif
        </a>
        % else:
        <a class="pull-right" href="#">
            <img class="media-object" src="/img/personne.jpg" alt="Personne"/>        
        </a>                
        %endif
        <div class="media-body">
          <table style="width:100%">
            <tr>
                <td style="text-align:left;vertical-align:middle;width:40%">
                    % if Asker:
                    Demande de<br>
                    <a href="/user/${Asker.slug}">${Asker.prenom} ${Asker.nom}</a>
                    % else:
                        <i>Pas de réponse</i>
                    % endif
                </td>
                <td>
                    % if Exchange.exch_done:
                        <img class="media-object" src="/img/echange.png" alt="Echange"/>
                    % elif Exchange.exch_state=='Ask':
                        <img class="media-object" src="/img/asker.png" alt="Cherche"/>
                    % elif Exchange.exch_state=='Proposal':
                        <img class="media-object" src="/img/provider.png" alt="Propose"/>
                    % endif
                </td>
                <td style="text-align:right;vertical-align:middle;width:40%">
                    %if Provider:
                    Proposition de<br>
                    <a href="/user/${Provider.slug}">${Provider.prenom} ${Provider.nom}</a>
                    % else:
                        <i>Pas de réponse</i>
                    % endif
                </td>
            </tr>
          </table>
        </div>
    </div>
</%def> \
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##          Wrapper pour les addresses pour les utilisateurs
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="show_address(Place)"> \
<address>
    <strong>${Place.display_name}</strong> ( ${Place.place_type} )<br>
    ${Place.name}<br>
    % if Place.specific:
        ${Place.specific}<br>
    % endif
    ${Place.adresse}<br>
    ${Place.codePostal} ${Place.ville}<br>
</address>    
</%def> \
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
##          Wrapper pour la description des places
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="show_desc(Place)"> \
    % if Place.description:
        ${Place.description | n}
    % endif
</%def> \