Revize c883131e

Re #8076 - implemented new datepicker

website/templates/heatmap.html.twig

@@ -2 +2 @@
   
 {% block title %} Heatmap.ZČU {% endblock %}
 {% block stylesheets %}
-  <link rel="stylesheet" href="{{ asset('css/leaflet.css') }}" />
-  <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
-  <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
+  <link rel="stylesheet" href="{{ asset('css/leaflet.css') }}">
+  <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
+  <link rel="stylesheet" href="{{ asset('css/style.css') }}">
+  <link rel="stylesheet" href="{{ asset('css/bootstrap-datepicker3.css') }}">
 {% endblock %}
 
 
@@ -30 +31 @@
               {{
                 form_widget(form.date,
                 {
-                  'type' : 'date',
+                  'type' : 'text',
                   'id' : 'date',
                   'attr' : {
-                    'max' : 'now'|date('Y-m-d'),
                     'class' : 'form-control',                 
                     'onChange' : 'checkDataSetsAvailability("' ~ path('available') ~ '")'
                   }
@@ -151 +151 @@
 
     <script src="{{ asset('js/jquery-3.4.1.min.js') }}"></script>
     <script src="{{ asset('js/bootstrap.min.js') }}"></script>
+    <script src="{{ asset('js/bootstrap-datepicker.min.js') }}"></script>
+    <script src="{{ asset('js/bootstrap-datepicker.cs.min.js') }}" charset="UTF-8"></script>
     <script src="{{ asset('js/leaflet.js') }}"></script>
     <script src="{{ asset('js/leaflet-heat.js') }}"></script>
     <script src="{{ asset('js/zcu-heatmap.js') }}"></script>
@@ -160 +162 @@
         {% if submitted %}
           loadCurrentTimeHeatmap("{{ path('opendata') }}");
         {% endif %}
-    </script>
-
+      
+        var datesetDates = '23-04-2019,24-04-2019,25-04-2019,24-05-2020,27-05-2020'.split(',');
+
+        function formatDate(date) {
+          var day = String(date.getDate());
+          var month = String(date.getMonth() + 1);
+
+          if (day.length === 1) {
+            day = '0' + day;
+          }
+
+          if (month.length === 1) {
+            month = '0' + month;
+          }
+
+          return day + '-' + month + '-' + date.getFullYear();
+        }
+
+        $(function () {
+          $('#date').datepicker({
+            format: 'yyyy-mm-dd',
+            language: 'cs',
+            beforeShowDay: function(date) {
+              if (datesetDates.indexOf(formatDate(date)) < 0) {
+                return {enabled: false, tooltip: 'Žádná data'}
+              }
+              else {
+                return {enabled: true}
+              }
+            },
+            autoclose: true
+          })
+        });
+  </script>
 
 {% endblock %}