Agregada opcion para mostrar/ocultar los descansos de 10m

src/components/Inicio/tabla-horarios.vue

@@ -5,7 +5,8 @@
                 td Hora
                 td(v-for="dia in dias") {{ dia }}
         tbody
-            tr(v-for="hora in horas")
+            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) }}
@@ -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

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: {

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"