Commit c8dbf3c5 authored by Mat's avatar Mat

corrections + mise en forme de la fenêtre de chat

parent 3d8e4326
......@@ -12,6 +12,8 @@
</h5>
<div id="users"></div>
<div id="history"></div>
<br class="clearfix" />
<input id="message" type="text">
<button id="send">Envoyer</button>
......@@ -54,8 +56,15 @@
switch (data.action) {
case 'refresh_users':
// affiche la vue
$('#users').html(data.view);
break;
case 'refresh_messages':
console.log(data);
$('#history').html(data.view);
break;
}
};
......
{% for message in messages %}
{# @var message \SocketBundle\Entity\Message #}
<div class="{% if message.author.username == author %}right{% else %}left{% endif %}">
<div class="avatar">
<img src="{{ 'http://0.0.0.0:81/web/assets/img/avatar/' ~ message.author.avatar | default('default.jpg') }}"
alt="avatar" class="avatar">
</div>
<div class="message">
{{ message.content }}
<span>{{ message.date|date('d/m/Y à H:i') }}</span>
</div>
</div>
<br class="clearfix" />
{% endfor %}
......@@ -142,21 +142,23 @@ class ChatHub implements MessageComponentInterface
$username = $this->getUser($token);
// récupère l'historique des messages entre les 2 utilisateurs
$messageRepo = $this->getDoctrine()->getManager()->getRepository(Message::class);
$messageRepo = $this->getDoctrine()->getRepository(Message::class);
$messages = $messageRepo->getHistory($username, $dest);
// passe l'historique dans le fragment twig
$twig = $this->container->get('templating');
$fragment = $twig->render('@Socket/Chat/usersHistory.html.twig', array(
'messages' => $messages
'author' => $username,
'messages' => $messages
));
// retourne le fragment en json
return json_encode(array(
'action' => 'refreseh_messages',
// retourne le fragment en json, à $from
// on aurait pu mettre $this->clients[$username] à la place de $from
$from->send(json_encode(array(
'action' => 'refresh_messages',
'view' => $fragment
));
)));
break;
}
}
......
......@@ -19,3 +19,66 @@ li img.avatar {
margin-right: 0.3em;
}
/*
* usersHistory
*/
.left div.avatar {
float: left;
}
.right div.avatar {
float: right;
}
div.avatar img.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
vertical-align: middle;
}
.left div.message:before {
left: -10px;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-right:10px solid #d0d0d0;
}
.right div.message:before {
right: -10px;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
border-left:10px solid #d0d0d0;
}
div.message:before {
content: '';
position: absolute;
width: 0px;
height: 0px;
top: 15px; /*
background-color: #d0d0d0; */
}
div.message {
position: relative;
}
.left div.message {
float: left;
margin-left: 1em;
}
.right div.message {
float: right;
margin-right: 1em;
}
div.message {
background-color: #d0d0d0;
border-radius: 8px;
padding: 0.5em;
text-align: left;
}
div.message span {
font-size: 8pt;
color: grey;
text-align: right;
display: block;
}
.clearfix {
clear: both;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment