lynnesbian/FediBooks
lynnesbian/FediBooks
1
0
Fork 0
mirror of https://github.com/Lynnesbian/FediBooks/ synced 2024-11-25 08:38:59 +00:00
Code Issues Releases Wiki Activity

chat UI improvements

Browse source
This commit is contained in:
Lynne Megido 2020-01-20 13:46:30 +10:00
parent d48eb9264f
commit 3d0cdbc5e5
Signed by: lynnesbian
GPG key ID: F0A184B5213D9F90
4 changed files with 19 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/static/script.js
View file

@ -2,7 +2,9 @@ function sendMessage() {
let id = window.location.href.split("/").slice(-1)[0] let id = window.location.href.split("/").slice(-1)[0]
message = document.getElementById("chatbox-input-box").value message = document.getElementById("chatbox-input-box").value
document.getElementById("chatbox-input-box").value = '' document.getElementById("chatbox-input-box").value = ''
document.getElementById("chatbox").innerHTML += `<div class="message-container user"><div class="message user">${message}</div></div>`; let chatbox = document.getElementById("chatbox");
chatbox.innerHTML += `<div class="message-container user"><div class="message user">${message}</div></div>`;
chatbox.scrollTop = chatbox.scrollHeight;
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function() {
if (this.readyState == 4) { if (this.readyState == 4) {
@ -11,7 +13,8 @@ function sendMessage() {
} else { } else {
message = "Encountered an error while trying to get a response."; message = "Encountered an error while trying to get a response.";
} }
document.getElementById("chatbox").innerHTML += `<div class="message-container bot"><div class="bot-icon"></div><div class="message bot">${this.responseText}</div></div>`; chatbox.innerHTML += `<div class="message-container bot"><div class="bot-icon"></div><div class="message bot">${this.responseText}</div></div>`;
chatbox.scrollTop = chatbox.scrollHeight;
} }
}; };
xhttp.open("GET", `/bot/chat/${id}/message`, true); xhttp.open("GET", `/bot/chat/${id}/message`, true);

2
app/static/style.css
View file

@ -217,6 +217,7 @@ form .row {
height: 90vh; height: 90vh;
background-color: #3d4353; background-color: #3d4353;
padding: 10px; padding: 10px;
overflow-y: scroll;
} }
#chatbox-input, #chatbox-input input{ #chatbox-input, #chatbox-input input{
width: 100%; width: 100%;
@ -239,7 +240,6 @@ form .row {
text-align: right; text-align: right;
} }
.message-container .bot-icon { .message-container .bot-icon {
background: center / contain url("https://lynnesbian.space/img/bune.png") no-repeat;
height: 30px; height: 30px;
width: 30px; width: 30px;
display: inline-block; display: inline-block;

7
app/templates/bot/chat.html
View file

@ -4,6 +4,11 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>FediBooks</title> <title>FediBooks</title>
{% include 'imports.html' %} {% include 'imports.html' %}
<style>
.bot-icon {
background: center / contain url("{{icon}}") no-repeat;
}
</style>
<script> <script>
window.onload = function() { window.onload = function() {
document.getElementById("chatbox-input-box").focus(); document.getElementById("chatbox-input-box").focus();
@ -39,7 +44,7 @@
</div> </div>
<form id="chatbox-input"> <form id="chatbox-input">
<input id="chatbox-input-box" name="message" placeholder="Press enter to send"> <input id="chatbox-input-box" autocomplete="off" required name="message" placeholder="Press enter to send">
</form> </form>
</div> </div>

7
app/webui.py
View file

@ -161,7 +161,12 @@ def bot_toggle(id):
def bot_chat(id): def bot_chat(id):
# return render_template("coming_soon.html") # return render_template("coming_soon.html")
if bot_check(id): if bot_check(id):
return render_template("/bot/chat.html", bot = id) c = mysql.connection.cursor()
c.execute("SELECT icon FROM `bots` WHERE handle = %s", (id,))
icon = c.fetchone()[0]
if icon is None:
icon = "/img/bot_generic.png"
return render_template("/bot/chat.html", bot = id, icon = icon)
@app.route("/bot/chat/<id>/message") @app.route("/bot/chat/<id>/message")
def bot_chat_message(id): def bot_chat_message(id):