etouimi
/
SPAMAP-Web-App


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503
							<!DOCTYPE html>
<html lang="en">
<head>
	<title>SPAMAP</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="/computeDependencies/vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="/computeDependencies/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="/computeDependencies/vendor/animate/animate.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="/computeDependencies/vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="/computeDependencies/vendor/select2/select2.min.css">
<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="/computeDependencies/css/util.css">
	<link rel="stylesheet" type="text/css" href="/computeDependencies/css/main.css">
<!--===============================================================================================-->
</head>
<body>


	<div class="bg-contact3" style="background-image: url('/images/home-4.jpg');">
		<div class="container-contact3">
			<div class="wrap-contact3">
				<form class="contact3-form validate-form"
				ref="testForm"
				id="testForm"
				action="/compute"
				method="post"
				encType="multipart/form-data">
					<span class="contact3-form-title">
						S P A M A P
					</span>
					<br>
					<div class="label-ligne" data-validate="informations about Method">
						<hr width="50%" color="white" align=left size="4" style="margin-right: 10px;">
						<label class="label-title">Methods</label>
						<hr width="50%" color="white" align=right size="4" style="margin-left:10px;">
					</div><br>
					
					<div class="checks">
						<label class="label-parameters2"><input type="checkbox" id="constr">With Constraint
					  		<span class="checkmark"></span>
						</label>
					</div>
					<div class="checks" id="born">
						<label class="label-parameters2"><input type="checkbox" id="born2">Bounded
					  		<span class="checkmark"></span>
						</label>
					</div>
					<div class="checks" id="aft">
						<label class="label-parameters2"><input type="checkbox" id="aft2">After
					  		<span class="checkmark"></span>
						</label>
					</div>
					<br><br><br>
					<div class="wrap-input3 input3-select">
						
							<select name="meth" class="selection-2" id="sel">
								<option value="0" id="0">alphabetadiv_WNMF</option>
								<option value="1" id="1">Fevotte(Ges,Fes)</option>
							</select>
						<span class="focus-input3"></span>
					</div><br>

					<span id="info3"></span>
					<style type="text/css">
							#info3{
								color: #fff;
								margin-left: 70px;
								margin-top: 10px;
								text-align: center;
							}
					</style>

					<br><br><br>

					<div class="label-ligne">
						<hr width="50%" color="white" align=left size="10px" style="margin-right: 10px;">
						<label class="label-title">Parameters</label>
						<hr width="50%" color="white" align=right size="4" style="margin-left:10px;">
					</div><br>
					<div class="wrap-input3" data-validate="Name is required">
						<label class="label-parameters">Alpha</label>
						<input class="input3" type="number" name="alpha" value="0.6" id="alph" onchange="verify()">
						<span class="focus-input3"></span>
					</div>
					<div class="wrap-input3" data-validate="Name is required">
						<label class="label-parameters">Beta</label>
						<input class="input3" type="number" name="beta" value="0.9" id="bet" onchange="verify()">
						<span class="focus-input3"></span>
					</div>

					<div class="wrap-input3" data-validate="Name is required">
						<label class="label-parameters">NumberOfIterations</label>
						<input class="input3" type="number" name="nIt" placeholder="NB iter value" id="nbIt" onchange="verify()" min="1" max="100000" maxlength="5" onkeypress="return isNumeric(event)" oninput="maxLengthCheck(this)">
						<span class="focus-input3"></span>
					</div>
					<script type="text/javascript">
							 function maxLengthCheck(object) {
							    if (object.value > 100000){
							    	
							        object.value = 100000;
							  }
							}
							   function isNumeric (evt) {
							    var theEvent = evt || window.event;
							    var key = theEvent.keyCode || theEvent.which;
							    key = String.fromCharCode (key);
							    var regex = /[0-9]|\./;
							    if ( !regex.test(key) ) {
							      theEvent.returnValue = false;
							      if(theEvent.preventDefault) theEvent.preventDefault();
							    }
							  }
						</script>
					<br><br><br>

					<div class="label-ligne">
						<hr width="50%" color="white" align=left size="4" style="margin-right: 10px;">
							<label class="label-title">Options</label>
						<hr width="50%" color="white" align=right size="1114" style="margin-left:10px;">
					</div><br>	
					<div class="checks  show-info" info-bulle="informations about compute Ginit">
						<label class="label-parameters2"><input type="checkbox" name="ginit" id="ginit">Compute Ginit
					  		<span class="checkmark"></span>
						</label>
					</div>
				

					<div class="checks show-info" info-bulle="informations about Physical Model">
						<label class="label-parameters2"><input type="checkbox" name="modph" id="modph">Physical Model
					  		<span class="checkmark"></span>
						</label>
					</div>

					<div class="checks show-info" info-bulle="informations about Per source">
						<label class="label-parameters2"><input type="checkbox">Per source
					  		<span class="checkmark"></span>
						</label>
					</div>
					

					<br><br>
					

					<div class="container-contact3-form-btn">

						<input type="file" name="foo" id="real-btn" hidden="hidden"  onchange="verify()">


						<button type=button class="contact3-form-btn" id="inp">
							Input Data
						</button>
						<button type="submit" class="contact3-form-btn" id="comp">
							Compute
						</button>
						</form>
						<br><br><span id="info" >No File chosen, yet.</span>
						<style type="text/css">
							#info{
								color: #fff;
								margin-left: 70px;
								margin-top: 10px;
							}
						</style>
						<br>
						<span id="info2" ></span>
						<style type="text/css">
							#info2{
								color: #b21818;
								margin-left: 70px;
								margin-top: 10px;
							}
						</style>
						<span id="NameFile" hidden="hidden"></span>
					</div>
					
				
			</div>

			<script type="text/javascript">
				const realFileBtn = document.getElementById('real-btn');
				inp.addEventListener("click",function() {
					realFileBtn.click();
				});
			</script>

		</div>
	</div>


	<div id="dropDownSelect1"></div>

<!--===============================================================================================-->
	<script src="/computeDependencies/vendor/jquery/jquery-3.2.1.min.js"></script>	
<!--===============================================================================================-->
	<script src="/computeDependencies/vendor/bootstrap/js/popper.js"></script>
	<script src="/computeDependencies/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="/computeDependencies/js/snbutton.js"></script>
	<script>
		/*$(document).ready(function(){
			SNButton.init("comp",{
				fields:["radio2","alph","bet","nbIt"],
				enabletext: "Compute",
				disabletext: "can't Compute"
			})
		});*/

	$('#comp').attr('disabled',true);
	$('#comp').text('Can\'t Compute');
	function verify(){
            
            var info = document.getElementById('info');
            if($('#alph').val().trim() == '' || $('#bet').val().trim() == '' || $('#nbIt').val().trim() == '' || $('#info2').html()=="No File chosen, yet." || $('#info2').html()!="file accepted" ) 
            { 	  	
                $('#comp').attr('disabled',true);
                $('#comp').text('Can\'t Compute');
            }
            else{
            	$('#comp').attr('disabled',false);
                $('#comp').text('Compute');

            }
  }

  $('#real-btn').change(function(e){

    	  var file=e.target.files[0];
    	  
          if(file!=null){
          		var info = document.getElementById('info');
          		var NameFile = document.getElementById('NameFile');
                info.innerHTML=realFileBtn.value.match(/[\/\\]([\w\d\s\.\-\(\)]+)$/)[1];
                NameFile.innerHTML=realFileBtn.value.match(/[\/\\]([\w\d\s\.\-\(\)]+)$/)[1];
                info.innerHTML+=" is the chosen input file";
                
                var extension=file.name.replace(/^.*\./, "");
                if(extension=="xls" || extension=="xlsx"){
				       
				       if($('#alph').val().trim() == '' || $('#bet').val().trim() == '' || $('#nbIt').val().trim() == '') 
				       { 	
				            	
				                $('#comp').attr('disabled',true);
				                $('#comp').text('Can\'t Compute');
				                $('#info2').css("color", "#0fc643");
				                $('#info2').html("file accepted");
				        }else{

							    $('#comp').attr('disabled',false);
			                    $('#comp').text('Compute');
			                    $('#info2').css("color", "#0fc643");
			                    $('#info2').html("file accepted");

				        } 
                }else{
                    $('#comp').attr('disabled',true);
                    $('#comp').text('Can\'t Compute');
                    $('#info2').css("color", "#b21818");
                    $('#info2').html("error : invalid extension file");
                }
          }else{
          		
          		$('#comp').text('Can\'t Compute');
          		$('#comp').attr('disabled',true);
          		$('#info2').html("");
                $('#info').text("No File chosen, yet.");
          }
});

            
	</script>
<!--===============================================================================================-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/xlsx.full.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.13.5/jszip.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	    $("body").on("change", "#real-btn", function () {
        //Reference the FileUpload element.
        var fileUpload = $("#real-btn")[0];
 
        //Validate whether File is valid Excel file.
        var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.xls|.xlsx)$/;
        if (regex.test(fileUpload.value.toLowerCase())) {
            if (typeof (FileReader) != "undefined") {
                var reader = new FileReader();
 
                //For Browsers other than IE.
                if (reader.readAsBinaryString) {
                    reader.onload = function (e) {
                        ProcessExcel(e.target.result);
                    };
                    reader.readAsBinaryString(fileUpload.files[0]);
                } else {
                    //For IE Browser.
                    reader.onload = function (e) {
                        var data = "";
                        var bytes = new Uint8Array(e.target.result);
                        for (var i = 0; i < bytes.byteLength; i++) {
                            data += String.fromCharCode(bytes[i]);
                        }
                        ProcessExcel(data);
                    };
                    reader.readAsArrayBuffer(fileUpload.files[0]);
                }
            } else {
                alert("This browser does not support HTML5.");
            }
        } else {
            alert("Please upload a valid Excel file.");
        }
    });

		     function ProcessExcel(data) {
		   			 //Read the Excel File data.
			        var workbook = XLSX.read(data, {
			            type: 'binary'
			        });
			        //Fetch the name of First Sheet.
        			var Sheet1 = workbook.SheetNames[0];
        			var Sheet2 = workbook.SheetNames[1];
        			var Sheet3 = workbook.SheetNames[2];
        			var Sheet4 = workbook.SheetNames[3];
        			var Sheet5 = workbook.SheetNames[4];

        			var Sheet6 = workbook.SheetNames[5];
        			var Sheet7 = workbook.SheetNames[6];
        			var Sheet8 = workbook.SheetNames[7];

        			var Sheet9 = workbook.SheetNames[8];
        			
        			if (Sheet1!="X"||Sheet2!="Incertitude"||Sheet3!="Finit"||Sheet4!="Omega"||Sheet5!="Phi"){
        				$('#info2').css("color", "#b21818");
                    	$('#info2').html("error : Please upload a valid Excel file.");
                    	$('#comp').attr('disabled',true);
				        $('#comp').text('Can\'t Compute');
        			}

        			if($('#born2').prop("checked")){
        				if (Sheet6!="OmegaI"||Sheet7!="PhiMax"||Sheet8!="PhiMin"){
        					$('#info2').css("color", "#b21818");
                    		$('#info2').html("error : Please upload a valid Excel file.");
                    		$('#comp').attr('disabled',true);
				            $('#comp').text('Can\'t Compute');
        				}
        			}

        			if($('#ginit').prop("checked")){
        				if (Sheet9!="Ginit"){
        					$('#info2').css("color", "#b21818");
                    		$('#info2').html("error : Please upload a valid Excel file.");
                    		$('#comp').attr('disabled',true);
				            $('#comp').text('Can\'t Compute');
        				}
        			}


		    };
    });
</script>
<!--===============================================================================================-->
	<script src="/computeDependencies/vendor/select2/select2.min.js"></script>
	<script>
		$(".selection-2").select2({
			minimumResultsForSearch: 20,
			dropdownParent: $('#dropDownSelect1')
		});

		$('#born').hide();

		$(document).ready(function(){

			$('#constr').click(function(){

			if($(this).prop("checked")){

				$('#born').show();
				$("#sel").append('<option value="2" id="2">CWNMF_SGM_S2_AB(Ges,Fes)</option>');
				$("#sel").append('<option value="3" id="3">CWNMF_SGM_11(Ges,Fes)</option>');
				$("#sel").append('<option value="4" id="4">N1CWNMFV1(Ges, Fes)</option>');
				$("#sel").append('<option value="5" id="5">N1CWNMFR(Ges, Fes)</option>');
				$("#sel").append('<option value="6" id="6">N2CWNMF(Ges, Fes)</option>');
				$("#sel").append('<option value="7" id="7">N2CWNMFR(Ges,Fes)</option>');
				$("#sel").append('<option value="8" id="8">CWNMF_Huber_S1_11(Ges,Fes,0.2,0.2)</option>');
				$("#sel").append('<option value="9" id="9">CWNMF_Huber_S2_11(Ges,Fes,0.2,0.2)</option>');
			}else{
				$('#born').hide();
				$('#aft').hide();
				$('#2').remove();$('#3').remove();$('#4').remove();
				$('#5').remove();$('#6').remove();$('#7').remove();
				$('#8').remove();$('#9').remove();
			}


			});

		});

		$('#aft').hide();
		$('#born2').change(function(){

				if($(this).prop("checked")){
						$("#sel").append('<option value="10" id="10">BN1CWNMF(Ges, Fes)</option>');
						$("#sel").append('<option value="11" id="11">BN1CWNMFR(Ges, Fes)</option>');
						$("#sel").append('<option value="12" id="12">BN2CWNMF(Ges, Fes)</option>');
						$("#sel").append('<option value="13" id="13">BN2CWNMFR(Ges,Fes)</option>');
						$('#aft').show();
				}else{
					$('#aft').hide();
					$('#10').remove();$('#11').remove();$('#12').remove();
					$('#13').remove();
				}

		});

		$('#aft2').change(function(){
				if($(this).prop("checked")){
						
						$("#sel").append('<option value="14" id="14">N1BCWNMF(Ges, Fes)</option>');
						$("#sel").append('<option value="15" id="15">N1BCWNMFR(Ges, Fes)</option>');
						$("#sel").append('<option value="16" id="16">N2BCWNMF(Ges, Fes)</option>');
						$("#sel").append('<option value="17" id="17">N2BCWNMFR(Ges,Fes)</option>');
				}else{
					
					$('#14').remove();$('#15').remove();$('#16').remove();
					$('#17').remove();
				}
		});
		

	</script>
<!--===============================================================================================-->
	<script type="text/javascript">

				$("select.selection-2").change(function(){
					$('#info3').text('informations about   : '+$('option:selected').text());
					if($('option:selected').attr("id")==3 || $('option:selected').attr("id")==8 || $('option:selected').attr("id")==9 ){
						$('#alph').val(1);
						$('#bet').val(1);
					}else{
						$('#alph').val(0.6);
						$('#bet').val(0.9);
					}
				});

	</script>
<!--========================================command to server=======================================================-->
<script type="text/javascript">
			$('#comp').on('click',function(){
				//alert("Go ahead");
				var command ="./NMFIHM ";
				command+="chemin/";
				command+=$('#NameFile').html();
				command+=" ";
				command+=$('#nbIt').val();
				command+=" ";
				command+=$('option:selected').attr("id");
				command+=" ";
				if($('#ginit').prop("checked")){
					command+=" 1 ";
				}else{
					command+=" 0 ";
				}
				if($('#modph').prop("checked")){
					command+=" 1 ";
				}else{
					command+=" 0 ";
				}

				command+=$('#alph').val();
				command+=" ";
				command+=$('#bet').val();
				command+=" ../res/resv1.xls";


				console.log(command);
			});
</script>
<!--===============================================================================================-->
	<script src="/computeDependencies/js/main.js"></script>

	<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-23581568-13"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-23581568-13');
</script>


</body>
</html>