prepared calendar

build.gradle

@@ -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'

src/main/resources/static/css/style.css

@@ -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;
 }

src/main/resources/static/js/schedule.js

@@ -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);
+	}
+}

src/main/resources/templates/done/list.html

@@ -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" : {

src/main/resources/templates/layout/main.html

@@ -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>