starnakin/42_ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

notice: reworked frontend (bs toasts)

Browse Source
This commit is contained in:
AdrienLSH 2024-03-22 09:24:46 +01:00
parent da7837871f
commit 56b6a78287
3 changed files with 40 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/static/js/api/chat/Notice.js
View File

@ -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)

45
frontend/static/js/utils/noticeUtils.js
View File

@ -1,28 +1,25 @@
// timer in milliseconds
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
export function createNotification(text, timer = 3000) {
if (!createNotification.templateToast) {
createNotification.templateToast = new DOMParser().parseFromString(`
<div class='toast' role='alert' data-bs-delay='${timer}'>
<div class='toast-header'>
<strong class='me-auto'>Notification</strong>
<button type='button' class='btn-close' data-bs-dismiss='toast'></button>
</div>
<div class='toast-body'>
</div>
</div>
`, 'text/html')
.querySelector('body')
.firstChild;
}
async function create_popup(text = undefined, timer = undefined) {
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();
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 ;
const toastContainer = document.getElementById('toastContainer');
toastContainer.insertBefore(toastElement, toastContainer.firstChild);
}
if (timer == undefined)
timer = 5000;
await sleep(timer);
popup.style.opacity = 0;
//popup.style.visibility = "hidden"
}
export {create_popup}

5
frontend/templates/index.html
View File

@ -45,10 +45,9 @@
</div>
</div>
</nav>
<div class="notice">
<span id="popup"></span>
</div>
<div id="app" class="m-3"></div>
<div class='toast-container position-fixed bottom-0 end-0 p-3' id='toastContainer'>
</div>
<script type="module" src="{% static 'js/index.js' %}"></script>
<script src="{% static 'js/bootstrap/bootstrap.bundle.min.js' %}"></script>
</body>