-
Notifications
You must be signed in to change notification settings - Fork 5
/
timecalc.html
63 lines (59 loc) · 2.36 KB
/
timecalc.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Time Sheet Calculator</title>
</head>
<body>
<div class="outer-wrapper">
<h3>Time Sheet Calculator</h3>
<div class="table-wrapper">
<table class="main-table table table-bordered table-hover">
<thead>
<tr class="header">
<th>Time In</th>
<th>Time Out</th>
<th>Break</th>
<th>Hours</th>
</tr>
</thead>
<tfoot>
<tr class="total">
<td class="clear-button" colspan="1">
<input type="button" class="btn-small btn"
value="clear" data-bind='click:clearClick'>
</td>
<td></td>
<td class="total-label">Total</td>
<td><div class="week-total" data-bind='text:grandTotal'>0</div></td>
</tr>
</tfoot>
<tbody data-bind='foreach: rows'>
<tr class="day" data-bind='css:{error: rowTotal() < 0}'>
<td><input class='required'
data-bind='value:timeIn, click:cellClick, event:{blur:cellBlur}'></td>
<td><input class='required'
data-bind='value:timeOut, click:cellClick, event:{blur:cellBlur}'></td>
<td><input class='number'
data-bind='value:breakLen, click:cellClick, event:{blur:cellBlur}'></td>
<td><div class="day-total" data-bind='text:rowTotal'></div></td>
</tr>
</tbody>
</table>
</div> <!-- table-wrapper -->
<div class="instructions">
<h4>Tips:</h4>
<ul>
<li><strong>Time In/Out</strong> should be time of day ("9am", "8:15p").
<li><strong>Break</strong> should be a duration in hours (e.g. "1", "0.25").
<li> Both tab or enter advances to the next field.
<li> Additional rows are added automatically as necessary.
</ul>
</div> <!-- instructions -->
</div> <!-- outer-wrapper -->
<script src="lib/require-jquery.js" data-main="src/main"></script>
</body>
</html>