fil.jsp 7.23 KiB
<%@ page language="java" contentType="text/html; ch</div>arset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="modele.FilDeDiscussion" %>
<%@ page import="modele.FilDeDiscussionDAO" %>
<%@ page import="modele.Message" %>
<%@ page import="modele.MessageDao" %>
<%@ page import="java.util.List" %>
<%@ page import="java.time.LocalDateTime" %>
<%@ page import="java.time.format.DateTimeFormatter" %>
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CampusTalk - Fil de Discussion</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link rel="shortcut icon" href="https://www.shareicon.net/data/2016/07/10/119195_chat_512x512.png">
<style>
body {
background-color: #f8f9fa;
color: #212529;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.navbar {
background-color: #ffffff;
border-bottom: 1px solid #e0e0e0;
}
.navbar-brand, .nav-link {
color: #212529 !important;
}
.thread-container {
max-width: 800px;
margin: 50px auto;
padding: 20px;
background-color: #ffffff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.thread-container h2 {
margin-bottom: 20px;
font-weight: bold;
color: #212529;
}
.messages-box {
max-height: 400px;
overflow-y: auto;
padding-right: 15px;
}
.message-item {
display: flex;
align-items: flex-start;
padding: 10px 0;
border-bottom: 1px solid #e0e0e0;
}
.message-item:last-child {
border-bottom: none;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.message-content {
background-color: #f1f1f1;
padding: 10px;
border-radius: 10px;
max-width: 600px;
color: #212529;
}
.message-content h4 {
margin: 0;
font-size: 1em;
font-weight: bold;
color: #212529;
}
.message-content p {
margin: 3px 0;
}
.message-date {
font-size: 0.8em;
color: #6c757d;
}
.message-form {
margin-top: 20px;
padding: 20px;
border-top: 1px solid #e0e0e0;
}
.message-form label {
color: #212529;
}
.message-form textarea {
background-color: #f1f1f1;
color: #212529;
border: 1px solid #e0e0e0;
}
.message-form button {
background-color: #007bff;
border: none;
color: #ffffff;
}
.message-form button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#">CampusTalk</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link btn btn-danger text-white" href="<%= request.getContextPath() %>/logout">Se
déconnecter</a>
</li>
</ul>
</div>
</nav>
<div class="text-center mt-4">
<a href="<%= request.getContextPath() %>/listerFil" class="btn btn-primary">Retour</a>
</div>
<% int id=Integer.parseInt(request.getParameter("id")); session.setAttribute("filId", id); FilDeDiscussionDAO
fddao=new FilDeDiscussionDAO(); FilDeDiscussion fil=fddao.findById(id); MessageDao mdao=new MessageDao();
List<Message> messages = mdao.findByFil(id);
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("dd MMM yyyy 'à' HH:mm");
%>
<div class="thread-container">
<h2 class="text-center">
<%= fil.getNom() %>
</h2>
<div class="messages-box" id="messages-box">
<% for (Message m : messages) { LocalDateTime datePublication=m.getDatePublication(); String
formattedDate=(datePublication !=null) ? datePublication.format(formatter) : "Date non disponible" ;
%>
<div class="message-item">
<div class="avatar">
<img src="https://www.gravatar.com/avatar/<%= m.getAuteurEmail().hashCode() %>?d=identicon&s=40"
alt="Avatar">
</div>
<div class="message-content">
<h4>
<%= mdao.findUserName(m.getAuteurEmail()) %>
</h4>
<p class="message-date">
<%= formattedDate %>
</p>
<p>
<%= m.getContenu() %>
</p>
<% if (m.getFileName() !=null) { %>
<img src="<%= request.getContextPath() %>/uploads/<%= m.getFileName() %>" alt="Image"
class="img-fluid mt-2">
<% } %>
</div>
</div>
<% } %>
</div>
<div class="message-form">
<form action="envoyerMessage" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="contenu">Votre message :</label>
<textarea class="form-control" id="contenu" name="contenu" rows="3" required></textarea>
</div>
<div class="form-group">
<label for="file">Ajouter une image :</label>
<input type="file" class="form-control-file" id="file" name="file">
</div>
<input type="hidden" name="filId" value="<%= id %>">
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
window.onload = function () {
let messagesBox = document.getElementById('messages-box');
messagesBox.scrollTop = messagesBox.scrollHeight;
};
</script>
</body>
</html>