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

prepared calendar

Browse Source
This commit is contained in:
Jörg Henke
2022-07-26 16:26:10 +02:00
parent 8b14e49952
commit f754832ee0
5 changed files with 94 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
build.gradle
View File

@ -5,7 +5,7 @@ plugins {
}
group = 'de.jottyfan'
version = '1.2.2'
version = '1.2.3'
sourceCompatibility = '11'
ext['spring-framework.version'] = '5.3.18'

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

@ -75,7 +75,7 @@ body {
}
.body {
height: calc(100% - 2px);
height: calc(100% - 4px);
width: 100%;
overflow: auto;
}
@ -189,10 +189,14 @@ body {
.hoverlink {
text-decoration: none;
color: black;
padding: 4px;
border: 1px solid rgba(1, 1, 1, 0.0);
border-radius: 4px;
}
.hoverlink:hover {
color: #1a5f64;
color: white;
background-image: linear-gradient(to right bottom, #99c1f1, #1a5f64);
}
.boldtext {
@ -276,4 +280,12 @@ body {
.clock {
background-image: url("../png/clock.png");
background-repeat: no-repeat;
}
.schedule {
min-width: 90vh;
max-width: 90vh;
min-height: calc(90vh - 100px);
max-height: calc(90vh - 100px);
margin: 8px;
}

64
src/main/resources/static/js/schedule.js Normal file
View File

@ -0,0 +1,64 @@
class Schedule {
constructor(selector, width, height) {
var canvas = $("<canvas>");
canvas.attr("id", "scheduleCanvas");
canvas.width(width);
canvas.height(height);
canvas.attr("width", width);
canvas.attr("height", height);
canvas[0].getContext("2d").canvas.width = parseInt(width);
canvas[0].getContext("2d").canvas.height = parseInt(height);
$(selector).append(canvas);
var ctx = canvas[0].getContext("2d");
this.ctx = ctx;
this.drawBackgroundWeek(ctx, width, height);
}
drawBackgroundDay = function(ctx, width, height, offsetx) {
var hourHeight = parseInt(height / 24);
for (var i = 0; i < 24; i++) {
var x = parseInt(offsetx);
var y = parseInt(i * hourHeight);
var w = parseInt(width);
var h = parseInt(hourHeight);
ctx.fillStyle = (i > 8 & i <= 17) ? (i % 2 ? "#cdf0fa" : "#9acbd9") : (i % 2 ? "#faf0fa" : "#d9cbd9");
ctx.fillRect(x, y, w, h);
}
ctx.strokeStyle = "white";
ctx.strokeRect(offsetx, 0, width, height);
}
drawBackgroundWeek = function(ctx, width, height) {
var dayWidth = width / 7;
for (var i = 0; i < 7; i++) {
this.drawBackgroundDay(ctx, dayWidth, height, i * dayWidth + 1);
}
}
time2pixel = function (time, hourHeight) {
var timeArray = time.split(":");
var hours = parseInt(timeArray[0]);
var minutes = parseInt(timeArray[1]);
var pixels = parseInt((hours + (minutes / 60)) * hourHeight);
console.log("convert " + time + " to " + pixels);
return pixels;
}
drawSlot = function(ctx, slotNr, from, until, color, fillColor) {
ctx.strokeStyle = color;
ctx.fillStyle = fillColor;
ctx.lineCap = "round";
ctx.lineWidth = 1;
var hourHeight = parseInt(parseInt($("#scheduleCanvas").height()) / 24);
var dayWidth = parseInt(parseInt($("#scheduleCanvas").width()) / 7);
var x = parseInt(slotNr * dayWidth);
var y = parseInt(this.time2pixel(from, hourHeight));
var w = dayWidth;
var h = parseInt(this.time2pixel(until, hourHeight) - y);
ctx.beginPath();
console.log("draw " + x + "," + y + " -> +" + w + "," + h);
ctx.fillRect(x, y, w, h);
ctx.strokeRect(x, y, w, h);
}
}

14
src/main/resources/templates/done/list.html
View File

@ -32,6 +32,7 @@
<main layout:fragment="content">
<ul class="nav nav-tabs navback" role="tablist">
<li class="nav-item"><a class="nav-link navlinkstyle active" data-bs-toggle="tab" href="#div_list">Liste</a></li>
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_schedule">Kalender</a></li>
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_project">Projekt</a></li>
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_module">Modul</a></li>
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_job">Aufgabe</a></li>
@ -90,6 +91,9 @@
</tfoot>
</table>
</div>
<div id="div_schedule" class="tab-pane fade tab-pane-table">
<div id="schedule" class="schedule"></div>
</div>
<div id="div_project" class="tab-pane fade tab-pane-table">
<table id="project_table" class="table table-striped table-condensed">
<thead>
@ -181,6 +185,16 @@
</div>
<script type="text/javascript">
$(document).ready(function() {
let width = parseInt($("#schedule").css("min-width"));
let height = parseInt($("#schedule").css("min-height"));
var schedule = new Schedule("#schedule", width, height);
var ctx = $("#scheduleCanvas")[0].getContext("2d");
/* TODO: replace by weekly times */
schedule.drawSlot(ctx, 2, "07:15", "10:30", "black", "green");
schedule.drawSlot(ctx, 2, "10:30", "10:45", "black", "gray");
schedule.drawSlot(ctx, 2, "10:45", "12:00", "black", "red");
schedule.drawSlot(ctx, 2, "13:00", "17:15", "black", "blue");
var localeUrl = '[[@{/js/dataTables/de.json}]]';
$("#project_table").DataTable({
"language" : {

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

@ -18,6 +18,7 @@
<script th:src="@{/webjars/datatables/1.11.3/js/dataTables.bootstrap5.min.js}"></script>
<script th:src="@{/js/helper.js}"></script>
<script th:src="@{/js/clock.js}"></script>
<script th:src="@{/js/schedule.js}"></script>
</head>
<body>