FEAT : Ajout du mécanisme d'album avec partage et visibilité
This commit is contained in:
101
target/classes/templates/album-detail.html
Normal file
101
target/classes/templates/album-detail.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Détail album</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<a th:href="@{/mes-albums}">⬅ Retour aux albums</a>
|
||||
<h1 th:text="${album.nom}"></h1>
|
||||
<p><b>Description :</b> <span th:text="${album.description}"></span></p>
|
||||
<p><b>Propriétaire :</b> <span th:text="${album.proprietaire.email}"></span></p>
|
||||
<p><b>Visibilité :</b> <span th:text="${album.visibilite}"></span></p>
|
||||
<hr/>
|
||||
<!-- LISTE DES PHOTOS -->
|
||||
<h2>Photos dans l’album</h2>
|
||||
<div th:each="p : ${album.photos}" style="display:inline-block; margin:10px;">
|
||||
<a th:href="@{'/photo/' + ${p.id}}">
|
||||
<img th:src="@{'/photo/' + ${p.id} + '/raw'}" width="120"/>
|
||||
</a>
|
||||
<br/>
|
||||
<a th:if="${canAdmin}" th:href="@{'/album/' + ${album.id} + '/remove/' + ${p.id}}"
|
||||
style="color:red;">Retirer</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Bloc visible uniquement par le propriétaire ou ADMIN album -->
|
||||
<div th:if="${canAdmin}">
|
||||
|
||||
<hr/>
|
||||
<!-- AJOUT PHOTO -->
|
||||
<h2>Ajouter une photo</h2>
|
||||
<div th:if="${param.added}" style="color:green; font-weight:bold;">
|
||||
Photo ajoutée !
|
||||
</div>
|
||||
<form th:action="@{'/album/' + ${album.id} + '/add'}" method="post">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
|
||||
<select name="photoId">
|
||||
<option th:each="p : ${myPhotos}"
|
||||
th:value="${p.id}"
|
||||
th:text="${p.nomFichierOriginal}">
|
||||
</option>
|
||||
</select>
|
||||
<button type="submit">Ajouter</button>
|
||||
</form>
|
||||
<hr/>
|
||||
<h3>Gestion des partages de l’album</h3>
|
||||
<div th:if="${param.error}" style="color:red; font-weight:bold;">
|
||||
<span th:text="${param.error}"></span>
|
||||
</div>
|
||||
<!-- FORMULAIRE AJOUT PARTAGE -->
|
||||
<form th:action="@{'/album/' + ${album.id} + '/share'}" method="post">
|
||||
<label>Email du destinataire :</label>
|
||||
<input type="email" name="email" required>
|
||||
<label>Permission :</label>
|
||||
<select name="permission">
|
||||
<option value="READ">Lecture</option>
|
||||
<option value="COMMENT">Commentaire</option>
|
||||
<option value="ADMIN">Admin</option>
|
||||
</select>
|
||||
<button type="submit">Partager</button>
|
||||
</form>
|
||||
<h4>Utilisateurs ayant accès :</h4>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Utilisateur</th>
|
||||
<th>Permission</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
<tr th:each="p : ${partages}">
|
||||
<td th:text="${p.utilisateur.email}"></td>
|
||||
<!-- FORMULAIRE UPDATE PERMISSION -->
|
||||
<td>
|
||||
<form th:action="@{'/album/' + ${album.id} + '/share/update'}" method="post">
|
||||
<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'}">Admin</option>
|
||||
</select>
|
||||
<button type="submit">Modifier</button>
|
||||
</form>
|
||||
</td>
|
||||
<td>
|
||||
<a th:href="@{'/album/' + ${album.id} + '/unshare/' + ${p.utilisateur.email}}">Retirer</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<hr>
|
||||
<!-- SUPPRESSION ALBUM -->
|
||||
<a th:href="@{'/album/' + ${album.id} + '/delete'}" style="color:red;">
|
||||
Supprimer l’album
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -7,6 +7,7 @@
|
||||
<h1>Bienvenue sur FotoSharing<span th:if="${prenom}" th:text="' : ' + ${prenom}"></span></h1>
|
||||
<p><a th:href="@{/upload}">Uploader une photo</a></p>
|
||||
<p><a th:href="@{/mes-photos}">Voir mes photos</a></p>
|
||||
<p><a th:href="@{/mes-albums}">Voir mes albums</a></p>
|
||||
<p><a th:href="@{/galerie}">Voir la galerie publique</a></p>
|
||||
<p>
|
||||
<form th:action="@{/logout}" method="post" style="display: inline;">
|
||||
|
||||
70
target/classes/templates/mes-albums.html
Normal file
70
target/classes/templates/mes-albums.html
Normal file
@@ -0,0 +1,70 @@
|
||||
<!doctype html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<title>Mes albums</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>Mes albums</h1>
|
||||
|
||||
<!-- FORMULAIRE AJOUT ALBUM -->
|
||||
<h3>Créer un album</h3>
|
||||
<form th:action="@{/albums/create}" method="post">
|
||||
<input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
|
||||
<label>Nom :</label>
|
||||
<input type="text" name="nom" required><br/>
|
||||
<label>Description :</label>
|
||||
<input type="text" name="description"><br/>
|
||||
<label>Visibilité :</label>
|
||||
<select name="visibilite">
|
||||
<option value="PRIVATE">Privé</option>
|
||||
<option value="SHARED">Partagé</option>
|
||||
<option value="PUBLIC">Public</option>
|
||||
</select>
|
||||
<button type="submit">Créer</button>
|
||||
</form>
|
||||
<hr/>
|
||||
|
||||
<!-- LISTE ALBUMS -->
|
||||
<h2>Liste de mes albums</h2>
|
||||
<div th:each="album : ${albums.content}" style="margin:10px 0;">
|
||||
<a th:href="@{'/album/' + ${album.id}}">
|
||||
<b th:text="${album.nom}"></b>
|
||||
</a>
|
||||
<span th:text="'(' + ${album.visibilite} + ')'"></span>
|
||||
<p th:text="${album.description}"></p>
|
||||
</div>
|
||||
|
||||
<!-- PAGINATION -->
|
||||
<div>
|
||||
<a th:if="${albums.hasPrevious()}"
|
||||
th:href="@{/mes-albums(page=${currentPage - 1})}">⬅</a>
|
||||
<span th:text="${currentPage + 1}"></span>
|
||||
<a th:if="${albums.hasNext()}"
|
||||
th:href="@{/mes-albums(page=${currentPage + 1})}">➡</a>
|
||||
</div>
|
||||
|
||||
<hr/>
|
||||
|
||||
<h2>Albums partagés avec moi</h2>
|
||||
<div th:if="${sharedAlbums.isEmpty()}">
|
||||
<p>Aucun album ne vous a été partagé.</p>
|
||||
</div>
|
||||
<div th:unless="${sharedAlbums.isEmpty()}">
|
||||
<div class="album-list">
|
||||
<div th:each="album : ${sharedAlbums}" class="album-item">
|
||||
<a th:href="@{'/album/' + ${album.id}}">
|
||||
<strong th:text="${album.nom}"></strong>
|
||||
</a>
|
||||
<p>
|
||||
Partagé par :
|
||||
<span th:text="${album.proprietaire.email}"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -10,7 +10,7 @@
|
||||
<p><a th:href="@{/}">Retour accueil</a></p>
|
||||
<h2>Mes photos privées</h2>
|
||||
<div>
|
||||
<a th:each="p : ${photosPrivees.content}"
|
||||
<a th:each="p : ${photosPrivees.content}" th:if="${p != null}"
|
||||
th:href="@{'/photo/' + ${p.id}}">
|
||||
<img th:src="@{'/photo/' + ${p.id} + '/raw'}" width="120"/>
|
||||
</a>
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
<h2>Mes photos publiques</h2>
|
||||
<div>
|
||||
<a th:each="p : ${photosPubliques.content}"
|
||||
<a th:each="p : ${photosPubliques.content}" th:if="${p != null}"
|
||||
th:href="@{'/photo/' + ${p.id}}">
|
||||
<img th:src="@{'/photo/' + ${p.id} + '/raw'}" width="120"/>
|
||||
</a>
|
||||
@@ -42,8 +42,8 @@
|
||||
|
||||
<h2>Mes photos partagées</h2>
|
||||
<div style="display:flex; gap:20px; flex-wrap:wrap;">
|
||||
<div th:each="p : ${mesPhotosPartagees.content}">
|
||||
<a th:href="@{'/photo/' + ${p.id}}">
|
||||
<div th:each="p : ${mesPhotosPartagees.content}" th:if="${p != null}">
|
||||
<a th:href="@{'/photo/' + ${p.id}}">
|
||||
<img th:src="@{'/photo/' + ${p.id} + '/raw'}" width="120"
|
||||
style="display:block; border:1px solid #ccc;"/>
|
||||
</a>
|
||||
@@ -76,6 +76,7 @@
|
||||
<h2>Photos partagées avec moi</h2>
|
||||
<div>
|
||||
<a th:each="p : ${photosPartagees.content}"
|
||||
th:if="${p != null}"
|
||||
th:href="@{'/photo/' + ${p.id}}">
|
||||
<img th:src="@{'/photo/' + ${p.id} + '/raw'}" width="120"/>
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user