fernando
/
horarios-v2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Actualizados todos los componentes a Vue3

add-license-1
Araozu 2020-07-29 07:57:59 -05:00
parent 96e99f3292
commit cfead45f2f
5 changed files with 183 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Inicio/curso/bloque.vue
View File

@ -23,7 +23,30 @@ td
obtenerClaseCursoGeneral
} from "../tablaHorarios/funcionesResaltado.coffee"
export default
setup = (props) =>
obtenerClase = (grupo) =>
claseEspecifica = obtenerClaseGrupoCurso props.nombreAño, props.abreviado, grupo, props.esLab
claseGeneral = obtenerClaseCursoGeneral claseEspecifica
[claseEspecifica, claseGeneral]
resaltarCeldasGrupo = (grupo) =>
resaltarGrupoCurso props.nombreAño, props.abreviado, grupo, props.esLab
quitarResaltadoGrupo = (grupo) =>
removerResaltadoGrupo props.nombreAño, props.abreviado, grupo, props.esLab
toggleActivo = (grupo) =>
activarGrupoCurso props.nombreAño, props.abreviado, grupo, props.esLab
{
obtenerClase
resaltarCeldasGrupo
quitarResaltadoGrupo
toggleActivo
}
export default {
name: "bloque"
props:
grupos:
@ -41,20 +64,8 @@ td
abreviado:
type: String
required: true
methods:
obtenerClase: (grupo) ->
claseEspecifica = obtenerClaseGrupoCurso @nombreAño, @abreviado, grupo, @esLab
claseGeneral = obtenerClaseCursoGeneral claseEspecifica
[claseEspecifica, claseGeneral]
resaltarCeldasGrupo: (grupo) ->
resaltarGrupoCurso @nombreAño, @abreviado, grupo, @esLab
quitarResaltadoGrupo: (grupo) ->
removerResaltadoGrupo @nombreAño, @abreviado, grupo, @esLab
toggleActivo: (grupo) ->
activarGrupoCurso @nombreAño, @abreviado, grupo, @esLab
setup
}
#
</script>

78
src/components/Inicio/tabla-horarios.vue
View File

@ -20,47 +20,57 @@ table.tabla_horario(border="1")
</template>
<script lang="coffee">
import {ref, computed} from "vue"
import celda from "./tablaHorarios/celda.vue"
export default
setup = (props) =>
dias = ref ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"]
horas = ref [
"07:00 - 07:50"
"07:50 - 08:40"
"08:40 - 08:50"
"08:50 - 09:40"
"09:40 - 10:30"
"10:30 - 10:40"
"10:40 - 11:30"
"11:30 - 12:20"
"12:20 - 13:10"
"13:10 - 14:00"
"14:00 - 14:50"
"14:50 - 15:40"
"15:40 - 15:50"
"15:50 - 16:40"
"16:40 - 17:30"
"17:30 - 17:40"
"17:40 - 18:30"
"18:30 - 19:20"
"19:20 - 20:10"
]
horasDescanso = ref [
"08:40 - 08:50"
"10:30 - 10:40"
"15:40 - 15:50"
"17:30 - 17:40"
]
nombreStore = computed (=> "_" + props.nombreAño.substring 0, (props.nombreAño.indexOf " "))
{
dias
horas
horasDescanso
nombreStore
}
export default {
name: "tabla-horarios"
components: { celda }
data: ->
dias: ["Lunes", "Martes", "Miercoles", "Jueves", "Viernes"]
horas: [
"07:00 - 07:50"
"07:50 - 08:40"
"08:40 - 08:50"
"08:50 - 09:40"
"09:40 - 10:30"
"10:30 - 10:40"
"10:40 - 11:30"
"11:30 - 12:20"
"12:20 - 13:10"
"13:10 - 14:00"
"14:00 - 14:50"
"14:50 - 15:40"
"15:40 - 15:50"
"15:50 - 16:40"
"16:40 - 17:30"
"17:30 - 17:40"
"17:40 - 18:30"
"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"
]
components: {celda}
props:
nombreAño:
type: String
required: true
computed:
nombreStore: -> "_" + (@nombreAño.substring 0, @nombreAño.indexOf " ")
setup
}
#
</script>

93
src/components/Inicio/tablaHorarios/celda-curso.vue
View File

@ -1,15 +1,16 @@
<template lang="pug">
span.celda(:class="clases" :eslab="datos.esLab? 'true': 'false'"
span.celda(:class="clases" :eslab="esLab? 'true': 'false'"
@mouseenter="resaltarCeldasGrupo"
@mouseleave="quitarResaltadoGrupo"
@click="toggleActivo")
| &nbsp;{{ datos.cursoAbreviado }}
span &nbsp;{{ (datos.esLab? "L": "") + datos.nombreGrupo }}&nbsp;
| &nbsp;{{ cursoAbreviado }}
span &nbsp;{{ (esLab? "L": "") + nombreGrupo }}&nbsp;
//
</template>
<script lang="coffee">
import {ref, computed} from "vue"
import {
resaltarGrupoCurso
removerResaltadoGrupo
@ -17,47 +18,63 @@ span.celda(:class="clases" :eslab="datos.esLab? 'true': 'false'"
obtenerClaseGrupoCurso
} from "./funcionesResaltado.coffee"
export default
setup = (props) =>
celdaCursoActiva = ref false
clases = computed (=>
res = []
esLab = props.datos.esLab
cursoAbreviado = props.datos.cursoAbreviado
nombreGrupo = props.datos.nombreGrupo
nombreAño = props.nombreAño.substring 0, (props.nombreAño.indexOf " ")
res.push if esLab then "celda__lab" else "celda__teoria"
# _PW1
res.push "_#{ nombreAño }_#{ cursoAbreviado }"
# _PW1_LB
res.push "_#{ nombreAño }_#{ cursoAbreviado }_#{ if esLab then 'L' else '' }#{ nombreGrupo }"
res
)
cursoAbreviado = computed (=> props.datos.cursoAbreviado)
nombreGrupo = computed (=> props.datos.nombreGrupo)
esLab = computed (=> props.datos.esLab)
claseCursoGeneral = computed (=>
obtenerClaseGrupoCurso props.nombreAño, cursoAbreviado.value, nombreGrupo.value, esLab.value
)
resaltarCeldasGrupo = =>
resaltarGrupoCurso props.nombreAño, cursoAbreviado.value, nombreGrupo.value, esLab.value
quitarResaltadoGrupo = =>
removerResaltadoGrupo props.nombreAño, cursoAbreviado.value, nombreGrupo.value, esLab.value
toggleActivo = =>
activarGrupoCursoStr claseCursoGeneral.value
{
celdaCursoActiva
clases
cursoAbreviado
nombreGrupo
esLab
claseCursoGeneral
resaltarCeldasGrupo
quitarResaltadoGrupo
toggleActivo
}
export default {
name: "celda-curso"
props:
datos:
type: Object
required: yes
required: true
nombreAño:
type: String
required: yes
data: ->
celdaCursoActiva: no
computed:
clases: ->
res = []
esLab = @datos.esLab
cursoAbreviado = @datos.cursoAbreviado
nombreGrupo = @datos.nombreGrupo
nombreAño = @nombreAño.substring 0, (@nombreAño.indexOf " ")
res.push if esLab then "celda__lab" else "celda__teoria"
# _PW1
res.push "_#{ nombreAño }_#{ cursoAbreviado }"
# _PW1_LB
res.push "_#{ nombreAño }_#{ cursoAbreviado }_#{ if esLab then 'L' else '' }#{ nombreGrupo }"
res
cursoAbreviado: -> @datos.cursoAbreviado
nombreGrupo: -> @datos.nombreGrupo
esLab: -> @datos.esLab
claseCursoGeneral: ->
obtenerClaseGrupoCurso @nombreAño, @cursoAbreviado, @nombreGrupo, @esLab
methods:
resaltarCeldasGrupo: ->
resaltarGrupoCurso @nombreAño, @cursoAbreviado, @nombreGrupo, @esLab
quitarResaltadoGrupo: ->
removerResaltadoGrupo @nombreAño, @cursoAbreviado, @nombreGrupo, @esLab
toggleActivo: ->
activarGrupoCursoStr @claseCursoGeneral
required: true
setup
}
#
</script>

100
src/components/Inicio/tablaHorarios/celda.vue
View File

@ -6,64 +6,78 @@ td(:class="clases")
</template>
<script lang="coffee">
import {ref, computed, onMounted} from "vue"
import {useStore} from "vuex"
import celdaCurso from "./celda-curso.vue"
export default
name: "celda",
components: { celdaCurso }
props:
dia:
type: String
required: yes
hora:
type: String
required: yes
nombreAño:
type: String
required: yes
nombreStore:
type: String
required: yes
data: ->
datosCeldas: []
computed:
identificadoresCelda: ->
clases = []
parteDia = @dia.substring 0, 2
clases.push ("_" + parteDia)
setup = (props) =>
store = useStore()
parteHora = (@hora.substring 0, 2) + (@hora.substring 3, 5)
clases.push ("_" + parteHora)
datosCeldas = ref []
clases.push ("_" + parteDia + parteHora)
identificadoresCelda = computed (=>
clases = []
parteDia = props.dia.substring 0, 2
clases.push ("_" + parteDia)
nombreAño = @nombreAño
claseAño = nombreAño.substring 0, (nombreAño.indexOf " ")
clases.push ("_" + claseAño)
parteHora = (props.hora.substring 0, 2) + (props.hora.substring 3, 5)
clases.push ("_" + parteHora)
id = "_" + claseAño + parteDia + parteHora
clases.push id
clases.push ("_" + parteDia + parteHora)
[id, clases]
idCelda: -> @identificadoresCelda[0]
clases: -> @identificadoresCelda[1]
methods:
registrarCelda: -> @$store.commit "registrarCelda", @idCelda
recuperarDatosCeldas: -> @datosCeldas = @$store.state.celdas[@idCelda]
nombreAño = props.nombreAño
claseAño = nombreAño.substring 0, (nombreAño.indexOf " ")
clases.push ("_" + claseAño)
mounted: ->
vm = this
idCelda = @identificadoresCelda[0]
id = "_" + claseAño + parteDia + parteHora
clases.push id
[id, clases]
)
idCelda = computed (=> identificadoresCelda.value[0])
clases = computed (=> identificadoresCelda.value[1])
registrarCelda = => store.commit "registrarCelda", idCelda.value
recuperarDatosCeldas = => datosCeldas.value = store.state.celdas[idCelda.value]
onMounted (=>
promesa = new Promise (resolve) =>
intervalo = setInterval (=>
unless vm.$store.state.celdas[idCelda] is undefined
unless store.state.celdas[idCelda.value] is undefined
clearInterval intervalo
resolve()
), 250
@registrarCelda()
registrarCelda()
await promesa
@recuperarDatosCeldas()
recuperarDatosCeldas()
)
{
datosCeldas
identificadoresCelda
idCelda
clases
}
export default {
name: "celda",
components: {celdaCurso}
props:
dia:
type: String
required: true
hora:
type: String
required: true
nombreAño:
type: String
required: true
nombreStore:
type: String
required: true
setup
}
#
</script>

2
src/sass/Global.sass
View File

@ -74,4 +74,4 @@ $duracionTransicion: 100ms
@media only screen and (min-width: 1001px)
.mostrar-bajo-1000
display: none !important
display: none !important