jm2l/jm2l/templates/modals.mako

<%namespace name="Dialog" file="jm2l:templates/Logistique/Dialog.mako"/> \
<%namespace name="helpers" file="jm2l:templates/helpers.mako"/>
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="ModalAddPlace(form, update)">
<div>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    % if update:
        <h3>Mettre à jour un lieu</h3>  
    % else:
        <h3>Ajouter un lieu</h3>    
    % endif
    </div>
    <div class="modal-body">
  <div class="tabbable" id="place_tab">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#Place_Address" id="Map_Address" data-toggle="tab">Adresse</a></li>
        <li><a href="#Place_Info" id="Map_Info" data-toggle="tab">Informations</a></li>
        % if update:
        <li><a href="#Place_Photo" id="Map_Photo" data-toggle="tab">Photographies</a></li>
        % endif        
        <li><a href="#Place_Plan" id="Map_Plan" data-toggle="tab">Plan</a></li>
    </ul>
    ${form.csrf_token}
    <div class="tab-content">
        <div class="tab-pane fade active in" id="Place_Address">
        % if update:
          <form id="ModalPlaceForm" action="javascript:DoPostLieu('/2015/modal/Place/${form.place_id.data}');" style='margin:0;'>
            ${form.place_id()}
            ${form.csrf_token}            
        % else:
          <form id="ModalPlaceForm" action="javascript:DoPostLieu('/2015/modal/Place/0');" style='margin:0;'>
            ${form.csrf_token}          
        % endif
            
            <div style="float:left;padding-right:5px;">
                % for error in form.place_type.errors:
                    <div class="error">${ error }</div>
                % endfor
                <label>${form.place_type.label}</label>${form.place_type(style='width:8em')}</div>
                        
            <div style="float:left;padding-right:5px;">
                % for error in form.display_name.errors:
                    <div class="error">${ error }</div>
                % endfor
                <label>${form.display_name.label}</label>${form.display_name(style='width:10em')}</div>
        
            <div>
                % for error in form.name.errors:
                    <div class="error">${ error }</div>
                % endfor
            <label>${form.name.label}</label>${form.name(style='width:16em')}</div>

            <div>
            % for error in form.adresse.errors:
                <div class="error">${ error }</div>
            % endfor
            <label>${form.adresse.label}</label>${form.adresse(style='width:95%;height:3em;')}</div>

       
            <div style="float:left;padding-right:5px;">
                % for error in form.codePostal.errors:
                    <div class="error">${ error }</div>
                % endfor
            <label>${form.codePostal.label}</label>${form.codePostal(style='width:5em')}</div>
            
            <div style="float:left;padding-right:5px;">
            % for error in form.ville.errors:
                <div class="error">${ error }</div>
            % endfor
            <label>${form.ville.label}</label>${form.ville(style='width:12em')}</div>

            <div>
                % for error in form.gps_coord.errors:
                    <div class="error">${ error }</div>
                % endfor
            <label>${form.gps_coord.label}</label>${form.gps_coord(style='width:12em')}</div>
          </form>            
        </div>
        <div class="tab-pane fade in" id="Place_Info">
        
            <div>
            % for error in form.website.errors:
                <div class="error">${ error }</div>
            % endfor
            <label>${form.website.label}</label>${form.website(style='width:95%;')}</div>

            <div>
            % for error in form.description.errors:
                <div class="error">${ error }</div>
            % endfor
            <label>${form.description.label}</label>${form.description(style='width:95%;height:10em;')}</div>
        </div>

        <div class="tab-pane fade in" id="Place_Plan">
        %if form.gps_coord.data:
            <div id="map"></div>
            <script type="text/javascript">
                var map = L.map('map');
                // create the tile layer with correct attribution
                var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
                var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
                var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 18, attribution: osmAttrib});
                // start the map on specified GPS Coords
                map.setView(new L.LatLng(${form.gps_coord.data}),15);
                marker = L.marker([${form.gps_coord.data}]).addTo(map);
                map.addLayer(osm);
            </script>
        %else:
            <div class="alert">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                <strong>Non disponible!</strong> Vous devez d'abord compléter le champs GPS pour activer cette fonctionalité.
            </div>
        %endif
        
        
        </div>            
        % if update:
        <div class="tab-pane fade in" id="Place_Photo">
            ${helpers.uploader("place", form.place_id.data, "une Photo")}
            <div style="clear:both"></div>
        </div>
        % endif
                
    </div>

  </div>    
    ${helpers.uploader_js()}
    <script>
        $("#place_type").select2({});
    </script>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
        ##<button class="btn btn-warning" data-loading-text="Suppression...">Supprimer l'image</button>
        <button class="btn btn-primary" onclick="javascript:document.forms['ModalPlaceForm'].submit();">Enregistrer les modifications</button>
    </div>
</div>
</%def> \
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="ModalPictureChange(uid, DisplayYear, session)">
<div>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalPictureChangeLabel">Mon portrait</h3>
    </div>
    <div class="modal-body">
        <div>
            <i class="icon-question-sign"></i>
            Les images de taille supérieure à 300x300 pixels seront redimensionnés.
        </div>    
        ${helpers.uploader("users", uid, "une Photo")}
        ${helpers.uploader_js()}
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
        <button class="btn btn-primary">Enregistrer les modifications</button>
    </div>
</div>
</%def> \
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%def name="ModalPassword(uid, DisplayYear, session)"> \
<div>
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3>Changer mon mot de passe</h3>
    </div>
    <div class="modal-body">

        <div class="description">Pour modifier le mot de passe actuel, 
            entrez un nouveau mot de passe dans chacune des deux zones de texte.
        </div>

        <div class="password-strength" style="float:right;">
            <div class="password-strength-text" aria-live="assertive">Faible</div>
            <div class="password-strength-title">Sécurité du mot de passe&nbsp;:</div>
            <div class="password-indicator">
                <div style="width: 0%;" class="indicator"></div>
            </div>
        </div>
            
        <div class="form-item form-type-password-confirm form-item-pass">
            <label for="edit-pass-pass1">Mot de passe </label>
            <input  
            id="edit-pass-pass1" name="pass" size="25" maxlength="128" type="password">
        </div>

        <div class="form-item form-type-password form-item-pass-pass2 confirm-parent">
                <div style="visibility: hidden;" class="password-confirm">
                    Concordance des mots de passe&nbsp;: <span></span>
                </div>
            <label for="edit-pass-pass2">Confirmer le mot de passe </label>
            <input class="password-confirm form-text" 
            id="edit-pass-pass2" name="pass2" size="25" maxlength="128" type="password">
        </div>

        <div id="pswd_info" style="display: block;">
            Pour renforcer la sécurité de votre mot de passe :
            <ul>
                <li id="length" class="invalid">Saisissez au moins 6 caractères</li>
                <li id="ltrMin" class="invalid">Ajoutez des lettres minuscules</li>
                <li id="ltrMaj" class="invalid">Ajoutez des lettres majuscules</li>
                <li id="number" class="invalid">Ajoutez des chiffres</li>
                <li id="ponctu" class="invalid">Ajoutez des caractères de ponctuation</li>
            </ul>
        </div>
        <script>
            $('input[type=password]').keyup(function() {
                // set password variable
                var pswd = $(this).val();
                if ( pswd.length < 6 ) {
                    $('#length').removeClass('valid').addClass('invalid');
                } else {
                    $('#length').removeClass('invalid').addClass('valid');
                }
                //validate min letter
                if ( pswd.match(/[a-z]/) ) {
                    $('#ltrMin').removeClass('invalid').addClass('valid');
                } else {
                    $('#ltrMin').removeClass('valid').addClass('invalid');
                }

                //validate capital letter
                if ( pswd.match(/[A-Z]/) ) {
                    $('#ltrMaj').removeClass('invalid').addClass('valid');
                } else {
                    $('#ltrMaj').removeClass('valid').addClass('invalid');
                }

                //validate number
                if ( pswd.match(/\d/) ) {
                    $('#number').removeClass('invalid').addClass('valid');
                } else {
                    $('#number').removeClass('valid').addClass('invalid');
                }
                
                //validate Ponct
                var patren=/^[A-Za-z0-9\s]+$/;
                if ( !(patren.test(pswd)) && pswd.length>0 ) {
                    $('#ponctu').removeClass('invalid').addClass('valid');
                } else {
                    $('#ponctu').removeClass('valid').addClass('invalid');
                }                
            });
        </script>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Annuler</button>
        <button class="btn btn-primary">Changer</button>
    </div>
</div>    
</%def> \
## -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
<%
context._kwargs['postpone_js']=[]
%>
%if modtype=='Password':
    ${ModalPassword(uid, DisplayYear, session)}
%elif modtype=='Place':
    ${ModalAddPlace(form, update)}
%elif modtype=='UserPicture':
    ${ModalPictureChange(uid, DisplayYear, session)}
%elif modtype=='PropH':
    ${Dialog.AddProposal('H', form)}
%elif modtype=='AskH':
    ${Dialog.AddAsk('H', form)}
%elif modtype=='PropC':
    ${Dialog.AddProposal('C', form)}
%elif modtype=='AskC':
    ${Dialog.AddAsk('C', form)}
%elif modtype=='PropM':
    ${Dialog.AddProposal('M', form)}
%elif modtype=='AskM':
    ${Dialog.AddAsk('M', form)}
%elif modtype=='ShowC':
    ${Dialog.Show('C',Exch)}
%elif modtype=='ShowM':
    ${Dialog.Show('M',Exch)}
%elif modtype=='ShowH':
    ${Dialog.Show('H',Exch)}
%endif
## Then Handle Javascript
<script>
% for jsitem in context._kwargs['postpone_js']:
${jsitem | n}
% endfor
</script>