content-footer.component.html

<div *ngIf="showBatchCommand" class="content-footer">
  <div *ngIf="showCommandZone" class="batch-command-zone">
    <div class="command-header">
      <button nzTrigger="click" [nzDropdownMenu]="menu" nz-button nz-dropdown
              nzOverlayClassName="command-dropdown dark-dropdown"
              nzPlacement="topLeft"
              nzType="link">
        <i nz-icon nzTheme="outline" nzType="read"></i>
        脚本库
      </button>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu class="title">
          <div class="search-input">
            <nz-input-group [nzSuffix]="suffixIconSearch" [nzSize]="'small'">
              <input (ngModelChange)="searchCommand($event)" [(ngModel)]="searchText" type="text" nz-input
                     [placeholder]="this._i18n.instant('SelectCommand')"/>
            </nz-input-group>
            <ng-template #suffixIconSearch>
              <nz-icon nzType="search"/>
            </ng-template>
          </div>
          <li nz-menu-divider></li>
        </ul>
        <ul [nzSelectable]='true' nz-menu>
          <li *ngFor="let item of filterCommands" nz-menu-item (click)="sendQuickCommand(item)">
            <div class="command-item">
              <div class="command-name"> {{ item.name }}</div>
              <div class="command-args"> {{ item.args }}</div>
            </div>
          </li>
        </ul>
      </nz-dropdown-menu>
      <nz-switch [(ngModel)]="sendCommandToAll" nzSize="small"></nz-switch>
      <span style="margin-left: 5px;">{{ "Send text to all ssh terminals" | translate }}</span>
      <nz-tag [nzColor]="'orange'"
              [nzBordered]="false">{{ 'ConnectSessionCount' | translate:{count: connectViewCount} }}
      </nz-tag>
    </div>
    <div class="command-input">
      <code-editor [(ngModel)]="batchCommand"
                   [language]='editorOption.language'
                   [languages]='editorOption.languages'
                   [placeholder]="this._i18n.instant('SendCommandPlaceholder')"
                   setup='minimal'
                   theme='dark'
                   class="command-editor"
      ></code-editor>
      <div class='send-group'>
        <nz-button-group>
          <button class="sent-btn" nz-button (click)="sendBatchCommand()">
            {{ "Send" | translate }}
          </button>
          <button nzTrigger="click" nz-button nz-dropdown [nzDropdownMenu]="send" nzPlacement="topRight">
            <nz-icon nzType="ellipsis"/>
          </button>
        </nz-button-group>
        <nz-dropdown-menu #send="nzDropdownMenu">
          <button class="save-btn" nz-button (click)="onSaveCommand()">
            {{ "Save command" | translate }}
          </button>
        </nz-dropdown-menu>
      </div>
    </div>
  </div>
  <div class="footer-bar">
    <div class="footer-bar__left">
      <button (click)="showCommandZone = !showCommandZone" nz-button nzType="link">
        <i nz-icon nzTheme="outline" nzType="read"></i>
        {{ "BatchCommands" | translate }}
        <i [class.rotate-icon]="showCommandZone" nz-icon nzTheme="outline" nzType="caret-right"></i>
      </button>
    </div>
  </div>
</div>
<!--<div>-->

<!--<div  id="batchCommandDiv">-->
<!--    <mat-select [(ngModel)]="sendCommandRange" class="send-range" panelClass="command-panel">-->
<!--      <mat-option *ngFor="let option of sendCommandOptions" [value]="option.value" class="command-option">-->
<!--        {{ option.label | translate }}-->
<!--      </mat-option>-->
<!--    </mat-select>-->
<!--    <i-->
<!--      (click)="switchCommand()"-->
<!--      class="fa fa-exchange"-->
<!--      matTooltip="{{ (isShowInputCommand ? 'Switch to quick command' : 'Switch to input command') | translate }}"-->
<!--    ></i>-->
<!--    <div *ngIf="isShowInputCommand; else quickCommand" class="input-box">-->
<!--      <input-->
<!--        (keydown.enter)="sendBatchCommand()"-->
<!--        [(ngModel)]="batchCommand"-->
<!--        maxlength="2048"-->
<!--        placeholder="{{ sendCommandRange=='all' ? ('Send text to all ssh terminals' | translate) : ('Send text to current ssh terminals' | translate) }}..."-->
<!--        spellcheck="false" tabindex="2"-->
<!--        title="{{ sendCommandRange=='all' ? ('Send text to all ssh terminals' | translate) : ('Send text to current ssh terminals' | translate) }} ..."-->
<!--        type="text"-->
<!--      >-->
<!--      <i-->
<!--        (click)="onSendCommand()"-->
<!--        class="fa fa-save"-->
<!--        matTooltip="{{ 'Save command' | translate }}"-->
<!--      ></i>-->
<!--    </div>-->
<!--    <ng-template #quickCommand>-->
<!--      <span class="action-left">-->
<!--        <i-->
<!--          (click)="onScrollLeft()"-->
<!--          *ngIf="quickCommands.length > 0"-->
<!--          class="fa fa-angle-double-left"-->
<!--        ></i>-->
<!--      </span>-->
<!--      <ul *ngIf="quickCommands.length > 0; else empty" class="command-list">-->
<!--        <li-->
<!--          (click)="sendQuickCommand(command)"-->
<!--          *ngFor="let command of quickCommands"-->
<!--          [matTooltip]="command.args"-->
<!--          [ngClass]="{'command-box-variable': command.variable.length !== 0}"-->
<!--          class="command-box"-->
<!--          matTooltipPosition="above"-->
<!--        >-->
<!--          <i [ngClass]="command.module.value + '_ico_docu'" class="view_icon"></i>-->
<!--          <span style="vertical-align: middle;">{{ command.name }}</span>-->
<!--        </li>-->
<!--      </ul>-->
<!--      <span class="action-right">-->
<!--        <i (click)="onScrollRight()" *ngIf="quickCommands.length > 0" class="fa fa-angle-double-right"></i>-->
<!--        <i (click)="quickCommandsFilter()" class="fa fa-refresh"></i>-->
<!--      </span>-->
<!--      <ng-template #empty>-->
<!--        <div class="not-command">{{ 'Not quick command'| translate }}</div>-->
<!--      </ng-template>-->
<!--    </ng-template>-->
<!--  </div>-->
<!--</div>-->