Server now returns HTML and can pass back/forth data
This commit is contained in:
5
serve.go
5
serve.go
@@ -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)
|
||||
}
|
||||
|
||||
4
templates/assets/jquery.3.2.1.js
Normal file
4
templates/assets/jquery.3.2.1.js
Normal file
File diff suppressed because one or more lines are too long
59
templates/assets/main.js
Normal file
59
templates/assets/main.js
Normal 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);
|
||||
});
|
||||
}
|
||||
|
||||
61
templates/assets/styles.css
Normal file
61
templates/assets/styles.css
Normal 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
95
templates/index.html
Normal 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>
|
||||
Reference in New Issue
Block a user