Revision 57105
Added by Stefania Martziou over 4 years ago
compatibility-validate-type.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">Run compatibility test</h2> |
|
3 | 4 |
|
4 |
<h1 class="uk-h2">Run compatibility test</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 | 21 |
|
22 |
<div class="wizard"> |
|
23 |
<div class="wizardBreadcrumbs"> |
|
24 |
<div class="steps clearfix"> |
|
25 |
<div class="step active"> |
|
26 |
<div> |
|
27 |
Select datasource |
|
28 |
<span></span> |
|
29 |
</div> |
|
22 |
<form class="uk-form-stacked" id="wizard_advanced_form" novalidate=""> |
|
23 |
|
|
24 |
<div id="wizard_advanced" role="application" class="wizard clearfix"> |
|
25 |
<div class="steps clearfix"> |
|
26 |
<ul role="tablist"> |
|
27 |
<li role="tab" class="first {{ (currentStep == 0) ? 'current' : '' }}" aria-disabled="false" aria-selected="true"> |
|
28 |
<a id="wizard_advanced-t-0" href="#wizard_advanced-h-0" aria-controls="wizard_advanced-p-0"> |
|
29 |
<!--<span class="current-info audible">current step: </span>--> |
|
30 |
<span class="number">1</span> |
|
31 |
<span class="title">Select datasource</span> |
|
32 |
</a> |
|
33 |
</li> |
|
34 |
<li role="tab" class="{{ (currentStep < 1) ? 'disabled' : '' }} {{ (currentStep == 1) ? 'current' : '' }}" aria-disabled="true"> |
|
35 |
<a id="wizard_advanced-t-1" href="#wizard_advanced-h-1" aria-controls="wizard_advanced-p-1"> |
|
36 |
<span class="number">2</span> |
|
37 |
<span class="title">Select guidelines</span> |
|
38 |
</a> |
|
39 |
</li> |
|
40 |
<li role="tab" class=" {{ (currentStep < 2) ? 'disabled' : '' }} {{ (currentStep == 2) ? 'current' : '' }}" aria-disabled="true"> |
|
41 |
<a id="wizard_advanced-t-2" href="#wizard_advanced-h-2" aria-controls="wizard_advanced-p-2"> |
|
42 |
<span class="number">3</span> |
|
43 |
<span class="title">Select parameters</span> |
|
44 |
</a> |
|
45 |
</li> |
|
46 |
<li role="tab" class="last {{ (currentStep < 3) ? 'disabled' : '' }} {{ (currentStep == 3) ? 'current' : '' }}" aria-disabled="true"> |
|
47 |
<a id="wizard_advanced-t-3" href="#wizard_advanced-h-3" aria-controls="wizard_advanced-p-3"> |
|
48 |
<span class="number">4</span> |
|
49 |
<span class="title">Finish</span> |
|
50 |
</a> |
|
51 |
</li> |
|
52 |
</ul> |
|
30 | 53 |
</div> |
31 |
<div class="step {{ (currentStep > 0) ? 'active' : '' }}"> |
|
32 |
<div> |
|
33 |
Select guidelines |
|
34 |
<span></span> |
|
35 |
</div> |
|
36 |
</div> |
|
37 |
<div class="step {{ (currentStep > 1) ? 'active' : '' }}"> |
|
38 |
<div> |
|
39 |
Select parameters |
|
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="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div> |
|
54 |
<div class="content clearfix" style="height: 660px"> |
|
55 |
|
|
55 | 56 |
<div *ngIf="loadingMessage" class="loading-big"> |
56 | 57 |
<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;"> |
57 | 58 |
{{ loadingMessage }} |
58 | 59 |
</div> |
59 | 60 |
<div class="whiteFilm"></div> |
60 | 61 |
</div> |
61 |
<div *ngIf="(currentStep === 0) && !loadingMessage"> |
|
62 |
<compatibility-validate-step1 #step1ChooseBaseUrl |
|
63 |
[baseUrlList]="baseUrlList" |
|
64 |
(emitObject)="getChosenUrl($event)"></compatibility-validate-step1> |
|
65 |
</div> |
|
66 |
<div *ngIf="(currentStep === 1) && !loadingMessage"> |
|
67 |
<compatibility-validate-step2 #step2ChooseGuidelines |
|
68 |
[ruleSets]="ruleSets" |
|
69 |
(emitObject)="getChosenRules($event)"> |
|
70 |
</compatibility-validate-step2> |
|
71 |
</div> |
|
72 |
<div *ngIf="(currentStep === 2) && (type !== 'cris') && !loadingMessage"> |
|
73 |
<compatibility-validate-step3 #step3ChooseParameters |
|
74 |
[valSets]="valSets" |
|
75 |
(emitObject)="getChosenParameters($event)"> |
|
76 |
</compatibility-validate-step3> |
|
77 |
</div> |
|
78 |
<div *ngIf="(currentStep === 2) && (type === 'cris') && !loadingMessage"> |
|
79 |
<compatibility-validate-step3-cris #step3ChooseCrisEntities |
|
80 |
(emitObject)="getChosenCrisEntities($event)"> |
|
81 |
</compatibility-validate-step3-cris> |
|
82 |
</div> |
|
83 |
<div *ngIf="(currentStep === 3) && !loadingMessage"> |
|
84 |
<div> |
|
85 |
<div class="success"> |
|
86 |
<i class="fa fa-check-circle" style=""></i> |
|
87 |
<h3>Validation has begun</h3> |
|
62 |
<div *ngIf="errorMessage" class="uk-alert uk-alert-danger uk-margin-top">{{ errorMessage }}</div> |
|
63 |
|
|
64 |
<!-- first section --> |
|
65 |
<h3 id="wizard_advanced-h-0" tabindex="-1" class="title {{ (currentStep == 0) ? 'current' : '' }}">Select Repository</h3> |
|
66 |
<section id="wizard_advanced-p-0" role="tabpanel" aria-labelledby="wizard_advanced-h-0" |
|
67 |
class="body step-0 {{ (currentStep == 0) ? 'current' : '' }}" data-step="0" aria-hidden="false"> |
|
68 |
|
|
69 |
<div *ngIf="(currentStep === 0) && !loadingMessage"> |
|
70 |
<compatibility-validate-step1 #step1ChooseBaseUrl |
|
71 |
[baseUrlList]="baseUrlList" |
|
72 |
(emitObject)="getChosenUrl($event)"></compatibility-validate-step1> |
|
73 |
</div> |
|
74 |
</section> |
|
75 |
|
|
76 |
<!-- second section --> |
|
77 |
<h3 id="wizard_advanced-h-1" tabindex="-1" class="title {{ (currentStep == 1) ? 'current' : '' }}">Enter Information</h3> |
|
78 |
<section id="wizard_advanced-p-1" role="tabpanel" aria-labelledby="wizard_advanced-h-1" |
|
79 |
class="body step-1 {{ (currentStep == 1) ? 'current' : '' }}" data-step="1" aria-hidden="true"> |
|
80 |
|
|
81 |
<div *ngIf="(currentStep === 1) && !loadingMessage"> |
|
82 |
<compatibility-validate-step2 #step2ChooseGuidelines |
|
83 |
[ruleSets]="ruleSets" |
|
84 |
(emitObject)="getChosenRules($event)"> |
|
85 |
</compatibility-validate-step2> |
|
86 |
</div> |
|
87 |
</section> |
|
88 |
|
|
89 |
<!-- third section --> |
|
90 |
<h3 id="wizard_advanced-h-2" tabindex="-1" class="title {{ (currentStep == 2) ? 'current' : '' }}">Add Interfaces</h3> |
|
91 |
<section id="wizard_advanced-p-2" role="tabpanel" aria-labelledby="wizard_advanced-h-2" |
|
92 |
class="body step-2 {{ (currentStep == 2) ? 'current' : '' }}" data-step="2" aria-hidden="true"> |
|
93 |
|
|
94 |
<div *ngIf="(currentStep === 2) && (type !== 'cris') && !loadingMessage"> |
|
95 |
<compatibility-validate-step3 #step3ChooseParameters |
|
96 |
[valSets]="valSets" |
|
97 |
(emitObject)="getChosenParameters($event)"> |
|
98 |
</compatibility-validate-step3> |
|
99 |
</div> |
|
100 |
<div *ngIf="(currentStep === 2) && (type === 'cris') && !loadingMessage"> |
|
101 |
<compatibility-validate-step3-cris #step3ChooseCrisEntities |
|
102 |
(emitObject)="getChosenCrisEntities($event)"> |
|
103 |
</compatibility-validate-step3-cris> |
|
104 |
</div> |
|
105 |
</section> |
|
106 |
|
|
107 |
<!-- fourth section --> |
|
108 |
<h3 id="wizard_advanced-h-3" tabindex="-1" class="title {{ (currentStep == 3) ? 'current' : '' }}">Finish</h3> |
|
109 |
<section id="wizard_advanced-p-3" role="tabpanel" aria-labelledby="wizard_advanced-h-3" |
|
110 |
class="body step-3 {{ (currentStep == 3) ? 'current' : '' }}" data-step="2" aria-hidden="true"> |
|
111 |
|
|
112 |
<div *ngIf="(currentStep === 3) && !loadingMessage"> |
|
113 |
<div style="text-align: center"> |
|
114 |
<div class="success"> |
|
115 |
<i class="fa fa-check-circle fa-3x" style="color: green"></i> |
|
116 |
<h3>Validation has begun</h3> |
|
117 |
</div> |
|
118 |
<div class="uk-margin-top"> |
|
119 |
You will be notified by email with the results of the compatibility test. |
|
120 |
</div> |
|
88 | 121 |
</div> |
89 |
<div class="uk-alert uk-alert-primary marginTop20 textAlignCenter"> |
|
90 |
You will be notified by email with the results of the compatibility test. |
|
91 |
</div> |
|
92 | 122 |
</div> |
93 |
</div> |
|
123 |
|
|
124 |
</section> |
|
125 |
|
|
94 | 126 |
</div> |
127 |
<div *ngIf="currentStep != 3" class="actions clearfix"> |
|
128 |
<ul role="menu" aria-label="Pagination"> |
|
129 |
<li class="button_previous {{ (currentStep < 1) ? 'disabled' : '' }}" aria-disabled="true"> |
|
130 |
<a (click)="moveBackAStep()" role="menuitem"><i class="material-icons"></i> Previous</a> |
|
131 |
</li> |
|
132 |
<li *ngIf="currentStep < 2" class="button_next" aria-hidden="false" aria-disabled="false"> |
|
133 |
<a (click)="moveAStep()" role="menuitem">Next<i class="material-icons"></i></a> |
|
134 |
</li> |
|
135 |
<li *ngIf="currentStep == 2" class="button_finish" aria-hidden="true"> |
|
136 |
<a (click)="moveAStep()" role="menuitem">Finish</a> |
|
137 |
</li> |
|
138 |
</ul> |
|
139 |
</div> |
|
95 | 140 |
</div> |
96 |
</div> |
|
97 |
<div *ngIf="!loadingMessage" class="wizardActions"> |
|
98 |
<button *ngIf="((currentStep === 1) || (currentStep === 2)) && !loadingMessage" |
|
99 |
class="uk-button uk-button-grey-light uk-margin-small-right" type="button" |
|
100 |
(click)="moveBackAStep()"> |
|
101 |
<i class="fa fa-angle-double-left"></i> |
|
102 |
Back |
|
103 |
</button> |
|
104 |
<button *ngIf="(currentStep < 3) && !loadingMessage" |
|
105 |
class="uk-button uk-button-grey-light uk-margin-small-left" type="button" |
|
106 |
(click)="moveAStep()"> |
|
107 | 141 |
|
108 |
<span class="{{(currentStep === 2) ? 'uk-link' : ''}}"> |
|
109 |
{{ (currentStep < 2) ? 'Next' : 'Finish' }} |
|
110 |
</span> |
|
111 |
<i class="fa fa-angle-double-right"></i> |
|
142 |
</form> |
|
112 | 143 |
|
113 |
</button> |
|
114 |
</div> |
|
115 | 144 |
</div> |
116 |
|
|
117 | 145 |
</div> |
146 |
</div> |
|
118 | 147 |
|
119 |
<!-- RIGHT HELP CONTENT -->
|
|
120 |
<aside-help-content #rightHelperContent [position]="'right'"
|
|
121 |
[ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
|
|
122 |
</aside-help-content>
|
|
148 |
<!-- RIGHT HELP CONTENT --> |
|
149 |
<aside-help-content #rightHelperContent [position]="'right'" |
|
150 |
[ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'"> |
|
151 |
</aside-help-content> |
|
123 | 152 |
|
124 |
</div> |
|
125 | 153 |
</div> |
126 | 154 |
|
127 |
|
|
128 | 155 |
<!-- BOTTOM HELP CONTENT --> |
129 | 156 |
<help-content #bottomHelperContent [position]="'bottom'" |
130 | 157 |
[ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'"> |
131 | 158 |
</help-content> |
132 | 159 |
|
133 |
|
|
134 | 160 |
</div> |
135 | 161 |
</div> |
162 |
|
|
163 |
|
|
164 |
|
|
165 |
|
|
166 |
|
|
167 |
|
|
168 |
|
|
169 |
<!--<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">--> |
|
170 |
<!--<div class="uk-width-1-1@m uk-first-column">--> |
|
171 |
|
|
172 |
<!--<h1 class="uk-h2">Run compatibility test</h1>--> |
|
173 |
|
|
174 |
<!--<!– TOP HELP CONTENT –>--> |
|
175 |
<!--<help-content #topHelperContent [position]="'top'"--> |
|
176 |
<!--[ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">--> |
|
177 |
<!--</help-content>--> |
|
178 |
|
|
179 |
<!--<div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">--> |
|
180 |
<!--<div class="uk-grid">--> |
|
181 |
|
|
182 |
<!--<!– LEFT HELP CONTENT –>--> |
|
183 |
<!--<aside-help-content #leftHelperContent [position]="'left'"--> |
|
184 |
<!--[ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">--> |
|
185 |
<!--</aside-help-content>--> |
|
186 |
|
|
187 |
<!--<!– MIDDLE –>--> |
|
188 |
<!--<div class=" uk-width-expand@m">--> |
|
189 |
|
|
190 |
<!--<div class="wizard">--> |
|
191 |
<!--<div class="wizardBreadcrumbs">--> |
|
192 |
<!--<div class="steps clearfix">--> |
|
193 |
<!--<div class="step active">--> |
|
194 |
<!--<div>--> |
|
195 |
<!--Select datasource--> |
|
196 |
<!--<span></span>--> |
|
197 |
<!--</div>--> |
|
198 |
<!--</div>--> |
|
199 |
<!--<div class="step {{ (currentStep > 0) ? 'active' : '' }}">--> |
|
200 |
<!--<div>--> |
|
201 |
<!--Select guidelines--> |
|
202 |
<!--<span></span>--> |
|
203 |
<!--</div>--> |
|
204 |
<!--</div>--> |
|
205 |
<!--<div class="step {{ (currentStep > 1) ? 'active' : '' }}">--> |
|
206 |
<!--<div>--> |
|
207 |
<!--Select parameters--> |
|
208 |
<!--<span></span>--> |
|
209 |
<!--</div>--> |
|
210 |
<!--</div>--> |
|
211 |
<!--<div class="step {{ (currentStep > 2) ? 'active' : '' }}">--> |
|
212 |
<!--<div>--> |
|
213 |
<!--Finish--> |
|
214 |
<!--<span></span>--> |
|
215 |
<!--</div>--> |
|
216 |
<!--</div>--> |
|
217 |
<!--</div>--> |
|
218 |
<!--</div>--> |
|
219 |
<!--<div class="content">--> |
|
220 |
<!--<div>--> |
|
221 |
<!--<div class="animated fadeInRight stepContent">--> |
|
222 |
<!--<div *ngIf="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>--> |
|
223 |
<!--<div *ngIf="loadingMessage" class="loading-big">--> |
|
224 |
<!--<div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">--> |
|
225 |
<!--{{ loadingMessage }}--> |
|
226 |
<!--</div>--> |
|
227 |
<!--<div class="whiteFilm"></div>--> |
|
228 |
<!--</div>--> |
|
229 |
<!--<div *ngIf="(currentStep === 0) && !loadingMessage">--> |
|
230 |
<!--<compatibility-validate-step1 #step1ChooseBaseUrl--> |
|
231 |
<!--[baseUrlList]="baseUrlList"--> |
|
232 |
<!--(emitObject)="getChosenUrl($event)"></compatibility-validate-step1>--> |
|
233 |
<!--</div>--> |
|
234 |
<!--<div *ngIf="(currentStep === 1) && !loadingMessage">--> |
|
235 |
<!--<compatibility-validate-step2 #step2ChooseGuidelines--> |
|
236 |
<!--[ruleSets]="ruleSets"--> |
|
237 |
<!--(emitObject)="getChosenRules($event)">--> |
|
238 |
<!--</compatibility-validate-step2>--> |
|
239 |
<!--</div>--> |
|
240 |
<!--<div *ngIf="(currentStep === 2) && (type !== 'cris') && !loadingMessage">--> |
|
241 |
<!--<compatibility-validate-step3 #step3ChooseParameters--> |
|
242 |
<!--[valSets]="valSets"--> |
|
243 |
<!--(emitObject)="getChosenParameters($event)">--> |
|
244 |
<!--</compatibility-validate-step3>--> |
|
245 |
<!--</div>--> |
|
246 |
<!--<div *ngIf="(currentStep === 2) && (type === 'cris') && !loadingMessage">--> |
|
247 |
<!--<compatibility-validate-step3-cris #step3ChooseCrisEntities--> |
|
248 |
<!--(emitObject)="getChosenCrisEntities($event)">--> |
|
249 |
<!--</compatibility-validate-step3-cris>--> |
|
250 |
<!--</div>--> |
|
251 |
<!--<div *ngIf="(currentStep === 3) && !loadingMessage">--> |
|
252 |
<!--<div>--> |
|
253 |
<!--<div class="success">--> |
|
254 |
<!--<i class="fa fa-check-circle" style=""></i>--> |
|
255 |
<!--<h3>Validation has begun</h3>--> |
|
256 |
<!--</div>--> |
|
257 |
<!--<div class="uk-alert uk-alert-primary marginTop20 textAlignCenter">--> |
|
258 |
<!--You will be notified by email with the results of the compatibility test.--> |
|
259 |
<!--</div>--> |
|
260 |
<!--</div>--> |
|
261 |
<!--</div>--> |
|
262 |
<!--</div>--> |
|
263 |
<!--</div>--> |
|
264 |
<!--</div>--> |
|
265 |
<!--<div *ngIf="!loadingMessage" class="wizardActions">--> |
|
266 |
<!--<button *ngIf="((currentStep === 1) || (currentStep === 2)) && !loadingMessage"--> |
|
267 |
<!--class="uk-button uk-button-grey-light uk-margin-small-right" type="button"--> |
|
268 |
<!--(click)="moveBackAStep()">--> |
|
269 |
<!--<i class="fa fa-angle-double-left"></i>--> |
|
270 |
<!--Back--> |
|
271 |
<!--</button>--> |
|
272 |
<!--<button *ngIf="(currentStep < 3) && !loadingMessage"--> |
|
273 |
<!--class="uk-button uk-button-grey-light uk-margin-small-left" type="button"--> |
|
274 |
<!--(click)="moveAStep()">--> |
|
275 |
|
|
276 |
<!--<span class="{{(currentStep === 2) ? 'uk-link' : ''}}">--> |
|
277 |
<!--{{ (currentStep < 2) ? 'Next' : 'Finish' }}--> |
|
278 |
<!--</span>--> |
|
279 |
<!--<i class="fa fa-angle-double-right"></i>--> |
|
280 |
|
|
281 |
<!--</button>--> |
|
282 |
<!--</div>--> |
|
283 |
<!--</div>--> |
|
284 |
|
|
285 |
<!--</div>--> |
|
286 |
|
|
287 |
<!--<!– RIGHT HELP CONTENT –>--> |
|
288 |
<!--<aside-help-content #rightHelperContent [position]="'right'"--> |
|
289 |
<!--[ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">--> |
|
290 |
<!--</aside-help-content>--> |
|
291 |
|
|
292 |
<!--</div>--> |
|
293 |
<!--</div>--> |
|
294 |
|
|
295 |
|
|
296 |
<!--<!– BOTTOM HELP CONTENT –>--> |
|
297 |
<!--<help-content #bottomHelperContent [position]="'bottom'"--> |
|
298 |
<!--[ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">--> |
|
299 |
<!--</help-content>--> |
|
300 |
|
|
301 |
|
|
302 |
<!--</div>--> |
|
303 |
<!--</div>--> |
Also available in: Unified diff
Finished the first version of the validation test pages