templates/planning/liste_bo.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Pilotage exploitation BO{% endblock %}
  5. {% block body %}
  7.     {#<div id="calendarMenu" style="padding-top: 20px;display: flex;align-items: center;">#}
  9.     {#<button type="button" class="calendar-btn calendar-move-today"  onclick="calendar.today();setRenderRangeText()">Aujourd'hui</button>#}
  11.     {#<button type="button" class="calendar-btn calendar-move-day" onclick="calendar.prev();setRenderRangeText()">#}
  12.     {#< </button>#}
  13.     {#<button type="button" class="calendar-btn calendar-move-day" onclick="calendar.next();setRenderRangeText()">#}
  14.     {#> </button>#}
  15.     {#<div id="renderRange" style="font-size:18px"></div>#}
  17.     {#</div>#}
  19.     <ol class="breadcrumb">
  20.         <li>
  21.             <i class="clip-grid-6"></i>
  22.             <a href="#">
  23.                 RDV
  24.             </a>
  25.         </li>
  26.         <li class="active">
  27.             Liste
  28.         </li>
  29.     </ol>
  32.     {#<div id="calendar" style="height: 800px;"></div>#}
  34.     <div class="page-header">
  35.         <h1>BO : Liste des dates d'ouvertures des salons</h1>
  36.         <div>
  37.             <form id="filter-form" method="GET">
  38.                 <div class="row">
  39.                     <div class="col-lg-3">
  40.                         <select id="filter-salon" name="salon" style="width:300px;" class="form-control">
  41.                             <option value>Sélectionnez un salon</option>
  42.                             {% for salon in salons %}
  43.                                 <option value="{{ salon.id }}" {% if app.request.get('salon') == salon.id %} selected{% endif %}>{{ salon.name }}</option>
  45.                             {% endfor %}
  46.                         </select>
  47.                     </div>
  49.                     <div class="col-lg-3">
  50.                         <select id="filter-intervenant" name="intervenant" style="width:300px;" class="form-control">
  51.                             <option value>Sélectionnez un intervenant</option>
  52.                             {% for intervenant in intervenants %}
  53.                                 <option value="{{ intervenant.id }}" {% if app.request.get('intervenant') == intervenant.id %} selected{% endif %}>{{ intervenant.firstname }} {{ intervenant.lastname }}</option>
  55.                             {% endfor %}
  56.                         </select>
  57.                     </div>
  58.                     {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_BO') or is_granted('ROLE_ADMINISTRATIVE') %}
  60.                         <div class="col-lg-3">
  61.                             <input id="date_debut" placeholder="Date de début" type="text" name="date_debut" class="form-control flatpickr-input active" value="{{ dateDebut}}">
  62.                         </div>
  63.                         <div class="col-lg-3">
  64.                             <input id="date_fin" placeholder="Date de fin"  type="text" name="date_fin" class="form-control flatpickr-input active" value="{{ dateFin}}">
  65.                         </div>
  66.                     {% endif %}
  67.                 </div>
  69.                 <div style="margin-top: 20px">
  70.                     <button class="btn btn-success" type="submit">Valider</button>
  71.                 </div>
  74.             </form>
  76.             <div style="margin-top: 20px;display: flex">
  77.                 {#                {% if not is_granted('ROLE_COIFFEUR') or is_granted('ROLE_TELECONSEILER') %}#}
  79.                 {#                <form action="{{ path('app_planning_envoiplanning') }}">#}
  80.                 {#                    <button id="sendPlanning" class="btn btn-success" type="submit">Envoi planning</button>#}
  81.                 {#                </form>#}
  82.                 {#                {% endif %}#}
  84.                 {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_BO') or is_granted('ROLE_ADMINISTRATIVE') %}
  85.                     <div style="margin-left: 20px">
  86.                         <a href="{{path('app_planning_newjos')}}"  class="btn btn-success">Nouveau</a>
  88.                     </div>
  89.                 {% endif %}
  92.             </div>
  95.         </div>
  97.     </div>
  99.     <div class="row">
  100.         <div class="col-md-12">
  101.             <!-- start: BASIC TABLE PANEL -->
  102.             <div class="panel panel-default">
  103.                 <div class="panel-heading">
  104.                     RDV
  105.                     <div class="panel-tools">
  107.                     </div>
  108.                 </div>
  109.                 <div class="panel-body">
  110.                     <table class="table table-hover" id="table">
  111.                         <thead>
  112.                         <tr>
  113.                             <th><input class="selectAllSession" type="checkbox" /></th>
  114.                             <th>Id</th>
  115.                             <th>Date</th>
  116.                             <th>Heure</th>
  117.                             <th>Salon</th>
  118.                             <th>Action à réaliser</th>
  119.                             <th>Intervenant</th>
  120.                             <th>Statut</th>
  121.                             <th>CA HT</th>
  122.                             <th>Nbre de RDV</th>
  123.                         </tr>
  124.                         </thead>
  125.                         <tbody>
  126.                         {% set dayNames = ['dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi'] %}
  127.                         {% set monthNames = ['janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre'] %}
  128.                         {% for session in sessions %}
  129.                             <tr>
  131.                                 <td><input class="sessionCheck" type="checkbox" data-ht="{{ session.rdvCA  }}" data-nbrdv="{{ session.rdvCount }}"/></td>
  132.                                 <td>{{ session.id }}</td>
  133.                                 <td>{{ dayNames[session.start|date('w')] }} {{ session.start|date('j') }} {{ monthNames[session.start|date('n')-1] }} {{ session.start|date('Y') }} </td>
  134.                                 <td>{{ session.startRDV|date('H:i') }} - {{ session.end|date('H:i') }}</td>
  135.                                 <td>{{ session.salon }}</td>
  136.                                 <td>
  137.                                     {% if session.actionArealiser and session.observation %}
  138.                                         🚩❶
  139.                                     {% elseif session.actionArealiser %}
  140.                                         🚩
  141.                                     {% elseif session.observation %}
  142.                                         ❶
  143.                                     {% else %}
  144.                                         ---
  145.                                     {% endif %}
  146.                                 </td>
  147.                                 <td>{{ session.intervenant }}</td>
  148.                                 <td>
  149.                                     {% if session.status == 'plan' %} Salon Ouvert
  150.                                     {% elseif session.status == 'modifier' %} Salon Modifié
  151.                                     {% elseif session.status == 'indisponible' %} Salon Fermé
  152.                                     {% elseif session.status == 'event' %} Intervention évènementiel
  153.                                     {% endif %}
  154.                                 </td>
  155.                                 <td data-sort="{{ session.rdvCA }}" style="text-align: right">
  156.                                     {{ session.rdvCA }} €
  157.                                 </td>
  159.                                 <td data-sort="{{ session.rdvCount }}" style="text-align: right">
  161.                                     {{ session.rdvCount }}
  162.                                 </td>
  163.                                 <td>
  164.                                     {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_BO') or is_granted('ROLE_ADMINISTRATIVE') %}
  165.                                         <a href="{{ path('app_planning_sessionsalon', {'id': session.id}) }}" target="_blank">Edition</a>
  166.                                     {% endif %}
  167.                                 </td>
  169.                             </tr>
  170.                         {% else %}
  171.                             <tr>
  172.                                 <td colspan="4">Aucun enregistrement trouvé</td>
  173.                             </tr>
  174.                         {% endfor %}
  175.                         </tbody>
  176.                         <tfoot>
  177.                         <tr>
  178.                             <td colspan="8" style="text-align: right;"><strong>Total CA HT:</strong></td>
  179.                             <td id="total-ca-ht" style="text-align: right">0</td>
  180.                             <td id="nbSession" style="text-align: right">0</td>
  181.                             <td colspan="2"></td>
  182.                         </tr>
  183.                         </tfoot>
  184.                     </table>
  185.                 </div>
  186.             </div>
  187.             <!-- end: BASIC TABLE PANEL -->
  188.         </div>
  189.     </div>
  192. {% endblock %}
  194. {% block javascripts %}
  195.     {{ parent() }}
  197.     <script type="text/javascript">
  199.         function calculateTotalCA() {
  200.             let total = 0;
  201.             let totalSession= 0;
  202.             document.querySelectorAll('.sessionCheck:checked').forEach(function(checkbox) {
  203.                 total += parseFloat(checkbox.getAttribute('data-ht')) || 0;
  204.                 totalSession+= parseFloat(checkbox.getAttribute('data-nbrdv')) || 0;
  205.             });
  206.             document.getElementById('total-ca-ht').textContent = total.toFixed(2)  + " €";
  207.             document.getElementById('nbSession').textContent = totalSession;
  208.         }
  210.         document.querySelector('.selectAllSession').addEventListener('change', function() {
  211.             const isChecked = this.checked;
  212.             document.querySelectorAll('.sessionCheck').forEach(function(checkbox) {
  213.                 checkbox.checked = isChecked;
  214.             });
  215.             calculateTotalCA();
  216.         });
  219.         document.addEventListener('DOMContentLoaded', function() {
  220.             // Calculate the total CA HT on page load
  221.             calculateTotalCA();
  223.             // Add event listener to each checkbox
  224.             document.querySelectorAll('.sessionCheck').forEach(function(checkbox) {
  225.                 checkbox.addEventListener('change', function() {
  226.                     calculateTotalCA();
  227.                 });
  228.             });
  229.         });
  233.         $('#filter-salon').on('change', function () {
  234.             $('#filter-form').submit();
  235.         });
  237.         $('#filter-intervenant').on('change', function () {
  238.             $('#filter-form').submit();
  239.         });
  242.     </script>
  244.     <script type="text/javascript">
  246.         {#function setRenderRangeText() {#}
  247.         {#var renderRange = document.getElementById('renderRange');#}
  248.         {#var options = calendar.getOptions();#}
  249.         {#var viewName = calendar.getViewName();#}
  250.         {#var html = [];#}
  251.         {#if (viewName === 'day') {#}
  252.         {#html.push(moment(calendar.getDate().getTime()).format('YYYY.MM.DD'));#}
  253.         {#} else if (viewName === 'month' &&#}
  254.         {#(!options.month.visibleWeeksCount || options.month.visibleWeeksCount > 4)) {#}
  255.         {#html.push(moment(calendar.getDate().getTime()).format('YYYY.MM'));#}
  256.         {#} else {#}
  257.         {#html.push(moment(calendar.getDateRangeStart().getTime()).format('DD/MM/YYYY'));#}
  258.         {#html.push(' ~ ');#}
  259.         {#html.push(moment(calendar.getDateRangeEnd().getTime()).format('DD/MM/YYYY'));#}
  260.         {#}#}
  261.         {#renderRange.innerHTML = html.join('');#}
  262.         {#}#}
  265.         {#var calendar = new Calendar('#calendar', {#}
  266.         {#defaultView: 'week',#}
  267.         {#taskView: ['milestone'],#}
  268.         {#scheduleView: [ 'allday'],#}
  269.         {#lang: "fr",#}
  270.         {#locale:"fr",#}
  271.         {#useCreationPopup: false,#}
  272.         {#useDetailPopup: true,#}
  274.         {#template: {#}
  275.         {#monthGridHeader: function(model) {#}
  276.         {#var date = new Date(model.date);#}
  277.         {#var template = '<span class="tui-full-calendar-weekday-grid-date">' + date.getDate() + '</span>';#}
  278.         {#return template;#}
  279.         {#},#}
  280.         {#alldayTitle: function() {#}
  281.         {#return 'Jour entier';#}
  282.         {#},#}
  284.         {#popupDelete: function() {#}
  285.         {#return 'Suppresion';#}
  286.         {#},#}
  288.         {#popupEdit: function() {#}
  289.         {#return 'Edition';#}
  290.         {#},#}
  292.         {#milestoneTitle: function () {#}
  293.         {#return 'Intervenants';#}
  294.         {#}#}
  295.         {#},#}
  296.         {#week: {#}
  297.         {#daynames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],#}
  298.         {#startDayOfWeek: 1,#}
  299.         {#narrowWeekend: true#}
  300.         {#},#}
  302.         {#});#}
  303.         {#setRenderRangeText();#}
  305.         {#/**#}
  306.         {#*#}
  307.         {#*/#}
  308.         {#calendar.on('beforeCreateSchedule', function(event) {#}
  309.         {#var startTime = event.start;#}
  310.         {#var endTime = event.end;#}
  311.         {#var isAllDay = event.isAllDay;#}
  312.         {#var guide = event.guide;#}
  313.         {#var triggerEventName = event.triggerEventName;#}
  314.         {#var schedule ;#}
  315.         {#//console.log(startTime.toUTCString());#}
  316.         {#$('#rdv_start').val(startTime.toUTCString());#}
  317.         {#$('#rdv_end').val(endTime.toUTCString());#}
  318.         {#$('#rdv').modal({});#}
  319.         {#$('#rdv_client').select2();#}
  321.         {#console.log(triggerEventName);#}
  322.         {#// if (triggerEventName === 'click') {#}
  323.         {#//     // open writing simple schedule popup#}
  324.         {#//     console.log('cliik');#}
  325.         {#//     $('#rdv').modal(options);#}
  326.         {#//#}
  327.         {#// } else if (triggerEventName === 'dblclick') {#}
  328.         {#//     // open writing detail schedule popup#}
  329.         {#//     console.log('dblclick');#}
  330.         {#// }#}
  332.         {#});#}
  334.         {#calendar.on('clickSchedule', function(event) {#}
  335.         {#console.log(event);#}
  336.         {#});#}
  338.         {#calendar.on('beforeUpdateSchedule', function(event) {#}
  339.         {#console.log('in');#}
  340.         {#var schedule = event.schedule;#}
  341.         {#var url = '{{ path("app_planning_edit", {'id': 'schedule_id'}) }}';#}
  342.         {#url = url.replace("schedule_id", event.schedule.id);#}
  344.         {#window.location.href = url;#}
  346.         {#});#}
  349.         {#const rdvs = JSON.parse('{{ sessionsSalons|raw }}');#}
  350.         {#console.log('RDV', rdvs);#}
  351.         {#if(rdvs.length > 0) {#}
  352.         {#for(var i = 0;i < rdvs.length;i++) {#}
  353.         {#//console.log(rdvs[i]);#}
  354.         {#calendar.createSchedules([#}
  355.         {#{#}
  356.         {#id: rdvs[i].id,#}
  357.         {#calendarId: rdvs[i].id,#}
  358.         {#title: rdvs[i].salon ? rdvs[i].salon.name.toUpperCase() : null,#}
  359.         {#category: 'time',#}
  360.         {#dueDateClass: '',#}
  361.         {#start: rdvs[i].start,#}
  362.         {#end: rdvs[i].start,#}
  363.         {#// attendees: [#}
  364.         {#//     // rdvs[i].client ? 'Client: ' +  rdvs[i].client.lastname.toUpperCase() : null,#}
  365.         {#//     rdvs[i].intervenant ? 'Intervenant: ' +  rdvs[i].intervenant.lastname.toUpperCase() : null,#}
  366.         {#// ],#}
  367.         {#isAllDay: true#}
  368.         {#}#}
  369.         {#]);#}
  370.         {#}#}
  371.         {#}#}
  373.         {#$('#form_add_rdv').on('submit', function (e) {#}
  374.         {#e.preventDefault();#}
  376.         {#const path = "{{ path('app_planning_addrdvajax') }}";#}
  377.         {#$.ajax({#}
  378.         {#url: path,#}
  379.         {#data: $(this).serialize(),#}
  380.         {#type: 'post',#}
  381.         {#success: function(data) {#}
  382.         {#console.log(data);#}
  383.         {#console.log(data.start);#}
  384.         {#console.log( new Date( data.start).toISOString());#}
  385.         {#$('#rdv').modal('hide');#}
  386.         {#calendar.createSchedules([{#}
  387.         {#id: data.id,#}
  388.         {#calendarId: data.id,#}
  389.         {#title: data.client ? data.client.lastname.toUpperCase() : null,#}
  390.         {#category: 'time',#}
  391.         {#dueDateClass: '',#}
  392.         {#start: new Date( data.start).toISOString(),#}
  393.         {#end:  new Date( data.end).toISOString()#}
  394.         {#}]);#}
  396.         {#}#}
  397.         {#});#}
  400.         {#});#}
  403.         {#/**#}
  404.         {#* Filter#}
  405.         {#*/#}
  406.         {#$('.filter').on('change', function (e) {#}
  408.         {#e.preventDefault();#}
  409.         {#const type = $(this).data('type');#}
  410.         {#const val = $(this).val();#}
  411.         {#console.log('value selected', val);#}
  412.         {#let path = null;#}
  414.         {#if(type === 'company') {#}
  415.         {#console.log('type',type);#}
  416.         {#$('.select-intervenant').val(null).trigger('change.select2');#}
  417.         {#$('.select-site').val(null).trigger('change.select2');#}
  418.         {#path = "{{ path('app_planning_ajaxfilter', {#}
  419.         {#'company' : 'company_id',#}
  420.         {#}) }}";#}
  421.         {#path = path.replace("company_id", val);#}
  422.         {#}#}
  424.         {#if(type === 'intervenant') {#}
  425.         {#console.log('type',type);#}
  426.         {#$('.select-company').val(null).trigger('change.select2');#}
  427.         {#$('.select-site').val(null).trigger('change.select2');#}
  428.         {#path = "{{ path('app_planning_ajaxfilter', {#}
  429.         {#'intervenant' : 'intervenant_id',#}
  430.         {#}) }}";#}
  431.         {#path = path.replace("intervenant_id", val);#}
  432.         {#}#}
  434.         {#if(type === 'site') {#}
  435.         {#console.log('type',type);#}
  436.         {#$('.select-intervenant').val(null).trigger('change.select2');#}
  437.         {#$('.select-company').val(null).trigger('change.select2');#}
  438.         {#path = "{{ path('app_planning_ajaxfilter', {#}
  439.         {#'site' : 'site_id'#}
  440.         {#}) }}";#}
  441.         {#path = path.replace("site_id", val);#}
  442.         {#}#}
  443.         {#console.log(path);#}
  444.         {#if(path && val) {#}
  445.         {#$.ajax({#}
  446.         {#url: path,#}
  447.         {#type: 'get',#}
  448.         {#success: function(data) {#}
  449.         {#calendar.clear();#}
  451.         {#if(data.length >  0) {#}
  453.         {#for(var i = 0;i < data.length; i++) {#}
  455.         {#calendar.createSchedules([{#}
  456.         {#id: data[i].id,#}
  457.         {#calendarId: data[i].id,#}
  458.         {#title: data[i].client ? data[i].client.lastname.toUpperCase() : null,#}
  459.         {#category: 'time',#}
  460.         {#dueDateClass: '',#}
  461.         {#start: new Date( data[i].start).toISOString(),#}
  462.         {#end:  new Date( data[i].end).toISOString(),#}
  463.         {#isAllDay: true#}
  464.         {#}]);#}
  465.         {#}#}
  467.         {#}#}
  470.         {#}#}
  471.         {#});#}
  472.         {#}#}
  473.         {#else {#}
  474.         {#$.ajax({#}
  475.         {#url: "{{ path('app_planning_ajaxfilter') }}",#}
  476.         {#type: 'get',#}
  477.         {#success: function(data) {#}
  478.         {#calendar.clear();#}
  480.         {#if(data.length >  0) {#}
  482.         {#for(var i = 0;i < data.length; i++) {#}
  484.         {#calendar.createSchedules([{#}
  485.         {#id: data[i].id,#}
  486.         {#calendarId: data[i].id,#}
  487.         {#title: data[i].client ? data[i].client.lastname.toUpperCase() : null,#}
  488.         {#category: 'time',#}
  489.         {#dueDateClass: '',#}
  490.         {#start: new Date( data[i].start).toISOString(),#}
  491.         {#end:  new Date( data[i].end).toISOString(),#}
  492.         {#isAllDay: true#}
  493.         {#}]);#}
  494.         {#}#}
  496.         {#}#}
  499.         {#}#}
  500.         {#});#}
  502.         {#}#}
  506.         {#});#}
  508.         $('#date_debut').flatpickr({
  509.             'dateFormat' : 'Y-m-d',
  510.             "locale": "fr",
  511.         });
  513.         $('#date_fin').flatpickr({
  514.             'dateFormat' : 'Y-m-d',
  515.             "locale": "fr"
  516.         });
  518.         new Tablesort(document.getElementById('table'));
  519.         $('#filter-salon').select2({ width: '100%' });
  520.         $('#filter-intervenant').select2({ width: '100%' });
  522.     </script>
  524. {% endblock %}