D-Net

<div id="page_content">

  <div id="page_content_inner">

    <h2 class="heading_b uk-margin-bottom">Metrics for {{repo.officialName}}</h2>

    <!-- TOP HELP CONTENT -->

    <help-content #topHelperContent [position]="'top'"

                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>

    <div class="uk-grid">

      <!-- LEFT HELP CONTENT -->

      <aside-help-content #leftHelperContent [position]="'left'"

                          [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

      <!-- MIDDLE -->

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

        <div>

          <div *ngIf="successMessage" class="uk-alert uk-alert-success">{{ successMessage }}</div>

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

          <div *ngIf="loadingMessage" class="loading-big">

            <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

              {{ loadingMessage }}

            </div>

            <div class="transparentFilm"></div>

          <div *ngIf="repo && !loadingMessage">

            <div class="md-card">

              <div class="md-card-content large-padding">

                <div class="uk-article">

                  <p class="uk-article-lead uk-margin-bottom">You don't have metrics enabled for this repository yet. Would you like to enable them?</p>

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

                    <figure class="uk-width-1-3 uk-first-column">

                      <img src="../../../assets/imgs/metricsWorkflow-new.svg" alt="" data-dense-cap="2" class="dense-image dense-ready">

                      <figcaption class="uk-thumbnail-caption">Usage stats enable workflow</figcaption>

                    </figure>

                    <div class="info uk-width-2-3">

                      <p>Once you select to enable metrics for your repository, the following steps need to be performed:</p>

                      <p><i>On your side</i><br>

                        1. Download the tracking code for your repository platform<br>

                        2. Configure the tracking code according to the instructions<br>

                        3. Deploy the tracking code in your repository platform

                      </p>

                      <p><i>On the OpenAIRE's side</i><br>

                        4. Validate the installation of the tracking code and inform the repository manager accordingly<br>

                      </p>

                    </div>

                  <blockquote>

                    For more details about the workflows and tools please consult the

                    <a target="_blank" href="https://openaire.github.io/usage-statistics-guidelines/">

                      “Guidelines for Collecting Usage Events and Provision of Usage Statistics”

                    </a>

                    .

                  </blockquote>

                  <button class="uk-button uk-button-primary uk-margin-top" (click)="confirmEnabling()">Enable Metrics</button>

                </div>

          </div>

      <!-- RIGHT HELP CONTENT -->

      <aside-help-content #rightHelperContent [position]="'right'"

                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">

      </aside-help-content>

    <!-- BOTTOM HELP CONTENT -->

    <help-content #bottomHelperContent [position]="'bottom'"

                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">

    </help-content>