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> -->

  @if (needsLogin) {
    <div 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>
  }

  @if (!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"
            >
              @for (adminGroup of adminGroups; track adminGroup) {
                <option [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"
              >
                @for (context of allContexts; track context) {
                  <option [value]="context.name">
                    {{ context.name }}
                    @if ((context.attributes | json) != '{}') {
                      <span>( {{ 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>
          @if (isJsonSubmitted) {
            <span>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"
          />
          @if (downloadFileBtn) {
            <button
              (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>
      @if (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>
      }
      <button
        [clrLoading]="createDatabaseLoading"
        (click)="createDatabase()"
        class="btn btn-primary mt-10"
      >
        Create Database
      </button>
      @if (makeDataResponse.length > 0) {
        <p class="mb-0 mt-10">Create Database Completed</p>
        <hr />
        @if (makeDataResponse.length > 0) {
          <div 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>
        @if (validationState !== 'none' || isValidating) {
          <div class="validation-bar">
            @if (isValidating) {
              <span class="spinner spinner-inline mr-10">
                Validating deploy...
              </span>
              <span> Validating deploy... </span>
            }
            @if (!isValidating && validationState === 'error') {
              <clr-icon shape="exclamation-circle" class="is-error"></clr-icon>
              <span> Validation failed </span>
            }
            @if (!isValidating && validationState === 'success') {
              <clr-icon shape="check-circle" class="is-success"></clr-icon>
              <span> Validation succeeded </span>
            }
          </div>
        }
      }
    </form>
  }
</div>