D-Net

<div class="uk-grid uk-grid-stack">

  <div class="uk-width-expand@m uk-first-column">

    <div class="uk-margin-medium-bottom">

      <h1 class="uk-article-title">Run compatibility test</h1>

    </div>

    <div class="wizard">

      <div class="wizardBreadcrumbs">

        <div class="steps clearfix">

          <div class="step active">

            <div>

              Select datasource

              <span></span>

            </div>

          </div>

          <div class="step {{step2}}">

            <div>

              Select guidlines

              <span></span>

            </div>

          </div>

          <div class="step {{step3}}">

            <div>

              Select parameters

              <span></span>

            </div>

          </div>

          <div class="step {{step4}}">

            <div>

              Finish

              <span></span>

            </div>

          </div>

        </div>

      </div>

      <div class="content">

        <div>

          <div class="animated fadeInRight stepContent">

            <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>

            <div *ngIf="showSpinner" style="text-align: center; margin-top: 100px;">

              <span>{{ loadingMessage }}</span><br>

              <img src="/assets/imgs/loader-big.gif">

            </div>

            <div *ngIf="showDatasource">

              <compatibility-validate-step1 #step1ChooseBaseUrl

                                            [baseUrlList]="baseUrlList"></compatibility-validate-step1>

            </div>

            <div *ngIf="showGuidelines">

              <compatibility-validate-step2 #step2ChooseGuidelines

                                            [ruleSets]="ruleSets">

              </compatibility-validate-step2>

            </div>

            <div *ngIf="showParameters">

              <div>

                Select Parameters

              </div>

            </div>

            <div *ngIf="showFinish">

              <div>

                <div class="success">

                  <i class="fa fa-check-circle" style=""></i>

                  <h3>Validation has begun successfully!</h3>

                </div>

                <div class="uk-alert uk-alert-primary marginTop20 textAlignCenter">

                  You will be notified by email with the results of the compatibility test.

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>

      <div class="wizardActions">

        <button *ngIf="!showDatasource && !showFinish" class="uk-button uk-button-grey-light" type="button" (click)="moveBackAStep()">

          <i class="fa fa-angle-double-left"></i>

          Back

        </button>

        <button *ngIf="!showFinish" class="uk-button uk-button-grey-light" type="button" (click)="moveAStep()">

          <span *ngIf="!showParameters">Next</span>

          <span *ngIf="showParameters" class="uk-link">Finish</span>

          <i class="fa fa-angle-double-right"></i>

        </button>

      </div>

    </div>

  </div>

  <div class="tm-sidebar uk-width-1-4@m">

    <div *ngIf="showDatasource">

      <div class="uk-card uk-card-body uk-card-default sidemenu">

        <h3 class="el-title uk-h3 uk-heading-bullet">Select repository/journal</h3>

        <p class="small">

          Select from the list, or enter the base OAI URL of the repository/journal. The repository's/journal's published sets are exposed in a later stage and you may select one for the compatibility tests.

        </p>

      </div>

    </div>

    <div *ngIf="showGuidelines">

      <div class="uk-card uk-card-body uk-card-default sidemenu">

        <h3 class="el-title uk-h3 uk-heading-bullet">Select guidelines</h3>

        <p class="small">

          You may apply two types of compatibility tests on your repository:

        </p>

        <ul class="small">

          <li>Content: specific to the content/format of the dc fields</li>

          <li>Usage: specific to the implementation of OAI-PMH</li>

        </ul>

        <p class="small">

          You may select from a predifined set of rules (OpenAIRE for Literature Repositories, OpenAIRE for Data Archives) or customize them according to your needs.

        </p>

      </div>

    </div>

    <div *ngIf="showParameters">parameters</div>

  </div>

</div>