templates/student/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Students List{% endblock %}
  5. {% block body %}
  7.     <div class="row">
  8.         <div class='col-lg-3 col-md-3 col-sm-4'>
  9.             <h2>Students</h2>
  10.         </div>
  11.     </div>
  13.     <div class="row">
  14.         {# crear #}
  15.         <div class='col-sm-12'>
  16.             <div class="card-header">
  17.                 <h5 class="mb-0">
  18.                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#newOutlay" aria-expanded="false" aria-controls="collapseExample">
  19.                         <span title="Expandir formulario de búsqueda"><i class="fa fa-arrow-right"></i></span>
  20.                         BUSCAR ESTUDIANTES
  21.                         <div class="tooltip" style="margin-left: 35px;color: #FFF;background-color: #dc3545;padding: 2px 7px;border-radius: 5px;width: auto;font-size: 1rem;">
  22.                             {#                            <span style="margin-left: 35px;color: #FFF;background-color: #dc3545;padding: 1px 6px;border-radius: 5px;">#}
  23.                             <i class="fa fa-search"></i>
  24.                             {#                        </span>#}
  25.                             <span class="tooltiptext" style="font-size: 0.7rem; width: 280px;">Presiona para expandir u ocultar el formulario</span>
  26.                         </div>
  27.                     </button>
  28.                 </h5>
  29.             </div>
  31.             <div class="collapse" id="newOutlay">
  32.                 <div class="card card-body formix">
  33.                     <form id='form-search' class="form-group" method="GET">
  34.                         <div class="form-row" style="margin-left: 1.5rem;">
  35.                             <div class="col-sm-3 form-check">
  36.                                 <input type="checkbox" class="form-check-input" id="stdChReviewTest" name='checkProcessTest' value="1" {% if checkProcessTest == 1 %} checked {% endif %}>
  37.                                 <label class="form-check-label" for="stdChReviewTest">Evaluaciones por calificar</label>
  38.                                 <div class="tooltip">?<span class="tooltiptext" style="width: 250px;">Al seleccionar se buscarán los estudiantes con<br><b>Evaluaciones por calificar</b></span></div>
  39.                             </div>
  40.                         </div>
  42.                         <div class="form-row">
  43.                             <div class="col-sm-2">
  44.                                 <label class="lblMarginButon" for="stdName">Nombre del estudiante</label>
  45.                                 {#                            <div class="tooltip">?<span class="tooltiptext">Nombre del estudiante</span></div>#}
  46.                                 <input type="text" class="form-control" id="stdName" placeholder="Nombre del estudiante" name='names' autocomplete="off" value="{{ names }}">
  47.                             </div>
  48.                             <div class="col-sm-2">
  49.                                 <label class="lblMarginButon" for="stdLastname">Apellido del estudiante</label>
  50.                                 {#                            <div class="tooltip">?<span class="tooltiptext">Nombre del estudiante</span></div>#}
  51.                                 <input type="text" class="form-control" id="stdLastname" placeholder="Apellido del estudiante" name='lastname' autocomplete="off" value="{{ lastname }}">
  52.                             </div>
  53.                             <div class="col-sm-2">
  54.                                 <label class="lblMarginButon" for="stdIdentification">Identificación del estudiante</label>
  55.                                 {#                            <div class="tooltip">?<span class="tooltiptext">Nombre del estudiante</span></div>#}
  56.                                 <input type="text" class="form-control" id="stdIdentification" placeholder="00000000" name='identification' autocomplete="off" value="{{ identification }}">
  57.                             </div>
  58.                             <div class="col-sm-2">
  59.                                 <label class="lblMarginButon" for="stdPhone">Teléfono del estudiante</label>
  60.                                 {#                            <div class="tooltip">?<span class="tooltiptext">Nombre del estudiante</span></div>#}
  61.                                 <input type="text" class="form-control" id="stdPhone" placeholder="3100000000" name='phone' autocomplete="off" value="{{ phone }}">
  62.                             </div>
  63.                             <div class="col-sm-2">
  64.                                 <label class="lblMarginButon" for="stdEmail">Email del estudiante</label>
  65.                                 {#                            <div class="tooltip">?<span class="tooltiptext">Nombre del estudiante</span></div>#}
  66.                                 <input type="text" class="form-control" id="stdEmail" placeholder="example@mail.co" name='email' autocomplete="off" value="{{ email }}">
  67.                             </div>
  68.                         </div>
  70.                         <div class="form-row">
  71.                             <div class="col-sm-2">
  72.                                 <label class="lblMarginButon" for="modality">Modalidad</label>
  73.                                 <div class="tooltip">?<span class="tooltiptext">Modalidad de estudio</span></div>
  74.                                 {#                                <input type="text" class="form-control" id="stdEmail" placeholder="example@mail.co" name='email' autocomplete="off" value="{{ email }}">#}
  75.                                 <select name="modality" id="modality" class="form-control">
  76.                                     <option value="">Todas...</option>
  77.                                     <option value="Presencial" {% if modality == 'Presencial' %}selected{% endif %}>Presencial</option>
  78.                                     <option value="Online" {% if modality == 'Online' %}selected{% endif %}>Online</option>
  79.                                     <option value="Mixta" {% if modality == 'Mixta' %}selected{% endif %}>Mixta</option>
  80.                                 </select>
  81.                             </div>
  82.                             <div class="col-sm-2">
  83.                                 <label class="lblMarginButon" for="stdCampus">Sede/Campus</label>
  84.                                 <input type="text" class="form-control" id="stdCampus" name='campus' autocomplete="off" value="{{ campus }}">
  85.                             </div>
  86.                             <div class="col-auto">
  87.                                 <button type="submit" id="outSave" class="btn btn-danger btn-small mb-2 btnTopLabel btnTop5">Buscar</button>
  88.                             </div>
  89.                         </div>
  90.                     </form>
  91.                 </div>
  92.             </div>
  93.         </div>
  94.     </div>
  96.     <div class="row" style="margin: 15px 5px;">
  97.         <div class='col-sm-5'>
  98.             <a href="{{ path('admin_student_create') }}" class="btn btn-danger btn-small">Crear Estudiantes</a>
  99.         </div>
  100.         <div class='col-sm-7'>
  101.             <div class="row">
  102.                 <div class='col-sm-6'>
  103.                     <div class="form-group">
  104.                         <label for="exampleInputEmail1">Excel para activar examenes</label><br>
  105.                         <input type="file" multiple="multiple" id="zipAttached" name="zipAttached" accept=".xlsx"/>
  106.                     </div>
  107.                     <span id="emailHelp" class="form-text text-danger" style="font-size: 1rem;"></span>
  108.                 </div>
  109.                 <div class="col-sm-3 center">
  110.                     <div class="form-group">
  111.                         <button type="submit" id="sendFile" class="btn btn-primary" style="width: 115px;" disabled><i class="fa fa-cogs"></i> Enviar</button>
  112.                         <a href="{{ path('admin_student_excel_template') }}" class="btn btn-success mt-1" target="_blank" style="width: 115px;"><i class="fa fa-file-excel-o"></i> Plantilla</a>
  113.                     </div>
  114.                 </div>
  115.                 <div id="spinsending" class="col-sm-2 hide">
  116.                     <div class="spinner-border" style="color: #7145d6!important;"></div>
  117.                 </div>
  118.             </div>
  119.         </div>
  120.         <div class="count col-4 col-sm-2">
  121.             <span class="small text-danger">Cantidad Total: {{ listdata.getTotalItemCount }}</span>
  122.         </div>
  123.         <div class="count col-3 col-sm-2">
  124.             {% if filters %}
  125.                 <a href="{{ path('admin_student_list') }}" class="">Ver Todos</a>
  126.             {% endif %}
  127.         </div>
  128.     </div>
  130.     <div class="row">
  131.         <div class="col-sm-12 table-responsive hide" style="margin-bottom: 50px;">
  132.             <table id="myTableScheduled" class="table table-striped table-hover table-sm">
  133.                 <thead class="thead-light" style="font-size: 0.9rem;">
  134.                     <tr>
  135.                         <th id="IdCard" class="center" style="width: 20%;">Card ID</th>
  136.                         <th id="Level" class="center" style="width: 15%;">Level</th>
  137.                         <th id="Dates" class="center" style="width: 25%;">Dates</th>
  138.                     </tr>
  139.                 </thead>
  140.                 <tbody></tbody>
  141.             </table>
  142.             <hr>
  143.         </div>
  145.         <div class="col-sm-12 heigthInList table-responsive">
  146.             <table id="myTable" class="table table-striped table-hover table-sm">
  147.                 <thead class="thead-light" style="font-size: 0.9rem;">
  148.                     <tr>
  149.                         <th id="tdName" class="center" style="width: 30%;">Full Name</th>
  150.                         <th class="center" style="width: 13%;"><span class="hdmovile">Dispose</span></th>
  151.                         <th class="" style="width: 17%;"><span class="hdmovile">Campus</span></th>
  152.                         <th class="" style="width: 20%;">Email/Phone</th>
  153.                         <th class="" style="width: 10%;">Level</th>
  154.                         <th class="center" style="width: 10%;"><span class="hdmovile"></span></th>
  155.                     </tr>
  156.                 </thead>
  157.                 <tbody>
  158.                     {% for student in listdata %}
  159.                         <tr>
  160.                             <td>
  161.                                 <div class="row">
  162.                                     <div class="col-12" style="line-height: 0.9;">
  163.                                         {{ student.names }} {{ student.lastname }} <br>
  164.                                         <small style="font-size: 0.75rem; padding-left: 22px;">{{ student.documentType }} {{ student.documentNumber }}</small>
  165.                                     </div>
  166.                                     <div class="col-sm-2"><a href="{{ path('admin_student_edit', {'id': student.id}) }}">Editar</a></div>
  167.                                     <div class="col-sm-2"><a href="{{ path('admin_student_modules', {'studentid': student.id}) }}">Modulos</a></div>
  168.                                 </div>
  169.                             </td>
  170.                             <td class="center" style="font-size: 0.86rem;">
  171.                                 <div class="row">
  173.                                     <div class="col-12" style="font-size: 0.7rem;">
  174.                                         {% if studentLevel[student.id] and studentLevel[student.id]['module'] and studentLevel[student.id]['module'].enableSince %}
  175.                                             {% set module = studentLevel[student.id]['module'] %}
  176.                                             <i class="fa fa-toggle-on" style="color: #23bf00;"></i> {{ module.module.level }} <br>
  177.                                             {{ module.enableSince ? module.enableSince | date('Y-m-d H:i') : '' }} <br>
  178.                                             {{ module.enableUntil ? module.enableUntil | date('Y-m-d H:i') : '' }}
  179.                                         {% endif %}
  180.                                     </div>
  182.                                 </div>
  183.                             </td>
  184.                             <td class="">
  185.                                 <div class="row">
  186.                                     <div class="col-12" style="font-size: 1rem;"><i class="fa fa-home text-primary"></i> {{ student.campus }}</div>
  187.                                     <div class="col-12" style="font-size: 0.85rem;"><i class="fa fa-thumb-tack text-primary"></i> {{ student.modality }}</div>
  188.                                 </div>
  189.                             </td>
  190.                             <td>
  191.                                 <div class="row">
  192.                                     <div class="col-12" style="font-size: 0.9rem;"><a href="mailto: {{ student.email }}"><i class="fa fa-envelope-o"></i> {{ student.email }}</a></div>
  193.                                     <div class="col-12" style="font-size: 0.9rem;"><a href="tel: +57{{ student.phone }}"><i class="fa fa-phone"></i> {{ student.phone }}</a></div>
  194.                                 </div>
  195.                             </td>
  196.                             <td>
  197.                                 <div class="row">
  198.                                     <div class="col-12" style="font-size: 0.9rem;">
  199.                                         {% if studentLevel[student.id] and studentLevel[student.id]['level'] %}
  200.                                             {{ studentLevel[student.id]['level'].level.course }}
  201.                                             {{ studentLevel[student.id]['level'].level.name }}
  202.                                         {% endif %}
  203.                                     </div>
  204.                                 </div>
  205.                             </td>
  206.                             <td>
  207.                                 {% if student.hasInProcessTest == 1 %}
  208.                                     <div class="tooltip" style="background-color: #FFF; width: 25px; border: solid 1px #ffe000; background-color: #00b024;">
  209.                                         <span class="tooltiptext">Revisar Evaluaciones</span>
  210.                                         <a href="{{ path('admin_student_modules', {'studentid': student.id}) }}" style=" font-size: 1rem; color: #ffe000;">
  211.                                             <i class="fa fa-bell-o"></i>
  212.                                         </a>
  213.                                     </div>
  214.                                 {% endif %}
  215.                             </td>
  216.                         </tr>
  217.                     {% endfor %}
  218.                 </tbody>
  219.             </table>
  221.             <div class="navigation">
  222.                 {{ knp_pagination_render(listdata) }}
  223.             </div>
  224.         </div>
  225.     </div>
  226. {% endblock %}
  230. {% block javascripts %}
  231.     {{ parent() }}
  232.     <script type="text/javascript">
  234.         $(document).ready(function () {
  236.             var fileUploadedName = '';
  238.             $('#zipAttached').change(function () {
  239.                 var zipFile = $(this);
  240.                 if ($(zipFile).val() == "") { return; }
  241.                 $('#sendFile').attr('disabled', false);
  242.             });
  244.             $('#sendFile').click(function () {
  245.                 $('#sendFile').attr('disabled', true);
  247.                 var zipFile = $('#zipAttached');
  248.                 if ($(zipFile).val() == "") { return; }
  250.                 $('.newanswer').remove();
  251.                 $('#emailHelp').text('Procesando...');
  253.                 // inicio de la lectura del archivo
  254.                 $('#preloaderView').show();
  255.                 $('#message').text('The file is being uploading and processed');
  256.                 proccessFile(2);
  258.             });
  261.             function proccessFile(proccesssSince) {
  263.                 let fd = new FormData();
  264.                 fd.append('fileUploadedName', fileUploadedName);
  265.                 fd.append('since', proccesssSince);
  267.                 if(!fileUploadedName) {
  268.                     var zipFile = $('#zipAttached');
  269.                     var files = $(zipFile)[0].files[0];
  270.                     fd.append('file', files);
  271.                 }
  273.                 $.ajax({method: 'post', url: '{{ path('admin_student_excel_activate_modules') }}',
  274.                     data: fd, contentType: false, cache: false, processData: false,
  275.                     success: function (data) {
  276.                         fileUploadedName = data.fileName;
  278.                         $('#myTableScheduled').closest('div.hide').removeClass('hide');
  279.                         appendScheduleRow(data.data);
  281.                         if(data.isdocend) {
  282.                             $('#sendFile').attr('disabled', true);
  283.                             fileUploadedName = '';
  284.                             $('#zipAttached').val('');
  285.                             hideOnloading(300);
  286.                             $('#emailHelp').text('File uploaded successfully');
  287.                             return;
  288.                         }
  290.                         proccessFile(data.since);
  291.                         
  292.                     },
  293.                     error: function (error, status, strerror) {
  294.                         $('#modalSelfContent h5.modal-title').text('ERROR en el procesamiento del documento');
  295.                         $('#modalSelfContent .modal-body').html('<p>Se presentó un error al leer el archivo Excel</p><hr>'
  296.                             + '<p>' + 'Código ' + error.status + '<br>' + error.responseJSON.response + '</p>');
  297.                         $('#modalSelfContent').modal('show');
  298.                         hideOnloading(500);
  299.                         $('#zipAttached, #company').val('');
  300.                         $('#zipAttached, #company').attr('disabled', false);
  301.                     }
  302.                 });
  303.             }
  305.         });
  307.         function appendScheduleRow(data) {
  308.             let table = $('#myTableScheduled');
  309.             
  310.             data.forEach(function(i, o) {
  311.                 let tr = $('<tr>');
  312.                 let td1 = $('<td>').text(i.fullName);
  313.                 let td2 = $('<td>').text(i.cardId);
  314.                 let td3 = $('<td>').text(i.course + ': ' + i.level);
  315.                 let exdates = '<div class="small"><small>' + i.datei + '</small></div>'
  316.                         + '<div class="small"><small>' + i.dateo + '</small></div>';
  317.                 let td4 = $('<td>').html(exdates);
  319.                 $(tr).append(td1);
  320.                 $(tr).append(td2);
  321.                 $(tr).append(td3);
  322.                 $(tr).append(td4);
  323.                 $(table).append(tr);
  324.             });
  325.         }
  327.         
  329.     </script>
  330. {% endblock %}