diff --git a/src/components/Inicio/tabla-horarios.vue b/src/components/Inicio/tabla-horarios.vue index 3f7040c..ad5766d 100644 --- a/src/components/Inicio/tabla-horarios.vue +++ b/src/components/Inicio/tabla-horarios.vue @@ -5,15 +5,16 @@ td Hora td(v-for="dia in dias") {{ dia }} tbody - tr(v-for="hora in horas") - td - span {{ hora.substring(0, 5) }} - span.ocultar-en-movil {{ hora.substr(5) }} - celda(v-for="(dia, i) in dias" :key="i" - :dia="dia" - :hora="hora" - :nombreAño="nombreAño" - :nombreStore="nombreStore") + template(v-for="hora in horas") + tr(v-show="!(horasDescanso.find(x => x === hora)) || $store.state.mostrarDescansos") + td + span {{ hora.substring(0, 5) }} + span.ocultar-en-movil {{ hora.substr(5) }} + celda(v-for="(dia, i) in dias" :key="i" + :dia="dia" + :hora="hora" + :nombreAño="nombreAño" + :nombreStore="nombreStore") // @@ -47,6 +48,12 @@ "18:30 - 19:20" "19:20 - 20:10" ] + horasDescanso: [ + "08:40 - 08:50" + "10:30 - 10:40" + "15:40 - 15:50" + "17:30 - 17:40" + ] props: nombreAño: type: String diff --git a/src/store/index.js b/src/store/index.js index 6ad5201..8228746 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -16,7 +16,8 @@ const store = new Vuex.Store({ datos: { titulo: "Cargando...", años: {} - } + }, + mostrarDescansos: true }, mutations: { registrarCelda(state, idCelda) { @@ -47,6 +48,9 @@ const store = new Vuex.Store({ }, cambiarDatos(state, datos) { state.datos = datos; + }, + cambiarMostrarDescansos(state, dato) { + state.mostrarDescansos = !!dato } }, actions: { diff --git a/src/views/Inicio.vue b/src/views/Inicio.vue index c92429e..b522043 100644 --- a/src/views/Inicio.vue +++ b/src/views/Inicio.vue @@ -2,6 +2,11 @@ div.home h2.titulo {{ datos.titulo }} p Puedes agregar cursos de diferentes años a tu horario. + input(type="checkbox" v-model="$store.state.mostrarDescansos") + label Mostrar descansos de 10m + br + br + anio(:año="horarioUsuario" nombreAño="Mi horario") anio(v-for="(año, i) in datos.años" :key="i" :año="año" :nombreAño="i"