Actualizado proyecto a Vue3

package.json

@@ -12,7 +12,7 @@
     "coffee-loader": "^1.0.0",
     "coffeescript": "^2.5.1",
     "json-loader": "^0.5.7",
-    "normalize.css": "^8.0.1",
+    "normalize-css": "^2.3.1",
     "pug": "2.0.4",
     "pug-plain-loader": "^1.0.0",
     "vue": "^3.0.0-rc.4",

pnpm-lock.yaml

@@ -3,7 +3,7 @@ dependencies:
   coffee-loader: 1.0.0_f473fea5d69d100879c6b4e11cc445d4
   coffeescript: 2.5.1
   json-loader: 0.5.7
-  normalize.css: 8.0.1
+  normalize-css: 2.3.1
   pug: 2.0.4
   pug-plain-loader: 1.0.0_pug@2.0.4
   vue: 3.0.0-rc.4
@@ -4027,6 +4027,10 @@ packages:
   /inherits/2.0.4:
     resolution:
       integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+  /insert-css/0.0.0:
+    dev: false
+    resolution:
+      integrity: sha1-IwS/pviTq+y4/5yo2cdgXZTPKRE=
   /internal-ip/4.3.0:
     dependencies:
       default-gateway: 4.2.0
@@ -5052,6 +5056,12 @@ packages:
   /node-releases/1.1.60:
     resolution:
       integrity: sha512-gsO4vjEdQaTusZAEebUWp2a5d7dF5DYoIpDG7WySnk7BuZDW+GPpHXoXXuYawRBr/9t5q54tirPz79kFIWg4dA==
+  /normalize-css/2.3.1:
+    dependencies:
+      insert-css: 0.0.0
+    dev: false
+    resolution:
+      integrity: sha1-/APjuR46Uap6GDa657K2rG1R4VY=
   /normalize-package-data/2.5.0:
     dependencies:
       hosted-git-info: 2.8.8
@@ -5096,10 +5106,6 @@ packages:
       node: '>=6'
     resolution:
       integrity: sha512-U+JJi7duF1o+u2pynbp2zXDW2/PADgC30f0GsHZtRh+HOcXHnw137TrNlyxxRvWW5fjKd3bcLHPxofWuCjaeZg==
-  /normalize.css/8.0.1:
-    dev: false
-    resolution:
-      integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
   /npm-run-path/2.0.2:
     dependencies:
       path-key: 2.0.1
@@ -7999,7 +8005,7 @@ specifiers:
   coffee-loader: ^1.0.0
   coffeescript: ^2.5.1
   json-loader: ^0.5.7
-  normalize.css: ^8.0.1
+  normalize-css: ^2.3.1
   pug: 2.0.4
   pug-plain-loader: ^1.0.0
   sass: ^1.26.5

src/App.vue

@@ -43,7 +43,7 @@ div.contenedor(:style="anchoBarraLateral")
         cambiarEstadoBarraLateral = => barraLateralOculta.value = !barraLateralOculta.value
 
         setTimeout (=>
-            resRaw = await fetch "/horarios/#{año}_#{periodo}_#{facultad}_#{escuela}.yaml"
+            resRaw = await fetch "/horarios/#{año.value}_#{periodo.value}_#{facultad.value}_#{escuela.value}.yaml"
             res = YAML.parse await resRaw.text()
             store.commit "cambiarDatos", res
         ), 0

src/components/App/barra-lateral.vue

@@ -109,7 +109,6 @@ div.lateral
         }
 
     export default {
-        name: "barra-lateral"
         components: {vCheckBox}
         props:
             barraOculta:

src/components/Inicio/anio.vue

@@ -30,6 +30,7 @@ div
 
         {
             abierto
+            reiniciarTablaVue
         }
 
     export default {

src/components/Inicio/curso.vue

@@ -4,7 +4,7 @@ div.info_curso(:style="estiloCurso")
 
     )
         // input.marcador_curso(type="checkbox" v-model="cursoAgregado")
-        span.ancho {{ curso.abreviado }} > 
+        span.ancho | {{ curso.abreviado }} > 
         | {{ curso.nombre }}
     table.datos
         tr
@@ -40,6 +40,8 @@ div.info_curso(:style="estiloCurso")
 </template>
 
 <script lang="coffee">
+    import {computed, onMounted, onUnmounted} from "vue"
+    import {useStore} from "vuex"
     import {
         resaltarCurso
         removerResaltadoCurso
@@ -47,10 +49,141 @@ div.info_curso(:style="estiloCurso")
         removerResaltadoGrupo
         obtenerClaseGrupoCurso
     } from "./tablaHorarios/funcionesResaltado.coffee"
-
     import bloque from "./curso/bloque"
 
-    export default
+    setup = (props) =>
+        store = useStore()
+
+        esMiHorario = computed (=> props.nombreAño is "Mi horario")
+        teoria = computed (=>
+            profesores = {}
+            for n, grupo of props.curso.Teoria
+                docente = grupo.Docente
+                unless profesores[docente]?
+                    profesores[docente] = []
+                profesores[docente].push(n)
+            profesores
+        )
+        laboratorio = computed (=>
+            profesores = {}
+            for n, grupo of props.curso.Laboratorio
+                docente = grupo.Docente
+                unless profesores[docente]?
+                    profesores[docente] = []
+                profesores[docente].push(n)
+            profesores
+        )
+        laboratorioVacio = computed (=>
+            labs = laboratorio.value
+            estaVacio = yes
+
+            for i of labs
+                estaVacio = no
+                break
+
+            estaVacio
+        )
+        nombreAñoMin = computed (=>
+            nombreAño = props.nombreAño
+            nombreAño.substring 0, nombreAño.indexOf " "
+        )
+        idCurso = computed (=>
+            if nombreAñoMin.value is "Mi"
+                props.nombreCurso
+            else
+                "_" + nombreAñoMin.value + props.curso.abreviado
+        )
+        cursoAgregado = computed(=>
+            cursosUsuario = store.state.horarioUsuario
+
+            for idCurso, _ of cursosUsuario
+                if idCurso is idCurso.value then return true
+
+            false
+        )
+        estiloCurso = computed(=>
+            if cursoAgregado.value then { backgroundColor: "var(--colorHover)" }
+            else {}
+        )
+
+        agregarCursoAMiHorario = =>
+            if cursoAgregado.value
+                store.commit "removerCursoMiHorario", idCurso.value
+            else
+                store.commit "agregarCursoAMiHorario", {
+                    nombre: idCurso.value
+                    datos: curso.value
+                }
+
+        obtenerClase = (grupo, esLab) =>
+            obtenerClaseGrupoCurso props.nombreAño, props.curso.abreviado, grupo, esLab
+
+        procesarTeoria = =>
+            cursoAbreviado = props.curso.abreviado
+            curso = props.curso
+            nombreStore = "_" + nombreAñoMin.value
+
+            for nombreGrupo, { Horas } of curso.Teoria
+                for horaId in Horas
+                    datos = { cursoAbreviado, nombreGrupo, esLab: false }
+                    idCelda = nombreStore + horaId
+
+                    store.commit "agregarACelda", {idCelda, datos}
+
+            for nombreGrupo, { Horas } of curso.Laboratorio
+                for horaId in Horas
+                    datos = { cursoAbreviado, nombreGrupo, esLab: true }
+                    idCelda = nombreStore + horaId
+
+                    store.commit "agregarACelda", {idCelda, datos}
+
+        desprocesarTeoria = =>
+            cursoAbreviado = props.curso.abreviado
+            curso = props.curso
+            nombreStore = "_" + nombreAñoMin.value
+
+            for nombreGrupo, { Horas } of curso.Teoria
+                for horaId in Horas
+                    datos = { cursoAbreviado, nombreGrupo, esLab: no }
+                    idCelda = nombreStore + horaId
+
+                    store.commit "quitarDeCelda", idCelda
+
+            for nombreGrupo, { Horas } of curso.Laboratorio
+                for horaId in Horas
+                    datos = { cursoAbreviado, nombreGrupo, esLab: yes }
+                    idCelda = nombreStore + horaId
+
+                    store.commit "quitarDeCelda", idCelda
+
+        resaltarTodasCeldas = =>
+            resaltarCurso props.nombreAño, props.curso.abreviado
+
+        quitarResaltadoCeldas = =>
+            removerResaltadoCurso props.nombreAño, props.curso.abreviado
+
+        onMounted procesarTeoria
+
+        onUnmounted desprocesarTeoria
+
+        {
+            esMiHorario
+            teoria
+            laboratorio
+            laboratorioVacio
+            nombreAñoMin
+            idCurso
+            cursoAgregado
+            estiloCurso
+            agregarCursoAMiHorario
+            obtenerClase
+            procesarTeoria
+            desprocesarTeoria
+            resaltarTodasCeldas
+            quitarResaltadoCeldas
+        }
+
+    export default {
         name: "curso"
         components: {bloque}
         props:
@@ -63,115 +196,8 @@ div.info_curso(:style="estiloCurso")
             nombreCurso:
                 type: String
                 required: true
-        computed:
+        setup
-            esMiHorario: -> @nombreAño is "Mi horario"
+    }
-            teoria: ->
-                vm = this
-                profesores = {}
-                for n, grupo of vm.curso.Teoria
-                    docente = grupo.Docente
-                    unless profesores[docente]?
-                        profesores[docente] = []
-                    profesores[docente].push(n)
-                profesores
-            laboratorio: ->
-                vm = this
-                profesores = {}
-                for n, grupo of vm.curso.Laboratorio
-                    docente = grupo.Docente
-                    unless profesores[docente]?
-                        profesores[docente] = []
-                    profesores[docente].push(n)
-                profesores
-            laboratorioVacio: ->
-                labs = this.laboratorio
-                estaVacio = yes
-
-                for i of labs
-                    estaVacio = no
-                    break
-
-                estaVacio
-            nombreAñoMin: ->
-                nombreAño = @nombreAño
-                nombreAño.substring 0, nombreAño.indexOf " "
-            idCurso: ->
-                if @nombreAñoMin is "Mi"
-                    @nombreCurso
-                else
-                    "_" + @nombreAñoMin + @curso.abreviado
-            cursoAgregado: ->
-                cursosUsuario = @$store.state.horarioUsuario
-
-                for idCurso, _ of cursosUsuario
-                    if idCurso is @idCurso then return true
-
-                false
-            estiloCurso: ->
-                if @cursoAgregado then { backgroundColor: "var(--colorHover)" }
-                else {}
-        methods:
-            agregarCursoAMiHorario: ->
-                if @cursoAgregado
-                    @$store.commit "removerCursoMiHorario", @idCurso
-                else
-                    idCurso = @idCurso
-                    nombre = @nombreCurso
-                    datos = @curso
-                    @$store.commit "agregarCursoAMiHorario", { nombre: idCurso, datos: datos }
-
-            obtenerClase: (grupo, esLab) ->
-                obtenerClaseGrupoCurso @nombreAño, @curso.abreviado, grupo, esLab
-
-            procesarTeoria: () ->
-                cursoAbreviado = @curso.abreviado
-                curso = @curso
-                nombreStore = "_" + @nombreAñoMin
-
-                for nombreGrupo, { Horas } of curso.Teoria
-                    for horaId in Horas
-                        datos = { cursoAbreviado, nombreGrupo, esLab: no }
-                        idCelda = nombreStore + horaId
-
-                        @$store.commit "agregarACelda", {idCelda, datos}
-
-                for nombreGrupo, { Horas } of curso.Laboratorio
-                    for horaId in Horas
-                        datos = { cursoAbreviado, nombreGrupo, esLab: yes }
-                        idCelda = nombreStore + horaId
-
-                        @$store.commit "agregarACelda", {idCelda, datos}
-
-            desprocesarTeoria: () ->
-                cursoAbreviado = @curso.abreviado
-                curso = @curso
-                nombreStore = "_" + @nombreAñoMin
-
-                for nombreGrupo, { Horas } of curso.Teoria
-                    for horaId in Horas
-                        datos = { cursoAbreviado, nombreGrupo, esLab: no }
-                        idCelda = nombreStore + horaId
-
-                        @$store.commit "quitarDeCelda", idCelda
-
-                for nombreGrupo, { Horas } of curso.Laboratorio
-                    for horaId in Horas
-                        datos = { cursoAbreviado, nombreGrupo, esLab: yes }
-                        idCelda = nombreStore + horaId
-
-                        @$store.commit "quitarDeCelda", idCelda
-
-            resaltarTodasCeldas: () ->
-                resaltarCurso @nombreAño, @curso.abreviado
-
-            quitarResaltadoCeldas: () ->
-                removerResaltadoCurso @nombreAño, @curso.abreviado
-
-        mounted: ->
-            @procesarTeoria()
-
-        beforeDestroy: ->
-            @desprocesarTeoria()
 
 #
 </script>
@@ -223,11 +249,8 @@ div.info_curso(:style="estiloCurso")
 
     .ancho
         font:
-            family: "Fira Code", monospace
+            family: "JetBrains Mono", monospace
         user-select: none
 
-
-
-
 //
 </style>

src/components/Inicio/curso/bloque.vue

@@ -9,7 +9,7 @@ td
             @mouseleave="quitarResaltadoGrupo(grupo)"
             @click="toggleActivo(grupo)"
     )
-        |  {{ esLab? 'L': 'T' }}{{ grupo }} 
+        |  {{ esLab? 'L': 'T' }}{{ grupo }} 
 
 //
 </template>
@@ -61,10 +61,9 @@ td
 
 <style scoped lang="sass">
 
-
     .ancho
         font:
-            family: "Fira Code", monospace
+            family: "JetBrains Mono", monospace
         user-select: none
 
     //

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

@@ -3,8 +3,8 @@ span.celda(:class="clases" :eslab="datos.esLab? 'true': 'false'"
     @mouseenter="resaltarCeldasGrupo"
     @mouseleave="quitarResaltadoGrupo"
     @click="toggleActivo")
-    |  {{ datos.cursoAbreviado }}
+    |  {{ datos.cursoAbreviado }}
-    span  {{ (datos.esLab? "L": "") + datos.nombreGrupo }} 
+    span  {{ (datos.esLab? "L": "") + datos.nombreGrupo }} 
 
 //
 </template>

src/components/v-checkbox.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 label.container {{ txt }}
-    input(type="checkbox" :checked="checked" @input="$emit('change', $event.target.checked)")
+    input(type="checkbox" :checked="modelValue" @input="$emit('update:modelValue', $event.target.checked)")
     span.checkmark
 
 //
@@ -10,9 +10,6 @@ label.container {{ txt }}
 
     export default
         name: "v-checkbox"
-        model:
-            prop: "checked"
-            event: "change"
         props:
             txt:
                 type: String
@@ -20,6 +17,9 @@ label.container {{ txt }}
             checked:
                 type: Boolean
                 required: true
+            modelValue:
+                type: Boolean
+                required: true
 
 #
 </script>

src/main.js

@@ -2,7 +2,7 @@ import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
 import store from './store';
-import "normalize.css";
+import "normalize-css";
 import "./sass/Global.sass";
 import "./sass/colores.sass";
 

src/views/Inicio.vue

@@ -42,7 +42,6 @@ div.home
         }
 
     export default {
-        name: 'home'
         components: {anio, vCheckBox}
         setup
     }

vue.config.js

@@ -12,7 +12,7 @@ module.exports = {
         },
         plugins: [
             new webpack.DefinePlugin({
-                __VUE_OPTIONS_API__: false,
+                __VUE_OPTIONS_API__: true,
                 __VUE_PROD_DEVTOOLS__: true
             })
         ],
@@ -21,11 +21,5 @@ module.exports = {
             disableHostCheck: true
         }
     },
-    productionSourceMap: false,
+    productionSourceMap: false
-    pwa: {
-        workboxPluginMode: "InjectManifest",
-        workboxOptions: {
-            swSrc: __dirname + "/public/service-worker.js"
-        }
-    }
 };