angularPaymentAllocation/index.html at master · jojoduquartier/angularPaymentAllocation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Credit Card Payment Allocation</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <script src="node_modules/chart.js/dist/Chart.min.js"></script>
    <script src="node_modules/angular-chart.js/dist/angular-chart.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</head>

<body>

    <div ng-app="myApp" ng-controller="myCtrl" name="myForm" class="container-fluid" style="margin-top:1em;">
        <span>
            Ever Wondered if you should pay more towards a specific credit card and less towards another?
            This tool provides the suggested payments that yield the lowest total balance across all cards.
            Provide a budget and balances with minimum/maximum payment constraints and the budget is allocated
            to the different cards accordingly.

            Please checkout the following <a
                href="https://docs.google.com/presentation/d/e/2PACX-1vRSqEUMY374Lm09G6MNG6jG4r_-SO-wgrO8EVveCADcd9QZkTvruOHildcwOkQxMgTIEnJGoEYyx1Gy/pub?start=true&loop=true&delayms=10000">slide
                show guide</a>

            <br>

            Please read <a href="https://github.com/jojoduquartier/creditpaymentallocation/wiki">this wiki</a> for more
            explanation.
        </span>
        <br>
        <br>
        <div class="form-group row">
            <label for="budget" class="col-sm-1 col-form-label"><strong>Budget</strong> </label>
            <div class="col-sm-2">
                <input ng-model="budget" type="text" ng-required="true" min="0" class="form-control">
            </div>
        </div>

        <div class="row" id="userinput">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Balance</th>
                        <th scope="col">APR</th>
                        <th scope="col">Minimum Payment</th>
                        <th scope="col">Maximum Payment</th>
                        <th scope="col">Current Payment</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- can easily have bounds since we have each property of the cards -->
                    <tr ng-repeat="card in cards">
                        <td><input ng-model="card.cardNickName" type="text" ng-required="true"></td>
                        <td><input ng-model="card.cardBalance" min="0" type="number" ng-required="true"></td>
                        <td><input ng-model="card.cardApr" type="number" ng-required="true" min="0" max="100"></td>
                        <td><input ng-model="card.minPayment" min="0" type="number" ng-max="{{card.cardBalance}}"
                                ng-required="true"></td>
                        <td><input ng-model="card.maxPayment" type="number" ng-min="{{card.minPayment}}"
                                ng-max="{{card.cardBalance}}"></td>
                        <td><input ng-model="card.actualPayments" type="number" ng-min="{{card.minPayment}}"
                                ng-max="{{card.cardBalance}}" ng-required="true"></td>

                    </tr>
                    <tr>
                        <td colspan="3"> <button class="btn btn-primary" ng-click="addCard()">New Card</button></td>
                        <td colspan="3" align="right"><button class="btn btn-info" ng-click="getData()">Get Optimal
                                Payment</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- Note that we bind the data and lebels here! so we could have many charts!! -->
        <div class="row">
            <div class="col">
                <!-- current -->
                <canvas id="doughnut" width="auto" height="auto" class="chart chart-doughnut"
                    chart-data="currentPaymentData" chart-labels="labels" chart-options="currentPayOptions"></canvas>
            </div>
            <div class="col">
                <!-- suggested -->
                <canvas id="doughnut" width="auto" height="auto" class="chart chart-doughnut" chart-data="suggesteddata"
                    chart-labels="labels" chart-options="suggestedPayOptions"></canvas>
            </div>
        </div>

        <div ng-show="progressLabels" class="row">
            <div class="row">
                <select ng-model="selectedName" ng-options="label for label in progressLabels"></select>
            </div>
            <div class="card col">
                <div class="card-header">
                    Remaining Balance
                </div>
                <div class="card-body">
                    <div class="row">
                        <canvas id="bar" width="auto" height="auto" class="chart chart-bar"
                            chart-data="specificSeriesData()" chart-labels="months" chart-series="series"
                            chart-options="remainingBalanceOptions" chart-click="onClick">
                        </canvas>
                    </div>
                </div>
            </div>

        </div>
        <br>
        <br>
        <footer>
            This is a one page webapp. <strong>No data is being collected</strong>
        </footer>

    </div>
</body>

<script type="text/javascript">
    var app = angular.module('myApp', ["chart.js"]);
    app.controller('myCtrl', function ($scope, $http) {
        // initialize some cards
        $scope.cards = [
            { cardNickName: 'Prime', cardBalance: 100, cardApr: 10, minPayment: 5, maxPayment: 100, actualPayments: 10 },
            { cardNickName: 'United', cardBalance: 200, cardApr: 15, minPayment: 7, maxPayment: 200, actualPayments: 10 }
        ];

        // The budget
        $scope.budget = 20;

        // Add cards: TODO - user must have different nicknames for all cards
        $scope.addCard = function () {
            $scope.cards.push(
                {
                    cardNickName: `Card ${$scope.cards.length}`,
                    cardBalance: null,
                    cardApr: null,
                    minPayment: null,
                    maxPayment: null
                }
            );
        };

        // this is for the bar chart
        $scope.onClick = function (points, evt) {
            console.log(points, evt);
        };

        // this function will be used to get the proper data for the selected card
        $scope.specificSeriesData = function () {
            if ($scope.progressSeries) {
                return $scope.progressSeries[$scope.selectedName].data;
            }
        };

        // title option
        $scope.currentPayOptions = {
            title: {
                display: true,
                text: 'Current Payment'
            }
        };

        $scope.suggestedPayOptions = {
            title: {
                display: true,
                text: 'Suggested Payment'
            }
        };

        $scope.remainingBalanceOptions = {
            title: {
                display: true,
                text: 'Remaining Balance'
            }
        };

        // this will get the optimal data solely for one month
        $scope.getOptimal = function () {
            var dataObj = {
                budget: $scope.budget,
                cards: $scope.cards
            };

            var url = 'https://ccrdapi.herokuapp.com/cards';

            $http.post(url, dataObj).then(function (response) {

                $scope.updatedData = response.data;
                $scope.suggesteddata = response.data.updatedCards.map(x => x.suggestedPayment);
                $scope.labels = response.data.updatedCards.map(x => x.cardNickName);
                $scope.currentPaymentData = response.data.updatedCards.map(x => x.actualPayments);

            }, function (error) {

                console.log(error)

            });
        };

        // this will get the next 13 months data. Obviously the stupid assumption of constant payment is bad
        $scope.getProgress = function () {
            var dataObj = {
                budget: $scope.budget,
                cards: $scope.cards
            };

            console.log(dataObj);

            var url = 'https://ccrdapi.herokuapp.com/cards/12';

            $http.post(url, dataObj).then(function (response) {

                $scope.progressData = response.data;
                $scope.progressLabels = $scope.labels.map(x => x);
                $scope.progressLabels.push('TOTAL');
                $scope.months = response.data.progress[0].projection.map(x => Object.keys(x)[0]);
                $scope.series = [
                    "Remaining Balance on Minimum Payments",
                    "Remaining Balance on Current Payments",
                    "Remaining Balance on Suggested Payments"
                ];
                // complication - might want to have tabs so that user can actually select which card to use!
                // tab names would be the card nicknames already bound to label
                // so we can generate a dinctionay where key - card nickname and value is: array of 3 serries :)
                var progress = response.data.progress;
                var progressArray = {};
                var totalArray = [
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // minArray
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // current
                    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] // suggested
                ];

                for (i = 0; i < progress.length; i++) {
                    var thename = progress[i].cardNickName;
                    var minArray = [];
                    var currentArray = [];
                    var suggestedArray = [];
                    var projection = progress[i].projection;

                    for (j = 0; j < projection.length; j++) {
                        var vals = Object.keys(projection[j]).map(function (key) {
                            return projection[j][key];
                        });

                        minArray.push(vals[0].nextBalanceOnMin);
                        currentArray.push(vals[0].nextBalanceOnCurrentPayment);
                        suggestedArray.push(vals[0].nextBalanceOnSuggested);
                    };

                    // add the total
                    totalArray[0] = [...minArray.keys()].map(k => totalArray[0][k] + minArray[k]);
                    totalArray[1] = [...minArray.keys()].map(k => totalArray[1][k] + currentArray[k]);
                    totalArray[2] = [...minArray.keys()].map(k => totalArray[2][k] + suggestedArray[k]);

                    progressArray[thename] = {
                        'cardNickName': thename,
                        'data': [
                            minArray,
                            currentArray,
                            suggestedArray
                        ]
                    };
                };

                progressArray['TOTAL'] = {
                    'cardNickName': 'TOTAL',
                    'data': totalArray
                };
                $scope.progressSeries = progressArray;
                $scope.selectedName = 'TOTAL';

            }, function (error) {

                console.log(error)

            });
        };

        // this just brings together the two functions for that reach the API
        $scope.getData = function () {
            $scope.getOptimal();
            $scope.getProgress();
        };
    });
</script>

</html>