hackFront/src/components/form.vue

<template>
  <div class="registro-general">
    <form class="pure-form pure-form-stacked" v-if="!cargando">
      <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"
            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"
              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"
              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"
              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"
              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 class="pure-u-1 pure-u-md-2-2">
            <div class="form-check">
              <input
                type="checkbox"
                class="form-check-input "
                id="exampleCheck1"
                v-model="confirmacion"
              />
              <label class="form-check-label" for="exampleCheck1"
                >Acepto ser el lider del Equipo</label
              >
            </div>
          </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"
                  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.apellidoPa">Apellido Paterno</label>
                <input
                  type="text"
                  id="item.apellidoPa"
                  class="pure-u-23-24"
                  v-model="item.apellidoPa"
                  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.apellidoMa">Apellido Materno</label>
                <input
                  type="text"
                  id="item.apellidoMa"
                  class="pure-u-23-24"
                  v-model="item.apellidoMa"
                  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"
                  v-model="item.correo"
                />
              </div>
            </div>
          </div>
        </div>

        <div class="pure-g espacio" v-if="checkSize()">
          <div class="pure-u-1 pure-u-md-1-2">
            <button class="button_salir " @click="salir()">Salir</button>
          </div>
          <div class="pure-u-1 pure-u-md-1-2">
            <button class="button " v-if="checkFull()" @click="registrar()">
              Registrar
            </button>
            <p class="botton_falso" v-else>Registrar</p>
          </div>
        </div>

        <div class="pure-g espacio" v-else>
          <div class="pure-u-1 pure-u-md-1-2">
            <button class="button " v-if="checkFull()" @click="registrar()">
              Registrar
            </button>
            <p class="botton_falso" v-else>Registrar</p>
          </div>
          <div class="pure-u-1 pure-u-md-1-2">
            <button class="button_salir " @click="salir()">Salir</button>
          </div>
        </div>
      </fieldset>
    </form>
    <div v-else class="text-center">
      <div
        class="spinner-grow"
        role="status"
        style="width: 10rem; height: 10rem;"
      >
        <span class="sr-only">Loading...</span>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import config from "../config/config.js";
import Swal from "sweetalert2";

export default {
  data() {
    return {
      nombreEquipo: "",
      campus: "",
      desafio: "",
      nombreLider: "",
      apellidoPaLider: "",
      apellidoMaLider: "",
      correoLider: "",
      carrera: "",
      noIntegrantes: 1,
      integrantes: [],
      cargando: false,
      confirmacion: false
    };
  },
  methods: {
    checkSize() {
      if (window.screen.width > 500) {
        return true;
      } else {
        return false;
      }
    },
    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.confirmacion) return false;
      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].apellidoPa.trim() === "" ||
          this.integrantes[i - 1].apellidoMa.trim() === "" ||
          this.integrantes[i - 1].correo.trim() === ""
        ) {
          return false;
        }
      }
      return true;
    },
    async salir() {
      await Swal.fire({
        title: "¿Seguro que quieres salir?",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Si"
      }).then(result => {
        if (result.value) {
          window.location.href = "http://aws.unam.mx/";
        }
      });
    },
    async registrar() {
      this.cargando = true;
      const data = {
        nombreEqui: this.nombreEquipo,
        desafio: this.desafio,
        campus: this.campus,
        numeroIntegrantes: this.noIntegrantes,
        nombreLider: this.nombreLider,
        apellidoPaLider: this.apellidoPaLider,
        apellidoMaLider: this.apellidoMaLider,
        correoLider: this.correoLider,
        carreraLider: this.carrera,
        integrantes: this.integrantes
      };
      axios
        .post(`${config.api}/registro`, data)
        .then(async respose => {
          this.cargando = false;
          console.log(respose.data.msj);
          await Swal.fire("Has sido registrado", "", "success");
          window.location.href = "http://aws.unam.mx/";
          return;
        })
        .catch(async error => {
          this.cargando = false;
          console.log(error.response.data.msj);
          await Swal.fire(
            "Ocurrio un error",
            `${error.response.data.msj}`,
            "error"
          );
          window.location.href = "http://aws.unam.mx/";
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.form-check-label {
  margin-left: 1.3rem;
  margin-top: 1rem;
  padding-top: 0.4rem;
  display: flex;
}
.form-check-input {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
}
.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;
}

@media screen and (max-width: 500px) {
  .botton_falso {
    margin-left: 4rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
  }

  .button_salir {
    margin-left: 4rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-top: 1rem;
  }

  .button {
    margin-left: 4rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
  }
}
@media screen and (max-width: 380px) {
  .botton_falso {
    margin-left: 3rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
  }

  .button_salir {
    margin-left: 3rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-top: 1rem;
  }
  .button {
    margin-left: 3rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
  }
}

@media screen and (max-width: 325px) {
  .botton_falso {
    margin-left: 1.5rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
  }

  .button_salir {
    margin-left: 1.5rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-top: 1rem;
  }

  .button {
    margin-left: 1.5rem;
    margin-right: 0rem;
    margin-bottom: 2rem;
    margin-top: 3rem;
  }
}
</style>