134 lines
5.2 KiB
HTML
134 lines
5.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
{% if user and user.is_authenticated %}
|
|
{% if user.isActivated %}
|
|
<div id="chat-window" class="jumbotron jumbotron-fluid">
|
|
<ul id="msg-list">
|
|
</ul>
|
|
</div>
|
|
<div class="fixed-bottom form-inline">
|
|
<textarea id="msgbox" class="form-control" style="width:85%; float: left; margin-bottom: 20px;"></textarea>
|
|
<button id="btn-send"
|
|
class="btn btn-info"
|
|
type="button"
|
|
style="width: 10%;"
|
|
onclick="send_message()"
|
|
disabled>
|
|
<svg xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
fill="currentColor"
|
|
class="bi bi-send"
|
|
viewBox="0 0 16 16">
|
|
<path d="M15.854.146a.5.5 0 0 1 .11.54l-5.819 14.547a.75.75 0 0 1-1.329.124l-3.178-4.995L.643 7.184a.75.75 0 0 1 .124-1.33L15.314.037a.5.5 0 0 1 .54.11ZM6.636 10.07l2.761 4.338L14.13 2.576 6.636 10.07Zm6.787-8.201L1.591 6.602l4.339 2.76 7.494-7.493Z"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<script>
|
|
var msgbox = document.getElementById("msgbox");
|
|
var btn_send = document.getElementById("btn-send");
|
|
|
|
msgbox.addEventListener('input', (e) => {
|
|
msgbox.style.height = "100px";
|
|
msgbox.style.height = e.target.scrollHeight + 'px';
|
|
if (msgbox.value){
|
|
btn_send.disabled = false;
|
|
} else{
|
|
btn_send.disabled = true;
|
|
}
|
|
});
|
|
</script>
|
|
<script>
|
|
function get_history() {
|
|
var msgs
|
|
$.ajax({
|
|
type: 'GET',
|
|
url: "{{ url_for('main.chat') }}",
|
|
data: { act: "get_history" },
|
|
success: function (msgs) {
|
|
msgs.forEach(msg => {
|
|
var msg_list = document.getElementById("msg-list")
|
|
var li = document.createElement('li');
|
|
var pre = document.createElement('pre');
|
|
li.appendChild(pre)
|
|
li.style.textAlign = "left"
|
|
li.style.padding = "10px"
|
|
li.style.clear = "both"
|
|
if (msg.response == "" && msg.request != "") {
|
|
pre.innerText = msg.request
|
|
pre.style = "background-color: lightblue; border-radius: 10px; padding: 5px; white-space: pre-wrap; word-wrap: break-word; float: right;"
|
|
} else if (msg.request != "") {
|
|
li.style.textAlign = "left"
|
|
pre.innerText = msg.response
|
|
pre.style = "background-color: lightgreen; border-radius: 10px; padding: 5px; white-space: pre-wrap; word-wrap: break-word;"
|
|
}
|
|
msg_list.appendChild(li)
|
|
})
|
|
window.scrollTo(0,document.documentElement.scrollHeight)
|
|
}
|
|
})
|
|
}
|
|
window.onload=function(){
|
|
get_history()
|
|
}
|
|
|
|
function send_message() {
|
|
var data= {
|
|
msgtype: "text",
|
|
msg: msgbox.value
|
|
}
|
|
if (data.msg) {
|
|
var msg_list = document.getElementById("msg-list")
|
|
var li = document.createElement('li');
|
|
var pre = document.createElement('pre');
|
|
li.appendChild(pre)
|
|
li.style.textAlign = "left"
|
|
li.style.padding = "10px"
|
|
li.style.clear = "both"
|
|
pre.innerText = data.msg
|
|
pre.style = "background-color: lightblue; border-radius: 10px; padding: 5px; white-space: pre-wrap; word-wrap: break-word; float: right;"
|
|
msg_list.appendChild(li)
|
|
}
|
|
msgbox.value=""
|
|
btn_send.disabled = true;
|
|
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: "{{ url_for('main.chat') }}",
|
|
data: data,
|
|
success: null,
|
|
dataType: null
|
|
}).always(function (response) {
|
|
if (response?.status == "success") {
|
|
var msg_list = document.getElementById("msg-list")
|
|
var li = document.createElement('li');
|
|
var pre = document.createElement('pre');
|
|
li.appendChild(pre)
|
|
pre.innerText = response.message
|
|
li.style.textAlign = "left"
|
|
li.style.padding = "10px"
|
|
li.style.clear = "both"
|
|
pre.style = "background-color: lightgreen; border-radius: 10px; padding: 5px; white-space: pre-wrap; word-wrap: break-word;"
|
|
msg_list.appendChild(li)
|
|
msg_list.appendChild(document.createElement('br'))
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
{% else %}
|
|
<p class="text-warning">您的账号暂未激活,请等待管理员激活此账号。</p>
|
|
{% endif %}
|
|
{% else %}
|
|
<a href="{{ url_for('auth.login') }}">
|
|
<button type="button" class="btn btn-primary">登录</button>
|
|
</a>
|
|
或
|
|
<a href="{{ url_for('auth.signup') }}">
|
|
<button type="button" class="btn btn-default">注册</button>
|
|
</a>
|
|
{% endif %}
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}<div class="notification is-danger">{{ messages[0] }}</div>{% endif %}
|
|
{% endwith %}
|
|
{% endblock content %}
|