home.php 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. <?php
  2. session_start();
  3. require_once 'classes/MainMenu.php';
  4. require_once './classes/SGI.php';
  5. require_once 'classes/Template.php';
  6. require_once 'include/bd_pdo.php';
  7. ?>
  8. <!DOCTYPE html>
  9. <html>
  10. <head>
  11. <title>Alumnos - Home</title>
  12. <?php if ($_SESSION['RolUsuario_desc'] == 'ALUMNO')
  13. Template::getCSS(array('custominputfile.css','elementos.css','secciones/home.css'));
  14. else
  15. Template::getCSS(); ?>
  16. </head>
  17. <body>
  18. <?php $menuObj = new MainMenu($_SESSION["RolUsuario_id"], 0, 0, $pdo);
  19. $menuObj->printMenu();
  20. if ($_SESSION['RolUsuario_desc'] == 'ALUMNO') {?>
  21. <main class="container-fluid marco">
  22. <div class="bg-main d-flex flex-column p-3">
  23. <div class="d-flex flex-row justify-content-center align-items-center">
  24. <div class="position-relative foto">
  25. <img id="foto" />
  26. <div class="divIconsFoto position-absolute d-flex flex-row justify-content-around align-items-center">
  27. <div class="iconFoto d-flex justify-content-center align-items-center" data-toggle="modal" data-target="#modalFoto"><i class="ing-camara"></i></div>
  28. <div id="limpiaFoto" class="iconFoto d-flex justify-content-center align-items-center"><i class="ing-borrar"></i></div>
  29. </div>
  30. </div>
  31. </div>
  32. <div class="acercaTit display-7 px-3 py-2 mt-4 mb-2 ml-n3">Acerca de mi</div>
  33. <div id="txtAcerca" placeholder="Escribe tu reseña aquí"></div>
  34. <div class="d-flex justify-content-end align-items-center mt-3">
  35. <span class="ing-editar iconAcciones text-azul2 btnCirc" data-tipo="2"></span>
  36. <div class="btns">
  37. <span class="ing-aceptar iconAcciones text-success" data-tipo="2"></span>
  38. <span class="ing-cancelar iconAcciones text-danger" data-tipo="2"></span>
  39. </div>
  40. </div>
  41. <div class="flex-grow-1 d-flex flex-column justify-content-end align-items-center">
  42. <div class="align-self-end">
  43. <span class="ing-mas iconAcciones text-success" data-toggle="modal" data-target="#modalAddRedes"></span>
  44. <span class="ing-menos iconAcciones text-danger" data-tipo="3"></span>
  45. </div>
  46. <div id="divRedes" class="d-flex flex-row justify-content-around align-items-start flex-wrap"></div>
  47. </div>
  48. </div>
  49. <div class="datos p-3">
  50. <div id="estatus" class="indivisa-text-bold-italic text-secondary display-6"></div>
  51. <div id="completo">
  52. <label class="indivisa-text-black text-primary display-4"></label>
  53. <input type="hidden" id="msg" />
  54. <i id="validacion" class="ing-importante2 display-6 align-top text-azul1 pointer invisible" data-trigger="click hover" data-html="true" data-toggle="tooltip" data-placement="top" title=" "></i>
  55. </div>
  56. <div class="d-flex flex-column justify-content-start align-items-center">
  57. <input id="nombre" type="text" class="indivisa-text-black text-primary display-4 mb-1" value="" disabled="true">
  58. <input id="apellidos" type="text" class="indivisa-text-black text-primary display-4 mb-2" value="" disabled="true">
  59. </div>
  60. <div class="d-flex flex-column flex-sm-row justify-content-between align-items-center">
  61. <div class="d-flex justify-content-start align-items-center display-7"><span class="text-azul2 mr-1">CURP:</span><input id="curp" type="text" value="" maxlength="18" disabled /></div>
  62. <div class="d-flex justify-content-around align-items-center align-self-end">
  63. <span class="ing-editar iconAcciones text-azul2" data-tipo="1"></span>
  64. <div class="btns mt-2 mt-sm-0">
  65. <span class="ing-aceptar iconAcciones text-success" data-tipo="1"></span>
  66. <span class="ing-cancelar iconAcciones text-danger" data-tipo="1"></span>
  67. </div>
  68. </div>
  69. </div>
  70. <section id="carreras" class="mt-4 px-3 px-md-5"></section>
  71. </div>
  72. <div class="intereses d-flex flex-column p-3">
  73. <div class="d-flex flex-row justify-content-end align-items-center bordeInf mb-0 pb-2">
  74. <h4 class="text-center flex-grow-1">Mis Intereses</h4>
  75. <div id="accionIntereses">
  76. <span class="ing-mas iconAcciones text-success" data-toggle="modal" data-target="#modalInteres"></span>
  77. <span class="ing-menos iconAcciones text-danger" data-tipo="4"></span>
  78. </div>
  79. <div id="eliminaIntereses">
  80. <span class="ing-aceptar iconAcciones text-success" data-tipo="4"></span>
  81. <span class="ing-cancelar iconAcciones text-danger" data-tipo="4"></span>
  82. </div>
  83. </div>
  84. <div class="container-fluid flex-grow-1">
  85. <div class="row h-100 container mx-0 px-0">
  86. <div class="col-sm-12 p-3 bordeInfInteres">
  87. <h6 class="mb-0 py-2">Profesionales</h6>
  88. <ul id="profesionales" class="row"></ul>
  89. </div>
  90. <div class="col-sm-12 p-3">
  91. <h6 class="mb-0 py-2">Personales</h6>
  92. <ul id="personales" class="row"></ul>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </main>
  98. <!----- MODALS ----->
  99. <div class="modalGral modal fade" id="modalFoto" tabindex="-1" data-backdrop="static" aria-labelledby="modalConfirmar" aria-hidden="true">
  100. <div class="modal-dialog modal-dialog-centered">
  101. <form id="formFoto" class="modal-content" method="post" enctype="multipart/form-data">
  102. <div class="modal-header d-flex flex-column">
  103. <h5 class="modal-title w-100 text-center mb-2">Cambia tu foto</h5>
  104. <div class="display-7 text-secondary">Considera subir una foto de frente (no selfie), medio tronco hacia arriba, con fondo blanco y vestimenta formal.<br />Esta foto podrá ser utilizada para documentos de la facultad por lo que es importante cumplir con las recomendaciones.</div>
  105. </div>
  106. <div class="modal-body">
  107. <div id="divArchivo" class="w-100 d-flex flex-column">
  108. <div class="carga text-azul2 mb-3">
  109. <div class="d-flex flex-column justify-content-center align-items-center">
  110. <div class="display-6 text-azul2">Cargando foto</div>
  111. <div>
  112. <div class="mb-2 fa-solid fa-gear fa-spin" style="color: var(--azul2);"></div>
  113. <div class="mb-2 fa-solid fa-gear fa-spin fa-rotate-by fa-spin" style="--fa-rotate-angle: 45deg; color: var(--azul2-75);"></div>
  114. <div class="mb-2 fa-solid fa-gear fa-spin" style="color: var(--azul2-50);"></div>
  115. <div class="mb-2 fa-solid fa-gear fa-spin fa-rotate-by fa-spin" style="--fa-rotate-angle: 45deg; color: var(--azul2-25);"></div>
  116. <div class="mb-2 fa-solid fa-gear fa-spin" style="color: var(--azul1-25);"></div>
  117. <div class="mb-2 fa-solid fa-gear fa-spin fa-rotate-by fa-spin" style="--fa-rotate-angle: 45deg; color: var(--azul1-50);"></div>
  118. <div class="mb-2 fa-solid fa-gear fa-spin" style="color: var(--azul1-75);"></div>
  119. <div class="mb-2 fa-solid fa-gear fa-spin fa-rotate-by fa-spin" style="--fa-rotate-angle: 45deg; color: var(--azul1);"></div>
  120. </div>
  121. </div>
  122. </div>
  123. <input id="addArchivo" name="archivo" type="file">
  124. </div>
  125. </div>
  126. <div class="modal-footer">
  127. <button type="button" id="btnOkFoto" data-dato="0" class="btn btn-verde btnIcon"><span class="ing-aceptar"></span></button>
  128. <button type="button" class="btn btn-rojo btnIcon" data-dismiss="modal"><span class="ing-cancelar"></span></button>
  129. </div>
  130. </form>
  131. </div>
  132. </div>
  133. <div class="modalGral modal fade" id="modalInteres" tabindex="-1" data-backdrop="static" aria-labelledby="modalInteres" aria-hidden="true">
  134. <div class="modal-dialog modal-dialog-centered">
  135. <div class="modal-content">
  136. <div class="modal-header d-flex flex-column">
  137. <h5 class="modal-title w-100 text-center mb-2">Agrega un interés</h5>
  138. <div class="display-7 text-secondary text-justify">Los intereses permiten compartirte información de la facultad o la universidad referente a los mismos.</div>
  139. </div>
  140. <div class="modal-body">
  141. <label class="lblTit">Tipo de Interés</label>
  142. <div id="ddlInteres" data-id="-1" class="dropdownlist mb-3">
  143. <button id="btnInteres"><label>Elige el tipo de interés</label><span class="ing-caret"></span></button>
  144. <ul>
  145. <li class="dropdownlist-item" data-id="0">Personal</li>
  146. <li class="dropdownlist-item" data-id="1">Profesional</li>
  147. </ul>
  148. </div>
  149. <label class="lblTit">Interés</label>
  150. <input id="inputInteres" type="text" placeholder="Escribe tu interés">
  151. </div>
  152. <div class="modal-footer">
  153. <button type="button" class="btn btn-verde btnIcon" id="btnOkAddInteres"><span class="ing-aceptar"></span></button>
  154. <button type="button" class="btn btn-rojo btnIcon" data-dismiss="modal"><span class="ing-cancelar"></span></button>
  155. </div>
  156. </div>
  157. </div>
  158. </div>
  159. <div class="modalGral modal fade" id="modalAddRedes" tabindex="-1" data-backdrop="static" aria-labelledby="modalAddRedes" aria-hidden="true">
  160. <div class="modal-dialog modal-dialog-centered">
  161. <div class="modal-content">
  162. <div class="modal-header">
  163. <h5 class="modal-title">Agrega una Red o Dato de Contacto</h5>
  164. </div>
  165. <div class="modal-body">
  166. <label class="lblTit">Dato de contacto | Red</label>
  167. <div id="dlRed" class="position-relative datalist mb-3" data-id="-1" data-subtipo="-1">
  168. <input id="inputRed" class="datalist-input" type="text" placeholder="Escribe aquí el dato o red que buscas" autocomplete="off">
  169. <span id="iconRed" class="text-primary input-buscar"></span>
  170. <ul style="display:none">
  171. <?php $redes = SGI::getRedes($pdo);
  172. if (count($redes) > 0){
  173. array_push($redes, array('TipoContacto_id' => 0, 'TipoContacto_desc' => 'Contacto de Emergencia', 'TipoContacto_icono' => 'fa-solid fa-book-medical', 'SubtipoContacto' => false));
  174. $temp = array();
  175. $key = array_search(0, array_column($redes, 'TipoContacto_id'));
  176. $temp = $redes[$key];
  177. unset($redes[$key]);
  178. array_unshift($redes, $temp);
  179. $key = array_search(2, array_column($redes, 'TipoContacto_id'));
  180. $temp = $redes[$key];
  181. unset($redes[$key]);
  182. array_unshift($redes, $temp);
  183. $key = array_search(3, array_column($redes, 'TipoContacto_id'));
  184. $temp = $redes[$key];
  185. unset($redes[$key]);
  186. array_unshift($redes, $temp);
  187. $key = array_search(1, array_column($redes, 'TipoContacto_id'));
  188. $temp = $redes[$key];
  189. unset($redes[$key]);
  190. array_unshift($redes, $temp);
  191. }
  192. if (isset($redes)) {
  193. foreach ($redes as $red) { ?>
  194. <li data-id="<?php echo $red['TipoContacto_id']; ?>" data-subtipo="<?php echo intval($red['SubtipoContacto']); ?>"><i class="<?php echo $red['TipoContacto_icono']; ?> mr-1"></i><label><?php echo $red['TipoContacto_desc']; ?></label></li>
  195. <?php }
  196. } ?>
  197. </ul>
  198. </div>
  199. <label id="titNomEmergencia" class="lblTit emergencia">Nombre Contacto de Emergencia</label>
  200. <input id="inputNomEmergencia" type="text" class="emergencia mb-3" placeholder="Escribe el nombre de la persona que será contacto de emergencia">
  201. <label id="titDato" class="lblTit dato"></label>
  202. <input id="inputDato" type="text" class="dato mb-3">
  203. <label id="titSubTipo" class="lblTit subtipo"></label>
  204. <div id="ddlSubTipo" data-id="0" class="dropdownlist subtipo mb-3">
  205. <button id="btnSubTipo"><label></label><span class="ing-caret"></span></button>
  206. <ul></ul>
  207. </div>
  208. <label id="titUsoRed" class="lblTit uso"></label>
  209. <div id="ddlUsoRed" data-id="0" class="dropdownlist uso">
  210. <button id="btnUsoRed"><label>Elige el tipo de uso</label><span class="ing-caret"></span></button>
  211. <ul>
  212. <li class="dropdownlist-item" data-id="2">Empresarial</li>
  213. <li class="dropdownlist-item" data-id="1">Personal</li>
  214. </ul>
  215. </div>
  216. </div>
  217. <div class="modal-footer">
  218. <button type="button" class="btn btn-verde btnIcon" id="btnOkAddRedes"><span class="ing-aceptar"></span></button>
  219. <button type="button" class="btn btn-rojo btnIcon" data-dismiss="modal"><span class="ing-cancelar"></span></button>
  220. </div>
  221. </div>
  222. </div>
  223. </div>
  224. <div class="modalGral modal fade" id="modalSupRedes" tabindex="-1" data-backdrop="static" aria-labelledby="modalSupRedes" aria-hidden="true">
  225. <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
  226. <div class="modal-content">
  227. <div class="modal-header">
  228. <h5 class="modal-title">Elimina Red o Dato de Contacto</h5>
  229. </div>
  230. <div class="modal-body">
  231. </div>
  232. <div class="modal-footer">
  233. <button type="button" class="btn btn-verde btnIcon" id="btnOkSupRedes"><span class="ing-aceptar"></span></button>
  234. <button type="button" class="btn btn-rojo btnIcon" data-dismiss="modal"><span class="ing-cancelar"></span></button>
  235. </div>
  236. </div>
  237. </div>
  238. </div>
  239. <div class="modal fade" id="modalAviso" tabindex="-1" aria-labelledby="modalAviso" aria-hidden="true">
  240. <div class="modal-dialog modal-dialog-centered">
  241. <div class="modal-content msgAviso d-flex flex-row justify-content-between align-items-stretch">
  242. <div class="modal-header iconAviso d-flex justify-content-center align-items-center"><i class="display-3 "></i></div>
  243. <div class="modal-body txtAviso flex-grow-1 d-flex flex-column justify-content-center align-items-center">
  244. <div class="display-5 msg1 indivisa-text-black mb-3">Título</div>
  245. <div class="mb-3 msg2">Texto del Mensaje</div>
  246. <div class="rounded-pill p-2 text-white" data-dismiss="modal" aria-label="Close">Cerrar</div>
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. <div class="modalGral modal fade" id="modalEliminar" tabindex="-1" data-backdrop="static" aria-labelledby="modalEliminar" aria-hidden="true">
  252. <div class="modal-dialog modal-dialog-centered">
  253. <div class="modal-content">
  254. <div class="modal-body text-center display-5"></div>
  255. <div class="modal-footer">
  256. <button type="button" class="btn btn-verde btnIcon" id="btnOkEliminar"><span class="ing-aceptar"></span></button>
  257. <button type="button" class="btn btn-rojo btnIcon" data-dismiss="modal"><span class="ing-cancelar"></span></button>
  258. </div>
  259. </div>
  260. </div>
  261. </div>
  262. <?php } else { ?>
  263. <main class="container-fluid content marco">
  264. <div class="row justify-content-center" style="min-height: 600px;">
  265. <img id="errorImg" class="col-sm-3" src="img/nico_error.svg" />
  266. <div class="col-sm-9 display-4 d-flex flex-row justify-content-center align-items-center text-center">No tienes acceso a ésta página</div>
  267. </div>
  268. </main>
  269. <?php } ?>
  270. <!-- FOOTER -->
  271. <div style="isolation: isolate;">
  272. <?php Template::footer(); ?>
  273. </div>
  274. <?php if ($_SESSION['RolUsuario_desc'] == 'ALUMNO')
  275. Template::getJS(array('custominputfile.js','elementos.js','secciones/home.js'));
  276. else
  277. Template::getJS(); ?>
  278. </body>
  279. </html>