templates/default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}Calendrier{% endblock %}
  4. {% block body %}
  6.     <div id="form_event" class="parent" style="display: none;">
  7.         <div id="container_close"><i id="close" class="fa fa-2x fa-times"></i></div>
  8.         <div id="form_event_detail"></div>
  9.     </div>
  10.     <div id="calendrier"></div>
  11. {% endblock %}
  13. {% block javascripts %}
  15.     <script>
  16.         var calendar;
  17.         var calendarElt;
  18.         {% if app.user %} 
  20.         function addEvent(e) {
  21.             self.location.href = '/admin/calendrier/newcalendrier/';
  22.         }
  23.         function showEvent(e) {
  24.             self.location.href = '/admin/calendrier/edit/' + e.id;
  25.         }
  26.         {% else %}
  27.             function showEvent(e) {
  28.                 if (e.id == -1) {
  29.                     return;
  30.                 }
  31.                 let url = '/api/' + e.id + '/getevent';
  32.                 let xhr = new XMLHttpRequest;
  33.                 xhr.responseType = 'json';
  34.                 xhr.open("GET", url, true);
  35.                 xhr.onload = (e) => {
  36.                     if (xhr.readyState === 4) {
  37.                         if (xhr.status === 200) {
  38.                             let e = xhr.response;
  39.                             let ds = new Date(e.start);
  40.                             var html = '<div class="event-title text-center"><h2>' + e.title + '</h2></div>';
  41.                             html += '<div class="event-title">Début : ' + ds.toLocaleString("fr") + '</div>';
  42.                             if (e.end !== null) {
  43.                                 let de = new Date(e.end);
  44.                                 html += '<div class="event-title">Fin : ' + de.toLocaleString("fr") + '</div>';
  45.                             }
  46.                             html += '<div class="event-title">Description : ' + e.description + '</div>';
  47.                             html += '<div class="event-title">Lieu : ' + e.lieu + '</div>';
  48.                             document.querySelector("#form_event_detail").style.padding = "6px";
  49.                             document.querySelector("#form_event_detail").style.backgroundColor = e.backgroundColor;
  50.                             document.querySelector("#form_event_detail").style.color = e.textColor;
  51.                             document.querySelector("#form_event_detail").style.border = "solid " + e.borderColor;
  52.                             document.querySelector("#form_event_detail").innerHTML = html;
  53.                             document.querySelector("#form_event").style.display = 'block';
  54.                         } else {
  55.                             console.error(xhr.statusText);
  56.                         }
  57.                     }
  58.                 };
  59.                 xhr.send(null);
  60.             }
  62.         {% endif %}
  65.             function initializeCalendrier() {
  66.                 calendar = new FullCalendar.Calendar(calendarElt, {
  67.                     initialView: 'dayGridMonth',
  68.                     locale: 'fr',
  69.                     timeZone: 'Europe/Paris',
  70.                     handleWindowResize: true,
  71.                     height: 800,
  72.                     allDayText: 'Journée',
  73.                     firstDay: 1,
  74.                     weekNumbers: true,
  75.                     weekText: "S",
  76.                     buttonText: {
  77.                         today: 'Aujourd\'hui',
  78.                         month: 'Mois',
  79.                         week: 'Semaine',
  80.                         day: 'Journée'
  81.                     },
  82.                     buttonIcons: {
  83.                         'loggedButton': 'fa-logged',
  84.         {% if app.user %}
  85.                         'loginButton': 'fa-sign-logout',
  86.         {% else %}
  87.                         'loginButton': 'fa-sign-login'
  88.         {% endif %}
  89.                     },
  90.                     headerToolbar: {
  91.                         start: '{{ app.user ? 'loggedButton backendButton '}}loginButton prevYear,nextYear prev,next today',
  92.                         center: 'title',
  93.                         end: 'dayGridMonth timeGridWeek timeGridDay'
  94.                     },
  95.                     footerToolbar: {
  96.                         center: 'showCarteButton'
  97.                     },
  98.                     customButtons: {
  99.         {% if app.user %}
  100.                         backendButton: {
  101.                             text: 'Espace admin',
  102.                             click: function (e) {
  103.                                 e.stopPropagation();
  104.                                 self.location.href = '{{asset(path('admin'))}}';
  105.                             }
  106.                         },
  107.         {% endif %}
  108.                         showCarteButton: {
  109.                             text: 'Voir sur la carte',
  110.                             click: function (e) {
  111.                                 self.location.href = '{{asset(path('carte'))}}';
  112.                             }
  113.                         },
  114.                         loggedButton: {
  115.                             text: '{{ app.user ? 'Vous êtes identifié-e comme ' ~ app.user.username}}'
  116.                         },
  117.                         loginButton: {
  118.                             text: '{{ app.user ? 'Déconnection' : 'Identifiez-vous' }}',
  119.                             click: function (e) {
  120.         {% if app.user %}
  121.                                 self.location.href = '{{asset(path('app_logout'))}}';
  122.         {% else %}
  123.                                 self.location.href = '{{asset(path('app_login'))}}';
  124.         {% endif %}
  125.                             }
  126.                         }
  127.                     },
  128.                     eventSources: ['api/getallevents'],
  129.                     editable:{{app.user ? 'true' : 'false'}} ,
  130.                     eventResizableFromStart: true
  131.                 });
  132.                 calendar.on('eventClick', (e) => {
  133.                     showEvent(e.event);
  134.                 });
  135.         {% if app.user %}
  136.                 calendar.on('dateClick', (e) => {
  137.                     addEvent(e);
  138.                 });
  139.                 calendar.on('eventChange', (e) => {
  141.                     let donnees = {
  142.                         "id": e.event.id,
  143.                         "title": e.event.title,
  144.                         "description": e.event.extendedProps.description,
  145.                         "start": e.event.start,
  146.                         "end": e.event.end,
  147.                         "backgroundColor": e.event.backgroundColor,
  148.                         "borderColor": e.event.borderColor,
  149.                         "textColor": e.event.textColor,
  150.                         "allDay": e.event.allDay,
  151.                         "lieu": e.event.lieu,
  152.                         "latitude": e.event.latitude,
  153.                         "longitude": e.event.longitude
  154.                     };
  155.                     setEvent(donnees);
  156.                 });
  157.         {% endif %}
  158.                 calendar.render();
  159.             }
  162.             function setEvent(donnees) {
  163.                 let url = '/api/' + donnees.id + '/edit';
  164.                 let xhr = new XMLHttpRequest;
  165.                 xhr.open("PUT", url);
  166.                 xhr.send(JSON.stringify(donnees));
  167.                 xhr.onload = (e) => {
  168.                     if (xhr.readyState === 4) {
  169.                         if (xhr.status === 200) {
  170.                             document.querySelector("#form_event").style.display = 'none';
  171.                             calendar.refetchEvents();
  172.                         }
  173.                     }
  174.                 };
  175.             }
  179.             window.onload = () => {
  180.                 calendarElt = document.querySelector("#calendrier");
  181.                 let closeBtn = document.querySelector("#close");
  182.                 closeBtn.addEventListener('click', function () {
  183.                     document.querySelector("#form_event").style.display = 'none';
  184.                 });
  185.                 calendarElt.addEventListener('click', function () {
  186.                     document.querySelector("#form_event").style.display = 'none';
  187.                 });
  188.                 initializeCalendrier();
  189.             };
  190.     </script>
  192.     <script src="{{ asset('js/tarteaucitron/tarteaucitron.js')}}"></script>
  194.     <script>
  195.         {#
  196.             tarteaucitron.init({
  197.                 "privacyUrl": "", /* Privacy policy url */
  198.                 "bodyPosition": "top", /* or top to bring it as first element for accessibility */
  200.                 "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */
  201.                 "cookieName": "tarteaucitron", /* Cookie name */
  203.                 "orientation": "middle", /* Banner position (top - bottom - middle - popup) */
  205.                 "groupServices": false, /* Group services by category */
  206.                 "serviceDefaultState": "wait", /* Default state (true - wait - false) */
  208.                 "showAlertSmall": false, /* Show the small banner on bottom right */
  209.                 "cookieslist": false, /* Show the cookie list */
  211.                 "showIcon": true, /* Show cookie icon to manage cookies */
  212. // "iconSrc": "", /* Optionnal: URL or base64 encoded image */
  213.                 "iconPosition": "BottomRight", /* Position of the icon between BottomRight, BottomLeft, TopRight and TopLeft */
  215.                 "adblocker": false, /* Show a Warning if an adblocker is detected */
  217.                 "DenyAllCta": true, /* Show the deny all button */
  218.                 "AcceptAllCta": true, /* Show the accept all button when highPrivacy on */
  219.                 "highPrivacy": true, /* HIGHLY RECOMMANDED Disable auto consent */
  221.                 "handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */
  223.                 "removeCredit": true, /* Remove credit link */
  224.                 "moreInfoLink": true, /* Show more info link */
  225.                 "useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */
  226.                 "useExternalJs": false, /* If false, the tarteaucitron.services.js file will be loaded */
  228. //"cookieDomain": ".my-multisite-domaine.fr", /* Shared cookie for subdomain website */
  230.                 "readmoreLink": "", /* Change the default readmore link pointing to tarteaucitron.io */
  232.                 "mandatory": true, /* Show a message about mandatory cookies */
  233.                 "mandatoryCta": true /* Show the disabled accept button when mandatory on */
  234.             });
  235. #}
  236.     </script>
  237.     <script src="{{ asset('fullcalendar_5_11_3/lib/main.min.js') }}"></script>
  241. {% endblock %}