185 lines
5.5 KiB
HTML
185 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Pélican</title>
|
||
<link rel="stylesheet" href="bootstrap.min.css">
|
||
<link rel="stylesheet" href="main.css" type="text/css" media="screen">
|
||
<script src="jquery-3.6.0.min.js"></script>
|
||
<script src="bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
$(document).ready(function() {
|
||
$("#modal1").show();
|
||
$("#success").click(function(){
|
||
$("#modal1").show();
|
||
$.get("/on",function(data) {
|
||
<!-- console.log(data); -->
|
||
<!-- $("#result").html(data); -->
|
||
});
|
||
});
|
||
|
||
$("#send").click(function(){
|
||
//event.preventDefault();
|
||
console.log($("#alpha").val());
|
||
$("#modal1").hide();
|
||
$.get("/set?alpha="+$("#alpha").val(),function(data) {
|
||
<!-- $("#result").html(data); -->
|
||
});
|
||
});
|
||
|
||
|
||
$("#Submit").click(function(){
|
||
//event.preventDefault()
|
||
|
||
if (isNaN($('#alpha').val()) == true || !$('#alpha').val()) {
|
||
alert('Alpha Haut invalide!');
|
||
return;
|
||
}
|
||
if (isNaN($('#alphaLV').val()) == true || !$('#alphaLV').val()) {
|
||
alert('Alpha bas invalide!');
|
||
return;
|
||
}
|
||
if (isNaN($('#beta').val()) == true || !$('#beta').val()) {
|
||
alert('beta Haut invalide!');
|
||
return;
|
||
}
|
||
if (isNaN($('#betaLV').val()) == true || !$('#betaLV').val()) {
|
||
alert('beta bas invalide!');
|
||
return;
|
||
}
|
||
$('#Run').prop("disabled", false);
|
||
$('#volume').prop("disabled", false);
|
||
$('#volume').prop("max", $('#selectpip').val());
|
||
$('#volume').prop("value", (($('#selectpip').val())/2));
|
||
$("#volumemax").text($('#selectpip').val());
|
||
|
||
|
||
if ($('#selectpip').val() == 10 ){
|
||
$('#volume').prop("min", 0);
|
||
$('#volume').prop("step", 1);
|
||
}
|
||
if ($('#selectpip').val() == 50 ){
|
||
$('#volume').prop("min", 0);
|
||
$('#volume').prop("step", 5);
|
||
}
|
||
if ($('#selectpip').val() == 1000 ){
|
||
$('#volume').prop("min", 0);
|
||
$('#volume').prop("step", 10);
|
||
}
|
||
if ($('#selectpip').val() == 200 ){
|
||
$('#volume').prop("min", 0);
|
||
$('#volume').prop("step", 10);
|
||
}
|
||
|
||
});
|
||
|
||
|
||
|
||
$("input[name=flexRadioDefault]").change(function () {
|
||
$('#selectpip').prop("disabled", false);
|
||
$('#selectpip').empty()
|
||
$('#selectpip').append('<option selected>Choix de la pipette</option>');
|
||
$('#Run').prop("disabled", true);
|
||
$('#volume').prop("disabled", true);
|
||
|
||
if(this.value == "P1")
|
||
{
|
||
$('#selectpip').append('<option value="10">10µl</option>');
|
||
$('#selectpip').append('<option value="50">50µl</option>');
|
||
$('#selectpip').append('<option value="200">200µl</option>');
|
||
$('#selectpip').append('<option value="1000">1000µl</option>');
|
||
}
|
||
else if(this.value == "P8")
|
||
{
|
||
$('#selectpip').append('<option value="10">10µl</option>');
|
||
$('#selectpip').append('<option value="200">200µl</option>');
|
||
}
|
||
});
|
||
|
||
$("#selectpip").on('change', function() {
|
||
$('#Run').prop("disabled", true);
|
||
$('#volume').prop("disabled", true);
|
||
});
|
||
|
||
$("#volume").on('input',function () {
|
||
if(($("#volume").val()) == 0){
|
||
$("#volumevoulu").text("1");
|
||
}else{
|
||
$("#volumevoulu").text($("#volume").val());
|
||
}
|
||
|
||
});
|
||
|
||
|
||
});
|
||
</script>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<!-- The Modal -->
|
||
<div class="modal" id="modal1">
|
||
<div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
|
||
<div class="modal-content">
|
||
<!-- Modal Header -->
|
||
<div class="modal-header">
|
||
<img id="logo" src="logo-primadiag.svg">
|
||
</div>
|
||
<!-- Modal body -->
|
||
<div class="modal-body" >
|
||
<h6>
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" id="p1" value="P1">
|
||
<label class="form-check-label" for="flexRadioDefault1" >
|
||
Pipette 1 voie
|
||
</label>
|
||
</br>
|
||
<input class="form-check-input" type="radio" name="flexRadioDefault" value="P8" id="p8">
|
||
<label class="form-check-label" for="flexRadioDefault2">
|
||
Pipette 8 voie <br>
|
||
</label>
|
||
</h6>
|
||
<h5>
|
||
|
||
<select id="selectpip" class="form-select" aria-label="Default select example" disabled>
|
||
<option selected>Choix de la pipette</option>
|
||
</select>
|
||
|
||
|
||
<hr>
|
||
|
||
<h6>
|
||
</br>
|
||
<p class="text-center" >α high volume :
|
||
<input id="alpha" type="text">
|
||
<class="text-center">α low volume :
|
||
<input id="alphaLV" type="text">
|
||
</p>
|
||
<p class="text-center">β high volume :
|
||
<input id="beta" type="text">
|
||
<class="text-center">β low volume:
|
||
<input id="betaLV" type="text"></p>
|
||
</br>
|
||
</h5>
|
||
<div class="d-grid gap-2">
|
||
<button id="Submit" type="button" class="btn btn-success btn-lg btn-block"><h5>Submit</h5></button>
|
||
</div>
|
||
</br>
|
||
<hr>
|
||
<p class="text-center">Volume voulu</label></p>
|
||
<p id="volumemin" class="text-center" >0
|
||
<input type="range" class="form-range" id="volume" oninput="this.nextElementSibling.value = this.value" disabled>
|
||
<class="text-center" id="volumemax" >1000</p>
|
||
<p id="volumevoulu" class="text-center" >0</p>
|
||
<div class="d-grid gap-2">
|
||
<button id="Run" type="button" class="btn btn-success btn-lg btn-block" disabled><h5> Run </h5></button>
|
||
</div>
|
||
</br>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|