timetracker/index.html at master · luciash/timetracker · 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>TimeTracker</title>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no" />
        <meta name="mobile-web-app-capable" content="yes" />

        <link rel="stylesheet" href="libs/vendor/bootstrap/dist/css/bootstrap.min.css" />
        <link rel="stylesheet" href="libs/vendor/bootstrap/dist/css/bootstrap-theme.min.css" />

        <!-- It does not exists on Tiki -->
        <script type="text/javascript" src="libs/vendor/moment/min/moment.min.js"></script>

        <script type="text/javascript" src="libs/vendor/handlebars/handlebars.min.js"></script>
        <script type="text/javascript" src="libs/vendor/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="libs/vendor/bootstrap/dist/js/bootstrap.min.js"></script>

        <script type="text/javascript" src="libs/js/timetracker.js"></script>

        <script type="text/javascript">
        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register('sw.js', {scope: '/'})
                .then(function(reg) {
                    console.log('Registration succeeded. Scope is ' + reg.scope);
                }).catch(function(error) {
                    console.log('Registration failed with ' + error);
                });
        }
        </script>
    </head>
    <body>
        <div class="container">
            <h1>Tiki Time Tracker</h1>

            <section>
                <h2>Start a new task</h2>

                <div class="row">
                    <div class="col-md-4">
                        <p>Provide some information for this task.</p>

                        <div class="form-group">
                            <label for="demo-title">Title</label>
                            <input type="text" class="form-control" id="demo-title" bind="title" />
                        </div>

                        <div class="form-group">
                            <label for="demo-customer">Customer</label>
                            <input type="text" class="form-control" id="demo-customer" bind="customer" />
                        </div>

                        <div class="form-group">
                            <label for="demo-date">Date</label>
                            <input type="text" class="form-control" id="demo-date" bind="date"/>
                        </div>
                    </div>


                    <div class="col-md-4">
                        <p>You can leave this fields and just press play.</p>

                        <div class="form-group">
                            <label for="demo-starttime">Start time</label>
                            <input type="text" class="form-control" id="demo-starttime" bind="starttime" />
                        </div>

                        <div class="form-group">
                            <label for="demo-endtime">End time</label>
                            <input type="text" class="form-control" id="demo-endtime" bind="endtime" />
                        </div>

                        <div class="form-group">
                            <label for="demo-spenttime">Spent time</label>
                            <input type="text" class="form-control" id="demo-spenttime" bind="spenttime" />
                        </div>
                    </div>

                    <div class="col-md-4">
                        <p>Use controls below to control and save logs</p>

                        <div class="form-group text-center">
                            <div class="btn-group btn-group-lg">
                                <button class="btn btn-xlarge btn-success" timer="play">
                                    <span class="glyphicon glyphicon-play"></span>
                                </button>

                                <button class="btn btn-large btn-warning" timer="pause">
                                    <span class="glyphicon glyphicon-pause"></span>
                                </button>

                                <button class="btn btn-large btn-info" timer="save">
                                    <span class="glyphicon glyphicon-floppy-disk"></span>
                                </button>

                                <button class="btn btn-large btn-danger" timer="discard">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </button>

                            </div>

                            <h3 class="text-center" id="demo-timer" bind="spenttime">00:00:00</h3>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <h2>Summary</h2>
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th rowspan="2">Date</th>
                            <th colspan="4" class="text-center">Timer</th>
                            <th rowspan="2">Customer</th>
                            <th rowspan="2">Title</th>
                        </tr>
                        <tr>
                            <th>Start</th>
                            <th>End</th>
                            <th>Spent</th>
                            <th>Paused</th>
                        </th>
                    </thead>
                    <tbody role="render-area">
                        <script type="text/x-handlebars-template" role="template">
                            {{#each entries}}
                            <tr>
                                <td>{{ date }}</td>
                                <td>{{ starttime }}</td>
                                <td>{{ endtime }}</td>
                                <td>{{ spenttime }}</td>
                                <td>{{ pausedtime }}</td>
                                <td>{{ customer }}</td>
                                <td>{{ title }}</td>
                            </tr>
                            {{/each}}
                        </script>
                    </tbody>
                </table>
            </section>
        </div>
    </body>
</html>