templates/abscence_sheet/new.html.twig line 1

Open in your IDE?
  1. {% extends 'layout/backEndLayout.html.twig' %}
  3. {% block content %}
  4. {% form_theme form 'bootstrap_4_layout.html.twig' %}
  5. <div class="col-12 jumbotron" >
  7. <div class="row mt-4 mx-auto box-shadow">
  8. <div class="card-header">
  9. <h3 class="my-0 text-center text-justify text-uppercase"> Nouvelle fiche d'abscences</h3>
  10. </div>
  11. <div class="mt-4 col-md-12 col-sm-12 table-responsive">
  13. <div class="row">
  14. <div class="col-3 table-responsive"></div>
  15. <div class="col-6 table-responsive">
  17. {{ form_start(form, {action: path('admin_abscences_sheet_create'),'attr': { 'class':'evaluation'} }) }}
  18. <p>
  19. {{ form_widget(form.sequence ,{'attr':{'class':'ChoiceSequence'} } ) }}
  20. </p>
  21. <p>
  22. {{ form_widget(form.classRoom,{'attr':{ 'name' :'ChoiceClassRoom'} }) }}
  23. </p>
  24. <div class="row">
  25. <div class="col-6">
  26. {{ form_widget(form.startDate,{'attr':{ 'name' :'StartDate'} }) }}
  27. </div>
  28. <div class="col-6">
  29. {{ form_widget(form.endDate,{'attr':{ 'name' :'EndDate'} }) }}
  30. </div>
  31. </div>
  34. </div>
  35. <div class="col-3 table-responsive"></div>
  36. </div>
  37. </div>
  38. <div id="ficheBodyStudents" class=" col-md-12 row">
  39. {% include "abscence_sheet/liststudents.html.twig" %}
  40. </div>
  41. </div>
  42. <div class="row mt-2 mx-auto">
  43. <div class=" col-3">
  44. </div>
  45. <div class=" col-3 mx-auto btn-group d-inline-flex p-2 bd-highlight">
  46. <button class="btn btn-danger" type="submit">
  47. <b>
  48. <i class="fa fa-balance-scale"></i>submit</b>
  49. </button>
  50. </div>
  51. <div class=" col-3 mx-auto btn-group d-inline-flex p-2 bd-highligh">
  52. <a class="btn btn-info" href="{{ path('admin_abscences_sheet_index') }}">
  53. <i class="fa fa-list"></i>
  54. {{ 'Back to the list'|trans({}, 'admin') }}
  55. </a>
  57. </div>
  58. <div class=" col-3">
  59. </div>
  60. </div>
  62. {{ form_end(form) }}
  63. </div>
  65. {% endblock %}
  66. {% block footer %}
  67. {{ parent() }}
  68. {% endblock %}
  70. {% block javascripts %}
  71. {{parent()}}
  72. <script type="text/javascript">
  74. var classRoom = $("#abscence_sheet_classRoom");
  75. var idClassRoom, idSequence=$("#abscence_sheet_sequence").val(), startDate, endDate;
  77. classRoom.change(function () {
  78. idClassRoom = $("#abscence_sheet_classRoom option:selected").val();
  79. $.ajax({
  80. type: "POST",
  81. url: "{{ path('admin_abscence_list_students') }}",
  82. data: {
  83. idClassRoom: idClassRoom
  84. },
  85. datatype: "json",
  86. success: function (data) {
  87. $("#ficheBodyStudents").html(data).show();
  88. }
  89. });
  90. });
  91. $("#abscence_sheet_sequence").change(function () {
  92. idSequence = $(this).val();
  93. });
  94. $("#abscence_sheet_startDate").change(function () {
  95. startDate = $(this).val();
  96. });
  97. $("#abscence_sheet_endDate").change(function () {
  98. endDate = $(this).val();
  99. });
  102. $(function () {
  103. $(document).on('submit', 'form', function (e) { // il est impératif de commencer avec cette méthode qui va empêcher le navigateur d'envoyer le formulaire lui-même
  104. e.preventDefault();
  105. console.log(idClassRoom, idSequence, startDate, endDate);
  106. var abscencesJson = [];
  107. if(startDate < endDate) {
  109. $("input[max=180]").each(function (index) {
  110. abscencesJson.push({"matricule": $(this).attr('id'), "weight": $(this).val(), "raison": $(this).parent().next().children().val()});
  111. });
  112. console.log(abscencesJson);
  113. postData = {
  114. "abscences": JSON.stringify(abscencesJson),
  115. "idRoom": idClassRoom,
  116. "idSequence": idSequence,
  117. "startDate": startDate,
  118. "endDate": endDate
  119. };
  121. if(abscencesJson.length>0){
  123. $.ajax({
  124. type: "POST",
  125. url: "{{ path('admin_abscences_sheet_create') }}",
  126. data: postData,
  127. datatype: "json",
  128. success: function (data) {
  129. alert("Enregistre avec succes.");
  130. },
  131. error: function (e) {
  132. console.log(e.message);
  133. alert("Echec.");
  134. }
  135. });
  136. } else {
  137. alert("Aucune abscence enregistree");
  138. }
  140. } else {
  141. alert("La date de debut doit etre anterieure a la date de fin");
  142. }
  143. });
  144. });
  148. </script>
  150. {% endblock javascripts %}