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 5301e4e..731a972 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", { @@ -40,7 +42,6 @@ const routes = [ { path: "/login", view: () => import("./views/LoginPage.ts") }, { path: "/register", view: () => import("./views/RegisterPage.ts") }, - { path: "/friends", view: () => import("./views/Friends.ts") }, { path: "/profile", view: () => import("./views/Profile.ts") }, { path: "/settings", view: () => import("./views/Settings.ts") }, ]; @@ -74,11 +75,17 @@ window.addEventListener("popstate", router); document.addEventListener("DOMContentLoaded", () => { isLogged(); + + document.body.addEventListener("click", e => { if (!e.target.closest("#taskbar-menu") && !e.target.matches("#profile-button")) { 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); @@ -114,6 +121,8 @@ function updateClock() clock.innerHTML = `${days[now.getDay()]} ${now.getDate()} ${months[now.getMonth()]} ` + hours + ":" + minutes; } +friends_view.run(); + setInterval(updateClock, 5000); updateClock(); diff --git a/src/front/static/ts/views/Friends.ts b/src/front/static/ts/views/Friends.ts index 2a9d0b3..7e11e4e 100644 --- a/src/front/static/ts/views/Friends.ts +++ b/src/front/static/ts/views/Friends.ts @@ -5,6 +5,8 @@ import { isLogged, navigationManager } from "../main.ts" export default class extends Aview { + open: Boolean = false; + constructor() { super(); this.setTitle("friends list"); @@ -13,28 +15,22 @@ export default class extends Aview { async getHTML() { return ` -
-
+
+
friends.ts -
- - - × -
-
-
- - +
+ + + - -
-
@@ -46,27 +42,37 @@ export default class extends Aview { if (!await isLogged()) navigationManager("/"); - dragElement(document.getElementById("window")); + 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 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) { + 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 success fully"); + 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 { @@ -92,6 +98,9 @@ export default class extends Aview { 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", { @@ -105,9 +114,6 @@ export default class extends Aview { friends_list.classList.add("hidden") return; } else if (list_req.status === 200) { - while (friends_list.firstChild) { - friends_list.removeChild(friends_list.firstChild); - } friends_list.classList.remove("hidden") let list = (await list_req.json()).friends as JSON; @@ -120,7 +126,7 @@ export default class extends Aview { activitySpan.textContent = "•"; if (isLogged == true) activitySpan.className = "px-0 text-green-500"; - else + else activitySpan.className = "px-0 text-red-500"; @@ -130,11 +136,10 @@ export default class extends Aview { const but = document.createElement('button'); but.textContent = "-"; - but.className = "bg-red-500 text-white px-2 py-0 rounded hover:bg-red-600"; + but.classList.add("px-0", "py-0", "taskbar-button"); but.onclick = function() { removeFriend(list[i].friendName); - list_friends() - } + }; new_friends.appendChild(activitySpan); new_friends.appendChild(span); @@ -142,17 +147,14 @@ export default class extends Aview { friends_list.appendChild(new_friends); } } else { - n_friends.classList.add("hidden"); friends_error_message.innerHTML = (await list_req.json()).error; friends_error_message.classList.remove("hidden"); } } else { - friends_message.innerHTML = "you have no friends D:"; - friends_message.classList.remove("hidden"); + 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", @@ -185,10 +187,7 @@ export default class extends Aview { credentials: "include", }); if (data_req.status === 200) { - let data = await data_req.json(); - n_friends.innerHTML = ":D friends count : " + data.n_friends; - n_friends.classList.remove("hidden"); - + // let data = await data_req.json(); list_friends() } } catch (error) { diff --git a/src/front/static/ts/views/ProfileMenu.ts b/src/front/static/ts/views/ProfileMenu.ts index 9409360..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 `