-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
205 lines (158 loc) · 11.5 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" sizes="192x192" href="icon.png">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="description" content="Hur delar man notan? Räkna ut optimala antalet Swish-betalningar./>
<link rel="manifest" href="manifest.json">
<meta charset="UTF-8">
<title>Splitta kostnaden</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Font-Awesome fonts -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/index.js"></script>
<script src="js/zenscroll-min.js"></script>
<script src="js/engine.js"></script>
<script src="js/names.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-48162518-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-48162518-2');
</script>
</head>
<body>
<a target="_blank" href="https://github.com/argillander/swishsplitt" id="github-corner" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
<div class="jumbotron jumbotron-fluid" id="header">
<div class="container">
<h1 class="display-4">Splitta kostnaden</h1>
<p class="lead">Fyll i utlägg och personer och klicka på <b>Räkna ut</b> för att optimera swishningen! Fyll även i personer utan
utlägg för att dela kostnaden med dessa.</p>
<!-- <button class="btn btn-primary btn-lg" id="addPersonButton" onclick="return addPersonHandler()">+</button> -->
</div>
</div>
<div id="main" class="justify-content-center container-fluid">
<form id="mainForm" class="">
<div id="formPersons" class="container">
<div class="form-group col-xl-3 pull-left person-input">
<label class="person-label" for="person1">Person 1</label>
<input type="text" class="form-control input-lg form-control-lg" id="person1" aria-describedby="" placeholder="ex. Joakim">
<input type="number" min="0" class="form-control input-lg form-control-lg" id="person1Amt" aria-describedby="" placeholder="ex. 1350 kr">
</div>
<div class="form-group col-sm-3 pull-left person-input" id="addPersonDiv">
</div>
</div>
</form>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="exampleModalLabel">Swisha såhär</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="transactionHistory">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal">Stäng</button>
<button type="button" class="btn btn-primary btn-lg" onclick="return printTransactions()">
Skriv ut</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="helpModalLabel">Hjälp</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="helpModalBody">
<p class="display-4">Såhär gör du</p>
Fyll i namn och utlagt belopp för varje person som ska vara med och dela på totalkostnaden. Klicka på <i>Räkna ut!</i> för att räkna ut
hur transaktionerna (swisharna) ska genomföras. Lägg till fler personer som ska dela på kostnaden genom att klicka på plustecknet. Lägg även till
personer med 0 kr i utlägg för att de ska vara med och dela på kostnaderna.
<p></p>
Det gör ingenting om du råkar lägga till fler personer än du behöver. Applikationen detekterar detta och räknar inte med dessa personer.
<p class="display-4">FAQ</p>
<p></p>
<b>Vad är Swish?</b>
<p></p>
<i><a target="_blank" href="http://www.getswish.com/">Detta</a></i>
<p></p>
<b>Sidan visar att jag ska swisha till någon som inte lagt ut pengar, hur går det till?</b>
<p></p>
<i>Algoritmen tillåter att man 'kors-swishar' för att jämna ut beloppet. Detta säkerställer att för n personer kommer maximalt n-1 swishningar
krävas för att lösa ut alla personer. Var bara lugn, det kommer att bli rätt ändå! </i>
<p></p>
<b>Det saknas en krona i totalsumman, var tog den vägen?</b>
<p></p>
<i>Vid uträkningen sker en öresavrundning som gör att totalbeloppet inte alltid kommer att summeras exakt. Utvecklaren är övertygad om att den
saknade kronan kan återbetalas till dess rättmätige ägare i form av ett leende, eller en vänlig gest när tillfälle ges.</i>
<p></p>
<b>Om man summerar alla transaktioner i listan så blir inte totalbeloppet detsamma som anges!?</b>
<p></p>
<i>Det stämmer! Alla utlagda pengar kommer inte att ha swishats runt eftersom det endast är mellanskillnaden mellan det belopp som ska betalas och
utlägget som kommer att räkas som en transaktion. Om man räknar samman alla inkommande transaktioner och de utlägg som gjorts så kommer alla att ha betalat
lika mycket. <br> <small>Hemlighet: Funktionalitet för att visa hela uträkningskedjan är under utveckling.</small></i>
<p></p>
<b>Jag saknar en funktionalitet på sidan :(</b>
<p></p>
<i>Coolt! Gör en bug report på GitHub (länk högst upp i hörnet), eller maila mig på joakim[at]argillander.se</i>
<p></p>
<hr>
<i>Skapad av Joakim Argillander, transaktionsalgoritm av Axel Johansson.</i>
<p></p>
<p class="font-weight-light" >Denna webbtjänst utgör endast en fingervisning hur utlägg kan delas upp och upphovsmannen tar inget ansvar för korrektheten i
den transaktionslösning som föreslås.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-lg" data-dismiss="modal">Stäng</button>
</div>
</div>
</div>
</div>
<div style="height:100%;width:100%"></div>
<footer class="footer">
<div class="alerts" id="alerts">
<div id="alert" class="alert alert-danger collapse center-block" role="alert">Hoppsan!
Fyll i minst två personer för att räkna ut hur ni ska swisha ;) Behöver du hjälp? <u><b onclick="javscript:$('#helpModal').modal();">Klicka HÄR!</b></u> <button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button> </div>
<div id="duplicate-name-alert" class="alert alert-danger collapse" role="alert">Hoppsan! Det verkar som att du har matat in två personer med samma namn. Försök igen med unika namn<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button> </div>
<div id="webapp-info" style="display:none" class="alert alert-primary alert-dismissible fade show" role="alert">
<strong></strong> Lägg till applikationen på hemskärmen för att enkelt komma åt den när du bäst behöver det!
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</div>
<div class="container" id="footer-container">
<button id="addPersonButton" class="btn btn-lg btn-success footer-button"
onclick="return addPerson(true)">Lägg till person</button>
<button id="calculateButton" class="btn btn-primary btn-lg btn-info footer-button"
onclick="return calculateHandler()">Räkna ut!</button>
<button id="calculateBut2ton" class="btn btn-secondary btn-lg footer-button" onclick="javscript:$('#helpModal').modal();">?</button>
</div>
</footer>
</body>
</html>