Defining the place depending on the user django-channels

Question

I'am making a chat app using django-channels. In my front-end chat I want one user on one side and the other user on the other side, I try something like this:

   {% for chat in object.chatmessage_set.all %}
    {% if chat.user == user.username %}

        <div class="msg right-msg" id="side">
          <div class="msg-img" style="background-image: url(https://image.flaticon.com/icons/svg/145/145867.svg)"></div>

          <div class="msg-bubble">
              <div class="msg-info">
              <div class="msg-info-name" id="user">{{ chat.user }}</div>
              <div class="msg-info-time"></div>
              </div>

              <div class="msg-text" id="buttom">{{ chat.message }}</div>
          </div>
        </div>
        
    {% elif chat.user != user.username %}

        <div class="msg left-msg" id="side">
          <div class="msg-img" style="background-image: url(https://image.flaticon.com/icons/svg/145/145867.svg)"></div>

          <div class="msg-bubble">
              <div class="msg-info">
              <div class="msg-info-name" id="user">{{ chat.user }}</div>
              <div class="msg-info-time"></div>
              </div>

              <div class="msg-text" id="buttom">{{ chat.message }}</div>
          </div>
        </div>

    {% endif %}
  {% endfor %}

the class msg right-msg tells the right place and the class msg left-msg tells the other place, it seems it works, but not as I expected. At the end it looks like this: chat image

does anybody know want can I do to classified the side depending on the user?

Answer 1

You can make an if statement with django template tag:

{% if user.username != chat.user %}"msg left-msg"{% elif user.username == chat.user %}"msg right-msg"{% endif %}