<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Reddening</title>
		<meta charset="utf-8">
		<link type="text/css" href="css/bootstrap.min.css" rel="stylesheet">
		<link type="text/css" href="css/design.css" rel="stylesheet">

		<link href="plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	</head>

	<body>
		<header>		  
		  <div class="navbar navbar-dark bg-dark shadow-sm">
		    <div class="container">
		      <a href="" class="navbar-brand d-flex align-items-center text-danger">
		        <h2>Reddening</h2>
		      </a>		      
		    </div>
		  </div>
		</header>

		<main>
			<div class="container">
				<div class="row">

					<div class="col-lg-4">
						<div class="col-lg-12 rounded shadow-sm m-3 p-3 bg-grey">
							<h6 class="border-bottom pb-2 mb-0">Estimation from values</h6>
							<form id="form1" method="post" name="form1">
								<div class='col-lg-12 form-group mt-3'>
                                    <label class="control-label">Reddening law <span class='text-primary info1' id='info' style="cursor:pointer">(?)</span></label>
									<select type='text' class='form-control' name='law1' id='law1'>
										<option value='Drimmel'>Drimmel et al. 2003</option>
										<option value='Schlegel'>Schlegel et al. 1998</option>
										<option value='Green15'>Green et al. 2015</option>
										<option value='Planck'>Planck Collaboration 2013</option>
										<option value='BH'>Burstein & Heiles 1982</option>
										<option value='iphas'>Sale et al. 2014</option>
										<option value='le2019'>Leike & Enßlin 2019</option>
                                        <option value='lenz2017'>Lenz, Hensley & Doré 2017</option>
                                        <option value='Marshall'>Marshall et al. 2006</option>
                                        <option value='pg2010'>Peek & Graves 2010</option>
                                        <option value='Green17'>Green et al. 2018</option>
                                        <option value='Combined15'> Bovy et al. 2015</option>
                                        <option value='Chen2014'> Chen et al. 2014</option>
                                        <option value='PlanckGNILC'>Planck Collaboration 2016</option>
                                    </select>
								</div>
                                <div class='col-lg-12 form-group mt-3'>
                                    <label class="control-label">Coordinate frame</label>
                                    <select type='text' class='form-control' name='frame1' id='frame1'>
                                        <option value='galactic'>Galactic</option>
                                        <option value='icrs'>Equatorial</option>
                                    </select>
                                </div>
								<div class='col-lg-12 form-group mt-3'>
									<label class="control-label">X-coordinate</label>
									<input type='text' class='form-control' name='x' id='x' value = '0'/>
								</div>
								<div class='col-lg-12 form-group mt-3'>
									<label class="control-label">Y-coordinate</label>
									<input type='text' class='form-control' name='y' id='y' value = '0'/>
								</div>
								<div class='col-lg-12 form-group mt-3'>
									<label class="control-label">Distance from the Sun</label>
									<input type='text' class='form-control' name='distance' id='distance' value = '0'/>
								</div>	
								<div class='col-lg-12 form-group mt-3'>
									<label class="control-label">Result</label>
									<input type='text' class='form-control' name='result1' id='result1' value = '' disabled/>
								</div>							
								<div class='col-lg-12 form-group mt-3'>
                                    <div class="col-lg-12 p-3 text-center" id="res1"></div>
									<input type='submit' class='form-control btn btn-primary' name='sbmt1' id='sbmt1' value = 'Send'/>
								</div>
							</form>
						</div>
						<div class="col-lg-12 rounded shadow-sm m-3 p-3 bg-grey">
							<h6 class="border-bottom pb-2 mb-0">Estimation from file</h6>
							<form id="form2" method="post" name="form2" enctype="multipart/form-data">
								<div class='col-lg-12 form-group mt-3'>
									<label class="control-label">Reddening law <span class='text-primary info1' id='info2' style="cursor:pointer">(?)</span></label>
									<select type='text' class='form-control' name='law2' id='law2'>
                                        <option value='Drimmel'>Drimmel et al. 2003</option>
                                        <option value='Schlegel'>Schlegel et al. 1998</option>
                                        <option value='Green15'>Green et al. 2015</option>
                                        <option value='Planck'>Planck Collaboration 2013</option>
                                        <option value='BH'>Burstein & Heiles 1982</option>
                                        <option value='iphas'>Sale et al. 2014</option>
                                        <option value='le2019'>Leike & Enßlin 2019</option>
                                        <option value='lenz2017'>Lenz, Hensley & Doré 2017</option>
                                        <option value='Marshall'>Marshall et al. 2006</option>
                                        <option value='pg2010'>Peek & Graves 2010</option>
                                        <option value='Green17'>Green et al. 2018</option>
                                        <option value='Combined15'> Bovy et al. 2015</option>
                                        <option value='Chen2014'> Chen et al. 2014</option>
                                        <option value='PlanckGNILC'>Planck Collaboration 2016</option>
									</select>
								</div>
                                <div class='col-lg-12 form-group mt-3'>
                                    <label class="control-label">Coordinate frame</label>
                                    <select type='text' class='form-control' name='frame2' id='frame2'>
                                        <option value='galactic'>Galactic</option>
                                        <option value='icrs'>Equatorial</option>
                                    </select>
                                </div>
								<div class='col-lg-12 form-group mt-3'>
									<label class="control-label">File <span class='text-primary info1' id='info3' style="cursor:pointer">(?)</span></label>
									<input type='file' class='form-control' name='file' id='file' value = ''/>
								</div>						
								<div class='col-lg-12 form-group mt-3'>
                                    <div class="col-lg-12 p-3 text-center" id="res2"></div>
									<input type='submit' class='form-control btn btn-primary' name='sbmt2' id='sbmt2' value = 'Send'/>
								</div>
							</form>
						</div>
					</div>

					<div class="col-lg-8">
						<div class="col-lg-12 bg-body m-3">
							<h6 class="border-bottom pb-2 mb-0">Reddening of Stars</h6>
                            <div class="row mb-3 mt-3 ">
                                <div class="col-lg-3">
                                    <label class="control-label">X-coordinate</label>
                                    <input type='number' class='form-control' name='x-search' id='x-search' value = '0'/>
                                </div>
                                <div class="col-lg-3">
                                    <label class="control-label">Y-coordinate</label>
                                    <input type='number' class='form-control' name='y-search' id='y-search' value = '0'/>
                                </div>
                                <div class="col-lg-3">
                                    <label class="control-label">Distance from the Sun</label>
                                    <input type='number' class='form-control' name='d-search' id='d-search' value = '0'/>
                                </div>
                                <div class="col-lg-3">
                                    <br>
                                    <button id='btn-search' class="btn btn-primary">Find</button>
                                </div>
                            </div>
			                <div class='table-responsive'>
								<table id="table" data-toggle="table"
								   data-url="/query?x=0&y=0&dist=0"
								   data-side-pagination="server"
								   data-search="false"
								   data-show-refresh="false"
								   data-show-toggle="false"
								   data-show-columns="false"
								   data-sort-name="eucldist"
								   data-sort-order="asc"
								   data-page-list="[25, 50, 100, 200, 500, 1000]"
								   data-page-size="25"
								   data-pagination="true" 
								   data-striped="true">
									<thead>
										<tr>
											<th data-field="identification" data-sortable="false">Star identification</th>
											<th data-field="x" data-sortable="false">X-coordinate</th>
											<th data-field="y" data-sortable="false">Y-coordinate</th>
											<th data-field="distance_from_the_sun" data-sortable="false">Distance from the Sun</th>
											<th data-field="reddening" data-sortable="false">Reddening</th>

										</tr>
									</thead>											
								</table>
									
					        </div>
						</div>
					</div>
				</div>
			</div>
		</main>

        <footer class="page-footer bg-dark pt-4 text-center text-light" >This application was created as part of bachelor's thesis by Martin Striežovský, 2021.</footer>

        <div id="modalInfo" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Information</h5>
                    </div>
                    <div class="modal-body">
                        <div id="modal-content"></div>
                    </div>
                    <div class="modal-footer">
                        <button id="closebtnA" type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>


		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="plugins/bootstrap-table/bootstrap-table.min.js"></script>
        <script src="plugins/bootstrap-validator/bootstrapValidator.min.js"></script>
        <script>
            // hides eucldist as it is only used to sort records and is not meant to be shown to user
            $("#table").bootstrapTable('hideColumn', 'eucldist');

            //updates table by sorting records by distance from entered point
            $('#btn-search').on('click',function(){
                $('#table').bootstrapTable("refresh",{
                    url : "/query?x=" + $("#x-search").val() + "&y=" + $("#y-search").val() + "&dist=" + $("#d-search").val()
                });
                $("#table").bootstrapTable("refresh")
            });

            // shows info about law in form1
            $("#info").on("click",function(){
                lawInfo(1);
                $("#modalInfo").modal("show");
            });

            //shows info about law in form2
            $("#info2").on('click',function(){
                lawInfo(2);
                $("#modalInfo").modal("show");
            });
            //shows info about file input
            $("#info3").on('click',function() {
                $("#modal-content").html("Each line in file you upload needs to have 3 numbers separated by space and contain nothing else. "
                    + "In order, those numbers represent X and Y in degrees and Distance from the Sun in parsecs as specified by selected coordinate system.");
                $("#modalInfo").modal("show");
            });

            //closes info about law
            $('#closebtnA').on('click',function(){
                $("#modalInfo").modal('hide');
            });

            //bootstrap validator setup
            $('#form1').bootstrapValidator({
                excluded: ":disabled",
                fields: {
                    x: {
                        validators: {
                            notEmpty: {
                                message: "<span class='text-danger'>Please enter value.</span>"
                            },
                            regexp: {
                                regexp: /^-?\d*\.?\d*$/,
                                message: "<span class='text-danger'>Value needs to be a number.</span>"
                            }
                        }
                    },
                    y: {
                        validators: {
                            notEmpty: {
                                message: "<span class='text-danger'>Please enter value.</span>"
                            },
                            regexp: {
                                regexp: /^-?\d*\.?\d*$/,
                                message: "<span class='text-danger'>Value needs to be a number.</span>"
                            }
                        }
                    },
                    distance: {
                        validators: {
                            notEmpty: {
                                message: "<span class='text-danger'>Please enter value.</span>"
                            },
                            regexp: {
                                regexp: /^-?\d*\.?\d*$/,
                                message: "<span class='text-danger'>Value needs to be a number.</span>"
                            }
                        }
                    }
                }
            }).on('success.form.bv',function(e){
                e.preventDefault(); // <----- THIS IS NEEDED

                $("#sbmt1").prop("disabled", true);
            });


            $("#form2").bootstrapValidator({
                excluded: ":disabled",
                fields: {
                    file: {
                        validators: {
                            notEmpty: {
                                message: "<span class='text-danger'>Choose a file.</span>"
                            }
                        }
                    }
                }
            }).on('success.form.bv',function(e){
                e.preventDefault(); // <----- THIS IS NEEDED

                $('#sbmt2').prop('disabled', true);
            });

            //function to display information about each law based on id
            function lawInfo(id){
                var infoArr = {
                    "Drimmel" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2003A%26A...409..205D/abstract' target = '_blank'>Reference</a>",
                    "Schlegel" : "<a href = 'https://ui.adsabs.harvard.edu/abs/1998ApJ...500..525S/abstract' target = '_blank'>Reference<\a> " +
                        "<a href = 'https://ui.adsabs.harvard.edu/abs/2011ApJ...737..103S/abstract' target = '_blank'>Recalibration<\a>",
                    "Green15" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2015ApJ...810...25G/abstract' target = '_blank'>Reference<a>",
                    "Planck" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2014A%26A...571A..11P/abstract' target = '_blank'>Reference<a>",
                    "BH" : "<a href = 'https://ui.adsabs.harvard.edu/abs/1982AJ.....87.1165B/abstract' target = '_blank'>Reference<\a>",
                    "iphas" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2014MNRAS.443.2907S/abstract' target = '_blank'>Reference</a>",
                    "le2019" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2019A%26A...631A..32L/abstract' target = '_blank'>Reference</a>",
                    "lenz2017" : "<a href = 'https://arxiv.org/abs/1706.00011' target = '_blank'>Reference</a>",
                    "Marshall" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2006A%26A...453..635M/abstract' target = '_blank'>Reference</a>",
                    "pg2010" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2010ApJ...719..415P/abstract' target = '_blank'>Reference</a>",
                    "Green17" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2018MNRAS.478..651G/abstract' target = '_blank'>Reference</a>",
                    "Combined15" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2016ApJ...818..130B/abstract' target = '_blank'>Reference</a>",
                    "Chen2014" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2014MNRAS.443.1192C/abstract' target = '_blank'>Reference</a>",
                    "PlanckGNILC" : "<a href = 'https://ui.adsabs.harvard.edu/abs/2016A%26A...596A.109P/abstract' target = '_blank'>Reference</a>"
                };
                var info = infoArr[$("#law" + id).val()];
                $("#modal-content").html(info)
            }

            // initiates estimation by values
            $("#form1").submit(function(){
                $("#result1").val("Calculating...");
                $.ajax({
                    type : "POST",
                    url : "/check",
                    data : {
                        "x" : $("#x").val(),
                        "y" : $("#y").val(),
                        "distance" : $("#distance").val(),
                        "law" : $("#law1").val(),
                        "frame" :  $("#frame1").val()
                    },
                    success: function(data){
                        $("#sbmt1").attr("disabled",false);
                        $("#result1").val(data);
                    },
                    error: function() {
                        $("#sbmt1").attr("disabled",false);
                        $("#result1").val("Invalid input. X, Y and Distance should be numbers.")
                    }
                });

        		return false;
			});

            //outputs file with specified content for user to download, function from
            // https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
            function download(filename, text) {
                var element = document.createElement('a');
                element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
                element.setAttribute('download', filename);
                element.style.display = 'none';
                document.body.appendChild(element);
                element.click();
                document.body.removeChild(element);
            }

            //initiates estimation from file input
			$("#form2").submit(function(){
                $("#res2").html("<span class='text-primary'>Calculation started...</span>");


                var formData = new FormData();
                formData.append('file', $('input[type=file]')[0].files[0]);
                formData.append('law', $("#law2").val());
                formData.append('frame', $("#frame2").val());
                $.ajax({
                    url: "/checkF",
                    data: formData,
                    type:"POST",

                    enctype: 'multipart/form-data',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success:function(data){
                       download("output.txt",data);
                        $("#res2").html("<span class='text-success'>File is being downloaded.</span>");
                        $("#sbmt2").attr("disabled",false);
                    },
                    error: function(){
                        $("#res2").html("<span class='text-danger'>File input failed</span>");
                        $("#sbmt2").attr("disabled",false);
                    }
                });
				return false;
			});

		</script>
	</body>
</html>

