107 lines
3.7 KiB
HTML
107 lines
3.7 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>
|
||
|
||
<!-- Partage de la photo -->
|
||
<h2>Partagée avec :</h2>
|
||
<ul>
|
||
<li th:each="p : ${partages}">
|
||
<span th:text="${p.utilisateur.email}"></span>
|
||
<span> - <b th:text="${p.permission}"></b></span>
|
||
<!-- ADMIN OU PROPRIÉTAIRE : peut retirer -->
|
||
<a th:if="${canAdmin}"
|
||
th:href="@{'/photo/' + ${photo.id} + '/unshare/' + ${p.utilisateur.email}}"
|
||
style="color:red; margin-left:10px;">Retirer</a>
|
||
</li>
|
||
</ul>
|
||
|
||
<!-- Formulaire d’ajout visible uniquement en ADMIN ou PROPRIÉTAIRE -->
|
||
<div th:if="${canAdmin}">
|
||
<h3>Partager la photo</h3>
|
||
<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>
|