-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (108 loc) · 5.06 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en" ng-app="calculator">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style>
.table-nonfluid {
width: auto;
}
</style>
<title>{{ 'TITLE' | translate }}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bower-angular-translate/2.5.2/angular-translate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.28/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.4.0/MathJax.js?config=TeX-AMS_HTML">
</script>
</head>
<body>
<a href="https://github.com/mycaule/gross-net-pay"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
<div class="container" ng-controller="salaryController">
<h2>{{ 'TITLE' | translate }}</h2>
<div class="alert alert-info" role="alert">
{{ 'DESCRIPTION1' | translate }}<p>
{{ 'DESCRIPTION2' | translate }}
</div>
<table id="calc" class="table table-condensed table-nonfluid">
<tr>
<th>{{ 'SALARY' | translate }}</th>
<th>{{ 'GROSS' | translate }}</th>
<th>{{ 'NET' | translate }}</th>
</tr>
<tr>
<td>{{ 'HOURLY' | translate }}</td>
<td><input ng-model='hg' ng-change="grossToNet('hour')"></td>
<td><input ng-model='hn' ng-change="netToGross('hour')"></td>
</tr>
<tr>
<td>{{ 'MONTHLY' | translate }}</td>
<td><input ng-model="mg" ng-change="grossToNet('month')"></td>
<td><input ng-model="mn" ng-change="netToGross('month')"></td>
</tr>
<tr>
<td>{{ 'ANNUALLY' | translate }}</td>
<td><input ng-model="ag" ng-change="grossToNet('year')"></td>
<td><input ng-model="an" ng-change="netToGross('year')"></td>
</tr>
</table>
<table id="params" class="table table-condensed table-nonfluid">
<tr>
<th>{{ 'PARAMETERS' | translate }}</th>
<th></th>
</tr>
<tr>
<td>{{ 'COUNTRY' | translate }}</td><td><select ng-model="country" ng-options="opt as opt.label for opt in countries" ng-change="setLang()"></select></td>
</tr>
<tr>
<td>{{ 'HOURS_PER_WEEK' | translate }}</td>
<td><input type="number" min="1" max="168" ng-model="hw" ng-change="grossToNet('all')"></td>
</tr>
<tr>
<td>{{ 'MONTHS_PER_YEAR' | translate }}</td>
<td><input type="number" min="1" max="15" ng-model="my" ng-change="grossToNet('all')"></td>
</tr>
<tr>
<td>{{ 'TAX_RATE' | translate }}</td>
<td><input type="number" min="0" max="100" ng-model="tr" ng-change="grossToNet('all')"></td>
</tr>
</table>
<button class="btn btn-primary btn-sm" ng-class="{active: withExplain}" ng-click="toggleExplain()">{{ 'EXPLANATIONS' | translate }}</button><p>
<div class="alert alert-info" role="alert" ng-show="withExplain && country.value==='en-US'">
$h_w$, $m_y$, $t_r$ are the computation parameters.<p>
Let $k = 1-t_r/100$ and $w_m = 52/m_y$, then the net values can be obtained from the annual gross value $a_G$ with the following equations :<p>
$\left\{
\begin{array}{c}
m_G \cdot m_y = a_G \\
h_G \cdot h_w \cdot w_m = m_G \\
a_N = k \cdot a_G \\
m_N = k \cdot m_G \\
h_N = k \cdot h_G
\end{array}
\right.$ <p>
Values above are rounded to the nearest integer.
</div>
<div class="alert alert-info" role="alert" ng-show="withExplain && country.value==='fr-FR'">
$h_w$, $m_y$, $t_r$ sont les paramètres de calcul.<p>
Soit $k = 1-t_r/100$ et $w_m = 52/m_y$, alors les valeurs net sont obtenues à partir des valeurs brutes $a_G$ à travers les équations suivantes :<p>
$\left\{
\begin{array}{c}
m_G \cdot m_y = a_G \\
h_G \cdot h_w \cdot w_m = m_G \\
a_N = k \cdot a_G \\
m_N = k \cdot m_G \\
h_N = k \cdot h_G
\end{array}
\right.$ <p>
Les valeurs sont arrondies à l'entier le plus proche.
</div>
</div>
<script src="salaryController.js"></script>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}
});
</script>
</body>
</html>