carreras.php 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Auditoría asistencial</title>
  7. <?php
  8. include 'import/html_css_files.php';
  9. ?>
  10. <link rel="stylesheet" type="text/css" href="https://unpkg.com/trix@2.0.0/dist/trix.css">
  11. <style>
  12. [v-cloak] {
  13. display: none;
  14. }
  15. </style>
  16. <script src="js/jquery.min.js"></script>
  17. <script src="js/jquery-ui.js"></script>
  18. <script src="js/bootstrap/bootstrap.min.js"></script>
  19. </head>
  20. <body>
  21. <?
  22. $redirect = $_SERVER['PHP_SELF'];
  23. include "import/html_header.php";
  24. global $user;
  25. html_header(
  26. "Carreras",
  27. "Sistema de gestión de checador",
  28. );
  29. ?>
  30. <main class="container-fluid px-4 my-4" id="app" v-cloak @vue:mounted="mounted" style="min-height: 70vh;">
  31. <section class="row mt-4">
  32. <div class="col-12 position-relative">
  33. <!-- Loop for messages -->
  34. <div class="toast show shadow-sm mb-3 bg-white"
  35. style="position: fixed; top: 15%; right: 1%; max-width: 300px;" role="alert" aria-live="assertive"
  36. aria-atomic="true"
  37. @vue:mounted="$('.toast').toast({delay: 5000}).toast('show').on('hidden.bs.toast', () => { message.text = '' })"
  38. v-if="message.text">
  39. <div class="toast-header">
  40. <strong class="mr-auto text-primary text-uppercase text-center w-100 px-4">
  41. {{ message.title }}
  42. </strong>
  43. <small class="text-muted">{{ message.timestamp }}</small>
  44. <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"
  45. @click="message.text = ''">
  46. <span aria-hidden="true">
  47. <i class="fas fa-times"></i>
  48. </span>
  49. </button>
  50. </div>
  51. <div class="toast-body">
  52. <div :class="message.type == 'success' ? 'text-success' : 'text-danger'"><i
  53. :class="message.type == 'success' ? 'fas fa-check-circle' : 'fas fa-times-circle'"></i>
  54. {{ message.text }}
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. </section>
  60. <div class="container">
  61. <div class="row" v-for="facultad in carreras">
  62. <!-- Facultad Card -->
  63. <div class="card col-12 mb-4 shadow-lg">
  64. <div class="card-header bg-primary text-white">
  65. <h3 class="mb-1">{{ facultad.facultad_nombre }}</h3>
  66. </div>
  67. <div class="card-body bg-white">
  68. <div class="row justify-content-center">
  69. <!-- Loop for Carreras -->
  70. <div class="col-md-6 mb-3" v-for="carrera in facultad.carreras">
  71. <div class="card border-secondary mb-3 shadow-sm">
  72. <div class="card-body">
  73. <h5 class="card-title text-primary text-uppercase text-center w-100 px-4 mb-3 text-truncate text-break border-bottom border-secondary pb-2"
  74. :title="carrera.carrera_nombre">
  75. {{ carrera.carrera_nombre }}
  76. </h5>
  77. <!-- Dropdown for Niveles -->
  78. <div class="dropdown">
  79. <button class="btn btn-outline-secondary dropdown-toggle" type="button"
  80. data-toggle="dropdown" aria-expanded="false"
  81. @vue:mounted="$('.dropdown-toggle').dropdown()">
  82. {{ carrera.nivel_nombre }}
  83. </button>
  84. <div class="dropdown-menu shadow">
  85. <a class="dropdown-item" v-for="nivel in niveles" key="nivel.nivel_id"
  86. style="cursor: pointer; user-select: none;"
  87. @click="setNivel(carrera, nivel)"
  88. :class="nivel.nivel_id == carrera.nivel_id ? 'active' : ''"
  89. :disabled="nivel.nivel_id == carrera.nivel_id">
  90. {{ nivel.nivel_nombre }}
  91. </a>
  92. </div>
  93. </div>
  94. </div>
  95. </div>
  96. </div> <!-- End of Carreras loop -->
  97. </div>
  98. </div>
  99. </div>
  100. <!-- End of Facultad Card -->
  101. </div>
  102. </div>
  103. </main>
  104. <?
  105. include "import/html_footer.php"; ?>
  106. <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
  107. integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
  108. crossorigin="anonymous"></script>
  109. <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
  110. integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
  111. crossorigin="anonymous"></script>
  112. <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"
  113. integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+"
  114. crossorigin="anonymous"></script>
  115. <script src="js/datalist.js"></script>
  116. <script src="js/carreras.js?<?= rand(0, 2) ?>" type="module"></script>
  117. <script src="js/scrollables.js"></script>
  118. </body>
  119. </html>