anhnguyen1618/gist:346b610a57453d940e336f0759a724e5

## gistfile1.txt
<!DOCTYPE html>
<html>

<head>
    <title>Solinor Wage Calculator</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.table').hide();

        $.get('http://7fb7d511.ngrok.io/getsalary', function(response) {
            $('#user_info').empty();
            var trHTML = '';
            for (var i = 0; i < response.length; i++) {
                var index = i + 1
                trHTML += '<tr><th scope="row">' + response[i].id + '</th>';
                trHTML += '<td>' + response[i].name + '</td><td>' + response[i].salary + '</td>';
            }
            $('#user_info').append(trHTML);
            $('.table').show();
        })
    });
    $(function() {
        $('#submit').click(function() {
            event.preventDefault();
            var form_data = new FormData($('#uploadform')[0]);
            $.ajax({
                type: 'POST',
                url: 'http://7fb7d511.ngrok.io/uploadfile',
                data: form_data,
                contentType: false,
                processData: false,
                dataType: 'json'
            }).done(function(data, textStatus, jqXHR) {
                console.log(data);
                console.log(textStatus);
                console.log(jqXHR);
                console.log('Success!');
                alert('Success!');
                $("#resultFilename").text(data['name']);
                $("#resultFilesize").text(data['size']);
            }).fail(function() {
                alert('request failed');
            })
        });
    });
    </script>
    <style type="text/css">
    input id {
        font-size: 16px;
        padding: 15px 32px;
        border: gray solid;
        border-radius: 3px;
        -webkit-transition: width 0.4s ease-out 0.4s;
        -moz-transition: width 0.4s ease-out 0.4s;
        -o-transition: width 0.4s ease-out 0.4s;
        transition: width 0.4s ease-out 0.4s;
    }

    input[type=text]:focus {
        width: 60%;
    }
    </style>
</head>

<body class="container">
    <div class="row input_field">
        <form class="form-control">
            <center>
                <text> Currently using provided CSV file. You can place it with other csv file. </text>
                <br/>
                <form id="uploadform" method="post" enctype="multipart/form-data">
                    <label for="file">Select file</label>
                    <input name="file" type="file" size="45" accept=".csv">
                    <button id="submit" type="button">Upload</button>
                </form>
            </center>
    </div>
    <div class="row">
        <table class="table table-bordered table-hover">
            <thead class="thead-inverse">
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tbody id="user_info">
            </tbody>
        </table>
    </div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Solinor Wage Calculator</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	$('.table').hide();

	$.get('http://7fb7d511.ngrok.io/getsalary', function(response) {
	$('#user_info').empty();
	var trHTML = '';
	for (var i = 0; i < response.length; i++) {
	var index = i + 1
	trHTML += '<tr><th scope="row">' + response[i].id + '</th>';
	trHTML += '<td>' + response[i].name + '</td><td>' + response[i].salary + '</td>';
	}
	$('#user_info').append(trHTML);
	$('.table').show();
	})
	});
	$(function() {
	$('#submit').click(function() {
	event.preventDefault();
	var form_data = new FormData($('#uploadform')[0]);
	$.ajax({
	type: 'POST',
	url: 'http://7fb7d511.ngrok.io/uploadfile',
	data: form_data,
	contentType: false,
	processData: false,
	dataType: 'json'
	}).done(function(data, textStatus, jqXHR) {
	console.log(data);
	console.log(textStatus);
	console.log(jqXHR);
	console.log('Success!');
	alert('Success!');
	$("#resultFilename").text(data['name']);
	$("#resultFilesize").text(data['size']);
	}).fail(function() {
	alert('request failed');
	})
	});
	});
	</script>
	<style type="text/css">
	input id {
	font-size: 16px;
	padding: 15px 32px;
	border: gray solid;
	border-radius: 3px;
	-webkit-transition: width 0.4s ease-out 0.4s;
	-moz-transition: width 0.4s ease-out 0.4s;
	-o-transition: width 0.4s ease-out 0.4s;
	transition: width 0.4s ease-out 0.4s;
	}

	input[type=text]:focus {
	width: 60%;
	}
	</style>
	</head>

	<body class="container">
	<div class="row input_field">
	<form class="form-control">
	<center>
	<text> Currently using provided CSV file. You can place it with other csv file. </text>
	<br/>
	<form id="uploadform" method="post" enctype="multipart/form-data">
	<label for="file">Select file</label>
	<input name="file" type="file" size="45" accept=".csv">
	<button id="submit" type="button">Upload</button>
	</form>
	</center>
	</div>
	<div class="row">
	<table class="table table-bordered table-hover">
	<thead class="thead-inverse">
	<tr>
	<th>Id</th>
	<th>Name</th>
	<th>Salary</th>
	</tr>
	</thead>
	<tbody id="user_info">
	</tbody>
	</table>
	</div>
	</body>

	</html>