Zeiterfassung update

* Autoausfüllen -> fertiggestellt
* Überprüfungen Buchungsüberschneidungen ausgebaut
* Abwesenheitskalender Mouseover eingebaut
* Abwesenheiten ohne Ende Update -> Gesundmeldung generiert nun ein Update mit Ende auf die Abwesenheit

Layout/default/TimerecordingCalendar/Index.php

@@ -4,6 +4,16 @@ $daysgerm = array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa");
     <link href="<?= self::getResourcePath() ?>assets/css/select2-cstm.css?<?= date('U') ?>" rel="stylesheet"
           type="text/css"/>
     <style>
+        .fc-event {
+            border-radius: 2px;
+            border: none;
+            cursor: move;
+            font-size: 13px;
+            margin: 3px 7px;
+            padding: 3px 5px;
+            text-align: center;
+        }
+
         .fc-toolbar {
             @media (max-width: 767px) {
                 flex-direction: column;
@@ -25,6 +35,123 @@ $daysgerm = array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa");
         .fc .fc-button-primary:not(:disabled).fc-button-active:focus, .fc .fc-button-primary:not(:disabled):active:focus {
             box-shadow: none;
         }
+
+        .popper, .tooltip {
+            position: absolute;
+            z-index: 9999;
+            /* background: #FFC107; */
+            color: #0f5be9;
+            width: auto;
+            /* border-radius: 3px; */
+            /* box-shadow: 0 0 1px rgba(0, 0, 0, 0.5); */
+            padding: 10px;
+            text-align: center;
+            opacity: 0.9;
+        }
+
+        .tooltip-inner {
+            max-width: 500px;
+            padding: 0.4rem 0.8rem;
+            color: #fff;
+            text-align: center;
+            background-color: #2c3e50;
+            border-radius: 0.2rem;
+        }
+
+        .style5 .tooltip {
+            background: #1E252B;
+            color: #FFFFFF;
+            max-width: 200px;
+            width: auto;
+            font-size: .8rem;
+            padding: .5em 1em;
+        }
+
+        .popper .popper__arrow,
+        .tooltip .tooltip-arrow {
+            width: 0;
+            height: 0;
+            border-style: solid;
+            position: absolute;
+            margin: 5px;
+        }
+
+        .tooltip .tooltip-arrow,
+        .popper .popper__arrow {
+            border-color: #FFC107;
+        }
+
+        .style5 .tooltip .tooltip-arrow {
+            border-color: #1E252B;
+        }
+
+        .popper[x-placement^="top"],
+        .tooltip[x-placement^="top"] {
+            margin-bottom: 5px;
+        }
+
+        .popper[x-placement^="top"] .popper__arrow,
+        .tooltip[x-placement^="top"] .tooltip-arrow {
+            border-width: 5px 5px 0 5px;
+            border-left-color: transparent;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+            bottom: -5px;
+            left: calc(50% - 5px);
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        .popper[x-placement^="bottom"],
+        .tooltip[x-placement^="bottom"] {
+            margin-top: 5px;
+        }
+
+        .tooltip[x-placement^="bottom"] .tooltip-arrow,
+        .popper[x-placement^="bottom"] .popper__arrow {
+            border-width: 0 5px 5px 5px;
+            border-left-color: transparent;
+            border-right-color: transparent;
+            border-top-color: transparent;
+            top: -5px;
+            left: calc(50% - 5px);
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        .tooltip[x-placement^="right"],
+        .popper[x-placement^="right"] {
+            margin-left: 5px;
+        }
+
+        .popper[x-placement^="right"] .popper__arrow,
+        .tooltip[x-placement^="right"] .tooltip-arrow {
+            border-width: 5px 5px 5px 0;
+            border-left-color: transparent;
+            border-top-color: transparent;
+            border-bottom-color: transparent;
+            left: -5px;
+            top: calc(50% - 5px);
+            margin-left: 0;
+            margin-right: 0;
+        }
+
+        .popper[x-placement^="left"],
+        .tooltip[x-placement^="left"] {
+            margin-right: 5px;
+        }
+
+        .popper[x-placement^="left"] .popper__arrow,
+        .tooltip[x-placement^="left"] .tooltip-arrow {
+            border-width: 5px 0 5px 5px;
+            border-top-color: transparent;
+            border-right-color: transparent;
+            border-bottom-color: transparent;
+            right: -5px;
+            top: calc(50% - 5px);
+            margin-left: 0;
+            margin-right: 0;
+        }
     </style>
     <script type="text/javascript"
             src="<?= self::getResourcePath() ?>assets/js/calendar/moment/moment.min.js?<?= date('U') ?>"></script>
@@ -34,6 +161,9 @@ $daysgerm = array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa");
             src="<?= self::getResourcePath() ?>assets/js/calendar/moment/index.global.min.js?<?= date('U') ?>"></script>
     <script type="text/javascript"
             src="<?= self::getResourcePath() ?>assets/js/calendar/locales-all.global.min.js?<?= date('U') ?>"></script>
+    <script type="text/javascript"
+            src="<?= self::getResourcePath() ?>assets/js/calendar/tooltip.min.js?<?= date('U') ?>"></script>
+
     <script>
         document.addEventListener('DOMContentLoaded', function () {
             let requestUrl = "<?= self::getUrl("TimerecordingReport", "api", ['do' => 'getTimerecordings', 'datatype' => '3', 'datayear' => time()]) ?>";
@@ -75,15 +205,13 @@ $daysgerm = array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa");
                         backgroundColor: bgcolors[colorcount],
                         start: value.cstart.cstart,
                         end: value.cend.cend,
-                        title: value.category.category + " " + value.user.user,
-                        description: value.category.category + " " + value.user.user
+                        title: value.ccategory.ccategory + " " + value.user.user,
+                        description: value.ccategory.ccategory + " " + value.user.user
                     });
                     oldname = value.user.user;
                     cindex++;
                 });
 
-                console.log(holidays);
-
                 var initialLocaleCode = 'en';
                 var calendarEl = document.getElementById('fullcalendar');
                 var containerEl = document.getElementById('external-events');
@@ -103,8 +231,6 @@ $daysgerm = array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa");
                     events: holiDays
 
                 };
-
-
                 var holidayEvents = {
                     id: 5,
                     backgroundColor: 'rgba(0,204,204,.25)',
@@ -112,8 +238,6 @@ $daysgerm = array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa");
                     textColor: '#000',
                     events: holidays
                 };
-
-
                 var initialLocaleCode = 'en';
                 var calendarEl = document.getElementById('calendar');
                 var calendar = new FullCalendar.Calendar(calendarEl, {
@@ -123,6 +247,14 @@ $daysgerm = array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa");
                         center: 'title',
                         right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
                     },
+                    eventDidMount: function (info) {
+                        var tooltip = new Tooltip(info.el, {
+                            title: info.event.extendedProps.description,
+                            placement: 'top',
+                            trigger: 'hover',
+                            container: 'body'
+                        });
+                    },
                     editable: true,
                     droppable: true, // this allows things to be dropped onto the calendar
                     fixedWeekCount: true,
@@ -132,7 +264,7 @@ $daysgerm = array("So", "Mo", "Di", "Mi", "Do", "Fr", "Sa");
                     hiddenDays: [],
                     navLinks: 'true',
                     events: [],
-                    height: 700,
+                    height: 800,
                     eventSources: [holidayEvents, birthdayEvents]
                 });
                 calendar.render();