From 2314b0bd3a2b3a37769ef7e8a4ddbd2c04f5ee43 Mon Sep 17 00:00:00 2001 From: adjoly Date: Sat, 18 Oct 2025 20:04:34 +0200 Subject: [PATCH 1/6] =?UTF-8?q?=E3=80=8C=F0=9F=8F=97=EF=B8=8F=E3=80=8D=20w?= =?UTF-8?q?ip:=20starting=20being=20a=20fullstack=20dev?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/front/static/ts/main.ts | 31 +++++++++---------- src/front/static/ts/views/Friends.ts | 45 ++++++++++++++++++++++++++++ 2 files changed, 59 insertions(+), 17 deletions(-) create mode 100644 src/front/static/ts/views/Friends.ts diff --git a/src/front/static/ts/main.ts b/src/front/static/ts/main.ts index 6533fd8..112b5a9 100644 --- a/src/front/static/ts/main.ts +++ b/src/front/static/ts/main.ts @@ -7,10 +7,9 @@ export async function isLogged(): Promise { method: "GET", credentials: "include", }); - if (uuid_req.status === 200) - { + if (uuid_req.status === 200) { let uuid = await uuid_req.json(); - document.cookie = `uuid=${uuid.user};max-age=${60*60*24*7}`; + document.cookie = `uuid=${uuid.user};max-age=${60 * 60 * 24 * 7}`; return true; } else // 401 @@ -40,6 +39,8 @@ const routes = [ { path: "/login", view: () => import("./views/LoginPage.ts") }, { path: "/register", view: () => import("./views/RegisterPage.ts") }, + + { path: "/friends", view: () => import("./views/Friends.ts") } ]; const router = async () => { @@ -65,20 +66,18 @@ const router = async () => { view.run(); }; -document.getElementById("profile-button")?.addEventListener("click", () => {profile_view.run();}); +document.getElementById("profile-button")?.addEventListener("click", () => { profile_view.run(); }); 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("[data-link]")) - { + 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("[data-link]")) { e.preventDefault(); navigationManager(e.target.href); } @@ -86,9 +85,8 @@ document.addEventListener("DOMContentLoaded", () => { e.preventDefault(); }); - document.body.addEventListener("dblclick", e=> { - if (e.target.closest("[data-icon]")) - { + document.body.addEventListener("dblclick", e => { + if (e.target.closest("[data-icon]")) { e.preventDefault(); navigationManager(e.target.closest("[data-icon]").href); } @@ -99,8 +97,7 @@ document.addEventListener("DOMContentLoaded", () => { oneko(); -function updateClock() -{ +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..d384508 --- /dev/null +++ b/src/front/static/ts/views/Friends.ts @@ -0,0 +1,45 @@ +import Aview from "./Aview.ts" +import { setOnekoState } from "../oneko.ts" + +export default class extends Aview { + + constructor() { + super(); + this.setTitle("Friends list"); + setOnekoState("default"); + } + + async getHTML() { + return ` +
+
+ friends.ts +
+ + + × +
+
+ +
+

+
+
+ `; + } + + async run() { + let uuid: String; + + uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2]; + + const userdata_req = await fetch(`http://localhost:3002/users/${uuid}`, { + method: "GET", + credentials: "include", + }); + if (userdata_req.status == 404) { + console.error("invalid user"); + return; + } + } +} From 451a7e88a3f0226635228cd61c507529e7821919 Mon Sep 17 00:00:00 2001 From: adjoly Date: Sat, 18 Oct 2025 21:29:51 +0200 Subject: [PATCH 2/6] =?UTF-8?q?=E3=80=8C=F0=9F=8F=97=EF=B8=8F=E3=80=8D=20w?= =?UTF-8?q?ip:=20friends=20list=20working=20(kinda)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/front/static/ts/views/Friends.ts | 65 +++++++++++++++++++++++----- 1 file changed, 55 insertions(+), 10 deletions(-) diff --git a/src/front/static/ts/views/Friends.ts b/src/front/static/ts/views/Friends.ts index d384508..2908abf 100644 --- a/src/front/static/ts/views/Friends.ts +++ b/src/front/static/ts/views/Friends.ts @@ -1,5 +1,6 @@ import Aview from "./Aview.ts" import { setOnekoState } from "../oneko.ts" +import { dragElement } from "./drag.ts"; export default class extends Aview { @@ -21,8 +22,11 @@ export default class extends Aview { -
-

+
+ + +
`; @@ -31,15 +35,56 @@ export default class extends Aview { async run() { let uuid: String; - uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2]; + 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); - const userdata_req = await fetch(`http://localhost:3002/users/${uuid}`, { - method: "GET", - credentials: "include", - }); - if (userdata_req.status == 404) { - console.error("invalid user"); - return; + try { + uuid = document.cookie.match(new RegExp('(^| )' + "uuid" + '=([^;]+)'))[2]; + 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(); + n_friends.innerHTML = ":D friends count : " + data.n_friends; + n_friends.classList.remove("hidden"); + + if (data.n_friends > 0) { + const list_req = await fetch("http://localhost:3002/users/" + uuid + "/friends?iStart=0&iEnd=20", { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + credentials: "include", + }); + 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') + new_friends.innerHTML = list[i].friendName; + 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_error_message.innerHTML = "failed to fetch friends"; + friends_error_message.classList.remove("hidden"); + } + } + } catch (error) { + friends_error_message.innerHTML = "failed to fetch friends"; + friends_error_message.classList.remove("hidden"); } } } From c0b019064d78a7cf0d03e9a01df1c1c477365ba2 Mon Sep 17 00:00:00 2001 From: adjoly Date: Sat, 18 Oct 2025 21:55:49 +0200 Subject: [PATCH 3/6] =?UTF-8?q?=E3=80=8C=F0=9F=8F=97=EF=B8=8F=E3=80=8D=20w?= =?UTF-8?q?ip:=20add=20and=20remove=20working?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/front/static/ts/views/Friends.ts | 131 +++++++++++++++++++++------ 1 file changed, 103 insertions(+), 28 deletions(-) diff --git a/src/front/static/ts/views/Friends.ts b/src/front/static/ts/views/Friends.ts index 2908abf..054ea3f 100644 --- a/src/front/static/ts/views/Friends.ts +++ b/src/front/static/ts/views/Friends.ts @@ -23,6 +23,14 @@ export default class extends Aview {
+ +
+ + + + + +
- -
+ -
+
+
-
- 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 `