From 56b6a7828702367bb63750f809b5ebfb3b6c2906 Mon Sep 17 00:00:00 2001 From: AdrienLSH Date: Fri, 22 Mar 2024 09:24:46 +0100 Subject: [PATCH] notice: reworked frontend (bs toasts) --- frontend/static/js/api/chat/Notice.js | 36 ++++++++++----------- frontend/static/js/utils/noticeUtils.js | 43 ++++++++++++------------- frontend/templates/index.html | 5 ++- 3 files changed, 40 insertions(+), 44 deletions(-) diff --git a/frontend/static/js/api/chat/Notice.js b/frontend/static/js/api/chat/Notice.js index 23e65e0..d02de5a 100644 --- a/frontend/static/js/api/chat/Notice.js +++ b/frontend/static/js/api/chat/Notice.js @@ -1,5 +1,5 @@ import { navigateTo } from "../../index.js"; -import {create_popup} from "../../utils/noticeUtils.js"; +import {createNotification} from "../../utils/noticeUtils.js"; class Notice { constructor(client) { @@ -85,7 +85,7 @@ class Notice { } else { let sender = await this.client.profiles.getProfileId(send.author_id); - create_popup(sender.username + " refuse your invitation"); + createNotification(sender.username + " refuse your invitation"); } } @@ -111,12 +111,12 @@ class Notice { if (send.author_id == this.client.me.id) { if (send.status == 200) { for (let target in send.targets) - return create_popup("Invitation send"); + return createNotification("Invitation send"); } else if (send.status == 444) - return create_popup("User not connected"); + return createNotification("User not connected"); else if (send.status == 409) - return create_popup("Already invited"); + return createNotification("Already invited"); } else { @@ -129,7 +129,7 @@ class Notice { this.data.invited = content; let sender = await this.client.profiles.getProfileId(send.author_id); - create_popup("Invitation received by " + sender.username); + createNotification("Invitation received by " + sender.username); if (this.rewrite_invite !== undefined) this.rewrite_invite(); @@ -189,9 +189,9 @@ class Notice { let my_id = (this.client.me && this.client.me.id) || send.author_id; if (send.author_id == my_id) { if (send.status == 400) - create_popup("Friend ask error"); + createNotification("Friend ask error"); else if (send.status == 409) - create_popup("Already asked friend"); + createNotification("Already asked friend"); } //if (!send.asked.includes(send.author_id) || @@ -208,7 +208,7 @@ class Notice { if (send.author_id != my_id) { let sender = await this.client.profiles.getProfileId(send.author_id); if (this.data.asker.includes(send.author_id)) - create_popup(sender.username + " ask you as friend"); + createNotification(sender.username + " ask you as friend"); if (this.rewrite_profile !== undefined) await this.rewrite_profile(); } @@ -227,9 +227,9 @@ class Notice { if (send.author_id == this.client.me.id) { if (send.status == 400) - create_popup("Error remove Friend"); + createNotification("Error remove Friend"); else if (send.status == 409) - create_popup("Not friend, wtf"); + createNotification("Not friend, wtf"); } @@ -254,14 +254,14 @@ class Notice { if (send.author_id == this.client.me.id) { if (send.status == 400) - create_popup("Error accept Friend"); + createNotification("Error accept Friend"); else if (send.status == 404) - create_popup("Not found request Friend"); + createNotification("Not found request Friend"); else if (send.status == 409) - create_popup("Already Friend, wtf"); + createNotification("Already Friend, wtf"); } else { - create_popup(sender.username + " accept your friend request"); + createNotification(sender.username + " accept your friend request"); } if (this.rewrite_profile !== undefined) @@ -285,11 +285,11 @@ class Notice { if (send.author_id == this.client.me.id) { if (send.status == 400) - create_popup("Error refuse Friend"); + createNotification("Error refuse Friend"); else if (send.status == 404) - create_popup("Not found request Friend"); + createNotification("Not found request Friend"); else if (send.status == 409) - create_popup("Already Friend, WTF"); + createNotification("Already Friend, WTF"); } if (this.rewrite_profile !== undefined) diff --git a/frontend/static/js/utils/noticeUtils.js b/frontend/static/js/utils/noticeUtils.js index f5b77bc..b604de1 100644 --- a/frontend/static/js/utils/noticeUtils.js +++ b/frontend/static/js/utils/noticeUtils.js @@ -1,28 +1,25 @@ -// timer in milliseconds -function sleep(ms) { - return new Promise(resolve => setTimeout(resolve, ms)); -} +export function createNotification(text, timer = 3000) { -async function create_popup(text = undefined, timer = undefined) { - - if (text == undefined) - text = "notice undefined"; - - let popup = document.getElementById("popup"); - popup.textContent = "Notice: " + text; - popup.style.opacity = 0.95; - popup.onclick = async () => { - popup.style.opacity = 0; - return ; + if (!createNotification.templateToast) { + createNotification.templateToast = new DOMParser().parseFromString(` + + `, 'text/html') + .querySelector('body') + .firstChild; } - if (timer == undefined) - timer = 5000; - await sleep(timer); - - popup.style.opacity = 0; - //popup.style.visibility = "hidden" + const toastElement = createNotification.templateToast.cloneNode(true); + toastElement.getElementsByClassName('toast-body')[0].innerHTML = text; + toastElement.addEventListener('hidden.bs.toast', e => e.target.remove()); + new bootstrap.Toast(toastElement).show(); + const toastContainer = document.getElementById('toastContainer'); + toastContainer.insertBefore(toastElement, toastContainer.firstChild); } - -export {create_popup} diff --git a/frontend/templates/index.html b/frontend/templates/index.html index b08831f..29be311 100644 --- a/frontend/templates/index.html +++ b/frontend/templates/index.html @@ -45,10 +45,9 @@ -
- -
+
+