diff --git a/frontend/static/css/profiles/profile.css b/frontend/static/css/profiles/profile.css new file mode 100644 index 0000000..559ea88 --- /dev/null +++ b/frontend/static/css/profiles/profile.css @@ -0,0 +1,11 @@ +#app #avatar +{ + height: 100px; + width: 100px; +} + +#app #username +{ + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/frontend/static/css/profiles/profiles.css b/frontend/static/css/profiles/profiles.css new file mode 100644 index 0000000..7002c0f --- /dev/null +++ b/frontend/static/css/profiles/profiles.css @@ -0,0 +1,11 @@ +#app .item img +{ + height: 100px; + width: 100px; +} + +#app .item a +{ + height: 100px; + width: 100px; +} \ No newline at end of file diff --git a/frontend/static/js/api/profiles.js b/frontend/static/js/api/profiles.js index 7a73dd0..c439abc 100644 --- a/frontend/static/js/api/profiles.js +++ b/frontend/static/js/api/profiles.js @@ -18,6 +18,13 @@ class Profiles }); return profiles; } + + async getProfile(user_id) + { + let profile = new Profile(this.client); + await profile.init(user_id); + return profile; + } } export {Profiles} \ No newline at end of file diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js index e923833..c263079 100644 --- a/frontend/static/js/index.js +++ b/frontend/static/js/index.js @@ -1,7 +1,5 @@ import LoginView from "./views/accounts/LoginView.js"; import Dashboard from "./views/Dashboard.js"; -import Posts from "./views/Posts.js"; -import PostView from "./views/PostView.js"; import Settings from "./views/Settings.js"; import Chat from "./views/Chat.js"; import HomeView from "./views/HomeView.js"; @@ -11,6 +9,8 @@ import LogoutView from "./views/accounts/LogoutView.js"; import { Client } from "./api/client.js"; import AbstractRedirectView from "./views/AbstractRedirectView.js"; import MeView from "./views/MeView.js"; +import ProfilePageView from "./views/profiles/ProfilePageView.js"; +import ProfilesView from "./views/profiles/ProfilesView.js"; let client = new Client(location.protocol + "//" + location.host) @@ -35,8 +35,8 @@ const navigateTo = async (uri) => { const router = async (uri = "") => { const routes = [ { path: "/", view: Dashboard }, - { path: "/posts", view: Posts }, - { path: "/posts/:id", view: PostView }, + { path: "/profiles", view: ProfilesView}, + { path: "/profiles/:id", view: ProfilePageView }, { path: "/settings", view: Settings }, { path: "/login", view: LoginView }, { path: "/logout", view: LogoutView }, diff --git a/frontend/static/js/views/HomeView.js b/frontend/static/js/views/HomeView.js index 1bd431e..d9fd194 100644 --- a/frontend/static/js/views/HomeView.js +++ b/frontend/static/js/views/HomeView.js @@ -1,4 +1,3 @@ -import { client } from "../index.js"; import AbstractAuthentificateView from "./AbstractAuthentifiedView.js"; export default class extends AbstractAuthentificateView { diff --git a/frontend/static/js/views/PostView.js b/frontend/static/js/views/PostView.js deleted file mode 100644 index d5f01bf..0000000 --- a/frontend/static/js/views/PostView.js +++ /dev/null @@ -1,15 +0,0 @@ -import AbstractView from "./AbstractView.js"; - -export default class extends AbstractView { - constructor(params) { - super(params, "Viewing Post"); - this.postId = params.id; - } - - async getHtml() { - return ` -
You are viewing post #${this.postId}.
- `; - } -} diff --git a/frontend/static/js/views/Posts.js b/frontend/static/js/views/Posts.js deleted file mode 100644 index f000557..0000000 --- a/frontend/static/js/views/Posts.js +++ /dev/null @@ -1,14 +0,0 @@ -import AbstractView from "./AbstractView.js"; - -export default class extends AbstractView { - constructor(params) { - super(params, "Posts"); - } - - async getHtml() { - return ` -You are viewing the posts!
- `; - } -} \ No newline at end of file diff --git a/frontend/static/js/views/profiles/ProfilePageView.js b/frontend/static/js/views/profiles/ProfilePageView.js new file mode 100644 index 0000000..ffd9ee7 --- /dev/null +++ b/frontend/static/js/views/profiles/ProfilePageView.js @@ -0,0 +1,29 @@ +import AbstractView from "../AbstractView.js"; +import { client } from "../../index.js" + +export default class extends AbstractView { + constructor(params) { + super(params, "Profile "); + this.user_id = params.id; + } + + async postInit() + { + let profile = await client.profiles.getProfile(this.user_id); + + let username_element = document.getElementById("username"); + username_element.href = `/profiles/${this.user_id}`; + username_element.appendChild(document.createTextNode(profile.username)); + + let avatar_element = document.getElementById("avatar"); + avatar_element.src = profile.avatar_url; + } + + async getHtml() { + return ` + + + + `; + } +} \ No newline at end of file diff --git a/frontend/static/js/views/profiles/ProfilesView.js b/frontend/static/js/views/profiles/ProfilesView.js new file mode 100644 index 0000000..d07284e --- /dev/null +++ b/frontend/static/js/views/profiles/ProfilesView.js @@ -0,0 +1,40 @@ +import AbstractView from "../AbstractView.js"; +import { client } from "../../index.js" + +export default class extends AbstractView { + constructor(params) { + super(params, "Profiles"); + } + + async postInit() + { + let profiles = await client.profiles.all() + let profile_list_element = document.getElementById("profile-list") + + profiles.forEach((profile) => { + let profile_element = document.createElement("div"); + profile_element.className = "item"; + + let avatar = document.createElement("img"); + avatar.src = profile.avatar_url; + + let username = document.createElement("a"); + username.href = `/profiles/${profile.user_id}`; + username.appendChild(document.createTextNode(profile.username)); + + profile_element.appendChild(avatar); + profile_element.appendChild(username); + + profile_list_element.appendChild(profile_element) + }); + } + + async getHtml() { + return ` + +