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

full calendar support started

Browse Source
This commit is contained in:
Jörg Henke
2023-05-08 22:30:09 +02:00
parent 1639bf31fe
commit 62ef5140bc
5 changed files with 101 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
build.gradle
View File

@ -5,7 +5,7 @@ plugins {
}
group = 'de.jottyfan'
version = '1.2.7'
version = '1.2.8'
sourceCompatibility = '11'
ext['spring-framework.version'] = '5.3.18'
@ -25,21 +25,22 @@ repositories {
dependencyManagement {
imports {
mavenBom 'org.keycloak.bom:keycloak-adapter-bom:17.0.1'
mavenBom 'org.keycloak.bom:keycloak-adapter-bom:21.1.1'
}
}
dependencies {
implementation 'org.apache.logging.log4j:log4j-api:2.17.1'
implementation 'org.apache.logging.log4j:log4j-core:2.17.1'
implementation 'org.apache.logging.log4j:log4j-to-slf4j:2.17.1'
implementation 'org.apache.logging.log4j:log4j-api:2.20.0'
implementation 'org.apache.logging.log4j:log4j-core:2.20.0'
implementation 'org.apache.logging.log4j:log4j-to-slf4j:2.20.0'
implementation 'org.webjars:bootstrap:5.1.3'
implementation 'org.webjars:bootstrap:5.2.3'
implementation 'org.webjars:font-awesome:5.15.4'
implementation 'org.webjars:jquery:3.6.0'
implementation 'org.webjars:jquery:3.6.4'
implementation 'org.webjars:popper.js:2.9.3'
implementation 'org.webjars:datatables:1.11.3'
implementation 'org.webjars:jquery-ui:1.13.0'
implementation 'org.webjars:datatables:1.13.2'
implementation 'org.webjars:jquery-ui:1.13.2'
implementation 'org.webjars:fullcalendar:5.11.3'
implementation 'com.google.code.gson:gson:2.9.0';

20
src/main/java/de/jottyfan/timetrack/spring/calendar/CalendarController.java Normal file
View File

@ -0,0 +1,20 @@
package de.jottyfan.timetrack.spring.calendar;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
/**
*
* @author jotty
*
*/
@Controller
public class CalendarController {
@GetMapping("/calendar")
public String getCalendar(Model model) {
// TODO: implement
return "/calendar/calendar";
}
}

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

@ -246,6 +246,13 @@ body {
border: 1px solid silver;
}
.tab-pane-glassy {
background: rgba(255, 255, 255, 0.5);
padding: 8px;
border-radius: 4px;
border: 1px solid silver;
}
.inputtimefield {
min-width: 70px !important;
}

55
src/main/resources/templates/calendar/calendar.html Normal file
View File

@ -0,0 +1,55 @@
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" xmlns:sec="http://www.thymeleaf.org/extras/spring-security" layout:decorate="~{layout/main.html}">
<head>
<title>Kalender</title>
</head>
<body>
<font layout:fragment="title">Kalender</font>
<ul layout:fragment="menu">
<li class="nav-item" sec:authorize="hasRole('timetrack_user')"><a class="nav-link btn btn-outline-success" th:href="@{/calendar/add}">Neuen Termin anlegen</a></li>
</ul>
<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_dashboard">Kalender</a></li>
<li class="nav-item"><a class="nav-link navlinkstyle" data-bs-toggle="tab" href="#div_options">Einstellungen</a></li>
</ul>
<div class="tabdivblurred tab-content">
<div id="div_dashboard" class="tab-pane active tab-pane-glassy">
<div sec:authorize="hasRole('timetrack_user')">
<div id="calendar"></div>
<script type="text/javascript">
$(document).ready(function() {
var the_events = [ { id: 'example1', title: 'überlappend', start: '2023-05-08T08:00:00.000Z', end: '2023-05-09T08:00:00.000Z'},
{ id: 'example2', title: 'der ganze Tag', allDay: true, start: '2023-05-08', backgroundColor: '#aa77aa'},
];
var the_div = document.getElementById('calendar');
var c = new FullCalendar.Calendar(the_div, {
initialView: 'timeGridWeek',
events: the_events,
dateClick: function(info) {
alert('Clicked on: ' + info.dateStr);
// TODO: call /calendar/add/{d}(d='info.dateStr')
},
eventClick: function(info) {
alert('Clicked on event: ' + info.event.title);
// TODO: call /calendar/edit/{d}(d='info.dateStr')
},
height: 800
});
c.setOption('locale', 'de');
c.addEvent( { id: 'example3', title: 'added after init', start: '2023-05-08', allDay: true, backgroundColor: 'darkcyan'} );
c.render();
});
</script>
</div>
</div>
<div id="div_options" class="tab-pane fade tab-pane-table">
<div sec:authorize="hasRole('timetrack_user')">
<!-- TODO: add the options here -->
</div>
</div>
</div>
</main>
</body>
</html>

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

@ -5,17 +5,19 @@
<title>Timetrack</title>
<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/bootstrap/5.2.3/css/bootstrap.min.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/webjars/datatables/1.13.2/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="@{/webjars/fullcalendar/5.11.3/main.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}" />
<script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
<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="@{/webjars/jquery/3.6.4/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/5.2.3/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/webjars/datatables/1.13.2/js/jquery.dataTables.min.js}"></script>
<script th:src="@{/webjars/datatables/1.13.2/js/dataTables.bootstrap5.min.js}"></script>
<script th:src="@{/webjars/fullcalendar/5.11.3/main.js}"></script>
<script th:src="@{/js/helper.js}"></script>
<script th:src="@{/js/clock.js}"></script>
<script th:src="@{/js/schedule.js}"></script>
@ -38,6 +40,7 @@
<li><a class="dropdown-item" th:href="@{/done/list}">Arbeitszeit</a></li>
<li><a class="dropdown-item" th:href="@{/contact/list}">Kontakte</a></li>
<li><a class="dropdown-item" th:href="@{/note/list}">Notizen</a></li>
<li><a class="dropdown-item" th:href="@{/calendar}">Kalender</a></li>
<li><hr /></li>
<li><a class="dropdown-item" th:href="@{/logout}">[[${currentUser}]] abmelden</a></li>
</ul></li>