Server now returns HTML and can pass back/forth data

This commit is contained in:
Kevin
2017-09-18 15:10:01 -04:00
parent 6b56699280
commit 04279d77f0
5 changed files with 223 additions and 1 deletions

View File

@@ -38,12 +38,15 @@ func index(w http.ResponseWriter, r *http.Request) {
json.NewEncoder(w).Encode(options)
} else if r.Method == "GET" {
fmt.Fprintf(w, "Hello go!") // To be updated
http.ServeFile(w, r, "./templates/index.html")
}
}
func main() {
// Serve index.html
http.HandleFunc("/", index)
// Serve all the assets
http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("./templates/assets"))))
http.ListenAndServe(":8080", nil)
}

File diff suppressed because one or more lines are too long

59
templates/assets/main.js Normal file
View File

@@ -0,0 +1,59 @@
"use strict";
var optionResults;
$(document).ready(function() {
$("#option-terms").on("submit", function(e) {
//
e.preventDefault();
sendRequest();
})
});
function serializeForm(id) {
//
return $(id).serializeArray()
.reduce(function(a, x) { a[x.name] = x.value; return a; }, {});
}
function sendRequest() {
//
var inputData = serializeForm("#option-terms");
// Get the right data-types
inputData.ExpiryDate = new Date(inputData.ExpiryDate).toJSON();
inputData.OptType = parseInt(inputData.OptType);
inputData.Rfr = parseFloat(inputData.Rfr);
inputData.Sims = parseInt(inputData.Sims);
inputData.Spot = parseFloat(inputData.Spot);
inputData.Strike = parseFloat(inputData.Strike);
inputData.ValueDate = new Date(inputData.ValueDate).toJSON();
inputData.Vol = parseFloat(inputData.impliedVol);
// Send request
var startTime;
$.ajax({
type: "POST",
url: "http://localhost:8080",
data: JSON.stringify(inputData),
beforeSend: function(request, settings) {
startTime = new Date().getTime();
},
success: function(e) {
optionResults = e;
updateTable();
let requestTime = new Date().getTime() - startTime;
console.log("Request time: ", requestTime);
},
});
}
function updateTable() {
$("#results-table > tbody > tr").each(function(idx, el) {
$($(el).children()[1])[0].innerText =
optionResults["ClosedForm"][$($(el).children()[0]).text()].toFixed(4);
$($(el).children()[2])[0].innerText =
optionResults["MonteCarlo"][$($(el).children()[0]).text()].toFixed(4);
});
}

View File

@@ -0,0 +1,61 @@
body {
font-family: 'Poppins', sans-serif;
font-size: small;
}
form > p {
text-align: left;
margin-left: 10%;
}
p > select, button {
float: right;
margin-right: 20%;
}
p > input {
float: right;
margin-right: 20%;
text-align: right;
}
table {
border: none;
border collapse: collapse;
}
table td {
border-left: 1px solid #000;
padding: 0 40px 0 40px;
}
table td:first-child {
border-left: none;
}
table > tbody > tr > th {
text-align: left;
}
table > tbody > tr > td {
text-align: right;
}
h3 {
margin-left: 5%;
}
#option-terms {
/* float: right; */
}
#left-side {
float: left;
width: 33%;
}
#right-side {
float: left;
width: 66%;
}

95
templates/index.html Normal file
View File

@@ -0,0 +1,95 @@
<html>
<head>
<title>Black Scholes Options Model</title>
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="assets/styles.css"/>
<script type="text/javascript" src="assets/jquery.3.2.1.js"></script>
<script type="text/javascript" src="assets/main.js"></script>
</head>
<body>
<div class="wrapper">
<div id="left-side">
<form id="option-terms">
<h3>Option terms:</h3>
<p>Option type:
<select name="OptType">
<option value="1" label="call">Call</option>
<option value="-1" label="put">Put</option>
</select>
</p>
<p>Strike:
<input type="number" step="0.0001" name="Strike">
</p>
<p>Expiry Date:
<input type="date" name="ExpiryDate">
</p>
<h3>Market data:</h3>
<p>Value Date:
<input type="date" name="ValueDate">
</p>
<p>Spot:
<input type="number" step="0.0001"name="Spot">
</p>
<p>Risk-free Rate:
<input type="number" step="0.0001" name="Rfr">
</p>
<p>Implied Volatility:
<input type="number" step="0.0001" name="impliedVol">
</p>
<p>Simulations:
<input type="number" step="1" name="Sims">
</p>
<button type="submit">Submit</button>
</form>
</div>
<div id="right-side">
<div id="right-upper">
<p>Graph goes here</p>
</div>
<div id="right-lower">
<table id="results-table">
<thead>
<tr>
<th></th>
<th>Closed Form</th>
<th>Monte Carlo</th>
</tr>
</thead>
<tbody>
<tr>
<th>FV</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Delta</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Vega</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Gamma</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Theta</th>
<td></td>
<td></td>
</tr>
<tr>
<th>Rho</th>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>