From d6f2af77c3ca1dc21d588b04ff2225a1aefa4858 Mon Sep 17 00:00:00 2001 From: Max Date: Sun, 19 Jan 2020 23:13:00 +0100 Subject: [PATCH] WIP: group pictures --- src/app/app.module.ts | 7 +- .../fileUpload/fileUpload.component.sass | 29 ++++ .../group/fileUpload/fileUpload.component.ts | 84 ++++++++++++ .../fileUploadDialog.component.html | 17 +++ src/app/components/group/group.component.html | 17 ++- .../components/search/search.component.html | 4 +- .../components/search/search.component.sass | 19 +-- .../social/groups/groups.component.html | 4 +- .../social/groups/groups.component.sass | 24 +++- src/app/models/event.ts | 16 ++- src/app/models/group.ts | 44 +++++- src/app/models/groupinfo.ts | 15 +- src/app/models/interfaces/IEvent.ts | 10 ++ src/app/models/interfaces/IGroup.ts | 2 + src/app/models/user.ts | 7 +- src/app/services/group/group.service.ts | 121 +++++++--------- src/app/services/login/login.service.ts | 3 +- src/app/services/search/search.service.ts | 3 +- src/app/services/selfservice/self.service.ts | 3 +- src/assets/images/default-grouppic.svg | 129 ++++++++++++++++++ 20 files changed, 457 insertions(+), 101 deletions(-) create mode 100644 src/app/components/group/fileUpload/fileUpload.component.sass create mode 100644 src/app/components/group/fileUpload/fileUpload.component.ts create mode 100644 src/app/components/group/fileUpload/fileUploadDialog.component.html create mode 100644 src/app/models/interfaces/IEvent.ts create mode 100644 src/assets/images/default-grouppic.svg diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ddd3cfd..9877d08 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -20,6 +20,8 @@ import {ChatlistComponent} from './components/chatlist/chatlist.component'; import {PostlistComponent} from './components/feed/postlist/postlist.component'; import {HttpClientModule} from '@angular/common/http'; import {ProfileComponent} from './components/profile/profile.component'; +import {DialogFileUploadComponent} from './components/profile/fileUpload/fileUpload.component'; +import {DialogGroupFileUploadComponent} from './components/group/fileUpload/fileUpload.component'; import {ImprintComponent} from './components/imprint/imprint.component'; import {AboutComponent} from './components/about/about.component'; import {ChatcontactsComponent} from './components/chatmanager/chatcontacts/chatcontacts.component'; @@ -59,7 +61,6 @@ import {MatExpansionModule} from '@angular/material/expansion'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatNativeDateModule, MatProgressBarModule} from '@angular/material/'; import {MatSnackBarModule} from '@angular/material/snack-bar'; -import {DialogFileUploadComponent} from './components/profile/fileUpload/fileUpload.component'; import { ServiceWorkerModule } from '@angular/service-worker'; import { environment } from '../environments/environment'; @@ -101,6 +102,7 @@ const appRoutes: Routes = [ DialogCreateEventComponent, UserlistComponent, DialogFileUploadComponent, + DialogGroupFileUploadComponent, ], imports: [ BrowserModule, @@ -150,7 +152,8 @@ const appRoutes: Routes = [ entryComponents: [ DialogCreateGroupComponent, DialogCreateEventComponent, - DialogFileUploadComponent + DialogFileUploadComponent, + DialogGroupFileUploadComponent ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/components/group/fileUpload/fileUpload.component.sass b/src/app/components/group/fileUpload/fileUpload.component.sass new file mode 100644 index 0000000..12ed81a --- /dev/null +++ b/src/app/components/group/fileUpload/fileUpload.component.sass @@ -0,0 +1,29 @@ +@import '../../../../styles/greenvironment-material-theme' + +.dialogFormField + width: 100% + +#error + margin-top: 1em + +#progress-bar + margin-top: 1em + +.confirmationButton + background-color: $primary-color + +.uploadDialogContent + overflow: hidden + text-align: center + +#inputPreview + max-width: 75% + max-height: 100% + width: auto + clip-path: circle() + mask-mode: luminance + +#inputPreviewWrapper + margin: auto + text-align: center + max-height: 512px diff --git a/src/app/components/group/fileUpload/fileUpload.component.ts b/src/app/components/group/fileUpload/fileUpload.component.ts new file mode 100644 index 0000000..279f4b9 --- /dev/null +++ b/src/app/components/group/fileUpload/fileUpload.component.ts @@ -0,0 +1,84 @@ +import {Component} from '@angular/core'; +import {MatDialogRef} from '@angular/material/dialog'; +import {SelfService} from '../../../services/selfservice/self.service'; +import {environment} from '../../../../environments/environment'; +import {BehaviorSubject} from 'rxjs'; + +@Component({ + selector: 'group-file-upload-dialog', + templateUrl: 'fileUploadDialog.component.html', + styleUrls: ['./fileUpload.component.sass'], +}) +export class DialogGroupFileUploadComponent { + public errorOccurred = false; + public uploading = false; + private errorMessage: string; + public profilePictureUrl: BehaviorSubject; + private file; + public localFileUrl; + + constructor(public dialogRef: MatDialogRef, private selfService: SelfService) { + this.profilePictureUrl = new BehaviorSubject(null); + } + + /** + * Getter for the error message + */ + getErrorMessage() { + return this.errorMessage; + } + + /** + * Fired when the cancel button of the dialog is pressed + */ + onCancelClicked() { + this.dialogRef.close(); + } + + /** + * Fired when the ok button was pressed + */ + onOkClicked() { + if (this.file) { + this.errorOccurred = false; + this.uploading = true; + this.selfService.changeProfilePicture(this.file).subscribe((response) => { + this.uploading = false; + if (response.success) { + this.profilePictureUrl.next(environment.greenvironmentUrl + response.fileName); + this.dialogRef.close(); + } else { + this.errorMessage = response.error; + this.errorOccurred = true; + } + }, (error) => { + this.uploading = false; + this.errorOccurred = true; + console.error(error); + if (error.error) { + this.errorMessage = error.error.error; + } else { + this.errorMessage = 'Failed to upload the profile picture.'; + } + }); + } else { + this.errorOccurred = true; + this.errorMessage = 'Please select a file to upload.'; + } + } + + /** + * Fired when the input of the file select changes. + * @param event + */ + onFileInputChange(event) { + this.errorOccurred = false; + this.errorMessage = ''; + this.file = event.target.files[0]; + const reader = new FileReader(); + reader.onload = (e: any) => { + this.localFileUrl = e.target.result; + }; + reader.readAsDataURL(this.file); + } +} diff --git a/src/app/components/group/fileUpload/fileUploadDialog.component.html b/src/app/components/group/fileUpload/fileUploadDialog.component.html new file mode 100644 index 0000000..4fe0594 --- /dev/null +++ b/src/app/components/group/fileUpload/fileUploadDialog.component.html @@ -0,0 +1,17 @@ +
+

Upload a new group picture!

+
+ + +
+

Preview:

+ +
+ +
+ {{getErrorMessage()}} +
+ + +
+
diff --git a/src/app/components/group/group.component.html b/src/app/components/group/group.component.html index 7192c66..70f9ff0 100644 --- a/src/app/components/group/group.component.html +++ b/src/app/components/group/group.component.html @@ -3,7 +3,14 @@ -
+
+ + camera_alt +
+
+ +
+ {{groupProfile.name}}