Agregado Mi Horario. Mejoras a los componentes internos.

2020-01-23 18:24:13 -05:00 · 2020-01-23 18:24:13 -05:00 · 8d581d22a5
parent d5043c9b2e
commit 8d581d22a5
9 changed files with 220 additions and 105 deletions
--- a/public/horarios/2018_2_fps_epis.yaml
+++ b/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: {}
-    Redes y Comunicacion de Datos-> RCD: {}
-    Tecnologia de Objetos->TO: {}
+    Construccion de Software->CS:
+      nombre: Construcción de Software
+    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: {}
-    Gestion de Proyectos de Software->GPS: {}
+    Aspectos Formales de Verif. y Esp.->AFVE:
+      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
--- a/src/components/Inicio/anio.vue
+++ b/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>

--- a/src/components/Inicio/curso.vue
+++ b/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")
-                    span.ancho |&nbsp;
-                    | {{ profesor }}
-                    span.ancho.cursor_click.ancho__teoria(
-                        v-for="grupo in grupos"
-                        @mouseenter="resaltarCeldasGrupo(grupo, false)"
-                        @mouseleave="quitarResaltadoGrupo(grupo, false)")
-                        |  {{ grupo }}&nbsp;
+                bloque(v-for="(grupos, profesor) in teoria"
+                    :grupos="grupos"
+                    :profesor="profesor"
+                    :nombreAño="nombreAño"
+                    :abreviado="curso.abreviado"
+                    :key="profesor"
+                )

            tr
                template(v-if="!laboratorioVacio")
-                    td(v-for="(grupos, profesor) in laboratorio")
-                        span.ancho |&nbsp;
-                        | {{ profesor }}
-                        span.ancho.cursor_click.ancho__lab(
-                            v-for="grupo in grupos"
-                            @mouseenter="resaltarCeldasGrupo(grupo, true)"
-                            @mouseleave="quitarResaltadoGrupo(grupo, true)")
-                            |  L{{ grupo }}&nbsp;
+                    bloque(v-for="(grupos, profesor) in laboratorio"
+                        :grupos="grupos"
+                        :profesor="profesor"
+                        :esLab="true"
+                        :nombreAño="nombreAño"
+                        :abreviado="curso.abreviado"
+                        :key="profesor"
+                    )
+
                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>
--- a/src/components/Inicio/curso/bloque.vue
+++ b/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>
--- a/src/components/Inicio/tablaHorarios/celda-curso.vue
+++ b/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>
--- a/src/components/Inicio/tablaHorarios/funcionesResaltado.coffee
+++ b/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) =>
-        for elemento in elementos
+    ejecutarEnElementos clase, (elemento) =>
        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) =>
-    nuevaClase = "celda__#{ if esLab then 'lab' else 'teoria' }--resaltado"
+resaltarElemento = (elemento, esLab, etiqueta = "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 = clasesNueva.replace "celda__teoria--resaltado", ""
+    clasesNueva = clases.replace "celda__lab--#{ etiqueta }", ""
+    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 = "_#{ nombreAñoF }_#{ cursoAbreviado }_#{ (if esLab then 'L' else '') + grupo }"
+    clase = obtenerClaseGrupoCurso nombreAño, cursoAbreviado, grupo, esLab

-    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 = "_#{ nombreAñoF }_#{ cursoAbreviado }_#{ (if esLab then 'L' else '') + grupo }"
+    clase = obtenerClaseGrupoCurso nombreAño, cursoAbreviado, grupo, esLab

    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 = "_#{ nombreAñoF }_#{ cursoAbreviado }_#{ (if esLab then 'L' else '') + grupo }"
+    clase = obtenerClaseGrupoCurso nombreAño, cursoAbreviado, grupo, esLab

    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 = "_#{ nombreAñoF }_#{ cursoAbreviado }_#{ (if esLab then 'L' else '') + grupo }"
+    clase = obtenerClaseGrupoCurso nombreAño, cursoAbreviado, grupo, esLab

    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"


--- a/src/sass/Global.sass
+++ b/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
+
--- a/src/store/index.js
+++ b/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: {
--- a/src/views/Inicio.vue
+++ b/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"