Add profile picture on profile page

master
Max 5 years ago
parent 01c9948e0c
commit 92c7744599

@ -4,12 +4,12 @@
<mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true"> <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
<mat-toolbar-row> <mat-toolbar-row>
<div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()"> <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> <mat-icon id="icon">camera_alt</mat-icon>
<input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" /> <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
</div> </div>
<div *ngIf="!ownProfile"> <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> </div>
<span id="username">{{userProfile.username}}</span> <span id="username">{{userProfile.username}}</span>
@ -45,12 +45,13 @@
<!--on big screen--> <!--on big screen-->
<mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true"> <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.lt-md="true">
<mat-toolbar-row> <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"/> <img class="profile-picture" [src]="userProfile.profilePicture"/>
<mat-icon id="icon">camera_alt</mat-icon> <mat-icon id="icon">camera_alt</mat-icon>
<input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
</div> </div>
<div *ngIf="!ownProfile"> <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> </div>
<span id="username">{{userProfile.username}}</span> <span id="username">{{userProfile.username}}</span>
<span id="handle">@{{userProfile.handle}}</span> <span id="handle">@{{userProfile.handle}}</span>

@ -73,7 +73,9 @@ export class ProfileComponent implements OnInit {
formData.append('profilePicture', event.target.files[0]); formData.append('profilePicture', event.target.files[0]);
this.http.post('https://greenvironment.net/upload', formData).subscribe( 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) (error) => console.log(error)
); );
} }

@ -81,6 +81,11 @@ export class ProfileService {
profile.level = response.data.getUser.level; profile.level = response.data.getUser.level;
profile.friendCount = response.data.getUser.friendCount; profile.friendCount = response.data.getUser.friendCount;
profile.groupCount = response.data.getUser.groupCount; 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 temp = new Date(Number(response.data.getUser.joinedAt));
const date = temp.toLocaleString('en-GB'); const date = temp.toLocaleString('en-GB');
profile.joinedAt = date; profile.joinedAt = date;

@ -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>

After

Width:  |  Height:  |  Size: 2.7 KiB

Loading…
Cancel
Save