tester pre jquery

psicoadmin/public/index.html

@@ -14,6 +14,8 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css">
+    
+    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
 
 
     <!--

psicoadmin/src/App.js

@@ -27,8 +27,8 @@ function App() {
         <Router>
             <API_GATEWAY.Provider value={GATEWAY.dev}>
                 <Container fluid>
-                    <Header/>
                     <SideBar/>
+                    <Header/>
                 </Container>
             </API_GATEWAY.Provider>
         </Router>

psicoadmin/src/Components/Header.js

@@ -1,4 +1,8 @@
+import { Navbar, Nav, Container } from 'react-bootstrap';
+import ProfilePicture from '../Images/man.png';
+
 export function Header () {
+
     return (
 
         <nav className="navbar navbar-expand-lg navbar-light">
@@ -7,7 +11,7 @@ export function Header () {
                 <button type="button" id="sidebarCollapse" className="btncollapse">
                     <i className="fas fa-bars"></i>
                 </button>
-                <button type="button" id="dashboardfull" className="btncollapse" onclick="openFullscreen();">
+                <button type="button" id="dashboardfull" className="btncollapse" onClick={ () => console.log('open full screen') }>
                     <i className="fa fa-expand" aria-hidden="true"></i>
                 </button>
                 <button className="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
@@ -17,105 +21,105 @@ export function Header () {
                 <div className="collapse navbar-collapse" id="navbarSupportedContent">
                     <ul className="nav navbar-nav ml-auto">
                         <li className="nav-item">
-                            <a className="nav-link" id="dropdownNotificaciones" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far fa-bell"></i></a>
+                            <a href="/" className="nav-link" id="dropdownNotificaciones" data-toggle="dropdown" aria-expanded="false"><i className="far fa-bell"></i></a>
                             <div className="dropdown-menu dropdown-menu-right dropdown_noti" aria-labelledby="dropdownNotificaciones">
+                                <div className="body_drop_notification">
+                                    <div className="row">
+                                        <div className="col-md-2">
+                                            <div className="rounded-pic">
+                                                <img src={ProfilePicture} alt=""/>
+                                            </div>
+                                        </div>
+                                        <div className="col-md-6">
+                                            <h1>Fernando Vásquez</h1>
+                                            <p>He cambiado el nombre de una plaza manualmente.</p>
+                                        </div>
+                                        <div className="col-md-4 panel_time_notification">
+                                            <a href="/" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="body_drop_notification">
+                                    <div className="row">
+                                        <div className="col-md-2">
+                                            <div className="rounded-pic">
+                                                <img src="images/man.png" alt=""/>
+                                            </div>
+                                        </div>
+                                        <div className="col-md-6">
+                                            <h1>Fernando Vásquez</h1>
+                                            <p>He cambiado el nombre de una plaza manualmente.</p>
+                                        </div>
+                                        <div className="col-md-4 panel_time_notification">
+                                            <a href="/" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="body_drop_notification">
+                                    <div className="row">
+                                        <div className="col-md-2">
+                                            <div className="rounded-pic">
+                                                <img src="images/man.png" alt=""/>
+                                            </div>
+                                        </div>
+                                        <div className="col-md-6">
+                                            <h1>Fernando Vásquez</h1>
+                                            <p>He cambiado el nombre de una plaza manualmente.</p>
+                                        </div>
+                                        <div className="col-md-4 panel_time_notification">
+                                            <a href="/" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="body_drop_notification">
+                                    <div className="row">
+                                        <div className="col-md-2">
+                                            <div className="rounded-pic">
+                                                <img src="images/man.png" alt=""/>
+                                            </div>
+                                        </div>
+                                        <div className="col-md-6">
+                                            <h1>Fernando Vásquez</h1>
+                                            <p>He cambiado el nombre de una plaza manualmente.</p>
+                                        </div>
+                                        <div className="col-md-4 panel_time_notification">
+                                            <a href="/" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
+                                        </div>
+                                    </div>
+                                </div>
                                 <div className="body_drop_notification">
                                     <div className="row">
                                         <div className="col-md-2">
                                             <div className="rounded-pic">
                                                 <img src="images/man.png" alt=""/>
-                                                </div>
                                             </div>
-                                                    <div className="col-md-6">
-                                                        <h1>Fernando Vásquez</h1>
-                                                        <p>He cambiado el nombre de una plaza manualmente.</p>
-                                                    </div>
-                                                    <div className="col-md-4 panel_time_notification">
-                                                        <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
-                                                    </div>
+                                        </div>
+                                        <div className="col-md-6">
+                                            <h1>Fernando Vásquez</h1>
+                                            <p>He cambiado el nombre de una plaza manualmente.</p>
+                                        </div>
+                                        <div className="col-md-4 panel_time_notification">
+                                            <a href="/" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
                                         </div>
                                     </div>
-                                                    <div className="body_drop_notification">
-                                                        <div className="row">
-                                                            <div className="col-md-2">
-                                                                <div className="rounded-pic">
-                                                                    <img src="images/man.png" alt=""/>
-                                                                    </div>
-                                                                </div>
-                                                                        <div className="col-md-6">
-                                                                            <h1>Fernando Vásquez</h1>
-                                                                            <p>He cambiado el nombre de una plaza manualmente.</p>
-                                                                        </div>
-                                                                        <div className="col-md-4 panel_time_notification">
-                                                                            <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
-                                                                        </div>
-                                                            </div>
-                                                        </div>
-                                                                        <div className="body_drop_notification">
-                                                                            <div className="row">
-                                                                                <div className="col-md-2">
-                                                                                    <div className="rounded-pic">
-                                                                                        <img src="images/man.png" alt=""/>
-                                                                                        </div>
-                                                                                    </div>
-                                                                                            <div className="col-md-6">
-                                                                                                <h1>Fernando Vásquez</h1>
-                                                                                                <p>He cambiado el nombre de una plaza manualmente.</p>
-                                                                                            </div>
-                                                                                            <div className="col-md-4 panel_time_notification">
-                                                                                                <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
-                                                                                            </div>
-                                                                                </div>
-                                                                            </div>
-                                                                                            <div className="body_drop_notification">
-                                                                                                <div className="row">
-                                                                                                    <div className="col-md-2">
-                                                                                                        <div className="rounded-pic">
-                                                                                                            <img src="images/man.png" alt=""/>
-                                                                                                            </div>
-                                                                                                        </div>
-                                                                                                                <div className="col-md-6">
-                                                                                                                    <h1>Fernando Vásquez</h1>
-                                                                                                                    <p>He cambiado el nombre de una plaza manualmente.</p>
-                                                                                                                </div>
-                                                                                                                <div className="col-md-4 panel_time_notification">
-                                                                                                                    <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
-                                                                                                                </div>
-                                                                                                    </div>
-                                                                                                </div>
-                                                                                                                <div className="body_drop_notification">
-                                                                                                                    <div className="row">
-                                                                                                                        <div className="col-md-2">
-                                                                                                                            <div className="rounded-pic">
-                                                                                                                                <img src="images/man.png" alt=""/>
-                                                                                                                                </div>
-                                                                                                                            </div>
-                                                                                                                                    <div className="col-md-6">
-                                                                                                                                        <h1>Fernando Vásquez</h1>
-                                                                                                                                        <p>He cambiado el nombre de una plaza manualmente.</p>
-                                                                                                                                    </div>
-                                                                                                                                    <div className="col-md-4 panel_time_notification">
-                                                                                                                                        <a href="#" data-toggle="modal" data-target="#verNotificacion"><p>Hace 20 segundos.</p></a>
-                                                                                                                                    </div>
-                                                                                                                        </div>
-                                                                                                                    </div>
-                                                                                                                </div>
-                                                                                            </li>
-                                                                                                                                    <li className="nav-item">
-                                                                                                                                        <a className="btn-drop" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                                                                                                                            <div className="rounded-pic">
-                                                                                                                                                <img src="images/man.png" alt=""/>
-                                                                                                                                                </div>
-                                                                                                                                            </a>
-                                                                                                                                                    <div className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
-                                                                                                                                                        <a className="dropdown-item" href="perfil.php">Perfil</a>
-                                                                                                                                                        <a className="dropdown-item" href="configuraciones.php">Configuraciones</a>
-                                                                                                                                                        <a className="dropdown-item" href="login.php">Cerrar sesión</a>
-                                                                                                                                                    </div>
-                                                                                                                                        </li>
-                                                                                                                                    </ul>
-                                                                        </div>
-                                                    </div>
-                                </nav>
-                                                                                                                                                    )
+                                </div>
+                            </div>
+                        </li>
+                        <li className="nav-item">
+                            <a href="/" className="btn-drop" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
+                                <div className="rounded-pic">
+                                    <img src="images/man.png" alt=""/>
+                                </div>
+                            </a>
+                            <div className="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
+                                <a className="dropdown-item" href="perfil.php">Perfil</a>
+                                <a className="dropdown-item" href="configuraciones.php">Configuraciones</a>
+                                <a className="dropdown-item" href="login.php">Cerrar sesión</a>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
+    )
 }

psicoadmin/src/Components/Sidebar.js

@@ -1,35 +1,36 @@
 import React from 'react'
-import { Container, Row, Col } from 'react-bootstrap'
+// import { Container, Row, Col } from 'react-bootstrap'
+import Logo from '../Images/logo.png';
 
 export function SideBar () {
     return(
-        <div class="wrapper">
+        <div className="wrapper">
             <nav id="sidebar">
-                <div class="sidebar-header">
-                    <div class="width_img">
-                        <img src="images/logo.png" alt=""/>
+                <div className="sidebar-header">
+                    <div className="width_img">
+                        <img src={Logo} alt=""/>
                     </div>
                 </div>
-                <ul class="list-unstyled components">
-                    <li class="cabecera_li">MENÚ</li>
-                    <li id="home" class="active">
-                        <a href="index.php"><i class="fas fa-home"></i>Inicio</a>
+                <ul className="list-unstyled components">
+                    <li className="cabecera_li">MENÚ</li>
+                    <li id="home" className="active">
+                        <a href="index.php"><i className="fas fa-home"></i>Inicio</a>
                     </li>
                     <li id="plazas">
-                        <a href="#"><i class="far fa-list-alt"></i>Puestos</a>
+                        <a href="/"><i className="far fa-list-alt"></i>Puestos</a>
                     </li>
                     <li id="notificaciones">
-                        <a href="#"><i class="fas fa-shield-alt"></i>Contraseñas</a>
+                        <a href="/"><i className="fas fa-shield-alt"></i>Contraseñas</a>
                     </li>
                     <li id="expedientes">
-                        <a href="#"><i class="far fa-user"></i>Expedientes</a>
+                        <a href="/"><i className="far fa-user"></i>Expedientes</a>
                     </li>
                     <li id="resultados">
-                        <a href="#"><i class="fas fa-chart-line"></i>Resultados</a>
+                        <a href="/"><i className="fas fa-chart-line"></i>Resultados</a>
                     </li>
                     <li id="pruebas">
-                        <a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-paperclip"></i>Pruebas</a>
-                        <ul class="collapse list-unstyled" id="pageSubmenu2">
+                        <a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle"><i className="fas fa-paperclip"></i>Pruebas</a>
+                        <ul className="collapse list-unstyled" id="pageSubmenu2">
                             <li id="crearprueba">
                                 <a href="nueva-prueba.php">Crear prueba</a>
                             </li>
@@ -40,23 +41,23 @@ export function SideBar () {
                                 <a href="asignar.php">Aplicar</a>
                             </li>
                             <li id="respuestas">
-                                <a href="#">Respuestas</a>
+                                <a href="/">Respuestas</a>
                             </li>
                             <li id="calificaciones">
-                                <a href="#">Calificaciones</a>
+                                <a href="/">Calificaciones</a>
                             </li>
                         </ul>
                     </li>
                     <li id="configuraciones">
-                        <a href="#"><i class="fas fa-cog"></i>Configuraciones</a>
+                        <a href="/"><i className="fas fa-cog"></i>Configuraciones</a>
                     </li>
                     <li id="historial">
-                        <a href="#"><i class="far fa-clock"></i>Historial</a>
+                        <a href="/"><i className="far fa-clock"></i>Historial</a>
                     </li>
-                    <li class="cabecera_li">EXTRAS</li>
+                    <li className="cabecera_li">EXTRAS</li>
                     <li id="elementos">
-                        <a href="#pageSubmenu3" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-star"></i>Elementos</a>
-                        <ul class="collapse list-unstyled" id="pageSubmenu3">
+                        <a href="#pageSubmenu3" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle"><i className="fas fa-star"></i>Elementos</a>
+                        <ul className="collapse list-unstyled" id="pageSubmenu3">
                             <li>
                                 <a href="lockscreen.php" target="_blank">Pantalla Bloqueada</a>
                             </li>
@@ -72,27 +73,27 @@ export function SideBar () {
                         </ul>
                     </li>
                     <li id="tutoriales">
-                        <a href="#pageSubmenu4" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="far fa-bookmark"></i>Tutoriales</a>
-                        <ul class="collapse list-unstyled" id="pageSubmenu4">
+                        <a href="#pageSubmenu4" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle"><i className="far fa-bookmark"></i>Tutoriales</a>
+                        <ul className="collapse list-unstyled" id="pageSubmenu4">
                             <li>
-                                <a href="#">Manual de Uso Básico</a>
+                                <a href="/">Manual de Uso Básico</a>
                             </li>
                             <li>
-                                <a href="#">¿Qué evalúa cada test?</a>
+                                <a href="/">¿Qué evalúa cada test?</a>
                             </li>
                             <li>
-                                <a href="#">Ayuda General</a>
+                                <a href="/">Ayuda General</a>
                             </li>
                         </ul>
                     </li>
                     <li id="asistencia">
-                        <a href="#pageSubmenu5" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle"><i class="fas fa-headphones"></i>Asistencia Técnica</a>
-                        <ul class="collapse list-unstyled" id="pageSubmenu5">
+                        <a href="#pageSubmenu5" data-toggle="collapse" aria-expanded="false" className="dropdown-toggle"><i className="fas fa-headphones"></i>Asistencia Técnica</a>
+                        <ul className="collapse list-unstyled" id="pageSubmenu5">
                             <li>
-                                <a href="#">Soporte En Línea</a>
+                                <a href="/">Soporte En Línea</a>
                             </li>
                             <li>
-                                <a href="#">Soporte Por Ticket</a>
+                                <a href="/">Soporte Por Ticket</a>
                             </li>
                         </ul>
                     </li>