Fleshed out the create deal page.

This commit is contained in:
Clinton Alexander 2016-06-21 10:54:35 +01:00 committed by Clinton Alexander
parent 2927775bf0
commit c1619c4b6c
3 changed files with 517 additions and 128 deletions

View File

@ -15,6 +15,7 @@
"dependencies": {
"angular": "^1.5.6",
"jquery": "^3.0.0",
"angular-route": "^1.5.7"
"angular-route": "^1.5.7",
"lodash": "^4.13.1"
}
}

View File

@ -1,5 +1,123 @@
"use strict"
function formatDateForNode(date) {
// Produces yyyy-dd-mm. JS is missing proper date formatting libs
return date.toISOString().substring(0, 10);
}
function formatDateForAngular(dateStr) {
let parts = dateStr.split("-");
return new Date(parts[0], parts[1], parts[2]);
}
let fixedLegModel = {
fixedRatePayer: "Bank A",
notional: {
quantity: 2500000000,
token: "EUR"
},
paymentFrequency: "SemiAnnual",
effectiveDate: new Date(2016, 3, 11),
effectiveDateAdjustment: null,
terminationDate: new Date(2026, 3, 11),
terminationDateAdjustment: null,
fixedRate: {
ratioUnit: {
value: "0.01676"
}
},
dayCountBasisDay: "D30",
dayCountBasisYear: "Y360",
rollConvention: "ModifiedFollowing",
dayInMonth: 10,
paymentRule: "InArrears",
paymentDelay: 0,
paymentCalendar: "London",
interestPeriodAdjustment: "Adjusted"
};
let floatingLegModel = {
floatingRatePayer: "Bank B",
notional: {
quantity: 2500000000,
token: "EUR"
},
paymentFrequency: "Quarterly",
effectiveDate: new Date(2016, 3, 11),
effectiveDateAdjustment: null,
terminationDate: new Date(2026, 3, 11),
terminationDateAdjustment: null,
dayCountBasisDay: "D30",
dayCountBasisYear: "Y360",
rollConvention: "ModifiedFollowing",
fixingRollConvention: "ModifiedFollowing",
dayInMonth: 10,
resetDayInMonth: 10,
paymentRule: "InArrears",
paymentDelay: 0,
paymentCalendar: [ "London" ],
interestPeriodAdjustment: "Adjusted",
fixingPeriod: "TWODAYS",
resetRule: "InAdvance",
fixingsPerPayment: "Quarterly",
fixingCalendar: [ "NewYork" ],
index: "ICE LIBOR",
indexSource: "Rates Service Provider",
indexTenor: {
name: "3M"
}
};
let calculationModel = {
expression: "( fixedLeg.notional.quantity * (fixedLeg.fixedRate.ratioUnit.value)) -(floatingLeg.notional.quantity * (calculation.fixingSchedule.get(context.getDate('currentDate')).rate.ratioUnit.value))",
floatingLegPaymentSchedule: {
},
fixedLegPaymentSchedule: {
}
};
// Todo: Finish this model to solve the problem of the dates being in two different formats
let commonModel = function() {
this.baseCurrency = "EUR";
this.eligibleCurrency = "EUR";
this.eligibleCreditSupport: "Cash in an Eligible Currency";
this.independentAmounts = {
quantity: 0,
token: "EUR"
};
this.threshold = {
quantity: 0,
token: "EUR"
};
minimumTransferAmount: {
quantity: 25000000,
token: "EUR"
},
rounding: {
quantity: 1000000,
token: "EUR"
},
valuationDate: "Every Local Business Day",
notificationTime: "2:00pm London",
resolutionTime: "2:00pm London time on the first LocalBusiness Day following the date on which the notice is given ",
interestRate: {
oracle: "Rates Service Provider",
tenor: {
name: "6M"
},
ratioUnit: null,
name: "EONIA"
},
addressForTransfers: "",
exposure: {},
localBusinessDay: [ "London" , "NewYork" ],
dailyInterestAmount: "(CashAmount * InterestRate ) / (fixedLeg.notional.token.currencyCode.equals('GBP')) ? 365 : 360",
tradeID: tradeId,
hashLegalDocs: "put hash here"
};
let irsViewer = angular.module('irsViewer', ['ngRoute'])
.config(($routeProvider, $locationProvider) => {
$routeProvider
@ -23,10 +141,10 @@ let irsViewer = angular.module('irsViewer', ['ngRoute'])
let nodeService = irsViewer.factory('nodeService', ($http) => {
return new (function() {
var date = new Date(2016, 0, 1, 0, 0, 0);
var curLoading = {};
let date = new Date(2016, 0, 1, 0, 0, 0);
let curLoading = {};
var load = (type, promise) => {
let load = (type, promise) => {
curLoading[type] = true;
return promise.then((arg) => {
curLoading[type] = false;
@ -37,9 +155,8 @@ let nodeService = irsViewer.factory('nodeService', ($http) => {
});
}
var changeDateOnNode = (newDate) => {
// Produces yyyy-dd-mm. JS is missing proper date formatting libs
const dateStr = newDate.toISOString().substring(0, 10);
let changeDateOnNode = (newDate) => {
const dateStr = formatDateForNode(newDate)
return load('date', $http.put('http://localhost:31338/api/irs/demodate', "\"" + dateStr + "\"")).then((resp) => {
date = newDate;
return this.getDateModel(date);
@ -103,126 +220,46 @@ let nodeService = irsViewer.factory('nodeService', ($http) => {
}, false);
}
this.createDeal = () => {
let dealJson = `{
"fixedLeg": {
"fixedRatePayer": "Bank A",
"notional": {
"quantity": 2500000000,
"token": "EUR"
},
"paymentFrequency": "SemiAnnual",
"effectiveDate": "2016-03-11",
"effectiveDateAdjustment": null,
"terminationDate": "2026-03-11",
"terminationDateAdjustment": null,
"fixedRate": {
"ratioUnit": {
"value": "0.01676"
}
},
"dayCountBasisDay": "D30",
"dayCountBasisYear": "Y360",
"rollConvention": "ModifiedFollowing",
"dayInMonth": 10,
"paymentRule": "InArrears",
"paymentDelay": 0,
"paymentCalendar": "London",
"interestPeriodAdjustment": "Adjusted"
},
"floatingLeg": {
"floatingRatePayer": "Bank B",
"notional": {
"quantity": 2500000000,
"token": "EUR"
},
"paymentFrequency": "Quarterly",
"effectiveDate": "2016-03-11",
"effectiveDateAdjustment": null,
"terminationDate": "2026-03-11",
"terminationDateAdjustment": null,
"dayCountBasisDay": "D30",
"dayCountBasisYear": "Y360",
"rollConvention": "ModifiedFollowing",
"fixingRollConvention": "ModifiedFollowing",
"dayInMonth": 10,
"resetDayInMonth": 10,
"paymentRule": "InArrears",
"paymentDelay": 0,
"paymentCalendar": [ "London" ],
"interestPeriodAdjustment": "Adjusted",
"fixingPeriod": "TWODAYS",
"resetRule": "InAdvance",
"fixingsPerPayment": "Quarterly",
"fixingCalendar": [ "NewYork" ],
"index": "ICE LIBOR",
"indexSource": "Rates Service Provider",
"indexTenor": {
"name": "3M"
}
},
"calculation": {
"expression": "( fixedLeg.notional.quantity * (fixedLeg.fixedRate.ratioUnit.value)) -(floatingLeg.notional.quantity * (calculation.fixingSchedule.get(context.getDate('currentDate')).rate.ratioUnit.value))",
"floatingLegPaymentSchedule": {
},
"fixedLegPaymentSchedule": {
}
},
"common": {
"baseCurrency": "EUR",
"eligibleCurrency": "EUR",
"eligibleCreditSupport": "Cash in an Eligible Currency",
"independentAmounts": {
"quantity": 0,
"token": "EUR"
},
"threshold": {
"quantity": 0,
"token": "EUR"
},
"minimumTransferAmount": {
"quantity": 25000000,
"token": "EUR"
},
"rounding": {
"quantity": 1000000,
"token": "EUR"
},
"valuationDate": "Every Local Business Day",
"notificationTime": "2:00pm London",
"resolutionTime": "2:00pm London time on the first LocalBusiness Day following the date on which the notice is given ",
"interestRate": {
"oracle": "Rates Service Provider",
"tenor": {
"name": "6M"
},
"ratioUnit": null,
"name": "EONIA"
},
"addressForTransfers": "",
"exposure": {},
"localBusinessDay": [ "London" , "NewYork" ],
"dailyInterestAmount": "(CashAmount * InterestRate ) / (fixedLeg.notional.token.currencyCode.equals('GBP')) ? 365 : 360",
"tradeID": "tradeXXX",
"hashLegalDocs": "put hash here"
},
"notary": "Bank A"
}`;
this.newDeal = () => {
let now = new Date();
let tradeId = `T${now.getUTCFullYear()}-${now.getUTCMonth()}-${now.getUTCDate()}.${now.getUTCHours()}:${now.getUTCMinutes()}:${now.getUTCSeconds()}:${now.getUTCMilliseconds()}`
return load('create-deal', $http.post('http://localhost:31338/api/irs/deals',
data: {
trade: dealJson
}
})).then((resp) => {
console.log("RESPONSE: " + resp);
return {
fixedLeg: fixedLegModel,
floatingLeg: floatingLegModel,
calculation: calculationModel,
common: commonModel,
notary: "Bank A"
};
}
this.createDeal = (deal) => {
return load('create-deal', $http.post('http://localhost:31338/api/irs/deals', deal))
.then((resp) => {
return deal.tradeId;
}, (resp) => {
console.log("FAILURE: " + resp);
throw resp;
})
}
});
});
function initSemanticUi() {
$('.ui.accordion').accordion();
$('.ui.dropdown').dropdown();
}
function prepareDeal(deal) {
let newDeal = Object.assign({}, deal);
newDeal.fixedLeg.effectiveDate = formatDateForNode(newDeal.fixedLeg.effectiveDate);
newDeal.fixedLeg.terminationDate = formatDateForNode(newDeal.fixedLeg.terminationDate);
newDeal.floatingLeg.effectiveDate = formatDateForNode(newDeal.floatingLeg.effectiveDate);
newDeal.floatingLeg.terminationDate = formatDateForNode(newDeal.floatingLeg.terminationDate);
return newDeal;
}
irsViewer.controller('HomeController', function HomeController($http, $scope, nodeService) {
let handleHttpFail = (resp) => {
console.log(resp.data)
@ -239,21 +276,24 @@ irsViewer.controller('HomeController', function HomeController($http, $scope, no
nodeService.getDeals().then((deals) => $scope.deals = deals);
});
irsViewer.controller('DealController', function DealController($http, $scope, nodeService) {
let initSemanticUi = () => {
$('.ui.accordion').accordion();
}
irsViewer.controller('DealController', function DealController($http, $scope, $routeParams, nodeService) {
initSemanticUi();
$scope.isLoading = nodeService.isLoading;
nodeService.getDeal('T000000001').then((deal) => $scope.deal = deal);
nodeService.getDeal($routeParams.dealId).then((deal) => $scope.deal = deal);
});
irsViewer.controller('CreateDealController', function CreateDealController($http, $scope, $location, nodeService) {
initSemanticUi();
$scope.isLoading = nodeService.isLoading;
$scope.deal = nodeService.newDeal();
$scope.createDeal = () => {
nodeService.createDeal().then((tradeId) => $location.path('#/deal/' + tradeId));
nodeService.createDeal(prepareDeal($scope.deal))
.then((tradeId) => $location.path('#/deal/' + tradeId), (resp) => {
$scope.formError = resp.data;
});
};
});

View File

@ -1,8 +1,356 @@
<div class="ui container">
<div class="ui negative message" id="form-error" ng-show="formError">{{formError}}</div>
<div class="ui active dimmer" ng-show="isLoading()">
<div class="ui text loader">Loading</div>
</div>
<form ng-submit="createDeal()">
<input type="submit" class="ui submit button" />
<h2>New Deal</h2>
<form class="ui form" ng-submit="createDeal()">
<div class="ui grid">
<div class="eight wide column">
<h3>Fixed Leg</h3>
<div class="field">
<label>Fixed Rate Payer</label>
<input type="text" name="fixedRatePayer" ng-model="deal.fixedLeg.fixedRatePayer"/>
</div>
<div class="field">
<label>Notional</label>
<div class="ui grid">
<div class="eight wide column">
<input type="text" name="quantity" ng-model="deal.fixedLeg.notional.quantity"/>
</div>
<div class="eight wide column">
<select class="ui dropdown fluid" name="token" ng-model="deal.fixedLeg.notional.token">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
</select>
</div>
</div>
</div>
<div class="field">
<label>Payment Frequency</label>
<div class="ui selection dropdown">
<input type="hidden" ng-model="deal.fixedLeg.paymentFrequency" />
<div class="default text">{{deal.fixedLeg.paymentFrequency}}</div>
<div class="menu">
<div class="item" data-value="Annual">Annual</div>
<div class="item" data-value="SemiAnnual">Semi Annual</div>
<div class="item" data-value="Quarterly">Quarterly</div>
</div>
</div>
</div>
<div class="field">
<label>Effective Date</label>
<input type="date" name="effectiveDate" ng-model="deal.fixedLeg.effectiveDateAccess" ng-model-options="{ getterSetter: true }"/>
</div>
<div class="field">
<label>Termination Date</label>
<input type="date" name="terminationDate" ng-model="deal.fixedLeg.terminationDate"/>
</div>
<div class="field">
<h3>Fixed Rate</h3>
<div class="ui container">
<h3>Ratio Unit</h3>
<div class="field">
<label>Value</label>
<input type="text" name="value" ng-model="deal.fixedLeg.fixedRate.ratioUnit.value"/>
</div>
</div>
</div>
<div class="field">
<label>Day Count Basis</label>
<input type="text" name="dayCountBasisDay" ng-model="deal.fixedLeg.dayCountBasisDay"/>
</div>
<div class="field">
<label>Day Bound Basis Year</label>
<input type="text" name="dayCountBasisYear" ng-model="deal.fixedLeg.dayCountBasisYear"/>
</div>
<div class="field">
<label>Roll Convention</label>
<input type="text" name="rollConvention" ng-model="deal.fixedLeg.rollConvention"/>
</div>
<div class="field">
<label>Day in Month</label>
<input type="text" name="dayInMonth" ng-model="deal.fixedLeg.dayInMonth"/>
</div>
<div class="field">
<label>Payment Rule</label>
<input type="text" name="paymentRule" ng-model="deal.fixedLeg.paymentRule"/>
</div>
<div class="field">
<label>Payment Delay</label>
<input type="text" name="paymentDelay" ng-model="deal.fixedLeg.paymentDelay"/>
</div>
<div class="field">
<label>Payment Calendar</label>
<input type="text" name="paymentCalendar" ng-model="deal.fixedLeg.paymentCalendar"/>
</div>
<div class="field">
<label>Interest Period Adjustment</label>
<input type="text" name="interestPeriodAdjustment"
ng-model="deal.fixedLeg.interestPeriodAdjustment"/>
</div>
</div>
<div class="eight wide column">
<h3>Floating Leg</h3>
<div class="field">
<label>Floating Rate Payer</label>
<input type="text" name="floatingRatePayer" ng-model="deal.floatingLeg.floatingRatePayer"/>
</div>
<div class="field">
<label>Notional</label>
<div class="ui grid">
<div class="eight wide column">
<input type="text" name="quantity" ng-model="deal.floatingLeg.notional.quantity"/>
</div>
<div class="eight wide column">
<select class="ui dropdown fluid" name="token" ng-model="deal.floatingLeg.notional.token">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
</select>
</div>
</div>
</div>
<div class="field">
<label>Payment Frequency</label>
<div class="ui selection dropdown">
<input type="hidden" ng-model="deal.floatingLeg.paymentFrequency" />
<div class="default text">{{deal.floatingLeg.paymentFrequency}}</div>
<div class="menu">
<div class="item" data-value="Annual">Annual</div>
<div class="item" data-value="SemiAnnual">Semi Annual</div>
<div class="item" data-value="Quarterly">Quarterly</div>
</div>
</div>
</div>
<div class="field">
<label>Effective Date</label>
<input type="date" name="effectiveDate" ng-model="deal.floatingLeg.effectiveDate"/>
</div>
<div class="field">
<label>Termination Date</label>
<input type="date" name="terminationDate" ng-model="deal.floatingLeg.terminationDate"/>
</div>
<div class="field">
<label>Day Count Basis Day</label>
<input type="text" name="dayCountBasisDay" ng-model="deal.floatingLeg.dayCountBasisDay"/>
</div>
<div class="field">
<label>Day Count Basis Year</label>
<input type="text" name="dayCountBasisYear" ng-model="deal.floatingLeg.dayCountBasisYear"/>
</div>
<div class="field">
<label>Roll Convention</label>
<input type="text" name="rollConvention" ng-model="deal.floatingLeg.rollConvention"/>
</div>
<div class="field">
<label>Fixing Roll Convention</label>
<input type="text" name="fixingRollConvention" ng-model="deal.floatingLeg.fixingRollConvention"/>
</div>
<div class="field">
<label>Day In Month</label>
<input type="text" name="dayInMonth" ng-model="deal.floatingLeg.dayInMonth"/>
</div>
<div class="field">
<label>Reset Day In Month</label>
<input type="text" name="resetDayInMonth" ng-model="deal.floatingLeg.resetDayInMonth"/>
</div>
<div class="field">
<label>Payment Rule</label>
<input type="text" name="paymentRule" ng-model="deal.floatingLeg.paymentRule"/>
</div>
<div class="field">
<label>Payment Delay</label>
<input type="text" name="paymentDelay" ng-model="deal.floatingLeg.paymentDelay"/>
</div>
<!--<div class="ui container"><h3>deal.floatingLeg.paymentCalendar</h3>
<div class="field">
<label>0</label>
<input type="text" name="0" ng-model="deal.floatingLeg.paymentCalendar.0"/>
</div>
</div>-->
<div class="field">
<label>Interest Period Adjustment</label>
<input type="text" name="interestPeriodAdjustment"
ng-model="deal.floatingLeg.interestPeriodAdjustment"/>
</div>
<div class="field">
<label>Fixing Period</label>
<input type="text" name="fixingPeriod" ng-model="deal.floatingLeg.fixingPeriod"/>
</div>
<div class="field">
<label>Reset Rule</label>
<input type="text" name="resetRule" ng-model="deal.floatingLeg.resetRule"/>
</div>
<div class="field">
<label>Fixings Per Payment</label>
<input type="text" name="fixingsPerPayment" ng-model="deal.floatingLeg.fixingsPerPayment"/>
</div>
<!--<div class="ui container"><h3>deal.floatingLeg.fixingCalendar</h3>
<div class="field">
<label>0</label>
<input type="text" name="0" ng-model="deal.floatingLeg.fixingCalendar.0"/>
</div>
</div>-->
<div class="field">
<label>Index</label>
<input type="text" name="index" ng-model="deal.floatingLeg.index"/>
</div>
<div class="field">
<label>IndexSource</label>
<input type="text" name="indexSource" ng-model="deal.floatingLeg.indexSource"/>
</div>
<div class="ui container">
<h3>Index Tenor</h3>
<div class="field">
<label>Name</label>
<input type="text" name="name" ng-model="deal.floatingLeg.indexTenor.name"/>
</div>
</div>
</div>
<div class="sixteen wide column">
<h3>Calculation</h3>
<div class="field">
<label>Expression</label>
<input type="text" name="expression" ng-model="deal.calculation.expression"/>
</div>
</div>
<div class="sixteen wide column">
<h3>Common</h3>
<div class="field">
<label>Notary</label>
<input type="text" name="notary" ng-model="deal.notary"/>
</div>
<div class="field">
<label>Base Currency</label>
<input type="text" name="baseCurrency" ng-model="deal.common.baseCurrency"/>
</div>
<div class="field">
<label>Eligible Currency</label>
<input type="text" name="eligibleCurrency" ng-model="deal.common.eligibleCurrency"/>
</div>
<div class="field">
<label>Eligible Credit Support</label>
<input type="text" name="eligibleCreditSupport" ng-model="deal.common.eligibleCreditSupport"/>
</div>
<div class="field">
<label>Independent Amounts</label>
<div class="ui grid">
<div class="eight wide column">
<input type="text" name="quantity" ng-model="deal.common.independentAmounts.quantity"/>
</div>
<div class="eight wide column">
<select class="ui dropdown fluid" name="token" ng-model="deal.common.independentAmounts.token">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
</select>
</div>
</div>
</div>
<div class="ui container">
<h3>Threshold</h3>
<div class="field">
<div class="ui grid">
<div class="eight wide column">
<input type="text" name="quantity" ng-model="deal.common.threshold.quantity"/>
</div>
<div class="eight wide column">
<select class="ui dropdown fluid" name="token" ng-model="deal.common.threshold.token">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
</select>
</div>
</div>
</div>
</div>
<div class="field">
<label>Minimum Transfer Amount</label>
<div class="ui grid">
<div class="eight wide column">
<input type="text" name="quantity" ng-model="deal.common.minimumTransferAmount.quantity"/>
</div>
<div class="eight wide column">
<select class="ui dropdown fluid" name="token" ng-model="deal.common.minimumTransferAmount.token">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
</select>
</div>
</div>
</div>
<div class="field">
<label>Rounding</label>
<div class="ui grid">
<div class="eight wide column">
<input type="text" name="quantity" ng-model="deal.common.rounding.quantity"/>
</div>
<div class="eight wide column">
<select class="ui dropdown fluid" name="token" ng-model="deal.common.rounding.token">
<option value="EUR">EUR</option>
<option value="USD">USD</option>
</select>
</div>
</div>
</div>
<div class="field">
<label>ValuationDate</label>
<input type="text" name="valuationDate" ng-model="deal.common.valuationDate"/>
</div>
<div class="field">
<label>NotificationTime</label>
<input type="text" name="notificationTime" ng-model="deal.common.notificationTime"/>
</div>
<div class="field">
<label>ResolutionTime</label>
<input type="text" name="resolutionTime" ng-model="deal.common.resolutionTime"/>
</div>
<div class="ui container">
<h3>InterestRate</h3>
<div class="field">
<label>Oracle</label>
<input type="text" name="oracle" ng-model="deal.common.interestRate.oracle"/>
</div>
<div class="ui container"><h3>Tenor</h3>
<div class="field">
<label>Name</label>
<input type="text" name="name" ng-model="deal.common.interestRate.tenor.name"/>
</div>
</div>
<div class="ui container"><h3>Ratio Unit</h3></div>
<div class="field">
<label>Name</label>
<input type="text" name="name" ng-model="deal.common.interestRate.name"/>
</div>
</div>
<div class="field">
<label>Address For Transfers</label>
<input type="text" name="addressForTransfers" ng-model="deal.common.addressForTransfers"/>
</div>
<!--<div class="ui container"><h3>deal.common.exposure</h3></div>
<div class="ui container"><h3>deal.common.localBusinessDay</h3>
<div class="field">
<label>0</label>
<input type="text" name="0" ng-model="deal.common.localBusinessDay.0"/>
</div>
<div class="field">
<label>1</label>
<input type="text" name="1" ng-model="deal.common.localBusinessDay.1"/>
</div>
</div>-->
<div class="field">
<label>Daily Interest Amount</label>
<input type="text" name="dailyInterestAmount" ng-model="deal.common.dailyInterestAmount"/>
</div>
<div class="field">
<label>Trade ID</label>
<input type="text" name="tradeID" ng-model="deal.common.tradeID"/>
</div>
<div class="field">
<label>Hash Legal Docs</label>
<input type="text" name="hashLegalDocs" ng-model="deal.common.hashLegalDocs"/>
</div>
</div>
<div class="sixteen wide column">
<input type="submit" class="ui submit primary button fluid"/>
</div>
</div>
</form>
</div>