<!DOCTYPE html>
<html ng-app="calculatorApp">
<head>
<title>Test Angular</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!--
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.2.15/angular-locale_it-it.js"></script>
-->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-messages.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="calculatorCtrl">
<h1>Payment plan</h1>
<div>Test Fiels: <strong>{{testfield}}</strong></div>
<table class="table-bordered calendar-plan">
<tr class="evidence">
<th>Years/Months</th>
<th class="upper">Jan</th>
<th class="upper">Feb</th>
<th class="upper">Mar</th>
<th class="upper">Apr</th>
<th class="upper">May</th>
<th class="upper">Jun</th>
<th class="upper">Jul</th>
<th class="upper">Aug</th>
<th class="upper">Sep</th>
<th class="upper">Oct</th>
<th class="upper">Nov</th>
<th class="upper">Dec</th>
</tr>
<tr ng-repeat="c in calendar">
<th>{{ c.year }}</th>
<td ng-repeat="i in c.installments" ng-class="{ 'first' : i.first, 'last' : i.last, 'advance' : i.advance.value > 0, 'edited' : i.edited, 'final-installment' : i.last }" popover-trigger="{{ popoverFilter(i) }}" popover-placement="top" popover-title="{{i.id == 0 ? 'Advance' : 'Installment ' + i.id}}" popover-append-to-body="true" popover-template="popoverTemplate(i)" ng-init="payment= i; newpayment= i.amount.rounded_value" >
<p>{{ i.amount.value | currency:undefined:cents}}</p>
<hr class="warranty" ng-class="{'none' : i.addons.warranty !== true }">
<hr class="maintenance" ng-class="{'none' : i.addons.maintenance !== true }">
<hr class="advance" ng-class="{'none' : i.addons.advance !== true }">
</td>
</tr>
</table>
<script type="text/ng-template" id="advancePopoverTemplate.html">
<h2>{{payment.amount.value|currency:undefined:cents}}</h2>
<p>You can't change the first value</p>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn" type="button">Cancel</button>
</div>
</div>
</script>
<script type="text/ng-template" id="durationPopoverTemplate.html">
<h2>{{payment.amount.value|currency:undefined:cents}}</h2>
<p>You can't change the last value</p>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn" type="button">Cancel</button>
</div>
</div>
</script>
<script type="text/ng-template" id="editPopoverTemplate.html">
<div ng-controller="paymentPopoverCtrl as childCtrl">
<form name="editPayment" ng-hide="submit" ng-submit="childCtrl.updateInstallment(newpayment, period, submit, error)">
<h2>{{payment.amount.value|currency:undefined:cents}}</h2>
<div class="form-group" ng-class="{ 'has-error' : editPayment.newpayment.$invalid }">
<label>New Value:</label>
<input type="number" name="newpayment" ng-model="newpayment" class="form-control no-spinner" step="1" min="{{plan.financial_proposal.CustomCalculatorProduct.EditedInstallmentMinimumValue}}" required>
<input type="number" name="period" ng-model="childCtrl.period" hidden>
<span ng-messages="editPayment.newpayment.$error" class="help-block" role="alert">
<span ng-message="required">Devi indicare una nuova rata</span>
<span ng-message="min">La rata inserita è inferiore al minimo consentito</span>
<span ng-message="max">La rata inserita è superiore al massimo consentito</span>
</span>
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<a class="btn btn-danger" ng-click="childCtrl.close()"> <strong>X</strong> Cancel</a>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary" type="submit" ng-disabled="editPayment.$invalid">Save</button>
</div>
</div>
</form>
<div ng-show="submit">
<div ng-show="error">
<h2>Errore</h2>
<p>L'importo indicato non è ammissibile</p>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn" type="button" ng-click="submit=false;error=false">torna indietro</button>
</div>
</div>
</div>
<div ng-hide="error">
<h2>Successfully saved</h2>
</div>
</div>
</div>
</script>
</div>
</body>
</html>
(function () {
var app = angular.module("calculatorApp", ['ui.bootstrap', 'ngMessages']);
app.controller('calculatorCtrl', function($scope, $rootScope) {
$scope.calendar = [{"year":2015,"installments":[{},{},{},{},{},{},{"id":0,"installment":{},"entrata":{},"advance":{"value":2900,"rounded_value":2900},"amount":{"value":2900,"rounded_value":2900},"edited":false,"editable":false,"addons":[],"first":true},{"id":1,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":2,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":3,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":4,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":5,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}}]},{"year":2016,"installments":[{"id":6,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":7,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":8,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":9,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":10,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":11,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":12,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{"value":0,"rounded_value":0},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{"advance":true}},{"id":13,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":14,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":15,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":16,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":17,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}}]},{"year":2017,"installments":[{"id":18,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":19,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":20,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":21,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":22,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":23,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":24,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":25,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":26,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":27,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":28,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":29,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}}]},{"year":2018,"installments":[{"id":30,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":31,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":32,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":33,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":34,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":35,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":36,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":37,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":38,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":39,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":40,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":41,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}}]},{"year":2019,"installments":[{"id":42,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":43,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":44,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":45,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":46,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":47,"installment":{"value":99.84405259841404,"rounded_value":100},"entrata":{},"advance":{},"amount":{"value":99.84405259841404,"rounded_value":100},"edited":false,"editable":true,"addons":{}},{"id":48,"installment":{"value":4120,"rounded_value":4120},"entrata":{},"advance":{},"amount":{"value":4120,"rounded_value":4120},"edited":false,"editable":true,"addons":{},"last":true},{},{},{},{},{}]}];
$rootScope.testfield = 'testvalue';
$scope.popoverTemplate = function(cell){
if (cell.first === true){
return 'advancePopoverTemplate.html';
}else if(cell.last === true) {
return 'durationPopoverTemplate.html';
}else if(cell.editable === true) {
return 'editPopoverTemplate.html';
}else{
return 'none';
}
};
$scope.popoverFilter = function(cell){
var response = 'none';
if (cell.first === true || cell.last === true || cell.editable === true) {
response ='click';
}
return response;
};
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.reset = function(val) {
$scope.plan[val] = undefined;
$scope.updateAdvance();
};
});
app.controller('paymentPopoverCtrl', function($scope){
this.submit = false;
this.error = false;
this.close = function(){
console.log('close');
var popovers = document.querySelectorAll('[popover]');
angular.forEach(popovers, function( popover ){
angular.element( popover ).scope().tt_isOpen = false;
});
//then remove all popover divs
var popovers = document.querySelectorAll('.popover');
angular.forEach(popovers, function( popover ){
angular.element( popover ).remove();
});
};
this.updateInstallment = function(inflowValue, inflowPeriod){
console.log("updateInstallment");
var sendData = {inflowValue: inflowValue, inflowPeriod: inflowPeriod};
$scope.submit = true;
};
});
})();
.evidence {
background-color: #1e2a32 !important;
color:white;
}
.evidence h1, .evidence h2, .evidence p{
color:white;
}
.upper {
text-transform: uppercase;
}
.calendar-plan {
margin-top: 48px;
margin-bottom: 12px;
font-size: 11px;
}
.calendar-plan tr {
height: 42px;
}
.calendar-plan th {
font-family: ToyotaDisplayBold;
}
.calendar-plan th, .calendar-plan td {
width: 75px;
text-align: center;
}
.calendar-plan tr td p {
margin: 12px 0 0 0;
padding: 0;
}
.first.advance {
background-color: #dd7101!important;
cursor:pointer;
}
.final-installment {
background-color: #ffe001!important;
cursor:pointer;
}
.modify-installments {
background-color: #df0100;
}
td.first.advance p, td.final-installment p{
font-family: ToyotaDisplayBold;
}
td.addon {
background-color: #e5e5e7;
}
td.edited {
background-color: #e5cfd1;
color: #df0100!important;
text-decoration:underline;
position: relative;
font-family: ToyotaDisplayBold;
}
td.edited p{
color: #df0100!important;
}
td.edited:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 15px solid transparent;
border-bottom: 15px solid transparent;
border-top: 15px solid #df0100;
}
hr {
margin:0;
padding:0;
height:0;
border-width:0;
display:none;
}
hr.advance { display:block; border:2px solid #dd7101; }
hr.warranty { display:block; border:2px solid #65bb00; }
hr.maintenance { display:block; border:2px solid #1e2f39; }
hr.none { border:2px solid transparent; }