Mercurial > repos > lain > ms_to_peakforest_it
diff src/compound-ref.html @ 1:7e3085fc60c1 draft default tip
master branch Updating
| author | lain |
|---|---|
| date | Wed, 30 Aug 2023 14:21:18 +0000 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/compound-ref.html Wed Aug 30 14:21:18 2023 +0000 @@ -0,0 +1,661 @@ + <div class="tab-pane fade {{ ACTIVE_TAB_PLACEHOLDER }} in" id="tab-index-{{ TAB_INDEX_PLACEHOLDER }}"> + <div class="panel-group" id="accordion-{{ TAB_INDEX_PLACEHOLDER }}"> + <div class="panel panel-default"> + <div class="panel-heading panel-success"> + <h4 class="panel-title"> + <a data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step0-{{ TAB_INDEX_PLACEHOLDER }}"> + Spectrum Type <i id="step0sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i> + </a> + </h4> + </div> + <div id="step0-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse in"> + <div class="panel-body"> + <button class="btn btn-disabled" disabled="disabled"><i class="fa fa-plus-circle"></i> GC-MS spectrum</button> + <button id="set_LC_MS_spectrum_button" class="btn btn-primary" onclick="ctx().addOneSpectrum(2);"><i class="fa fa-plus-circle"></i> LC-MS spectrum</button> + <button id="set_LC_MSMS_spectrum_button" class="btn btn-primary" onclick="ctx().addOneSpectrum(5);"><i class="fa fa-plus-circle"></i> LC-MSMS spectrum</button> + </div> + </div> + </div> + <div id="add1spectrum-sampleData-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;"> + <div class="panel-heading panel-success"> + <h4 class="panel-title"> + <a id="linkActivateStep1-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step1-{{ TAB_INDEX_PLACEHOLDER }}"> + Sample Type <i id="step1sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i> + </a> + </h4> + </div> + <div id="step1-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse"> + <div class="panel-body"> + <div class="col-lg-12"> + <div class="col-lg-8"> + <div class="panel panel-default"> + <div class="panel-heading"> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Sample Type</span> + <select id="add1spectrum-sample-type-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-sampleForm is-mandatory"> + <option value="" selected="selected" disabled="disabled">choose in list…</option> + <option value="compound-ref">Ref. Chemical Compound</option> + </select> + </div> + </div> + <div class="panel-body"> + <div id="add1spectrum-sample-type-compound-ref-{{ TAB_INDEX_PLACEHOLDER }}" class="add1spectrum-sample-type-panel" style="display:none;"> + <div class="form-group input-group has-error"> + <span class="input-group-addon">InChIKey</span> + <input id="add1spectrum-sample-inchikey-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="pickChemicalCompound form-control add1spectrum add1spectrum-sampleForm is-mandatory" placeholder="e.g. RYYVLZVUVIJVGH-UHFFFAOYSA-N"> + <span class="input-group-btn"> + <button class="btn btn-default" type="button" onclick="ctx().pickChemicalCompound();"> + <i class="fa fa-search"></i> + </button> + </span> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">concentration <small>(mmol/L)</small></span> + <input id="add1spectrum-sample-concentration-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-sampleForm is-optional" placeholder="42"> + </div> + <div class="form-group input-group opt-ms has-warning" style="display: none;"> + <span class="input-group-addon">solvent</span> + <select id="add1spectrum-sample-lcmsSolvent-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-sampleForm is-optional"><option value="" selected="selected" disabled="disabled">choose in list…</option><option value="none" class="">none</option><option value="H2O" class="">H2O</option><option value="3/5 in H2O + 0.1% AF/ ACN + 0.1% AF (50/50, V/V)" class="">3/5 in H2O + 0.1% AF/ ACN + 0.1% AF (50/50, V/V)</option><option value="ACN/H2O (1/1, V/V)" class="">ACN/H2O (1/1, v/v)</option><option value="CH3OH/H2O (1/1, V/V)" class="">CH3OH/H2O (1/1, v/v)</option><option value="H2O/ACN (40/60)" class="">H2O/ACN (40/60)</option><option value="H2O/ACN (95/5)" class="">H2O/ACN (95/5)</option><option value="H20+0.1% FORMIC ACID / ACN+0.1% FORMIC ACID (50/50, V/V)" class="">H20+0.1% Formic Acid / ACN+0.1% Formic Acid (50/50, V/V)</option></select> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">InChI</span> + <input id="add1spectrum-sample-inchi-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="pickChemicalCompound form-control add1spectrum add1spectrum-sampleForm is-optional" placeholder="e.g. InChI=1S/C8H10N4O2/c1-10-4-9-6-5(10)7(13)12(3)8(14)11(6)2/h4H,1-3H3"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Molecule common name</span> + <input id="add1spectrum-sample-commonName-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="pickChemicalCompound form-control add1spectrum add1spectrum-sampleForm is-optional" placeholder="e.g. Caffeine"> + </div> + </div> + <div id="add1spectrum-sample-type-rcc-added-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default add1spectrum-sample-type-panel" style="display:none;"> + <div class="panel-heading"> + <h3 class="panel-title">Reference compound added</h3> + </div> + <div class="panel-body" style="padding: 0px;"> + <div id="container_RCC_ADDED-{{ TAB_INDEX_PLACEHOLDER }}" class="handsontable"></div> + </div> + </div> + </div> + </div> + </div> + <div class="col-lg-4"> + <div id="sample-bonus-display-{{ TAB_INDEX_PLACEHOLDER }}"></div> + + </div> + </div> + <div class="col-lg-12"> + <div class="col-lg-8"> + <br> + <button id="btnSwitch-gotoStep2-{{ TAB_INDEX_PLACEHOLDER }}" onclick="ctx().switchToStep(2);" class="btn btn-disabled switchStep" disabled=""><i class="fa fa-arrow-circle-down"></i> Next!</button> + </div> + <div class="col-lg-4"> </div> + </div> + </div> + </div> + </div> + <div id="add1spectrum-chromatographyData-LC-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;"> + <div class="panel-heading panel-success"> + <h4 class="panel-title"> + <a id="linkActivateStep2-lc-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step2-lc-{{ TAB_INDEX_PLACEHOLDER }}"> + Liquid Chromatography <i id="step2-lc-sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i> + </a> + </h4> + </div> + <div id="step2-lc-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse"> + <div class="panel-body"> + <div class="col-lg-12"> + <div class="col-lg-6"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Chromatography Param.</h3> + </div> + <div class="panel-body"> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Method</span> + <select + id="add1spectrum-chromatoLC-method-{{ TAB_INDEX_PLACEHOLDER }}" + class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" + ></select> + </div> + <div id="alertBoxSelectTemplate-{{ TAB_INDEX_PLACEHOLDER }}"></div> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Column constructor</span> + <select id="add1spectrum-chromatoLC-colConstructor-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"><option value="" selected="selected" disabled="disabled">choose in list…</option><option value="Agilent">Agilent</option><option value="alltech">Alltech</option><option value="CIL cluzeau">Cil cluzeau</option><option value="Daicel">Daicel</option><option value="Hypersil">Hypersil</option><option value="Interchim">Interchim</option><option value="Macherey nagel">Macherey nagel</option><option value="Merck">Merck</option><option value="Phenomenex">Phenomenex</option><option value="Shiseido">Shiseido</option><option value="Supelco (sigma-aldrich)">Supelco (sigma-aldrich)</option><option value="Thermo">Thermo</option><option value="Vydac">Vydac</option><option value="Waters">Waters</option><option value="YMC">YMC</option><option value="other">Other</option></select> + </div> + <div class="form-group input-group "> + <span class="input-group-addon">Column constructor (other)</span> + <input id="add1spectrum-chromatoLC-colConstructorOther-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm" disabled="disabled" placeholder="e.g. HAL 9000"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Column name</span> + <input id="add1spectrum-chromatoLC-colName-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. UPLC HSS T3"> + </div> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Column length (mm)</span> + <input id="add1spectrum-chromatoLC-colLength-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 150"> + </div> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Column diameter (mm)</span> + <input id="add1spectrum-chromatoLC-colDiameter-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 2.1"> + </div> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Particule size (µm)</span> + <input id="add1spectrum-chromatoLC-colParticuleSize-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory" placeholder="e.g. 1.8"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Column temperature (°C)</span> + <input id="add1spectrum-chromatoLC-colTemperature-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 30"> + </div> + <div class="form-group input-group has-error"> + <span class="input-group-addon">LC mode</span> + <select id="add1spectrum-chromatoLC-LCMode-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"> + <option value="" selected="selected" disabled="disabled">choose in list…</option> + <option value="Gradient">Gradient</option> + <option value="Isocratic">Isocratic</option> + </select> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Separation flow rate (µL/min)</span> + <input id="add1spectrum-chromatoLC-separationFlowRate-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 400"> + </div> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Separation solvent A</span> + <select id="add1spectrum-chromatoLC-separationSolvA-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"><option value="" selected="selected" disabled="disabled">choose in list…</option><option value="5% ACN + 0.1% FA in H2O">5% ACN + 0.1% FA in H2O</option><option value="10% ACN + 0.1% FA in H2O">10% ACN + 0.1% FA in H2O</option><option value="10mM (NH4)2CO3 / ACN (20/80) (v/v)">10mM (NH4)2CO3 / ACN (20/80) (v/v)</option><option value="Acetonitrile">Acetonitrile</option><option value="Acetonitrile + 0.1% Formic Acid">Acetonitrile + 0.1% Formic Acid</option><option value="H2O + 0.1% Formic Acid">H2O + 0.1% Formic Acid</option><option value="H2O, ammonium carbonate 10 mM, pH10.5">H2O, ammonium carbonate 10 mM, pH10.5</option><option value="H2O, ammonium acetate 2.5 mM">H2O, ammonium acetate 2.5 mM</option><option value="H2O / CH3OH / CH3CO2H (95/5/0.1)">H2O / CH3OH / CH3CO2H (95/5/0.1)</option><option value="Methanol">Methanol</option><option value="Methanol / H2O (1/1)">Methanol / H2O (1/1)</option><option value="Methanol / H2O (1/1), 0.1% FA">Methanol / H2O (1/1), 0.1% FA</option><option value="Methanol / CH3CO2H (100/0.1)">Methanol / CH3CO2H (100/0.1)</option><option value="Methanol / ACN (60/40) ammonium acetate 2.5 mM">Methanol / ACN (60/40) ammonium acetate 2.5 mM</option></select> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">pH solvent A (if acqueous solvant)</span> + <input id="add1spectrum-chromatoLC-separationSolvApH-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 7.0"> + </div> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Separation solvent B</span> + <select id="add1spectrum-chromatoLC-separationSolvB-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-chromatoLCForm is-mandatory"><option value="" selected="selected" disabled="disabled">choose in list…</option><option value="5% ACN + 0.1% FA in H2O">5% ACN + 0.1% FA in H2O</option><option value="10% ACN + 0.1% FA in H2O">10% ACN + 0.1% FA in H2O</option><option value="10mM (NH4)2CO3 / ACN (20/80) (v/v)">10mM (NH4)2CO3 / ACN (20/80) (v/v)</option><option value="Acetonitrile">Acetonitrile</option><option value="Acetonitrile + 0.1% Formic Acid">Acetonitrile + 0.1% Formic Acid</option><option value="H2O + 0.1% Formic Acid">H2O + 0.1% Formic Acid</option><option value="H2O, ammonium carbonate 10 mM, pH10.5">H2O, ammonium carbonate 10 mM, pH10.5</option><option value="H2O, ammonium acetate 2.5 mM">H2O, ammonium acetate 2.5 mM</option><option value="H2O / CH3OH / CH3CO2H (95/5/0.1)">H2O / CH3OH / CH3CO2H (95/5/0.1)</option><option value="Methanol">Methanol</option><option value="Methanol / H2O (1/1)">Methanol / H2O (1/1)</option><option value="Methanol / H2O (1/1), 0.1% FA">Methanol / H2O (1/1), 0.1% FA</option><option value="Methanol / CH3CO2H (100/0.1)">Methanol / CH3CO2H (100/0.1)</option><option value="Methanol / ACN (60/40) ammonium acetate 2.5 mM">Methanol / ACN (60/40) ammonium acetate 2.5 mM</option></select> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">pH solvent B (if acqueous solvant)</span> + <input id="add1spectrum-chromatoLC-separationSolvBApH-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-chromatoLCForm is-optional" placeholder="e.g. 7.0"> + </div> + </div> + </div> + </div> + <div class="col-lg-6"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Separation flow gradient</h3> + </div> + <div class="panel-body" style="padding: 0px;"> + <div id="container_LC_SFG-{{ TAB_INDEX_PLACEHOLDER }}" class="handsontable"></div> + </div> + </div> + </div> + </div> + <div class="col-lg-12"> + <div class="col-lg-8"> + <br> + <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> + </div> + <div class="col-lg-4"> </div> + </div> + </div> + </div> + </div> + <div id="add1spectrum-chromatographyData-GC-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;"> + <div class="panel-heading panel-success"> + <h4 class="panel-title"> + <a id="linkActivateStep2-gc-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step2-gc-{{ TAB_INDEX_PLACEHOLDER }}"> + Gaz Chromatography <i id="step2-gc-sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i> + </a> + </h4> + </div> + <div id="step2-gc-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse"> + <div class="panel-body"> + <div class="col-lg-12"> + <div class="col-lg-6"> + i <3 GC + </div> + <div class="col-lg-6"> </div> + </div> + <div class="col-lg-12"> + <div class="col-lg-8"> + <br> + <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> + </div> + <div class="col-lg-4"> </div> + </div> + </div> + </div> + </div> + <div id="add1spectrum-analyserData-MS-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;"> + <div class="panel-heading panel-success"> + <h4 class="panel-title"> + <a id="linkActivateStep3-ms-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step3-ms-{{ TAB_INDEX_PLACEHOLDER }}"> + MS Analyzer <i id="step3-ms-sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i> + </a> + </h4> + </div> + <div id="step3-ms-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse"> + <div class="panel-body"> + <div class="col-lg-12"> + <div class="col-lg-6"> + <br> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Analyzer</h3> + </div> + <div class="panel-body"> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Instrument</span> + <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"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Model</span> + <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; ..."> + </div> + <div class="form-group"> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Ion analyzer Type</span> + <input id="add1spectrum-analyzer-ms-ionAnalyzerType-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory" placeholder="e.g. QTOF; QQQ; ..."> + </div> + <p class="help-block"> + <small> + 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"); + 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>. + </small> + </p> + </div> + </div> + </div> + </div> + <div class="col-lg-6"> + <br> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Molecule Ionization</h3> + </div> + <div class="panel-body"> + <div class="form-group input-group has-error"> + <span class="input-group-addon">Ionization method <small>(POS/NEG)</small></span> + <select id="add1spectrum-analyzserMS-ionizationMethod-pos-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory one-or-more"> + <option value="" selected="selected" disabled="disabled">choose in list… (POS)</option> + <option value="ACPI">ACPI</option><option value="APPI">APPI</option><option value="EI">EI</option><option value="ESI">ESI</option><option value="FAB">FAB</option><option value="MALDI">MALDI</option></select> + <select id="add1spectrum-analyzserMS-ionizationMethod-neg-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" class="form-control add1spectrum add1spectrum-analyzerMSForm is-mandatory one-or-more"> + <option value="" selected="selected" disabled="disabled">choose in list… (NEG)</option> + <option value="ACPI">ACPI</option><option value="APPI">APPI</option><option value="EI">EI</option><option value="ESI">ESI</option><option value="FAB">FAB</option><option value="MALDI">MALDI</option></select> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Spray (needle) gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small></span> + <input id="add1spectrum-analyzserMS-sprayGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 40 (POS)"> + <input id="add1spectrum-analyzserMS-sprayGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 20 (NEG)"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Vaporizer gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small></span> + <input id="add1spectrum-analyzserMS-vaporizerGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 10 (POS)"> + <input id="add1spectrum-analyzserMS-vaporizerGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 5 (NEG)"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Vaporizer temperature <br><small>(°C, POS/NEG)</small></span> + <input id="add1spectrum-analyzserMS-vaporizerTemperature-pos-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 330 (POS)"> + <input id="add1spectrum-analyzserMS-vaporizerTemperature-neg-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 330 (NEG)"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Source gaz flow <br><small>(arbitrary in Xcalibur, POS/NEG)</small></span> + <input id="add1spectrum-analyzserMS-sourceGazFlow-pos-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 40 (POS)"> + <input id="add1spectrum-analyzserMS-sourceGazFlow-neg-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 40 (NEG)"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Ion transfer tube temperature <br> Transfer capillary temperature <small>(°C, POS/NEG)</small></span> + <input id="add1spectrum-analyzserMS-ionTransferTubeTemperatureOrTransferCapillaryTemperature-pos-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 350 (POS)"> + <input id="add1spectrum-analyzserMS-ionTransferTubeTemperatureOrTransferCapillaryTemperature-neg-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 350 (NEG)"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">High voltage (ESI) <br> Corona voltage (APCI) <small>(in kV, POS/NEG)</small></span> + <input id="add1spectrum-analyzserMS-highVoltageOrCoronaVoltage-pos-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 3.5 (POS)"> + <input id="add1spectrum-analyzserMS-highVoltageOrCoronaVoltage-neg-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g. 2.8 (NEG)"> + </div> + </div> + </div> + </div> + <div class="col-lg-6 opt-msms"> + <br> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Ion Storage / Ion Beam</h3> + </div> + <div class="panel-body"> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Type <small>(storage / beam)</small></span> + <select id="add1spectrum-ionTrapBeam-type-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional one-or-more"> + <option value="" selected="selected" disabled="disabled">choose in list…</option> + <option value="trap">Ion Trap</option> + <option value="beam">Ion Beam</option> + </select> + </div> + <p class="help-block"> + <small> + Ion storage: Ion Trap (IT) and ICR. + <br>Ion beam: Q or H collision Cell (QQQ, QQIT, QQ/TOF, Fusion). + </small> + </p> + <div class="form-group input-group has-success"> + <span class="input-group-addon">Gas </span> + <select id="add1spectrum-ionTrapBeam-ionGas-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional "> + <option value="He">He</option> + <option value="N2">N2</option> + <option value="Ar">Ar</option> + </select> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">Gas pressure</span> + <input id="add1spectrum-ionTrapBeam-ionGasPressureValue-{{ TAB_INDEX_PLACEHOLDER }}" type="text" style="max-width: 50%;" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional "> + <select id="add1spectrum-ionTrapBeam-ionGasPressureUnit-{{ TAB_INDEX_PLACEHOLDER }}" style="max-width: 50%;" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional "> + <option value="" selected="selected" disabled="disabled">choose in list…</option> + <option value="mbar">mbar</option> + <option value="au">a.u.</option> + </select> + </div> + <div class="form-group input-group add1spectrum-ionTrap has-warning"> + <span class="input-group-addon">Frequency Shift <small>(KHz)</small></span> + <input id="add1spectrum-ionTrapBeam-ionFrequencyShift-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g.: ..."> + </div> + <div class="form-group input-group add1spectrum-ionTrap has-warning"> + <span class="input-group-addon">Ion Number <small>(AGC or ICC)</small></span> + <input id="add1spectrum-ionTrapBeam-ionNumber-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-analyzerMSForm is-optional" placeholder="e.g.: ..."> + </div> + </div> + </div> + </div> + </div> + <div class="col-lg-12"> + <div class="col-lg-8"> + <br> + <button id="btnSwitch-gotoStep4-ms-{{ TAB_INDEX_PLACEHOLDER }}" onclick="ctx().switchToStep(4);" class="btn btn-disabled switchStep" disabled=""><i class="fa fa-arrow-circle-down"></i> Next!</button> + </div> + <div class="col-lg-4"> </div> + </div> + </div> + </div> + </div> + <div id="add1spectrum-peaksData-MS-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;"> + <div class="panel-heading panel-success"> + <h4 class="panel-title"> + <a id="linkActivateStep4-ms-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step4-ms-{{ TAB_INDEX_PLACEHOLDER }}"> + MS Peaks <i id="step4-ms-sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i> + </a> + </h4> + </div> + <div id="step4-ms-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse"> + <div class="panel-body"> + <div class="col-lg-12"> + <!-- + <div class="form-group input-group col-lg-3 has-success"> + <span class="input-group-addon">scan type</span> + <select style="width: 150px;" id="add1spectrum-peaksMS-msLevel-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"> + <option value="" disabled="disabled">choose in list…</option> + <option class="enable-if-ms" value="ms" selected="selected">ms</option> + <option class="enable-if-msms" value="ms2">ms2</option> + </select> + </div> + --> + <div class="form-group input-group col-lg-3 has-error"> + <span class="input-group-addon">polarity</span> + <select style="width: 150px;" id="add1spectrum-peaksMS-polarity-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"> + <option value="" selected="selected" disabled="disabled">choose in list…</option> + <option value="positive">positive</option> + <option value="negative">negative</option> + </select> + </div> + <div class="form-group input-group col-lg-3 has-error"> + <span class="input-group-addon">resolution</span> + <select style="width: 150px;" id="add1spectrum-peaksMS-resolution-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-mandatory"> + <option value="" disabled="disabled">choose in list…</option> + <option value="low">low</option> + <option selected="selected" value="high">high</option> + </select> + </div> + <div class="form-group input-group col-lg-3 has-success"> + <span class="input-group-addon">curation</span> + <select style="width: 150px;" id="add1spectrum-peaksMS-curation-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-optional"> + <option value="no_curation" selected="selected">no curation</option> + <option value="peaks_RI_sup_1percent">Peaks RI > 1%</option> + <option value="top_50_peaks">Top 50 peaks</option> + <option value="top_20_peaks">Top 20 peaks</option> + <option value="top_10_peaks">Top 10 peaks</option> + <option value="similar_chromatographic_profile">Similar chromatographic profile</option> + </select> + </div> + </div> + <br> + <div class="col-lg-12 opt-msms"> + <hr><!-- + <div class="form-group input-group col-lg-4 has-warning"> + <span class="input-group-addon">precursor spectrum</span> + <select style="width: 150px;" id="add1spectrum-peaksMS-msPrecursor-{{ TAB_INDEX_PLACEHOLDER }}" class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm-peaklist-reset add1spectrum-peaksMSForm is-optional"> + <option value="" disabled="disabled">choose in list…</option> + </select> + </div> --> + + <div class="form-group input-group col-lg-4 has-success"> + <span class="input-group-addon">Isolation mode <i class="fa fa-question-circle" title="IT / Q / TOF / ICR"></i></span> + <select id="add1spectrum-peaksMS-isolationMode-{{ TAB_INDEX_PLACEHOLDER }}" class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm is-optional add1spectrum-peaksMSForm-peaklist-reset"> + <option value="" disabled="disabled">choose in list…</option> + <option value="IT">IT</option> + <option value="Q">Q</option> + <option value="TOF">TOF</option> + <option value="ICR">ICR</option> + </select> + </div> + <div class="form-group input-group col-lg-4 has-warning"> + <span class="input-group-addon">Isolation window <i class="fa fa-question-circle" title="(+ / - value)"></i></span> + <input id="add1spectrum-peaksMS-isolationWindow-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset" placeholder="e.g. ..."> + </div> + <div class="form-group input-group col-lg-4 has-warning"> + <span class="input-group-addon">qz isolation / activation <i class="fa fa-question-circle" title="if IT"></i> <small>(no unit)</small></span> + <input id="add1spectrum-peaksMS-qzIsolation-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset" placeholder="e.g. ..."> + </div> + <div class="form-group input-group col-lg-4 has-warning"> + <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> + <input id="add1spectrum-peaksMS-activationTime-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional add1spectrum-peaksMSForm-peaklist-reset" placeholder="e.g. ..."> + </div> + <div class="form-group input-group col-lg-4 has-success"> + <span class="input-group-addon">Mode <i class="fa fa-question-circle" title="HCD / CID / ECD /ETD"></i></span> + <select id="add1spectrum-peaksMS-mode-{{ TAB_INDEX_PLACEHOLDER }}" class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist add1spectrum-peaksMSForm is-optional "> + <option value="" disabled="disabled">choose in list…</option> + <option value="HCD">HCD</option> + <option value="CID">CID</option> + <option value="ECD">ECD</option> + <option value="ETD">ETD</option> + </select> + </div> + + <div class="form-group input-group col-lg-4 has-warning"> + <span class="input-group-addon">Frag. energy <i class="fa fa-question-circle" title="without unit"></i> </span> + <input id="add1spectrum-peaksMS-frag-nrj-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="disabled-if-ms form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional" placeholder="e.g. ..."> + </div> + </div> + <div class="col-lg-12"> + <div class="form-group input-group col-lg-4 has-warning"> + <span class="input-group-addon">Resolution FWHM <small>(resolution@mass)</small></span> + <input id="add1spectrum-analyzer-ms-resolutionFWHM-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-optional" placeholder="e.g. 6500@1000"> + </div> + <div class="form-group input-group col-lg-4 has-error"> + <span class="input-group-addon">m/z range <small>(ppm) from / to</small></span> + <input style="width: 100px;" id="add1spectrum-peaksMS-rangeFrom-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory" placeholder="50" value="{{ DEFAULT_MIN_MZ }}"> + <input style="width: 100px;" id="add1spectrum-peaksMS-rangeTo-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory" placeholder="500" value="{{ DEFAULT_MAX_MZ }}"> + </div> + <div class="form-group input-group col-lg-4 has-error"> + <span class="input-group-addon">retention time (min) <small>from / to</small></span> + <input style="width: 100px;" id="add1spectrum-peaksMS-rtMinFrom-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory" placeholder="0.9" value="{{ DEFAULT_MIN_RT }}"> + <input style="width: 100px;" id="add1spectrum-peaksMS-rtMinTo-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-mandatory" placeholder="1.4" value="{{ DEFAULT_MAX_RT }}"> + </div> + </div> + <div class="col-lg-12"> + <div class="form-group input-group col-lg-4 has-warning"> + <span class="input-group-addon">retention time (% solvant) <small>from / to</small></span> + <input style="width: 100px;" id="add1spectrum-peaksMS-rtSolvFrom-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-optional" placeholder="??"> + <input style="width: 100px;" id="add1spectrum-peaksMS-rtSolvTo-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum-peaksMSForm-peaklist add1spectrum is-optional" placeholder="??"> + </div> + <div class="col-lg-4"> </div> + </div> + <div class="col-lg-12"> + <div class="col-lg-11"> + <br> + <ul class="nav nav-tabs" style="margin-bottom: 15px;"> + <li class="active"><a id="link-spectrum-peaklist-lcms-{{ TAB_INDEX_PLACEHOLDER }}" href="#spectrum-peaklist-lcms-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="tab"><i class="fa fa-table"></i> Peak List</a></li> + <li class=""><a id="link-spectrum-preview-lcms-{{ TAB_INDEX_PLACEHOLDER }}" href="#spectrum-preview-lcms-{{ TAB_INDEX_PLACEHOLDER }}" onclick="ctx().updateLCMSspectraViewer()" data-toggle="tab"><i class="fa fa-bar-chart-o"></i> Spectrum Preview</a></li> + </ul> + <div id="spectrum-signal-data-lcms-{{ TAB_INDEX_PLACEHOLDER }}" class="tab-content" style=""> + <div class="tab-pane fade active in" id="spectrum-peaklist-lcms-{{ TAB_INDEX_PLACEHOLDER }}"> + <div class="panel-body" style="padding: 0px;"> + <div id="container_MS_Peaks-{{ TAB_INDEX_PLACEHOLDER }}" class="handsontable col-lg-6" style="display: inline-block;"></div> + + <div class="form-group input-group col-lg-3 has-warning hidden-if-ms"> + <span class="input-group-addon">Precursor ion <small>(M/Z)</small><i class="fa fa-question-circle" title="2 digits of precision."></i></span> + <input id="add1spectrum-peaksMS-msPrecursorIon-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-peaksMSForm-peaklist is-mandatory add1spectrum-peaksMSForm-peaklist-reset displayed-if-msms" placeholder="e.g. 123.45"> + </div> + </div> + </div> + <div class="tab-pane fade" id="spectrum-preview-lcms-{{ TAB_INDEX_PLACEHOLDER }}"> + <div id="containter-lcms-spectrum-preview-{{ TAB_INDEX_PLACEHOLDER }}" style="width: 80%;"></div> + </div> + </div> + </div> + </div> + <div class="col-lg-12"> + <div class="col-lg-8"> + <button class="btn btn-success" onclick="$('#add1spectrum-peaksMS-msPrecursorIon-{{ TAB_INDEX_PLACEHOLDER }}').change()">check</button> + <button id="btnSwitch-gotoStep5-ms-{{ TAB_INDEX_PLACEHOLDER }}" onclick="ctx().switchToStep(5);" class="btn switchStep btn-primary"><i class="fa fa-arrow-circle-down"></i> Next!</button> + <br> + <br> + </div> + <div class="col-lg-4"> </div> + </div> + </div> + </div> + </div> + <div id="add1spectrum-otherData-{{ TAB_INDEX_PLACEHOLDER }}" class="panel panel-default" style="display: none;"> + <div class="panel-heading panel-success"> + <h4 class="panel-title"> + <a id="linkActivateStep5-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="collapse" data-parent="#accordion-{{ TAB_INDEX_PLACEHOLDER }}" href="#step5-{{ TAB_INDEX_PLACEHOLDER }}"> + Other <i id="step5sign-{{ TAB_INDEX_PLACEHOLDER }}" class="fa fa-question-circle"></i> + </a> + </h4> + </div> + <div id="step5-{{ TAB_INDEX_PLACEHOLDER }}" class="panel-collapse collapse"> + <div class="panel-body"> + <div class="col-lg-12"> + <div class="col-lg-6"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Ownership</h3> + </div> + <div class="panel-body"> + <div class="form-group input-group has-error"> + <span class="input-group-addon">data author(s)</span> + <input id="add1spectrum-other-author-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-otherForm is-mandatory" placeholder="enter your lab. / plateforme name" value=""> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">data validator(s)</span> + <input id="add1spectrum-other-validator-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-otherForm is-optional" placeholder="name of the personne who checked all data in this file"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">acquisition date</span> + <input id="add1spectrum-other-date-{{ TAB_INDEX_PLACEHOLDER }}" data-date-format="yyyy-mm-dd" type="text" class="form-control add1spectrum add1spectrum-otherForm datepicker is-optional" value="" placeholder="2022-11-04"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">data ownership</span> + <input id="add1spectrum-other-owner-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-otherForm is-optional" placeholder="enter your lab. / plateforme name & sample provider;"> + </div> + </div> + </div> + </div> + <div class="col-lg-6"> + <div class="panel panel-default"> + <div class="panel-heading"> + <h3 class="panel-title">Raw File</h3> + </div> + <div class="panel-body"> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">raw file name</span> + <input id="add1spectrum-other-fileName-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-otherForm is-optional" placeholder="needed to retrieve file later"> + </div> + <div class="form-group input-group has-warning"> + <span class="input-group-addon">raw file size (Ko)</span> + <input id="add1spectrum-other-fileSize-{{ TAB_INDEX_PLACEHOLDER }}" type="text" class="form-control add1spectrum add1spectrum-otherForm is-optional" placeholder="optional, to check if the file is correct"> + </div> + </div> + </div> + </div> + </div> + <div class="col-lg-12"> + <div class="col-lg-8"> + <br> + <button id="btnSwitch-gotoStep6-{{ TAB_INDEX_PLACEHOLDER }}" onclick="ctx().switchToStep(6);" class="btn btn-disabled switchStep" disabled=""><i class="fa fa-arrow-circle-right"></i> Validate this compound/mix!</button> + <!-- <button onclick="enable_tab({{ TAB_INDEX_PLACEHOLDER }})" class="btn btn-success"> + <i class="fa fa-arrow-circle-right"></i>Modify this compound/mix! + </button> --> + <span id="import1SpectrumLoadingBare-{{ TAB_INDEX_PLACEHOLDER }}" style="display: none;"><img src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/img/ajax-loader.gif" title="please wait"></span> + <span id="import1SpectrumResults-{{ TAB_INDEX_PLACEHOLDER }}" style="display: none;"> + <button id="btnSwitch-view-{{ TAB_INDEX_PLACEHOLDER }}" data-toggle="modal" data-target="#modalShowSpectra-{{ TAB_INDEX_PLACEHOLDER }}" class="btn btn-success"><i class="fa fa-eye"></i> View spectrum</button> + <button id="btnSwitch-returntoStep3-{{ TAB_INDEX_PLACEHOLDER }}" onclick="ctx().switchToStep(3);" class="btn btn-primary"><i class="fa fa-arrow-circle-up"></i> Add new peaklist!</button> + </span> + </div> + <div class="col-lg-4"><br><br><br></div> + </div> + <div class="col-lg-12"> + <div class="col-lg-8"> + <div id="alertBoxSubmitSpectrum-{{ TAB_INDEX_PLACEHOLDER }}" class="col-lg-6"></div> + </div> + <div class="col-lg-4"> </div> + </div> + </div> + </div> + </div> + </div> + <script src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/dist/handsontable.full.min.js"></script> + <link rel="stylesheet" media="screen" href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/dist/handsontable.full.min.css"> + <link rel="stylesheet" media="screen" href="{{ PF_URL_PLACEHOLDER }}/webapp/resources/handsontable/bootstrap/handsontable.bootstrap.min.css"> + </div> + <div class="modal" id="modalPickCompound-{{ TAB_INDEX_PLACEHOLDER }}" tabindex="-1" role="dialog" aria-labelledby="modalPickCompoundLabel-{{ TAB_INDEX_PLACEHOLDER }}" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title" id="modalPickCompoundLabel-{{ TAB_INDEX_PLACEHOLDER }}">Pick a compound</h4> + </div> + <div class="modal-body"> + <div class="form-group input-group"> + <span class="input-group-addon">Compound Name</span> + <input id="add-one-cc-s1-value-{{ TAB_INDEX_PLACEHOLDER }}" class="form-control" placeholder="e.g. Caffeine" type="text"> + <span class="input-group-btn"> + <button class="btn btn-default" type="button" onclick="ctx().searchLocalCompound();"> + <i class="fa fa-search"></i> + </button> + </span> + </div> + <div id="load-step-1-{{ TAB_INDEX_PLACEHOLDER }}" style="display: none;"> + <img src="{{ PF_URL_PLACEHOLDER }}/webapp/resources/img/ajax-loader.gif" title="please wait"> + </div> + <div id="ok-step-1-{{ TAB_INDEX_PLACEHOLDER }}" style="overflow: auto; max-height: 300px;"></div> + </div> + <div class="modal-footer"> + <button type="button" class="btn btn-danger" data-dismiss="modal" onclick="ctx().clearLine()"> + <i class="fa fa-eraser"></i> Clear + </button> + <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button> + </div> + </div> + </div> + </div> + <div class="modal " id="modalShowSpectra-{{ TAB_INDEX_PLACEHOLDER }}" tabindex="-1" role="dialog" aria-labelledby="modalShowSpectraLabel-{{ TAB_INDEX_PLACEHOLDER }}" aria-hidden="true"> + <div class="modal-dialog"> + <div class="modal-content"> + <div class="modal-header"> + <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> + <h4 class="modal-title" id="modalShowSpectraLabel-{{ TAB_INDEX_PLACEHOLDER }}">Modal title</h4> + </div> + <div class="modal-body"> + <div class="te"></div> + </div> + <div class="modal-footer"> + </div> + </div> + </div> + </div>