From dc0658f56e145a04efe86197722ac1efed2ac1e1 Mon Sep 17 00:00:00 2001 From: Clinton Alexander Date: Fri, 8 Jul 2016 11:36:29 +0100 Subject: [PATCH] App now loaded via requirejs. --- src/main/webdemo/bower.json | 3 +- src/main/webdemo/index.html | 9 +- src/main/webdemo/js/Deal.js | 9 + src/main/webdemo/js/app.js | 287 ++++++++++++++------------ src/main/webdemo/js/require-config.js | 30 +++ 5 files changed, 192 insertions(+), 146 deletions(-) create mode 100644 src/main/webdemo/js/Deal.js create mode 100644 src/main/webdemo/js/require-config.js diff --git a/src/main/webdemo/bower.json b/src/main/webdemo/bower.json index a643530be5..37f3d9f70f 100644 --- a/src/main/webdemo/bower.json +++ b/src/main/webdemo/bower.json @@ -18,6 +18,7 @@ "angular-route": "^1.5.7", "lodash": "^4.13.1", "angular-fcsa-number": "^1.5.3", - "jquery.maskedinput": "^1.4.1" + "jquery.maskedinput": "^1.4.1", + "requirejs": "^2.2.0" } } diff --git a/src/main/webdemo/index.html b/src/main/webdemo/index.html index 8dde6b2a4e..a0a4a39cad 100644 --- a/src/main/webdemo/index.html +++ b/src/main/webdemo/index.html @@ -10,14 +10,7 @@ IRS Demo Viewer - - - - - - - - +
diff --git a/src/main/webdemo/js/Deal.js b/src/main/webdemo/js/Deal.js new file mode 100644 index 0000000000..7e58a04ef9 --- /dev/null +++ b/src/main/webdemo/js/Deal.js @@ -0,0 +1,9 @@ +"use strict" + +function test() { + console.log("TESTING"); +} + +define([], () => { + return test; +}) diff --git a/src/main/webdemo/js/app.js b/src/main/webdemo/js/app.js index 121b9e6c16..17f069e7b1 100644 --- a/src/main/webdemo/js/app.js +++ b/src/main/webdemo/js/app.js @@ -174,163 +174,176 @@ let Deal = function(dealViewModel) { }; }; -let irsViewer = angular.module('irsViewer', ['ngRoute', 'fcsa-number']) - .config(($routeProvider, $locationProvider) => { - $routeProvider - .when('/', { - controller: 'HomeController', - templateUrl: 'view/home.html' - }) - .when('/deal/:dealId', { - controller: 'DealController', - templateUrl: 'view/deal.html' - }) - .when('/party/:partyId', { - templateUrl: 'view/party.html' - }) - .when('/create-deal', { - controller: 'CreateDealController', - templateUrl: 'view/create-deal.html' - }) - .otherwise({redirectTo: '/'}); - }) +define([ + 'angular', + 'angularRoute', + 'jquery', + 'fcsaNumber', + 'semantic', + 'maskedInput', + 'lodash', + 'js/Deal' +], +(angular, angularRoute, $, fcsaNumber, semantic, maskedInput, _, Deal) => { + let irsViewer = angular.module('irsViewer', ['ngRoute', 'fcsa-number']) + .config(($routeProvider, $locationProvider) => { + $routeProvider + .when('/', { + controller: 'HomeController', + templateUrl: 'view/home.html' + }) + .when('/deal/:dealId', { + controller: 'DealController', + templateUrl: 'view/deal.html' + }) + .when('/party/:partyId', { + templateUrl: 'view/party.html' + }) + .when('/create-deal', { + controller: 'CreateDealController', + templateUrl: 'view/create-deal.html' + }) + .otherwise({redirectTo: '/'}); + }); -let nodeService = irsViewer.factory('nodeService', ($http) => { - return new (function() { - let date = new Date(2016, 0, 1, 0, 0, 0); - let curLoading = {}; + let nodeService = irsViewer.factory('nodeService', ($http) => { + return new (function() { + let date = new Date(2016, 0, 1, 0, 0, 0); + let curLoading = {}; - let load = (type, promise) => { - curLoading[type] = true; - return promise.then((arg) => { - curLoading[type] = false; - return arg; - }, (arg) => { - curLoading[type] = false; - throw arg; - }); - } - - 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); - }); - } - - this.getDate = () => { - return load('date', $http.get('http://localhost:31338/api/irs/demodate')).then((resp) => { - const parts = resp.data.split("-"); - date = new Date(parts[0], parts[1] - 1, parts[2]); // JS uses 0 based months - return this.getDateModel(date); - }); - } - - this.updateDate = (type) => { - let newDate = date; - switch(type) { - case "year": - newDate.setFullYear(date.getFullYear() + 1); - break; - - case "month": - newDate.setMonth(date.getMonth() + 1); - break; - - case "day": - newDate.setDate(date.getDate() + 1); - break; + let load = (type, promise) => { + curLoading[type] = true; + return promise.then((arg) => { + curLoading[type] = false; + return arg; + }, (arg) => { + curLoading[type] = false; + throw arg; + }); } - return changeDateOnNode(newDate); - }; + 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); + }); + } - this.getDeals = () => { - return load('deals', $http.get('http://localhost:31338/api/irs/deals')).then((resp) => { - return resp.data; - }); - }; + this.getDate = () => { + return load('date', $http.get('http://localhost:31338/api/irs/demodate')).then((resp) => { + const parts = resp.data.split("-"); + date = new Date(parts[0], parts[1] - 1, parts[2]); // JS uses 0 based months + return this.getDateModel(date); + }); + } - this.getDeal = (dealId) => { - return load('deal' + dealId, $http.get('http://localhost:31338/api/irs/deals/' + dealId)).then((resp) => { - // Do some data modification to simplify the model - let deal = resp.data; - deal.fixedLeg.fixedRate.value = (deal.fixedLeg.fixedRate.ratioUnit.value * 100).toString().slice(0, 6); - console.log(deal); - return deal; - }); - }; + this.updateDate = (type) => { + let newDate = date; + switch(type) { + case "year": + newDate.setFullYear(date.getFullYear() + 1); + break; - this.getDateModel = (date) => { - return { - "year": date.getFullYear(), - "month": date.getMonth() + 1, // JS uses 0 based months - "day": date.getDate() + case "month": + newDate.setMonth(date.getMonth() + 1); + break; + + case "day": + newDate.setDate(date.getDate() + 1); + break; + } + + return changeDateOnNode(newDate); }; - } - this.isLoading = () => { - return _.reduce(Object.keys(curLoading), (last, key) => { - return (last || curLoading[key]); - }, false); - } + this.getDeals = () => { + return load('deals', $http.get('http://localhost:31338/api/irs/deals')).then((resp) => { + return resp.data; + }); + }; - this.newDeal = () => { - return dealViewModel; - } + this.getDeal = (dealId) => { + return load('deal' + dealId, $http.get('http://localhost:31338/api/irs/deals/' + dealId)).then((resp) => { + // Do some data modification to simplify the model + let deal = resp.data; + deal.fixedLeg.fixedRate.value = (deal.fixedLeg.fixedRate.ratioUnit.value * 100).toString().slice(0, 6); + console.log(deal); + return deal; + }); + }; - this.createDeal = (deal) => { - return load('create-deal', $http.post('http://localhost:31338/api/irs/deals', deal.toJson())) - .then((resp) => { - return deal.tradeId; - }, (resp) => { - throw resp; - }) - } + this.getDateModel = (date) => { + return { + "year": date.getFullYear(), + "month": date.getMonth() + 1, // JS uses 0 based months + "day": date.getDate() + }; + } + + this.isLoading = () => { + return _.reduce(Object.keys(curLoading), (last, key) => { + return (last || curLoading[key]); + }, false); + } + + this.newDeal = () => { + return dealViewModel; + } + + this.createDeal = (deal) => { + return load('create-deal', $http.post('http://localhost:31338/api/irs/deals', deal.toJson())) + .then((resp) => { + return deal.tradeId; + }, (resp) => { + throw resp; + }) + } + }); }); -}); -function initSemanticUi() { - $('.ui.accordion').accordion(); - $('.ui.dropdown').dropdown(); -} - -irsViewer.controller('HomeController', function HomeController($http, $scope, nodeService) { - let handleHttpFail = (resp) => { - console.log(resp.data) - $scope.httpError = resp.data + function initSemanticUi() { + $('.ui.accordion').accordion(); + $('.ui.dropdown').dropdown(); } - $scope.isLoading = nodeService.isLoading; - $scope.infoMsg = ""; - $scope.errorText = ""; - $scope.date = { "year": "...", "month": "...", "day": "..." }; - $scope.updateDate = (type) => { nodeService.updateDate(type).then((newDate) => {$scope.date = newDate}, handleHttpFail); }; + irsViewer.controller('HomeController', function HomeController($http, $scope, nodeService) { + let handleHttpFail = (resp) => { + console.log(resp.data) + $scope.httpError = resp.data + } - nodeService.getDate().then((date) => $scope.date = date); - nodeService.getDeals().then((deals) => $scope.deals = deals); -}); + $scope.isLoading = nodeService.isLoading; + $scope.infoMsg = ""; + $scope.errorText = ""; + $scope.date = { "year": "...", "month": "...", "day": "..." }; + $scope.updateDate = (type) => { nodeService.updateDate(type).then((newDate) => {$scope.date = newDate}, handleHttpFail); }; -irsViewer.controller('DealController', function DealController($http, $scope, $routeParams, nodeService) { - initSemanticUi(); + nodeService.getDate().then((date) => $scope.date = date); + nodeService.getDeals().then((deals) => $scope.deals = deals); + }); - $scope.isLoading = nodeService.isLoading; + irsViewer.controller('DealController', function DealController($http, $scope, $routeParams, nodeService) { + initSemanticUi(); - nodeService.getDeal($routeParams.dealId).then((deal) => $scope.deal = deal); -}); + $scope.isLoading = nodeService.isLoading; + + nodeService.getDeal($routeParams.dealId).then((deal) => $scope.deal = deal); + }); -irsViewer.controller('CreateDealController', function CreateDealController($http, $scope, $location, nodeService) { - initSemanticUi(); + irsViewer.controller('CreateDealController', function CreateDealController($http, $scope, $location, nodeService) { + initSemanticUi(); + + $scope.isLoading = nodeService.isLoading; + $scope.deal = nodeService.newDeal(); + $scope.createDeal = () => { + nodeService.createDeal(new Deal($scope.deal)) + .then((tradeId) => $location.path('#/deal/' + tradeId), (resp) => { + $scope.formError = resp.data; + }); + }; + $('input.percent').mask("9.999999%", {placeholder: "", autoclear: false}); + }); - $scope.isLoading = nodeService.isLoading; - $scope.deal = nodeService.newDeal(); - $scope.createDeal = () => { - nodeService.createDeal(new Deal($scope.deal)) - .then((tradeId) => $location.path('#/deal/' + tradeId), (resp) => { - $scope.formError = resp.data; - }); - }; - $('input.percent').mask("9.999999%", {placeholder: "", autoclear: false}); }); \ No newline at end of file diff --git a/src/main/webdemo/js/require-config.js b/src/main/webdemo/js/require-config.js new file mode 100644 index 0000000000..340704a347 --- /dev/null +++ b/src/main/webdemo/js/require-config.js @@ -0,0 +1,30 @@ +'use strict'; + +require.config({ + paths: { + angular: 'bower_components/angular/angular', + angularRoute: 'bower_components/angular-route/angular-route', + fcsaNumber: 'bower_components/angular-fcsa-number/src/fcsaNumber', + jquery: 'bower_components/jquery/dist/jquery', + semantic: 'semantic/semantic', + lodash: 'bower_components/lodash/lodash', + maskedInput: 'bower_components/jquery.maskedinput/dist/jquery.maskedinput' + }, + shim: { + 'angular' : {'exports' : 'angular'}, + 'angularRoute': ['angular'], + 'fcsaNumber': ['angular'], + 'semantic': ['jquery'], + 'maskedInput': ['jquery'] + }, + priority: [ + "angular" + ], + deps: [], + callback: null, + baseUrl: '', +}); + +require(['angular', 'js/app'], (angular, app) => { + var $html = angular.element(document.getElementsByTagName('html')[0]) +}); \ No newline at end of file