dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Update firmware table config

Browse Source
This commit is contained in:
Vladyslav_Prykhodko 2021-04-23 17:38:26 +03:00 committed by Andrew Shvayka
parent 5f8a9e9f67
commit c8488aa52b
6 changed files with 99 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ui-ngx/src/app/modules/home/pages/firmware/firmware-table-config.resolve.ts
View File

@ -29,7 +29,7 @@ import { FirmwareService } from '@core/http/firmware.service';
import { PageLink } from '@shared/models/page/page-link';
import { FirmwaresComponent } from '@home/pages/firmware/firmwares.component';
import { EntityAction } from '@home/models/entity/entity-component.models';
import { DeviceInfo } from '@shared/models/device.models';
import { FileSizePipe } from '@shared/pipe/file-size.pipe';
@Injectable()
export class FirmwareTableConfigResolve implements Resolve<EntityTableConfig<Firmware, PageLink, FirmwareInfo>> {
@ -38,7 +38,8 @@ export class FirmwareTableConfigResolve implements Resolve<EntityTableConfig<Fir
constructor(private translate: TranslateService,
private datePipe: DatePipe,
private firmwareService: FirmwareService) {
private firmwareService: FirmwareService,
private fileSize: FileSizePipe) {
this.config.entityType = EntityType.FIRMWARE;
this.config.entityComponent = FirmwaresComponent;
this.config.entityTranslations = entityTypeTranslations.get(EntityType.FIRMWARE);
@ -48,13 +49,20 @@ export class FirmwareTableConfigResolve implements Resolve<EntityTableConfig<Fir
this.config.columns.push(
new DateEntityTableColumn<FirmwareInfo>('createdTime', 'common.created-time', this.datePipe, '150px'),
new EntityTableColumn<FirmwareInfo>('title', 'firmware.title', '50%'),
new EntityTableColumn<FirmwareInfo>('version', 'firmware.version', '50%')
new EntityTableColumn<FirmwareInfo>('title', 'firmware.title', '33%'),
new EntityTableColumn<FirmwareInfo>('version', 'firmware.version', '33%'),
new EntityTableColumn<FirmwareInfo>('fileName', 'firmware.file-name', '33%'),
new EntityTableColumn<FirmwareInfo>('dataSize', 'firmware.file-size', '70px', entity => {
return this.fileSize.transform(entity.dataSize || 0);
}),
new EntityTableColumn<FirmwareInfo>('checksum', 'firmware.checksum', '540px', entity => {
return `${entity.checksumAlgorithm}: ${entity.checksum}`;
}, () => ({}), false)
);
this.config.cellActionDescriptors.push(
{
name: this.translate.instant('firmware.export'),
name: this.translate.instant('firmware.download'),
icon: 'file_download',
isEnabled: (firmware) => firmware.hasData,
onAction: ($event, entity) => this.exportFirmware($event, entity)

75
ui-ngx/src/app/modules/home/pages/firmware/firmwares.component.html
View File

@ -20,23 +20,31 @@
[disabled]="(isLoading$ | async) || !entity?.hasData"
(click)="onEntityAction($event, 'uploadFirmware')"
[fxShow]="!isEdit">
{{'firmware.export' | translate }}
{{ 'firmware.download' | translate }}
</button>
<button mat-raised-button color="primary" fxFlex.xs
[disabled]="(isLoading$ | async)"
(click)="onEntityAction($event, 'delete')"
[fxShow]="!hideDelete() && !isEdit">
{{'resource.delete' | translate }}
{{ 'firmware.delete' | translate }}
</button>
<div fxLayout="row" fxLayout.xs="column">
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onFirmwareIdCopied($event)"
(cbOnSuccess)="onFirmwareIdCopied()"
[cbContent]="entity?.id?.id"
[fxShow]="!isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>firmware.copyId</span>
</button>
<button mat-raised-button
ngxClipboard
(cbOnSuccess)="onFirmwareChecksumCopied()"
[cbContent]="entity?.checksum"
[fxShow]="!isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>firmware.copy-checksum</span>
</button>
</div>
</div>
<div class="mat-padding" fxLayout="column">
@ -46,39 +54,40 @@
<div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
<mat-form-field class="mat-block" fxFlex="45">
<mat-label translate>firmware.title</mat-label>
<input matInput formControlName="title" type="text" required>
<input matInput formControlName="title" type="text" required [readonly]="!isAdd">
<mat-error *ngIf="entityForm.get('title').hasError('required')">
{{ 'firmware.title-required' | translate }}
</mat-error>
</mat-form-field>
<mat-form-field class="mat-block" fxFlex>
<mat-label translate>firmware.version</mat-label>
<input matInput formControlName="version" type="text" required>
<input matInput formControlName="version" type="text" required [readonly]="!isAdd">
<mat-error *ngIf="entityForm.get('version').hasError('required')">
{{ 'firmware.version-required' | translate }}
</mat-error>
</mat-form-field>
</div>
<section *ngIf="isAdd" style="padding-bottom: 8px">
<div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayout.xs="column">
<mat-form-field class="mat-block" fxFlex="45">
<mat-label translate>firmware.checksum-algorithm</mat-label>
<mat-select formControlName="checksumAlgorithm">
<mat-option [value]=null></mat-option>
<mat-option *ngFor="let checksumAlgorithm of checksumAlgorithms" [value]="checksumAlgorithm">
{{ checksumAlgorithmTranslationMap.get(checksumAlgorithm) }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mat-block" fxFlex>
<mat-label translate>firmware.checksum</mat-label>
<input matInput formControlName="checksum" type="text"
[required]="entityForm.get('checksumAlgorithm').value != null">
<mat-error *ngIf="entityForm.get('checksumAlgorithm').hasError('required')">
{{ 'firmware.checksum-required' | translate }}
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayoutGap.gt-xs="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
<mat-form-field class="mat-block" fxFlex="33">
<mat-label translate>firmware.checksum-algorithm</mat-label>
<input *ngIf="!isAdd" matInput formControlName="checksumAlgorithm" type="text" [readonly]="isEdit">
<mat-select formControlName="checksumAlgorithm" *ngIf="isAdd">
<mat-option [value]=null></mat-option>
<mat-option *ngFor="let checksumAlgorithm of checksumAlgorithms" [value]="checksumAlgorithm">
{{ checksumAlgorithmTranslationMap.get(checksumAlgorithm) }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="mat-block" fxFlex>
<mat-label translate>firmware.checksum</mat-label>
<input matInput formControlName="checksum" type="text" [readonly]="!isAdd"
[required]="entityForm.get('checksumAlgorithm').value != null">
<mat-error *ngIf="entityForm.get('checksumAlgorithm').hasError('required')">
{{ 'firmware.checksum-required' | translate }}
</mat-error>
</mat-form-field>
</div>
<section *ngIf="isAdd" style="padding-top: 8px">
<tb-file-input
formControlName="file"
workFromFileObj="true"
@ -86,6 +95,22 @@
dropLabel="{{'resource.drop-file' | translate}}">
</tb-file-input>
</section>
<section *ngIf="!isAdd">
<div fxLayout="row" fxLayoutGap.gt-md="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
<mat-form-field class="mat-block" fxFlex="33">
<mat-label translate>firmware.file-name</mat-label>
<input matInput formControlName="fileName" type="text" readonly>
</mat-form-field>
<mat-form-field class="mat-block" fxFlex>
<mat-label translate>firmware.file-size-bytes</mat-label>
<input matInput formControlName="dataSize" type="text" readonly>
</mat-form-field>
<mat-form-field class="mat-block" fxFlex>
<mat-label translate>firmware.content-type</mat-label>
<input matInput formControlName="contentType" type="text" readonly>
</mat-form-field>
</div>
</section>
<div formGroupName="additionalInfo">
<mat-form-field class="mat-block">
<mat-label translate>firmware.description</mat-label>

30
ui-ngx/src/app/modules/home/pages/firmware/firmwares.component.ts
View File

@ -83,6 +83,8 @@ export class FirmwaresComponent extends EntityComponent<Firmware> implements OnI
const form = this.fb.group({
title: [entity ? entity.title : '', [Validators.required, Validators.maxLength(255)]],
version: [entity ? entity.version : '', [Validators.required, Validators.maxLength(255)]],
checksumAlgorithm: [entity ? entity.checksumAlgorithm : null],
checksum: [entity ? entity.checksum : '', Validators.maxLength(1020)],
additionalInfo: this.fb.group(
{
description: [entity && entity.additionalInfo ? entity.additionalInfo.description : ''],
@ -90,28 +92,31 @@ export class FirmwaresComponent extends EntityComponent<Firmware> implements OnI
)
});
if (this.isAdd) {
form.addControl('checksumAlgorithm', this.fb.control(null));
form.addControl('checksum', this.fb.control('', Validators.maxLength(1020)));
form.addControl('file', this.fb.control(null, Validators.required));
} else {
form.addControl('fileName', this.fb.control(null));
form.addControl('dataSize', this.fb.control(null));
form.addControl('contentType', this.fb.control(null));
}
return form;
}
updateForm(entity: Firmware) {
if (this.isEdit) {
this.entityForm.get('title').disable({emitEvent: false});
this.entityForm.get('version').disable({emitEvent: false});
}
this.entityForm.patchValue({
title: entity.title,
version: entity.version,
checksumAlgorithm: entity.checksumAlgorithm,
checksum: entity.checksum,
fileName: entity.fileName,
dataSize: entity.dataSize,
contentType: entity.contentType,
additionalInfo: {
description: entity.additionalInfo ? entity.additionalInfo.description : ''
}
});
}
onFirmwareIdCopied($event) {
onFirmwareIdCopied() {
this.store.dispatch(new ActionNotificationShow(
{
message: this.translate.instant('firmware.idCopiedMessage'),
@ -121,4 +126,15 @@ export class FirmwaresComponent extends EntityComponent<Firmware> implements OnI
horizontalPosition: 'right'
}));
}
onFirmwareChecksumCopied() {
this.store.dispatch(new ActionNotificationShow(
{
message: this.translate.instant('firmware.checksum-copied-message'),
type: 'success',
duration: 750,
verticalPosition: 'bottom',
horizontalPosition: 'right'
}));
}
}

9
ui-ngx/src/app/shared/models/firmware.models.ts
View File

@ -37,14 +37,15 @@ export interface FirmwareInfo extends BaseData<FirmwareId> {
title?: string;
version?: string;
hasData?: boolean;
fileName: string;
checksum?: ChecksumAlgorithm;
checksumAlgorithm?: string;
contentType: string;
dataSize?: number;
additionalInfo?: any;
}
export interface Firmware extends FirmwareInfo {
file?: File;
data: string;
fileName: string;
checksum?: ChecksumAlgorithm;
checksumAlgorithm?: string;
contentType: string;
}

2
ui-ngx/src/app/shared/pipe/file-size.pipe.ts
View File

@ -23,7 +23,7 @@ type unitPrecisionMap = {
const defaultPrecisionMap: unitPrecisionMap = {
bytes: 0,
KB: 0,
KB: 1,
MB: 1,
GB: 1,
TB: 2,

8
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -1907,8 +1907,11 @@
"firmware": {
"add": "Add firmware",
"checksum": "Checksum",
"checksum-copied-message": "Firmware checksum has been copied to clipboard",
"checksum-required": "Checksum is required.",
"checksum-algorithm": "Checksum algorithm",
"content-type": "Content type",
"copy-checksum": "Copy checksum",
"copyId": "Copy firmware Id",
"description": "Description",
"delete": "Delete firmware",
@ -1917,12 +1920,15 @@
"delete-firmwares-action-title": "Delete { count, plural, 1 {1 firmware} other {# firmwares} }",
"delete-firmwares-text": "Be careful, after the confirmation all selected resources will be removed.",
"delete-firmwares-title": "Are you sure you want to delete { count, plural, 1 {1 firmware} other {# firmwares} }?",
"download": "Download firmware",
"drop-file": "Drop a firmware file or click to select a file to upload.",
"empty": "Firmware is empty",
"export": "Export firmware",
"idCopiedMessage": "Firmware Id has been copied to clipboard",
"no-firmware-matching": "No firmware matching '{{entity}}' were found.",
"no-firmware-text": "No firmwares found",
"file-name": "File name",
"file-size": "File size",
"file-size-bytes": "File size in bytes",
"firmware": "Firmware",
"firmware-details": "Firmware details",
"firmware-required": "Firmware is required.",