131 lines
5.0 KiB
HTML
131 lines
5.0 KiB
HTML
<!doctype html>
|
||
<html xmlns:th="http://www.thymeleaf.org">
|
||
<head>
|
||
<meta charset="utf-8"/>
|
||
<title>Détail de la photo</title>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>Détail de la photo</h1>
|
||
|
||
<p>
|
||
<a th:href="@{/}">Accueil</a> |
|
||
<a th:href="@{/galerie}">Galerie publique</a> |
|
||
<a th:href="@{/mes-photos}">Mes photos</a>
|
||
</p>
|
||
|
||
<!-- Affichage de la photo -->
|
||
<div>
|
||
<img th:src="@{'/photo/' + ${photo.id} + '/raw'}"
|
||
alt="Photo"
|
||
style="max-width:500px; border:1px solid #ccc; margin:20px 0;"/>
|
||
</div>
|
||
|
||
<!-- Infos -->
|
||
<ul>
|
||
<li><strong>Votre rôle :</strong><span th:text="${photo.proprietaire.email == currentUser ? 'Propriétaire' : (canAdmin ? 'Admin' : (canComment ? 'Commentateur' : 'Lecteur'))}"></span></li>
|
||
<li><strong>Nom original :</strong> <span th:text="${photo.nomFichierOriginal}"></span></li>
|
||
<li><strong>Date upload :</strong> <span th:text="${photo.dateUpload}"></span></li>
|
||
<li><strong>Visibilité :</strong> <span th:text="${photo.visibilite}"></span></li>
|
||
<li><strong>Propriétaire :</strong> <span th:text="${photo.proprietaire.email}"></span></li>
|
||
</ul>
|
||
<!-- Suppression de la photo par le propriétaire -->
|
||
<div th:if="${isOwner}">
|
||
<form th:action="@{'/photo/' + ${photo.id} + '/delete'}" method="post"
|
||
onsubmit="return confirm('Supprimer définitivement cette photo ?');">
|
||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
|
||
<button type="submit" style="color:red; margin-bottom:20px;">
|
||
Supprimer la photo
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
|
||
<!-- Partage de la photo -->
|
||
<!-- Formulaire gestion visible uniquement en ADMIN ou PROPRIÉTAIRE -->
|
||
<div th:if="${canAdmin}">
|
||
<h2>Partagée avec :</h2>
|
||
<ul>
|
||
<li th:each="p : ${partages}">
|
||
<span th:text="${p.utilisateur.email}"></span>
|
||
<!-- Formulaire modification permission -->
|
||
<form th:action="@{'/photo/' + ${photo.id} + '/share/update'}" method="post" style="display:inline;">
|
||
<input type="hidden" name="email" th:value="${p.utilisateur.email}" />
|
||
<select name="permission">
|
||
<option value="READ" th:selected="${p.permission == 'READ'}">Lecture</option>
|
||
<option value="COMMENT" th:selected="${p.permission == 'COMMENT'}">Commentaire</option>
|
||
<option value="ADMIN" th:selected="${p.permission == 'ADMIN'}">Administration</option>
|
||
</select>
|
||
<button type="submit">Modifier</button>
|
||
</form>
|
||
<!-- Unshare -->
|
||
<a th:href="@{'/photo/' + ${photo.id} + '/unshare/' + ${p.utilisateur.email}}"
|
||
style="color:red; margin-left:10px;">Retirer</a>
|
||
</li>
|
||
</ul>
|
||
<h3>Partager la photo</h3>
|
||
<div th:if="${param.error}" style="color:red; font-weight:bold;">
|
||
<span th:text="${param.error}"></span>
|
||
</div>
|
||
<div th:if="${param.shared}" style="color:green; font-weight:bold;">
|
||
Partage effectué avec succès !
|
||
</div>
|
||
<form th:action="@{'/photo/' + ${photo.id} + '/share'}" method="post">
|
||
<label>Email de l'utilisateur :</label>
|
||
<input type="email" name="email" required />
|
||
<label>Permission :</label>
|
||
<select name="permission">
|
||
<option value="READ">Lecture seule</option>
|
||
<option value="COMMENT">Commentaire autorisé</option>
|
||
<option value="ADMIN">Administrateur</option>
|
||
</select>
|
||
<button type="submit">Partager</button>
|
||
</form>
|
||
</div>
|
||
<div th:if="${!canAdmin}">
|
||
<em>Vous n’avez pas les droits de gestion du partage.</em>
|
||
</div>
|
||
|
||
|
||
|
||
<!-- Commentaires -->
|
||
<h2>Commentaires</h2>
|
||
<div th:each="c : ${commentairesPage.content}">
|
||
<p>
|
||
<b th:text="${c.auteur.email}"></b>
|
||
<span th:text="${c.contenu}"></span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<a th:if="${commentairesPage.hasPrevious()}"
|
||
th:href="@{/photo/{id}(id=${photo.id}, page=${currentPage - 1})}">⬅</a>
|
||
<span th:text="'Page ' + (${currentPage}+1)"></span>
|
||
<a th:if="${commentairesPage.hasNext()}"
|
||
th:href="@{/photo/{id}(id=${photo.id}, page=${currentPage + 1})}">➡</a>
|
||
</div>
|
||
|
||
<!-- Formulaire d'ajout de commentaire -->
|
||
<!-- Si pas connecté -->
|
||
<div th:if="${currentUser == null}">
|
||
<p><a th:href="@{/login}">Connectez-vous</a> pour commenter.</p>
|
||
</div>
|
||
<!-- Si connecté mais pas autorisé -->
|
||
<div th:if="${currentUser != null and !canComment}">
|
||
<em>Vous pouvez consulter cette photo, mais pas commenter.</em>
|
||
</div>
|
||
<!-- Si COMMENT ou ADMIN ou PROPRIÉTAIRE -->
|
||
<div th:if="${canComment}">
|
||
<h3>Ajouter un commentaire</h3>
|
||
<form th:action="@{'/photo/' + ${photo.id} + '/comment'}" method="post">
|
||
<textarea name="contenu" rows="3" cols="50" required></textarea><br/>
|
||
<button type="submit">Envoyer</button>
|
||
</form>
|
||
</div>
|
||
|
||
<p>
|
||
<a th:href="@{'/photo/' + ${photo.id} + '/raw'}" target="_blank">Voir en grande taille</a>
|
||
</p>
|
||
|
||
</body>
|
||
</html>
|