Работа с представлениями и шаблонами

Теперь давайте создадим HTML-шаблоны для этих представлений.

Создайте следующую файловую структуру в директории шаблонов:

/templates/chat/base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   
   <title>{%block title%}{%endblock title%}</title>
</head>
<body>
    {%block content%}
    {% endblock content%}
</body>
    {%block script%}
    {%endblock script%}
    
</html>

/templates/chat/home.html:

{% extends 'chat/base.html' %}
{% block title %} Home {% endblock title %}
{% block content %}
    <h1 style="margin-top: 3px;">My Django Chat Home Page</h1>
    <ul>
        {% for group in groups %}
            <div id="{{ group.uuid }}">
                <li><a>{{ group.name }}</a></li>
                {% if request.user in group.members.all %}
                    <button id="leave-{{ group.uuid }}" class="group_option" value="leave_group {{ group.uuid }}">
                        Leave
                    </button>
                {% else %}
                    <button id="join-{{ group.uuid }}" class="group_option" value="join_group {{ group.uuid }}">
                        Join
                    </button>
                {% endif %}
                {% if request.user in group.members.all %}
                    <button id="open-{{ group.uuid }}" class="group_option" value="open_group {{ group.uuid }}">
                        Open
                    </button>
                {% endif %}
            </div>
        {% endfor %}

    </ul>
{% endblock content %}

В HTML-коде есть три кнопки, связанные с каждой группой: кнопки Open, Leave и Join.

Кнопки Open и Leave отображаются, если текущий пользователь является членом группы, и только кнопка Join в противном случае.

Кроме того, атрибут id каждой кнопки - <action>-<group uuid>, где действием является Join, Leave или Open.

Для группового чата откройте файл groupchat.html и добавьте следующий код:

 
<!-- /templates/chat/groupchat.html -->
{% extends 'chat/base.html'%} 
{% block title%} Chat Room{%endblock title%}
{% block content%}
<textarea id="chat-log" cols="100" rows="20"></textarea><br>
<input id="chat-message-input" type="text" size="100"><br>
<input id="chat-message-submit" type="button" value="Send">

<script>
    document.querySelector('#chat-log').value = ""
    {% for message_event in message_and_event_list%}
 
   document.querySelector('#chat-log').value += ( {{message_event}}  + '\n');
{%endfor%}
</script>


<h3>Group Members</h3>
<ul id="members">
{% for member in group_members%}
<li id="members-{{member.username}}">{{member}}</li>
{%endfor%}
</ul>
{%endblock content%}

В приведенном выше HTML-коде мы:

Загружаем messages и сообщения о событиях, отображаемые из представления.
Используем манипулирование DOM JavaScript, чтобы добавить сообщение и событие в журнал чата.
Перечисляем участников группы. Тег элемента списка HTML li для каждого члена имеет id-атрибут members-<username>.

На данном этапе, в админ панели, давайте создадим две группы - Django и Frontend. И перейдем уже непосредственно к работе с WebSocket.