Boton terminado

This commit is contained in:
2020-08-22 01:58:57 -05:00
parent 7a4bbdb331
commit 3e79779aae
10 changed files with 141 additions and 173 deletions
+1 -1
View File
@@ -15,7 +15,7 @@ Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
export default {
name: "App",
name: "App"
};
</script>
+126 -156
View File
@@ -5,115 +5,108 @@
<div>
<h1>Hackaton UNAM-AWS</h1>
</div>
<nav class="navbar navbar-expand-md navbar-light " >
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-md navbar-light ">
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-dark">
<button
class=" navbar-toggler van btn-sm colorB"
type="button"
id="toggle-menu"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
v-on:click="toggle()"
>
<span class=" navbar-toggler-icon m-1"></span>
Opciones
</button>
</nav>
<nav class="navbar navbar-dark">
<button class=" navbar-toggler van btn-sm" type="button" id="toggle-menu" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" v-on:click="toggle()">
<span class=" navbar-toggler-icon m-1" ></span>
Opciones
</button>
</nav>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<div class="nav-item nav-link " @click="numPanel=1"><a>Equipos</a></div>
</li>
<li class="nav-item dropdown">
<div class="nav-item nav-link " @click="numPanel=2"><a>Participantes</a></div>
</li>
</ul>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<div class="nav-item nav-link " @click="numPanel = 1">
<a>Equipos</a>
</div>
</li>
<li class="nav-item dropdown">
<div class="nav-item nav-link " @click="numPanel = 2">
<a>Participantes</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
<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>
</nav>
<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 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 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>
</div>
</section>
</template>
@@ -126,7 +119,7 @@ import Header from "./../view/headerAdmin.vue";
export default {
components: {
//HelloWorld
Header,
Header
},
data() {
return {
@@ -136,16 +129,13 @@ export default {
};
},
methods: {
toggle: function() {
let element = document.getElementById('navbarNav')
element.classList.toggle('block')
element.classList.add('mystyle')
},
toggle: function() {
let element = document.getElementById("navbarNav");
element.classList.toggle("block");
element.classList.add("mystyle");
}
},
async created() {
let equipos = await axios.get(`${config.api}/getRegistro`);
equipos = equipos.data.data;
for (let i = 0; i < equipos.length; i++) {
@@ -166,17 +156,13 @@ 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,
@@ -188,16 +174,11 @@ export default {
carrera: personaQuery[i].carrera
});
}
},
beforeCreate() {
if (!window.localStorage.getItem("id_usuario")) this.$router.push("/");
else this.id = window.localStorage.getItem("id_usuario");
},
}
};
</script>
@@ -215,7 +196,6 @@ td {
font-size: 0.8rem;
}
@media screen and (min-width: 1024px) {
h1 {
margin-top: 3rem;
@@ -224,79 +204,69 @@ td {
}
}
.nav-item{
-webkit-transition-duration: 0.4s; /* Safari */
.nav-item {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
text-align: center;
}
.nav-item:hover{
.nav-item:hover {
background-color: #343a40;
color: white;
}
.navbar-brand{
.navbar-brand {
color: white;
}
body{
overflow-x: hidden;
body {
overflow-x: hidden;
}
.mystyle {
text-align: left;
text-align: left;
}
.block {
display: block;
display: block;
}
a {
max-height: 100%;
max-height: 100%;
}
.menu {
background-color: #bb8800;
background-color: #bb8800;
}
.menu nav ul {
display: flex;
justify-content: space-between;
margin: 0 1rem;
display: flex;
justify-content: space-between;
margin: 0 1rem;
}
.menu nav ul div {
display: flex;
justify-content: space-between;
display: flex;
justify-content: space-between;
}
.menu nav ul li {
list-style: none;
list-style: none;
}
.menu nav ul li a {
display: block;
display: block;
}
.van{
display:flex;
.van {
display: flex;
align-items: center;
justify-content: center;
color: black;
}
@media (min-width: 768px) {
.van{
display: none;
.van {
display: none;
}
}
.colorB {
background-color: black;
color: white;
}
</style>
-2
View File
@@ -1,5 +1,4 @@
const config = {
//Local
//api: "http://localhost:3000"
@@ -8,6 +7,5 @@ const config = {
//Produccion
api: "https://venus.acatlan.unam.mx/indiana_hackaton"
};
module.exports = config;