fix: update feedback & reset file input (#521)

* fix: web update feedback

* fix: forward events to the subscriber

* fix: Reset some logic

* fix: clear file input on upload
This commit is contained in:
mrv777 2024-11-27 18:51:24 -06:00 committed by GitHub
parent 29a543da76
commit a5f6af15a2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 13 deletions

View File

@ -35,7 +35,7 @@
<div class="card">
<h2>Update Firmware <span *ngIf="firmwareUpdateProgress != null">{{firmwareUpdateProgress}}%</span></h2>
<!-- <input type="file" id="file" (change)="otaUpdate($event)" accept=".bin"> -->
<p-fileUpload [customUpload]="true" mode="basic" accept=".bin" (uploadHandler)="otaUpdate($event)"
<p-fileUpload #firmwareUpload [customUpload]="true" mode="basic" accept=".bin" (uploadHandler)="otaUpdate($event)"
[auto]="true" chooseLabel="Browse"></p-fileUpload>
<small>(esp-miner.bin)</small>
@ -46,7 +46,7 @@
<div class="card">
<h2>Update Website <span *ngIf="websiteUpdateProgress != null">{{websiteUpdateProgress}}%</span></h2>
<p-fileUpload [customUpload]="true" mode="basic" accept=".bin" (uploadHandler)="otaWWWUpdate($event)"
<p-fileUpload #websiteUpload [customUpload]="true" mode="basic" accept=".bin" (uploadHandler)="otaWWWUpdate($event)"
[auto]="true" chooseLabel="Browse"></p-fileUpload>
<small>(www.bin)</small>

View File

@ -1,8 +1,8 @@
import { HttpErrorResponse, HttpEventType } from '@angular/common/http';
import { Component } from '@angular/core';
import { Component, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { FileUploadHandlerEvent } from 'primeng/fileupload';
import { FileUploadHandlerEvent, FileUpload } from 'primeng/fileupload';
import { map, Observable, shareReplay, startWith } from 'rxjs';
import { GithubUpdateService } from 'src/app/services/github-update.service';
import { LoadingService } from 'src/app/services/loading.service';
@ -31,6 +31,9 @@ export class SettingsComponent {
public info$: Observable<any>;
@ViewChild('firmwareUpload') firmwareUpload!: FileUpload;
@ViewChild('websiteUpload') websiteUpload!: FileUpload;
constructor(
private fb: FormBuilder,
private systemService: SystemService,
@ -132,7 +135,8 @@ export class SettingsComponent {
otaUpdate(event: FileUploadHandlerEvent) {
const file = event.files[0];
this.firmwareUpload.clear(); // clear the file upload component
if (file.name != 'esp-miner.bin') {
this.toastrService.error('Incorrect file, looking for esp-miner.bin.', 'Error');
return;
@ -168,6 +172,8 @@ export class SettingsComponent {
otaWWWUpdate(event: FileUploadHandlerEvent) {
const file = event.files[0];
this.websiteUpload.clear(); // clear the file upload component
if (file.name != 'www.bin') {
this.toastrService.error('Incorrect file, looking for www.bin.', 'Error');
return;
@ -182,22 +188,23 @@ export class SettingsComponent {
this.websiteUpdateProgress = Math.round((event.loaded / (event.total as number)) * 100);
} else if (event.type === HttpEventType.Response) {
if (event.ok) {
this.toastrService.success('Website updated', 'Success!');
setTimeout(() => {
this.toastrService.success('Website updated', 'Success!');
window.location.reload();
}, 1000);
}, 2000);
} else {
this.toastrService.error(event.statusText, 'Error');
}
}
else if (event instanceof HttpErrorResponse)
{
this.toastrService.error(event.error, 'Error');
const errorMessage = event.error?.message || event.message || 'Unknown error occurred';
this.toastrService.error(errorMessage, 'Error');
}
},
error: (err) => {
this.toastrService.error(err.error, 'Error');
const errorMessage = err.error?.message || err.message || 'Unknown error occurred';
this.toastrService.error(errorMessage, 'Error');
},
complete: () => {
this.websiteUpdateProgress = null;

View File

@ -92,14 +92,13 @@ export class SystemService {
'Content-Type': 'application/octet-stream', // Set the content type
},
}).subscribe({
next: (e) => {
next: (event) => {
subscriber.next(event);
},
error: (err) => {
subscriber.error(err)
},
complete: () => {
subscriber.next()
subscriber.complete();
}
});