templates/employee_log_hour/log.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}{{ title }}{% endblock %}
  5. {% block stylesheets %}
  6.     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
  7.     <style>
  8.         #kt_datatable_row_grouping tr.group {
  9.             --bs-table-accent-bg: var(--bs-table-striped-bg) !important;
  10.         }
  12.         #kt_datatable_row_grouping tr.even, #kt_datatable_row_grouping tr.odd {
  13.             --bs-table-accent-bg: white !important;
  14.         }
  16.         #logDate {
  17.             text-align: center;
  18.             font-size: 25px;
  19.             font-weight: bold;
  20.         }
  21.     </style>
  22. {% endblock %}
  24. {% block body %}
  25.     <div class="card mb-5 mb-xl-10">
  26.         <div class="card-body fs-6 py-15 px-10 py-lg-15 px-lg-15 text-gray-700">
  27.             <div class="pb-10 row g-6 g-xl-9">
  28.                 <div class="col-md-4"></div>
  29.                 <div class="col-md-4"><input id="logDate" type="text" class="form-control form-control-solid"
  30.                                              autocomplete="false"></div>
  31.                 <div class="col-md-2">
  32.                     <button id="exportLogSheet" class="btn btn-primary">Exporter la fiche d'absence</button>
  33.                 </div>
  34.                 <div class="col-md-2"></div>
  35.             </div>
  36.             <!--begin::Wrapper-->
  37.             <div class="d-flex flex-stack flex-wrap mb-5">
  38.                 <!--begin::Search-->
  39.                 <div class="d-flex align-items-center position-relative my-1 mb-2 mb-md-0">
  40.                     <!--begin::Svg Icon | path: icons/duotune/general/gen021.svg-->
  41.                     <span class="svg-icon svg-icon-1 position-absolute ms-6">
  42.                                                         <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
  43.                                                              xmlns="http://www.w3.org/2000/svg">
  44.                                                             <rect opacity="0.5" x="17.0365" y="15.1223" width="8.15546"
  45.                                                                   height="2" rx="1"
  46.                                                                   transform="rotate(45 17.0365 15.1223)"
  47.                                                                   fill="currentColor"/>
  48.                                                             <path d="M11 19C6.55556 19 3 15.4444 3 11C3 6.55556 6.55556 3 11 3C15.4444 3 19 6.55556 19 11C19 15.4444 15.4444 19 11 19ZM11 5C7.53333 5 5 7.53333 5 11C5 14.4667 7.53333 17 11 17C14.4667 17 17 14.4667 17 11C17 7.53333 14.4667 5 11 5Z"
  49.                                                                   fill="currentColor"/>
  50.                                                         </svg>
  51.                                                     </span>
  52.                     <!--end::Svg Icon-->
  53.                     <input type="text" data-table-filter="search" class="form-control form-control-solid w-250px ps-15"
  54.                            placeholder="Search"/>
  55.                 </div>
  56.                 <!--end::Search-->
  57.             </div>
  58.             <!--end::Wrapper-->
  59.             <table id="kt_datatable_row_grouping"
  60.                    class="table table-row-bordered gy-5 gs-7 border rounded w-100">
  61.                 <thead>
  62.                 <tr>
  63.                     <th>Département</th>
  64.                     <th>Poste</th>
  65.                     <th>Nom Complet</th>
  66.                     <th>Historique</th>
  67.                     <th>Type</th>
  68.                     <th>Heure</th>
  69.                     <th>#</th>
  70.                 </tr>
  71.                 </thead>
  72.                 <tbody>
  73.                 {% for employee in employees %}
  74.                     <tr data-employee-id="{{ employee.id }}">
  75.                         <th>{{ employee.department }}</th>
  76.                         <th>{{ employee.position }}</th>
  77.                         <th><a href="{{ path('employee_show', {'id': employee.id}) }}">{{ employee.fullName }}</a></th>
  78.                         <th>
  79.                             <div class="history">{{ employee.historyHtml | raw }}</div>
  80.                         </th>
  81.                         <th>
  82.                             <select class="form-select form-select-solid in_out no-select" size="1" autocomplete="off">
  83.                                 {% set InOut = enum('App\\Enum\\EmployeeHourLog\\InOut') %}
  84.                                 <option value="" selected>Séléctionner le type</option>
  85.                                 {% for type in InOut.cases() %}
  86.                                     <option value="{{ type.value }}">
  87.                                         {{ type.title() }}
  88.                                     </option>
  89.                                 {% endfor %}
  90.                             </select>
  91.                         </th>
  92.                         <th>
  93.                             <input type="text" class="form-control form-control-solid logTime">
  94.                         </th>
  95.                         <th>
  96.                             <button type="button" class="btn btn-primary btn-success me-10 logTimeValidate">
  97.                                 <span class="indicator-label">Valider</span>
  98.                                 <span class="indicator-progress">Pointage en cours... <span
  99.                                             class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
  100.                             </button>
  101.                         </th>
  102.                     </tr>
  103.                 {% endfor %}
  104.                 </tbody>
  105.             </table>
  106.         </div>
  108.     </div>
  110. {% endblock %}
  112. {% block javascripts %}
  113.     <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
  114.     <script>
  115.         var groupColumn = 0;
  116.         var table = $("#kt_datatable_row_grouping").DataTable({
  117.             columnDefs: [
  118.                 {
  119.                     targets: groupColumn,
  120.                     visible: false,
  121.                 },
  122.                 {
  123.                     targets: 1,
  124.                     width: "15%"
  125.                 },
  126.                 {
  127.                     targets: 2,
  128.                     width: "15%"
  129.                 },
  130.                 {
  131.                     targets: 3,
  132.                     width: "20%"
  133.                 }
  134.             ],
  135.             order: [
  136.                 [
  137.                     groupColumn, "asc"
  138.                 ]
  139.             ],
  140.             displayLength: 500,
  141.             drawCallback: function (settings) {
  142.                 var api = this.api();
  143.                 var rows = api.rows({
  144.                     page: "current"
  145.                 }).nodes();
  146.                 var last = null;
  148.                 api.column(groupColumn, {
  149.                     page: "current"
  150.                 }).data().each(function (group, i) {
  151.                     if (last !== group) {
  152.                         $(rows).eq(i).before(
  153.                             "<tr class=\"group fs-5 fw-bolder\"><td colspan=\"5\">" + group + "</td></tr>"
  154.                         );
  156.                         last = group;
  157.                     }
  158.                 });
  159.             }
  160.         });
  161.         $("#kt_datatable_row_grouping tbody").on("click", "tr.group", function () {
  162.             var currentOrder = table.order()[0];
  163.             if (currentOrder[0] === groupColumn && currentOrder[1] === "asc") {
  164.                 table.order([groupColumn, "desc"]).draw();
  165.             } else {
  166.                 table.order([groupColumn, "asc"]).draw();
  167.             }
  168.         });
  169.         handleSearchDatatable(table);
  171.         var today = new Date();
  172.         $('.logTime').timepicker({
  173.             timeFormat: 'HH:mm',
  174.             interval: 15,
  175.             minTime: '6:00am',
  176.             maxTime: '11:00pm',
  177.             defaultTime: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), 0, 0),
  178.             startTime: '06:00am',
  179.             dynamic: false,
  180.             dropdown: true,
  181.             scrollbar: true
  182.         });
  185.         $(".logTimeValidate").on('click', function () {
  186.             let element = $(this);
  187.             element.attr('data-kt-indicator', 'on');
  189.             var tr = $(this).parents('tr');
  191.             let date = $("#logDate").val();
  192.             let time = tr.find('.logTime').val();
  193.             let employeeId = tr.attr('data-employee-id');
  194.             let inOut = tr.find('.in_out').val();
  196.             if (typeof inOut === 'undefined' || inOut === '') {
  197.                 Swal.fire("Erreur!", "Le type est obligatoire !", "error");
  198.                 element.removeAttr('data-kt-indicator');
  199.                 return false;
  200.             }
  202.             var data = {
  203.                 'employeeId': employeeId,
  204.                 'inOut': inOut,
  205.                 'logDate': date,
  206.                 'logTime': time,
  207.             }
  209.             $.ajax({
  210.                 url: '{{ path('employee_log_hour_add') }}',
  211.                 data: data,
  212.                 dataType: 'json',
  213.                 type: "POST",
  214.                 success: function (response) {
  215.                     if (response.status) {
  216.                         toastr["success"]('MAJ', response.message);
  217.                     } else {
  218.                         Swal.fire("Erreur!", response.message, "error")
  219.                     }
  220.                     tr.find('.history').html(response.historyHtml);
  221.                     element.removeAttr('data-kt-indicator');
  223.                     tr.find('.in_out').val('');
  224.                 },
  225.                 error: function (error) {
  226.                     Swal.fire("Erreur!", "Une erreur s'est produite, Prière de contacter la direction !", "error")
  227.                 }
  228.             });
  230.             //element.removeAttr('data-kt-indicator');
  231.         });
  234.         window.date = '{{ date }}';
  235.         var logDate = $('#logDate');
  236.         logDate.daterangepicker({
  237.             singleDatePicker: true,
  238.             showDropdowns: true,
  239.             autoUpdateInput: true,
  240.             startDate: window.date,
  241.             locale: {
  242.                 format: "DD/MM/YYYY",
  243.                 applyLabel: "Appliquer",
  244.                 cancelLabel: "Annuler",
  245.                 weekLabel: "W",
  246.                 firstDay: 1,
  247.             }
  248.         });
  250.         logDate.on('apply.daterangepicker', function (ev, picker) {
  251.             Swal.fire({
  252.                 text: 'Attention: la page va se raffraichir',
  253.                 icon: "info",
  254.                 confirmButtonText: "Confirmer !",
  255.                 customClass: {
  256.                     confirmButton: "btn btn-danger font-weight-bold btn-pill",
  257.                     cancelButton: "btn btn-secondary font-weight-bold btn-pill"
  258.                 },
  259.                 cancelButtonText: 'Annuler',
  260.                 showCancelButton: true
  261.             }).then((result) => {
  262.                 if (result.isConfirmed) {
  263.                     let date = picker.startDate.format("DD/MM/YYYY");
  264.                     $(this).val(date);
  265.                     window.location.href = window.location.href.replace(/[\?#].*|$/, "?date=" + date);
  266.                 }
  268.                 $(this).val(window.date);
  269.             })
  270.         });
  272.         logDate.on('cancel.daterangepicker', function (ev, picker) {
  273.             $(this).val(window.date);
  274.         });
  276.         $('#exportLogSheet').on('click', function (e) {
  277.             e.preventDefault();
  278.             var url = '{{ path('employee_log_sheet') }}';
  279.             window.open(url.replace(/[\?#].*|$/, "?date=" + $('#logDate').val()));
  280.         })
  282.     </script>
  283. {% endblock %}