mirror of
https://github.com/KeyZox71/knl_meowscendence.git
synced 2026-01-01 06:06:41 +01:00
「🏗️」 wip: kinda working friends menu
This commit is contained in:
@ -1,12 +1,13 @@
|
||||
import Aview from "./Aview.ts"
|
||||
import { setOnekoState } from "../oneko.ts"
|
||||
import { dragElement } from "./drag.ts";
|
||||
import { isLogged, navigationManager } from "../main.ts"
|
||||
|
||||
export default class extends Aview {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.setTitle("Friends list");
|
||||
this.setTitle("friends list");
|
||||
setOnekoState("default");
|
||||
}
|
||||
|
||||
@ -26,22 +27,47 @@ export default class extends Aview {
|
||||
<form method="dialog" class="bg-neutral-200 dark:bg-neutral-800 text-center pb-10 pt-5 px-10 space-y-4 reverse-border">
|
||||
<input type="text" id="new-friend" placeholder="new friend" class="bg-white text-neutral-900 px-4 py-2 input-border" required></input>
|
||||
<button id="add-friends-button" type="submit" class="default-button w-full">add friend</button>
|
||||
<button id="rm-friends-button" class="default-button w-full">remove friend</button>
|
||||
<p id="add-friend-err" class="hidden text-red-700 dark:text-red-500"></p>
|
||||
<p id="add-friend-msg" class="hidden text-gray-900 dark:text-white text-lg"></p>
|
||||
</form>
|
||||
<p id="friends_n" class="hidden text-gray-900 dark:text-white text-lg"></p>
|
||||
<p id="friends-error-message" class="hidden text-red-700 dark:text-red-500"></p>
|
||||
<ul id="friends_list" class="hidden text-gray-900 dark:text-white text-lg">
|
||||
</ul>
|
||||
<p id="friend-msg" class="hidden text-gray-900 dark:text-white text-lg"></p>
|
||||
<div class="flex flex-row space-x-4 w-full min-w-145">
|
||||
<ul id="friends_list" class="reverse-border space-y-2 hidden text-gray-900 dark:text-white text-lg overflow-scroll h-48 w-full">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
async run() {
|
||||
if (!await isLogged())
|
||||
navigationManager("/");
|
||||
|
||||
dragElement(document.getElementById("window"));
|
||||
let uuid: String;
|
||||
uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2];
|
||||
const n_friends = (document.getElementById("friends_n") as HTMLParagraphElement);
|
||||
const friends_error_message = (document.getElementById("friends-error-message") as HTMLParagraphElement);
|
||||
const friends_message = (document.getElementById("friends-msg") as HTMLParagraphElement)
|
||||
const friends_list = (document.getElementById("friends_list") as HTMLUListElement);
|
||||
const new_friend = (document.getElementById("new-friend") as HTMLInputElement);
|
||||
const add_friend_err = (document.getElementById("add-friend-err") as HTMLParagraphElement);
|
||||
const add_friend_msg = (document.getElementById("add-friend-msg") as HTMLParagraphElement);
|
||||
|
||||
async function removeFriend(name) {
|
||||
const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/" + name, {
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
});
|
||||
if (data_req.status === 200) {
|
||||
console.log("friends removed success fully");
|
||||
} else {
|
||||
console.log("could not remove friend");
|
||||
}
|
||||
}
|
||||
|
||||
const list_friends = async () => {
|
||||
const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/count", {
|
||||
@ -54,7 +80,7 @@ export default class extends Aview {
|
||||
let data = await data_req.json();
|
||||
|
||||
if (data.n_friends > 0) {
|
||||
const list_req = await fetch("http://localhost:3002/users/" + uuid + "/friends?iStart=0&iEnd=20", {
|
||||
const list_req = await fetch("http://localhost:3002/users/" + uuid + "/friends?iStart=0&iEnd=2147483647", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
@ -70,8 +96,21 @@ export default class extends Aview {
|
||||
let list = (await list_req.json()).friends as JSON;
|
||||
|
||||
for (let i = 0; i < data.n_friends; i++) {
|
||||
let new_friends = document.createElement('li')
|
||||
new_friends.innerHTML = "- " + list[i].friendName;
|
||||
let new_friends = document.createElement('li');
|
||||
|
||||
const span = document.createElement('span');
|
||||
span.textContent = list[i].friendName;
|
||||
|
||||
const but = document.createElement('button');
|
||||
but.textContent = "-";
|
||||
but.className = "bg-red-500 text-white px-2 py-0 rounded hover:bg-red-600";
|
||||
but.onclick = function() {
|
||||
removeFriend(list[i].friendName);
|
||||
list_friends()
|
||||
}
|
||||
|
||||
new_friends.appendChild(span);
|
||||
new_friends.appendChild(but);
|
||||
friends_list.appendChild(new_friends);
|
||||
}
|
||||
} else {
|
||||
@ -80,16 +119,13 @@ export default class extends Aview {
|
||||
friends_error_message.classList.remove("hidden");
|
||||
}
|
||||
} else {
|
||||
friends_error_message.innerHTML = "failed to fetch friends";
|
||||
friends_error_message.classList.remove("hidden");
|
||||
friends_message.innerHTML = "you have no friends D:";
|
||||
friends_message.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const add_friend = async () => {
|
||||
const new_friend = (document.getElementById("new-friend") as HTMLInputElement);
|
||||
const add_friend_err = (document.getElementById("add-friend-err") as HTMLParagraphElement);
|
||||
const add_friend_msg = (document.getElementById("add-friend-msg") as HTMLParagraphElement);
|
||||
|
||||
const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/" + new_friend.value, {
|
||||
method: "POST",
|
||||
credentials: "include",
|
||||
@ -105,39 +141,13 @@ export default class extends Aview {
|
||||
add_friend_err.classList.remove("hidden");
|
||||
if (!add_friend_msg.classList.contains("hidden"))
|
||||
add_friend_msg.classList.add("hidden")
|
||||
list_friends()
|
||||
return
|
||||
}
|
||||
list_friends()
|
||||
new_friend.value = '';
|
||||
}
|
||||
|
||||
const rm_friend = async () => {
|
||||
const new_friend = (document.getElementById("new-friend") as HTMLInputElement);
|
||||
const add_friend_err = (document.getElementById("add-friend-err") as HTMLParagraphElement);
|
||||
const add_friend_msg = (document.getElementById("add-friend-msg") as HTMLParagraphElement);
|
||||
|
||||
const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/" + new_friend.value, {
|
||||
method: "DELETE",
|
||||
credentials: "include",
|
||||
});
|
||||
let data = await data_req.json()
|
||||
if (data_req.status === 200) {
|
||||
add_friend_msg.innerHTML = data.msg;
|
||||
add_friend_msg.classList.remove("hidden");
|
||||
if (!add_friend_err.classList.contains("hidden"))
|
||||
add_friend_err.classList.add("hidden")
|
||||
} else {
|
||||
add_friend_err.innerHTML = data.error;
|
||||
add_friend_err.classList.remove("hidden");
|
||||
if (!add_friend_msg.classList.contains("hidden"))
|
||||
add_friend_msg.classList.add("hidden")
|
||||
}
|
||||
list_friends()
|
||||
}
|
||||
|
||||
dragElement(document.getElementById("window"));
|
||||
const n_friends = (document.getElementById("friends_n") as HTMLParagraphElement);
|
||||
const friends_error_message = (document.getElementById("friends-error-message") as HTMLParagraphElement);
|
||||
const friends_list = (document.getElementById("friends_list") as HTMLUListElement);
|
||||
|
||||
try {
|
||||
const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/count", {
|
||||
method: "GET",
|
||||
@ -158,6 +168,5 @@ export default class extends Aview {
|
||||
friends_error_message.classList.remove("hidden");
|
||||
}
|
||||
document.getElementById("add-friends-button")?.addEventListener("click", add_friend);
|
||||
document.getElementById("rm-friends-button")?.addEventListener("click", rm_friend);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user