reposiciones_crear.php 57 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058
  1. <?php
  2. require_once 'class/c_login.php';
  3. if (!isset($_SESSION['user'])){
  4. die(header('Location: index.php'));
  5. }
  6. //$user = unserialize($_SESSION['user']);
  7. $user = Login::get_user();
  8. $user->access();
  9. /*print_r($user);
  10. print_r($user->user["id"]);
  11. echo "****|";
  12. print_r($user->acceso);//null sin permisos, w o r
  13. echo "|****|";
  14. print_r($user->profesor);
  15. echo "|****|";
  16. print_r($user->facultad["facultad_id"]);
  17. exit();*/
  18. //profesor, admin, rol, facultad
  19. if ($user->acceso === null && !$user->admin){
  20. die(header('Location: index.php'));
  21. exit();
  22. }
  23. //if (!$user->admin && in_array($user->acceso, ['n']))
  24. //die(header('Location: main.php?error=1'));
  25. //$user->print_to_log('Reposiciones');
  26. //$write = $user->admin || in_array($user->acceso, ['w']);
  27. $write = true; //
  28. $en_fecha = $db->querySingle("SELECT ESTA_EN_PERIODO(NOW()::DATE, :periodo_id)", [':periodo_id' => $user->periodo_id])['esta_en_periodo'];
  29. if($user->jefe_carrera){
  30. //$prof_rs = $db->query('SELECT DISTINCT * FROM fs_profesores(null, null, :fac) ORDER BY PROFESOR_NOMBRE', [':fac' => $user->facultad["facultad_id"]]);
  31. $prof_rs = $db->query('SELECT DISTINCT PROFESOR.* FROM PUESTO_USUARIO
  32. JOIN PUESTO_MATERIA USING (PUESTO_ID)
  33. JOIN HORARIO_VIEW USING (MATERIA_ID)
  34. JOIN HORARIO_PROFESOR USING (HORARIO_ID)
  35. JOIN PROFESOR USING (PROFESOR_ID)
  36. WHERE USUARIO_ID = :usr', [':usr' => $user->user["id"]]);
  37. }else{
  38. $prof_rs = $db->query('SELECT DISTINCT PROFESOR.* FROM PROFESOR
  39. JOIN horario_profesor USING (profesor_id)
  40. JOIN HORARIO_VIEW USING (horario_id)
  41. WHERE FACULTAD_ID = :fac ORDER BY profesor.profesor_nombre', [':fac' => $user->facultad["facultad_id"]]);
  42. }
  43. //Duraciones
  44. $duracion_rs = $db->query("select * from duracion order by duracion_interval");
  45. if(!is_null($user->periodo_id)){
  46. //Periodo
  47. $periodo_rs = $db->querySingle('SELECT periodo_fecha_inicio, periodo_fecha_fin FROM periodo WHERE periodo_id = :periodo_id', [':periodo_id' => $user->periodo_id]);
  48. $periodo_fin = $periodo_rs["periodo_fecha_fin"];
  49. if(strtotime($periodo_rs["periodo_fecha_inicio"])>strtotime(date("Y-m-d")) )
  50. $fecha_man = date("d/m/Y", strtotime($periodo_rs["periodo_fecha_inicio"]));
  51. else{
  52. $dia_actual = intval(date("w"));
  53. $dias = 2;//días mínimos Lun a Jue
  54. if($dia_actual ==5 || $dia_actual ==4 )//Vie
  55. $dias=4;
  56. else if( $dia_actual ==6 )//Sab
  57. $dias=3;
  58. else if( $dia_actual ==0 )//Do
  59. $dias=2;
  60. $fecha_man = date("d/m/Y", strtotime("+".$dias." day"));
  61. }
  62. /*
  63. // Materias
  64. $id_prof = $user->profesor;
  65. //$facultad_id = 28;
  66. $materias_rs = $db->query('SELECT * FROM fs_materiasprofesor(:id)', [':id' => $id_prof]);
  67. */
  68. if(isset($_POST["fecha_inicial"]))
  69. $fecha_ini = $_POST["fecha_inicial"];
  70. else
  71. $fecha_ini = date("d/m/Y", strtotime($periodo_rs["periodo_fecha_inicio"]));
  72. if(isset($_POST["fecha_final"]))
  73. $fecha_fin = $_POST["fecha_final"];
  74. else
  75. $fecha_fin = date("d/m/Y", strtotime($periodo_rs["periodo_fecha_fin"]));
  76. $date = DateTime::createFromFormat('d/m/Y', $fecha_ini);
  77. $fecha_ini_db = $date->format('Y-m-d');
  78. $date = DateTime::createFromFormat('d/m/Y', $fecha_fin);
  79. $fecha_fin_db = $date->format('Y-m-d');
  80. }
  81. ?>
  82. <!DOCTYPE html>
  83. <html lang="en">
  84. <head>
  85. <meta charset="UTF-8">
  86. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  87. <title>Reposiciones crear |
  88. <?= $user->facultad['facultad'] ?? "Administrador"; ?>
  89. </title>
  90. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
  91. integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
  92. crossorigin="anonymous" referrerpolicy="no-referrer" />
  93. <?php
  94. include 'import/html_css_files.php';
  95. ?>
  96. <link rel="stylesheet" href="css/jquery-ui.css">
  97. <link rel="stylesheet" href="css/calendar.css">
  98. <style>
  99. .wizard { height: 20px; width: 80%; background: #D0D0D0; }
  100. .wizard.full { background: #D0D0D0; }
  101. .wizard.active > div:first-child { background: #00A6CE; }
  102. .wizard.active > div:last-child { width: 0px; height: 0px; border-style: solid; border-width: 10px 0 10px 6px; border-color: transparent transparent transparent #00a6ce; transform: rotate(0deg); }
  103. </style>
  104. <script src="js/jquery.min.js"></script>
  105. <script src="js/bootstrap/popper.min.js"></script>
  106. <script src="js/bootstrap/bootstrap.min.js"></script>
  107. <script src="js/jquery-ui.js"></script>
  108. <script src="js/datepicker-es.js"></script>
  109. </head>
  110. <!-- -->
  111. <body style="display: block;">
  112. <?php
  113. include('include/constantes.php');
  114. include("import/html_header.php");
  115. html_header("Reposiciones de clase", "Sistema de gestión de checador");
  116. ?>
  117. <main class="container content marco content-margin" id="local-app">
  118. <?php
  119. if($write==true && isset($prof_rs) && count($prof_rs)>0) {?>
  120. <!-- Botón para abrir el modal -->
  121. <div class="row mb-4">
  122. <div class="col-12 text-right">
  123. <button type="button" class="btn btn-outline-secondary" data-tipo="1" data-toggle="modal" data-target="#modal" <?php if (!$en_fecha ) { echo "disabled"; } ?>><span class="ing-mas ing-fw"></span>Crear reposición</button>
  124. </div>
  125. </div>
  126. <?php }?>
  127. <section id="message"></section>
  128. <?php require('import/periodo.php') ?>
  129. <?php if(!is_null($user->periodo_id)) { ?>
  130. <form id="asistencia" method="post" onsubmit="return validaFechas()">
  131. <div class="form-box">
  132. <input type="hidden" name="facultad" value="">
  133. <div class="form-group row">
  134. <label for="filtro_inicial" class="col-4 col-form-label">Fecha inicial</label>
  135. <div class="col-8 col-sm-4">
  136. <input id="filtro_inicial" name="fecha_inicial" type="text" class="form-control date-picker-filtro" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="" value="<?php echo $fecha_ini;?>">
  137. <div class="invalid-feedback">No es una fecha válida.</div>
  138. </div>
  139. </div>
  140. <div class="form-group row">
  141. <label for="filtro_final" class="col-4 col-form-label">Fecha final</label>
  142. <div class="col-8 col-sm-4">
  143. <input id="filtro_final" name="fecha_final" type="text" class="form-control date-picker-filtro" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="" value="<?php echo $fecha_fin;?>">
  144. <div class="invalid-feedback">El rango de fechas no es válido.</div>
  145. </div>
  146. </div>
  147. </div>
  148. <div class="form-group row justify-content-center">
  149. <button type="submit" class="btn btn-outline-primary mr-2" id="btn-buscar"><span class="ing-buscar ing-fw"></span> Buscar</button>
  150. <button type="button" class="btn btn-outline-danger" onclick="window.location.href = window.location.href"><span class="ing-borrar ing-fw"></span> Limpiar</button>
  151. </div>
  152. </form>
  153. <?php
  154. $reposiciones_rs = $db->query('SELECT * FROM fs_reposiciones_solicitud(:f_ini, :f_fin, :usr ,NULL, NULL)', [':f_ini' => $fecha_ini_db, ':f_fin' => $fecha_fin_db, ':usr' => $user->user["id"]]);
  155. }
  156. ?>
  157. <div class="row">
  158. <?php
  159. if(isset($reposiciones_rs) && count($reposiciones_rs)>0){ ?>
  160. <h3 class="mb-3">Reposiciones creadas</h3>
  161. <div class="col-12 table-responsive px-0">
  162. <table class="table table-sm table-striped table-white">
  163. <thead class="thead-dark">
  164. <tr >
  165. <th>Estado</th>
  166. <th>Materia</th>
  167. <th>Tipo</th>
  168. <th style="width:160px">Fecha falta</th>
  169. <th style="width:160px">Fecha reposición</th>
  170. <th style="width:160px">Duración</th>
  171. <th>Salón</th>
  172. <?php if($write){ ?><th>Acciones</th><?php } ?>
  173. </tr>
  174. </thead>
  175. <tbody>
  176. <?php
  177. foreach($reposiciones_rs as $reposicion){
  178. ?>
  179. <tr data-id="<?php echo $reposicion["reposicion_id"]; ?>" id="id<?php echo $reposicion["reposicion_id"]; ?>">
  180. <td class="align-middle text-center" style="color:<?php echo $reposicion["estado_color"];?>" title="<?php echo $reposicion["estado_nombre"];?>">
  181. <?php if($reposicion["estado_reposicion_id"]<3){ ?>
  182. <div class="wizard <?php if(intval($reposicion["estado_reposicion_id"])==2) echo "active";?> d-flex mx-auto">
  183. <div class="w-50 h-100"></div>
  184. <div class=""></div>
  185. </div>
  186. <?php } else if($reposicion["estado_reposicion_id"]==3){?>
  187. <div class="text-success text-center pt-1">
  188. <span class="ing-autorizar ing-lg"></span>
  189. </div>
  190. <?php } else {?>
  191. <div class="text-danger text-center pt-1">
  192. <span class="ing-negar ing-lg"></span>
  193. </div>
  194. <?php } ?>
  195. </td>
  196. <td class="align-middle"><?php echo $reposicion["materia_nombre"]; ?></td>
  197. <td class="align-middle">
  198. <?php if($reposicion["es_reposicion"]) echo "Reposición"; else echo "Cambio"; ?>
  199. </td>
  200. <td class="align-middle text-center"><?php
  201. echo date("d/m/Y", strtotime($reposicion["fecha_clase"]))."<br>".substr($reposicion["horario_hora"],0,-3)." a ".substr($reposicion["horario_hora_fin"],0,-3)." hrs.";;
  202. ?>
  203. </td>
  204. <td class="align-middle text-center"><?php
  205. echo date("d/m/Y", strtotime($reposicion["fecha_nueva"])) ."<br>".substr($reposicion["hora_nueva"],0,-3)." a ".substr($reposicion["hora_nueva_fin"],0,-3)." hrs.";
  206. ?>
  207. </td>
  208. <td class="align-middle text-center"><?php
  209. echo $reposicion["duracion_total"];
  210. ?>
  211. </td>
  212. <td class="align-middle text-center"><?php
  213. if($reposicion["salon_id"] != ""){
  214. echo $reposicion["salon_id"];
  215. }else
  216. echo "Pendiente";
  217. ?>
  218. </td>
  219. <?php if($write){ ?>
  220. <td class="align-middle text-center icono-acciones">
  221. <?php
  222. //no se ha aprobado
  223. if(($reposicion["estado_reposicion_id"] == 1 && $user->jefe_carrera) || ($reposicion["estado_reposicion_id"] == 2 && !$user->jefe_carrera)){?>
  224. <a href="#" data-tipo="2" title="Editar" data-toggle="modal" data-target="#modal"><?php echo $ICO["editar"];?></a>
  225. <a href="#" data-toggle="modal" data-target="#modal_confirm" title="Borrar"><?php echo $ICO["cancelar"];?></a>
  226. <?php } ?>
  227. </td>
  228. <?php } ?>
  229. </tr>
  230. <?php }
  231. ?>
  232. </tbody>
  233. </table>
  234. </div>
  235. <?php } else {
  236. if(is_null($user->periodo_id)){ ?>
  237. <div class="col-12 text-center">
  238. <h4 class="mt-4 text-danger">Selecciona un periodo</h4>
  239. </div>
  240. <?php } else {?>
  241. <div class="col-12 text-center">
  242. <h4 class="mt-4 text-danger">No tienes reposiciones disponibles que cumplan con los filtros</h4>
  243. </div>
  244. <?php }
  245. } ?>
  246. </div>
  247. <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
  248. <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
  249. <div class="modal-content">
  250. <div class="modal-header">
  251. <h4 class="col-12 modal-title text-center"><span id="modalLabel">Crear Reposición</span>
  252. <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
  253. <span aria-hidden="true">&times;</span>
  254. </button></h4>
  255. </div>
  256. <div class="modal-body">
  257. <form action="./action/reposicion_insert.php" method="post" id="formaModal" onsubmit="return submitForm()">
  258. <input type="hidden" name="id" id="id">
  259. <input type="hidden" name="estado" value="1">
  260. <input type="hidden" name="ciclo" id="ciclo" value="0">
  261. <input type="hidden" name="bloque" id="bloque" value="0">
  262. <div class="form-box">
  263. <div class="form-group row" id="profBlock">
  264. <label for="prof" class="col-4 col-form-label">Profesor *</label>
  265. <div class="col-8">
  266. <div class="datalist datalist-select mb-1 w-100" id="dlProfesor">
  267. <div class="datalist-input">Selecciona un profesor</div>
  268. <span class="ing-buscar icono"></span>
  269. <ul style="display:none">
  270. <?php foreach($prof_rs as $prof){?>
  271. <li data-id="<?php echo $prof["profesor_id"];?>" <?php if($prof["profesor_id"]==$user->profesor){ echo "class='selected'";} ?> ><?php echo $prof["profesor_nombre"];?></li>
  272. <?php } ?>
  273. </ul>
  274. <input type="hidden" id="prof" name="prof" value="">
  275. </div>
  276. </div>
  277. </div>
  278. </div>
  279. <div class="form-box prof-selected">
  280. <div class="form-group row" id="materiaBlock">
  281. <label for="horario" class="col-4 col-form-label">Materia *</label>
  282. <div class="col-8">
  283. <div class="datalist datalist-select mb-1 w-100" id="dlMateria">
  284. <div class="datalist-input">Selecciona una materia</div>
  285. <span class="ing-buscar icono"></span>
  286. <ul style="display:none">
  287. </ul>
  288. <input type="hidden" id="horario" name="horario" value="">
  289. </div>
  290. </div>
  291. </div>
  292. <div class="form-group row">
  293. <label for="tipo" class="col-4 col-form-label">Tipo *</label>
  294. <div class="col-8">
  295. <div class="datalist datalist-select mb-1 w-100" id="dlTipo">
  296. <div class="datalist-input">Reposición</div>
  297. <span class="ing-buscar icono"></span>
  298. <ul style="display:none">
  299. <li data-id="1">Reposición</li>
  300. <li data-id="2">Cambio de salón</li>
  301. </ul>
  302. <input type="hidden" id="tipo" name="tipo" value="1">
  303. </div>
  304. </div>
  305. </div>
  306. <div class="form-group row materia-block">
  307. <label for="duracion" class="col-4 col-form-label">Duración</label>
  308. <div class="col-4">
  309. <select name="duracion" id="duracion" class="form-control" required="required">
  310. <?php foreach($duracion_rs as $dura){?>
  311. <option value="<?php echo $dura["duracion_id"];?>" data-duracion="<?php echo $dura["duracion_interval"];?>" ><?php echo $dura["duracion_nombre"];?></option>
  312. <?php } ?>
  313. </select>
  314. </div>
  315. </div>
  316. <div class="form-group row cambio_block materia-block" style="display: none;">
  317. <label for="fecha_cambio" class="col-4 col-form-label">Fecha de cambio *</label>
  318. <div class="col-8">
  319. <input id="fecha_cambio" name="fecha_cambio" type="text" class="form-control date-picker" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="readonly" value="">
  320. </div>
  321. </div>
  322. <div class="form-group row repo_block materia-block">
  323. <label for="fecha_falta" class="col-4 col-form-label">Fecha de falta *</label>
  324. <div class="col-8">
  325. <input id="fecha_falta" name="fecha_falta" type="text" class="form-control date-picker" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="readonly" value="">
  326. </div>
  327. </div>
  328. <div class="form-group row repo_block materia-block">
  329. <label for="fecha_inicial" class="col-4 col-form-label">Fecha de reposicion *</label>
  330. <div class="col-8">
  331. <input id="fecha_inicial" name="fecha_inicial" type="text" class="form-control date-picker-future" placeholder="dd/mm/aaaa" maxlength="10" required="required" readonly="readonly" value="">
  332. <small class="form-text text-muted">Las reposiciones se deben solicitar con al menos 48hrs de anticipación.<br>
  333. Recuerda que en sábado el límite para terminar la clase es a las 15:00hrs.
  334. </small>
  335. </div>
  336. </div>
  337. <div class="form-group row materia-block">
  338. <label for="hora_ini" class="col-4 col-form-label" id="hora_nombre">Hora reposición *</label>
  339. <?php
  340. //define("HORA_FINAL", 22);
  341. //define("FRACCION_HORA", 15);
  342. $default_h = 7; $default_m = 15;
  343. ?>
  344. <div class="col-4">
  345. <select name="hora_ini" id="hora_ini" class="form-control" required="required">
  346. <?php for($h = $default_h; $h < HORA_FINAL; $h++){?>
  347. <option value="<?php echo sprintf( '%02d', $h );?>" <?php if($default_h == $h){ echo 'selected="selected"';}?>><?php echo sprintf( '%02d', $h );?></option>
  348. <?php } ?>
  349. </select>
  350. </div>
  351. <div class="col-4">
  352. <select name="min_ini" id="min_ini" class="form-control" required="required">
  353. <?php for($m = 0; $m < 60; $m+=(60/FRACCION_HORA)){?>
  354. <option value="<?php echo sprintf( '%02d', $m );?>" <?php if($default_m == $m){ echo 'selected="selected"';}?>><?php echo sprintf( '%02d', $m );?></option>
  355. <?php } ?>
  356. </select>
  357. </div>
  358. </div>
  359. <div class="form-group row materia-block">
  360. <label for="salon" class="col-4 col-form-label">Alumnos aproximados *</label>
  361. <div class="col-8 col-md-4">
  362. <input type="number" name="alumnos" id="alumnos" class="form-control" value="1" min="1" max="50">
  363. </div>
  364. </div>
  365. <div class="form-group row materia-block">
  366. <label for="aula" class="col-4 col-form-label">Tipo aula *</label>
  367. <div class="col-8">
  368. <div class="datalist datalist-select mb-1 w-100" id="dlAula">
  369. <div class="datalist-input">Salón</div>
  370. <span class="ing-buscar icono"></span>
  371. <ul style="display:none">
  372. <li data-id="1">Salón</li>
  373. <li data-id="2">Sala de cómputo</li>
  374. <li data-id="3">Salón/Taller de la facultad</li>
  375. <li data-id="4">Virtual</li>
  376. </ul>
  377. <input type="hidden" id="aula" name="aula" value="1">
  378. </div>
  379. </div>
  380. </div>
  381. <?php if(!$user->jefe_carrera){//es coordinador
  382. $salones_rs = $db->query('SELECT * from salon_view where es_salon is true');
  383. ?>
  384. <div class="row" id="salon-editar" style="display: none;">
  385. <div class="col-6 col-sm-4 barra-right text-right">
  386. <p class="font-weight-bold">Salón *</p>
  387. </div>
  388. <div class="col-6">
  389. <input list="lista_salones" name="dlSalon" id="dlSalon" class="form-control" placeholder="Salón">
  390. <div class="valid-feedback">
  391. Salón encontrado
  392. </div>
  393. <div class="invalid-feedback">
  394. Salón no encontrado
  395. </div>
  396. <datalist id="lista_salones">
  397. <?php
  398. foreach ($salones_rs as $salon) {
  399. extract($salon);
  400. $salon_json = json_decode($salon_array, true);
  401. if($salon_json[0]== "UNIVERSIDAD LA SALLE"){
  402. unset($salon_json[0]);
  403. }
  404. $salon_nombre = join(" / ",$salon_json);
  405. ?>
  406. <option data-id="<?= $salon_id ?>" data-nombre="<?= $salon_nombre ?>" value="<?= $salon_nombre ?>"></option>
  407. <?php
  408. }
  409. ?>
  410. </datalist>
  411. <!-- <ul class="list-group" id="salones"></ul> -->
  412. <input type="hidden" id="salon" name="salon" value="">
  413. </div>
  414. </div>
  415. <?php } ?>
  416. <div class="form-group row materia-block">
  417. <label for="comentario" class="col-4 col-form-label">Comentarios</label>
  418. <div class="col-8">
  419. <p><i>Requerimientos específicos del salón, software especializado, etc.</i></p>
  420. <textarea rows="3" class="form-control" id="comentario" name="comentario"></textarea>
  421. </div>
  422. </div>
  423. </div>
  424. <div class="form-group row mt-3">
  425. <div class="offset-4 col-8">
  426. <button type="submit" class="btn btn-outline-primary materia-block" id="submitBtn" data-tipo="1"><?php echo $ICO["aceptar"];?> Guardar</button>
  427. <button type="reset" class="btn btn-outline-danger" data-dismiss="modal"><?php echo $ICO["cancelar"];?> Cancelar</button>
  428. </div>
  429. </div>
  430. </form>
  431. </div>
  432. </div>
  433. </div>
  434. </div>
  435. <!-- Modal del formulario -->
  436. <div class="modal fade" id="crearReposiciónOld" tabindex="-1" role="dialog" aria-labelledby="crearReposiciónLabel" aria-hidden="true">
  437. <div class="modal-dialog modal-xl" role="document">
  438. <div class="modal-content">
  439. <div class="modal-header">
  440. <h5 class="modal-title" id="crearReposiciónLabel">Crear Reposición</h5>
  441. <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  442. <span aria-hidden="true">&times;</span>
  443. </button>
  444. </div>
  445. <div class="modal-body">
  446. <form id="form" class="form-horizontal">
  447. <div class="form-group step" id="step-1">
  448. <div class="form-box">
  449. <div class="form-group row">
  450. <label for="clave_profesor" class="col-4 col-form-label">Profesor</label>
  451. <div class="col-8">
  452. <input list="lista_profesores" name="clave_profesor" id="clave_profesor" class="form-control" placeholder="Profesor" required="required">
  453. <div class="valid-feedback">
  454. Profesor encontrado
  455. </div>
  456. <div class="invalid-feedback">
  457. Profesor no encontrado
  458. </div>
  459. <datalist id="lista_profesores">
  460. <?php
  461. foreach ($prof_rs as $prof) {
  462. ?>
  463. <option data-grado="<?= $prof["profesor_grado"] ?>" data-clave="<?= $prof["profesor_clave"] ?>" data-profesor="<?= $prof["profesor_nombre"] ?>" data-id="<?= $prof["profesor_id"]; ?>" value="<?= "{$prof["profesor_clave"]} | {$prof["profesor_grado"]} {$prof["profesor_nombre"]}" ?>"></option>
  464. <?php
  465. }
  466. ?>
  467. </datalist>
  468. <ul class="list-group" id="profesores"></ul>
  469. <input type="hidden" id="periodo_id" name="periodo_id" value="<?= $user->periodo_id ?>">
  470. <input type="hidden" id="profesor_id" name="profesor_id" value="">
  471. </div>
  472. </div>
  473. </div>
  474. </div>
  475. <div class="form-group step" id="step-2">
  476. <div class="form-box">
  477. <div class="form-group row">
  478. <label for="horario_reponer" class="col-4 col-form-label">Horario a reponer</label>
  479. <div class="col-8">
  480. <select name="horario_reponer" id="horario_reponer" class="form-control" required="required">
  481. </select>
  482. </div>
  483. </div>
  484. </div>
  485. <input type="hidden" name="horario_id" id="horario_id">
  486. </div>
  487. <div class="form-group step" id="step-3">
  488. <div class="form-box">
  489. <div class="form-group row">
  490. <label for="fechas_clase" class="col-4 col-form-label">Fecha de clase</label>
  491. <div class="col-8">
  492. <select name="fechas_clase" id="fechas_clase" class="form-control" required="required">
  493. </select>
  494. </div>
  495. </div>
  496. </div>
  497. </div>
  498. <div class="form-group step" id="step-4">
  499. <div class="form-box">
  500. <div class="form-group row">
  501. <label for="fecha_reponer" class="col-4 col-form-label">Fecha de reposición</label>
  502. <div class="col-6">
  503. <input type="text" placeholder="dd/mm/aaaa" name="fecha_reponer" id="fecha_reponer" class="form-control date-picker" required="required">
  504. </div>
  505. </div>
  506. <div class="form-group row">
  507. <label for="hora" class="col-4 col-form-label">Hora</label>
  508. <div class="col-3">
  509. <div id="hora" class="datalist datalist-select mb-1">
  510. <div class="datalist-input text-center">hh</div>
  511. <span class="ing-buscar icono"></span>
  512. <ul style="display:none">
  513. <?php foreach (range(7, 21) as $hora) { ?>
  514. <li data-id='<?= $hora ?>'><?= str_pad($hora, 2, "0", STR_PAD_LEFT) ?></li>
  515. <?php } ?>
  516. </ul>
  517. <input type="hidden" id="hora_reponer" name="horas" value="">
  518. </div>
  519. </div>
  520. <div class="col-3">
  521. <div id="minutos" class="datalist datalist-select mb-1">
  522. <div class="datalist-input text-center">mm</div>
  523. <span class="ing-buscar icono"></span>
  524. <ul style="display:none">
  525. <?php foreach (range(0, 45, 15) as $minuto) { ?>
  526. <li data-id='<?= $minuto ?>'><?= str_pad($minuto, 2, "0", STR_PAD_LEFT) ?></li>
  527. <?php } ?>
  528. </ul>
  529. <input type="hidden" id="minutos_reponer" name="minutos" value="">
  530. </div>
  531. </div>
  532. </div>
  533. </div>
  534. </div>
  535. <div class="form-group step" id="step-5">
  536. <div class="form-box">
  537. <div class="form-group row">
  538. <label for="descripcion_reposicion" class="col-4 col-form-label">Comentarios</label>
  539. <div class="col-6">
  540. <textarea name="descripcion_reposicion" id="descripcion_reposicion" rows="4" required="required" placeholder="Se requiere proyector, etc." maxlength="255" class="form-control"></textarea>
  541. </div>
  542. </div>
  543. <div class="form-group row align-items-center">
  544. <label class="col-4 col-form-label" for="sala">¿En sala de cómputo?</label>
  545. <div class="col-6">
  546. <div class="custom-control custom-switch">
  547. <input type="checkbox" class="custom-control-input" id="sala">
  548. <label class="custom-control-label" for="sala"></label>
  549. </div>
  550. </div>
  551. </div>
  552. </div>
  553. </div>
  554. </form>
  555. </div>
  556. <div class="modal-footer justify-content-center">
  557. <button class="btn btn-secondary" type="button" id="prev-button">Anterior</button>
  558. <button class="btn btn-secondary" type="button" id="next-button" disabled data-toggle="modal" data-target="#confirmationModal">Proponer reposición</button>
  559. </div>
  560. </div>
  561. </div>
  562. </div>
  563. <div class="modal fade" id="modal_confirm" tabindex="-1" role="dialog" aria-labelledby="modal" aria-hidden="true">
  564. <div class="modal-dialog modal-dialog-centered" role="document">
  565. <div class="modal-content">
  566. <div class="modal-body">
  567. <div class="row">
  568. <div class="col">
  569. <p class="font-weight-bold">¿Estás seguro de que quieres borrar la reposición?</p>
  570. <p>Esta acción no se puede deshacer.</p>
  571. </div>
  572. </div>
  573. </div>
  574. <div class="modal-footer">
  575. <input type="hidden" id="id_borrar" value="">
  576. <button type="button" class="btn btn-outline-primary btn-borrar"><?php echo $ICO["aceptar"];?> Borrar</button>
  577. <button type="button" class="btn btn-outline-danger" data-dismiss="modal" aria-label="Close"><?php echo $ICO["cancelar"];?> Cancelar</button>
  578. </div>
  579. </div>
  580. </div>
  581. </div>
  582. </main>
  583. <? include "import/html_footer.php"; ?>
  584. <?php
  585. //--Manejo de errores y mensajes de exito
  586. if(isset($_GET["error"]) && is_numeric($_GET["error"])){
  587. switch ($_GET["error"]){
  588. case 0: $errorDesc = "No se reciberon los datos de la reposición."; break;
  589. case 1: $errorDesc = "Ocurrió un error al insertar los datos de la reposición/cambio."; break;
  590. case 2: $errorDesc = "Ocurrió un error al actualizar los datos de la reposición/cambio."; break;
  591. case 3: $errorDesc = "No tienes permisos para realizar esa acción."; break;
  592. case 4: $errorDesc = "Ocurrió un error al cargar los datos de la reposición/cambio."; break;
  593. case 6: $errorDesc = "La reposición/cambio que buscas no existe. Consulta la lista de reopsiciones disponibles en esta sección."; break;
  594. case 7: $errorDesc = "La reposición/cambio se empalma con el horario del grupo y no se puede guardar."; break;
  595. case 8: $errorDesc = "El salón de la reposición está siendo utilizado ese día a esa hora y no se puede guardar."; break;
  596. case 9: $errorDesc = "El profesor está asigndo a otra clase o reposición el mismo día a la misma hora y no se puede guardar."; break;
  597. case 10: $errorDesc = "El profesor está asigndo a una materia el mismo día a la misma hora y no se puede guardar."; break;
  598. case 11: $errorDesc = "No hay clases asignadas para esa materia y grupo en la fecha de falta."; break;
  599. }
  600. }
  601. if(isset($_GET["ok"]) && is_numeric($_GET["ok"])){
  602. switch ($_GET["ok"]){
  603. case 0: $successDesc = "La reposición se guardó correctamente."; break;
  604. case 1: $successDesc = "La reposición se actualizó correctamente."; break;
  605. }
  606. }
  607. require_once 'js/messages.php';
  608. ?>
  609. <script>
  610. <?php if(isset($errorDesc)){ ?>
  611. triggerMessage("<?php echo $errorDesc;?>", "Error");
  612. <?php } else if(isset($successDesc)){ ?>
  613. triggerMessage("<?php echo $successDesc;?>", "Éxito", "success");
  614. <?php } ?>
  615. var vacaciones=[
  616. <?php
  617. $vacaciones_rs = $db->query('SELECT diasfestivos_dia from diasfestivos d where :periodo = any(d.periodos_id)', [':periodo' => $user->periodo_id ]);
  618. foreach($vacaciones_rs as $v){ echo '"'.$v["diasfestivos_dia"].'",';}
  619. ?>
  620. ];
  621. var _dias_asistencia = [];//ya registró asistencia, cambia con ajax
  622. var _dia_valido = 0;
  623. var _fecha_manhana = "<?php echo $fecha_man; ?>";
  624. var _periodo_fecha_inicial = "<?php echo date("d/m/Y", strtotime($periodo_rs["periodo_fecha_inicio"])); ?>";
  625. var _periodo_fecha_final = "<?php echo date("d/m/Y", strtotime($periodo_rs["periodo_fecha_fin"])); ?>";
  626. var datepickerOptions_filtro = { dateFormat: "dd/mm/yy", minDate:_periodo_fecha_inicial, maxDate:_periodo_fecha_final};
  627. var datepickerOptions = { dateFormat: "dd/mm/yy", minDate:_periodo_fecha_inicial, maxDate:_periodo_fecha_final,
  628. beforeShowDay: function(date) {
  629. var day = date.getDay();
  630. var dateString = $.datepicker.formatDate("yy-mm-dd", date);
  631. if (day === _dia_valido) {// 0 representa el domingo
  632. if (vacaciones.indexOf(dateString) !== -1 || _dias_asistencia.indexOf(dateString) !== -1)
  633. return [false];
  634. else
  635. return [true];
  636. }else{
  637. return [false];
  638. }
  639. }
  640. };
  641. var datepickerOptions_future = { dateFormat: "dd/mm/yy", minDate:_fecha_manhana, maxDate:_periodo_fecha_final,
  642. beforeShowDay: function(date) {
  643. var day = date.getDay();
  644. var dateString = $.datepicker.formatDate("yy-mm-dd", date);
  645. if (day === 0) {// 0 representa el domingo
  646. return [false];
  647. } else {
  648. if (vacaciones.indexOf(dateString) !== -1) {
  649. return [false];
  650. } else {
  651. return [true];
  652. }
  653. }
  654. }
  655. };
  656. function diaAAno(fecha_str){//de dd/mm/yyyy a yyyy-mm-dd
  657. if(fecha_str.charAt(2) == "/" && fecha_str.charAt(5) == "/"){//dd/mm/yyyy
  658. var fecha_arr = fecha_str.split("/");
  659. return fecha_arr[2]+"-"+fecha_arr[1]+"-"+fecha_arr[0];
  660. }
  661. return fecha_str;
  662. }
  663. function fechaMayor(fechaI, fechaF) {//cual es mayor >0 I mayor <0 F mayor
  664. return (Date.parse(diaAAno(fechaI)) - Date.parse(diaAAno(fechaF)));
  665. }
  666. function validaFechas(){
  667. if(fechaMayor($('#filtro_inicial').val().trim(), $('#filtro_final').val().trim()) > 0){
  668. $('#filtro_final').addClass("is-invalid");
  669. return false;
  670. }
  671. return true;
  672. }
  673. function submitForm(){
  674. var myBtn = $('#submitBtn');
  675. var error = false;
  676. $("#gpo").removeClass("is-invalid");
  677. invalidDatalist("#materia", false);
  678. $("#fecha_inicial").removeClass("is-invalid");
  679. $("#fecha_falta").removeClass("is-invalid");
  680. $("#fecha_cambio").removeClass("is-invalid");
  681. if($("#tipo").val() == 1){//reposición
  682. if($("#fecha_falta").val() == ""){
  683. $("#fecha_falta").addClass("is-invalid");
  684. error = true;
  685. }
  686. if($("#fecha_inicial").val() == ""){//fecha reposición
  687. $("#fecha_inicial").addClass("is-invalid");
  688. error = true;
  689. }
  690. }else{
  691. if($("#fecha_cambio").val() == ""){
  692. $("#fecha_cambio").addClass("is-invalid");
  693. error = true;
  694. }
  695. }
  696. if($("#horario").val().trim() == "" || $("#horario").val() === null){
  697. invalidDatalist("#horario", true);
  698. error = true;
  699. }
  700. if(myBtn.data("tipo") == 2 ){
  701. $('#formaModal').prop("action", "./action/reposicion_update.php");
  702. }else{
  703. $('#formaModal').prop("action", "./action/reposicion_insert.php");
  704. }
  705. return !error;
  706. }
  707. function cambiaTipo(tipo){
  708. if (tipo == 1){//reposición
  709. $(".repo_block").show();
  710. $(".cambio_block").hide();
  711. $(".repo_block").find("input[type=text]").attr("required", true);
  712. $(".cambio_block").find("input[type=text]").removeAttr("required");
  713. $("#hora_nombre").text("Hora reposición *");
  714. }else{//Cambio de salón
  715. $(".repo_block").hide();
  716. $(".cambio_block").show();
  717. $(".repo_block").find("input[type=text]").removeAttr("required");
  718. $(".cambio_block").find("input[type=text]").attr("required", true);
  719. $("#hora_nombre").text("Hora cambio *");
  720. var hora = $("#dlMateria ul li.selected").data("hr");
  721. var min = $("#dlMateria ul li.selected").data("min");
  722. $("#hora_ini").val(hora)
  723. $("#min_ini").val(min)
  724. }
  725. }
  726. $(document).ready(function(){
  727. $(".prof-selected").hide();
  728. //fecha de clase
  729. $(".date-picker" ).datepicker(datepickerOptions);
  730. $(".date-picker" ).datepicker( $.datepicker.regional[ "es" ] );
  731. //fecha de clase
  732. $(".date-picker-filtro" ).datepicker(datepickerOptions_filtro);
  733. $(".date-picker-filtro" ).datepicker( $.datepicker.regional[ "es" ] );
  734. //fecha nueva
  735. $(".date-picker-future" ).datepicker(datepickerOptions_future);
  736. $(".date-picker-future" ).datepicker( $.datepicker.regional[ "es" ] );
  737. function creaOpcion(id_horario, dia, hora, min, nombre, gpo, duracion){
  738. return '<li data-id="'+id_horario+'" data-dia="'+dia+'" data-hr="'+hora+'" data-min="'+min+'" data-gpo="'+gpo+'" data-duracion="'+duracion+'">'+nombre+'</li>';
  739. }
  740. $('#filtro_final').focus(function(){
  741. $("#filtro_final").removeClass("is-invalid");
  742. });
  743. function obtieneProf(pid){
  744. return $.ajax({
  745. url: './action/reposicion_profesor_materias.php',
  746. type: 'POST',
  747. dataType: 'json',
  748. data: { id: pid, },
  749. //async: false,
  750. success: function(result) {
  751. if(result["error"]!= "" && result["error"] !== undefined){
  752. triggerMessage(result["error"], "Error");
  753. $("#modal").modal('hide');
  754. $(".prof-selected").hide();
  755. }else{
  756. $(".prof-selected").show();
  757. $("#dlMateria ul").html("");
  758. for(i=0; i<result["materias"].length; i++){
  759. var html = creaOpcion(result["materias"][i]["horario_id"],
  760. result["materias"][i]["horario_dia"],
  761. result["materias"][i]["horario_hora"],
  762. result["materias"][i]["horario_min"],
  763. result["materias"][i]["materia_nombre"],
  764. result["materias"][i]["grupo"],
  765. result["materias"][i]["duracion"]
  766. );
  767. $("#dlMateria ul").append(html);
  768. }
  769. }
  770. },
  771. error: function(jqXHR, textStatus, errorThrown ){
  772. triggerMessage(errorThrown, "Error");
  773. }
  774. });//ajax
  775. }
  776. $(document).on( "click", "#dlProfesor ul li", function(event){//cambia datalist
  777. var pid = $(this).data('id');
  778. //busca materias del profesor
  779. var profCarga = obtieneProf(pid);
  780. profCarga.done(function(){
  781. $("#dlMateria ul li:first").click();
  782. });
  783. });
  784. //Actualiza días elegibles de calendario
  785. $(document).on( "click", "#dlMateria ul li", function(event){//manda al frente de todos
  786. _dia_valido = $(this).data('dia');//variable global
  787. var grupo = $(this).data("gpo");
  788. var duracionMateria = $(this).data("duracion");
  789. $(".date-picker" ).datepicker(datepickerOptions);
  790. var hora = $(this).data("hr");
  791. var min = $(this).data("min");
  792. $("#hora_ini").val(hora)
  793. $("#min_ini").val(min)
  794. console.log("Hora reset");
  795. return $.ajax({
  796. url: './action/asistenciasprofesor_select.php',
  797. type: 'POST',
  798. dataType: 'json',
  799. data: { "id": $("#prof").val(), "hor": $(this).data("id") },
  800. //async: false,
  801. success: function(result) {
  802. if(result["error"]!= "" && result["error"] !== undefined){
  803. triggerMessage(result["error"], "Error");
  804. $('#modal').modal("hide");
  805. }else{
  806. _dias_asistencia = result["asistenciaArr"];
  807. //Cambiar ciclo [6] y bloque [8]
  808. $("#ciclo").val(parseInt(grupo[6]));
  809. $("#bloque").val(parseInt(grupo[8])-1);
  810. $('#duracion option').each(function() {
  811. if ($(this).data("duracion") === duracionMateria) {
  812. // Selecciona la opción correspondiente en el select de "duracion"
  813. $(this).prop('selected', true);
  814. }
  815. });
  816. }
  817. },
  818. error: function(jqXHR, textStatus, errorThrown ){
  819. triggerMessage(errorThrown, "Error");
  820. }
  821. });//ajax
  822. });
  823. $("#dlTipo ul li").click(function(){//cambia datalist
  824. cambiaTipo($(this).data('id'));
  825. $(".date-picker" ).datepicker(datepickerOptions);
  826. });
  827. $("#dlAula ul li").click(function(){//cambia datalist
  828. if($(this).data("id") == 1){
  829. $("#salon-editar").hide();
  830. $("#dlSalon").val("");
  831. $("#salon").val("");
  832. }else{
  833. $("#salon-editar").show();
  834. }
  835. });
  836. $('#modal_confirm').on('show.bs.modal', function (event) {
  837. var button = $(event.relatedTarget); // Button that triggered the modal
  838. var id = button.parents("tr").data("id");
  839. $("#id_borrar").val(id);
  840. });
  841. $(".btn-borrar").click(function(){
  842. var r_id = $("#id_borrar").val();
  843. $.ajax({
  844. url: './action/reposicion_delete.php',
  845. type: 'POST',
  846. dataType: 'json',
  847. data: { id: r_id},
  848. success: function(result) {
  849. if(result["error"]!= "" && result["error"] !== undefined){
  850. triggerMessage(result["error"], "Error");
  851. }else{
  852. triggerMessage(result["ok"], "Éxito", "success");
  853. $("#id"+r_id).remove();
  854. }
  855. },
  856. error: function(jqXHR, textStatus, errorThrown ){
  857. triggerMessage(errorThrown, "Error");
  858. }
  859. });//ajax
  860. $('#modal_confirm').modal("hide");
  861. });
  862. $('#modal').on('show.bs.modal', function (event) {
  863. var button = $(event.relatedTarget); // Button that triggered the modal
  864. var tipo = button.data('tipo'); // 1 alta, 2 edicion
  865. var modal = $(this);
  866. $("#modal .is-invalid").removeClass("is-invalid");
  867. //$(this).find(".form-control:first-child").focus();
  868. $("#errorBox").collapse('hide');
  869. $("#errorBox_text").html("");
  870. if(tipo == 1){//alta
  871. $("#submitBtn").data('tipo', 1);
  872. $("#modalLabel").html("Crear Reposición");
  873. modal.find("input[type=text]").val("");
  874. modal.find("#alumnos").val("15");
  875. $("#plan").attr("readonly", false);
  876. $("#sem").attr("readonly", false);
  877. $("#gpo").attr("readonly", false);
  878. //$("#prof").attr("readonly", false);
  879. disableDatalist("#horario", false);
  880. disableDatalist("#tipo", false);
  881. if($("#prof").length>0)
  882. disableDatalist("#prof", false);
  883. setDatalistFirst("#tipo");
  884. setDatalistFirst("#aula");
  885. setDatalistFirst("#horario");
  886. $("#dlMateria ul li:first").click();
  887. }else{//editar
  888. $("#submitBtn").data('tipo', 2);
  889. $("#modalLabel").html("Editar Reposición");
  890. $("#plan").attr("readonly", true);
  891. $("#sem").attr("readonly", true);
  892. $("#gpo").attr("readonly", true);
  893. //$("#materia").attr("readonly", true);
  894. disableDatalist("#horario");
  895. disableDatalist("#tipo");
  896. disableDatalist("#prof");
  897. /*if($("#prof").length>0)
  898. disableDatalist("#prof");
  899. $("#prof").attr("readonly", true);*/
  900. var r_id = $(button).parents("tr").data("id");
  901. $("#id").val(r_id);
  902. $.ajax({
  903. url: './action/reposicion_select.php',
  904. type: 'POST',
  905. dataType: 'json',
  906. data: { id: r_id },
  907. async: true,
  908. success: function(result) {
  909. if(result["error"]!= "" && result["error"] !== undefined){
  910. triggerMessage(result["error"], "Error");
  911. $("#modal").modal('hide');
  912. }else{
  913. //setDatalist("#prof", result["profesor"]);
  914. setDatalist("#prof", result["profesor"]);
  915. var profCarga = obtieneProf(result["profesor"]);
  916. //$('#salon').val(result["salon"]);
  917. $("#fecha_falta").val(result["fecha_clase"]);
  918. $('#comentario').val(result["comentario"]);
  919. $('#alumnos').val(result["alumnos"]);
  920. $('#ciclo').val(result["ciclo"]);
  921. $('#bloque').val(result["bloque"]);
  922. if(result["tipo"]){
  923. setDatalist("#tipo", 1);
  924. cambiaTipo(1);
  925. $("#fecha_inicial").val(result["fecha_nueva"]);
  926. }else{
  927. setDatalist("#tipo", 2);
  928. cambiaTipo(2);
  929. $("#fecha_cambio").val(result["fecha_nueva"]);
  930. }
  931. _dia_valido = parseInt(result["dia"]);
  932. $(".date-picker" ).datepicker(datepickerOptions);
  933. $("#dlTipo ul li:selected").click();
  934. profCarga.done(function(){
  935. setDatalist("#horario", result["horario"]);// No se actualiza TODO
  936. $('#hora_ini').val(result["hora_ini"]);
  937. $('#min_ini').val(result["min_ini"]);
  938. });
  939. setDatalist("#aula", result["aula"]);
  940. modal.modal('show');
  941. }
  942. },
  943. error: function(jqXHR, textStatus, errorThrown ){
  944. triggerMessage(errorThrown, "Error");
  945. $("#modal").modal('hide');
  946. //$('#messageBox')[0].scrollIntoView({ block: "end" });
  947. }
  948. });//ajax
  949. }
  950. });//show
  951. });
  952. $(function() {
  953. $('[data-toggle="tooltip"]').tooltip()
  954. })
  955. </script>
  956. <script src="js/messages.js"></script>
  957. </body>
  958. </html>