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 { navigateTo } from "../../index.js";
import {create_popup} from "../../utils/noticeUtils.js"; import {createNotification} from "../../utils/noticeUtils.js";
class Notice { class Notice {
constructor(client) { constructor(client) {
@ -85,7 +85,7 @@ class Notice {
} }
else { else {
let sender = await this.client.profiles.getProfileId(send.author_id); 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.author_id == this.client.me.id) {
if (send.status == 200) { if (send.status == 200) {
for (let target in send.targets) for (let target in send.targets)
return create_popup("Invitation send"); return createNotification("Invitation send");
} }
else if (send.status == 444) else if (send.status == 444)
return create_popup("User not connected"); return createNotification("User not connected");
else if (send.status == 409) else if (send.status == 409)
return create_popup("Already invited"); return createNotification("Already invited");
} }
else { else {
@ -129,7 +129,7 @@ class Notice {
this.data.invited = content; this.data.invited = content;
let sender = await this.client.profiles.getProfileId(send.author_id); 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) if (this.rewrite_invite !== undefined)
this.rewrite_invite(); this.rewrite_invite();
@ -189,9 +189,9 @@ class Notice {
let my_id = (this.client.me && this.client.me.id) || send.author_id; let my_id = (this.client.me && this.client.me.id) || send.author_id;
if (send.author_id == my_id) { if (send.author_id == my_id) {
if (send.status == 400) if (send.status == 400)
create_popup("Friend ask error"); createNotification("Friend ask error");
else if (send.status == 409) else if (send.status == 409)
create_popup("Already asked friend"); createNotification("Already asked friend");
} }
//if (!send.asked.includes(send.author_id) || //if (!send.asked.includes(send.author_id) ||
@ -208,7 +208,7 @@ class Notice {
if (send.author_id != my_id) { if (send.author_id != my_id) {
let sender = await this.client.profiles.getProfileId(send.author_id); let sender = await this.client.profiles.getProfileId(send.author_id);
if (this.data.asker.includes(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) if (this.rewrite_profile !== undefined)
await this.rewrite_profile(); await this.rewrite_profile();
} }
@ -227,9 +227,9 @@ class Notice {
if (send.author_id == this.client.me.id) { if (send.author_id == this.client.me.id) {
if (send.status == 400) if (send.status == 400)
create_popup("Error remove Friend"); createNotification("Error remove Friend");
else if (send.status == 409) 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.author_id == this.client.me.id) {
if (send.status == 400) if (send.status == 400)
create_popup("Error accept Friend"); createNotification("Error accept Friend");
else if (send.status == 404) else if (send.status == 404)
create_popup("Not found request Friend"); createNotification("Not found request Friend");
else if (send.status == 409) else if (send.status == 409)
create_popup("Already Friend, wtf"); createNotification("Already Friend, wtf");
} }
else { else {
create_popup(sender.username + " accept your friend request"); createNotification(sender.username + " accept your friend request");
} }
if (this.rewrite_profile !== undefined) if (this.rewrite_profile !== undefined)
@ -285,11 +285,11 @@ class Notice {
if (send.author_id == this.client.me.id) { if (send.author_id == this.client.me.id) {
if (send.status == 400) if (send.status == 400)
create_popup("Error refuse Friend"); createNotification("Error refuse Friend");
else if (send.status == 404) else if (send.status == 404)
create_popup("Not found request Friend"); createNotification("Not found request Friend");
else if (send.status == 409) else if (send.status == 409)
create_popup("Already Friend, WTF"); createNotification("Already Friend, WTF");
} }
if (this.rewrite_profile !== undefined) if (this.rewrite_profile !== undefined)

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

@ -1,28 +1,25 @@
// timer in milliseconds export function createNotification(text, timer = 3000) {
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function create_popup(text = undefined, timer = undefined) { if (!createNotification.templateToast) {
createNotification.templateToast = new DOMParser().parseFromString(`
if (text == undefined) <div class='toast' role='alert' data-bs-delay='${timer}'>
text = "notice undefined"; <div class='toast-header'>
<strong class='me-auto'>Notification</strong>
let popup = document.getElementById("popup"); <button type='button' class='btn-close' data-bs-dismiss='toast'></button>
popup.textContent = "Notice: " + text; </div>
popup.style.opacity = 0.95; <div class='toast-body'>
popup.onclick = async () => { </div>
popup.style.opacity = 0; </div>
return ; `, 'text/html')
.querySelector('body')
.firstChild;
} }
if (timer == undefined) const toastElement = createNotification.templateToast.cloneNode(true);
timer = 5000; toastElement.getElementsByClassName('toast-body')[0].innerHTML = text;
await sleep(timer); toastElement.addEventListener('hidden.bs.toast', e => e.target.remove());
new bootstrap.Toast(toastElement).show();
popup.style.opacity = 0;
//popup.style.visibility = "hidden"
const toastContainer = document.getElementById('toastContainer');
toastContainer.insertBefore(toastElement, toastContainer.firstChild);
} }
export {create_popup}

5
frontend/templates/index.html
View File

@ -45,10 +45,9 @@
</div> </div>
</div> </div>
</nav> </nav>
<div class="notice">
<span id="popup"></span>
</div>
<div id="app" class="m-3"></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 type="module" src="{% static 'js/index.js' %}"></script>
<script src="{% static 'js/bootstrap/bootstrap.bundle.min.js' %}"></script> <script src="{% static 'js/bootstrap/bootstrap.bundle.min.js' %}"></script>
</body> </body>