Reac front end for psicometric app

mensajes.php 24KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538
  1. <head>
  2. <meta charset="utf-8">
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <title>Mensajes - Dashboard</title>
  6. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  7. <link rel="stylesheet" href="css/all.css">
  8. <link rel="stylesheet" href="css/font-awesome.min.css">
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
  10. <script src="js/jquery.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
  12. <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css"/>
  13. <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js"></script>
  14. <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
  15. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
  16. </head>
  17. <script type="text/javascript">
  18. $(document).ready(function () {
  19. $(".list-unstyled").find('li').removeClass("active");
  20. $("#mensajes").addClass("active");
  21. });
  22. </script>
  23. <?php include('sidebar.php') ?>
  24. <div id="content">
  25. <?php include('header.php') ?>
  26. <div class="content-section">
  27. <div class="main">
  28. <h1 class="breadcrumb-header">Bandeja de entrada</h1>
  29. <div class="row">
  30. <div class="col-md-4">
  31. <div class="panel panel_mensajes">
  32. <a href="#" class="active">
  33. <div class="contact_body">
  34. <div class="row">
  35. <div class="col-md-3">
  36. <div class="rounded-pic">
  37. <img src="images/man_2.png" alt="">
  38. </div>
  39. </div>
  40. <div class="col-md-6">
  41. <h1>Fernando Vásquez</h1>
  42. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  43. </div>
  44. <div class="col-md-3 panel_time_notification">
  45. <p>Hace 20 segundos.</p>
  46. </div>
  47. </div>
  48. </div>
  49. </a>
  50. <a href="#">
  51. <div class="contact_body">
  52. <div class="row">
  53. <div class="col-md-3">
  54. <div class="rounded-pic">
  55. <img src="images/man_2.png" alt="">
  56. </div>
  57. </div>
  58. <div class="col-md-6">
  59. <h1>Fernando Vásquez</h1>
  60. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  61. </div>
  62. <div class="col-md-3 panel_time_notification">
  63. <p>Hace 20 segundos.</p>
  64. </div>
  65. </div>
  66. </div>
  67. </a>
  68. <a href="#" class="active">
  69. <div class="contact_body">
  70. <div class="row">
  71. <div class="col-md-3">
  72. <div class="rounded-pic">
  73. <img src="images/man_2.png" alt="">
  74. </div>
  75. </div>
  76. <div class="col-md-6">
  77. <h1>Fernando Vásquez</h1>
  78. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  79. </div>
  80. <div class="col-md-3 panel_time_notification">
  81. <p>Hace 20 segundos.</p>
  82. </div>
  83. </div>
  84. </div>
  85. </a>
  86. <a href="#">
  87. <div class="contact_body">
  88. <div class="row">
  89. <div class="col-md-3">
  90. <div class="rounded-pic">
  91. <img src="images/man_2.png" alt="">
  92. </div>
  93. </div>
  94. <div class="col-md-6">
  95. <h1>Fernando Vásquez</h1>
  96. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  97. </div>
  98. <div class="col-md-3 panel_time_notification">
  99. <p>Hace 20 segundos.</p>
  100. </div>
  101. </div>
  102. </div>
  103. </a>
  104. <a href="#" class="active">
  105. <div class="contact_body">
  106. <div class="row">
  107. <div class="col-md-3">
  108. <div class="rounded-pic">
  109. <img src="images/man_2.png" alt="">
  110. </div>
  111. </div>
  112. <div class="col-md-6">
  113. <h1>Fernando Vásquez</h1>
  114. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  115. </div>
  116. <div class="col-md-3 panel_time_notification">
  117. <p>Hace 20 segundos.</p>
  118. </div>
  119. </div>
  120. </div>
  121. </a>
  122. <a href="#">
  123. <div class="contact_body">
  124. <div class="row">
  125. <div class="col-md-3">
  126. <div class="rounded-pic">
  127. <img src="images/man_2.png" alt="">
  128. </div>
  129. </div>
  130. <div class="col-md-6">
  131. <h1>Fernando Vásquez</h1>
  132. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  133. </div>
  134. <div class="col-md-3 panel_time_notification">
  135. <p>Hace 20 segundos.</p>
  136. </div>
  137. </div>
  138. </div>
  139. </a>
  140. <a href="#" class="active">
  141. <div class="contact_body">
  142. <div class="row">
  143. <div class="col-md-3">
  144. <div class="rounded-pic">
  145. <img src="images/man_2.png" alt="">
  146. </div>
  147. </div>
  148. <div class="col-md-6">
  149. <h1>Fernando Vásquez</h1>
  150. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  151. </div>
  152. <div class="col-md-3 panel_time_notification">
  153. <p>Hace 20 segundos.</p>
  154. </div>
  155. </div>
  156. </div>
  157. </a>
  158. <a href="#">
  159. <div class="contact_body">
  160. <div class="row">
  161. <div class="col-md-3">
  162. <div class="rounded-pic">
  163. <img src="images/man_2.png" alt="">
  164. </div>
  165. </div>
  166. <div class="col-md-6">
  167. <h1>Fernando Vásquez</h1>
  168. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  169. </div>
  170. <div class="col-md-3 panel_time_notification">
  171. <p>Hace 20 segundos.</p>
  172. </div>
  173. </div>
  174. </div>
  175. </a>
  176. <a href="#" class="active">
  177. <div class="contact_body">
  178. <div class="row">
  179. <div class="col-md-3">
  180. <div class="rounded-pic">
  181. <img src="images/man_2.png" alt="">
  182. </div>
  183. </div>
  184. <div class="col-md-6">
  185. <h1>Fernando Vásquez</h1>
  186. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  187. </div>
  188. <div class="col-md-3 panel_time_notification">
  189. <p>Hace 20 segundos.</p>
  190. </div>
  191. </div>
  192. </div>
  193. </a>
  194. <a href="#">
  195. <div class="contact_body">
  196. <div class="row">
  197. <div class="col-md-3">
  198. <div class="rounded-pic">
  199. <img src="images/man_2.png" alt="">
  200. </div>
  201. </div>
  202. <div class="col-md-6">
  203. <h1>Fernando Vásquez</h1>
  204. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  205. </div>
  206. <div class="col-md-3 panel_time_notification">
  207. <p>Hace 20 segundos.</p>
  208. </div>
  209. </div>
  210. </div>
  211. </a>
  212. <a href="#" class="active">
  213. <div class="contact_body">
  214. <div class="row">
  215. <div class="col-md-3">
  216. <div class="rounded-pic">
  217. <img src="images/man_2.png" alt="">
  218. </div>
  219. </div>
  220. <div class="col-md-6">
  221. <h1>Fernando Vásquez</h1>
  222. <p>He publicado una nueva plaza, puedes checarla acá.</p>
  223. </div>
  224. <div class="col-md-3 panel_time_notification">
  225. <p>Hace 20 segundos.</p>
  226. </div>
  227. </div>
  228. </div>
  229. </a>
  230. </div>
  231. </div>
  232. <div class="col-md-8">
  233. <div class="panel panel_conversation">
  234. <div class="conversation_body">
  235. <div class="row">
  236. <div class="chatleft">
  237. <div class="burbuja left">
  238. <div class="row">
  239. <div class="col-md-3">
  240. <div class="rounded-pic">
  241. <img src="images/man_2.png" alt="">
  242. </div>
  243. </div>
  244. <div class="col-md-9">
  245. <h1>Hola, este es un mensaje de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
  246. <p>Hace 2 minutos.</p>
  247. </div>
  248. </div>
  249. </div>
  250. </div>
  251. <div class="chatright">
  252. <div class="burbuja right">
  253. <div class="row">
  254. <div class="col-md-9">
  255. <h1>Hola, este es una respuesta de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
  256. <p>Hace 1 minutos.</p>
  257. </div>
  258. <div class="col-md-3">
  259. <div class="rounded-pic">
  260. <img src="images/man_2.png" alt="">
  261. </div>
  262. </div>
  263. </div>
  264. </div>
  265. </div>
  266. </div>
  267. <div class="row">
  268. <div class="chatleft">
  269. <div class="burbuja left">
  270. <div class="row">
  271. <div class="col-md-3">
  272. <div class="rounded-pic">
  273. <img src="images/man_2.png" alt="">
  274. </div>
  275. </div>
  276. <div class="col-md-9">
  277. <h1>Hola, este es un mensaje de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
  278. <p>Hace 2 minutos.</p>
  279. </div>
  280. </div>
  281. </div>
  282. </div>
  283. <div class="chatright">
  284. <div class="burbuja right">
  285. <div class="row">
  286. <div class="col-md-9">
  287. <h1>Hola, este es una respuesta de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
  288. <p>Hace 1 minutos.</p>
  289. </div>
  290. <div class="col-md-3">
  291. <div class="rounded-pic">
  292. <img src="images/man_2.png" alt="">
  293. </div>
  294. </div>
  295. </div>
  296. </div>
  297. </div>
  298. </div>
  299. <div class="row">
  300. <div class="chatleft">
  301. <div class="burbuja left">
  302. <div class="row">
  303. <div class="col-md-3">
  304. <div class="rounded-pic">
  305. <img src="images/man_2.png" alt="">
  306. </div>
  307. </div>
  308. <div class="col-md-9">
  309. <h1>Hola, este es un mensaje de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
  310. <p>Hace 2 minutos.</p>
  311. </div>
  312. </div>
  313. </div>
  314. </div>
  315. <div class="chatright">
  316. <div class="burbuja right">
  317. <div class="row">
  318. <div class="col-md-9">
  319. <h1>Hola, este es una respuesta de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
  320. <p>Hace 1 minutos.</p>
  321. </div>
  322. <div class="col-md-3">
  323. <div class="rounded-pic">
  324. <img src="images/man_2.png" alt="">
  325. </div>
  326. </div>
  327. </div>
  328. </div>
  329. </div>
  330. </div>
  331. <div class="row">
  332. <div class="chatleft">
  333. <div class="burbuja left">
  334. <div class="row">
  335. <div class="col-md-3">
  336. <div class="rounded-pic">
  337. <img src="images/man_2.png" alt="">
  338. </div>
  339. </div>
  340. <div class="col-md-9">
  341. <h1>Hola, este es un mensaje de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
  342. <p>Hace 2 minutos.</p>
  343. </div>
  344. </div>
  345. </div>
  346. </div>
  347. <div class="chatright">
  348. <div class="burbuja right">
  349. <div class="row">
  350. <div class="col-md-9">
  351. <h1>Hola, este es una respuesta de prueba, para la versión veta del dashboard en proceso de finalización.</h1>
  352. <p>Hace 1 minutos.</p>
  353. </div>
  354. <div class="col-md-3">
  355. <div class="rounded-pic">
  356. <img src="images/man_2.png" alt="">
  357. </div>
  358. </div>
  359. </div>
  360. </div>
  361. </div>
  362. </div>
  363. </div>
  364. <div class="box_message">
  365. <div class="row">
  366. <div class="col-md-8">
  367. <textarea placeholder="Presiona enter para enviar"></textarea>
  368. </div>
  369. <div class="col-md-4">
  370. <div class="enviar_mensaje">
  371. <div class="send_btn">
  372. <a href="#">Enviar</a>
  373. </div>
  374. </div>
  375. </div>
  376. </div>
  377. </div>
  378. </div>
  379. </div>
  380. </div>
  381. </div>
  382. <?php include('footer.php') ?>
  383. </div>
  384. </div>
  385. <!-- Modal ver notificaciones-->
  386. <div class="modal fade" id="verNotificacion" role="dialog">
  387. <div class="modal-dialog">
  388. <!-- Modal content-->
  389. <div class="modal-content">
  390. <div class="modal-header">
  391. <button type="button" class="close" data-dismiss="modal">&times;</button>
  392. <h4 class="modal-title">Notificaciones</h4>
  393. </div>
  394. <div class="modal-body">
  395. <div class="data_notification">
  396. <h1>Fernando Vásquez</h1>
  397. <p>Ha cambiado el nombre de la tienda OXXO con código 123 por Walmart.</p>
  398. </div>
  399. </div>
  400. </div>
  401. </div>
  402. </div>
  403. <script>
  404. ;(function($) {
  405. // Browser supports HTML5 multiple file?
  406. var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined',
  407. isIE = /msie/i.test( navigator.userAgent );
  408. $.fn.customFile = function() {
  409. return this.each(function() {
  410. var $file = $(this).addClass('custom-file-upload-hidden'), // the original file input
  411. $wrap = $('<div class="file-upload-wrapper">'),
  412. $input = $('<input type="text" class="file-upload-input" disabled placeholder="Ningún archivo seleccionado" />'),
  413. // Button that will be used in non-IE browsers
  414. $button = $('<button type="button" class="file-upload-button">Subir foto</button>'),
  415. // Hack for IE
  416. $label = $('<label class="file-upload-button" for="'+ $file[0].id +'">Subir foto</label>');
  417. // Hide by shifting to the left so we
  418. // can still trigger events
  419. $file.css({
  420. position: 'absolute',
  421. left: '-9999px'
  422. });
  423. $wrap.insertAfter( $file )
  424. .append( $file, $input, ( isIE ? $label : $button ) );
  425. // Prevent focus
  426. $file.attr('tabIndex', -1);
  427. $button.attr('tabIndex', -1);
  428. $button.click(function () {
  429. $file.focus().click(); // Open dialog
  430. });
  431. $file.change(function() {
  432. var files = [], fileArr, filename;
  433. // If multiple is supported then extract
  434. // all filenames from the file array
  435. if ( multipleSupport ) {
  436. fileArr = $file[0].files;
  437. for ( var i = 0, len = fileArr.length; i < len; i++ ) {
  438. files.push( fileArr[i].name );
  439. }
  440. filename = files.join(', ');
  441. // If not supported then just take the value
  442. // and remove the path to just show the filename
  443. } else {
  444. filename = $file.val().split('\\').pop();
  445. }
  446. $input.val( filename ) // Set the value
  447. .attr('title', filename) // Show filename in title tootlip
  448. .focus(); // Regain focus
  449. });
  450. $input.on({
  451. blur: function() { $file.trigger('blur'); },
  452. keydown: function( e ) {
  453. if ( e.which === 13 ) { // Enter
  454. if ( !isIE ) { $file.trigger('click'); }
  455. } else if ( e.which === 8 || e.which === 46 ) { // Backspace & Del
  456. // On some browsers the value is read-only
  457. // with this trick we remove the old input and add
  458. // a clean clone with all the original events attached
  459. $file.replaceWith( $file = $file.clone( true ) );
  460. $file.trigger('change');
  461. $input.val('');
  462. } else if ( e.which === 9 ){ // TAB
  463. return;
  464. } else { // All other keys
  465. return false;
  466. }
  467. }
  468. });
  469. });
  470. };
  471. // Old browser fallback
  472. if ( !multipleSupport ) {
  473. $( document ).on('change', 'input.customfile', function() {
  474. var $this = $(this),
  475. // Create a unique ID so we
  476. // can attach the label to the input
  477. uniqId = 'customfile_'+ (new Date()).getTime(),
  478. $wrap = $this.parent(),
  479. // Filter empty input
  480. $inputs = $wrap.siblings().find('.file-upload-input')
  481. .filter(function(){ return !this.value }),
  482. $file = $('<input type="file" id="'+ uniqId +'" name="'+ $this.attr('name') +'"/>');
  483. // 1ms timeout so it runs after all other events
  484. // that modify the value have triggered
  485. setTimeout(function() {
  486. // Add a new input
  487. if ( $this.val() ) {
  488. // Check for empty fields to prevent
  489. // creating new inputs when changing files
  490. if ( !$inputs.length ) {
  491. $wrap.after( $file );
  492. $file.customFile();
  493. }
  494. // Remove and reorganize inputs
  495. } else {
  496. $inputs.parent().remove();
  497. // Move the input so it's always last on the list
  498. $wrap.appendTo( $wrap.parent() );
  499. $wrap.find('input').focus();
  500. }
  501. }, 1);
  502. });
  503. }
  504. }(jQuery));
  505. $('input[type=file]').customFile();
  506. </script>