diff --git a/src/front/index.html b/src/front/index.html index 6471bae..de47004 100644 --- a/src/front/index.html +++ b/src/front/index.html @@ -36,6 +36,7 @@
+
-
- 12:37 +
+ +
+ 12:37 +
diff --git a/src/front/static/ts/main.ts b/src/front/static/ts/main.ts index f3005fe..032984e 100644 --- a/src/front/static/ts/main.ts +++ b/src/front/static/ts/main.ts @@ -1,6 +1,8 @@ import { oneko } from "./oneko.ts"; import ProfileMenu from "./views/ProfileMenu.ts"; +import FriendsMenu from "./views/Friends.ts"; let profile_view = new ProfileMenu; +let friends_view = new FriendsMenu; export async function isLogged(): Promise { let uuid_req = await fetch("http://localhost:3001/me", { @@ -78,6 +80,10 @@ document.addEventListener("DOMContentLoaded", () => { profile_view.open = false; document.getElementById("taskbar-menu").innerHTML = ""; } + if (e.target.matches("#friends-btn")) { + friends_view.open = !friends_view.open; + friends_view.run(); + } if (e.target.matches("[data-link]")) { e.preventDefault(); navigationManager(e.target.href); @@ -96,7 +102,10 @@ document.addEventListener("DOMContentLoaded", () => { router(); }); -function updateClock() { +oneko(); + +function updateClock() +{ const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']; const months = ['jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jul', 'aug', 'sep', 'oct', 'nov', 'dec']; const clock = document.getElementById("taskbar-clock"); diff --git a/src/front/static/ts/views/Friends.ts b/src/front/static/ts/views/Friends.ts new file mode 100644 index 0000000..7e11e4e --- /dev/null +++ b/src/front/static/ts/views/Friends.ts @@ -0,0 +1,200 @@ +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 { + + open: Boolean = false; + + constructor() { + super(); + this.setTitle("friends list"); + setOnekoState("default"); + } + + async getHTML() { + return ` +
+
+ friends.ts +
+ +
+
+ + + + +
+ + +
+ +
+
+
+ `; + } + + async run() { + if (!await isLogged()) + navigationManager("/"); + + if (this.open === true) { + document.getElementById("friends-menu").innerHTML = await this.getHTML(); + } else { + document.getElementById("friends-menu").innerHTML = ""; + return; + } + + let uuid: String; + uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2]; + const friends_error_message = (document.getElementById("friends-error-message") 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: String) { + 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 successfully"); + } else { + console.log("could not remove friend"); + } + list_friends(); + list_friends(); + list_friends(); + list_friends(); + list_friends(); + list_friends(); + } + + async function isFriendLogged(name: string): Promise { + const data_req = await fetch("http://localhost:3002/ping/" + name, { + method: "GET", + credentials: "include", + }); + + if (data_req.status === 404) + return false; + + return (await data_req.json()).isLogged + } + + const list_friends = async () => { + const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/count", { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + credentials: "include", + }); + if (data_req.status === 404) { + } + let data = await data_req.json(); + while (friends_list.firstChild) { + friends_list.removeChild(friends_list.firstChild); + } + + if (data.n_friends > 0) { + const list_req = await fetch("http://localhost:3002/users/" + uuid + "/friends?iStart=0&iEnd=2147483647", { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + credentials: "include", + }); + if (list_req.status == 404) { + friends_list.classList.add("hidden") + return; + } else if (list_req.status === 200) { + friends_list.classList.remove("hidden") + + let list = (await list_req.json()).friends as JSON; + + for (let i = 0; i < data.n_friends; i++) { + let new_friends = document.createElement('li'); + + const activitySpan = document.createElement('span'); + const isLogged = await isFriendLogged(list[i].friendName) + activitySpan.textContent = "•"; + if (isLogged == true) + activitySpan.className = "px-0 text-green-500"; + else + activitySpan.className = "px-0 text-red-500"; + + + const span = document.createElement('span'); + span.className = "px-3"; + span.textContent = list[i].friendName; + + const but = document.createElement('button'); + but.textContent = "-"; + but.classList.add("px-0", "py-0", "taskbar-button"); + but.onclick = function() { + removeFriend(list[i].friendName); + }; + + new_friends.appendChild(activitySpan); + new_friends.appendChild(span); + new_friends.appendChild(but); + friends_list.appendChild(new_friends); + } + } else { + friends_error_message.innerHTML = (await list_req.json()).error; + friends_error_message.classList.remove("hidden"); + } + } else { + friends_list.classList.add("hidden") + } + } + + const add_friend = async () => { + const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/" + new_friend.value, { + method: "POST", + 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() + return + } + list_friends() + new_friend.value = ''; + } + + try { + const data_req = await fetch("http://localhost:3002/users/" + uuid + "/friends/count", { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + credentials: "include", + }); + if (data_req.status === 200) { + // let data = await data_req.json(); + list_friends() + } + } catch (error) { + friends_error_message.innerHTML = "failed to fetch friends"; + friends_error_message.classList.remove("hidden"); + } + document.getElementById("add-friends-button")?.addEventListener("click", add_friend); + setInterval(list_friends, 30000); + } +} diff --git a/src/front/static/ts/views/ProfileMenu.ts b/src/front/static/ts/views/ProfileMenu.ts index 0113c08..c2937d5 100644 --- a/src/front/static/ts/views/ProfileMenu.ts +++ b/src/front/static/ts/views/ProfileMenu.ts @@ -2,7 +2,6 @@ import Aview from "./Aview.ts" import { isLogged, navigationManager } from "../main.ts" export default class extends Aview { - async getHTML() { return `
@@ -66,6 +65,7 @@ export default class extends Aview {
profile settings + friends `; }