104 lines
4.2 KiB
HTML
104 lines
4.2 KiB
HTML
<div class="plugin-settings-container">
|
|
@if (plugin) {
|
|
<div class="plugin-header-card">
|
|
<div class="plugin-header-icon-box">
|
|
<mat-icon class="plugin-header-icon">{{ plugin.icon }}</mat-icon>
|
|
</div>
|
|
<div class="plugin-header-info">
|
|
<div class="plugin-title-row">
|
|
<h2 class="plugin-title">{{ plugin.title }}</h2>
|
|
<span class="plugin-version-tag">v{{ plugin.version }}</span>
|
|
<span class="plugin-status-tag">Activo</span>
|
|
</div>
|
|
<p class="plugin-description">{{ plugin.description }}</p>
|
|
<span class="plugin-author">Autor: {{ plugin.author }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-form-wrapper">
|
|
<div class="section-title-box">
|
|
<mat-icon class="section-icon">tune</mat-icon>
|
|
<h3 class="section-heading">Parámetros de Configuración del Plugin</h3>
|
|
</div>
|
|
<p class="section-subheading">
|
|
Ajusta el comportamiento y las opciones de ejecución. Los cambios se aplicarán inmediatamente a las nuevas órdenes enviadas a los puestos.
|
|
</p>
|
|
|
|
<div class="form-fields-grid">
|
|
@for (field of schema; track field.key) {
|
|
<div class="form-field-card" [class.full-width]="field.type === 'textarea'">
|
|
<div class="field-meta">
|
|
<label class="field-label" [for]="'field-' + field.key">{{ field.label }}</label>
|
|
@if (field.description) {
|
|
<span class="field-description">{{ field.description }}</span>
|
|
}
|
|
</div>
|
|
|
|
<div class="field-control-container">
|
|
@switch (field.type) {
|
|
@case ('select') {
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<mat-select [id]="'field-' + field.key" [(ngModel)]="configData[field.key]">
|
|
@for (opt of field.options; track opt) {
|
|
<mat-option [value]="opt">{{ opt }}</mat-option>
|
|
}
|
|
</mat-select>
|
|
</mat-form-field>
|
|
}
|
|
|
|
@case ('checkbox') {
|
|
<div class="toggle-wrapper">
|
|
<mat-slide-toggle [id]="'field-' + field.key" color="primary" [(ngModel)]="configData[field.key]">
|
|
{{ configData[field.key] ? 'Habilitado' : 'Deshabilitado' }}
|
|
</mat-slide-toggle>
|
|
</div>
|
|
}
|
|
|
|
@case ('number') {
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<input matInput type="number" [id]="'field-' + field.key" [(ngModel)]="configData[field.key]">
|
|
</mat-form-field>
|
|
}
|
|
|
|
@case ('text') {
|
|
<mat-form-field appearance="outline" class="w-100">
|
|
<input matInput type="text" [id]="'field-' + field.key" [(ngModel)]="configData[field.key]">
|
|
</mat-form-field>
|
|
}
|
|
|
|
@case ('textarea') {
|
|
<mat-form-field appearance="outline" class="w-100 code-field">
|
|
<textarea matInput rows="7" [id]="'field-' + field.key" class="code-textarea" [(ngModel)]="configData[field.key]"></textarea>
|
|
</mat-form-field>
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<div class="form-actions-bar">
|
|
<button mat-stroked-button color="warn" (click)="reset()" class="btn-reset">
|
|
<mat-icon>restart_alt</mat-icon>
|
|
Restaurar por defecto
|
|
</button>
|
|
@if (hasScriptFields()) {
|
|
<button mat-stroked-button color="accent" (click)="regenerateScripts()" class="btn-regenerate">
|
|
<mat-icon>auto_fix_high</mat-icon>
|
|
Regenerar Scripts desde Parámetros
|
|
</button>
|
|
}
|
|
<button mat-raised-button color="primary" (click)="save()" class="btn-save">
|
|
<mat-icon>save</mat-icon>
|
|
Guardar Configuración
|
|
</button>
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<div class="no-plugin-box">
|
|
<mat-icon class="no-plugin-icon">info</mat-icon>
|
|
<p>Selecciona un plugin para ver y editar su configuración.</p>
|
|
</div>
|
|
}
|
|
</div>
|