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)
|
json.NewEncoder(w).Encode(options)
|
||||||
|
|
||||||
} else if r.Method == "GET" {
|
} else if r.Method == "GET" {
|
||||||
fmt.Fprintf(w, "Hello go!") // To be updated
|
http.ServeFile(w, r, "./templates/index.html")
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
|
// Serve index.html
|
||||||
http.HandleFunc("/", index)
|
http.HandleFunc("/", index)
|
||||||
|
// Serve all the assets
|
||||||
|
http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("./templates/assets"))))
|
||||||
http.ListenAndServe(":8080", nil)
|
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