Project

General

Profile

1
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
2
  <div class="uk-width-1-1@m uk-first-column">
3

    
4
    <h1 class="uk-h2">Register your datasource</h1>
5

    
6
    <!-- TOP HELP CONTENT -->
7
    <help-content #topHelperContent [position]="'top'"
8
                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
9
    </help-content>
10

    
11
    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
12
      <div class="uk-grid">
13

    
14
        <!-- LEFT HELP CONTENT -->
15
        <aside-help-content #leftHelperContent [position]="'left'"
16
                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
17
        </aside-help-content>
18

    
19
        <!-- MIDDLE -->
20
        <div class=" uk-width-expand@m">
21

    
22
          <div class="wizard">
23
            <div class="wizardBreadcrumbs">
24
              <div class="steps clearfix">
25
                <div class="step active">
26
                  <div>
27
                    Select repository
28
                    <span></span>
29
                  </div>
30
                </div>
31
                <div class="step {{ (currentStep > 0) ? 'active' : '' }}">
32
                  <div>
33
                    Enter Information
34
                    <span></span>
35
                  </div>
36
                </div>
37
                <div class="step {{ (currentStep > 1) ? 'active' : '' }}">
38
                  <div>
39
                    Add Interfaces
40
                    <span></span>
41
                  </div>
42
                </div>
43
                <div class="step {{ (currentStep > 2) ? 'active' : '' }}">
44
                  <div>
45
                    Finish
46
                    <span></span>
47
                  </div>
48
                </div>
49
              </div>
50
            </div>
51
            <div class="content">
52
              <div>
53
                <div class="animated fadeInRight stepContent">
54
                  <div *ngIf="loadingMessage" class="loading-big">
55
                    <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
56
                      {{ loadingMessage }}
57
                    </div>
58
                    <div class="whiteFilm"></div>
59
                  </div>
60
                  <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
61

    
62
                  <div>
63
                    <app-select-existing-datasource *ngIf="(currentStep === 0) && (currentMode !== null) && !loadingMessage"
64
                                                    #datasourcesByCountry
65
                                                    [mode]="currentMode"
66
                                                    (emitRepoId)="getRepoId($event)"
67
                                                    (promptNext)="goToStep2($event)"></app-select-existing-datasource>
68

    
69
                    <datasource-update-form *ngIf="(currentStep === 1) && (repo !== null) && !loadingMessage"
70
                                            #registerDatasource
71
                                            [selectedRepo]="repo"
72
                                            (emittedInfo)="getUpdatedRepo($event)"></datasource-update-form>
73

    
74
                    <div *ngIf="(currentStep === 2) && repo && !loadingMessage" class="uk-grid uk-child-width-1-2">
75
                      <div *ngFor="let inter of dataForInterfaceComp"
76
                           class="interfacesForm el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">
77
                        <app-repository-interface-form #interfacesArray
78
                                                       [data]="inter"
79
                                                       (emitDeleteInterface)="removeInterfaceFromList($event)">
80
                        </app-repository-interface-form>
81
                      </div>
82
                      <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">
83
                        <div class="interface-box new" style="text-align: center">
84
                          <a class="add-new-element add-new-group" (click)="addInterfaceToList()">
85
                            <i class="far fa-plus-square" aria-hidden="true"></i>
86
                            <span class="info">Add New Interface</span>
87
                          </a>
88
                        </div>
89
                      </div>
90
                    </div>
91
                    <div *ngIf="(currentStep === 3) && !loadingMessage" class="row openAIRECompliantLogoDownload">
92
                      <div class="col-lg-12">
93
                        <div class="col-md-12">
94
                          <div>
95
                            <div class="openAIRECompliantLogo">
96
                              <h2 class="openAIRECompliantLogoMessage">
97
                                Congratulations! Your repository was successfully registered in OpenAIRE. You can download this logo to use in your site.
98
                              </h2>
99
                              <img src="../../../../assets/imgs/3_0ValidatedLogo.png" alt="OpenAireCompliant">
100
                            </div>
101
                          </div>
102
                          <a (click)="downloadLogo()">
103
                            Download
104
                            <i class="fa fa-download" style=""></i>
105
                          </a>
106
                        </div>
107
                      </div>
108
                    </div>
109
                  </div>
110
                </div>
111
              </div>
112
            </div>
113
            <div class="wizardActions">
114
              <button *ngIf="((currentStep === 1) || (currentStep === 2)) && !loadingMessage"
115
                      class="uk-button uk-button-grey-light uk-margin-small-right"
116
                      type="button" (click)="moveBackAStep()">
117
                <i class="fa fa-angle-double-left"></i>
118
                Back
119
              </button>
120
              <button *ngIf="(currentStep < 3) && !loadingMessage"
121
                      class="uk-button uk-button-grey-light uk-margin-small-left"
122
                      type="button" (click)="moveAStep()">
123
                Next
124
                <i class="fa fa-angle-double-right"></i>
125
              </button>
126
            </div>
127
          </div>
128

    
129
        </div>
130

    
131
        <!-- RIGHT HELP CONTENT -->
132
        <aside-help-content #rightHelperContent [position]="'right'"
133
                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
134
        </aside-help-content>
135

    
136
      </div>
137
    </div>
138

    
139

    
140
    <!-- BOTTOM HELP CONTENT -->
141
    <help-content #bottomHelperContent [position]="'bottom'"
142
                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
143
    </help-content>
144

    
145

    
146
  </div>
147
</div>
(3-3/10)