У меня есть пользовательская веб-страница с различной информацией о пользователе, например, имя пользователя, биография, фотография профиля и т. Д.
Я создал другую кнопку, которая позволила бы мне изменить информацию и сохранить изменения в базе данных, но после изменений, например, изображение профиля ничего не показывается, даже если я перезагружаю страницу, но при повторном входе в эту учетную запись пользователя изменения окончательно появляются неудобно в реальном времени.
Мой HTML-код:
<body class="w3-light-grey light-blue-skin">
<header>
<div class="navbar fixed-top navbar-toggleable-md navbar-expand-lg scrolling-navbar double-nav">
<div class="breadcrumb-dn mr-auto bread">
<a href="/" class="mdi mdi-home mdi-36px hvr-grow-shadow new" style="text-decoration: none;"><span>Home</span></a>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a href="/offerappel" class="nav-link waves-effect waves-light hvr-grow-shadow">
<span class="clearfix d-none d-sm-inline-block">Offre Appel</span>
</a>
</li>
<li class="nav-item">
<a href="/" class="nav-link waves-effect waves-light hvr-grow-shadow">
<span class="clearfix d-none d-sm-inline-block">Offre Services</span>
</a>
</li>
<ng-container *ngIf="loggedIn; else elseTemplate">
<li class="nav-item dropdown">
<a class="nav-link waves-effect waves-light hvr-grow-shadow dropdown" data-toggle="dropdown">{{loginUser.username}}</a>
<div class="dropdown-menu">
<a href="/myaccount" class="dropdown-item" style="cursor: pointer;">My Account</a>
<a (click)="logout()" class="dropdown-item" style="cursor: pointer;">Logout</a>
</div>
</li>
</ng-container>
<ng-template #elseTemplate>
<li class="nav-item">
<a href="/auth/login" class="nav-link waves-effect waves-light hvr-grow-shadow">
<span class="clearfix d-none d-sm-inline-block">Login</span>
</a>
</li>
<li class="nav-item">
<a href="/auth/register" class="nav-link waves-effect waves-light hvr-grow-shadow">
<span class="clearfix d-none d-sm-inline-block">Register</span>
</a>
</li>
</ng-template>
</ul>
</div>
</header>
<div class="w3-content w3-margin-top" style="max-width:1400px; margin-top: 150px !important">
<div class="w3-row-padding">
<div class="w3-third">
<div class="w3-white w3-text-grey w3-card-4">
<div class="w3-display-container">
<img [src]="imgSrc" class="mat-elevation-z5" style="width: 200px; border-radius: 50px; margin-bottom: 45px; position: relative; margin-left: 100px; margin-top: 10px; height: 250px" alt="Avatar">
<div style="margin-bottom: 10px">
<label class="btn btn-default">
<input type="file" (change)="selectFile($event)">
</label>
<button class="btn btn-success" [disabled]="!selectedFiles" (click)="upload()">Upload</button>
</div>
<div class="w3-display-bottomleft w3-container w3-text-black" style="position: relative; margin-bottom: 20px">
<h2>{{loginUser.username}}</h2>
</div>
</div>
<div class="w3-container">
<button mat-raised-button (click)="info()" style="float: right; width: 50px"><i class="fa fa-cog w3-margin-right w3-xxlarge w3-text-teal" aria-hidden="true"></i></button>
<div id="userinfo" style="display: block">
<p><i class="fa fa-home fa-fw w3-margin-right w3-large w3-text-teal"></i>{{loginUser.location | uppercase}}</p>
<p><i class="fa fa-envelope fa-fw w3-margin-right w3-large w3-text-teal"></i>{{loginUser.email}}</p>
<p><i class="fa fa-phone fa-fw w3-margin-right w3-large w3-text-teal"></i>{{loginUser.number}}</p>
</div>
<div id="edituserinfo" style="display: none">
<form [formGroup]="infoForm" (ngSubmit)="editINFO()">
<mat-form-field>
<input matInput placeholder="Location" formControlName="location">
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Phone Number" formControlName="phoneNumber">
</mat-form-field>
<button mat-raised-button type="submit">Submit</button>
</form>
</div>
<hr>
<div class="round" style="margin-top: -20px">
<a class="button" (click)="goBack()">Account Info</a>
</div>
<div class="round" >
<ng-container *ngIf="role === 'ROLE_CLIENT'; else elseTemplate">
<a class="button" style="top: -20px" (click)="goToOffers()">Offre Appel</a>
</ng-container>
<ng-template #elseTemplate>
<a class="button" style="top: -20px" (click)="goToOffers()">Offre Service</a>
</ng-template>
</div>
<br>
</div>
</div><br>
</div>
<div class="w3-twothird" id="account-info">
<div class="w3-container w3-card w3-white w3-margin-bottom">
<div>
<h2 class="w3-text-grey w3-padding-16" style="float: inline-start"><i class="fa fa-user fa-fw w3-margin-right w3-xxlarge w3-text-teal" aria-hidden="true"></i>Bio</h2>
<button mat-raised-button (click)="bio()" style="float: right; width: 50px; margin-top: 17px;"><i class="fa fa-cog w3-margin-right w3-xxlarge w3-text-teal" aria-hidden="true"></i></button>
</div>
<div class="w3-container">
<div id="showBIO" style="display: block">
<span>{{loginUser.bio}}</span>
<hr>
</div>
<div id="editBIO" style="display: none">
<form [formGroup]="editBioForm" (ngSubmit)="editBio()">
<textarea placeholder="enter your bio." formControlName="bio" cols="30" rows="10"></textarea>
<button mat-raised-button type="submit">Submit</button>
</form>
<hr>
</div>
</div>
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-suitcase fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>Work Experience</h2>
</div>
</div>
<div id="offers" style="display: none" class="w3-twothird">
<div class="w3-container w3-card w3-white w3-margin-bottom">
<h4 style="text-align: center; margin-bottom: 100px; margin-top: 40px; margin-left: -40px">Offer List</h4>
<div style="margin-bottom: 25px">
<button mat-raised-button color="primary" (click)="addOfferForm()">
<i class="fa fa-plus" aria-hidden="true" style="margin-right: 5px"></i> Add
</button>
</div>
<div id="newOffer" style="display: none">
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<form [formGroup]="offerForm" (ngSubmit)="addOffer()">
<div class="form-group" style="margin-top: 30px;">
<label style="font-weight: 600; margin-right: 50px; font-size: 1rem">Offer Name</label>
<input type="text" formControlName="offername" class="form-control">
</div>
<div class="form-group" style="margin-top: 30px;">
<label style="font-weight: 600; margin-right: 50px; font-size: 1rem">Description</label>
<textarea formControlName="description" class="form-control" cols="40" rows="9"></textarea>
</div>
<div class="form-group" style="margin-top: 30px;">
<label style="font-weight: 600; margin-right: 50px; font-size: 1rem">Contact</label>
<input type="text" formControlName="contact" class="form-control" />
</div>
<div class="form-group" style="margin-top: 30px;">
<label style="font-weight: 600; margin-right: 50px; font-size: 1rem">Location</label>
<input type="text" formControlName="location" class="form-control"/>
</div>
<div class="form-group" style="margin-top: 30px;">
<label style="font-weight: 600; margin-right: 50px; font-size: 1rem">Salary</label>
<input type="text" formControlName="prix" class="form-control" />
</div>
<div class="form-group" style="margin-top: 30px;">
<label style="font-weight: 600; margin-right: 50px; font-size: 1rem">Category:</label>
<select formControlName="services" style="width: 150px">
<option *ngFor="let s of allServices" [ngValue]="s">{{s.serviceName}}</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="offerList" style="line-height: 2; width: 750px;">
<div *ngFor="let mf of myOffers" style="margin-bottom: 15px;" >
<div style="height: 140px; border-radius: 20px; background-color: white" class="mat-elevation-z5">
<div style="margin-left: 15px;">
<div>
<h6 style="font-weight: 400; font-size: 20px;">{{mf.offername}}</h6>
</div>
<p style="margin-top: 15px;">{{mf.description | reverseStr}}</p>
<p>{{mf.dateCreation | date: shortDate}}</p>
<div style="margin-left: 90px; margin-top: -46px">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span>{{mf.location}}</span>
</div>
<div style="margin-left: 190px; margin-top: -31px">
<i class="fa fa-address-book" aria-hidden="true"></i>
<span>{{mf.contact}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
и вот файл ts:
import { Component, OnInit, EventEmitter } from '@angular/core';
import { UserService } from '../user.service';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpClient, HttpResponse, HttpEventType } from '@angular/common/http';
import { Observable } from 'rxjs';
import { UploadFileServiceService } from '../upload-file-service.service';
import { FormGroup, FormBuilder } from '@angular/forms';
@Component({
selector: 'app-nacc',
templateUrl: './nacc.component.html',
styleUrls: ['./nacc.component.scss']
})
export class NaccComponent implements OnInit {
loggedIn: boolean;
loginUser: any = {};
role: any;
offers: any[] = [];
myOffers: any[] = [];
imgSrc: any;
progress: { percentage: number} = { percentage : 0};
currentFileUpload: File;
selectedFiles: FileList;
editBioForm: FormGroup;
infoForm: FormGroup;
offerForm: FormGroup;
allServices: any[] = [];
constructor(private service: UserService,
private sanitizer: DomSanitizer,
private http: HttpClient,
private uploadservice: UploadFileServiceService,
private fb: FormBuilder) { }
ngOnInit() {
if (localStorage.getItem('currentUser') === null) {
this.loggedIn = false;
} else {
this.loggedIn = true;
this.loginUser = JSON.parse(localStorage.getItem('currentUser'));
}
console.log(this.loginUser);
this.role = this.loginUser.roles[0];
this.service.getAllOffer().subscribe(res => {
console.log(res);
this.offers = res;
for (let i = 0; i < this.offers.length; i++) {
const element = this.offers[i];
if (this.loginUser.id === element.user.id) {
this.myOffers.push(element);
}
}
if (this.loginUser.photo === 'http://localhost:8082/static.images/user/default.jpg') {
console.log('something');
} else {
this.getImage('http://localhost:8082/downloadFile/' + this.loginUser.photo).subscribe(data => {
this.createImageFromBlob(data);
});
}
});
this.service.getServices().subscribe(res => {
this.allServices = res;
});
this.editBioForm = this.fb.group({
bio: ['']
});
this.infoForm = this.fb.group({
location: [''],
phoneNumber: ['']
});
this.offerForm = this.fb.group({
type: [''],
offername: [''],
description: [''],
contact: [''],
location: [''],
prix: [''],
user: [''],
services: ['']
});
}
get d() {
return this.offerForm.controls;
}
addOffer() {
this.offerForm.get('user').setValue(this.loginUser);
for (let i = 0; i < this.allServices.length; i++) {
const element = this.allServices[i];
console.log('element', element);
console.log('serviceId: ', (this.offerForm.get('services').value));
if (Number(this.offerForm.get('services').value) === element.serviceName) {
this.offerForm.get('services').setValue(element);
}
}
if (this.role === 'ROLE_CLIENT') {
this.offerForm.get('type').setValue('OA');
} else if (this.role === 'ROLE_PRESTATEUR') {
this.offerForm.get('type').setValue('OS');
}
console.log('form: ', this.offerForm.value);
this.service.addOffer(this.offerForm.value, this.loginUser.token).subscribe(res => {
console.log('yeeeeeeet');
document.getElementById('newOffer').style.display = 'none';
document.getElementById('offerList').style.display = 'block';
location.reload();
}, err => {
console.log(err);
});
}
getImage(imageUrl: string): Observable<Blob> {
return this.http.get(imageUrl, { responseType: 'blob'});
}
createImageFromBlob(image: Blob) {
const reader = new FileReader();
reader.addEventListener('load', () => {
this.imgSrc = reader.result;
}, false);
if (image) {
reader.readAsDataURL(image);
}
}
logout() {
localStorage.removeItem('currentUser');
location.reload();
}
upload() {
const token = this.loginUser.token;
console.log(token);
this.progress.percentage = 0;
this.currentFileUpload = this.selectedFiles.item(0);
this.uploadservice.pushFileToStorage(this.currentFileUpload, token).subscribe(event => {
if (event.type === HttpEventType.UploadProgress) {
this.progress.percentage = Math.round(100 * event.loaded / event.total);
} else if (event instanceof HttpResponse) {
console.log('File is completely uploaded!');
}
});
this.selectedFiles = undefined;
}
public onFileSelected(event: EventEmitter<File[]>) {
const file: File = event[0];
console.log(file);
}
selectFile(event) {
this.selectedFiles = event.target.files;
}
bio() {
document.getElementById('showBIO').style.display = 'none';
document.getElementById('editBIO').style.display = 'block';
}
editBio() {
this.service.editUser(this.editBioForm.value, this.loginUser.token).subscribe(res => {
location.reload();
}
);
}
info() {
document.getElementById('userinfo').style.display = 'none';
document.getElementById('edituserinfo').style.display = 'block';
}
editINFO() {
this.service.editUser(this.infoForm.value, this.loginUser.token).subscribe(res => {
location.reload();
}
);
}
goToOffers() {
document.getElementById('account-info').style.display = 'none';
document.getElementById('offers').style.display = 'block';
}
goBack() {
document.getElementById('account-info').style.display = 'block';
document.getElementById('offers').style.display = 'none';
}
}