Actualizados todos los componentes a Vue3
This commit is contained in:
Araozu
parent
96e99f3292
commit
cfead45f2f
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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")
|
||||
| {{ datos.cursoAbreviado }}
|
||||
span {{ (datos.esLab? "L": "") + datos.nombreGrupo }}
|
||||
| {{ cursoAbreviado }}
|
||||
span {{ (esLab? "L": "") + nombreGrupo }}
|
||||
|
||||
//
|
||||
</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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user