add: profiles and profile page

frontend/static/css/profiles/profile.css

@@ -0,0 +1,11 @@
+#app #avatar
+{
+	height: 100px;
+	width: 100px;
+}
+
+#app #username
+{
+	height: 100px;
+	width: 100px;
+}

frontend/static/css/profiles/profiles.css

@@ -0,0 +1,11 @@
+#app .item img
+{
+	height: 100px;
+	width: 100px;
+}
+
+#app .item a
+{
+	height: 100px;
+	width: 100px;
+}

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}

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: "/profiles", view: ProfilesView},
-        { path: "/posts/:id", view: PostView },
+        { path: "/profiles/:id", view: ProfilePageView },
         { path: "/settings", view: Settings },
         { path: "/login", view: LoginView },
         { path: "/logout", view: LogoutView },

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 {

frontend/static/js/views/PostView.js

@@ -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 `
-            <h1>Post</h1>
-            <p>You are viewing post #${this.postId}.</p>
-        `;
-    }
-}

frontend/static/js/views/Posts.js

@@ -1,14 +0,0 @@
-import AbstractView from "./AbstractView.js";
-
-export default class extends AbstractView {
-    constructor(params) {
-        super(params, "Posts");
-    }
-
-    async getHtml() {
-        return `
-            <h1>Posts</h1>
-            <p>You are viewing the posts!</p>
-        `;
-    }
-}

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 `
+            <link rel="stylesheet" href="/static/css/profiles/profile.css">
+		    <img id="avatar"/>
+		    <a id="username"></a>
+        `;
+    }
+}

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 `
+			<link rel="stylesheet" href="/static/css/profiles/profiles.css">
+		    <div id="profile-list">
+			
+			</div>
+        `;
+    }
+}

frontend/templates/index.html

@@ -10,8 +10,7 @@
 <body>
     <nav class="nav">
         <a href="/" class="nav__link" data-link>Dashboard</a>
-        <a href="/posts" class="nav__link" data-link>Posts</a>
+        <a href="/profiles" class="nav__link" data-link>Profiles</a>
-        <a href="/settings" class="nav__link" data-link>Settings</a>
         <a href="/login" class="nav__link" data-link>Login</a>
         <a href="/register" class="nav__link" data-link>Register</a>
         <a href="/chat" class="nav__link" data-link>Chat</a>

profiles/viewsets.py

@@ -11,22 +11,22 @@ from .serializers import ProfileSerializer
 from .models import ProfileModel
 
 class ProfileViewSet(viewsets.ModelViewSet):
-    queryset = ProfileModel.objects.order_by('-pk')
+    queryset = ProfileModel.objects.all()
     serializer_class = ProfileSerializer
     parser_classes = (MultiPartParser, FormParser)
     permission_classes = (permissions.IsAuthenticatedOrReadOnly,)
 
     def retrieve(self, request: HttpRequest, pk=None):
         instance = self.get_object()
-        instance.avatar_url.name = instance.avatar_url.name.replace("profiles", "", 1)
+        instance.avatar_url.name = instance.avatar_url.name[instance.avatar_url.name.find("static") - 1:]
         return Response(self.serializer_class(instance).data,
                         status=status.HTTP_200_OK)
 
-    def get_queryset(self):
+    def list(self, request: HttpRequest):
-        profiles = ProfileModel.objects.all()
+        serializer = ProfileSerializer(self.queryset, many=True)
-        for profile in profiles:
+        for profile in serializer.data:
-            profile.avatar_url.name = profile.avatar_url.name.replace("profiles", "", 1)
+            profile["avatar_url"] = profile["avatar_url"][profile["avatar_url"].find("static") - 1:]
-        return profiles
+        return Response(serializer.data)
 
     def perform_create(self, serializer):
         serializer.save(user=self.request.user)