dc/client/src/app/deploy/sections/manual/manual.component.html

<div class="card-header position-relative">
  Configurator
  <p class="d-inline-block ml-10 mb-10 mt-0">App Location: {{ appLoc }}</p>
  <button
    (click)="deleteKeys()"
    class="btn btn-primary clear-memory-button position-absolute"
  >
    Clear memory
  </button>
</div>
<div class="card-block">
  <!-- <div class="card-title">
      Client Details
    </div> -->

  <div *ngIf="needsLogin" id="loginForm" class="d-none">
    <p class="mb-10">Please log in first</p>
    <label for="username" class="clr-control-label">Username</label>
    <div class="mb-10 clr-control-container">
      <div class="clr-input-wrapper">
        <input type="text" id="username" class="clr-input" />
      </div>
    </div>

    <label for="password" class="clr-control-label">Password</label>
    <div class="mb-10 clr-control-container">
      <div class="clr-input-wrapper">
        <input type="password" id="password" class="clr-input" />
      </div>
    </div>

    <button class="btn btn-primary d-none" id="loginBtn">Log in</button>
  </div>

  <ng-container *ngIf="!needsLogin">
    <form>
      <div class="clr-form-control">
        <label for="select-full" class="clr-control-label">Admin group</label>
        <div class="clr-control-container">
          <div class="clr-select-wrapper">
            <select
              [(ngModel)]="selectedAdminGroup"
              [ngModelOptions]="{ standalone: true }"
              name="selectedAdminGroup"
              id="adminGroupsSelect"
              class="clr-select"
            >
              <option
                *ngFor="let adminGroup of adminGroups"
                [value]="adminGroup.id"
              >
                {{ adminGroup.name }}
              </option>
            </select>
          </div>
        </div>
      </div>

      <div class="clr-form-control">
        <div [class.hidden]="contextsLoading">
          <label for="select-full" class="clr-control-label">Context</label>
          <div class="clr-control-container">
            <div class="clr-select-wrapper">
              <select
                [(ngModel)]="selectedContext"
                [ngModelOptions]="{ standalone: true }"
                name="selectedContext"
                class="clr-select"
              >
                <option
                  *ngFor="let context of allContexts"
                  [value]="context.name"
                >
                  {{ context.name }}
                  <span *ngIf="(context.attributes | json) != '{}'"
                    >( {{ context.attributes.sysUserId }} )</span
                  >
                </option>
              </select>
            </div>
          </div>
          <button
            (click)="executableContext()"
            type="button"
            class="btn btn-icon"
            id="contexts-btn"
          >
            <clr-icon shape="play"></clr-icon>
          </button>
        </div>

        <div [class.hidden]="!contextsLoading" class="d-flex">
          <span class="spinner spinner-inline mr-10">
            Loading contexts...
          </span>
          <span> Loading contexts... </span>
        </div>

        <label for="dcloc" class="mt-20 clr-control-label">DC Loc</label>
        <div class="mb-10 clr-control-container">
          <div class="clr-input-wrapper">
            <input
              [(ngModel)]="dcPath"
              [ngModelOptions]="{ standalone: true }"
              (focusout)="saveDcPath()"
              name="dcPath"
              type="text"
              id="dcloc"
              class="clr-input"
            />
          </div>
        </div>

        <p class="mt-10">
          Select JSON file to upload (json build file preloaded):
        </p>
        <div class="d-flex flex-column">
          <input
            type="file"
            (click)="clearUploadInput($event)"
            (change)="onJsonFileChange($event)"
          />
          <!-- <button *ngIf="downloadFileBtn" (click)="downloadSasPrecodeFile()" style="width: 40px; min-width: 0;" class="btn btn-sm btn-icon">
                  <clr-icon shape="download"></clr-icon>
                </button> -->
        </div>

        <div class="mt-20 d-flex align-items-center">
          <button
            (click)="executeJson()"
            class="btn btn-primary"
            [clrLoading]="isSubmittingJson"
            id=""
            class="mt-0"
          >
            SUBMIT JSON
          </button>
          <span *ngIf="isJsonSubmitted">JSON Submitted Successfully</span>

          <!-- <span *ngIf="executingScript" class="spinner spinner-inline ml-3">
                  Loading...
                </span> -->
        </div>

        <p class="mt-10">Select SAS file to upload:</p>
        <div class="d-flex flex-column">
          <input
            type="file"
            (click)="clearUploadInput($event)"
            (change)="onSasFileChange($event); downloadFileBtn = true"
          />
          <button
            *ngIf="downloadFileBtn"
            (click)="downloadSasPrecodeFile()"
            class="btn btn-sm btn-icon min-w-0 w-40"
          >
            <clr-icon shape="download"></clr-icon>
          </button>
        </div>

        <div class="mt-20 d-flex align-items-center">
          <button
            (click)="executeSAS()"
            class="btn btn-primary"
            [clrLoading]="executingScript"
            id="deploy"
            class="mt-0"
          >
            SUBMIT
          </button>

          <!-- <span *ngIf="executingScript" class="spinner spinner-inline ml-3">
                  Loading...
                </span> -->
        </div>
      </div>

      <ng-container *ngIf="jobLog.length > 0">
        <p class="mb-0 mt-10">File execute completed</p>
        <hr />

        <div>
          <button
            (click)="downloadFile(jobLog, 'execute-script-log', 'txt')"
            class="btn btn-primary mt-0 mr-20"
          >
            Download log
          </button>
        </div>
      </ng-container>

      <button
        [clrLoading]="createDatabaseLoading"
        (click)="createDatabase()"
        class="btn btn-primary mt-10"
      >
        Create Database
      </button>

      <ng-container *ngIf="makeDataResponse.length > 0">
        <p class="mb-0 mt-10">Create Database Completed</p>
        <hr />

        <div *ngIf="makeDataResponse.length > 0" class="log-wrapper">
          {{ makeDataResponse }}
        </div>

        <button (click)="navigateToHome()" class="btn btn-primary mt-15">
          Let's get started
        </button>

        <button
          (click)="downloadFile(makeDataResponse, 'create-database-log', 'txt')"
          class="btn btn-primary mt-15"
        >
          Download log
        </button>

        <button (click)="validateDeploy()" class="btn btn-primary mt-15">
          Validate
        </button>

        <div
          *ngIf="validationState !== 'none' || isValidating"
          class="validation-bar"
        >
          <ng-container *ngIf="isValidating">
            <span class="spinner spinner-inline mr-10">
              Validating deploy...
            </span>
            <span> Validating deploy... </span>
          </ng-container>

          <ng-container *ngIf="!isValidating && validationState === 'error'">
            <clr-icon shape="exclamation-circle" class="is-error"></clr-icon>
            <span> Validation failed </span>
          </ng-container>

          <ng-container *ngIf="!isValidating && validationState === 'success'">
            <clr-icon shape="check-circle" class="is-success"></clr-icon>
            <span> Validation succeeded </span>
          </ng-container>
        </div>
      </ng-container>
    </form>
  </ng-container>
</div>