routeros_backup_next/frontend/src/app/features/routers/routers-page.component.html

<app-page-header [eyebrow]="'routers.eyebrow' | translate" [title]="'routers.title' | translate" [subtitle]="'routers.subtitle' | translate">
  <div header-actions class="header-actions-row">
    <button pButton type="button" icon="pi pi-plus" (click)="openCreate()" [label]="'routers.add' | translate"></button>
  </div>
</app-page-header>

<div class="inline-summary inline-summary--soft">
  <div class="inline-summary__item">
    <strong>{{ routers.length }}</strong>
    <span>{{ 'routers.registeredDevices' | translate }}</span>
  </div>
  <div class="inline-summary__divider"></div>
  <div class="inline-summary__item">
    <strong>{{ routerOsCount }}</strong>
    <span>{{ 'routers.routeros' | translate }}</span>
  </div>
  <div class="inline-summary__divider"></div>
  <div class="inline-summary__item">
    <strong>{{ switchOsCount }}</strong>
    <span>{{ 'routers.switchos' | translate }}</span>
  </div>
</div>

<app-section-card [title]="'routers.listTitle' | translate" [subtitle]="'routers.listSubtitle' | translate">
  <p-table [value]="routers" responsiveLayout="scroll" styleClass="app-table">
    <ng-template pTemplate="header">
      <tr><th>{{ 'routers.name' | translate }}</th><th>{{ 'routers.endpoint' | translate }}</th><th>{{ 'routers.access' | translate }}</th><th>{{ 'common.actions' | translate }}</th></tr>
    </ng-template>
    <ng-template pTemplate="body" let-routerItem>
      <tr>
        <td>
          <div class="table-primary">{{ routerItem.name }}</div>
          <small class="table-secondary">{{ deviceTypeLabel(routerItem) }}</small>
        </td>
        <td>
          <div class="table-primary">{{ routerItem.host }}:{{ routerItem.port }}</div>
          <small class="table-secondary">{{ accessUser(routerItem) }}</small>
        </td>
        <td>
          <div class="inline-tags">
            <p-tag [value]="primaryAccessTag(routerItem).value" [severity]="primaryAccessTag(routerItem).severity"></p-tag>
            <p-tag [value]="secondaryAccessTag(routerItem).value" [severity]="secondaryAccessTag(routerItem).severity"></p-tag>
          </div>
        </td>
        <td>
          <div class="table-actions table-actions--labels">
            <button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" icon="pi pi-arrow-right" [label]="'common.open' | translate" (click)="open(routerItem.id)"></button>
            <button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="secondary" icon="pi pi-pencil" [label]="'common.edit' | translate" (click)="edit(routerItem)"></button>
            <button pButton type="button" size="small" styleClass="table-action-btn table-action-btn--wide" severity="danger" icon="pi pi-trash" [label]="'common.delete' | translate" (click)="remove(routerItem.id)"></button>
          </div>
        </td>
      </tr>
    </ng-template>
  </p-table>
</app-section-card>

<p-dialog [(visible)]="visible" [modal]="true" [draggable]="false" [resizable]="false" [style]="{ width: 'min(760px, 96vw)' }" styleClass="router-dialog">
  <ng-template pTemplate="header">
    <div class="router-dialog-header">
      <div class="router-dialog-header__icon">
        <i class="pi" [ngClass]="selectedDeviceType === 'switchos' ? 'pi-sitemap' : 'pi-server'"></i>
      </div>
      <div class="router-dialog-header__text">
        <div class="router-dialog-header__eyebrow">
          {{ 'routers.deviceType' | translate }} · {{ selectedDeviceType === 'switchos' ? ('routers.switchos' | translate) : ('routers.routeros' | translate) }}
        </div>
        <div class="router-dialog-header__title">{{ dialogTitle }}</div>
        <small>
          {{
            selectedDeviceType === 'switchos'
              ? ('routers.switchDialogSubtitle' | translate)
              : ('routers.routerDialogSubtitle' | translate)
          }}
        </small>
      </div>
    </div>
  </ng-template>

  <form [formGroup]="form" (ngSubmit)="save()" class="router-dialog-form">
    <section class="router-dialog-panel">
      <div class="router-dialog-panel__header">
        <div>
          <strong>{{ 'routers.connectionSectionTitle' | translate }}</strong>
          <p>{{ 'routers.connectionSectionHint' | translate }}</p>
        </div>
        <span class="router-dialog-pill">
          <i class="pi" [ngClass]="selectedDeviceType === 'switchos' ? 'pi-globe' : 'pi-shield'"></i>
          {{ selectedDeviceType === 'switchos' ? 'HTTP' : 'SSH' }}
        </span>
      </div>

      <div class="form-grid-2 router-dialog-grid">
        <span class="form-field">
          <label>{{ 'routers.name' | translate }}</label>
          <input pInputText formControlName="name" placeholder="core-router-waw" />
        </span>
        <span class="form-field">
          <label>{{ 'routers.deviceType' | translate }}</label>
          <p-dropdown [options]="deviceTypeOptions" formControlName="device_type" optionLabel="label" optionValue="value"></p-dropdown>
        </span>
        <span class="form-field">
          <label>{{ 'routers.host' | translate }}</label>
          <input pInputText formControlName="host" placeholder="10.0.0.1" />
        </span>
        <span class="form-field">
          <label>{{ 'routers.port' | translate }}</label>
          <input pInputText type="number" formControlName="port" [placeholder]="selectedDeviceType === 'switchos' ? '80' : '22'" />
        </span>
      </div>
    </section>

    <section class="router-dialog-panel">
      <div class="router-dialog-panel__header">
        <div>
          <strong>{{ 'routers.credentialsSectionTitle' | translate }}</strong>
          <p>
            {{
              selectedDeviceType === 'switchos'
                ? ('routers.switchDialogSubtitle' | translate)
                : ('routers.routerDialogSubtitle' | translate)
            }}
          </p>
        </div>
        <span class="router-dialog-pill">
          <i class="pi pi-key"></i>
          {{ selectedDeviceType === 'switchos' ? ('routers.defaultCredentials' | translate) : 'SSH' }}
        </span>
      </div>

      <div class="form-grid-2 router-dialog-grid">
        <span class="form-field">
          <label>{{ 'routers.sshUser' | translate }}</label>
          <input pInputText formControlName="ssh_user" [placeholder]="selectedDeviceType === 'switchos' ? ('routers.switchUserPlaceholder' | translate) : 'admin'" />
        </span>
        <span class="form-field">
          <label>{{ 'routers.sshPassword' | translate }}</label>
          <input pInputText type="password" formControlName="ssh_password" [placeholder]="selectedDeviceType === 'switchos' ? ('routers.switchPasswordPlaceholder' | translate) : ('routers.optionalPassword' | translate)" />
        </span>
        <span class="form-field form-field--full" *ngIf="selectedDeviceType === 'routeros'">
          <label>{{ 'routers.sshPrivateKey' | translate }}</label>
          <textarea pInputTextarea formControlName="ssh_key" rows="8" [placeholder]="'routers.optionalPrivateKey' | translate"></textarea>
        </span>
      </div>

      <div class="router-dialog-note" *ngIf="selectedDeviceType === 'switchos'">
        <i class="pi pi-info-circle"></i>
        <span>{{ 'routers.switchDefaultsHint' | translate }}</span>
      </div>
    </section>

    <div class="dialog-actions router-dialog-actions">
      <button pButton type="button" severity="secondary" [label]="'common.cancel' | translate" (click)="visible=false"></button>
      <button pButton type="submit" [disabled]="form.invalid || saving" [loading]="saving" [label]="'routers.saveRouter' | translate"></button>
    </div>
  </form>
</p-dialog>