Fix missing profile picture

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 

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%)
@@ -70,6 +61,15 @@ $mat-card-header-size: 100px !default
     // 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
 
 
 

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;