Mercurial > repos > lain > ms_to_peakforest_it

comparison src/meta-compound-mix.html @ 1:7e3085fc60c1 draft default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
master branch Updating
author lain
date Wed, 30 Aug 2023 14:21:18 +0000
parents
children
comparison
equal deleted inserted replaced
0:b58b229c4cbf 1:7e3085fc60c1
1 <!doctype HTML>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta name="author" content="MetaboHUB">
7 <link rel="icon" type="image/ico" href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/ico/favicon.ico">
8 <title>PeakForest MetaboHub</title>
9 <meta name="keywords" content="spectral database, mass spectrometry, nmr, lc-ms, gc-ms, chemical, metabolomic, compound, library">
10 <meta name="description" content="PeakForest is a spectral data portal for Metabolomics community. It provides storage and annotation services for metabolic profils of biological matrix. It relies on the wide range of complementary methods using UPLC-(API)HRMS, GC-QToF, and NMR.">
11 <style>.file-input-wrapper { overflow: hidden; position: relative; cursor: pointer; z-index: 1; }.file-input-wrapper input[type=file], .file-input-wrapper input[type=file]:focus, .file-input-wrapper input[type=file]:hover { position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); z-index: 99; outline: 0; }.file-input-name { margin-left: 8px; }</style>
12 <link href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/css/bootstrap.min.css" rel="stylesheet">
13 <link href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/css/sb-admin.min.css" rel="stylesheet">
14 <link rel="stylesheet" href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/font-awesome/css/font-awesome.min.css">
15 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/jquery.min.js"></script>
16 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/bootstrap.min.js"></script>
17 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/bootstrap-typeahead.min.js"></script>
18 <link href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/css/bootstrap-select.min.css" media="screen" rel="stylesheet" type="text/css">
19 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/bootstrap-select.min.js" type="text/javascript"></script>
20 <link href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/css/bootstrap-datepicker.min.css" media="screen" rel="stylesheet" type="text/css">
21 <script type="text/javascript" src="/common.js"></script>
22 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/bootstrap-datepicker.min.js" type="text/javascript"></script>
23 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/jquery.tmpl.min.js" type="text/javascript"></script>
24 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/highcharts/js/highcharts.min.js"></script>
25 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/highcharts/js/modules/exporting.min.js"></script>
26 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/highcharts/js/themes/grid.min.js"></script>
27 <link href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/css/bootstrap.overwrite.min.css" rel="stylesheet" media="screen">
28 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/peakforest.min.js"></script>
29 <script type="text/javascript" src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/tablesorter/jquery.tablesorter.min.js"></script>
30 <script type="text/javascript" src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/tablesorter/tables.min.js"></script>
31 <link rel="stylesheet" href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/nmrpro/specdraw.min.css" type="text/css">
32 <meta name="viewport" content="width=device-width, initial-scale=1">
33 </head>
34 <body>
35 <div id="page-wrapper" class="peakforest-main-wrapper">
36 <div>
37 <button class="btn btn-validate" onclick="ctx().exit()">Close MS2PF</button>
38 </div>
39 <div class="row" style="margin-bottom: 50px;">
40 <div id="add-spectrum">
41 <div class="panel-group" id="accordion-{{ TAB_INDEX_PLACEHOLDER }}">
42 <div class="panel panel-default">
43 <div class="panel-heading panel-success">
44 <h4 class="panel-title">
45 <a
46 data-toggle="collapse"
47 data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}"
48 href="#step0-{{ TAB_INDEX_PLACEHOLDER }}"
49 >
50 Spectrum Type
51 <i
52 id="step0sign-{{ TAB_INDEX_PLACEHOLDER }}"
53 class="fa fa-question-circle"
54 ></i>
55 </a>
56 </h4>
57 </div>
58 <div
59 id="step0-{{ TAB_INDEX_PLACEHOLDER }}"
60 class="panel-collapse collapse in"
61 >
62 <div class="panel-bodỵ">
63 <button
64 class="btn btn-disabled"
65 disabled="disabled"><i
66 class="fa fa-plus-circle"
67 ></i> GC-MS spectrum</button>
68 <button
69 id="set_LC_MS_spectrum_button"
70 class="btn btn-primary"
71 onclick="ctx().addOneSpectrum(2);"><i
72 class="fa fa-plus-circle"
73 ></i> LC-MS spectrum</button>
74 <button
75 id="set_LC_MSMS_spectrum_button"
76 class="btn btn-primary"
77 onclick="ctx().addOneSpectrum(5);"><i
78 class="fa fa-plus-circle"
79 ></i> LC-MSMS spectrum</button>
80 </div>
81 </div>
82 </div>
83 <div
84 id="add1spectrum-sampleData-{{ TAB_INDEX_PLACEHOLDER }}"
85 class="panel panel-default"
86 style="display: none;">
87 <div
88 class="panel-heading panel-success">
89 <h4
90 class="panel-title">
91 <a
92 id="linkActivateStep1-{{ TAB_INDEX_PLACEHOLDER }}"
93 data-toggle="collapse"
94 data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}"
95 href="#step1-{{ TAB_INDEX_PLACEHOLDER }}"
96 >
97 Sample Type
98 <i
99 id="step1sign-{{ TAB_INDEX_PLACEHOLDER }}"
100 class="fa fa-question-circle"
101 ></i>
102 </a>
103 </h4>
104 </div>
105 <div
106 id="step1-{{ TAB_INDEX_PLACEHOLDER }}"
107 class="panel-collapse collapse"
108 >
109 <div class="panel-bodỵ">
110 <div class="col-lg-12">
111 <div class="col-lg-8">
112 <div class="panel panel-default">
113 <div class="panel-heading">
114 <div class="form-group input-group has-error">
115 <span class="input-group-addon">
116 Sample Type
117 </span>
118 <select
119 id="add1spectrum-sample-type-{{ TAB_INDEX_PLACEHOLDER }}"
120 class="form-control add1spectrum add1spectrum-sampleForm is-mandatory">
121 <option
122 value=""
123 selected="selected"
124 disabled="disabled">choose in list…</option>
125 <option value="compound-mix">
126 Mix of Ref. Chemical Compound
127 </option>
128 </select>
129 </div>
130 </div>
131 <div class="panel-bodỵ">
132 <div
133 id="add1spectrum-sample-type-compound-mix-{{ TAB_INDEX_PLACEHOLDER }}"
134 class="add1spectrum-sample-type-panel"
135 style="display:none;">
136 <div class="form-group input-group has-warning">
137 <span class="input-group-addon">solvent</span>
138 <select
139 id="add1spectrum-sample-mixSolvent-{{ TAB_INDEX_PLACEHOLDER }}"
140 class="form-control add1spectrum add1spectrum-sampleForm is-optional"
141 >
142 <option value="" selected="selected" disabled="disabled">choose in list…</option>
143 <option value="H2O/ethanol (75/25)">H2O/ethanol (75/25)</option>
144 </select>
145 </div>
146 </div>
147 <div
148 id="add1spectrum-sample-type-rcc-added-{{ TAB_INDEX_PLACEHOLDER }}"
149 class="panel panel-default add1spectrum-sample-type-panel"
150 style="display:none"
151 >
152 <div class="panel-heading">
153 <h3 class="panel-title">Reference compound added</h3>
154 </div>
155 <div class="panel-bodỵ" style="padding: 0px;">
156 <div
157 id="container_RCC_ADDED-{{ TAB_INDEX_PLACEHOLDER }}"
158 class="handsontable"
159 ></div>
160 </div>
161 </div>
162 </div>
163 </div>
164 </div>
165 <div class="col-lg-4">
166 <div id="sample-bonus-display-{{ TAB_INDEX_PLACEHOLDER }}"></div>
167 &nbsp;
168 </div>
169 </div>
170 <div class="col-lg-12">
171 <div class="col-lg-8">
172 <br>
173 <button
174 id="btnSwitch-gotoStep2-{{ TAB_INDEX_PLACEHOLDER }}"
175 onclick="ctx().switchToStep(2)"
176 class="btn btn-disabled switchStep"
177 disabled=""
178 >
179 <i class="fa fa-arrow-circle-down"></i> Next!
180 </button>
181 </div>
182 <div class="col-lg-4">&nbsp;</div>
183 </div>
184 </div>
185 </div>
186 </div>
187 <div
188 id="add1spectrum-chromatographyData-LC-{{ TAB_INDEX_PLACEHOLDER }}"
189 class="panel panel-default"
190 style="display: none;"
191 >
192 <div class="panel-heading panel-success">
193 <h4 class="panel-title">
194 <a
195 id="linkActivateStep2-lc-{{ TAB_INDEX_PLACEHOLDER }}"
196 data-toggle="collapse"
197 data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}"
198 href="#step2-lc-{{ TAB_INDEX_PLACEHOLDER }}"
199 >
200 Liquid Chromatography
201 <i
202 id="step2-lc-sign-{{ TAB_INDEX_PLACEHOLDER }}"
203 class="fa fa-question-circle"
204 ></i>
205 </a>
206 </h4>
207 </div>
208 <div
209 id="step2-lc-{{ TAB_INDEX_PLACEHOLDER }}"
210 class="panel-collapse collapse"
211 >
212 <div class="panel-bodỵ">
213 <div class="col-lg-12">
214 <div class="col-lg-6">
215 <div class="panel panel-default">
216 <div class="panel-heading">
217 <h3 class="panel-title">Chromatography Param.</h3>
218 </div>
219 <div class="panel-bodỵ">
220 <div class="form-group input-group has-error">
221 <span class="input-group-addon">Method</span>
222 <select
223 id="add1spectrum-chromatoLC-method-{{ TAB_INDEX_PLACEHOLDER }}"
224 class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"
225 ></select>
226 </div>
227 <div id="alertBoxSelectTemplate-{{ TAB_INDEX_PLACEHOLDER }}"></div>
228 <div class="form-group input-group has-error">
229 <span class="input-group-addon">Column constructor</span>
230 <select
231 id="add1spectrum-chromatoLC-colConstructor-{{ TAB_INDEX_PLACEHOLDER }}"
232 class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"
233 >
234 <option value="" selected="selected" disabled="disabled">choose in list…</option>
235 </select>
236 </div>
237 <div class="form-group input-group ">
238 <span class="input-group-addon">Column constructor (other)</span>
239 <input id="add1spectrum-chromatoLC-colConstructorOther-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm" disabled="disabled" placeholder="e.g. HAL 9000">
240 </div>
241 <div class="form-group input-group has-warning">
242 <span class="input-group-addon">Column name</span>
243 <input id="add1spectrum-chromatoLC-colName-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. UPLC HSS T3">
244 </div>
245 <div class="form-group input-group has-error">
246 <span class="input-group-addon">Column length (mm)</span>
247 <input id="add1spectrum-chromatoLC-colLength-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 150">
248 </div>
249 <div class="form-group input-group has-error">
250 <span class="input-group-addon">Column diameter (mm)</span>
251 <input id="add1spectrum-chromatoLC-colDiameter-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 2.1">
252 </div>
253 <div class="form-group input-group has-error">
254 <span class="input-group-addon">Particule size (µm)</span>
255 <input id="add1spectrum-chromatoLC-colParticuleSize-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 1.8">
256 </div>
257 <div class="form-group input-group has-warning">
258 <span class="input-group-addon">Column temperature (°C)</span>
259 <input id="add1spectrum-chromatoLC-colTemperature-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 30">
260 </div>
261 <div class="form-group input-group has-error">
262 <span class="input-group-addon">LC mode</span>
263 <select id="add1spectrum-chromatoLC-LCMode-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory">
264 <option value="" selected="selected" disabled="disabled">choose in list…</option>
265 <option value="Gradient">Gradient</option>
266 <option value="Isocratic">Isocratic</option>
267 </select>
268 </div>
269 <div class="form-group input-group has-warning">
270 <span class="input-group-addon">Separation flow rate (µL/min)</span>
271 <input id="add1spectrum-chromatoLC-separationFlowRate-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 400">
272 </div>
273 <div class="form-group input-group has-error">
274 <span class="input-group-addon">Separation solvent A</span>
275 <select
276 id="add1spectrum-chromatoLC-separationSolvA-{{ TAB_INDEX_PLACEHOLDER }}"
277 class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"
278 >
279 <option value="" selected="selected" disabled="disabled">choose in list…</option>
280 </select>
281 </div>
282 <div class="form-group input-group has-warning">
283 <span class="input-group-addon">pH solvent A (if acqueous solvant)</span>
284 <input id="add1spectrum-chromatoLC-separationSolvApH-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 7.0">
285 </div>
286 <div class="form-group input-group has-error">
287 <span class="input-group-addon">Separation solvent B</span>
288 <select
289 id="add1spectrum-chromatoLC-separationSolvB-{{ TAB_INDEX_PLACEHOLDER }}"
290 class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"
291 >
292 </select>
293 </div>
294 <div class="form-group input-group has-warning">
295 <span class="input-group-addon">pH solvent B (if acqueous solvant)</span>
296 <input id="add1spectrum-chromatoLC-separationSolvBApH-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 7.0">
297 </div>
298 </div>
299 </div>
300 </div>
301 <div class="col-lg-6">
302 <div class="panel panel-default">
303 <div class="panel-heading">
304 <h3 class="panel-title">Separation flow gradient</h3>
305 </div>
306 <div class="panel-bodỵ" style="padding: 0px;">
307 <div id="container_LC_SFG-{{ TAB_INDEX_PLACEHOLDER }}" class="handsontable"></div>
308 </div>
309 </div>
310 </div>
311 </div>
312 <div class="col-lg-12">
313 <div class="col-lg-8">
314 <br>
315 <button id="btnSwitch-gotoStep3-lc-{{ TAB_INDEX_PLACEHOLDER }}" onclick="ctx().switchToStep(3);" class="btn btn-disabled switchStep" disabled=""><i class="fa fa-arrow-circle-down"></i> Next!</button>
316 </div>
317 <div class="col-lg-4">&nbsp;</div>
318 </div>
319 </div>
320 </div>
321 </div>
322 <div id="add1spectrum-chromatographyData-GC-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;">
323 <div class="panel-heading panel-success">
324 <h4 class="panel-title">
325 <a id="linkActivateStep2-gc-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step2-gc-{{ TAB_INDEX_PLACEHOLDER }}">
326 Gaz Chromatography <i id="step2-gc-sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i>
327 </a>
328 </h4>
329 </div>
330 <div id="step2-gc-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
331 <div class="panel-bodỵ">
332 <div class="col-lg-12">
333 <div class="col-lg-6">
334 i &lt;3 GC
335 </div>
336 <div class="col-lg-6">&nbsp;</div>
337 </div>
338 <div class="col-lg-12">
339 <div class="col-lg-8">
340 <br>
341 <button id="btnSwitch-gotoStep3-gc-{{ TAB_INDEX_PLACEHOLDER }}" onclick="ctx().switchToStep(3);" class="btn btn-disabled switchStep" disabled=""><i class="fa fa-arrow-circle-down"></i> Next!</button>
342 </div>
343 <div class="col-lg-4">&nbsp;</div>
344 </div>
345 </div>
346 </div>
347 </div>
348 <div id="add1spectrum-analyserData-MS-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;">
349 <div class="panel-heading panel-success">
350 <h4 class="panel-title">
351 <a id="linkActivateStep3-ms-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step3-ms-{{ TAB_INDEX_PLACEHOLDER }}">
352 MS Analyzer <i id="step3-ms-sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i>
353 </a>
354 </h4>
355 </div>
356 <div id="step3-ms-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
357 <div class="panel-bodỵ">
358 <div class="col-lg-12">
359 <div class="col-lg-6">
360 <br>
361 <div class="panel panel-default">
362 <div class="panel-heading">
363 <h3 class="panel-title">Analyzer</h3>
364 </div>
365 <div class="panel-bodỵ">
366 <div class="form-group input-group has-error">
367 <span class="input-group-addon">Instrument</span>
368 <input id="add1spectrum-analyzer-ms-instrument-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory" placeholder="e.g. Q-TOF; LTQ - Orbitrap">
369 </div>
370 <div class="form-group input-group has-warning">
371 <span class="input-group-addon">Model</span>
372 <input id="add1spectrum-analyzer-ms-model-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. QToF micro (Micromass Waters); XL; Impact II; ...">
373 </div>
374 <div class="form-group">
375 <div class="form-group input-group has-error">
376 <span class="input-group-addon">Ion analyzer Type</span>
377 <input id="add1spectrum-analyzer-ms-ionAnalyzerType-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory" placeholder="e.g. QTOF; QQQ; ...">
378 </div>
379 <p class="help-block">
380 <small>
381 Ion analyzer types are "B", "E", "FT" (include other types using FT like FTICR or Orbitrap), "IT", "Q", "TOF" (e.g.: "QTOF", "QQQ", "EB", "ITFT");
382 for further informations please refer to <a target="_BLANK" href="https://github.com/MassBank/MassBank-web/blob/main/Documentation/MassBankRecordFormat.md#212-record_title">MassBank Record documentation</a>.
383 </small>
384 </p>
385 </div>
386 </div>
387 </div>
388 </div>
389 <div class="col-lg-6">
390 <br>
391 <div class="panel panel-default">
392 <div class="panel-heading">
393 <h3 class="panel-title">Molecule Ionization</h3>
394 </div>
395 <div class="panel-bodỵ">
396 <div class="form-group input-group has-error">
397 <span class="input-group-addon">Ionization method <small>(POS/NEG)</small></span>
398 <select
399 id="add1spectrum-analyzserMS-ionizationMethod-pos-{{ TAB_INDEX_PLACEHOLDER }}"
400 style="max-width: 50%;"
401 class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory one-or-more"
402 >
403 </select>
404 <select
405 id="add1spectrum-analyzserMS-ionizationMethod-neg-{{ TAB_INDEX_PLACEHOLDER }}"
406 style="max-width: 50%;"
407 class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory one-or-more"
408 >
409 </select>
410 </div>
411 <div class="form-group input-group has-warning">
412 <span class="input-group-addon">
413 Spray (needle) gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small>
414 </span>
415 <input
416 id="add1spectrum-analyzserMS-sprayGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}"
417 style="max-width: 50%;"
418 type="text"
419 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
420 placeholder="e.g. 40 (POS)"
421 >
422 <input
423 id="add1spectrum-analyzserMS-sprayGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}"
424 style="max-width: 50%;"
425 type="text"
426 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
427 placeholder="e.g. 20 (NEG)"
428 >
429 </div>
430 <div class="form-group input-group has-warning">
431 <span class="input-group-addon">
432 Vaporizer gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small>
433 </span>
434 <input
435 id="add1spectrum-analyzserMS-vaporizerGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}"
436 style="max-width: 50%;"
437 type="text"
438 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
439 placeholder="e.g. 10 (POS)"
440 />
441 <input
442 id="add1spectrum-analyzserMS-vaporizerGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}"
443 style="max-width: 50%;"
444 type="text"
445 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
446 placeholder="e.g. 5 (NEG)"
447 />
448 </div>
449 <div class="form-group input-group has-warning">
450 <span class="input-group-addon">
451 Vaporizer temperature <br><small>(°C, POS/NEG)</small>
452 </span>
453 <input
454 id="add1spectrum-analyzserMS-vaporizerTemperature-pos-{{ TAB_INDEX_PLACEHOLDER }}"
455 style="max-width: 50%;"
456 type="text"
457 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
458 placeholder="e.g. 330 (POS)"
459 />
460 <input
461 id="add1spectrum-analyzserMS-vaporizerTemperature-neg-{{ TAB_INDEX_PLACEHOLDER }}"
462 style="max-width: 50%;"
463 type="text"
464 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
465 placeholder="e.g. 330 (NEG)"
466 />
467 </div>
468 <div class="form-group input-group has-warning">
469 <span class="input-group-addon">
470 Source gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small>
471 </span>
472 <input
473 id="add1spectrum-analyzserMS-sourceGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}"
474 style="max-width: 50%;"
475 type="text"
476 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
477 placeholder="e.g. 40 (POS)"
478 />
479 <input
480 id="add1spectrum-analyzserMS-sourceGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}"
481 style="max-width: 50%;"
482 type="text"
483 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
484 placeholder="e.g. 40 (NEG)"
485 />
486 </div>
487 <div class="form-group input-group has-warning">
488 <span class="input-group-addon">
489 Ion transfer tube temperature <br> Transfer capillary temperature <small>(°C, POS/NEG)</small>
490 </span>
491 <input
492 id="add1spectrum-analyzserMS-ionTransferTubeTemperatureOrTransferCapillaryTemperature-pos-{{ TAB_INDEX_PLACEHOLDER }}"
493 style="max-width: 50%;"
494 type="text"
495 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
496 placeholder="e.g. 350 (POS)"
497 />
498 <input
499 id="add1spectrum-analyzserMS-ionTransferTubeTemperatureOrTransferCapillaryTemperature-neg-{{ TAB_INDEX_PLACEHOLDER }}"
500 style="max-width: 50%;"
501 type="text"
502 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
503 placeholder="e.g. 350 (NEG)"
504 />
505 </div>
506 <div class="form-group input-group has-warning">
507 <span class="input-group-addon">
508 High voltage (ESI) <br> Corona voltage (APCI) <small>(in kV, POS/NEG)</small>
509 </span>
510 <input
511 id="add1spectrum-analyzserMS-highVoltageOrCoronaVoltage-pos-{{ TAB_INDEX_PLACEHOLDER }}"
512 style="max-width: 50%;"
513 type="text"
514 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
515 placeholder="e.g. 3.5 (POS)"
516 />
517 <input
518 id="add1spectrum-analyzserMS-highVoltageOrCoronaVoltage-neg-{{ TAB_INDEX_PLACEHOLDER }}"
519 style="max-width: 50%;"
520 type="text"
521 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
522 placeholder="e.g. 2.8 (NEG)"
523 />
524 </div>
525 </div>
526 </div>
527 </div>
528 <div class="col-lg-6 opt-msms">
529 <br>
530 <div class="panel panel-default">
531 <div class="panel-heading">
532 <h3 class="panel-title">Ion Storage / Ion Beam</h3>
533 </div>
534 <div class="panel-bodỵ">
535 <div class="form-group input-group has-warning">
536 <span class="input-group-addon">Type <small>(storage / beam)</small></span>
537 <select id="add1spectrum-ionTrapBeam-type-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional one-or-more">
538 <option value="" selected="selected" disabled="disabled">choose in list…</option>
539 <option value="trap">Ion Trap</option>
540 <option value="beam">Ion Beam</option>
541 </select>
542 </div>
543 <p class="help-block">
544 <small>
545 Ion storage: Ion Trap (IT) and ICR.
546 <br>Ion beam: Q or H collision Cell (QQQ, QQIT, QQ/TOF, Fusion).
547 </small>
548 </p>
549 <div class="form-group input-group has-success">
550 <span class="input-group-addon">Gas </span>
551 <select id="add1spectrum-ionTrapBeam-ionGas-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional ">
552 <option value="He">He</option>
553 <option value="N2">N2</option>
554 <option value="Ar">Ar</option>
555 </select>
556 </div>
557 <div class="form-group input-group has-warning">
558 <span class="input-group-addon">Gas pressure</span>
559 <input
560 id="add1spectrum-ionTrapBeam-ionGasPressureValue-{{ TAB_INDEX_PLACEHOLDER }}"
561 type="text"
562 style="max-width: 50%;"
563 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
564 />
565 <select
566 id="add1spectrum-ionTrapBeam-ionGasPressureUnit-{{ TAB_INDEX_PLACEHOLDER }}"
567 style="max-width: 50%;"
568 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
569 >
570 <option value="" selected="selected" disabled="disabled">choose in list…</option>
571 <option value="mbar">mbar</option>
572 <option value="au">a.u.</option>
573 </select>
574 </div>
575 <div class="form-group input-group add1spectrum-ionTrap has-warning">
576 <span class="input-group-addon">Frequency Shift <small>(KHz)</small></span>
577 <input
578 id="add1spectrum-ionTrapBeam-ionFrequencyShift-{{ TAB_INDEX_PLACEHOLDER }}"
579 type="text"
580 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
581 placeholder="e.g.: ..."
582 />
583 </div>
584 <div class="form-group input-group add1spectrum-ionTrap has-warning">
585 <span class="input-group-addon">Ion Number <small>(AGC or ICC)</small></span>
586 <input
587 id="add1spectrum-ionTrapBeam-ionNumber-{{ TAB_INDEX_PLACEHOLDER }}"
588 type="text"
589 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
590 placeholder="e.g.: ..."
591 />
592 </div>
593 </div>
594 </div>
595 </div>
596 </div>
597 <div class="col-lg-12">
598 <div class="col-lg-8">
599 <br>
600 <button
601 id="btnSwitch-gotoStep4-ms-{{ TAB_INDEX_PLACEHOLDER }}"
602 onclick="ctx().switchToStep(4);"
603 class="btn btn-disabled switchStep"
604 disabled=""
605 >
606 <i class="fa fa-arrow-circle-down"></i> Next!
607 </button>
608 </div>
609 <div class="col-lg-4">&nbsp;</div>
610 </div>
611 </div>
612 </div>
613 </div>
614 <div
615 id="add1spectrum-peaksData-MS-{{ TAB_INDEX_PLACEHOLDER }}"
616 class="panel panel-default"
617 style="display: none;"
618 >
619 <div class="panel-heading panel-success">
620 <h4 class="panel-title">
621 <a
622 id="linkActivateStep4-ms-{{ TAB_INDEX_PLACEHOLDER }}"
623 data-toggle="collapse"
624 data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}"
625 href="#step4-ms-{{ TAB_INDEX_PLACEHOLDER }}"
626 >
627 MS Peaks
628 <i
629 id="step4-ms-sign-{{ TAB_INDEX_PLACEHOLDER }}"
630 class="fa fa-question-circle"
631 ></i>
632 </a>
633 </h4>
634 </div>
635 <div id="step4-ms-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
636 <div class="panel-bodỵ">
637 <div class="col-lg-12">
638 <!--
639 <div class="form-group input-group col-lg-3 has-success">
640 <span class="input-group-addon">scan type</span>
641 <select
642 style="width: 150px;"
643 id="add1spectrum-peaksMS-msLevel-{{ TAB_INDEX_PLACEHOLDER }}"
644 class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"
645 >
646 <option value="" disabled="disabled">choose in list…</option>
647 <option class="enable-if-ms" value="ms" disabled="disabled" selected="selected">ms</option>
648 <option class="enable-if-msms" value="ms2" disabled="disabled">ms2</option>
649 </select>
650 </div>
651 -->
652 <div class="form-group input-group col-lg-3 has-error">
653 <span class="input-group-addon">polarity</span>
654 <select
655 style="width: 150px;"
656 id="add1spectrum-peaksMS-polarity-{{ TAB_INDEX_PLACEHOLDER }}"
657 class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"
658 >
659 <option value="" selected="selected" disabled="disabled">choose in list…</option>
660 <option value="positive" disabled="disabled">positive</option>
661 <option value="negative" disabled="disabled">negative</option>
662 </select>
663 </div>
664 <div class="form-group input-group col-lg-3 has-error">
665 <span class="input-group-addon">resolution</span>
666 <select
667 style="width: 150px;"
668 id="add1spectrum-peaksMS-resolution-{{ TAB_INDEX_PLACEHOLDER }}"
669 class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"
670 >
671 <option value="" disabled="disabled">choose in list…</option>
672 <option value="low">low</option>
673 <option selected="selected" value="high">high</option>
674 </select>
675 </div>
676 <div class="form-group input-group col-lg-3 has-success">
677 <span class="input-group-addon">curation</span>
678 <select
679 style="width: 150px;"
680 id="add1spectrum-peaksMS-curation-{{ TAB_INDEX_PLACEHOLDER }}"
681 class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-optional"
682 >
683 <option value="no_curation" selected="selected">no curation</option>
684 <option value="peaks_RI_sup_1percent">Peaks RI &gt; 1%</option>
685 <option value="top_50_peaks">Top 50 peaks</option>
686 <option value="top_20_peaks">Top 20 peaks</option>
687 <option value="top_10_peaks">Top 10 peaks</option>
688 <option value="similar_chromatographic_profile">Similar chromatographic profile</option>
689 </select>
690 </div>
691 </div>
692 <br>
693 <div class="col-lg-12 opt-msms">
694 <hr>
695 <div class="form-group input-group col-lg-4 has-success">
696 <span class="input-group-addon">
697 Isolation mode <i class="fa fa-question-circle" title="IT / Q / TOF / ICR"></i>
698 </span>
699 <select
700 id="add1spectrum-peaksMS-isolationMode-{{ TAB_INDEX_PLACEHOLDER }}"
701 class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm is-optional add1spectrum-peaksMSForm-peaklist-reset"
702 >
703 <option value="" disabled="disabled">choose in list…</option>
704 <option value="IT">IT</option>
705 <option value="Q">Q</option>
706 <option value="TOF">TOF</option>
707 <option value="ICR">ICR</option>
708 </select>
709 </div>
710 <div class="form-group input-group col-lg-4 has-warning">
711 <span class="input-group-addon">
712 Isolation window <i class="fa fa-question-circle" title="(+ / - value)"></i>
713 </span>
714 <input
715 id="add1spectrum-peaksMS-isolationWindow-{{ TAB_INDEX_PLACEHOLDER }}"
716 type="text"
717 class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset"
718 placeholder="e.g. ..."
719 />
720 </div>
721 <div class="form-group input-group col-lg-4 has-warning">
722 <span class="input-group-addon">qz isolation / activation <i class="fa fa-question-circle" title="if IT"></i> <small>(no unit)</small></span>
723 <input
724 id="add1spectrum-peaksMS-qzIsolation-{{ TAB_INDEX_PLACEHOLDER }}"
725 type="text"
726 class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset"
727 placeholder="e.g. ..."
728 />
729 </div>
730 <div class="form-group input-group col-lg-4 has-warning">
731 <span class="input-group-addon">Activation time <i class="fa fa-question-circle" title="if FT-ICR (SORI-CID) or IT"></i> <small>(ms)</small></span>
732 <input
733 id="add1spectrum-peaksMS-activationTime-{{ TAB_INDEX_PLACEHOLDER }}"
734 type="text"
735 class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset"
736 placeholder="e.g. ..."
737 />
738 </div>
739 <div class="form-group input-group col-lg-4 has-success">
740 <span class="input-group-addon">
741 Mode <i class="fa fa-question-circle" title="HCD / CID / ECD /ETD"></i>
742 </span>
743 <select
744 id="add1spectrum-peaksMS-mode-{{ TAB_INDEX_PLACEHOLDER }}"
745 class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm is-optional"
746 >
747 <option value="" disabled="disabled">choose in list…</option>
748 <option value="HCD">HCD</option>
749 <option value="CID">CID</option>
750 <option value="ECD">ECD</option>
751 <option value="ETD">ETD</option>
752 </select>
753 </div>
754
755 <div class="form-group input-group col-lg-4 has-warning">
756 <span class="input-group-addon">
757 Frag. energy <i class="fa fa-question-circle" title="without unit"></i>
758 </span>
759 <input
760 id="add1spectrum-peaksMS-frag-nrj-{{ TAB_INDEX_PLACEHOLDER }}"
761 type="text"
762 class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional"
763 placeholder="e.g. ..."
764 >
765 </div>
766 </div>
767 <div class="col-lg-12">
768 <div class="form-group input-group col-lg-4 has-warning">
769 <span class="input-group-addon">
770 Resolution FWHM <small>(resolution@mass)</small>
771 </span>
772 <input
773 id="add1spectrum-analyzer-ms-resolutionFWHM-{{ TAB_INDEX_PLACEHOLDER }}"
774 type="text"
775 class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional"
776 placeholder="e.g. 6500@1000"
777 />
778 </div>
779 <div class="form-group input-group col-lg-4 has-error">
780 <span class="input-group-addon">
781 m/z range <small>(ppm) from / to</small>
782 </span>
783 <input
784 style="width: 100px;"
785 id="add1spectrum-peaksMS-rangeFrom-{{ TAB_INDEX_PLACEHOLDER }}"
786 type="text"
787 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory"
788 placeholder="50"
789 value="{{ DEFAULT_MIN_MZ }}"
790 />
791 <input
792 style="width: 100px;"
793 id="add1spectrum-peaksMS-rangeTo-{{ TAB_INDEX_PLACEHOLDER }}"
794 type="text"
795 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory"
796 placeholder="500"
797 value="{{ DEFAULT_MAX_MZ }}"
798 />
799 </div>
800 <div class="form-group input-group col-lg-4 has-error">
801 <span class="input-group-addon">
802 retention time (min) <small>from / to</small>
803 </span>
804 <input
805 style="width: 100px;"
806 id="add1spectrum-peaksMS-rtMinFrom-{{ TAB_INDEX_PLACEHOLDER }}"
807 type="text"
808 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory"
809 placeholder="0.9"
810 value="{{ DEFAULT_MIN_RT }}"
811 />
812 <input
813 style="width: 100px;"
814 id="add1spectrum-peaksMS-rtMinTo-{{ TAB_INDEX_PLACEHOLDER }}"
815 type="text"
816 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory"
817 placeholder="1.4"
818 value="{{ DEFAULT_MAX_RT }}"
819 />
820 </div>
821 </div>
822 <div class="col-lg-12">
823 <div class="form-group input-group col-lg-4 has-warning">
824 <span class="input-group-addon">
825 retention time (% solvant) <small>from / to</small>
826 </span>
827 <input
828 style="width: 100px;"
829 id="add1spectrum-peaksMS-rtSolvFrom-{{ TAB_INDEX_PLACEHOLDER }}"
830 type="text"
831 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-optional"
832 placeholder="??"
833 />
834 <input
835 style="width: 100px;"
836 id="add1spectrum-peaksMS-rtSolvTo-{{ TAB_INDEX_PLACEHOLDER }}"
837 type="text"
838 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-optional"
839 placeholder="??"
840 />
841 </div>
842 <div class="col-lg-4">&nbsp;</div>
843 <div class="col-lg-4">&nbsp;</div>
844 </div>
845 <div class="col-lg-12">
846 <div>
847 <ul
848 class="col-lg-12 nav nav-tabs"
849 style="
850 margin-bottom: 15px;
851 float:left;
852 height:42px;
853 margin-left:20px;"
854 >
855 {{ TAB_LIST_PLACEHOLDER }}
856 </ul>
857 <div class="tab-content" style="float: left;">
858 {{ ADD_SPECTRUM_FORM }}
859 </div>
860 </div>
861 </div>
862 <div class="col-lg-12">
863 <div class="col-lg-8">
864 <button
865 class="btn btn-success add1spectrum"
866 onclick="$('#add1spectrum-peaksMS-msPrecursorIon-{{ TAB_INDEX_PLACEHOLDER }}').change()"
867 >check</button>
868 <button
869 id="btnSwitch-gotoStep5-ms-{{ TAB_INDEX_PLACEHOLDER }}"
870 onclick="$('#open_tab_1').click();setTimeout(()=>ctx().switchToStep(5), 100);"
871 class="btn switchStep btn-primary"
872 ><i class="fa fa-arrow-circle-down"></i> Next!</button>
873 <br>
874 <br>
875 </div>
876 <div class="col-lg-4">&nbsp;</div>
877 </div>
878 </div>
879 </div>
880 </div>
881
882
883 <div
884 id="add1spectrum-otherData-{{ TAB_INDEX_PLACEHOLDER }}"
885 class="panel panel-default"
886 style="display: none;"
887 >
888 <div class="panel-heading panel-success">
889 <h4 class="panel-title">
890 <a id="linkActivateStep5-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step5-{{ TAB_INDEX_PLACEHOLDER }}">
891 Other <i id="step5sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i>
892 </a>
893 </h4>
894 </div>
895 <div id="step5-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
896 <div class="panel-bodỵ">
897 <div class="col-lg-12">
898 <div class="col-lg-6">
899 <div class="panel panel-default">
900 <div class="panel-heading">
901 <h3 class="panel-title">Ownership</h3>
902 </div>
903 <div class="panel-bodỵ">
904 <div class="form-group input-group has-error">
905 <span class="input-group-addon">data author(s)</span>
906 <input
907 id="add1spectrum-other-author-{{ TAB_INDEX_PLACEHOLDER }}"
908 type="text"
909 class="form-control add1spectrum add1spectrum-otherForm is-mandatory"
910 placeholder="enter your lab. / plateforme name"
911 value=""
912 />
913 </div>
914 <div class="form-group input-group has-warning">
915 <span class="input-group-addon">data validator(s)</span>
916 <input
917 id="add1spectrum-other-validator-{{ TAB_INDEX_PLACEHOLDER }}"
918 type="text"
919 class="form-control add1spectrum add1spectrum-otherForm is-optional"
920 placeholder="name of the personne who checked all data in this file"
921 />
922 </div>
923 <div class="form-group input-group has-warning">
924 <span class="input-group-addon">acquisition date</span>
925 <input
926 id="add1spectrum-other-date-{{ TAB_INDEX_PLACEHOLDER }}"
927 data-date-format="yyyy-mm-dd"
928 type="text"
929 class="form-control add1spectrum add1spectrum-otherForm datepicker is-optional"
930 value=""
931 placeholder="2022-11-04"
932 />
933 </div>
934 <div class="form-group input-group has-warning">
935 <span class="input-group-addon">data ownership</span>
936 <input
937 id="add1spectrum-other-owner-{{ TAB_INDEX_PLACEHOLDER }}"
938 type="text"
939 class="form-control add1spectrum add1spectrum-otherForm is-optional"
940 placeholder="enter your lab. / plateforme name &amp; sample provider;"
941 />
942 </div>
943 </div>
944 </div>
945 </div>
946 <div class="col-lg-6">
947 <div class="panel panel-default">
948 <div class="panel-heading">
949 <h3 class="panel-title">Raw File</h3>
950 </div>
951 <div class="panel-bodỵ">
952 <div class="form-group input-group has-warning">
953 <span class="input-group-addon">raw file name</span>
954 <input
955 id="add1spectrum-other-fileName-{{ TAB_INDEX_PLACEHOLDER }}"
956 type="text"
957 class="form-control add1spectrum add1spectrum-otherForm is-optional"
958 placeholder="needed to retrieve file later"
959 />
960 </div>
961 <div class="form-group input-group has-warning">
962 <span class="input-group-addon">raw file size (Ko)</span>
963 <input
964 id="add1spectrum-other-fileSize-{{ TAB_INDEX_PLACEHOLDER }}"
965 type="text"
966 class="form-control add1spectrum add1spectrum-otherForm is-optional"
967 placeholder="optional, to check if the file is correct"
968 />
969 </div>
970 </div>
971 </div>
972 </div>
973 </div>
974 <div class="col-lg-12">
975 <div class="col-lg-8">
976 <br>
977 <button
978 id="btnSwitch-gotoStep6-{{ TAB_INDEX_PLACEHOLDER }}"
979 onclick="ctx().switchToStep(6);"
980 class="btn btn-disabled switchStep"
981 disabled=""
982 >
983 <i class="fa fa-arrow-circle-right"></i> Validate this compound/mix!
984 </button>
985 <span
986 id="import1SpectrumLoadingBare-{{ TAB_INDEX_PLACEHOLDER }}"
987 style="display: none;"><img
988 src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/img/ajax-loader.gif"
989 title="please wait"
990 ></span>
991 <span
992 id="import1SpectrumResults-{{ TAB_INDEX_PLACEHOLDER }}"
993 style="display: none;"
994 >
995 <button
996 id="btnSwitch-view-{{ TAB_INDEX_PLACEHOLDER }}"
997 data-toggle="modal"
998 data-target="#modalShowSpectra-{{ TAB_INDEX_PLACEHOLDER }}"
999 class="btn btn-success"
1000 >
1001 <i class="fa fa-eye"></i> View spectrum
1002 </button>
1003 <button
1004 id="btnSwitch-returntoStep3-{{ TAB_INDEX_PLACEHOLDER }}"
1005 onclick="ctx().switchToStep(3);"
1006 class="btn btn-primary"
1007 >
1008 <i class="fa fa-arrow-circle-up"></i> Add new peaklist!
1009 </button>
1010 </span>
1011 </div>
1012 <div class="col-lg-4">
1013 <br>
1014 <br>
1015 <br>
1016 </div>
1017 </div>
1018 <div class="col-lg-12">
1019 <div class="col-lg-8">
1020 <div
1021 id="alertBoxSubmitSpectrum-{{ TAB_INDEX_PLACEHOLDER }}"
1022 class="col-lg-6"
1023 ></div>
1024 </div>
1025 <div class="col-lg-4">&nbsp;</div>
1026 </div>
1027 </div>
1028 </div>
1029 </div>
1030 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/dist/handsontable.full.min.js"></script>
1031 <link
1032 rel="stylesheet"
1033 media="screen"
1034 href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/dist/handsontable.full.min.css"
1035 >
1036 <link
1037 rel="stylesheet"
1038 media="screen"
1039 href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/bootstrap/handsontable.bootstrap.min.css"
1040 >
1041 <div
1042 class="modal"
1043 id="modalPickCompound-{{ TAB_INDEX_PLACEHOLDER }}"
1044 tabindex="-1"
1045 role="dialog"
1046 aria-labelledby="modalPickCompoundLabel-{{ TAB_INDEX_PLACEHOLDER }}"
1047 aria-hidden="true"
1048 >
1049 <div class="modal-dialog">
1050 <div class="modal-content">
1051 <div class="modal-header">
1052 <button
1053 type="button"
1054 class="close"
1055 data-dismiss="modal"
1056 aria-hidden="true"
1057 >×</button>
1058 <h4
1059 class="modal-title"
1060 id="modalPickCompoundLabel-{{ TAB_INDEX_PLACEHOLDER }}"
1061 >
1062 Pick a compound
1063 </h4>
1064 </div>
1065 <div class="modal-body">
1066 <div class="form-group input-group">
1067 <span class="input-group-addon">Compound Name</span>
1068 <input
1069 id="add-one-cc-s1-value-{{ TAB_INDEX_PLACEHOLDER }}"
1070 class="form-control"
1071 placeholder="e.g. Caffeine"
1072 type="text"
1073 />
1074 <span class="input-group-btn">
1075 <button
1076 class="btn btn-default"
1077 type="button"
1078 onclick="ctx().searchLocalCompound();"
1079 >
1080 <i class="fa fa-search"></i>
1081 </button>
1082 </span>
1083 </div>
1084 <div id="load-step-1-{{ TAB_INDEX_PLACEHOLDER }}" style="display: none;">
1085 <img src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/img/ajax-loader.gif" title="please wait">
1086 </div>
1087 <div
1088 id="ok-step-1-{{ TAB_INDEX_PLACEHOLDER }}"
1089 style="overflow: auto; max-height: 300px;"
1090 ></div>
1091 </div>
1092 <div class="modal-footer">
1093 <button
1094 type="button"
1095 class="btn btn-danger"
1096 data-dismiss="modal"
1097 onclick="ctx().clearLine()"
1098 >
1099 <i class="fa fa-eraser"></i> Clear
1100 </button>
1101 <button
1102 type="button"
1103 class="btn btn-default"
1104 data-dismiss="modal"
1105 >Fermer</button>
1106 </div>
1107 </div>
1108 </div>
1109 </div>
1110 <div
1111 class="modal "
1112 id="modalShowSpectra-{{ TAB_INDEX_PLACEHOLDER }}"
1113 tabindex="-1"
1114 role="dialog"
1115 aria-labelledby="modalShowSpectraLabel-{{ TAB_INDEX_PLACEHOLDER }}"
1116 aria-hidden="true"
1117 >
1118 <div class="modal-dialog">
1119 <div class="modal-content">
1120 <div class="modal-header">
1121 <button
1122 type="button"
1123 class="close"
1124 data-dismiss="modal"
1125 aria-hidden="true"
1126 >×</button>
1127 <h4
1128 class="modal-title"
1129 id="modalShowSpectraLabel-{{ TAB_INDEX_PLACEHOLDER }}"
1130 >Modal title</h4>
1131 </div>
1132 <div class="modal-body">
1133 <div class="te"></div>
1134 </div>
1135 <div class="modal-footer">
1136 </div>
1137 </div>
1138 </div>
1139 </div>
1140 </div>
1141 </div>
1142 </div>
1143 <div id="send_buttons_div">
1144 <button
1145 onclick="send_everything_to_peakforest('{{ PF_URL_PLACEHOLDER }}', '{{ PF_TOKEN_PLACEHOLDER }}')"
1146 class="btn btn-success"
1147 >
1148 <i class="fa fa-arrow-circle-right"></i>
1149 Send everything to peakforest!
1150 </button>
1151 <button class="btn btn-validate" onclick="ctx().exit()">
1152 Close MS2PF
1153 </button>
1154 </div>
1155 <script
1156 type="text/javascript"
1157 src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/jqueryform/2.8/jquery.form.min.js"
1158 ></script>
1159 <script
1160 src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/md5.min.js"
1161 ></script>
1162 </div>
1163 <nav class="navbar navbar-default navbar-fixed-bottom navbar-inverse navbar-main" role="navigation">
1164 <div class="navbar-header navbar-inverse footer">
1165 <ul id="ul-info-footer" class="nav navbar-nav">
1166 <li class="li-info-footer"><a id="linkcontact" href="mailto:contact@peakforest.org?subject=%5Babout%20peakforest%20webapp%5D">Contact</a></li>
1167 <li class="li-info-footer">
1168 <a id="about-peakforest" href="about-peakforest" data-toggle="modal" data-target="#modalAbout">À propos</a>
1169 </li>
1170 <li class="li-info-footer">
1171 <a href="https://peakforest.org/mypeakforest" target="_blank">Ma PeakForest</a>
1172 </li>
1173 <li class="li-info-footer">
1174 <a href="http://metabohub.fr" target="_blank">metaboHUB</a>
1175 </li>
1176 </ul>
1177 </div>
1178 </nav>
1179 <div
1180 class="modal"
1181 id="modalAbout"
1182 tabindex="-1"
1183 role="dialog"
1184 aria-labelledby="modalAboutLabel"
1185 aria-hidden="true"
1186 >
1187 <div class="modal-dialog">
1188 <div class="modal-content">
1189 <div class="modal-header">
1190 <button
1191 type="button"
1192 class="close"
1193 data-dismiss="modal"
1194 aria-hidden="true"
1195 >×</button>
1196 <h4 class="modal-title" id="modalAboutLabel">À propos de la Base de Données PeakForest</h4>
1197 </div>
1198 <div class="modal-body">
1199 <div class="te"></div>
1200 </div>
1201 <div class="modal-footer">
1202 </div>
1203 </div>
1204 </div>
1205 </div>
1206 <div
1207 class="modal"
1208 id="modalMyPeakForest"
1209 tabindex="-1"
1210 role="dialog"
1211 aria-labelledby="modalMyPFLabel"
1212 aria-hidden="true"
1213 >
1214 <div class="modal-dialog">
1215 <div class="modal-content">
1216 <div class="modal-header">
1217 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
1218 <h4 class="modal-title" id="modalAboutLabel">Ma base de Données PeakForest</h4>
1219 </div>
1220 <div class="modal-body">
1221 <div class="te"></div>
1222 </div>
1223 <div class="modal-footer">
1224 </div>
1225 </div>
1226 </div>
1227 </div>
1228 {{ EMBED_JS }}
1229 <script type="text/javascript">context = context_1 ;</script>
1230 </body>
1231 </html>