Files
dumas_gestion/mondumas/templates/dossier/upload_img.pt

109 lines
4.0 KiB
XML

<metal:block use-macro="main_template">
<div metal:fill-slot="content">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<span class="glyphicon glyphicon-plus"></span>&nbsp;AJOUTER UNE PHOTO
</h4>
</div>
<div class="panel-body">
<div class="col-sm-6">
<form id="upload_doc-form" action="${url}" method="post" accept-charset="utf-8" enctype="multipart/form-data"
data-fv-framework="bootstrap"
data-fv-icon-valid="glyphicon glyphicon-ok"
data-fv-icon-invalid="glyphicon glyphicon-remove"
data-fv-icon-validating="glyphicon glyphicon-refresh">
<div class="form-group">
<label for="uploadfile">Veuillez séléctionner un ou plusieurs fichiers</label>
<span class="btn btn-default btn-file">
<input class="file" id="uploadfile" name="files" type="file" required multiple />
</span>
</div>
<div class="form-group">
<a class="btn btn-default" href="${url_retour}">
<span class="glyphicon glyphicon-arrow-left"></span> Retour</a>
<button id="uploadButton" class="btn btn-primary" type="submit" name="form.submitted">
<i class="glyphicon glyphicon-refresh"></i> Télécharger</button>
</div>
</form>
</div>
<div class="col-sm-6 well well-sm">
<ul>
<li>Seuls les documents au format <b>PNG, JPG ou JPEG</b> seront acceptés.</li>
<li>La taille de chaque document ne doit <b>pas dépasser 4 Mo</b>.</li>
</ul>
</div> <!-- row -->
</div>
<div class="panel-heading">
<h4 class="panel-title">
<span class="glyphicon glyphicon-arrow-up"></span>&nbsp;PHOTOS DEJA TELECHARGES&nbsp;-&nbsp;Taille totale : ${total_size}
</h4>
</div>
<div class="panel-body">
<table class="table table-condensed" width="100%" tal:condition="photos">
<tr tal:repeat="detail photos">
<td width="400" align="center">
<img tal:condition="norapport=='0'" width="350"
src="${docs_url}${detail.nomrep}/${detail.societe}/${nochantier}/${detail.nomfichier}" />
<img tal:condition="norapport!='0'" width="350"
src="${docs_url}${detail.nomrep}/${detail.societe}/${nochantier}/${norapport}/${detail.nomfichier}" />
</td>
<td>
<p>
${detail.nomfichier}<br />
Taille : ${detail.taillefichier}
</p>
<p>
<a class="btn btn-danger" href="#" data-href="/delete_img/${nodossier}/${norapport}/${origine}/${detail.nomfichier}"
data-toggle="modal" data-target="#confirm-delete">
<span class="glyphicon glyphicon-trash"></span> Suppimer</a>
</p>
<p>
<a class="btn btn-primary" href="/rotate_img/${nodossier}/${norapport}/${origine}/${detail.nomfichier}/+90">
<span class="glyphicon glyphicon-object-align-bottom"></span> Pivoter +90°</a>
</p>
<p>
<a class="btn btn-primary" href="/rotate_img/${nodossier}/${norapport}/${origine}/${detail.nomfichier}/-90">
<span class="glyphicon glyphicon-object-align-left"></span> Pivoter -90°</a>
</p>
</td>
</tr>
</table>
</div>
</div>
<!-- Modal : Confirmation suppression -->
<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Suppression de la photo</h4>
</div>
<div class="modal-body">
<p class="text-center"><b>Voulez-vous supprimer cette photo ?</b></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Annuler</button>
<a class="btn btn-danger btn-ok">Supprimer</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#uploadButton').on('click', function(){
$('i.gly-spin').removeClass('gly-spin');
$('i').addClass('gly-spin');
});
$('#confirm-delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});
</script>
</div>
</metal:block>