NDOJ/templates/chat/chat.html
2024-06-24 19:42:50 -05:00

102 lines
3.4 KiB
HTML

{% set layout = "no_wrapper" %}
{% extends "base.html" %}
{% block title_row %}{% endblock %}
{% block title_ruler %}{% endblock %}
{% block title %} {{_('Chat Box')}} {% endblock %}
{% block js_media %}
<script type="text/javascript" src="{{ static('event.js') }}"></script>
<script type="module" src="https://unpkg.com/emoji-picker-element@1"></script>
{% compress js %}
{% include "chat/chat_js.html" %}
{% endcompress %}
<script type="text/javascript">
window.limit_time = 24;
window.room_id = "{{room if room else ''}}";
window.unread_message = 0;
window.other_user_id = "{{other_user.id if other_user else ''}}";
window.lock = false;
window.lock_click_space = false;
window.pushed_messages = new Set();
window.load_dynamic_update = function (last_msg) {
var receiver = new EventReceiver(
"{{ EVENT_DAEMON_LOCATION }}", "{{ EVENT_DAEMON_POLL_LOCATION }}",
['{{chat_lobby_channel}}', '{{chat_channel}}'], last_msg, function (message) {
if (window.pushed_messages.has(message.message)) {
return;
}
window.pushed_messages.add(message.message);
var room = (message.type == 'lobby') ? '' : message.room;
if (message.author_id == {{request.profile.id}}) {
check_new_message(message.message, message.tmp_id, room);
}
else {
add_new_message(message.message, room, false);
}
}
);
return receiver;
}
function message_template() {
return`
{% with message=message_template %}
{% include "chat/message.html" %}
{% endwith %}
`};
$(function() {
load_dynamic_update({{last_msg}});
});
</script>
{% endblock js_media %}
{% block media %}
{% include "chat/chat_css.html" %}
{% endblock media %}
{% block body %}
<div class="chat">
<div id="chat-container">
<div id="chat-online" class="chat-left-panel sidebox">
<div id="chat-online-content">
<div id="search-container">
<form id="chat-search-form" name="form" action="{{ url('get_or_create_room') }}" method="post">
{% csrf_token %}
<input id="search-handle" type="text" name="search"
placeholder="{{ _('Search by handle...') }}">
</form>
</div>
<div id="chat-online-list">
{% include "chat/online_status.html" %}
</div>
</div>
</div>
<div id="chat-area" class="chat-right-panel">
<div id="chat-info">
{% include 'chat/user_online_status.html' %}
</div>
<div id="chat-box">
<span id="loader" style="font-size: 2em; display: none;">
<i class="fa fa-spinner fa-pulse"></i>
</span>
<ul id="chat-log">
{% include 'chat/message_list.html' %}
</ul>
</div>
<div id="chat-input-container">
<textarea maxlength="{{5000 if room else 200}}" id="chat-input" placeholder="{{_('Enter your message')}}"></textarea>
<div class="chat-input-icon" id="emoji-button" href="#" title="{{_('Emoji')}}"><i class="icofont-slightly-smile"></i>
</div>
<div class="chat-input-icon" id="submit-button">
<i class="fa fa-arrow-right"></i>
</div>
</div>
<div class="tooltip" role="tooltip">
<emoji-picker></emoji-picker>
</div>
</div>
</div>
</div>
{% endblock body %}