DanyF-github/block34.

## block34.
{% load static %}
<!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">

    <link rel="stylesheet" href="{% static 'css/chat.css' %}">
    <title>Conversation with {{lead}}</title>
</head>
<body>
    <div class="container">
        <a href="{% url 'agent:agent_dashboard' %}">Go to Dashboard</a>
        <div class="msg-header">
            <div class="active">
                <h4>{{lead.first_name}} {{lead.last_name}}</h4>
            </div>
        </div>

        <div class="conversation">
            <div class="msg-inbox">
                <div class="chats">
                    <div class="msg-page" id="msgPage">
                        {% for message in lead.messages %}
                        {% if message.from_lead %}

                        <div class="received-msg">
                            <div class="received-msg-inbox">
                                <p>{{message.body}} {{message.from_lead}}</p>
                                <span class="time">{{message.date_created}}</span>
                            </div>
                        </div>

                        {% else %}
                        <div class="outgoing-msg">
                            <p>{{message.body}}</p>
                            <span class="time">{{message.date_created}}</span>
                        </div>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="msg-bottom">
                <div class="input-group">
                    <textarea name="message" id="msgWriter" rows="3" class="form-control"></textarea>
                    <div class="input-group-append">
                        <span class="input-group-text" id="send">Send</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        const selectElement = (e) => document.querySelector(e);

        let messagePage = selectElement("#msgPage");
        let msgWriter = selectElement("#msgWriter");
        const msgType = {agent: 'outgoing', lead: 'received'}
        let socket = null

        const keepScrollToEnd = () => {
            messagePage.scrollTop = messagePage.scrollHeight
        }

        const getMessageBox = (text, date, type=msgType.agent) => {
            const parentDiv = document.createElement('div')
            parentDiv.classList.add(`${type}-chats`)

            const childDiv = document.createElement('div')
            childDiv.classList.add(`${type}-msg`)

            const msgParagraph = document.createElement('p')
            msgParagraph.textContent = text

            const dateSpan = document.createElement('span')
            dateSpan.classList.add('time')
            dateSpan.textContent = date

            childDiv.append(msgParagraph, dateSpan)
            parentDiv.append(childDiv)

            return parentDiv
        }

        // Displays new message in messagePage
        const showNewMessage = (val) => {
            let msgElement
            if (val.from_agent){
                msgElement = getMessageBox(text=val.message, date=val.date, type=msgType.agent)
            } else {
                msgElement = getMessageBox(text=val.message, date=val.date, type=msgType.lead)
            }
            messagePage.append(msgElement);
            keepScrollToEnd()
        }


        function sendMessage(event) {
            if (!msgWriter.value) return false;
            if (!socket) {
                alert("No socket connection. Reload browser");
                return false
            }

            socket.send(JSON.stringify({"message": msgWriter.value}));
            msgWriter.value = "";
            event.preventDefault();
            return false
        }

        if (!window["WebSocket"]) {
            alert("Your browser does not support web sockets. Change browser");
        } else {
            var conversationURL = "ws://" + window.location.host + "/ws/conversation/" + "{{ lead.id }}/"
            socket = new WebSocket(conversationURL);
            socket.onclose = function(){
                alert("Web socket connection has been closed");
            }

            // calls showNewMessage if socket receives message
            socket.onmessage = function(msg) {
                showNewMessage(JSON.parse(msg.data));
            }
        }
        selectElement("#send").addEventListener("click", sendMessage, false);
    </script>
</body>
</html
	{% load static %}
	<!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">

	<link rel="stylesheet" href="{% static 'css/chat.css' %}">
	<title>Conversation with {{lead}}</title>
	</head>
	<body>
	<div class="container">
	<a href="{% url 'agent:agent_dashboard' %}">Go to Dashboard</a>
	<div class="msg-header">
	<div class="active">
	<h4>{{lead.first_name}} {{lead.last_name}}</h4>
	</div>
	</div>

	<div class="conversation">
	<div class="msg-inbox">
	<div class="chats">
	<div class="msg-page" id="msgPage">
	{% for message in lead.messages %}
	{% if message.from_lead %}

	<div class="received-msg">
	<div class="received-msg-inbox">
	<p>{{message.body}} {{message.from_lead}}</p>
	<span class="time">{{message.date_created}}</span>
	</div>
	</div>

	{% else %}
	<div class="outgoing-msg">
	<p>{{message.body}}</p>
	<span class="time">{{message.date_created}}</span>
	</div>
	{% endif %}
	{% endfor %}
	</div>
	</div>
	</div>

	<div class="msg-bottom">
	<div class="input-group">
	<textarea name="message" id="msgWriter" rows="3" class="form-control"></textarea>
	<div class="input-group-append">
	<span class="input-group-text" id="send">Send</span>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>
	const selectElement = (e) => document.querySelector(e);

	let messagePage = selectElement("#msgPage");
	let msgWriter = selectElement("#msgWriter");
	const msgType = {agent: 'outgoing', lead: 'received'}
	let socket = null

	const keepScrollToEnd = () => {
	messagePage.scrollTop = messagePage.scrollHeight
	}

	const getMessageBox = (text, date, type=msgType.agent) => {
	const parentDiv = document.createElement('div')
	parentDiv.classList.add(`${type}-chats`)

	const childDiv = document.createElement('div')
	childDiv.classList.add(`${type}-msg`)

	const msgParagraph = document.createElement('p')
	msgParagraph.textContent = text

	const dateSpan = document.createElement('span')
	dateSpan.classList.add('time')
	dateSpan.textContent = date

	childDiv.append(msgParagraph, dateSpan)
	parentDiv.append(childDiv)

	return parentDiv
	}

	// Displays new message in messagePage
	const showNewMessage = (val) => {
	let msgElement
	if (val.from_agent){
	msgElement = getMessageBox(text=val.message, date=val.date, type=msgType.agent)
	} else {
	msgElement = getMessageBox(text=val.message, date=val.date, type=msgType.lead)
	}
	messagePage.append(msgElement);
	keepScrollToEnd()
	}


	function sendMessage(event) {
	if (!msgWriter.value) return false;
	if (!socket) {
	alert("No socket connection. Reload browser");
	return false
	}

	socket.send(JSON.stringify({"message": msgWriter.value}));
	msgWriter.value = "";
	event.preventDefault();
	return false
	}

	if (!window["WebSocket"]) {
	alert("Your browser does not support web sockets. Change browser");
	} else {
	var conversationURL = "ws://" + window.location.host + "/ws/conversation/" + "{{ lead.id }}/"
	socket = new WebSocket(conversationURL);
	socket.onclose = function(){
	alert("Web socket connection has been closed");
	}

	// calls showNewMessage if socket receives message
	socket.onmessage = function(msg) {
	showNewMessage(JSON.parse(msg.data));
	}
	}
	selectElement("#send").addEventListener("click", sendMessage, false);
	</script>
	</body>
	</html