Added timesheet-calendar view (#236)

2018-07-27 20:19:56 +02:00
parent 5ccc1c991b
commit e6f8bc8ae2
40 changed files with 1286 additions and 49 deletions
--- a/templates/calendar/user.html.twig
+++ b/templates/calendar/user.html.twig
@@ -0,0 +1,108 @@
+{% extends 'base.html.twig' %}
+{% import "macros/widgets.html.twig" as widgets %}
+{% import "macros/datatables.html.twig" as tables %}
+{% import "macros/toolbar.html.twig" as toolbar %}
+
+{% block page_title %}{{ 'timesheet.title'|trans }}{% endblock %}
+{% block page_subtitle %}{{ 'timesheet.subtitle'|trans }}{% endblock %}
+{% block page_actions %}{{ widgets.page_actions({'list': path('timesheet'), 'create': path('timesheet_create')}) }}{% endblock %}
+
+{% block main %}
+    <div class="row">
+        <div class="col-md-12">
+            <div class="box box-success">
+                <div class="box-body no-padding">
+                    <div id="calendar"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+{% block javascripts %}
+    {{ parent() }}
+    <script>
+        $(function () {
+            $('#calendar').fullCalendar({
+                {% if not google.apiKey is null %}
+                googleCalendarApiKey: '{{ google.apiKey }}',
+                {% endif %}
+                eventSources: [
+                    {
+                        url: '{{ path('calendar_entries') }}',
+                        color: '#00a65a',
+                        borderColor: '#00a65a',
+                        name: 'kimaiUserTimeSource'
+                    }
+                    {% for source in google.sources %}
+                    ,
+                    {
+                        googleCalendarId: '{{ source.uri }}',
+                        name: '{{ source.id }}',
+                        color: '{{ source.color }}',
+                        borderColor: '{{ source.color }}'
+                    }
+                    {% endfor %}
+                ],
+                header    : {
+                    left  : 'prev,next today',
+                    center: 'title',
+                    right : 'month,agendaWeek,agendaDay'
+                },
+                eventLimit: {{ config.dayLimit }},
+                weekNumbers: {% if config.showWeekNumbers %}true{% else %}false{% endif %},
+                navLinks: true,
+                locale: '{{ app.request.locale }}',
+                editable  : false,
+                droppable : false,
+                height: 'auto',
+                nowIndicator: true,
+                businessHours: {
+                    dow: [{{ config.businessDays|join(',') }}],
+                    start: '{{ config.businessTimeBegin }}',
+                    end: '{{ config.businessTimeEnd }}'
+                },
+                eventRender: function(eventObj, $el) {
+                    if (eventObj.source.ajaxSettings.name !== 'kimaiUserTimeSource') {
+                        return;
+
+                    }
+                    $el.popover({
+                        title: eventObj.title,
+                        content:
+                        '<div class="calendar-entry">' +
+                            '<ul>' +
+                                '<li>' + '{{ 'label.date'|trans }}: ' + eventObj.start.format('L') + '</li>' +
+                                '<li>' + '{{ 'label.begin'|trans }}: ' + eventObj.start.format('LT') + '</li>' +
+                                '<li>' + '{{ 'label.end'|trans }}: ' + (eventObj.end ? eventObj.end.format('LT') : '<i>-</i>') + '</li>' +
+                                '<hr>' +
+                                '<li>' + '{{ 'label.customer'|trans }}: ' + eventObj.customer + '</li>' +
+                                '<li>' + '{{ 'label.project'|trans }}: ' + eventObj.project + '</li>' +
+                                '<li>' + '{{ 'label.activity'|trans }}: ' + eventObj.activity + '</li>' +
+                            '</ul>' +
+                            (eventObj.description ? '<hr><p>' + eventObj.description + '</p>' : '') +
+                        '</div>'
+                        ,
+                        trigger: 'hover',
+                        placement: 'top',
+                        container: 'body',
+                        html: true
+                    });
+                },
+                eventClick: function(calEvent, jsEvent, view) {
+                    location.href = '{{ path('timesheet_edit', {id: '-XX-'}) }}'.replace('-XX-', calEvent.id);
+                },
+                dayClick: function(date, jsEvent, view) {
+                    location.href = '{{ path('timesheet_create') }}' + '?begin=' + date.format();
+                },
+                selectable: true,
+                select: function( start, end, jsEvent, view) {
+                    if(view.type === 'month') {
+                        return;
+                    }
+                    location.href = '{{ path('timesheet_create') }}' + '?from=' + start.format() + '&to=' + end.format();
+                }
+            })
+        })
+    </script>
+{% endblock %}