Mercurial > repos > lain > ms_to_peakforest_it

comparison 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 b58b229c4cbf
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-body">
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-body">
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-body">
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-body" 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-body">
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-body">
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 <!--
236 <option value="Agilent">Agilent</option>
237 <option value="alltech">Alltech</option>
238 <option value="CIL cluzeau">Cil cluzeau</option>
239 <option value="Daicel">Daicel</option>
240 <option value="Hypersil">Hypersil</option>
241 <option value="Interchim">Interchim</option>
242 <option value="Macherey nagel">Macherey nagel</option>
243 <option value="Merck">Merck</option>
244 <option value="Phenomenex">Phenomenex</option>
245 <option value="Shiseido">Shiseido</option>
246 <option value="Supelco (sigma-aldrich)">Supelco (sigma-aldrich)</option>
247 <option value="Thermo">Thermo</option>
248 <option value="Vydac">Vydac</option>
249 <option value="Waters">Waters</option>
250 <option value="YMC">YMC</option>
251 <option value="other">Other</option>
252 -->
253 </select>
254 </div>
255 <div class="form-group input-group ">
256 <span class="input-group-addon">Column constructor (other)</span>
257 <input id="add1spectrum-chromatoLC-colConstructorOther-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm" disabled="disabled" placeholder="e.g. HAL 9000">
258 </div>
259 <div class="form-group input-group has-warning">
260 <span class="input-group-addon">Column name</span>
261 <input id="add1spectrum-chromatoLC-colName-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. UPLC HSS T3">
262 </div>
263 <div class="form-group input-group has-error">
264 <span class="input-group-addon">Column length (mm)</span>
265 <input id="add1spectrum-chromatoLC-colLength-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 150">
266 </div>
267 <div class="form-group input-group has-error">
268 <span class="input-group-addon">Column diameter (mm)</span>
269 <input id="add1spectrum-chromatoLC-colDiameter-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 2.1">
270 </div>
271 <div class="form-group input-group has-error">
272 <span class="input-group-addon">Particule size (µm)</span>
273 <input id="add1spectrum-chromatoLC-colParticuleSize-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 1.8">
274 </div>
275 <div class="form-group input-group has-warning">
276 <span class="input-group-addon">Column temperature (°C)</span>
277 <input id="add1spectrum-chromatoLC-colTemperature-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 30">
278 </div>
279 <div class="form-group input-group has-error">
280 <span class="input-group-addon">LC mode</span>
281 <select id="add1spectrum-chromatoLC-LCMode-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory">
282 <option value="" selected="selected" disabled="disabled">choose in list…</option>
283 <option value="Gradient">Gradient</option>
284 <option value="Isocratic">Isocratic</option>
285 </select>
286 </div>
287 <div class="form-group input-group has-warning">
288 <span class="input-group-addon">Separation flow rate (µL/min)</span>
289 <input id="add1spectrum-chromatoLC-separationFlowRate-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 400">
290 </div>
291 <div class="form-group input-group has-error">
292 <span class="input-group-addon">Separation solvent A</span>
293 <select
294 id="add1spectrum-chromatoLC-separationSolvA-{{ TAB_INDEX_PLACEHOLDER }}"
295 class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"
296 >
297 <option value="" selected="selected" disabled="disabled">choose in list…</option>
298 <!--
299 <option value="5% ACN + 0.1% FA in H2O">5% ACN + 0.1% FA in H2O</option>
300 <option value="10% ACN + 0.1% FA in H2O">10% ACN + 0.1% FA in H2O</option>
301 <option value="10mM (NH4)2CO3 / ACN (20/80) (v/v)">10mM (NH4)2CO3 / ACN (20/80) (v/v)</option>
302 <option value="Acetonitrile">Acetonitrile</option>
303 <option value="Acetonitrile + 0.1% Formic Acid">Acetonitrile + 0.1% Formic Acid</option>
304 <option value="H2O + 0.1% Formic Acid">H2O + 0.1% Formic Acid</option>
305 <option value="H2O, ammonium carbonate 10 mM, pH10.5">H2O, ammonium carbonate 10 mM, pH10.5</option>
306 <option value="H2O, ammonium acetate 2.5 mM">H2O, ammonium acetate 2.5 mM</option>
307 <option value="H2O / CH3OH / CH3CO2H (95/5/0.1)">H2O / CH3OH / CH3CO2H (95/5/0.1)</option>
308 <option value="Methanol">Methanol</option>
309 <option value="Methanol / H2O (1/1)">Methanol / H2O (1/1)</option>
310 <option value="Methanol / H2O (1/1), 0.1% FA">Methanol / H2O (1/1), 0.1% FA</option>
311 <option value="Methanol / CH3CO2H (100/0.1)">Methanol / CH3CO2H (100/0.1)</option>
312 <option value="Methanol / ACN (60/40) ammonium acetate 2.5 mM">Methanol / ACN (60/40) ammonium acetate 2.5 mM</option>
313 -->
314 </select>
315 </div>
316 <div class="form-group input-group has-warning">
317 <span class="input-group-addon">pH solvent A (if acqueous solvant)</span>
318 <input id="add1spectrum-chromatoLC-separationSolvApH-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 7.0">
319 </div>
320 <div class="form-group input-group has-error">
321 <span class="input-group-addon">Separation solvent B</span>
322 <select
323 id="add1spectrum-chromatoLC-separationSolvB-{{ TAB_INDEX_PLACEHOLDER }}"
324 class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"
325 >
326 <!--
327 <option value="" selected="selected" disabled="disabled">choose in list…</option>
328 <option value="5% ACN + 0.1% FA in H2O">5% ACN + 0.1% FA in H2O</option>
329 <option value="10% ACN + 0.1% FA in H2O">10% ACN + 0.1% FA in H2O</option>
330 <option value="10mM (NH4)2CO3 / ACN (20/80) (v/v)">10mM (NH4)2CO3 / ACN (20/80) (v/v)</option>
331 <option value="Acetonitrile">Acetonitrile</option>
332 <option value="Acetonitrile + 0.1% Formic Acid">Acetonitrile + 0.1% Formic Acid</option>
333 <option value="H2O + 0.1% Formic Acid">H2O + 0.1% Formic Acid</option>
334 <option value="H2O, ammonium carbonate 10 mM, pH10.5">H2O, ammonium carbonate 10 mM, pH10.5</option>
335 <option value="H2O, ammonium acetate 2.5 mM">H2O, ammonium acetate 2.5 mM</option>
336 <option value="H2O / CH3OH / CH3CO2H (95/5/0.1)">H2O / CH3OH / CH3CO2H (95/5/0.1)</option>
337 <option value="Methanol">Methanol</option>
338 <option value="Methanol / H2O (1/1)">Methanol / H2O (1/1)</option>
339 <option value="Methanol / H2O (1/1), 0.1% FA">Methanol / H2O (1/1), 0.1% FA</option>
340 <option value="Methanol / CH3CO2H (100/0.1)">Methanol / CH3CO2H (100/0.1)</option>
341 <option value="Methanol / ACN (60/40) ammonium acetate 2.5 mM">Methanol / ACN (60/40) ammonium acetate 2.5 mM</option>
342 -->
343 </select>
344 </div>
345 <div class="form-group input-group has-warning">
346 <span class="input-group-addon">pH solvent B (if acqueous solvant)</span>
347 <input id="add1spectrum-chromatoLC-separationSolvBApH-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 7.0">
348 </div>
349 </div>
350 </div>
351 </div>
352 <div class="col-lg-6">
353 <div class="panel panel-default">
354 <div class="panel-heading">
355 <h3 class="panel-title">Separation flow gradient</h3>
356 </div>
357 <div class="panel-body" style="padding: 0px;">
358 <div id="container_LC_SFG-{{ TAB_INDEX_PLACEHOLDER }}" class="handsontable"></div>
359 </div>
360 </div>
361 </div>
362 </div>
363 <div class="col-lg-12">
364 <div class="col-lg-8">
365 <br>
366 <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>
367 </div>
368 <div class="col-lg-4">&nbsp;</div>
369 </div>
370 </div>
371 </div>
372 </div>
373 <div id="add1spectrum-chromatographyData-GC-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;">
374 <div class="panel-heading panel-success">
375 <h4 class="panel-title">
376 <a id="linkActivateStep2-gc-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step2-gc-{{ TAB_INDEX_PLACEHOLDER }}">
377 Gaz Chromatography <i id="step2-gc-sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i>
378 </a>
379 </h4>
380 </div>
381 <div id="step2-gc-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
382 <div class="panel-body">
383 <div class="col-lg-12">
384 <div class="col-lg-6">
385 i &lt;3 GC
386 </div>
387 <div class="col-lg-6">&nbsp;</div>
388 </div>
389 <div class="col-lg-12">
390 <div class="col-lg-8">
391 <br>
392 <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>
393 </div>
394 <div class="col-lg-4">&nbsp;</div>
395 </div>
396 </div>
397 </div>
398 </div>
399 <div id="add1spectrum-analyserData-MS-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;">
400 <div class="panel-heading panel-success">
401 <h4 class="panel-title">
402 <a id="linkActivateStep3-ms-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step3-ms-{{ TAB_INDEX_PLACEHOLDER }}">
403 MS Analyzer <i id="step3-ms-sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i>
404 </a>
405 </h4>
406 </div>
407 <div id="step3-ms-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
408 <div class="panel-body">
409 <div class="col-lg-12">
410 <div class="col-lg-6">
411 <br>
412 <div class="panel panel-default">
413 <div class="panel-heading">
414 <h3 class="panel-title">Analyzer</h3>
415 </div>
416 <div class="panel-body">
417 <div class="form-group input-group has-error">
418 <span class="input-group-addon">Instrument</span>
419 <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">
420 </div>
421 <div class="form-group input-group has-warning">
422 <span class="input-group-addon">Model</span>
423 <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; ...">
424 </div>
425 <div class="form-group">
426 <div class="form-group input-group has-error">
427 <span class="input-group-addon">Ion analyzer Type</span>
428 <input id="add1spectrum-analyzer-ms-ionAnalyzerType-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory" placeholder="e.g. QTOF; QQQ; ...">
429 </div>
430 <p class="help-block">
431 <small>
432 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");
433 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>.
434 </small>
435 </p>
436 </div>
437 </div>
438 </div>
439 </div>
440 <div class="col-lg-6">
441 <br>
442 <div class="panel panel-default">
443 <div class="panel-heading">
444 <h3 class="panel-title">Molecule Ionization</h3>
445 </div>
446 <div class="panel-body">
447 <div class="form-group input-group has-error">
448 <span class="input-group-addon">Ionization method <small>(POS/NEG)</small></span>
449 <select
450 id="add1spectrum-analyzserMS-ionizationMethod-pos-{{ TAB_INDEX_PLACEHOLDER }}"
451 style="max-width: 50%;"
452 class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory one-or-more"
453 >
454 </select>
455 <select
456 id="add1spectrum-analyzserMS-ionizationMethod-neg-{{ TAB_INDEX_PLACEHOLDER }}"
457 style="max-width: 50%;"
458 class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory one-or-more"
459 >
460 </select>
461 </div>
462 <div class="form-group input-group has-warning">
463 <span class="input-group-addon">
464 Spray (needle) gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small>
465 </span>
466 <input
467 id="add1spectrum-analyzserMS-sprayGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}"
468 style="max-width: 50%;"
469 type="text"
470 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
471 placeholder="e.g. 40 (POS)"
472 >
473 <input
474 id="add1spectrum-analyzserMS-sprayGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}"
475 style="max-width: 50%;"
476 type="text"
477 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
478 placeholder="e.g. 20 (NEG)"
479 >
480 </div>
481 <div class="form-group input-group has-warning">
482 <span class="input-group-addon">
483 Vaporizer gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small>
484 </span>
485 <input
486 id="add1spectrum-analyzserMS-vaporizerGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}"
487 style="max-width: 50%;"
488 type="text"
489 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
490 placeholder="e.g. 10 (POS)"
491 />
492 <input
493 id="add1spectrum-analyzserMS-vaporizerGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}"
494 style="max-width: 50%;"
495 type="text"
496 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
497 placeholder="e.g. 5 (NEG)"
498 />
499 </div>
500 <div class="form-group input-group has-warning">
501 <span class="input-group-addon">
502 Vaporizer temperature <br><small>(°C, POS/NEG)</small>
503 </span>
504 <input
505 id="add1spectrum-analyzserMS-vaporizerTemperature-pos-{{ TAB_INDEX_PLACEHOLDER }}"
506 style="max-width: 50%;"
507 type="text"
508 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
509 placeholder="e.g. 330 (POS)"
510 />
511 <input
512 id="add1spectrum-analyzserMS-vaporizerTemperature-neg-{{ TAB_INDEX_PLACEHOLDER }}"
513 style="max-width: 50%;"
514 type="text"
515 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
516 placeholder="e.g. 330 (NEG)"
517 />
518 </div>
519 <div class="form-group input-group has-warning">
520 <span class="input-group-addon">
521 Source gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small>
522 </span>
523 <input
524 id="add1spectrum-analyzserMS-sourceGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}"
525 style="max-width: 50%;"
526 type="text"
527 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
528 placeholder="e.g. 40 (POS)"
529 />
530 <input
531 id="add1spectrum-analyzserMS-sourceGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}"
532 style="max-width: 50%;"
533 type="text"
534 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
535 placeholder="e.g. 40 (NEG)"
536 />
537 </div>
538 <div class="form-group input-group has-warning">
539 <span class="input-group-addon">
540 Ion transfer tube temperature <br> Transfer capillary temperature <small>(°C, POS/NEG)</small>
541 </span>
542 <input
543 id="add1spectrum-analyzserMS-ionTransferTubeTemperatureOrTransferCapillaryTemperature-pos-{{ TAB_INDEX_PLACEHOLDER }}"
544 style="max-width: 50%;"
545 type="text"
546 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
547 placeholder="e.g. 350 (POS)"
548 />
549 <input
550 id="add1spectrum-analyzserMS-ionTransferTubeTemperatureOrTransferCapillaryTemperature-neg-{{ TAB_INDEX_PLACEHOLDER }}"
551 style="max-width: 50%;"
552 type="text"
553 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
554 placeholder="e.g. 350 (NEG)"
555 />
556 </div>
557 <div class="form-group input-group has-warning">
558 <span class="input-group-addon">
559 High voltage (ESI) <br> Corona voltage (APCI) <small>(in kV, POS/NEG)</small>
560 </span>
561 <input
562 id="add1spectrum-analyzserMS-highVoltageOrCoronaVoltage-pos-{{ TAB_INDEX_PLACEHOLDER }}"
563 style="max-width: 50%;"
564 type="text"
565 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
566 placeholder="e.g. 3.5 (POS)"
567 />
568 <input
569 id="add1spectrum-analyzserMS-highVoltageOrCoronaVoltage-neg-{{ TAB_INDEX_PLACEHOLDER }}"
570 style="max-width: 50%;"
571 type="text"
572 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
573 placeholder="e.g. 2.8 (NEG)"
574 />
575 </div>
576 </div>
577 </div>
578 </div>
579 <div class="col-lg-6 opt-msms">
580 <br>
581 <div class="panel panel-default">
582 <div class="panel-heading">
583 <h3 class="panel-title">Ion Storage / Ion Beam</h3>
584 </div>
585 <div class="panel-body">
586 <div class="form-group input-group has-warning">
587 <span class="input-group-addon">Type <small>(storage / beam)</small></span>
588 <select id="add1spectrum-ionTrapBeam-type-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional one-or-more">
589 <option value="" selected="selected" disabled="disabled">choose in list…</option>
590 <option value="trap">Ion Trap</option>
591 <option value="beam">Ion Beam</option>
592 </select>
593 </div>
594 <p class="help-block">
595 <small>
596 Ion storage: Ion Trap (IT) and ICR.
597 <br>Ion beam: Q or H collision Cell (QQQ, QQIT, QQ/TOF, Fusion).
598 </small>
599 </p>
600 <div class="form-group input-group has-success">
601 <span class="input-group-addon">Gas </span>
602 <select id="add1spectrum-ionTrapBeam-ionGas-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional ">
603 <option value="He">He</option>
604 <option value="N2">N2</option>
605 <option value="Ar">Ar</option>
606 </select>
607 </div>
608 <div class="form-group input-group has-warning">
609 <span class="input-group-addon">Gas pressure</span>
610 <input
611 id="add1spectrum-ionTrapBeam-ionGasPressureValue-{{ TAB_INDEX_PLACEHOLDER }}"
612 type="text"
613 style="max-width: 50%;"
614 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
615 />
616 <select
617 id="add1spectrum-ionTrapBeam-ionGasPressureUnit-{{ TAB_INDEX_PLACEHOLDER }}"
618 style="max-width: 50%;"
619 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
620 >
621 <option value="" selected="selected" disabled="disabled">choose in list…</option>
622 <option value="mbar">mbar</option>
623 <option value="au">a.u.</option>
624 </select>
625 </div>
626 <div class="form-group input-group add1spectrum-ionTrap has-warning">
627 <span class="input-group-addon">Frequency Shift <small>(KHz)</small></span>
628 <input
629 id="add1spectrum-ionTrapBeam-ionFrequencyShift-{{ TAB_INDEX_PLACEHOLDER }}"
630 type="text"
631 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
632 placeholder="e.g.: ..."
633 />
634 </div>
635 <div class="form-group input-group add1spectrum-ionTrap has-warning">
636 <span class="input-group-addon">Ion Number <small>(AGC or ICC)</small></span>
637 <input
638 id="add1spectrum-ionTrapBeam-ionNumber-{{ TAB_INDEX_PLACEHOLDER }}"
639 type="text"
640 class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional"
641 placeholder="e.g.: ..."
642 />
643 </div>
644 </div>
645 </div>
646 </div>
647 </div>
648 <div class="col-lg-12">
649 <div class="col-lg-8">
650 <br>
651 <button
652 id="btnSwitch-gotoStep4-ms-{{ TAB_INDEX_PLACEHOLDER }}"
653 onclick="ctx().switchToStep(4);"
654 class="btn btn-disabled switchStep"
655 disabled=""
656 >
657 <i class="fa fa-arrow-circle-down"></i> Next!
658 </button>
659 </div>
660 <div class="col-lg-4">&nbsp;</div>
661 </div>
662 </div>
663 </div>
664 </div>
665 <div
666 id="add1spectrum-peaksData-MS-{{ TAB_INDEX_PLACEHOLDER }}"
667 class="panel panel-default"
668 style="display: none;"
669 >
670 <div class="panel-heading panel-success">
671 <h4 class="panel-title">
672 <a
673 id="linkActivateStep4-ms-{{ TAB_INDEX_PLACEHOLDER }}"
674 data-toggle="collapse"
675 data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}"
676 href="#step4-ms-{{ TAB_INDEX_PLACEHOLDER }}"
677 >
678 MS Peaks
679 <i
680 id="step4-ms-sign-{{ TAB_INDEX_PLACEHOLDER }}"
681 class="fa fa-question-circle"
682 ></i>
683 </a>
684 </h4>
685 </div>
686 <div id="step4-ms-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
687 <div class="panel-body">
688 <div class="col-lg-12">
689 <div class="form-group input-group col-lg-3 has-success">
690 <span class="input-group-addon">scan type</span>
691 <select
692 style="width: 150px;"
693 id="add1spectrum-peaksMS-msLevel-{{ TAB_INDEX_PLACEHOLDER }}"
694 class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"
695 >
696 <option value="" disabled="disabled">choose in list…</option>
697 <option class="enable-if-ms" value="ms" disabled="disabled" selected="selected">ms</option>
698 <option class="enable-if-msms" value="ms2" disabled="disabled">ms2</option>
699 <!-- <option class="enable-if-msms" value="ms3" disabled="disabled">ms3</option> -->
700 </select>
701 </div>
702 <div class="form-group input-group col-lg-3 has-error">
703 <span class="input-group-addon">polarity</span>
704 <select
705 style="width: 150px;"
706 id="add1spectrum-peaksMS-polarity-{{ TAB_INDEX_PLACEHOLDER }}"
707 class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"
708 >
709 <option value="" selected="selected" disabled="disabled">choose in list…</option>
710 <option value="positive" disabled="disabled">positive</option>
711 <option value="negative" disabled="disabled">negative</option>
712 </select>
713 </div>
714 <div class="form-group input-group col-lg-3 has-error">
715 <span class="input-group-addon">resolution</span>
716 <select
717 style="width: 150px;"
718 id="add1spectrum-peaksMS-resolution-{{ TAB_INDEX_PLACEHOLDER }}"
719 class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"
720 >
721 <option value="" disabled="disabled">choose in list…</option>
722 <option value="low">low</option>
723 <option selected="selected" value="high">high</option>
724 </select>
725 </div>
726 <div class="form-group input-group col-lg-3 has-success">
727 <span class="input-group-addon">curation</span>
728 <select
729 style="width: 150px;"
730 id="add1spectrum-peaksMS-curation-{{ TAB_INDEX_PLACEHOLDER }}"
731 class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-optional"
732 >
733 <option value="no_curation" selected="selected">no curation</option>
734 <option value="peaks_RI_sup_1percent">Peaks RI &gt; 1%</option>
735 <option value="top_50_peaks">Top 50 peaks</option>
736 <option value="top_20_peaks">Top 20 peaks</option>
737 <option value="top_10_peaks">Top 10 peaks</option>
738 <option value="similar_chromatographic_profile">Similar chromatographic profile</option>
739 </select>
740 </div>
741 </div>
742 <br>
743 <div class="col-lg-12 opt-msms">
744 <hr>
745 <div class="form-group input-group col-lg-4 has-success">
746 <span class="input-group-addon">
747 Isolation mode <i class="fa fa-question-circle" title="IT / Q / TOF / ICR"></i>
748 </span>
749 <select
750 id="add1spectrum-peaksMS-isolationMode-{{ TAB_INDEX_PLACEHOLDER }}"
751 class="disabled-if-ms-in-msms form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm is-optional add1spectrum-peaksMSForm-peaklist-reset"
752 >
753 <option value="" disabled="disabled">choose in list…</option>
754 <option value="IT">IT</option>
755 <option value="Q">Q</option>
756 <option value="TOF">TOF</option>
757 <option value="ICR">ICR</option>
758 </select>
759 </div>
760 <div class="form-group input-group col-lg-4 has-warning">
761 <span class="input-group-addon">
762 Isolation window <i class="fa fa-question-circle" title="(+ / - value)"></i>
763 </span>
764 <input
765 id="add1spectrum-peaksMS-isolationWindow-{{ TAB_INDEX_PLACEHOLDER }}"
766 type="text"
767 class="disabled-if-ms-in-msms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset"
768 placeholder="e.g. ..."
769 />
770 </div>
771 <div class="form-group input-group col-lg-4 has-warning">
772 <span class="input-group-addon">qz isolation / activation <i class="fa fa-question-circle" title="if IT"></i> <small>(no unit)</small></span>
773 <input
774 id="add1spectrum-peaksMS-qzIsolation-{{ TAB_INDEX_PLACEHOLDER }}"
775 type="text"
776 class="disabled-if-ms-in-msms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset"
777 placeholder="e.g. ..."
778 />
779 </div>
780 <div class="form-group input-group col-lg-4 has-warning">
781 <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>
782 <input
783 id="add1spectrum-peaksMS-activationTime-{{ TAB_INDEX_PLACEHOLDER }}"
784 type="text"
785 class="disabled-if-ms-in-msms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset"
786 placeholder="e.g. ..."
787 />
788 </div>
789 <div class="form-group input-group col-lg-4 has-success">
790 <span class="input-group-addon">
791 Mode <i class="fa fa-question-circle" title="HCD / CID / ECD /ETD"></i>
792 </span>
793 <select
794 id="add1spectrum-peaksMS-mode-{{ TAB_INDEX_PLACEHOLDER }}"
795 class="disabled-if-ms-in-msms form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm is-optional"
796 >
797 <option value="" disabled="disabled">choose in list…</option>
798 <option value="HCD">HCD</option>
799 <option value="CID">CID</option>
800 <option value="ECD">ECD</option>
801 <option value="ETD">ETD</option>
802 </select>
803 </div>
804
805 <div class="form-group input-group col-lg-4 has-warning">
806 <span class="input-group-addon">
807 Frag. energy <i class="fa fa-question-circle" title="without unit"></i>
808 </span>
809 <input
810 id="add1spectrum-peaksMS-frag-nrj-{{ TAB_INDEX_PLACEHOLDER }}"
811 type="text"
812 class="disabled-if-ms-in-msms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional"
813 placeholder="e.g. ..."
814 >
815 </div>
816 </div>
817 <div class="col-lg-12">
818 <div class="form-group input-group col-lg-4 has-warning">
819 <span class="input-group-addon">
820 Resolution FWHM <small>(resolution@mass)</small>
821 </span>
822 <input
823 id="add1spectrum-analyzer-ms-resolutionFWHM-{{ TAB_INDEX_PLACEHOLDER }}"
824 type="text"
825 class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional"
826 placeholder="e.g. 6500@1000"
827 />
828 </div>
829 <div class="form-group input-group col-lg-4 has-error">
830 <span class="input-group-addon">
831 m/z range <small>(ppm) from / to</small>
832 </span>
833 <input
834 style="width: 100px;"
835 id="add1spectrum-peaksMS-rangeFrom-{{ TAB_INDEX_PLACEHOLDER }}"
836 type="text"
837 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory"
838 placeholder="50"
839 value="{{ DEFAULT_MIN_MZ }}"
840 />
841 <input
842 style="width: 100px;"
843 id="add1spectrum-peaksMS-rangeTo-{{ TAB_INDEX_PLACEHOLDER }}"
844 type="text"
845 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory"
846 placeholder="500"
847 value="{{ DEFAULT_MAX_MZ }}"
848 />
849 </div>
850 <div class="form-group input-group col-lg-4 has-error">
851 <span class="input-group-addon">
852 retention time (min) <small>from / to</small>
853 </span>
854 <input
855 style="width: 100px;"
856 id="add1spectrum-peaksMS-rtMinFrom-{{ TAB_INDEX_PLACEHOLDER }}"
857 type="text"
858 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory"
859 placeholder="0.9"
860 value="{{ DEFAULT_MIN_RT }}"
861 />
862 <input
863 style="width: 100px;"
864 id="add1spectrum-peaksMS-rtMinTo-{{ TAB_INDEX_PLACEHOLDER }}"
865 type="text"
866 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory"
867 placeholder="1.4"
868 value="{{ DEFAULT_MAX_RT }}"
869 />
870 </div>
871 </div>
872 <div class="col-lg-12">
873 <div class="form-group input-group col-lg-4 has-warning">
874 <span class="input-group-addon">
875 retention time (% solvant) <small>from / to</small>
876 </span>
877 <input
878 style="width: 100px;"
879 id="add1spectrum-peaksMS-rtSolvFrom-{{ TAB_INDEX_PLACEHOLDER }}"
880 type="text"
881 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-optional"
882 placeholder="??"
883 />
884 <input
885 style="width: 100px;"
886 id="add1spectrum-peaksMS-rtSolvTo-{{ TAB_INDEX_PLACEHOLDER }}"
887 type="text"
888 class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-optional"
889 placeholder="??"
890 />
891 </div>
892 <div class="col-lg-4">&nbsp;</div>
893 <div class="col-lg-4">&nbsp;</div>
894 </div>
895 <div class="col-xs-12 col-lg-12">
896 <ul class="nav nav-tabs" style="margin-bottom: 15px;display: block;">
897 {{ TAB_LIST_PLACEHOLDER }}
898 </ul>
899 <div class="tab-content">
900 {{ ADD_SPECTRUM_FORM }}
901 </div>
902 </div>
903 <div class="col-lg-12">
904 <div class="col-lg-8">
905 <button
906 class="btn btn-success add1spectrum"
907 onclick="$('#add1spectrum-peaksMS-msPrecursorIon-{{ TAB_INDEX_PLACEHOLDER }}').change()"
908 >check</button>
909 <button
910 id="btnSwitch-gotoStep5-ms-{{ TAB_INDEX_PLACEHOLDER }}"
911 onclick="$('#open_tab_1').click();setTimeout(()=>ctx().switchToStep(5), 100);"
912 class="btn switchStep btn-primary"
913 ><i class="fa fa-arrow-circle-down"></i> Next!</button>
914 <br>
915 <br>
916 </div>
917 <div class="col-lg-4">&nbsp;</div>
918 </div>
919 </div>
920 </div>
921 </div>
922
923
924 <div
925 id="add1spectrum-otherData-{{ TAB_INDEX_PLACEHOLDER }}"
926 class="panel panel-default"
927 style="display: none;"
928 >
929 <div class="panel-heading panel-success">
930 <h4 class="panel-title">
931 <a id="linkActivateStep5-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step5-{{ TAB_INDEX_PLACEHOLDER }}">
932 Other <i id="step5sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i>
933 </a>
934 </h4>
935 </div>
936 <div id="step5-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse">
937 <div class="panel-body">
938 <div class="col-lg-12">
939 <div class="col-lg-6">
940 <div class="panel panel-default">
941 <div class="panel-heading">
942 <h3 class="panel-title">Ownership</h3>
943 </div>
944 <div class="panel-body">
945 <div class="form-group input-group has-error">
946 <span class="input-group-addon">data author(s)</span>
947 <input
948 id="add1spectrum-other-author-{{ TAB_INDEX_PLACEHOLDER }}"
949 type="text"
950 class="form-control add1spectrum add1spectrum-otherForm is-mandatory"
951 placeholder="enter your lab. / plateforme name"
952 value=""
953 />
954 </div>
955 <div class="form-group input-group has-warning">
956 <span class="input-group-addon">data validator(s)</span>
957 <input
958 id="add1spectrum-other-validator-{{ TAB_INDEX_PLACEHOLDER }}"
959 type="text"
960 class="form-control add1spectrum add1spectrum-otherForm is-optional"
961 placeholder="name of the personne who checked all data in this file"
962 />
963 </div>
964 <div class="form-group input-group has-warning">
965 <span class="input-group-addon">acquisition date</span>
966 <input
967 id="add1spectrum-other-date-{{ TAB_INDEX_PLACEHOLDER }}"
968 data-date-format="yyyy-mm-dd"
969 type="text"
970 class="form-control add1spectrum add1spectrum-otherForm datepicker is-optional"
971 value=""
972 placeholder="2022-11-04"
973 />
974 </div>
975 <div class="form-group input-group has-warning">
976 <span class="input-group-addon">data ownership</span>
977 <input
978 id="add1spectrum-other-owner-{{ TAB_INDEX_PLACEHOLDER }}"
979 type="text"
980 class="form-control add1spectrum add1spectrum-otherForm is-optional"
981 placeholder="enter your lab. / plateforme name &amp; sample provider;"
982 />
983 </div>
984 </div>
985 </div>
986 </div>
987 <div class="col-lg-6">
988 <div class="panel panel-default">
989 <div class="panel-heading">
990 <h3 class="panel-title">Raw File</h3>
991 </div>
992 <div class="panel-body">
993 <div class="form-group input-group has-warning">
994 <span class="input-group-addon">raw file name</span>
995 <input
996 id="add1spectrum-other-fileName-{{ TAB_INDEX_PLACEHOLDER }}"
997 type="text"
998 class="form-control add1spectrum add1spectrum-otherForm is-optional"
999 placeholder="needed to retrieve file later"
1000 />
1001 </div>
1002 <div class="form-group input-group has-warning">
1003 <span class="input-group-addon">raw file size (Ko)</span>
1004 <input
1005 id="add1spectrum-other-fileSize-{{ TAB_INDEX_PLACEHOLDER }}"
1006 type="text"
1007 class="form-control add1spectrum add1spectrum-otherForm is-optional"
1008 placeholder="optional, to check if the file is correct"
1009 />
1010 </div>
1011 </div>
1012 </div>
1013 </div>
1014 </div>
1015 <div class="col-lg-12">
1016 <div class="col-lg-8">
1017 <br>
1018 <button
1019 id="btnSwitch-gotoStep6-{{ TAB_INDEX_PLACEHOLDER }}"
1020 onclick="ctx().switchToStep(6);"
1021 class="btn btn-disabled switchStep"
1022 disabled=""
1023 >
1024 <i class="fa fa-arrow-circle-right"></i> Validate this compound/mix!
1025 </button>
1026 <span
1027 id="import1SpectrumLoadingBare-{{ TAB_INDEX_PLACEHOLDER }}"
1028 style="display: none;"><img
1029 src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/img/ajax-loader.gif"
1030 title="please wait"
1031 ></span>
1032 <span
1033 id="import1SpectrumResults-{{ TAB_INDEX_PLACEHOLDER }}"
1034 style="display: none;"
1035 >
1036 <button
1037 id="btnSwitch-view-{{ TAB_INDEX_PLACEHOLDER }}"
1038 data-toggle="modal"
1039 data-target="#modalShowSpectra-{{ TAB_INDEX_PLACEHOLDER }}"
1040 class="btn btn-success"
1041 >
1042 <i class="fa fa-eye"></i> View spectrum
1043 </button>
1044 <button
1045 id="btnSwitch-returntoStep3-{{ TAB_INDEX_PLACEHOLDER }}"
1046 onclick="ctx().switchToStep(3);"
1047 class="btn btn-primary"
1048 >
1049 <i class="fa fa-arrow-circle-up"></i> Add new peaklist!
1050 </button>
1051 </span>
1052 </div>
1053 <div class="col-lg-4">
1054 <br>
1055 <br>
1056 <br>
1057 </div>
1058 </div>
1059 <div class="col-lg-12">
1060 <div class="col-lg-8">
1061 <div
1062 id="alertBoxSubmitSpectrum-{{ TAB_INDEX_PLACEHOLDER }}"
1063 class="col-lg-6"
1064 ></div>
1065 </div>
1066 <div class="col-lg-4">&nbsp;</div>
1067 </div>
1068 </div>
1069 </div>
1070 </div>
1071 <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/dist/handsontable.full.min.js"></script>
1072 <link
1073 rel="stylesheet"
1074 media="screen"
1075 href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/dist/handsontable.full.min.css"
1076 >
1077 <link
1078 rel="stylesheet"
1079 media="screen"
1080 href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/bootstrap/handsontable.bootstrap.min.css"
1081 >
1082 <div
1083 class="modal"
1084 id="modalPickCompound-{{ TAB_INDEX_PLACEHOLDER }}"
1085 tabindex="-1"
1086 role="dialog"
1087 aria-labelledby="modalPickCompoundLabel-{{ TAB_INDEX_PLACEHOLDER }}"
1088 aria-hidden="true"
1089 >
1090 <div class="modal-dialog">
1091 <div class="modal-content">
1092 <div class="modal-header">
1093 <button
1094 type="button"
1095 class="close"
1096 data-dismiss="modal"
1097 aria-hidden="true"
1098 >×</button>
1099 <h4
1100 class="modal-title"
1101 id="modalPickCompoundLabel-{{ TAB_INDEX_PLACEHOLDER }}"
1102 >
1103 Pick a compound
1104 </h4>
1105 </div>
1106 <div class="modal-body">
1107 <div class="form-group input-group">
1108 <span class="input-group-addon">Compound Name</span>
1109 <input
1110 id="add-one-cc-s1-value-{{ TAB_INDEX_PLACEHOLDER }}"
1111 class="form-control"
1112 placeholder="e.g. Caffeine"
1113 type="text"
1114 />
1115 <span class="input-group-btn">
1116 <button
1117 class="btn btn-default"
1118 type="button"
1119 onclick="ctx().searchLocalCompound();"
1120 >
1121 <i class="fa fa-search"></i>
1122 </button>
1123 </span>
1124 </div>
1125 <div id="load-step-1-{{ TAB_INDEX_PLACEHOLDER }}" style="display: none;">
1126 <img src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/img/ajax-loader.gif" title="please wait">
1127 </div>
1128 <div
1129 id="ok-step-1-{{ TAB_INDEX_PLACEHOLDER }}"
1130 style="overflow: auto; max-height: 300px;"
1131 ></div>
1132 </div>
1133 <div class="modal-footer">
1134 <button
1135 type="button"
1136 class="btn btn-danger"
1137 data-dismiss="modal"
1138 onclick="ctx().clearLine()"
1139 >
1140 <i class="fa fa-eraser"></i> Clear
1141 </button>
1142 <button
1143 type="button"
1144 class="btn btn-default"
1145 data-dismiss="modal"
1146 >Fermer</button>
1147 </div>
1148 </div>
1149 </div>
1150 </div>
1151 <div
1152 class="modal "
1153 id="modalShowSpectra-{{ TAB_INDEX_PLACEHOLDER }}"
1154 tabindex="-1"
1155 role="dialog"
1156 aria-labelledby="modalShowSpectraLabel-{{ TAB_INDEX_PLACEHOLDER }}"
1157 aria-hidden="true"
1158 >
1159 <div class="modal-dialog">
1160 <div class="modal-content">
1161 <div class="modal-header">
1162 <button
1163 type="button"
1164 class="close"
1165 data-dismiss="modal"
1166 aria-hidden="true"
1167 >×</button>
1168 <h4
1169 class="modal-title"
1170 id="modalShowSpectraLabel-{{ TAB_INDEX_PLACEHOLDER }}"
1171 >Modal title</h4>
1172 </div>
1173 <div class="modal-body">
1174 <div class="te"></div>
1175 </div>
1176 <div class="modal-footer">
1177 </div>
1178 </div>
1179 </div>
1180 </div>
1181 </div>
1182 </div>
1183 </div>
1184 <div>
1185 <button
1186 onclick="send_everything_to_peakforest('{{ PF_URL_PLACEHOLDER }}', '{{ PF_TOKEN_PLACEHOLDER }}')"
1187 class="btn btn-success"
1188 >
1189 <i class="fa fa-arrow-circle-right"></i>
1190 Send everything to peakforest!
1191 </button>
1192 <button class="btn btn-validate" onclick="ctx().exit()">
1193 Close MS2PF
1194 </button>
1195 </div>
1196 <script
1197 type="text/javascript"
1198 src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/jqueryform/2.8/jquery.form.min.js"
1199 ></script>
1200 <script
1201 src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/js/md5.min.js"
1202 ></script>
1203 </div>
1204 <nav class="navbar navbar-default navbar-fixed-bottom navbar-inverse navbar-main" role="navigation">
1205 <div class="navbar-header navbar-inverse footer">
1206 <ul id="ul-info-footer" class="nav navbar-nav">
1207 <li class="li-info-footer"><a id="linkcontact" href="mailto:contact@peakforest.org?subject=%5Babout%20peakforest%20webapp%5D">Contact</a></li>
1208 <li class="li-info-footer">
1209 <a id="about-peakforest" href="about-peakforest" data-toggle="modal" data-target="#modalAbout">À propos</a>
1210 </li>
1211 <li class="li-info-footer">
1212 <a href="https://peakforest.org/mypeakforest" target="_blank">Ma PeakForest</a>
1213 </li>
1214 <li class="li-info-footer">
1215 <a href="http://metabohub.fr" target="_blank">metaboHUB</a>
1216 </li>
1217 </ul>
1218 </div>
1219 </nav>
1220 <div
1221 class="modal"
1222 id="modalAbout"
1223 tabindex="-1"
1224 role="dialog"
1225 aria-labelledby="modalAboutLabel"
1226 aria-hidden="true"
1227 >
1228 <div class="modal-dialog">
1229 <div class="modal-content">
1230 <div class="modal-header">
1231 <button
1232 type="button"
1233 class="close"
1234 data-dismiss="modal"
1235 aria-hidden="true"
1236 >×</button>
1237 <h4 class="modal-title" id="modalAboutLabel">À propos de la Base de Données PeakForest</h4>
1238 </div>
1239 <div class="modal-body">
1240 <div class="te"></div>
1241 </div>
1242 <div class="modal-footer">
1243 </div>
1244 </div>
1245 </div>
1246 </div>
1247 <div
1248 class="modal"
1249 id="modalMyPeakForest"
1250 tabindex="-1"
1251 role="dialog"
1252 aria-labelledby="modalMyPFLabel"
1253 aria-hidden="true"
1254 >
1255 <div class="modal-dialog">
1256 <div class="modal-content">
1257 <div class="modal-header">
1258 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
1259 <h4 class="modal-title" id="modalAboutLabel">Ma base de Données PeakForest</h4>
1260 </div>
1261 <div class="modal-body">
1262 <div class="te"></div>
1263 </div>
1264 <div class="modal-footer">
1265 </div>
1266 </div>
1267 </div>
1268 </div>
1269 {{ EMBED_JS }}
1270 <script type="text/javascript">context = context_1 ;</script>
1271 </body>
1272 </html>