From 7c9c0653c68ecd5ad7e9c5b48922874fd6901fb1 Mon Sep 17 00:00:00 2001
From: Sonja Galovic <galovicsonja@gmail.com>
Date: Wed, 23 Mar 2022 21:57:28 +0100
Subject: Profile page - dodata opcija izbora profilne slike. Svi pozivi rade.

---
 .../src/app/_pages/profile/profile.component.html  | 108 ++++++++++++---------
 1 file changed, 63 insertions(+), 45 deletions(-)

(limited to 'frontend/src/app/_pages/profile/profile.component.html')

diff --git a/frontend/src/app/_pages/profile/profile.component.html b/frontend/src/app/_pages/profile/profile.component.html
index fba95218..24efaeb5 100644
--- a/frontend/src/app/_pages/profile/profile.component.html
+++ b/frontend/src/app/_pages/profile/profile.component.html
@@ -1,4 +1,4 @@
-<div class="container-xl px-4 mt-4">
+<div class="container-xl px-4 mt-1">
     <hr class="mt-0 mb-4">
 
     <div class="row">
@@ -9,15 +9,58 @@
                 <div class="card-body text-center">
                     <div class=" image d-flex flex-column justify-content-center align-items-center">
                         <!-- Profile picture image-->
-                        <img class="img-account-profile rounded-circle mb-2" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="">
+                        <img class="img-account-profile rounded-circle mb-2" src="{{this.photoPath}}" alt="profilePicture">
                         <!-- User's info -->
                         <span>@ {{this.user.username}}</span>
                         <span class="mt-3" style="font-weight: bold;">{{this.user.firstName}} {{this.user.lastName}}</span> 
-                        <span>{{this.email}}</span>
                     </div>
                 </div>
             </div>
+
+            <!-- Password Change card -->
+            <div class="card mt-3">
+                <div class="card-header">Promena lozinke</div>
+                <div class="card-body">
+                    <form>
+                        <div class="row">
+                            <!-- Form Row-->
+                            <div class="row gx-3 mb-3">
+                                <!-- Form Group (password)-->
+                                <div class="col-md-6">
+                                    <label class="small mb-1" for="inputPassword">Važeća lozinka</label>
+                                    <input class="form-control" id="inputPassword" name="inputPassword" type="password" [(ngModel)]="this.oldPass" placeholder="Trenutna lozinka">
+                                    <small *ngIf="wrongPassBool" class="form-text text-danger">Neispravna lozinka.</small>
+                                </div>
+                                <!-- Form Group (new password)-->
+                                <div class="col-md-6">
+                                    <label class="small mb-1" for="inputNewPassword">Nova lozinka</label>
+                                    <input class="form-control" id="inputNewPassword" name="inputNewPassword" type="password" [(ngModel)]="this.newPass1" placeholder="Ukucaj novu lozinku">
+                                    <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
+                                </div>
+                            </div>
+    
+                            <!-- Form Row-->
+                            <div class="row gx-3 mb-3">
+                                <div class="col-md-6">
+                                    <div class="col text-center">
+                                        <!-- Save changes button-->
+                                        <button class="btn btn-primary text-center mt-4" type="button" (click)="savePasswordChanges()">Promeni lozinku</button>
+                                    </div>
+                                </div>
+                                <!-- Form Group (new password again)-->
+                                <div class="col-md-6">
+                                    <label class="small mb-1" for="inputNewPasswordAgain">Ponovo nova lozinka</label>
+                                    <input class="form-control" id="inputNewPasswordAgain" name="inputNewPasswordAgain" type="password" [(ngModel)]="this.newPass2" placeholder="Ukucaj novu lozinku">
+                                    <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
         </div>
+
+        <!-- Info Change card -->
         <div class="col-xl-8">
             <!-- Account details card-->
             <div class="card mb-4">
@@ -51,6 +94,22 @@
                                 <input class="form-control" id="inputLastName" name="inputLastName" type="text" [(ngModel)]="this.lastName">
                             </div>
                         </div>
+
+                        <div>
+                            <label class="small mt-2 mb-3">Kliknite na sliku kako biste je odabrali za profilnu:</label>
+                            
+                            <div class="container">
+                                <div class="card-group">
+                                    <!--bootstrap card with 3 horizontal images-->
+                                    <div class="row overflow-auto" style="max-height: 200px;">
+                                        <div class="card col-md-3" *ngFor="let picture of this.pictures" (click)="this.photoId = picture.photoId.toString()"
+                                            [ngClass]="{'selectedPicture': this.photoId == picture.photoId.toString()}">
+                                            <img class="card-img-top" src="{{picture.path}}">
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                         
                         <div class="row mt-5">
                             <div class="col text-center">
@@ -67,48 +126,7 @@
 
     <div class="row">
         <div class="col-xl-4">
-            <div class="card mb-4">
-                <div class="card-header">Promena lozinke</div>
-                <div class="card-body">
-                    <form>
-
-                        <div class="row">
-                            <!-- Form Row-->
-                            <div class="row gx-3 mb-3">
-                                <!-- Form Group (password)-->
-                                <div class="col-md-6">
-                                    <label class="small mb-1" for="inputPassword">Važeća lozinka</label>
-                                    <input class="form-control" id="inputPassword" name="inputPassword" type="password" [(ngModel)]="this.oldPass" placeholder="Trenutna lozinka">
-                                    <small *ngIf="wrongPassBool" class="form-text text-danger">Neispravna lozinka.</small>
-                                </div>
-                                <!-- Form Group (new password)-->
-                                <div class="col-md-6">
-                                    <label class="small mb-1" for="inputNewPassword">Nova lozinka</label>
-                                    <input class="form-control" id="inputNewPassword" name="inputNewPassword" type="password" [(ngModel)]="this.newPass1" placeholder="Ukucaj novu lozinku">
-                                    <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
-                                </div>
-                            </div>
-    
-                            <!-- Form Row-->
-                            <div class="row gx-3 mb-3">
-                                <div class="col-md-6">
-                                    <div class="col text-center">
-                                        <!-- Save changes button-->
-                                        <button class="btn btn-primary text-center mt-4" type="button" (click)="savePasswordChanges()">Promeni lozinku</button>
-                                    </div>
-                                </div>
-                                <!-- Form Group (new password again)-->
-                                <div class="col-md-6">
-                                    <label class="small mb-1" for="inputNewPasswordAgain">Ponovo nova lozinka</label>
-                                    <input class="form-control" id="inputNewPasswordAgain" name="inputNewPasswordAgain" type="password" [(ngModel)]="this.newPass2" placeholder="Ukucaj novu lozinku">
-                                    <small *ngIf="wrongNewPassBool" class="form-text text-danger">Lozinke se ne podudaraju.</small>
-                                </div>
-                            </div>
-                        </div>
-
-                    </form>
-                </div>
-            </div>
+            
         </div>
     </div>
 
-- 
cgit v1.2.3