Change input to disabled while posting

master
Max 5 years ago
parent 6f83969aed
commit e1c1d9de44

@ -14,22 +14,23 @@
</video>
</div>
<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>
<button mat-button matSuffix mat-icon-button (click)="name.click()"
matTooltip="upload a picture or video (up to 10MB)"
matTooltipShowDelay="200">
matTooltipShowDelay="200"
[disabled]="posting">
<mat-icon>attach_file</mat-icon>
</button>
<input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name>
</mat-form-field>
<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>
</p>
<mat-form-field id="action-chooser" *ngIf="checked">
<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 *ngFor="let action of actionlist.Actions" [value]="action.id" [matTooltip]="action.description"
matTooltipShowDelay="200">
@ -38,7 +39,8 @@
</mat-select>
</mat-form-field>
<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)>
POST
</button>

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

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

Loading…
Cancel
Save