nueva tabla persona

src/components/panelAdmin.vue

@@ -7,34 +7,97 @@
     </div>
     <div class="container">
       <div class="row">
-        <table class="table">
-          <thead class="thead-dark">
-            <tr class="titulo">
-              <th scope="col">#</th>
-              <th scope="col">Nombre del Equipo</th>
-              <th scope="col">Numero de Integrantes</th>
-              <th scope="col">Nombre del Lider</th>
-              <th scope="col">Correo</th>
-              <th scope="col">Carrera</th>
-              <th scope="col">Campus</th>
-              <th scope="col">Fecha de Registro</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr v-for="item in registros" :key="item.idEquipo">
-              <th scope="row">{{ item.idEquipo }}</th>
-              <td>{{ item.nombreEquipo }}</td>
-              <td>{{ item.numeroIntegrantes }}</td>
-              <td>{{ item.nombre }}</td>
-              <td>{{ item.correo }}</td>
-              <td>{{ item.carrera }}</td>
-              <td>{{ item.campus }}</td>
-              <td>{{ item.fecha }}</td>
-            </tr>
-          </tbody>
-        </table>
+        <nav class="navbar navbar-expand-lg navbar-light bg-light">
+          <button
+            class="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#navbarTogglerDemo01"
+            aria-controls="navbarTogglerDemo01"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
+            <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
+              <li class="nav-item ">
+                <a class="navbar-brand" @click="numPanel=1">Equipos </a
+                >
+              </li>
+              <li class="nav-item">
+                <a class="navbar-brand"  @click="numPanel=2">Participantes</a>
+              </li>
+            </ul>
+          </div>
+        </nav>
       </div>
     </div>
+  
+      <div class="container" v-if="numPanel==1">
+        <div class="row">
+          <table class="table">
+            <thead class="thead-dark">
+              <tr class="titulo">
+                <th scope="col">#</th>
+                <th scope="col">Nombre del Equipo</th>
+                <th scope="col">Numero de Integrantes</th>
+                <th scope="col">Nombre del Lider</th>
+                <th scope="col">Correo</th>
+                <th scope="col">Carrera</th>
+                <th scope="col">Campus</th>
+                <th scope="col">Fecha de Registro</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in registros" :key="item.idEquipo">
+                <th scope="row">{{ item.idEquipo }}</th>
+                <td>{{ item.nombreEquipo }}</td>
+                <td>{{ item.numeroIntegrantes }}</td>
+                <td>{{ item.nombre }}</td>
+                <td>{{ item.correo }}</td>
+                <td>{{ item.carrera }}</td>
+                <td>{{ item.campus }}</td>
+                <td>{{ item.fecha }}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+
+    <div class="container" v-if="numPanel==2">
+        <div class="row">
+          <table class="table">
+            <thead class="thead-dark">
+              <tr class="titulo">
+                <th scope="col">#</th>
+                <th scope="col">Nombre </th>
+                <th scope="col">Apellido Paterno</th>
+                <th scope="col">Apellido Materno</th>
+                <th scope="col">Correo</th>
+                <th scope="col">Nombre del Aquipo</th>
+                <th scope="col">Campus</th>
+                <th scope="col">Carrera</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="item in persona" :key="item.idPersona">
+                <th scope="row">{{ item.idPersona }}</th>
+                <td>{{ item.nombre }}</td>
+                <td>{{ item.apellidoP }}</td>
+                <td>{{ item.apellidoM }}</td>
+                <td>{{ item.correo }}</td>
+                <td>{{ item.nombreEquipo }}</td>
+                <td>{{ item.campus }}</td>
+                 <td>{{ item.carrera }}</td>
+                
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
   </section>
 </template>
 
@@ -47,15 +110,21 @@ import Header from "./../view/headerAdmin.vue";
 export default {
   components: {
     //HelloWorld
-    Header
+    Header,
   },
   data() {
     return {
-      registros: []
+      registros: [],
+      numPanel: 1,
+      persona: []
     };
   },
-
+  methods: {
+   
+  },
   async created() {
+
+
     let equipos = await axios.get(`${config.api}/getRegistro`);
     equipos = equipos.data.data;
     for (let i = 0; i < equipos.length; i++) {
@@ -76,14 +145,38 @@ export default {
         correo: equipos[i].correo,
         carrera: equipos[i].carrera,
         campus: equipos[i].campus,
-        fecha: equipos[i].fechaRegistro
+        fecha: equipos[i].fechaRegistro,
       });
     }
+
+
+
+
+    let personaQuery = await axios.get(`${config.api}/getPersona`);
+    personaQuery = personaQuery.data.data;
+    for (let i = 0; i < personaQuery.length; i++) {
+    
+      this.persona.push({
+        idPersona: i + 1,
+        nombre: personaQuery[i].nombre,
+        apellidoP: personaQuery[i].apellidoP,
+        apellidoM: personaQuery[i].apellidoM,
+        correo: personaQuery[i].correo,
+        nombreEquipo: personaQuery[i].nombreEquipo,
+        campus: personaQuery[i].campus,
+        carrera: personaQuery[i].carrera
+      });
+    }
+
+
+
+
+
   },
   beforeCreate() {
     if (!window.localStorage.getItem("id_usuario")) this.$router.push("/");
     else this.id = window.localStorage.getItem("id_usuario");
-  }
+  },
 };
 </script>
 
@@ -101,6 +194,7 @@ td {
   font-size: 0.8rem;
 }
 
+
 @media screen and (min-width: 1024px) {
   h1 {
     margin-top: 3rem;
@@ -108,4 +202,20 @@ td {
     font-size: 2.5rem;
   }
 }
+
+.nav-item{
+  
+   -webkit-transition-duration: 0.4s; /* Safari */
+  transition-duration: 0.4s;
+  text-align: center;
+  
+}
+.nav-item:hover{
+  background-color: #343a40;
+  color: white;
+}
+.navbar-brand{
+  color: white;
+  
+}
 </style>