From 02b06f4f6f5af4070a6733aef1b09945b510e38a Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Wed, 15 Jan 2020 15:32:19 +0100
Subject: [PATCH 1/4] Add profile hover animation

---
 src/app/components/group/group.component.sass |  2 +
 .../components/profile/profile.component.html |  7 +++-
 .../components/profile/profile.component.sass | 40 ++++++++++++++-----
 3 files changed, 38 insertions(+), 11 deletions(-)

diff --git a/src/app/components/group/group.component.sass b/src/app/components/group/group.component.sass
index 34fa7d0..0de5d38 100644
--- a/src/app/components/group/group.component.sass
+++ b/src/app/components/group/group.component.sass
@@ -49,6 +49,8 @@ $mat-card-header-size: 100px !default
     border-radius: 50%
     flex-shrink: 0
     background-size: cover
+    &:hover
+      height: 200
     // Makes `<img>` tags behave like `background-size: cover`. Not supported
     // in IE, but we're using it as a progressive enhancement.
     object-fit: cover
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 7dad600..892cc83 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -3,7 +3,12 @@
         <!--on small screen-->
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
             <mat-toolbar-row>
-                <div class="profile-picture"></div>
+                <div class="hover-box">
+                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>  
+                    <mat-icon id="icon">camera_alt</mat-icon>
+                </div>
+
+                
                 <span id="username">{{userProfile.username}}</span>
                 <button mat-icon-button 
                 class="request-button" 
diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass
index af29175..b7e0d90 100644
--- a/src/app/components/profile/profile.component.sass
+++ b/src/app/components/profile/profile.component.sass
@@ -39,17 +39,37 @@
   #handle
     font-size: 14px
 
+#icon 
+  display: none
+  position: absolute
+  z-index: 11
+  color: white
+
 $mat-card-header-size: 100px !default
-.profile-picture
-  background-image: url(https://material.angular.io/assets/img/examples/shiba1.jpg)
-  height: $mat-card-header-size
-  width: $mat-card-header-size
-  border-radius: 50%
-  flex-shrink: 0
-  background-size: cover
-  // Makes `<img>` tags behave like `background-size: cover`. Not supported
-  // in IE, but we're using it as a progressive enhancement.
-  object-fit: cover
+.hover-box
+  cursor: pointer
+  text-align: center
+  display: flex
+  justify-content: center
+  align-items: center
+  .profile-picture
+    height: $mat-card-header-size
+    width: $mat-card-header-size
+    border-radius: 50%
+    flex-shrink: 0
+    background-size: cover
+    transition-duration: 0.5s
+    z-index: 10
+    object-fit: cover
+  &:hover
+    .profile-picture
+      filter: brightness(70%)
+    #icon
+      display: block
+      filter: none
+    // Makes `<img>` tags behave like `background-size: cover`. Not supported
+    // in IE, but we're using it as a progressive enhancement.
+   
 
 
 

From cbf74bba4a780358c3549febf932458101d42b81 Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Wed, 15 Jan 2020 15:56:22 +0100
Subject: [PATCH 2/4] Fix missing profile picture

---
 .../components/profile/profile.component.html | 14 ++++++++++---
 .../components/profile/profile.component.sass | 20 +++++++++----------
 .../components/profile/profile.component.ts   |  4 ++++
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 892cc83..f1f1e57 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -3,11 +3,13 @@
         <!--on small screen-->
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
             <mat-toolbar-row>
-                <div class="hover-box">
+                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile">
                     <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
                 </div>
-
+                <div *ngIf="!ownProfile">
+                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
+                </div>
                 
                 <span id="username">{{userProfile.username}}</span>
                 <button mat-icon-button 
@@ -42,7 +44,13 @@
         <!--on big screen-->
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true">
             <mat-toolbar-row>
-                <div class="profile-picture"></div>
+                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile">
+                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>  
+                    <mat-icon id="icon">camera_alt</mat-icon>
+                </div>
+                <div *ngIf="!ownProfile">
+                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
+                </div>
                 <span id="username">{{userProfile.username}}</span>
                 <span id="handle">@{{userProfile.handle}}</span>
                 <button mat-icon-button 
diff --git a/src/app/components/profile/profile.component.sass b/src/app/components/profile/profile.component.sass
index b7e0d90..c6f8e7e 100644
--- a/src/app/components/profile/profile.component.sass
+++ b/src/app/components/profile/profile.component.sass
@@ -52,15 +52,6 @@ $mat-card-header-size: 100px !default
   display: flex
   justify-content: center
   align-items: center
-  .profile-picture
-    height: $mat-card-header-size
-    width: $mat-card-header-size
-    border-radius: 50%
-    flex-shrink: 0
-    background-size: cover
-    transition-duration: 0.5s
-    z-index: 10
-    object-fit: cover
   &:hover
     .profile-picture
       filter: brightness(70%)
@@ -69,7 +60,16 @@ $mat-card-header-size: 100px !default
       filter: none
     // Makes `<img>` tags behave like `background-size: cover`. Not supported
     // in IE, but we're using it as a progressive enhancement.
-   
+
+.profile-picture
+    height: $mat-card-header-size
+    width: $mat-card-header-size
+    border-radius: 50%
+    flex-shrink: 0
+    background-size: cover
+    transition-duration: 0.5s
+    z-index: 10
+    object-fit: cover
 
 
 
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index d3d86c2..ead215c 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -14,6 +14,7 @@ import { ProfileService } from 'src/app/services/profile/profile.service';
 
 export class ProfileComponent implements OnInit {
   levellist: Levellist = new Levellist();
+  ownProfile = false;
   userProfile: User = new User();
   self: User;
   id: string;
@@ -51,6 +52,9 @@ export class ProfileComponent implements OnInit {
           this.userProfile = response;
           // tslint:disable-next-line:max-line-length
           this.userProfile.allowedToSendRequest = this.requestService.isAllowedToSendRequest(this.userProfile.userID, this.self);
+          if (this.userProfile.userID === this.self.userID) {
+            this.ownProfile = true;
+          } else {this.ownProfile = false; }
           this.rankname = this.levellist.getLevelName(this.userProfile.level);
         } else { this.profileNotFound = true; }
         this.loading = false;

From 01c9948e0c96226d9b75239da1b8e29f66fa8b5d Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Wed, 15 Jan 2020 16:26:48 +0100
Subject: [PATCH 3/4] Add rough profile picture upload

---
 src/app/components/profile/profile.component.html |  3 ++-
 src/app/components/profile/profile.component.ts   | 12 ++++++++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index f1f1e57..507a73d 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -3,9 +3,10 @@
         <!--on small screen-->
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
             <mat-toolbar-row>
-                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile">
+                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
                     <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
+                    <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
                     <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index ead215c..2811552 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -5,6 +5,7 @@ import { Levellist } from 'src/app/models/levellist';
 import { RequestService } from 'src/app/services/request/request.service';
 import { DatasharingService } from '../../services/datasharing.service';
 import { ProfileService } from 'src/app/services/profile/profile.service';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-profile',
@@ -24,6 +25,7 @@ export class ProfileComponent implements OnInit {
   loading = false;
 
   constructor(
+    private http: HttpClient,
     private router: Router,
     private requestService: RequestService,
     private data: DatasharingService,
@@ -65,4 +67,14 @@ export class ProfileComponent implements OnInit {
     user.allowedToSendRequest = false;
     this.requestService.sendFriendRequest(user);
   }
+  onFileInput(event) {
+    console.log(event.target.files[0]);
+    const formData: any = new FormData();
+    formData.append('profilePicture', event.target.files[0]);
+
+    this.http.post('https://greenvironment.net/upload', formData).subscribe(
+    (response) => console.log(response),
+    (error) => console.log(error)
+  );
+  }
 }

From 92c7744599a562d1ca59d7d7891b7eb0ffa2e2a9 Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Wed, 15 Jan 2020 18:05:28 +0100
Subject: [PATCH 4/4] Add profile picture on profile page

---
 .../components/profile/profile.component.html | 11 +--
 .../components/profile/profile.component.ts   |  4 +-
 src/app/services/profile/profile.service.ts   |  5 ++
 src/assets/images/account_circle-24px.svg     | 81 +++++++++++++++++++
 4 files changed, 95 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/images/account_circle-24px.svg

diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html
index 507a73d..b40f0f6 100644
--- a/src/app/components/profile/profile.component.html
+++ b/src/app/components/profile/profile.component.html
@@ -4,12 +4,12 @@
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
             <mat-toolbar-row>
                 <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
-                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>  
+                    <img class="profile-picture" [src]="userProfile.profilePicture"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
                     <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
-                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
+                    <img class="profile-picture" [src]="userProfile.profilePicture"/>
                 </div>
                 
                 <span id="username">{{userProfile.username}}</span>
@@ -45,12 +45,13 @@
         <!--on big screen-->
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true">
             <mat-toolbar-row>
-                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile">
-                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>  
+                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
+                    <img class="profile-picture" [src]="userProfile.profilePicture"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
+                    <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
-                    <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
+                    <img class="profile-picture" [src]="userProfile.profilePicture"/>
                 </div>
                 <span id="username">{{userProfile.username}}</span>
                 <span id="handle">@{{userProfile.handle}}</span>
diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts
index 2811552..412b106 100644
--- a/src/app/components/profile/profile.component.ts
+++ b/src/app/components/profile/profile.component.ts
@@ -73,7 +73,9 @@ export class ProfileComponent implements OnInit {
     formData.append('profilePicture', event.target.files[0]);
 
     this.http.post('https://greenvironment.net/upload', formData).subscribe(
-    (response) => console.log(response),
+    async (response: Response) => {
+      this.userProfile.profilePicture = 'https://greenvironment.net/' + (await response.json()).filename;
+    },
     (error) => console.log(error)
   );
   }
diff --git a/src/app/services/profile/profile.service.ts b/src/app/services/profile/profile.service.ts
index e8735b1..3de1124 100644
--- a/src/app/services/profile/profile.service.ts
+++ b/src/app/services/profile/profile.service.ts
@@ -81,6 +81,11 @@ export class ProfileService {
       profile.level = response.data.getUser.level;
       profile.friendCount = response.data.getUser.friendCount;
       profile.groupCount = response.data.getUser.groupCount;
+      if (response.data.getUser.profilePicture) {
+        profile.profilePicture = 'https://greenvironment.net/' + response.data.getUser.profilePicture;
+      } else {
+        profile.profilePicture = 'assets/images/account_circle-24px.svg';
+      }
       const temp = new Date(Number(response.data.getUser.joinedAt));
       const date = temp.toLocaleString('en-GB');
       profile.joinedAt = date;
diff --git a/src/assets/images/account_circle-24px.svg b/src/assets/images/account_circle-24px.svg
new file mode 100644
index 0000000..6b911ac
--- /dev/null
+++ b/src/assets/images/account_circle-24px.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="account_circle-24px.svg"
+   inkscape:version="0.92.4 5da689c313, 2019-01-14">
+  <metadata
+     id="metadata12">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs10" />
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1000"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="19.666667"
+     inkscape:cx="3.495666"
+     inkscape:cy="8.6464111"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <g
+     inkscape:groupmode="layer"
+     id="layer1"
+     inkscape:label="Layer 1"
+     style="display:inline">
+    <path
+       inkscape:connector-curvature="0"
+       style="opacity:0.98999999;fill:#f9f9f9;fill-opacity:0.99607843"
+       id="path2-3"
+       d="m 12.160208,1.9088359 c -5.5200001,0 -9.9999991,4.4800002 -9.9999991,10.0000001 0,5.520001 4.479999,10.000001 9.9999991,10.000001 5.52,0 10.000001,-4.48 10.000001,-10.000001 0,-5.5199999 -4.480001,-10.0000001 -10.000001,-10.0000001 z"
+       sodipodi:nodetypes="sssss" />
+  </g>
+  <g
+     inkscape:groupmode="layer"
+     id="layer2"
+     inkscape:label="Layer 2"
+     sodipodi:insensitive="true">
+    <a
+       transform="translate(0.16020778,-0.09116412)"
+       id="a822">
+      <path
+         inkscape:connector-curvature="0"
+         style="fill:#000000;fill-opacity:1"
+         id="path2"
+         d="M 12,2 C 6.48,2 2,6.48 2,12 2,17.52 6.48,22 12,22 17.52,22 22,17.52 22,12 22,6.48 17.52,2 12,2 Z m 0,3 c 1.66,0 3,1.34 3,3 0,1.66 -1.34,3 -3,3 C 10.34,11 9,9.66 9,8 9,6.34 10.34,5 12,5 Z m 0,14.2 c -2.5,0 -4.71,-1.28 -6,-3.22 0.03,-1.99 4,-3.08 6,-3.08 1.99,0 5.97,1.09 6,3.08 -1.29,1.94 -3.5,3.22 -6,3.22 z" />
+    </a>
+  </g>
+  <path
+     d="M0 0h24v24H0z"
+     fill="none"
+     id="path4" />
+</svg>