Change input to disabled while posting

master
Max 5 years ago
parent 6f83969aed
commit e1c1d9de44

@ -14,22 +14,23 @@
</video> </video>
</div> </div>
<mat-form-field id="input"> <mat-form-field id="input">
<textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting"
mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea> mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
<button mat-button matSuffix mat-icon-button (click)="name.click()" <button mat-button matSuffix mat-icon-button (click)="name.click()"
matTooltip="upload a picture or video (up to 10MB)" matTooltip="upload a picture or video (up to 10MB)"
matTooltipShowDelay="200"> matTooltipShowDelay="200"
[disabled]="posting">
<mat-icon>attach_file</mat-icon> <mat-icon>attach_file</mat-icon>
</button> </button>
<input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name> <input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name>
</mat-form-field> </mat-form-field>
<p id="check"> <p id="check">
<mat-checkbox color="primary" [(ngModel)]="checked" checked="checked">I protected the environment. <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked" [disabled]="posting">I protected the environment.
</mat-checkbox> </mat-checkbox>
</p> </p>
<mat-form-field id="action-chooser" *ngIf="checked"> <mat-form-field id="action-chooser" *ngIf="checked">
<mat-label>What did you do?</mat-label> <mat-label>What did you do?</mat-label>
<mat-select [(ngModel)]="activityId" name="action"> <mat-select [(ngModel)]="activityId" name="action" [disabled]="posting">
<mat-option>nothing ;)</mat-option> <mat-option>nothing ;)</mat-option>
<mat-option *ngFor="let action of actionlist.Actions" [value]="action.id" [matTooltip]="action.description" <mat-option *ngFor="let action of actionlist.Actions" [value]="action.id" [matTooltip]="action.description"
matTooltipShowDelay="200"> matTooltipShowDelay="200">
@ -38,7 +39,8 @@
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
<mat-error *ngIf="errorOccurred && textInputValue">{{getErrorMessage()}}</mat-error> <mat-error *ngIf="errorOccurred && textInputValue">{{getErrorMessage()}}</mat-error>
<button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button" <mat-progress-bar id="progress-bar" *ngIf="posting" mode="indeterminate"></mat-progress-bar>
<button mat-raised-button *ngIf="textInputValue" color="primary" id="post-button" [disabled]="posting"
(click)=createPost(content,activityId)> (click)=createPost(content,activityId)>
POST POST
</button> </button>

@ -49,6 +49,8 @@
text-align: center text-align: center
max-height: 512px max-height: 512px
margin-bottom: 1em margin-bottom: 1em
#progress-bar
margin-top: 1em
#action-chooser #action-chooser
width: 100% width: 100%

@ -22,6 +22,7 @@ export class FeedComponent implements OnInit {
private file; private file;
fileType; fileType;
public localFileUrl; public localFileUrl;
posting = false;
checked = false; // if the "I protected the environment."-box is checked checked = false; // if the "I protected the environment."-box is checked
view = 'new'; view = 'new';
@ -70,7 +71,9 @@ export class FeedComponent implements OnInit {
*/ */
createPost(postElement, activityId: string) { createPost(postElement, activityId: string) {
if (postElement && activityId && this.checked) { if (postElement && activityId && this.checked) {
this.posting = true;
this.feedService.createPostActivity(postElement.value, activityId, this.file).subscribe(() => { this.feedService.createPostActivity(postElement.value, activityId, this.file).subscribe(() => {
this.posting = false;
postElement.value = ''; postElement.value = '';
this.textInputValue = ''; this.textInputValue = '';
this.checked = false; this.checked = false;
@ -81,11 +84,14 @@ export class FeedComponent implements OnInit {
this.showNew(); this.showNew();
} }
}, (error: IErrorResponse) => { }, (error: IErrorResponse) => {
this.posting = false;
this.errorOccurred = true; this.errorOccurred = true;
this.errorMessage = error.error.errors[0].message; this.errorMessage = error.error.errors[0].message;
}); });
} else if (postElement) { } else if (postElement) {
this.posting = true;
this.feedService.createPost(postElement.value, this.file).subscribe(() => { this.feedService.createPost(postElement.value, this.file).subscribe(() => {
this.posting = false;
postElement.value = ''; postElement.value = '';
this.textInputValue = ''; this.textInputValue = '';
this.checked = false; this.checked = false;
@ -96,6 +102,7 @@ export class FeedComponent implements OnInit {
this.showNew(); this.showNew();
} }
}, (error: IErrorResponse) => { }, (error: IErrorResponse) => {
this.posting = false;
this.errorOccurred = true; this.errorOccurred = true;
this.errorMessage = error.error.errors[0].message; this.errorMessage = error.error.errors[0].message;
}); });
@ -119,7 +126,7 @@ export class FeedComponent implements OnInit {
} }
/** /**
* Fetches the next posts when scrolled * Fetches the next posts when scrolled down
*/ */
onScroll() { onScroll() {
this.feedService.getNextPosts(); this.feedService.getNextPosts();

Loading…
Cancel
Save