170 lines
7.5 KiB
HTML
170 lines
7.5 KiB
HTML
<h2 mat-dialog-title class="dialog-title">
|
|
<mat-icon *ngIf="selectedCategory" class="back-icon" (click)="goBackToCategories()">arrow_back</mat-icon>
|
|
<span *ngIf="!selectedCategory">{{ 'addActionTo' | translate }}: {{ data.commandTask?.name }}</span>
|
|
<span *ngIf="selectedCategory && !selectedAction && isInfoOnlyCategory()" class="title-with-action">
|
|
<mat-icon [style.color]="getSelectedCategoryColor()">{{ categories | keyvalue : undefined }}</mat-icon>
|
|
<ng-container *ngFor="let cat of categories">
|
|
<ng-container *ngIf="cat.id === selectedCategory">
|
|
<mat-icon [style.color]="cat.color">{{ cat.icon }}</mat-icon>
|
|
{{ cat.labelKey | translate }}
|
|
</ng-container>
|
|
</ng-container>
|
|
</span>
|
|
<span *ngIf="selectedAction" class="title-with-action">
|
|
<mat-icon [style.color]="getSelectedCategoryColor()">{{ getSelectedActionIcon() }}</mat-icon>
|
|
{{ getSelectedActionLabel() }}
|
|
</span>
|
|
</h2>
|
|
|
|
<mat-dialog-content class="dialog-content">
|
|
|
|
<!-- PASO 1: Selector de categorías -->
|
|
<div *ngIf="!selectedCategory" class="categories-grid">
|
|
<div *ngFor="let category of categories"
|
|
class="category-card"
|
|
[style.border-left-color]="category.color"
|
|
(click)="selectCategory(category.id)">
|
|
<div class="category-icon" [style.background-color]="category.color">
|
|
<mat-icon>{{ category.icon }}</mat-icon>
|
|
</div>
|
|
<div class="category-info">
|
|
<h3>{{ category.labelKey | translate }}</h3>
|
|
<p>{{ category.descriptionKey | translate }}</p>
|
|
</div>
|
|
<mat-icon class="category-arrow" *ngIf="!category.infoOnly">chevron_right</mat-icon>
|
|
<mat-icon class="category-arrow info-icon" *ngIf="category.infoOnly">info_outline</mat-icon>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PANEL INFORMATIVO: categorías que requieren contexto de equipo -->
|
|
<div *ngIf="selectedCategory && isInfoOnlyCategory()" class="info-panel">
|
|
<div class="info-panel-icon">
|
|
<ng-container *ngFor="let cat of categories">
|
|
<mat-icon *ngIf="cat.id === selectedCategory" [style.color]="cat.color" class="big-info-icon">{{ cat.icon }}</mat-icon>
|
|
</ng-container>
|
|
</div>
|
|
|
|
<div class="info-panel-content">
|
|
<h3>{{ 'assistantRequiredTitle' | translate }}</h3>
|
|
<p>{{ 'assistantRequiredDesc' | translate }}</p>
|
|
|
|
<div class="info-steps">
|
|
<div class="info-step">
|
|
<div class="step-number-badge">1</div>
|
|
<span>{{ 'assistantStep1' | translate }}</span>
|
|
</div>
|
|
<div class="info-step">
|
|
<div class="step-number-badge">2</div>
|
|
<span>{{ 'assistantStep2' | translate }}</span>
|
|
</div>
|
|
<div class="info-step">
|
|
<div class="step-number-badge">3</div>
|
|
<span>{{ 'assistantStep3' | translate }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="info-supported-ops">
|
|
<p class="info-supported-label">{{ 'supportedOpsLabel' | translate }}:</p>
|
|
<ng-container *ngFor="let cat of categories">
|
|
<ng-container *ngIf="cat.id === selectedCategory">
|
|
<div *ngFor="let action of cat.actions" class="info-op-chip">
|
|
<mat-icon [style.color]="cat.color">{{ action.icon }}</mat-icon>
|
|
<span>{{ action.labelKey | translate }}</span>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PASO 2: Selector de acción dentro de categoría (solo si tiene >1 acción y no es infoOnly) -->
|
|
<div *ngIf="selectedCategory && !selectedAction && !isInfoOnlyCategory()" class="actions-grid">
|
|
<div class="actions-list">
|
|
<ng-container *ngFor="let category of categories">
|
|
<ng-container *ngIf="category.id === selectedCategory">
|
|
<div *ngFor="let action of category.actions"
|
|
class="action-card"
|
|
[style.border-left-color]="category.color"
|
|
(click)="selectAction(action.type)">
|
|
<mat-icon [style.color]="category.color">{{ action.icon }}</mat-icon>
|
|
<span>{{ action.labelKey | translate }}</span>
|
|
<mat-icon class="category-arrow">chevron_right</mat-icon>
|
|
</div>
|
|
</ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PASO 3: Formulario según acción seleccionada -->
|
|
<div *ngIf="selectedAction" class="action-form">
|
|
|
|
<!-- Orden de ejecución (común a todas) -->
|
|
<mat-form-field appearance="fill" class="order-field">
|
|
<mat-label>{{ 'executionOrder' | translate }}</mat-label>
|
|
<input matInput type="number" [(ngModel)]="executionOrder" min="0">
|
|
</mat-form-field>
|
|
|
|
<!-- ========== SYSTEM CONTROL (power-on, shutdown, reboot, login) ========== -->
|
|
<div *ngIf="selectedAction === 'power-on' || selectedAction === 'shutdown' || selectedAction === 'reboot' || selectedAction === 'login'"
|
|
class="form-section system-info">
|
|
<div class="system-action-info">
|
|
<mat-icon [style.color]="getSelectedCategoryColor()" class="big-icon">{{ getSelectedActionIcon() }}</mat-icon>
|
|
<p>{{ 'systemActionHint' | translate }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ========== RUN SCRIPT ========== -->
|
|
<div *ngIf="selectedAction === 'run-script'" class="form-section">
|
|
<div class="script-type-selector">
|
|
<mat-radio-group [(ngModel)]="commandType" class="radio-row">
|
|
<mat-radio-button value="new">
|
|
<mat-icon>edit</mat-icon> {{ 'newScript' | translate }}
|
|
</mat-radio-button>
|
|
<mat-radio-button value="existing">
|
|
<mat-icon>storage</mat-icon> {{ 'savedScript' | translate }}
|
|
</mat-radio-button>
|
|
</mat-radio-group>
|
|
</div>
|
|
|
|
<div *ngIf="commandType === 'new'" class="new-command-container">
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>{{ 'enterScript' | translate }}</mat-label>
|
|
<textarea matInput [(ngModel)]="newScript" rows="6" [placeholder]="'writeScriptHere' | translate"></textarea>
|
|
</mat-form-field>
|
|
<button mat-flat-button color="primary" (click)="saveNewScript()">{{ 'saveScript' | translate }}</button>
|
|
</div>
|
|
|
|
<div *ngIf="commandType === 'existing'">
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>{{ 'selectScriptToRun' | translate }}</mat-label>
|
|
<mat-select [(ngModel)]="selectedScript" (selectionChange)="onScriptChange()">
|
|
<mat-option *ngFor="let script of scripts" [value]="script">{{ script.name }}</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div *ngIf="selectedScript && commandType === 'existing'" class="script-container">
|
|
<div class="script-content">
|
|
<h3>{{ 'scriptLabel' | translate }}:</h3>
|
|
<div class="script-preview" [innerHTML]="scriptContent"></div>
|
|
</div>
|
|
<div class="script-params" *ngIf="parameterNames.length > 0">
|
|
<h3>{{ 'enterParameters' | translate }}:</h3>
|
|
<div *ngFor="let paramName of parameterNames">
|
|
<mat-form-field appearance="fill" class="full-width">
|
|
<mat-label>{{ paramName }}</mat-label>
|
|
<input matInput [ngModel]="parameters[paramName]" (ngModelChange)="onParamChange(paramName, $event)" [placeholder]="('valueFor' | translate) + ' ' + paramName">
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions class="action-container">
|
|
<button class="ordinary-button" (click)="onCancel()">{{ 'buttonCancel' | translate }}</button>
|
|
<button class="submit-button" (click)="onSubmit()" *ngIf="selectedAction">{{ 'buttonSave' | translate }}</button>
|
|
</mat-dialog-actions>
|