Project

General

Profile

« Previous | Next » 

Revision 57088

First commit for the new UI theme

View differences:

register-existing-datasource.component.html
1
<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
2
  <div class="uk-width-1-1@m uk-first-column">
1
<!--<div id="page_content">-->
2
  <div id="page_content_inner">
3
    <h2 class="heading_b uk-margin-bottom">Register your datasource</h2>
3 4

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

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

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

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

  
19
        <!-- MIDDLE -->
20
        <div class=" uk-width-expand@m">
17
      <!-- MIDDLE -->
18
      <div class=" uk-width-expand@m">
19
        <div class="md-card uk-margin-large-bottom">
20
          <div class="md-card-content">
21
            <form class="uk-form-stacked" id="wizard_advanced_form" novalidate="">
22
              <div id="wizard_advanced" role="application" class="wizard clearfix">
23
                <div class="steps clearfix">
24
                  <ul role="tablist">
25
                    <li role="tab" class="first {{ (currentStep == 0) ? 'current' : '' }}" aria-disabled="false" aria-selected="true">
26
                      <a id="wizard_advanced-t-0" href="#wizard_advanced-h-0" aria-controls="wizard_advanced-p-0">
27
                        <!--<span class="current-info audible">current step: </span>-->
28
                        <span class="number">1</span>
29
                        <span class="title">Select Repository</span>
30
                      </a>
31
                    </li>
32
                    <li role="tab" class="{{ (currentStep < 1) ? 'disabled' : '' }} {{ (currentStep == 1) ? 'current' : '' }}" aria-disabled="true">
33
                      <a id="wizard_advanced-t-1" href="#wizard_advanced-h-1" aria-controls="wizard_advanced-p-1">
34
                        <span class="number">2</span>
35
                        <span class="title">Enter Information</span>
36
                      </a>
37
                    </li>
38
                    <li role="tab" class=" {{ (currentStep < 2) ? 'disabled' : '' }} {{ (currentStep == 2) ? 'current' : '' }}" aria-disabled="true">
39
                      <a id="wizard_advanced-t-2" href="#wizard_advanced-h-2" aria-controls="wizard_advanced-p-2">
40
                        <span class="number">3</span>
41
                        <span class="title">Add Interfaces</span>
42
                      </a>
43
                    </li>
44
                    <li role="tab" class="last {{ (currentStep < 3) ? 'disabled' : '' }} {{ (currentStep == 3) ? 'current' : '' }}" aria-disabled="true">
45
                      <a id="wizard_advanced-t-3" href="#wizard_advanced-h-3" aria-controls="wizard_advanced-p-3">
46
                        <span class="number">4</span>
47
                        <span class="title">Finish</span>
48
                      </a>
49
                    </li>
50
                  </ul>
51
                </div>
52
                <div class="content clearfix" style="height: 660px">
21 53

  
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 54
                  <div *ngIf="loadingMessage" class="loading-big">
55 55
                    <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">
56 56
                      {{ loadingMessage }}
57 57
                    </div>
58 58
                    <div class="whiteFilm"></div>
59 59
                  </div>
60
                  <div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>
60
                  <div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-top">{{ errorMessage }}</div>
61 61

  
62
                  <div>
62
                  <!-- first section -->
63
                  <h3 id="wizard_advanced-h-0" tabindex="-1" class="title {{ (currentStep == 0) ? 'current' : '' }}">Select Repository</h3>
64
                  <section id="wizard_advanced-p-0" role="tabpanel" aria-labelledby="wizard_advanced-h-0"
65
                           class="body step-0 {{ (currentStep == 0) ? 'current' : '' }}" data-step="0" aria-hidden="false">
66
                    <!--<h2 class="heading_a">-->
67
                    <!--Select Repository-->
68
                    <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
69
                    <!--</h2>-->
70
                    <!--<hr class="md-hr">-->
63 71
                    <app-select-existing-datasource *ngIf="(currentStep === 0) && (currentMode !== null) && !loadingMessage"
64 72
                                                    #datasourcesByCountry
65 73
                                                    [mode]="currentMode"
66 74
                                                    (emitRepoId)="getRepoId($event)"
67 75
                                                    (promptNext)="goToStep2($event)"></app-select-existing-datasource>
76
                  </section>
68 77

  
78
                  <!-- second section -->
79
                  <h3 id="wizard_advanced-h-1" tabindex="-1" class="title {{ (currentStep == 1) ? 'current' : '' }}">Enter Information</h3>
80
                  <section id="wizard_advanced-p-1" role="tabpanel" aria-labelledby="wizard_advanced-h-1"
81
                           class="body step-1 {{ (currentStep == 1) ? 'current' : '' }}" data-step="1"  aria-hidden="true">
82
                    <!--<h2 class="heading_a">-->
83
                    <!--Enter Information-->
84
                    <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
85
                    <!--</h2>-->
86
                    <!--<hr class="md-hr">-->
87

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

  
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>
94
                  <!-- third section -->
95
                  <h3 id="wizard_advanced-h-2" tabindex="-1" class="title {{ (currentStep == 2) ? 'current' : '' }}">Add Interfaces</h3>
96
                  <section id="wizard_advanced-p-2" role="tabpanel" aria-labelledby="wizard_advanced-h-2"
97
                           class="body step-2 {{ (currentStep == 2) ? 'current' : '' }}" data-step="2" aria-hidden="true">
98
                    <!--<h2 class="heading_a">-->
99
                    <!--Add Interfaces-->
100
                    <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
101
                    <!--</h2>-->
102
                    <!--<hr class="md-hr">-->
103

  
104
                    <div *ngIf="(currentStep === 2) && repo && !loadingMessage" class="uk-grid uk-grid-match">
105

  
106
                      <div *ngFor="let inter of dataForInterfaceComp" class="uk-width-medium-1-2 uk-margin-bottom">
107
                        <div>
108
                          <div class="md-card" style="height: 100%">
109
                            <app-repository-interface-form #interfacesArray
110
                                                           [data]="inter"
111
                                                           (emitDeleteInterface)="removeInterfaceFromList($event)">
112
                            </app-repository-interface-form>
113
                          </div>
114
                        </div>
81 115
                      </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>
116

  
117
                      <div class="uk-width-medium-1-2 uk-margin-bottom">
118
                        <div>
119
                          <div class="md-card" style="height: 100%">
120
                            <div class="md-card-toolbar">
121
                            </div>
122
                            <div class="md-card-content">
123
                              <div class="interface-box new" style="text-align: center">
124
                                <a class="add-new-element add-new-group" (click)="addInterfaceToList()">
125
                                  <i class="far fa-plus-square" aria-hidden="true"></i>
126
                                  <span class="info">Add New Interface</span>
127
                                </a>
128
                              </div>
129
                            </div>
130
                          </div>
88 131
                        </div>
132

  
89 133
                      </div>
134

  
135

  
136
                      <!--<div *ngFor="let inter of dataForInterfaceComp"-->
137
                      <!--class="interfacesForm el-item uk-width-1-2 md-card md-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">-->
138
                      <!--<app-repository-interface-form #interfacesArray-->
139
                      <!--[data]="inter"-->
140
                      <!--(emitDeleteInterface)="removeInterfaceFromList($event)">-->
141
                      <!--</app-repository-interface-form>-->
142
                      <!--</div>-->
143
                      <!--<div class="el-item uk-width-1-2 md-card md-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">-->
144
                      <!--<div class="interface-box new" style="text-align: center">-->
145
                      <!--<a class="add-new-element add-new-group" (click)="addInterfaceToList()">-->
146
                      <!--<i class="far fa-plus-square" aria-hidden="true"></i>-->
147
                      <!--<span class="info">Add New Interface</span>-->
148
                      <!--</a>-->
149
                      <!--</div>-->
150
                      <!--</div>-->
151

  
90 152
                    </div>
153
                  </section>
154

  
155
                  <!-- fourth section -->
156
                  <h3 id="wizard_advanced-h-3" tabindex="-1" class="title {{ (currentStep == 3) ? 'current' : '' }}">Finish</h3>
157
                  <section id="wizard_advanced-p-3" role="tabpanel" aria-labelledby="wizard_advanced-h-3"
158
                           class="body step-3 {{ (currentStep == 3) ? 'current' : '' }}" data-step="2"  aria-hidden="true">
159
                    <!--<h2 class="heading_a">-->
160
                    <!--Finish-->
161
                    <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
162
                    <!--</h2>-->
163
                    <!--<hr class="md-hr">-->
164

  
91 165
                    <div *ngIf="(currentStep === 3) && !loadingMessage" class="row openAIRECompliantLogoDownload">
92 166
                      <div class="col-lg-12">
93 167
                        <div class="col-md-12">
......
103 177
                            </div>
104 178
                          </div>
105 179
                          <!--<a (click)="downloadLogo()">-->
106
                            <!--Download-->
107
                            <!--<i class="fa fa-download" style=""></i>-->
180
                          <!--Download-->
181
                          <!--<i class="fa fa-download" style=""></i>-->
108 182
                          <!--</a>-->
109 183
                        </div>
110 184
                      </div>
111 185
                    </div>
112
                  </div>
186

  
187
                  </section>
188

  
113 189
                </div>
190
                <div *ngIf="currentStep != 3" class="actions clearfix">
191
                  <ul role="menu" aria-label="Pagination">
192
                    <li class="button_previous {{ (currentStep < 1) ? 'disabled' : '' }}" aria-disabled="true">
193
                      <a (click)="moveBackAStep()" role="menuitem"><i class="material-icons"></i> Previous</a>
194
                    </li>
195
                    <li *ngIf="currentStep < 2" class="button_next" aria-hidden="false" aria-disabled="false">
196
                      <a (click)="moveAStep()" role="menuitem">Next<i class="material-icons"></i></a>
197
                    </li>
198
                    <li *ngIf="currentStep == 2" class="button_finish" aria-hidden="true">
199
                      <a (click)="moveAStep()" role="menuitem">Finish</a>
200
                    </li>
201
                  </ul>
202
                </div>
114 203
              </div>
115
            </div>
116
            <div class="wizardActions">
117
              <button *ngIf="((currentStep === 1) || (currentStep === 2)) && !loadingMessage"
118
                      class="uk-button uk-button-grey-light uk-margin-small-right"
119
                      type="button" (click)="moveBackAStep()">
120
                <i class="fa fa-angle-double-left"></i>
121
                Back
122
              </button>
123
              <button *ngIf="(currentStep < 3) && !loadingMessage"
124
                      class="uk-button uk-button-grey-light uk-margin-small-left"
125
                      type="button" (click)="moveAStep()">
126
                Next
127
                <i class="fa fa-angle-double-right"></i>
128
              </button>
129
            </div>
204
            </form>
130 205
          </div>
131

  
132 206
        </div>
207
      </div>
133 208

  
134
        <!-- RIGHT HELP CONTENT -->
135
        <aside-help-content #rightHelperContent [position]="'right'"
136
                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
137
        </aside-help-content>
209
      <!-- RIGHT HELP CONTENT -->
210
      <aside-help-content #rightHelperContent [position]="'right'"
211
                          [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
212
      </aside-help-content>
138 213

  
139
      </div>
140 214
    </div>
141 215

  
142

  
143 216
    <!-- BOTTOM HELP CONTENT -->
144 217
    <help-content #bottomHelperContent [position]="'bottom'"
145 218
                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
146 219
    </help-content>
147 220

  
221
  </div>
222
<!--</div>-->
148 223

  
149
  </div>
150
</div>
224

  
225
<!--<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">-->
226
  <!--<div class="uk-width-1-1@m uk-first-column">-->
227

  
228
    <!--<h1 class="uk-h2">Register your datasource</h1>-->
229

  
230
    <!--&lt;!&ndash; TOP HELP CONTENT &ndash;&gt;-->
231
    <!--<help-content #topHelperContent [position]="'top'"-->
232
                  <!--[ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">-->
233
    <!--</help-content>-->
234

  
235
    <!--<div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">-->
236
      <!--<div class="uk-grid">-->
237

  
238
        <!--&lt;!&ndash; LEFT HELP CONTENT &ndash;&gt;-->
239
        <!--<aside-help-content #leftHelperContent [position]="'left'"-->
240
                            <!--[ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">-->
241
        <!--</aside-help-content>-->
242

  
243
        <!--&lt;!&ndash; MIDDLE &ndash;&gt;-->
244
        <!--<div class=" uk-width-expand@m">-->
245

  
246
          <!--<div class="wizard">-->
247
            <!--<div class="wizardBreadcrumbs">-->
248
              <!--<div class="steps clearfix">-->
249
                <!--<div class="step active">-->
250
                  <!--<div>-->
251
                    <!--Select repository-->
252
                    <!--<span></span>-->
253
                  <!--</div>-->
254
                <!--</div>-->
255
                <!--<div class="step {{ (currentStep > 0) ? 'active' : '' }}">-->
256
                  <!--<div>-->
257
                    <!--Enter Information-->
258
                    <!--<span></span>-->
259
                  <!--</div>-->
260
                <!--</div>-->
261
                <!--<div class="step {{ (currentStep > 1) ? 'active' : '' }}">-->
262
                  <!--<div>-->
263
                    <!--Add Interfaces-->
264
                    <!--<span></span>-->
265
                  <!--</div>-->
266
                <!--</div>-->
267
                <!--<div class="step {{ (currentStep > 2) ? 'active' : '' }}">-->
268
                  <!--<div>-->
269
                    <!--Finish-->
270
                    <!--<span></span>-->
271
                  <!--</div>-->
272
                <!--</div>-->
273
              <!--</div>-->
274
            <!--</div>-->
275
            <!--<div class="content">-->
276
              <!--<div>-->
277
                <!--<div class="animated fadeInRight stepContent">-->
278
                  <!--<div *ngIf="loadingMessage" class="loading-big">-->
279
                    <!--<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">-->
280
                      <!--{{ loadingMessage }}-->
281
                    <!--</div>-->
282
                    <!--<div class="whiteFilm"></div>-->
283
                  <!--</div>-->
284
                  <!--<div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>-->
285

  
286
                  <!--<div>-->
287
                    <!--<app-select-existing-datasource *ngIf="(currentStep === 0) && (currentMode !== null) && !loadingMessage"-->
288
                                                    <!--#datasourcesByCountry-->
289
                                                    <!--[mode]="currentMode"-->
290
                                                    <!--(emitRepoId)="getRepoId($event)"-->
291
                                                    <!--(promptNext)="goToStep2($event)"></app-select-existing-datasource>-->
292

  
293
                    <!--<datasource-update-form *ngIf="(currentStep === 1) && (repo !== null) && !loadingMessage"-->
294
                                            <!--#registerDatasource-->
295
                                            <!--[selectedRepo]="repo"-->
296
                                            <!--(emittedInfo)="getUpdatedRepo($event)"></datasource-update-form>-->
297

  
298
                    <!--<div *ngIf="(currentStep === 2) && repo && !loadingMessage" class="uk-grid uk-child-width-1-2">-->
299
                      <!--<div *ngFor="let inter of dataForInterfaceComp"-->
300
                           <!--class="interfacesForm el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">-->
301
                        <!--<app-repository-interface-form #interfacesArray-->
302
                                                       <!--[data]="inter"-->
303
                                                       <!--(emitDeleteInterface)="removeInterfaceFromList($event)">-->
304
                        <!--</app-repository-interface-form>-->
305
                      <!--</div>-->
306
                      <!--<div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">-->
307
                        <!--<div class="interface-box new" style="text-align: center">-->
308
                          <!--<a class="add-new-element add-new-group" (click)="addInterfaceToList()">-->
309
                            <!--<i class="far fa-plus-square" aria-hidden="true"></i>-->
310
                            <!--<span class="info">Add New Interface</span>-->
311
                          <!--</a>-->
312
                        <!--</div>-->
313
                      <!--</div>-->
314
                    <!--</div>-->
315
                    <!--<div *ngIf="(currentStep === 3) && !loadingMessage" class="row openAIRECompliantLogoDownload">-->
316
                      <!--<div class="col-lg-12">-->
317
                        <!--<div class="col-md-12">-->
318
                          <!--<div>-->
319
                            <!--<div class="openAIRECompliantLogo">-->
320
                              <!--<h2 class="openAIRECompliantLogoMessage">-->
321
                                <!--We successfully received the request to register your repository to the OpenAIRE compliant list of content providers.-->
322
                                <!--A validation process against the OpenAIRE guidelines compatibility has been started.-->
323
                                <!--You will be informed via email once the process is finished.-->
324
                                <!--&lt;!&ndash;Congratulations! Your repository was successfully registered in OpenAIRE. You can download this logo to use in your site.&ndash;&gt;-->
325
                              <!--</h2>-->
326
                              <!--&lt;!&ndash;<img src="../../../../assets/imgs/3_0ValidatedLogo.png" alt="OpenAireCompliant">&ndash;&gt;-->
327
                            <!--</div>-->
328
                          <!--</div>-->
329
                          <!--&lt;!&ndash;<a (click)="downloadLogo()">&ndash;&gt;-->
330
                            <!--&lt;!&ndash;Download&ndash;&gt;-->
331
                            <!--&lt;!&ndash;<i class="fa fa-download" style=""></i>&ndash;&gt;-->
332
                          <!--&lt;!&ndash;</a>&ndash;&gt;-->
333
                        <!--</div>-->
334
                      <!--</div>-->
335
                    <!--</div>-->
336
                  <!--</div>-->
337
                <!--</div>-->
338
              <!--</div>-->
339
            <!--</div>-->
340
            <!--<div class="wizardActions">-->
341
              <!--<button *ngIf="((currentStep === 1) || (currentStep === 2)) && !loadingMessage"-->
342
                      <!--class="uk-button uk-button-grey-light uk-margin-small-right"-->
343
                      <!--type="button" (click)="moveBackAStep()">-->
344
                <!--<i class="fa fa-angle-double-left"></i>-->
345
                <!--Back-->
346
              <!--</button>-->
347
              <!--<button *ngIf="(currentStep < 3) && !loadingMessage"-->
348
                      <!--class="uk-button uk-button-grey-light uk-margin-small-left"-->
349
                      <!--type="button" (click)="moveAStep()">-->
350
                <!--Next-->
351
                <!--<i class="fa fa-angle-double-right"></i>-->
352
              <!--</button>-->
353
            <!--</div>-->
354
          <!--</div>-->
355

  
356
        <!--</div>-->
357

  
358
        <!--&lt;!&ndash; RIGHT HELP CONTENT &ndash;&gt;-->
359
        <!--<aside-help-content #rightHelperContent [position]="'right'"-->
360
                            <!--[ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">-->
361
        <!--</aside-help-content>-->
362

  
363
      <!--</div>-->
364
    <!--</div>-->
365

  
366

  
367
    <!--&lt;!&ndash; BOTTOM HELP CONTENT &ndash;&gt;-->
368
    <!--<help-content #bottomHelperContent [position]="'bottom'"-->
369
                  <!--[ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">-->
370
    <!--</help-content>-->
371

  
372

  
373
  <!--</div>-->
374
<!--</div>-->

Also available in: Unified diff