aboutsummaryrefslogtreecommitdiff
path: root/src/app/components/profile
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/components/profile')
-rw-r--r--src/app/components/profile/profile.component.css110
-rw-r--r--src/app/components/profile/profile.component.html97
-rw-r--r--src/app/components/profile/profile.component.ts111
3 files changed, 107 insertions, 211 deletions
diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css
index ebcd406..c7e112f 100644
--- a/src/app/components/profile/profile.component.css
+++ b/src/app/components/profile/profile.component.css
@@ -1,105 +1,27 @@
-* {
- box-sizing: border-box;
+#user-info {
+ font-size: 1.3em;
}
-#content {
- max-width: 22em;
- justify-content: start;
+#profile-picture {
+ height: 5rem;
+ width: 5rem;
}
-hr {
- width: calc(100% - 1em);
- color: black;
- border: 1px solid black;
+.sec-info-card {
+ padding-bottom: calc(var(--card-padding) - 0.3em);
}
-form {
- width: 100%;
+.sec-info-title {
+ padding-bottom: 0.2em;
+ margin-bottom: 0.3em;
}
-/* Navigation bar (for loggedin user) */
-
-#navigation {
- display: flex;
- width: 100%;
-}
-
-.submit-btn {
- flex: 1;
- margin-top: 0;
- margin-left: .5em;
- font-size: inherit;
-}
-
-#navigation > .submit-btn:first-child {
- margin-left: 0;
-}
-
-/* Top card */
-
-#main-info {
- display: flex;
- width: 100%;
- margin-bottom: .25em
-}
-
-#main-info > img {
- width: 5em;
- height: 5em;
-}
-
-#other-main-info {
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
-}
-
-#other-main-info > * {
- font-size: 1.4em;
-}
-
-#other-main-info *:nth-child(1) {
- margin-top: auto;
-}
-
-#other-main-info *:nth-last-child(1) {
- margin-bottom: auto;
-}
-
-#add-friend, #loggedin-password {
- flex: 0 !important;
- margin-top: .4em;
- max-width: 8em;
- font-size: .6em !important;
-}
-
-#loggedin-password {
- max-width: 100%;
-}
-
-/* Languages and technologies */
-
-.secondary-info {
- margin-top: .25em;
- margin-bottom: .25em;
- width: 100%;
- display: flex;
- align-items: center;
- flex-wrap: wrap;
-}
-
-/* Posts */
-
-#no-posts {
- width: 100%;
- text-align: center;
- color: gray;
- margin-top: .2em;
+.none-message {
+ margin-bottom: 0.3em;
}
-#posts {
- width: 100%;
- height: 100%;
+.sec-info {
+ width: fit-content;
+ background-color: #424242;
+ margin: 0 0.3em 0.3em 0;
}
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 0e5f633..c6fdee6 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -1,60 +1,57 @@
+<app-navbar></app-navbar>
+
<app-loading *ngIf="!dataArrived"></app-loading>
-<div id="content" *ngIf="dataArrived">
- <nav id="navigation">
- <button class="submit-btn" (click)="goBack()">ᐊ Back</button>
- <button class="submit-btn" (click)="navigateToSettings()" *ngIf="isTheLoggedInUser">Settings</button>
- <button class="submit-btn" (click)="navigateToAdminPanel()" *ngIf="isTheLoggedInUser && isAdminUser">Panel</button>
- <button class="submit-btn" (click)="logout()" *ngIf="isTheLoggedInUser">Logout</button>
- </nav>
- <hr>
- <div class="scroll-standalone" (scroll)="onScroll($event)">
- <div id="main-info" class="rounded-border">
- <img class="round-image" [src]="user.profilePictureURL" alt=""/>
- <div id="other-main-info">
- <div id="name">
- {{ user.firstName }} {{ user.lastName }}
- </div>
- <div id="username">
- @{{ user.userName }}
- </div>
- <form [formGroup]="updateFrienship" (ngSubmit)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
- <button id="add-friend" type="submit" class="submit-btn">{{ friendOfUser ? 'Unfriend' : 'Add friend' }}</button>
- <br>
- <input id="loggedin-password" type="password" formControlName="password" class="input-field" *ngIf="updatingFriendship" placeholder="Type in password to confirm">
- </form>
- </div>
+<main class="scroll-standalone under-navbar flex-col centered-content" *ngIf="dataArrived" (scroll)="onScroll($event)">
+ <section id="user-info" class="card flex-row width-full flex-justify-center">
+ <div>
+ <img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
</div>
- <div class="secondary-info rounded-border">
- Languages:
- <div *ngFor="let lang of user.languages">
- <div class="user-language">
- {{ lang.name }}
- </div>
+ <div class="flexible flex-col flex-center-align-items flex-justify-center side-padding-dot3">
+ <div class="text-centered">
+ {{ user.firstName }} {{ user.lastName }}
</div>
- <div *ngIf="user.languages.length === 0">
- &nbsp;None
+ <div>
+ @{{ user.userName }}
</div>
+ <button id="add-friend" class="border-faded-slim padding-dot3 lighter-hover click-effect border-radius-dot3 font-size-dot8 margin-top-dot4" (click)="modifyFriend()" *ngIf="!isTheLoggedInUser && isUserLoggedIn">
+ {{ friendOfUser ? 'Unfriend' : 'Add friend' }}
+ </button>
</div>
- <div class="secondary-info rounded-border">
- Technologies:
- <div *ngFor="let tech of user.technologies">
- <div class="user-language">
- {{ tech.name }}
- </div>
- </div>
- <div *ngIf="user.technologies.length === 0">
- &nbsp;None
- </div>
+ </section>
+ <section class="card sec-info-card flex-col width-full">
+ <div class="sec-info-title border-faded-slim border-bottom-only">
+ Languages
+ </div>
+ <div class="none-message" *ngIf="user.languages.length === 0">
+ None
</div>
- <hr>
- <div id="posts">
- <div id="no-posts" *ngIf="userPosts.length === 0">
- {{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
+ <div class="flex-row">
+ <div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let lang of user.languages">
+ {{ lang.name }}
</div>
- <div *ngFor="let userPost of userPosts">
- <app-post [paramId]="userPost.postId.toString()"></app-post>
+ </div>
+ </section>
+ <section class="card sec-info-card flex-col width-full">
+ <div class="sec-info-title border-faded-slim border-bottom-only">
+ Technologies
+ </div>
+ <div class="none-message" *ngIf="user.technologies.length === 0">
+ None
+ </div>
+ <div class="flex-row">
+ <div class="sec-info border-radius-dot5r padding-dot2" *ngFor="let tech of user.technologies">
+ {{ tech.name }}
</div>
</div>
- </div>
-</div>
+ </section>
+ <hr class="card-hr">
+ <section>
+ <div class="text-centered" *ngIf="userPosts.length === 0">
+ {{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
+ </div>
+ <div *ngFor="let userPost of userPosts">
+ <app-post [paramId]="userPost.postId.toString()"></app-post>
+ </div>
+ </section>
+</main>
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index bbf8585..f9f64b5 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -1,18 +1,16 @@
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from 'src/app/services/user.service';
-import { User } from 'src/models/identity/user';
+import { User } from 'src/models/identity/user.model';
import { AppConstants } from 'src/app/app-constants.module';
-import { HttpErrorResponse } from '@angular/common/http';
import { Location } from '@angular/common';
import { LanguageService } from 'src/app/services/language.service';
import { TechnologyService } from 'src/app/services/technology.service';
-import { Post } from 'src/models/post';
+import { Post } from 'src/models/post.model';
import { FeedService } from 'src/app/services/feed.service';
import { TokenService } from 'src/app/services/token.service';
import { Title } from '@angular/platform-browser';
-import { Friend } from 'src/models/identity/friend';
-import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
+import { FriendService } from 'src/app/services/friend.service';
@Component({
selector: 'app-profile',
@@ -29,44 +27,34 @@ export class ProfileComponent implements OnInit {
public isAdminUser = false;
public dataArrived = false;
public friendOfUser = false;
- public updatingFriendship = false;
public user: User;
public userPosts: Post[];
- public updateFrienship: FormGroup;
- constructor(private _titleService: Title, private _fb: FormBuilder, private _router: Router, private _userService: UserService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _feedService: FeedService, private _location: Location, private _tokenService: TokenService) {
+ constructor(private _titleService: Title, private _router: Router, private _userService: UserService, private _friendService: FriendService, private _languageService: LanguageService, private _technologyService: TechnologyService, private _feedService: FeedService, private _location: Location, private _tokenService: TokenService) {
this._titleService.setTitle(this._title);
}
- private setDefaultUser(): void {
- this.user = this._userService.getDefaultUser();
- }
-
ngOnInit(): void {
this._urlUsername = this._router.url.substring(9);
const now = new Date();
- now.setHours(now.getHours() + 2); // accounting for eastern europe timezone
+ now.setHours(now.getHours() + 3); // accounting for eastern europe timezone
this._timeLoaded = now.toISOString();
this._currentPage = 1;
this.user = this._userService.getDefaultUser();
this.userPosts = [];
- this.updateFrienship = this._fb.group({
- password: new FormControl('')
- });
-
- this._userService.getUserByUsernameRequest(this._urlUsername).subscribe(
- (res: object) => {
+ this._userService.getUserByUsernameRequest(this._urlUsername).subscribe({
+ next: (res: object) => {
Object.assign(this.user, res);
this.isAdminUser = this.user.roles.map(x => x.name).includes(AppConstants.ADMIN_ROLE_NAME);
this.loadLanguages();
},
- (err: HttpErrorResponse) => {
+ error: () => {
this._router.navigate(['/not-found']);
}
- );
+ });
}
private loadLanguages(): void {
@@ -96,17 +84,17 @@ export class ProfileComponent implements OnInit {
}
private loadPosts(): void {
- this._feedService.getUserPostsRequest(this.user.userName, this._currentPage++, this._timeLoaded, AppConstants.PAGE_SIZE).subscribe(
- (result: object) => {
+ this._feedService.getUserPostsRequest(this.user.userName, this._currentPage++, this._timeLoaded, AppConstants.PAGE_SIZE).subscribe({
+ next: (result: object) => {
const resultArr: Post[] = Object.values(result)[0];
this.userPosts.push(...resultArr);
this.finishUserLoading();
},
- (err: HttpErrorResponse) => {
+ error: () => {
this._currentPage = -1;
this.finishUserLoading();
}
- );
+ });
}
private finishUserLoading(): void {
@@ -114,8 +102,8 @@ export class ProfileComponent implements OnInit {
this.isUserLoggedIn = true;
const userFromToken: User = this._userService.getDefaultUser();
- this._userService.getUserFromSessionStorageRequest().subscribe(
- (tokenRes: object) => {
+ this._userService.getUserFromSessionStorageRequest().subscribe({
+ next: (tokenRes: object) => {
Object.assign(userFromToken, tokenRes);
if (userFromToken.friends.map(x => x.userName).includes(this._urlUsername)) {
@@ -126,28 +114,16 @@ export class ProfileComponent implements OnInit {
}
this.dataArrived = true;
},
- (err: HttpErrorResponse) => {
+ error: () => {
this.logout();
}
- );
+ });
}
else {
this.dataArrived = true;
}
}
- goBack(): void {
- this._router.navigate(['/']);
- }
-
- navigateToAdminPanel(): void {
- this._router.navigate(['/admin-panel']);
- }
-
- navigateToSettings(): void {
- this._router.navigate([this._router.url + '/settings']);
- }
-
logout(): void {
this._tokenService.logoutUserFromSessionStorage();
@@ -158,34 +134,35 @@ export class ProfileComponent implements OnInit {
}
modifyFriend(): void {
- if (this.updatingFriendship) {
- this.dataArrived = false;
-
- this._userService.getUserFromSessionStorageRequest().subscribe(
- (result: object) => {
- const loggedInUser: User = result as User;
+ this.dataArrived = false;
+ if (this.friendOfUser) {
+ this.removeFriendFromLoggedInUser();
+ }
+ else {
+ this.addFriendToLoggedInUser();
+ }
+ }
- if (this.friendOfUser) {
- loggedInUser.friends = loggedInUser.friends.filter(x => x.userName !== this.user.userName);
- }
- else {
- const newFriend = new Friend();
- newFriend.userName = this.user.userName;
- loggedInUser.friends.push(newFriend);
- }
+ private addFriendToLoggedInUser(): void {
+ this._friendService.postFriendWithSessionStorageRequest(this.user.userName).subscribe({
+ next: () => {
+ this.reloadPage();
+ },
+ error: () => {
+ this._router.navigate(['/']);
+ }
+ });
+ }
- this._userService.putBareUserFromSessionStorageRequest(loggedInUser, this.updateFrienship.get('password')?.value).subscribe(
- (resultUpdate: object) => {
- this.reloadPage();
- },
- (err: HttpErrorResponse) => {
- this._router.navigate(['/']);
- }
- );
- }
- );
- }
- this.updatingFriendship = !this.updatingFriendship;
+ private removeFriendFromLoggedInUser(): void {
+ this._friendService.deleteFriendWithSessionStorageRequest(this.user.userName).subscribe({
+ next: () => {
+ this.reloadPage();
+ },
+ error: () => {
+ this._router.navigate(['/']);
+ }
+ });
}
onScroll(event: any): void {
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-14 10:48:20 +0000