work/timetrack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added clock

Browse Source
This commit is contained in:
Jörg Henke
2022-07-19 20:23:26 +02:00
parent 2f26d180fe
commit f98ceeb68b
7 changed files with 97 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/main/resources/static/css/style.css
View File

@ -239,3 +239,8 @@ body {
border-radius: 4px;
border: 1px solid silver;
}
.clock {
background-image: url("../png/clock.png");
background-repeat: no-repeat;
}

85
src/main/resources/static/js/clock.js Normal file
View File

@ -0,0 +1,85 @@
'use strict';
/**
* Coolock Definition
*/
class Clock {
constructor(size, selector, color, background) {
var canvas = $("<canvas>");
canvas.attr("id", "clockPanel");
canvas.attr("width", size);
canvas.attr("height", size);
canvas.css("border-radius", "4px");
canvas.css("background", background);
canvas[0].getContext("2d").canvas.width = size;
canvas[0].getContext("2d").canvas.height = size - 3; // -3 removes unneeded overlap
$(selector).append(canvas);
var ctx = canvas[0].getContext("2d");
this.ctx = ctx;
this.size = size;
this.background = background;
this.color = color;
this.redraw();
}
drawCircle = function(ctx, x, y, r, w) {
ctx.strokeStyle = this.color;
ctx.lineWidth = w;
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.stroke();
};
drawArrow = function(ctx, x1, y1, x2, y2, col) {
ctx.strokeStyle = col;
ctx.fillStyle = this.color;
ctx.lineCap = "round";
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
ctx.stroke();
};
redraw = function() {
var ctx = this.ctx;
var color = this.color;
var size = this.size;
var halfSize = size / 2;
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var hoursTotal = (h + m / 60 + s / 3600);
ctx.clearRect(0, 0, size, size);
ctx.beginPath();
ctx.fillStyle = this.background;
ctx.fillRect(0, 0, size, size);
// small hour pointer
this.drawArrow(ctx, size / 2 + 0.2 * size * Math.cos(hoursTotal * Math.PI / 6 - Math.PI / 2),
size / 2 + 0.2 * size * Math.sin(hoursTotal * Math.PI / 6 - Math.PI / 2),
halfSize, halfSize, color);
// huge minute pointer
this.drawArrow(ctx, size / 2 + 0.4 * size * Math.cos(6 * (m + s / 60) * Math.PI / 180 - Math.PI / 2),
size / 2 + 0.4 * size * Math.sin(6 * (m + s / 60) * Math.PI / 180 - Math.PI / 2),
halfSize, halfSize, color);
ctx.beginPath();
ctx.arc(halfSize, halfSize, 0.04 * size, 0, Math.PI * 2);
$("#clockPanel").attr("title", this.lz(h) + ":" + this.lz(m) + ":" + this.lz(s));
setTimeout(this.redraw.bind(this), 1000);
};
lz = function(d) {
return (d > 9) ? "" + d : "0" + d;
}
}

BIN
src/main/resources/static/png/clock.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/main/resources/static/png/favicon/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 717 B

BIN
src/main/resources/static/png/favicon/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 648 B

6
src/main/resources/templates/done/item.html
View File

@ -29,7 +29,6 @@
</div>
<div class="col-sm-10">
<button type="button" class="btn btn-danger" value="" onclick="resetValue('#inputTimefrom', '')"><span class="fas fa-trash-alt"></span></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-105))"><script type="text/javascript">document.write(nowPlus(-105))</script></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-90))"><script type="text/javascript">document.write(nowPlus(-90))</script></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-75))"><script type="text/javascript">document.write(nowPlus(-75))</script></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-60))"><script type="text/javascript">document.write(nowPlus(-60))</script></button>
@ -37,7 +36,7 @@
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(-30))"><script type="text/javascript">document.write(nowPlus(-30))</script></button>
<button type="button" class="btn btn-primary" onclick="resetValue('#inputTimefrom', nowPlus(-15))"><script type="text/javascript">document.write(nowPlus(-15))</script></button>
<button type="button" class="btn btn-primary" onclick="resetValue('#inputTimefrom', nowPlus(0))"><script type="text/javascript">document.write(nowPlus(0))</script></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(15))"><script type="text/javascript">document.write(nowPlus(15))</script></button>
<button type="button" class="btn btn-primary" onclick="resetValue('#inputTimefrom', nowPlus(15))"><script type="text/javascript">document.write(nowPlus(15))</script></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimefrom', nowPlus(30))"><script type="text/javascript">document.write(nowPlus(30))</script></button>
</div>
</div>
@ -48,7 +47,6 @@
</div>
<div class="col-sm-10">
<button type="button" class="btn btn-danger" value="" onclick="resetValue('#inputTimeuntil', '')"><span class="fas fa-trash-alt"></span></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-105))"><script type="text/javascript">document.write(nowPlus(-105))</script></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-90))"><script type="text/javascript">document.write(nowPlus(-90))</script></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-75))"><script type="text/javascript">document.write(nowPlus(-75))</script></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-60))"><script type="text/javascript">document.write(nowPlus(-60))</script></button>
@ -56,7 +54,7 @@
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(-30))"><script type="text/javascript">document.write(nowPlus(-30))</script></button>
<button type="button" class="btn btn-primary" onclick="resetValue('#inputTimeuntil', nowPlus(-15))"><script type="text/javascript">document.write(nowPlus(-15))</script></button>
<button type="button" class="btn btn-primary" onclick="resetValue('#inputTimeuntil', nowPlus(0))"><script type="text/javascript">document.write(nowPlus(0))</script></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(15))"><script type="text/javascript">document.write(nowPlus(15))</script></button>
<button type="button" class="btn btn-primary" onclick="resetValue('#inputTimeuntil', nowPlus(15))"><script type="text/javascript">document.write(nowPlus(15))</script></button>
<button type="button" class="btn btn-secondary" onclick="resetValue('#inputTimeuntil', nowPlus(30))"><script type="text/javascript">document.write(nowPlus(30))</script></button>
</div>
</div>

9
src/main/resources/templates/layout/main.html
View File

@ -8,7 +8,6 @@
<link rel="stylesheet" type="text/css" th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/1.11.3/css/dataTables.bootstrap5.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/webjars/font-awesome/5.15.4/css/all.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/fullCalendar/main.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/css/style.css}">
<link rel="icon" type="image/png" sizes="32x32" th:href="@{/png/favicon/favicon-32x32.png}" />
<link rel="icon" type="image/png" sizes="16x16" th:href="@{/png/favicon/favicon-16x16.png}" />
@ -17,9 +16,8 @@
<script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/webjars/datatables/1.11.3/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/webjars/datatables/1.11.3/js/dataTables.bootstrap5.min.js}"></script>
<script th:src="@{/js/fullCalendar/main.min.js}"></script>
<script th:src="@{/js/fullCalendar/locales-all.min.js}"></script>
<script th:src="@{/js/helper.js}"></script>
<script th:src="@{/js/clock.js}"></script>
</head>
<body>
@ -45,10 +43,13 @@
<li class="nav-item"><a class="nav-link titlemod"><font layout:fragment="title"></font></a></li>
<li layout:fragment="menuitem" style="list-style-type: none"></li>
<li layout:fragment="menu" style="list-style-type: none"></li>
<li class="nav-item ms-auto">Clock</li>
<li class="nav-item ms-auto"><div id="clock" class="clock"></div></li>
</ul>
</div>
</div>
<script type="text/javascript">
new Clock(38, "#clock", "#000", "rgba(255, 255, 255, 0.0)");
</script>
</nav>
<main layout:fragment="content" class="page body"></main>
</body>