Agregado Mi Horario. Mejoras a los componentes internos.

public/horarios/2018_2_fps_epis.yaml

@@ -1,6 +1,22 @@
 titulo: Horarios 2018-2, Ingeniería de Sistemas.
 años:
   1er año:
+    Realidad Nacional:
+      nombre: Realidad Nacional
+      abreviado: RN
+      Teoria:
+        A:
+          Docente: "?"
+          Horas:
+            - Ma0700
+            - Ma0750
+            - Ma0850
+        B:
+          Docente: "?"
+          Horas:
+            - Lu1400
+            - Lu1450
+            - Lu1550
     Calculo 1:
       nombre: Cálculo en 1 variable
       abreviado: C1V
@@ -165,22 +181,6 @@ años:
             - Ma1450
             - Ju1400
             - Ju1450
-    Realidad Nacional:
-      nombre: Realidad Nacional
-      abreviado: RN
-      Teoria:
-        A:
-          Docente: "?"
-          Horas:
-            - Ma0700
-            - Ma0750
-            - Ma0850
-        B:
-          Docente: "?"
-          Horas:
-            - Lu1400
-            - Lu1450
-            - Lu1550
   2do año:
     Ecologia:
       nombre: Ecologia y Medio Ambiente
@@ -390,14 +390,22 @@ años:
             - Mi1740
             - Mi1830
   3er año:
-    Construccion de Software->CS: {}
+    Construccion de Software->CS:
-    Redes y Comunicacion de Datos-> RCD: {}
+      nombre: Construcción de Software
-    Tecnologia de Objetos->TO: {}
+    Redes y Comunicacion de Datos-> RCD:
+      nombre: Redes y Comunicacion de Datos
+    Tecnologia de Objetos->TO:
+      nombre: Tecnologia de Objetos
+    Sistemas Operativos:
+      nombre: Sistemas Operativos
   4to año:
-    Aspectos Formales de Verif. y Esp.->AFVE: {}
+    Aspectos Formales de Verif. y Esp.->AFVE:
-    Gestion de Proyectos de Software->GPS: {}
+      nombre: Aspectos Formales de Verif. y Esp
+    Gestion de Proyectos de Software->GPS:
+      nombre: Gestion de Proyectos de Software
   5to año:
-    Topicos Avanzados en Ing. de Software->TAIS: {}
+    Topicos Avanzados en Ing. de Software->TAIS:
+      nombre: Topicos Avanzados en Ing. de Software
     Practicas Pre-Profesionales:
       nombre: Practicas Pre-Profesionales
       abreviado: PPP

src/components/Inicio/anio.vue

@@ -3,7 +3,11 @@
         h3 {{ nombreAño }}
 
         tabla-horarios(:nombreAño="nombreAño")
-        curso(v-for="(curso, n) in año" :key="n" :curso="curso" :nombreAño="nombreAño")
+        curso(v-for="(curso, nombre) in año" :key="nombre"
+            :curso="curso"
+            :nombreAño="nombreAño"
+            :nombreCurso="nombre")
+
     //
 </template>
 

src/components/Inicio/curso.vue

@@ -1,29 +1,32 @@
 <template lang="pug">
     div.info_curso
-        h4.titulo_curso(@mouseenter="resaltarTodasCeldas" @mouseleave="quitarResaltadoCeldas")
+        h4.titulo_curso(@mouseenter="resaltarTodasCeldas" @mouseleave="quitarResaltadoCeldas"
+            title="Agregar curso a mi horario."
+            @click="agregarCursoAMiHorario"
+        )
             span.ancho {{ curso.abreviado }} >&nbsp;
             | {{ curso.nombre }}
         table.datos
             tr
-                td(v-for="(grupos, profesor) in teoria")
+                bloque(v-for="(grupos, profesor) in teoria"
-                    span.ancho |&nbsp;
+                    :grupos="grupos"
-                    | {{ profesor }}
+                    :profesor="profesor"
-                    span.ancho.cursor_click.ancho__teoria(
+                    :nombreAño="nombreAño"
-                        v-for="grupo in grupos"
+                    :abreviado="curso.abreviado"
-                        @mouseenter="resaltarCeldasGrupo(grupo, false)"
+                    :key="profesor"
-                        @mouseleave="quitarResaltadoGrupo(grupo, false)")
+                )
-                        |  {{ grupo }}&nbsp;
 
             tr
                 template(v-if="!laboratorioVacio")
-                    td(v-for="(grupos, profesor) in laboratorio")
+                    bloque(v-for="(grupos, profesor) in laboratorio"
-                        span.ancho |&nbsp;
+                        :grupos="grupos"
-                        | {{ profesor }}
+                        :profesor="profesor"
-                        span.ancho.cursor_click.ancho__lab(
+                        :esLab="true"
-                            v-for="grupo in grupos"
+                        :nombreAño="nombreAño"
-                            @mouseenter="resaltarCeldasGrupo(grupo, true)"
+                        :abreviado="curso.abreviado"
-                            @mouseleave="quitarResaltadoGrupo(grupo, true)")
+                        :key="profesor"
-                            |  L{{ grupo }}&nbsp;
+                    )
+
                 template(v-else)
                     td
                         span.ancho | _
@@ -32,10 +35,19 @@
 </template>
 
 <script lang="coffee">
-    import { resaltarCurso, removerResaltadoCurso, resaltarGrupoCurso, removerResaltadoGrupo } from "./tablaHorarios/funcionesResaltado.coffee"
+    import {
+        resaltarCurso
+        removerResaltadoCurso
+        resaltarGrupoCurso
+        removerResaltadoGrupo
+        obtenerClaseGrupoCurso
+    } from "./tablaHorarios/funcionesResaltado.coffee"
+
+    import bloque from "./curso/bloque"
 
     export default
         name: "curso"
+        components: { bloque }
         props:
             curso:
                 type: Object
@@ -43,6 +55,9 @@
             nombreAño:
                 type: String
                 required: true
+            nombreCurso:
+                type: String
+                required: true
         computed:
             teoria: ->
                 vm = this
@@ -72,6 +87,14 @@
 
                 estaVacio
         methods:
+            agregarCursoAMiHorario: ->
+                nombre = @nombreCurso
+                datos = @curso
+                @$store.commit "agregarCursoAMiHorario", { nombre, datos }
+
+            obtenerClase: (grupo, esLab) ->
+                obtenerClaseGrupoCurso @nombreAño, @curso.abreviado, grupo, esLab
+
             procesarTeoria: () ->
                 nombreAño = @nombreAño
                 cursoAbreviado = @curso.abreviado
@@ -91,14 +114,12 @@
                         idCelda = nombreStore + horaId
 
                         @$store.commit "agregarACelda", {idCelda, datos}
+
             resaltarTodasCeldas: () ->
                 resaltarCurso @nombreAño, @curso.abreviado
+
             quitarResaltadoCeldas: () ->
                 removerResaltadoCurso @nombreAño, @curso.abreviado
-            resaltarCeldasGrupo: (grupo, esLab) ->
-                resaltarGrupoCurso @nombreAño, @curso.abreviado, grupo, esLab
-            quitarResaltadoGrupo: (grupo, esLab) ->
-                removerResaltadoGrupo @nombreAño, @curso.abreviado, grupo, esLab
 
         mounted: ->
             @procesarTeoria()
@@ -110,7 +131,7 @@
 
     .titulo_curso
         display: inline-block
-        cursor: default
+        cursor: pointer
         &:hover
             text-decoration: underline
 
@@ -131,17 +152,8 @@
             family: "Fira Code", monospace
         user-select: none
 
-    .cursor_click
-        cursor: pointer
 
 
-    .ancho__teoria:hover
-        background-color: var(--colorTeoria)
-        color: white
-
-    .ancho__lab:hover
-        background-color: var(--colorLab)
-        color: white
 
 //
 </style>

src/components/Inicio/curso/bloque.vue

@@ -0,0 +1,67 @@
+<template lang="pug">
+    td
+        span.ancho |&nbsp;
+        | {{ profesor }}
+        span.ancho.cursor_click(
+            v-for="grupo in grupos"
+                :class="obtenerClase(grupo)"
+                @mouseenter="resaltarCeldasGrupo(grupo)"
+                @mouseleave="quitarResaltadoGrupo(grupo)"
+                @click="toggleActivo(grupo)"
+        )
+            |  L{{ grupo }}&nbsp;
+
+    //
+</template>
+
+<script lang="coffee">
+    import {
+        obtenerClaseGrupoCurso
+        resaltarGrupoCurso
+        removerResaltadoGrupo
+        activarGrupoCurso
+    } from "../tablaHorarios/funcionesResaltado.coffee"
+
+    export default
+        name: "bloque"
+        props:
+            grupos:
+                type: Array
+                required: true
+            profesor:
+                type: String
+                required: true
+            esLab:
+                type: Boolean
+                default: false
+            nombreAño:
+                type: String
+                required: true
+            abreviado:
+                type: String
+                required: true
+        methods:
+            obtenerClase: (grupo) ->
+                obtenerClaseGrupoCurso @nombreAño, @abreviado, grupo, @esLab
+
+            resaltarCeldasGrupo: (grupo) ->
+                resaltarGrupoCurso @nombreAño, @abreviado, grupo, @esLab
+
+            quitarResaltadoGrupo: (grupo) ->
+                removerResaltadoGrupo @nombreAño, @abreviado, grupo, @esLab
+            toggleActivo: (grupo) ->
+                activarGrupoCurso @nombreAño, @abreviado, grupo, @esLab
+
+#
+</script>
+
+<style scoped lang="sass">
+
+
+    .ancho
+        font:
+            family: "Fira Code", monospace
+        user-select: none
+
+    //
+</style>

src/components/Inicio/tablaHorarios/celda-curso.vue

@@ -56,28 +56,6 @@
 </script>
 
 <style scoped lang="sass">
-    $duracionTransicion: 100ms
-
-    .celda
-        white-space: pre
-        font-family: "Fira Code", monospace
-        cursor: pointer
-        user-select: none
-        transition: background-color $duracionTransicion linear, color $duracionTransicion linear
-
-    .celda__teoria
-        color: var(--colorTeoria)
-
-    .celda__teoria:hover, .celda__teoria--resaltado, .celda__teoria--activo
-        background-color: var(--colorTeoria)
-        color: white
-
-    .celda__lab
-        color: var(--colorLab)
-
-    .celda__lab:hover, .celda__lab--resaltado, .celda__lab--activo
-        background-color: var(--colorLab)
-        color: white
 
 //
 </style>

src/components/Inicio/tablaHorarios/funcionesResaltado.coffee

@@ -10,8 +10,7 @@ export resaltarCurso = (nombreAño, cursoAbreviado) =>
     nombreAñoF = nombreAño.substring 0, (nombreAño.indexOf " ")
     clase = "_#{ nombreAñoF }_#{ cursoAbreviado }"
 
-    ejecutarEnElementos clase, (elementos) =>
+    ejecutarEnElementos clase, (elemento) =>
-        for elemento in elementos
         nuevaClase =
             if (elemento.getAttribute "eslab") is "true"
                 "celda__lab--resaltado"
@@ -33,36 +32,40 @@ export removerResaltadoCurso = (nombreAño, cursoAbreviado) =>
         elemento.className = clasesNueva
 
 
-resaltarElemento = (elemento, esLab) =>
+resaltarElemento = (elemento, esLab, etiqueta = "resaltado") =>
-    nuevaClase = "celda__#{ if esLab then 'lab' else 'teoria' }--resaltado"
+    nuevaClase = "celda__#{ if esLab then 'lab' else 'teoria' }--#{ etiqueta }"
     elemento.className += " #{nuevaClase}"
 
 
-export resaltarGrupoCurso = (nombreAño, cursoAbreviado, grupo, esLab) =>
+
+export obtenerClaseGrupoCurso = (nombreAño, cursoAbreviado, grupo, esLab) =>
     nombreAñoF = nombreAño.substring 0, (nombreAño.indexOf " ")
-    clase = "_#{ nombreAñoF }_#{ cursoAbreviado }_#{ (if esLab then 'L' else '') + grupo }"
+    "_#{ nombreAñoF }_#{ cursoAbreviado }_#{ (if esLab then 'L' else '') + grupo }"
+
+
+
+export resaltarGrupoCurso = (nombreAño, cursoAbreviado, grupo, esLab) =>
+    clase = obtenerClaseGrupoCurso nombreAño, cursoAbreviado, grupo, esLab
 
     ejecutarEnElementos clase, (elemento) => resaltarElemento elemento, esLab
 
 
-removerResaltadoElemento = (elemento) =>
+removerResaltadoElemento = (elemento, etiqueta = "resaltado") =>
     clases = elemento.className
-    clasesNueva = clases.replace "celda__lab--resaltado", ""
+    clasesNueva = clases.replace "celda__lab--#{ etiqueta }", ""
-    clasesNueva = clasesNueva.replace "celda__teoria--resaltado", ""
+    clasesNueva = clasesNueva.replace "celda__teoria--#{ etiqueta }", ""
 
     elemento.className = clasesNueva
 
 
 export removerResaltadoGrupo = (nombreAño, cursoAbreviado, grupo, esLab) =>
-    nombreAñoF = nombreAño.substring 0, (nombreAño.indexOf " ")
+    clase = obtenerClaseGrupoCurso nombreAño, cursoAbreviado, grupo, esLab
-    clase = "_#{ nombreAñoF }_#{ cursoAbreviado }_#{ (if esLab then 'L' else '') + grupo }"
 
-    ejecutarEnElementos clase, (elemento) => removerResaltadoElemento elemento, esLab
+    ejecutarEnElementos clase, (elemento) => removerResaltadoElemento elemento
 
 
 export registrarCurso = (nombreAño, cursoAbreviado, grupo, esLab) =>
-    nombreAñoF = nombreAño.substring 0, (nombreAño.indexOf " ")
+    clase = obtenerClaseGrupoCurso nombreAño, cursoAbreviado, grupo, esLab
-    clase = "_#{ nombreAñoF }_#{ cursoAbreviado }_#{ (if esLab then 'L' else '') + grupo }"
 
     ejecutarEnElementos clase, (elemento) =>
         nuevaClase = "celda__#{ if esLab then 'lab' else 'teoria' }--activo"
@@ -71,8 +74,7 @@ export registrarCurso = (nombreAño, cursoAbreviado, grupo, esLab) =>
 
 
 export desregistrarCurso = (nombreAño, cursoAbreviado, grupo, esLab) =>
-    nombreAñoF = nombreAño.substring 0, (nombreAño.indexOf " ")
+    clase = obtenerClaseGrupoCurso nombreAño, cursoAbreviado, grupo, esLab
-    clase = "_#{ nombreAñoF }_#{ cursoAbreviado }_#{ (if esLab then 'L' else '') + grupo }"
 
     ejecutarEnElementos clase, (elemento) =>
         clases = elemento.className
@@ -84,18 +86,17 @@ export desregistrarCurso = (nombreAño, cursoAbreviado, grupo, esLab) =>
 
 
 export activarGrupoCurso = (nombreAño, cursoAbreviado, grupo, esLab) =>
-    nombreAñoF = nombreAño.substring 0, nombreAño.indexOf " "
+    clase = obtenerClaseGrupoCurso nombreAño, cursoAbreviado, grupo, esLab
-    clase = "_#{ nombreAñoF }_#{ cursoAbreviado }_#{ (if esLab then 'L' else '') + grupo }"
 
     elementos = document.getElementsByClassName clase
 
     for elemento in elementos
         estaActivo = ((elemento.getAttribute "activo") ? "no") is "si"
         if estaActivo
-            removerResaltadoElemento elemento, esLab
+            removerResaltadoElemento elemento, "activo"
             elemento.setAttribute "activo", "no"
         else
-            resaltarElemento elemento, esLab
+            resaltarElemento elemento, esLab, "activo"
             elemento.setAttribute "activo", "si"
 
 

src/sass/Global.sass

@@ -14,4 +14,38 @@ html
 h1, h2, h3
   font-family: "Product Sans", Roboto, sans-serif
 
-//
+// Varios
+
+.cursor_click
+  cursor: pointer
+
+
+// Celdas del horario
+$duracionTransicion: 100ms
+
+
+.celda
+  white-space: pre
+  font-family: "Fira Code", monospace
+  cursor: pointer
+  user-select: none
+  transition: background-color $duracionTransicion linear, color $duracionTransicion linear
+
+
+.celda__teoria
+  color: var(--colorTeoria)
+
+
+.celda__teoria:hover, .celda__teoria--resaltado, .celda__teoria--activo
+  background-color: var(--colorTeoria)
+  color: white
+
+
+.celda__lab
+  color: var(--colorLab)
+
+
+.celda__lab:hover, .celda__lab--resaltado, .celda__lab--activo
+  background-color: var(--colorLab)
+  color: white
+

src/store/index.js

@@ -5,7 +5,8 @@ Vue.use(Vuex);
 
 export default new Vuex.Store({
     state: {
-        celdas: {}
+        celdas: {},
+        horarioUsuario: {}
     },
     mutations: {
         registrarCelda(state, idCelda) {
@@ -13,6 +14,12 @@ export default new Vuex.Store({
         },
         agregarACelda(state, {idCelda, datos}) {
             state.celdas[idCelda].push(datos);
+        },
+        agregarCursoAMiHorario(state, {nombre, datos} ) {
+            if (!state.horarioUsuario[nombre]) {
+                state.horarioUsuario[nombre] = datos;
+                state.horarioUsuario = Object.assign({}, state.horarioUsuario);
+            }
         }
     },
     actions: {

src/views/Inicio.vue

@@ -1,6 +1,8 @@
 <template lang="pug">
     div.home
         h2.titulo {{ datos.titulo }}
+        p Puedes agregar cursos de diferentes años al horario.
+        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"
         )
@@ -19,6 +21,8 @@
             datos:
                 titulo: "Cargando..."
                 años: {}
+        computed:
+            horarioUsuario: -> @$store.state.horarioUsuario
         created: ->
             vm = this
             resRaw = await fetch "/horarios/2018_2_fps_epis.yaml"