Merge branch 'max_dev' of Software_Engineering_I/greenvironment-frontend into master

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

src/app/components/profile/profile.component.html

@@ -3,7 +3,15 @@
         <!--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" 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]="userProfile.profilePicture"/>
+                </div>
+                
                 <span id="username">{{userProfile.username}}</span>
                 <button mat-icon-button 
                 class="request-button" 
@@ -37,7 +45,14 @@
         <!--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" (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]="userProfile.profilePicture"/>
+                </div>
                 <span id="username">{{userProfile.username}}</span>
                 <span id="handle">@{{userProfile.handle}}</span>
                 <button mat-icon-button 

src/app/components/profile/profile.component.sass

@@ -39,16 +39,36 @@
   #handle
     font-size: 14px
 
+#icon 
+  display: none
+  position: absolute
+  z-index: 11
+  color: white
+
 $mat-card-header-size: 100px !default
+.hover-box
+  cursor: pointer
+  text-align: center
+  display: flex
+  justify-content: center
+  align-items: center
+  &: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.
+
 .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
+    transition-duration: 0.5s
-  // in IE, but we're using it as a progressive enhancement.
+    z-index: 10
     object-fit: cover
 
 

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',
@@ -14,6 +15,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;
@@ -23,6 +25,7 @@ export class ProfileComponent implements OnInit {
   loading = false;
 
   constructor(
+    private http: HttpClient,
     private router: Router,
     private requestService: RequestService,
     private data: DatasharingService,
@@ -51,6 +54,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;
@@ -61,4 +67,16 @@ 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(
+    async (response: Response) => {
+      this.userProfile.profilePicture = 'https://greenvironment.net/' + (await response.json()).filename;
+    },
+    (error) => console.log(error)
+  );
+  }
 }

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;

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>