sai-editor.component.html

<app-sai-top-bar></app-sai-top-bar>

<div class="container-fluid">

  <span *ngIf="editorService.loading">Loading...</span>

  <div *ngIf="editorService.form && !!editorService.loadedEntityId && !editorService.loading">

    <app-query-output [editorService]="editorService" (executeQuery)="editorService.save($event)"></app-query-output>

    <div class="wiki-link">
      <a [href]="docUrl" target="_blank">
        <i class="fas fa-link"></i> {{ editorService.entityTable }} documentation
      </a>
    </div>

    <form
      [formGroup]="editorService.form"
      class="edit-form mt-2 mb-2"
    >

      <div class="row">

        <div class="col-sm-6 col-lg-3 sai-category">
          <p class="sai-category-title" style="margin-bottom: 38px;">General</p>

          <div class="form-row">
            <div class="form-group col-3">
              <label class="control-label" for="event_type">Event</label>
            </div>

            <div class="form-group col">
              <select [formControlName]="'event_type'" id="event_type" class="form-control form-control-sm">
                <option *ngFor="let key of SAI_EVENTS_KEYS" [ngValue]="key" [label]="key + ' - ' + SAI_EVENTS[key]"></option>
              </select>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-3">
              <label class="control-label" for="action_type">Action</label>
            </div>

            <div class="form-group col">
              <select [formControlName]="'action_type'" id="action_type" class="form-control form-control-sm">
                <option *ngFor="let key of SAI_ACTIONS_KEYS" [ngValue]="key" [label]="key + ' - ' + SAI_ACTIONS[key]"></option>
              </select>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-3">
              <label class="control-label" for="target_type">Target</label>
            </div>

            <div class="form-group col">
              <select [formControlName]="'target_type'" id="target_type" class="form-control form-control-sm">
                <option *ngFor="let key of SAI_TARGETS_KEYS" [ngValue]="key" [label]="key + ' - ' + SAI_TARGETS[key]"></option>
              </select>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-6">
              <label class="control-label" for="link">link</label>
            </div>

            <div class="form-group col">
              <input [formControlName]="'link'" id="link" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-6">
              <label class="control-label" for="event_phase_mask">phase</label>
            </div>

            <div class="form-group col">
              <input [formControlName]="'event_phase_mask'" id="event_phase_mask" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-6">
              <label class="control-label" for="event_chance">chance</label>
            </div>

            <div class="form-group col">
              <input [formControlName]="'event_chance'" id="event_chance" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-6">
              <label class="control-label" for="event_flags">flags</label>
            </div>

            <div class="form-group col">
              <input [formControlName]="'event_flags'" id="event_flags" type="number" class="form-control form-control-sm">
            </div>
          </div>

        </div>

        <div class="col-sm-6 col-lg-3 sai-category">
          <p class="sai-category-title">Event</p>
          <p class="sai-category-subtitle">
            {{ SAI_EVENTS[selectedEvent] }} <i
            class="fas fa-info-circle ml-1" [placement]="'auto'"
            [tooltip]="SAI_EVENT_TOOLTIPS[selectedEvent]"
          ></i>
          </p>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param1 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="EVENT_PARAM1_TOOLTIPS[selectedEvent]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'event_param1'" id="event_param1" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param2 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="EVENT_PARAM2_TOOLTIPS[selectedEvent]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'event_param2'" id="event_param2" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param3 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="EVENT_PARAM3_TOOLTIPS[selectedEvent]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'event_param3'" id="event_param3" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param4 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="EVENT_PARAM4_TOOLTIPS[selectedEvent]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'event_param4'" id="event_param4" type="number" class="form-control form-control-sm">
            </div>
          </div>

        </div>

        <div class="col-sm-6 col-lg-3 sai-category">
          <p class="sai-category-title">Action</p>
          <p class="sai-category-subtitle">
            {{ SAI_ACTIONS[selectedAction] }} <i
            class="fas fa-info-circle ml-1" [placement]="'auto'"
            [tooltip]="SAI_ACTION_TOOLTIPS[selectedAction]"
          ></i>
          </p>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param1 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="ACTION_PARAM1_TOOLTIPS[selectedAction]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'action_param1'" id="action_param1" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param2 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="ACTION_PARAM2_TOOLTIPS[selectedAction]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'action_param2'" id="action_param2" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param3 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="ACTION_PARAM3_TOOLTIPS[selectedAction]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'action_param3'" id="action_param3" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param4 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="ACTION_PARAM4_TOOLTIPS[selectedAction]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'action_param4'" id="action_param4" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param5 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="ACTION_PARAM5_TOOLTIPS[selectedAction]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'action_param5'" id="action_param5" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param6 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="ACTION_PARAM6_TOOLTIPS[selectedAction]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'action_param6'" id="action_param6" type="number" class="form-control form-control-sm">
            </div>
          </div>

        </div>

        <div class="col-sm-6 col-lg-3 sai-category">
          <p class="sai-category-title">Target</p>
          <p class="sai-category-subtitle">
            {{ SAI_TARGETS[selectedTarget] }} <i
            class="fas fa-info-circle ml-1" [placement]="'auto'"
            [tooltip]="SAI_TARGET_TOOLTIPS[selectedTarget]"
          ></i>
          </p>


          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param1 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="TARGET_PARAM1_TOOLTIPS[selectedTarget]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'target_param1'" id="target_param1" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param2 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="TARGET_PARAM2_TOOLTIPS[selectedTarget]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'target_param2'" id="target_param2" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param3 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="TARGET_PARAM3_TOOLTIPS[selectedTarget]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'target_param3'" id="target_param3" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-7">
              <label class="control-label">
                param4 <i
                class="fas fa-info-circle ml-1" [placement]="'auto'"
                [tooltip]="TARGET_PARAM4_TOOLTIPS[selectedTarget]"
              ></i>
              </label>
            </div>

            <div class="form-group col-5">
              <input [formControlName]="'target_param4'" id="target_param4" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-5">
              <label class="control-label">TargetX</label>
            </div>

            <div class="form-group col-7">
              <input [formControlName]="'target_x'" id="target_x" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-5">
              <label class="control-label">TargetY</label>
            </div>

            <div class="form-group col-7">
              <input [formControlName]="'target_y'" id="target_y" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-5">
              <label class="control-label">TargetZ</label>
            </div>

            <div class="form-group col-7">
              <input [formControlName]="'target_z'" id="target_z" type="number" class="form-control form-control-sm">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-5">
              <label class="control-label">TargetO</label>
            </div>

            <div class="form-group col-7">
              <input [formControlName]="'target_o'" id="target_o" type="number" class="form-control form-control-sm">
            </div>
          </div>

        </div>

        <div class="col-12 sai-category comment">

          <div class="form-row">
            <div class="form-group col-4 col-sm-3 col-md-2 col-lg-1">
              <label class="control-label" for="comment">Comment</label>
            </div>

            <div class="form-group col">
              <input [formControlName]="'comment'" id="comment" class="form-control form-control-sm">
            </div>
          </div>

        </div>

      </div>

    </form>

    <div class="row">
      <div class="col-12">

        <button
          id="delete-selected-row-btn"
          class="btn btn-danger btn-sm mr-2"
          (click)="editorService.deleteSelectedRow()"
          [disabled]="editorService.selectedRowId === null"
        >Delete selected row</button>

        <button
          id="add-new-row-btn"
          class="btn btn-success btn-sm"
          (click)="editorService.addNewRow()"
        >Add new row</button>

        <ngx-datatable
          id="editor-table"
          class="bootstrap table table-striped text-center datatable-select"
          [rows]="editorService.newRows"
          [headerHeight]="DTCFG.headerHeight"
          [footerHeight]="DTCFG.footerHeight"
          [columnMode]="DTCFG.columnMode"
          [rowHeight]="DTCFG.rowHeight"
          [selectionType]="DTCFG.selectionType"
          (select)='editorService.onRowSelection($event)'>
          <ngx-datatable-column [width]="30" [sortable]="false">
            <ng-template let-row="row" ngx-datatable-cell-template>
              <i [hidden]="!editorService.isRowSelected(row)" class="fas fa-chevron-right"></i>
            </ng-template>
          </ngx-datatable-column>
          <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="id" prop="id"></ngx-datatable-column>
          <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="event" prop="event_type"></ngx-datatable-column>
          <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="action" prop="action_type"></ngx-datatable-column>
          <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="target" prop="target_type"></ngx-datatable-column>
          <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="link" prop="link"></ngx-datatable-column>
          <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="phase" prop="event_phase_mask"></ngx-datatable-column>
          <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="chance" prop="event_chance"></ngx-datatable-column>
          <ngx-datatable-column [minWidth]="50" [maxWidth]="70" name="flags" prop="event_flags"></ngx-datatable-column>
          <ngx-datatable-column [minWidth]="300" name="comment" prop="comment"></ngx-datatable-column>
        </ngx-datatable>

      </div>
    </div>

  </div>
</div>