aboutsummaryrefslogtreecommitdiff
path: root/src/app/components/profile/profile.component.html
blob: 7632620de8c2a87eab49829c4f84b53d469b66bf (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<app-navbar></app-navbar>

<app-loading *ngIf="!dataArrived"></app-loading>

<main class="scroll-standalone under-navbar flex-col centered-content" *ngIf="dataArrived" (scroll)="onScroll($event)">
	<section id="user-info" class="card flex-row full-width flex-justify-center">
		<div>
			<img id="profile-picture" class="round-image" [src]="user.profilePictureURL">
		</div>
		<div class="flexible flex-col flex-center-align-items flex-justify-center">
			<div class="text-centered">
				{{ user.firstName }} {{ user.lastName }}
			</div>
			<div>
				@{{ 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>
	</section>
	<section class="card sec-info-card flex-col full-width">
		<div class="sec-info-title faded-slim-border border-bottom-only">
			Languages
		</div>
		<div class="none-message" *ngIf="user.languages.length === 0">
			None
		</div>
		<div class="flex-row" *ngFor="let lang of user.languages">
			<div class="sec-info border-radius-normal padding-small">
				{{ lang.name }}
			</div>
		</div>
	</section>
	<section class="card sec-info-card flex-col full-width">
		<div class="sec-info-title faded-slim-border border-bottom-only">
			Technologies
		</div>
		<div class="none-message" *ngIf="user.technologies.length === 0">
			None
		</div>
		<div  class="flex-row" *ngFor="let tech of user.technologies">
			<div class="sec-info border-radius-normal padding-small">
				{{ tech.name }}
			</div>
		</div>
	</section>
	<hr class="card-hr">
	<section>
		<div *ngIf="userPosts.length === 0">
			{{ user.firstName }} {{ user.lastName }} hasn't posted anything yet!
		</div>
		<div *ngFor="let userPost of userPosts; let i = index">
			<app-post [paramId]="userPost.postId.toString()" [index]="i"></app-post>
		</div>
	</section>
</main>