translate date picker and charts (#775)

assets/app.js

@@ -24,6 +24,7 @@ require('moment/locale/ar');
 require('moment/locale/hu');
 require('moment/locale/pt-br');
 require('moment/locale/sv');
+require('moment/locale/ja');
 
 require('daterangepicker');
 
@@ -55,6 +56,7 @@ require('fullcalendar/dist/locale/ar');
 require('fullcalendar/dist/locale/hu');
 require('fullcalendar/dist/locale/pt-br');
 require('fullcalendar/dist/locale/sv');
+require('fullcalendar/dist/locale/ja');
 require('fullcalendar/dist/fullcalendar.min.css');
 
 // ------ for charts ------

assets/js/plugins/KimaiDatePicker.js

@@ -11,6 +11,7 @@
 
 import jQuery from 'jquery';
 import KimaiPlugin from '../KimaiPlugin';
+import moment from 'moment';
 
 export default class KimaiDatePicker extends KimaiPlugin {
 
@@ -40,7 +41,9 @@ export default class KimaiDatePicker extends KimaiPlugin {
                     firstDay: 1,
                     applyLabel: translator.get('apply'),
                     cancelLabel: translator.get('cancel'),
-                    customRangeLabel: translator.get('customRange')
+                    customRangeLabel: translator.get('customRange'),
+                    daysOfWeek: moment.weekdaysShort(),
+                    monthNames: moment.months(),
                 }
             });
 

assets/js/plugins/KimaiDateRangePicker.js

@@ -9,9 +9,9 @@
  * [KIMAI] KimaiDateRangePicker: activate the (daterange picker) compound field in toolbar
  */
 
-import moment from 'moment';
 import jQuery from 'jquery';
 import KimaiPlugin from '../KimaiPlugin';
+import moment from 'moment';
 
 export default class KimaiDateRangePicker extends KimaiPlugin {
 
@@ -55,7 +55,9 @@ export default class KimaiDateRangePicker extends KimaiPlugin {
                     firstDay: 1,
                     applyLabel: translator.get('apply'),
                     cancelLabel: translator.get('cancel'),
-                    customRangeLabel: translator.get('customRange')
+                    customRangeLabel: translator.get('customRange'),
+                    daysOfWeek: moment.weekdaysShort(),
+                    monthNames: moment.months(),
                 },
                 ranges: rangesList,
                 alwaysShowCalendars: true

assets/js/plugins/KimaiDateTimePicker.js

@@ -11,6 +11,7 @@
 
 import jQuery from 'jquery';
 import KimaiPlugin from '../KimaiPlugin';
+import moment from 'moment';
 
 export default class KimaiDateTimePicker extends KimaiPlugin {
 
@@ -44,7 +45,9 @@ export default class KimaiDateTimePicker extends KimaiPlugin {
                     firstDay: 1,
                     applyLabel: translator.get('apply'),
                     cancelLabel: translator.get('cancel'),
-                    customRangeLabel: translator.get('customRange')
+                    customRangeLabel: translator.get('customRange'),
+                    daysOfWeek: moment.weekdaysShort(),
+                    monthNames: moment.months(),
                 }
             });
 

public/build/manifest.json

@@ -1,5 +1,5 @@
 {
-  "build/app.js": "./app.js?090616bfede72650dab6",
+  "build/app.js": "./app.js?3d071111186a7bfc7ee4",
   "build/app.css": "./app.css?71bf2f49930d41eb83d61ba95a3c9eb2",
   "build/fonts/fa-solid-900.woff2": "./fonts/fa-solid-900.woff2?e8a92a29",
   "build/images/fa-solid-900.svg": "./images/fa-solid-900.svg?666a82cb",

templates/dashboard/section-chart.html.twig

@@ -34,7 +34,7 @@
                                     {% if loop.first or loop.last %}
                                         {% for id, month in year.months %}
                                             {% if loop.first %}
-                                            {{ ('month.'~loop.index)|trans }} {{ yearName }}
+                                            moment.months({{ loop.index }}) {{ yearName }}
                                             {% endif %}
                                         {% endfor %}
                                     {% endif %}
@@ -117,12 +117,7 @@
             $(function () {
                 'use strict';
                 var timeChartData = {
-                    labels  : [
+                    labels: moment.months(),
-                        {% for i in 1..12 %}
-                            '{{ ('month.' ~i)|trans }}'
-                            {% if not loop.last %},{% endif %}
-                        {% endfor %}
-                    ],
                     datasets: [
                         {% for yearName, year in chartWidget.data %}
                         {% set yearColors = colors[loop.index-1]|split('|') %}

templates/export/index.html.twig

@@ -193,7 +193,7 @@
             });
         }
 
-        $(document).ready(function () {
+        document.addEventListener('kimai.initialized', function() {
             $('body').on('click', '.exportBtn', function() {
                 var button = $(this);
                 var id = button.attr('data-timesheet');
@@ -227,7 +227,6 @@
                 $('#type').val('');
                 $form.removeAttr('target').attr('action', prevAction);
             });
-
         });
     </script>
 {% endblock %}

templates/invoice/index.html.twig

@@ -93,7 +93,7 @@
     {{ parent() }}
     {% if is_granted('create_invoice') %}
     <script type="text/javascript">
-        $(document).ready(function () {
+        document.addEventListener('kimai.initialized', function() {
             $("body").on('click', '#print-invoice-button', function() {
                 var prevAction = $( "#invoice-print-form" ).attr('action');
                 $( "#invoice-print-form" ).attr('target', '_blank').attr('action', '{{ path('invoice_print') }}');

templates/user/stats.html.twig

@@ -9,33 +9,29 @@
     {% endif %}
 
     <script type="text/javascript">
-        var userProfileChartOptions = {
+        function userProfileChartOptions() {
-            maintainAspectRatio     : true,
+            return {
-            responsive              : true,
+                maintainAspectRatio: true,
-            legend                  : false,
+                responsive: true,
-            barPercentage           : 0.5,
+                legend: false,
-            categoryPercentage      : 0.9,
+                barPercentage: 0.5,
-            scales: {
+                categoryPercentage: 0.9,
-                xAxes: [{
+                scales: {
-                    gridLines: {
+                    xAxes: [{
-                        display: false
+                        gridLines: {
-                    }
+                            display: false
-                }],
+                        }
-                yAxes: [{
+                    }],
-                    gridLines: {
+                    yAxes: [{
-                        display: true,
+                        gridLines: {
-                        color: 'rgba(0,0,0,.05)',
+                            display: true,
-                        lineWidth: 1
+                            color: 'rgba(0,0,0,.05)',
-                    }
+                            lineWidth: 1
-                }]
+                        }
-            }
+                    }]
-        };
+                }
-        var userProfileChartLabels = [
+            };
-            {% for i in 1..12 %}
+        }
-            '{{ ('month.' ~i)|trans }}'
-            {% if not loop.last %},{% endif %}
-            {% endfor %}
-        ];
     </script>
 
     {% for year,yearStat in years %}
@@ -48,9 +44,9 @@
                     <canvas id="userProfileChart{{ year }}" style="height: 200px;"></canvas>
                 </div>
                 <script type="text/javascript">
-                    $(document).ready(function () {
+                    document.addEventListener('kimai.initialized', function() {
                         var userProfileChartData{{ year }} = {
-                            labels: userProfileChartLabels,
+                            labels: moment.months(),
                             datasets: [
                                 {
                                     label: '{{ year }}',
@@ -73,7 +69,7 @@
                             userProfileChartCanvas{{ year }}, {
                                 type: 'bar',
                                 data: userProfileChartData{{ year }},
-                                options: userProfileChartOptions
+                                options: userProfileChartOptions()
                             }
                         );
                         {% endif %}
@@ -83,7 +79,7 @@
                                 userProfileChartCanvas{{ year }}, {
                                     type: 'bar',
                                     data: userProfileChartData{{ year }},
-                                    options: userProfileChartOptions
+                                    options: userProfileChartOptions()
                                 }
                             );
                         });