creacion
This commit is contained in:
@@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br />
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-cli documentation</a
|
||||
>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>babel</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>eslint</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
||||
>Forum</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
||||
>Community Chat</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
||||
>Twitter</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="https://router.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-router</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-devtools#vue-devtools"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>vue-devtools</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
|
||||
>vue-loader</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="https://github.com/vuejs/awesome-vue"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>awesome-vue</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "HelloWorld",
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,377 @@
|
||||
<template>
|
||||
<div class="registro-general">
|
||||
<form class="pure-form pure-form-stacked">
|
||||
<fieldset>
|
||||
<legend>Datos Generales <br /></legend>
|
||||
<div class="pure-u-1 pure-u-md-2-2">
|
||||
<label for="nombre-equipo">Nombre del equipo</label>
|
||||
<input
|
||||
type="text"
|
||||
id="nombre-equipo"
|
||||
class="pure-u-23-24"
|
||||
required=""
|
||||
v-model="nombreEquipo"
|
||||
onkeypress="return ( (event.charCode >= 48 && event.charCode <= 57) || (event.charCode >= 32 && event.charCode <= 32) ||(event.charCode >= 65 && event.charCode <= 90) ||(event.charCode >= 97))"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1 pure-u-md-1-3 ma">
|
||||
<label for="des">Desafío</label>
|
||||
<select
|
||||
id="des"
|
||||
name="desafio"
|
||||
class="form-control"
|
||||
v-model="desafio"
|
||||
>
|
||||
<option value="Salud">Salud</option>
|
||||
<option value="Educación">Educación</option>
|
||||
<option value="Economía">Economía</option>
|
||||
<option value="Transporte">Transporte</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1 pure-u-md-1-3 ma">
|
||||
<label for="cam">Campus</label>
|
||||
<select id="cam" name="Campus" class="form-control" v-model="campus">
|
||||
<option value="Acatlán">Acatlán</option>
|
||||
<option value="CU">CU</option>
|
||||
<option value="Aragón">Aragón</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="pure-u-1 pure-u-md-1-4 ">
|
||||
<label for="noInt">Numero de integrantes </label>
|
||||
<select
|
||||
id="noInt"
|
||||
name="integrantes"
|
||||
class="form-control"
|
||||
v-model="noIntegrantes"
|
||||
@change="updateInte($event)"
|
||||
>
|
||||
<option value="1">1</option>
|
||||
<option value="2">2</option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<legend>Datos del lider del equipo <br /></legend>
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1 pure-u-md-1-3">
|
||||
<label for="nombre">Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
id="nombreLider"
|
||||
class="pure-u-23-24"
|
||||
required=""
|
||||
v-model="nombreLider"
|
||||
onkeypress="return ( (event.charCode >= 32 && event.charCode <= 32) ||(event.charCode >= 65 && event.charCode <= 90) ||(event.charCode >= 97))"
|
||||
/>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-3">
|
||||
<label for="apellidoPaLider">Apellido Paterno</label>
|
||||
<input
|
||||
type="text"
|
||||
id="apellidoPaLider"
|
||||
class="pure-u-23-24"
|
||||
required=""
|
||||
v-model="apellidoPaLider"
|
||||
onkeypress="return ( (event.charCode >= 32 && event.charCode <= 32) ||(event.charCode >= 65 && event.charCode <= 90) ||(event.charCode >= 97))"
|
||||
/>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-3">
|
||||
<label for="apellidoMaLider">Apellido Materno</label>
|
||||
<input
|
||||
type="text"
|
||||
id="apellidoMaLider"
|
||||
class="pure-u-23-24"
|
||||
required=""
|
||||
v-model="apellidoMaLider"
|
||||
onkeypress="return ( (event.charCode >= 32 && event.charCode <= 32) ||(event.charCode >= 65 && event.charCode <= 90) ||(event.charCode >= 97))"
|
||||
/>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-2">
|
||||
<label for="correoLider">Correo</label>
|
||||
<input
|
||||
type="email"
|
||||
id="correoLider"
|
||||
class="pure-u-23-24"
|
||||
required=""
|
||||
v-model="correoLider"
|
||||
/>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-2">
|
||||
<label for="carrera">Carrera</label>
|
||||
<input
|
||||
type="text"
|
||||
id="carrera"
|
||||
class="pure-u-23-24"
|
||||
v-model="carrera"
|
||||
onkeypress="return ( (event.charCode >= 32 && event.charCode <= 32) ||(event.charCode >= 65 && event.charCode <= 90) ||(event.charCode >= 97))"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="noIntegrantes > 1">
|
||||
<legend>Datos de los integrantes del equipo<br /></legend>
|
||||
|
||||
<div v-for="item in integrantes" :key="item.id">
|
||||
<h4 class="title">Integrante {{ item.id + 1 }}</h4>
|
||||
|
||||
<div class="pure-g">
|
||||
<div class="pure-u-1 pure-u-md-1-3">
|
||||
<label for="item.nombre">Nombre</label>
|
||||
<input
|
||||
type="text"
|
||||
id="item.nombre"
|
||||
class="pure-u-23-24"
|
||||
required=""
|
||||
v-model="item.nombre"
|
||||
onkeypress="return ( (event.charCode >= 32 && event.charCode <= 32) ||(event.charCode >= 65 && event.charCode <= 90) ||(event.charCode >= 97))"
|
||||
/>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-3">
|
||||
<label for="item.apellidoP">Apellido Paterno</label>
|
||||
<input
|
||||
type="text"
|
||||
id="item.apellidoP"
|
||||
class="pure-u-23-24"
|
||||
required=""
|
||||
v-model="item.apellidoP"
|
||||
onkeypress="return ( (event.charCode >= 32 && event.charCode <= 32) ||(event.charCode >= 65 && event.charCode <= 90) ||(event.charCode >= 97))"
|
||||
/>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-7-24">
|
||||
<label for="item.apellidoM">Apellido Materno</label>
|
||||
<input
|
||||
type="text"
|
||||
id="item.apellidoM"
|
||||
class="pure-u-23-24"
|
||||
required=""
|
||||
v-model="item.apellidoM"
|
||||
onkeypress="return ( (event.charCode >= 32 && event.charCode <= 32) ||(event.charCode >= 65 && event.charCode <= 90) ||(event.charCode >= 97))"
|
||||
/>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1">
|
||||
<label for="item.correo">Correo</label>
|
||||
<input
|
||||
type="text"
|
||||
id="item.correo"
|
||||
class="pure-u-23-24"
|
||||
required=""
|
||||
v-model="item.correo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pure-g espacio">
|
||||
<div class="pure-u-1 pure-u-md-1-2">
|
||||
<button class="button_salir ">Salir</button>
|
||||
</div>
|
||||
<div class="pure-u-1 pure-u-md-1-2">
|
||||
<button class="button " v-if="checkFull()" @click="registrar()">
|
||||
Siguiente
|
||||
</button>
|
||||
<p class="botton_falso" v-else>Siguiente</p>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import config from "../config/config.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
nombreEquipo: "",
|
||||
campus: "",
|
||||
desafio: "",
|
||||
nombreLider: "",
|
||||
apellidoPaLider: "",
|
||||
apellidoMaLider: "",
|
||||
correoLider: "",
|
||||
carrera: "",
|
||||
noIntegrantes: 1,
|
||||
integrantes: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
updateInte(event) {
|
||||
this.integrantes = [];
|
||||
for (let i = 1; i < event.target.value; i++) {
|
||||
this.integrantes.push({
|
||||
id: i,
|
||||
nombre: "",
|
||||
apellidoPa: "",
|
||||
apellidoMa: "",
|
||||
correo: ""
|
||||
});
|
||||
}
|
||||
},
|
||||
checkFull() {
|
||||
if (this.nombreEquipo.trim() === "") {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.campus.trim() === "") {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.desafio.trim() === "") {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.nombreLider.trim() === "") {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.apellidoPaLider.trim() === "") {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.apellidoMaLider.trim() === "") {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.correoLider.trim() === "") {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (this.carrera.trim() === "") {
|
||||
return false;
|
||||
}
|
||||
|
||||
for (let i = 1; i < this.noIntegrantes; i++) {
|
||||
if (
|
||||
this.integrantes[i - 1].nombre.trim() === "" ||
|
||||
this.integrantes[i - 1].apellidoP.trim() === "" ||
|
||||
this.integrantes[i - 1].apellidoM.trim() === "" ||
|
||||
this.integrantes[i - 1].correo.trim() === ""
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
},
|
||||
async registrar() {
|
||||
const data = {
|
||||
nombreEqui: this.nombreEquipo,
|
||||
desafio: this.desafio,
|
||||
campus: this.campus,
|
||||
numeroIntegrantes: 2,
|
||||
nombreLider: this.noIntegrantes,
|
||||
apellidoPaLider: this.apellidoPaLider,
|
||||
apellidoMaLider: this.apellidoMaLider,
|
||||
correoLider: this.correoLider,
|
||||
carreraLider: this.carrera,
|
||||
integrantes: this.integrantes
|
||||
};
|
||||
axios
|
||||
.post(`${config.api}/registro`, data)
|
||||
.then(async respose => {
|
||||
console.log(respose.data.msj);
|
||||
await alert(respose.data.msj);
|
||||
})
|
||||
.catch(async error => {
|
||||
console.log(error.response.data.msj);
|
||||
await alert(error.response.data.msj);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
.espacio {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.botton_falso {
|
||||
background-color: #ccc; /* Green */
|
||||
border: none;
|
||||
color: white;
|
||||
height: 4.5rem;
|
||||
width: 15rem;
|
||||
padding: 1rem 4rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
-webkit-transition-duration: 0.4s; /* Safari */
|
||||
transition-duration: 0.4s;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.button_salir {
|
||||
background-color: #1b3d70; /* Green */
|
||||
border: none;
|
||||
color: white;
|
||||
height: 4.5rem;
|
||||
width: 15rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
-webkit-transition-duration: 0.4s; /* Safari */
|
||||
transition-duration: 0.4s;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.button_salir:hover {
|
||||
background-color: rgb(170, 4, 4);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button {
|
||||
background-color: #1b3d70; /* Green */
|
||||
border: none;
|
||||
color: white;
|
||||
height: 4.5rem;
|
||||
width: 15rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
-webkit-transition-duration: 0.4s; /* Safari */
|
||||
transition-duration: 0.4s;
|
||||
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
.button:hover {
|
||||
background-color: #46c200;
|
||||
color: white;
|
||||
}
|
||||
.general {
|
||||
max-width: 1280px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.ma {
|
||||
margin-right: 1.5rem;
|
||||
}
|
||||
.title {
|
||||
color: white;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user