UX and CSS improvements
testing/ogGui-multibranch/pipeline/head There was a failure building this commit Details

pull/13/head
Manuel Aranda Rosales 2025-03-05 17:33:11 +01:00
parent 2b69ef3bd6
commit 754dc8ed15
5 changed files with 62 additions and 49 deletions

View File

@ -31,6 +31,10 @@ table {
gap: 10px;
}
.options-container {
padding: 10px;
}
.select-container {
margin-top: 20px;
align-items: center;

View File

@ -89,56 +89,59 @@
</table>
<mat-divider></mat-divider>
<h3 *ngIf="isMethod('udpcast') || isMethod('uftp')" class="input-group">Opciones multicast</h3>
<h3 *ngIf="isMethod('p2p')" class="input-group">Opciones torrent</h3>
<div *ngIf="isMethod('udpcast') || isMethod('uftp')" class="input-group">
<mat-form-field appearance="fill" class="input-field">
<mat-label>Puerto</mat-label>
<input matInput [(ngModel)]="mcastPort" name="mcastPort">
</mat-form-field>
<div class="options-container">
<h3 *ngIf="isMethod('udpcast') || isMethod('uftp')" class="input-group">Opciones multicast</h3>
<h3 *ngIf="isMethod('p2p')" class="input-group">Opciones torrent</h3>
<div *ngIf="isMethod('udpcast') || isMethod('uftp')" class="input-group">
<mat-form-field appearance="fill" class="input-field">
<mat-label>Puerto</mat-label>
<input matInput [(ngModel)]="mcastPort" name="mcastPort" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Dirección</mat-label>
<input matInput [(ngModel)]="mcastIp" name="mcastIp">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Dirección</mat-label>
<input matInput [(ngModel)]="mcastIp" name="mcastIp">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label i18n="@@mcastModeLabel">Modo Multicast</mat-label>
<mat-select [(ngModel)]="mcastMode" name="mcastMode">
<mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label i18n="@@mcastModeLabel">Modo Multicast</mat-label>
<mat-select [(ngModel)]="mcastMode" name="mcastMode">
<mat-option *ngFor="let option of multicastModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Velocidad</mat-label>
<input matInput [(ngModel)]="mcastSpeed" name="mcastSpeed">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Velocidad</mat-label>
<input matInput [(ngModel)]="mcastSpeed" name="mcastSpeed" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Máximo Clientes</mat-label>
<input matInput [(ngModel)]="mcastMaxClients" name="mcastMaxClients" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Máximo Clientes</mat-label>
<input matInput [(ngModel)]="mcastMaxClients" name="mcastMaxClients" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Tiempo Máximo de Espera</mat-label>
<input matInput [(ngModel)]="mcastMaxTime" name="mcastMaxTime" type="number">
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Tiempo Máximo de Espera</mat-label>
<input matInput [(ngModel)]="mcastMaxTime" name="mcastMaxTime" type="number">
</mat-form-field>
</div>
<div *ngIf="isMethod('p2p')" class="input-group">
<mat-form-field appearance="fill" class="input-field">
<mat-label i18n="@@p2pModeLabel">Modo P2P</mat-label>
<mat-select [(ngModel)]="p2pMode" name="p2pMode">
<mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Semilla</mat-label>
<input matInput [(ngModel)]="p2pTime" name="p2pTime" type="number">
</mat-form-field>
</div>
</div>
<div *ngIf="isMethod('p2p')" class="input-group">
<mat-form-field appearance="fill" class="input-field">
<mat-label i18n="@@p2pModeLabel">Modo P2P</mat-label>
<mat-select [(ngModel)]="p2pMode" name="p2pMode">
<mat-option *ngFor="let option of p2pModeOptions" [value]="option.value">
{{ option.name }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill" class="input-field">
<mat-label>Semilla</mat-label>
<input matInput [(ngModel)]="p2pTime" name="p2pTime" type="number">
</mat-form-field>
</div>

View File

@ -24,7 +24,7 @@ export class DeployImageComponent {
selectedMethod: string | null = null;
selectedPartition: any = null;
mcastIp: string = '';
mcastPort: string = '';
mcastPort: Number = 0;
mcastMode: string = '';
mcastSpeed: Number = 0;
mcastMaxClients: Number = 0;

View File

@ -45,7 +45,7 @@
{{ option.name }}
</mat-option>
</mat-select>
<button *ngIf="filters['status']" mat-icon-button matSuffix aria-label="Clear tree search" (click)="filters['status'] = ''; loadData()">
<button *ngIf="filters['status']" mat-icon-button matSuffix aria-label="Clear tree search" (click)="clearStatusFilter($event)">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
@ -98,4 +98,4 @@
<mat-dialog-actions class="action-container">
<button class="ordinary-button" (click)="onNoClick()">Cancelar</button>
</mat-dialog-actions>
</mat-dialog-actions>

View File

@ -96,6 +96,12 @@ export class ShowClientsComponent implements OnInit {
this.dialogRef.close();
}
clearStatusFilter(event: Event) {
event.stopPropagation();
delete this.filters['status'];
this.loadData();
}
onPageChange(event: any) {
this.page = event.pageIndex;
this.itemsPerPage = event.pageSize;