Agregado selector a la barra lateral y ajustados colores

package.json

@@ -21,12 +21,14 @@
     "@vue/cli-service": "^4.0.0",
     "coffee-loader": "^0.9.0",
     "coffeescript": "^2.4.1",
+    "json-loader": "^0.5.7",
     "normalize-css": "^2.3.1",
     "pug": "^2.0.4",
     "pug-plain-loader": "^1.0.0",
     "sass": "^1.19.0",
     "sass-loader": "^8.0.0",
-    "vue-template-compiler": "^2.6.10"
+    "vue-template-compiler": "^2.6.10",
+    "yaml-loader": "^0.5.0"
   },
   "postcss": {
     "plugins": {

pnpm-lock.yaml

@@ -11,12 +11,14 @@ devDependencies:
   '@vue/cli-service': 4.1.2_28580ff7334bcd27bcc752e8eab6a4b3
   coffee-loader: 0.9.0_coffeescript@2.5.0
   coffeescript: 2.5.0
+  json-loader: 0.5.7
   normalize-css: 2.3.1
   pug: 2.0.4
   pug-plain-loader: 1.0.0_pug@2.0.4
   sass: 1.25.0
   sass-loader: 8.0.2_sass@1.25.0
   vue-template-compiler: 2.6.11
+  yaml-loader: 0.5.0
 lockfileVersion: 5.1
 packages:
   /@babel/code-frame/7.8.3:
@@ -4762,6 +4764,10 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+  /json-loader/0.5.7:
+    dev: true
+    resolution:
+      integrity: sha512-QLPs8Dj7lnf3e3QYS1zkCo+4ZwqOiF9d/nZnYozTISxXWCfNs9yuky5rJw4/W34s7POaNlbZmQGaB5NiXCbP4w==
   /json-parse-better-errors/1.0.2:
     dev: true
     resolution:
@@ -8627,6 +8633,12 @@ packages:
     dev: true
     resolution:
       integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
+  /yaml-loader/0.5.0:
+    dependencies:
+      js-yaml: 3.13.1
+    dev: true
+    resolution:
+      integrity: sha512-p9QIzcFSNm4mCw/m5NdyMfN4RE4aFZJWRRb01ERVNGCym8VNbKtw3OYZXnvUIkim6U/EjqE/2yIh9F/msShH9A==
   /yaml/1.7.2:
     dependencies:
       '@babel/runtime': 7.8.3
@@ -8700,6 +8712,7 @@ specifiers:
   coffee-loader: ^0.9.0
   coffeescript: ^2.4.1
   core-js: ^3.3.2
+  json-loader: ^0.5.7
   normalize-css: ^2.3.1
   pug: ^2.0.4
   pug-plain-loader: ^1.0.0
@@ -8711,3 +8724,4 @@ specifiers:
   vue-template-compiler: ^2.6.10
   vuex: ^3.0.1
   yaml: ^1.7.2
+  yaml-loader: ^0.5.0

public/horarios/2018_2_fps_ingenieriadesistemas.yaml

@@ -1,4 +1,12 @@
 titulo: Horarios 2018-2, Ingeniería de Sistemas.
+año: 2018
+periodo: 2
+facultad:
+  id: fps
+  nombre: Facultad de Producción y Servicios
+escuela:
+  id: epis
+  nombre: Escuela Profesional de Ingeniería de Sistemas
 años:
   1er año:
     Realidad Nacional:

src/App.vue

@@ -20,6 +20,7 @@
 
 <script lang="coffee">
     import barraLateral from "./components/App/barra-lateral.vue"
+    import YAML from "yaml"
 
     export default
         name: "App"
@@ -27,6 +28,15 @@
         computed:
             alto: -> @$store.state.altoPantalla
             ancho: -> @$store.state.anchoPantalla
+            año: -> @$store.state.año
+            periodo: -> @$store.state.periodo
+            facultad: -> @$store.state.facultad
+            escuela: -> @$store.state.escuela
+        created: ->
+            vm = this
+            resRaw = await fetch "/horarios/#{@año}_#{@periodo}_#{@facultad}_#{@escuela}.yaml"
+            res = YAML.parse await resRaw.text()
+            @$store.commit "cambiarDatos", res
 
 #
 </script>

src/assets/escuelas.yaml

@@ -0,0 +1,78 @@
+Ingenierías:
+  fip:
+    nombre: Facultad de Ingeniería de Procesos
+    escuelas:
+      ingquimica:
+        nombre: Ingeniería Química
+      ingambiental:
+        nombre: Ingeniería Ambiental
+      ingmateriales:
+        nombre: Ingeniería de Materiales
+      ingmetalurgica:
+        nombre: Ingeniería Metalúrgica
+      ingalimentarias:
+        nombre: Ing. de Industrias Alimentarias
+  fips:
+    nombre: Facultad de Ingeniería de Producción y Servicios
+    escuelas:
+      ingenieriadesistemas:
+        nombre: Ingeniería de Sistemas
+      ingenierialectrica:
+        nombre: Ingeniería Eléctrica
+      ingenieriaelectronica:
+        nombre: Ingeniería Electrónica
+      ingenieriamecanica:
+        nombre: Ingeniería Mecánica
+      ingenieriaindustrial:
+        nombre: Ingeniería Industrial
+      cienciadelacomputacion:
+        nombre: Ciencias de la Computacion
+      telecomunicaciones:
+        nombre: Ing. de Telecomunicaciones
+  fggm:
+    nombre: Facultad de Geología, Geofísica y Minas
+    escuelas:
+      inggeofisica:
+        nombre: Ingeniería Geofísica
+      inggeologica:
+        nombre: Ingeniería Geológica
+      ingminas:
+        nombre: Ingeniería de Minas
+  fic:
+    nombre: Facultad de Ingeniería Civil
+    escuelas:
+      ingcivil:
+        nombre: Ingeniería Civil
+      ingsanitaria:
+        nombre: Ingeniería Sanitaria
+  fcnf:
+    nombre: Facultad de Ciencias Naturales y Formales
+    escuelas:
+      fisica:
+        nombre: Física
+      matematica:
+        nombre: Matemáticas
+      quimica:
+        nombre: Química
+  fau:
+    nombre: Facultad de Arquitectura y Urbanismo
+    escuelas: []
+Biomédicas:
+  fcb:
+    nombre: Facultad de Ciencias Biológicas
+    escuelas:
+      biologia:
+        nombre: Biología
+      nutricion:
+        nombre: Ciencias de la Nutrición
+      pesquera:
+        nombre: Ingeniería Pesquera
+  fmd:
+    nombre: Facultad de Medicina
+    escuelas: []
+  fen:
+    nombre: Facultad de Enfermería
+    escuelas: []
+  fagr:
+    nombre: Facultad de Agronomía
+    escuelas: []

src/components/App/barra-lateral.vue

@@ -7,12 +7,38 @@
             br
             br
             div.info
-                p 2019-2
+                p
-                p Facultad de Producción y Servicios
+                    i Solo algunos horarios están implementados*
-                p Escuela Profesional de Ingeniería de Sistemas
+                // p {{ año }}-{{ periodo }}
+                div
+                    select(v-model.number="añoSeleccionado")
+                        option 2018
+                        option 2019
+                        option 2020
+                    select(v-model.number="periodoSeleccionado")
+                        option 1
+                        option 2
+
+                // p {{ datos.facultad? datos.facultad.nombre: facultad }}
+                div
+                    select(v-model="areaSeleccionada")
+                        option(v-for="(_, nombre) in escuelas") {{ nombre }}
+
+                div
+                    select(v-model="facultadSeleccionada")
+                        option(v-for="(facultad, nombre) in escuelas[areaSeleccionada]" :value="nombre") {{ facultad.nombre }}
+
+                div(v-if="escuelas[areaSeleccionada][facultadSeleccionada]")
+                    select(v-model="escuelaSeleccionada")
+                        option(v-for="(escuela, nombre) in escuelas[areaSeleccionada][facultadSeleccionada].escuelas" :value="nombre")
+                            | {{ escuela.nombre }}
+
+                div
+                    a(:href="urlEscuela" target="_blank") Página de la escuela
+                // p {{ datos.escuela? datos.escuela.nombre: escuela }}
             br
             br
-            modo-color
+            // modo-color
             h2 Inicio
             h2 Otros
 
@@ -21,12 +47,27 @@
 
 <script lang="coffee">
     import modoColor from "./modo-color.vue"
+    escuelas = require "json-loader!yaml-loader!../../assets/escuelas.yaml"
 
     export default
         name: "barra-lateral"
         components: { modoColor }
+        data: ->
+            escuelas: escuelas
+            añoSeleccionado: 2018
+            periodoSeleccionado: 2
+            areaSeleccionada: "Ingenierías"
+            facultadSeleccionada: "fips"
+            escuelaSeleccionada: "ingenieriadesistemas"
         computed:
             alto: -> @$store.state.altoPantalla
+            año: -> @$store.state.año
+            periodo: -> @$store.state.periodo
+            facultad: -> @$store.state.facultad
+            escuela: -> @$store.state.escuela
+            datos: -> @$store.state.datos
+            urlEscuela: ->
+                "http://" + @facultadSeleccionada + ".unsa.edu.pe/" + @escuelaSeleccionada + "/"
 
 #
 </script>
@@ -46,18 +87,15 @@
             vertical-align: middle
 
 
-    .barra
-        position: absolute
-        right: 2rem
-
-
 
     .lateral
         display: block
         position: relative
         top: 0
-        box-shadow: 2px 0 10px 0 lightgray
+        box-shadow: 2px 0 5px 0 rgb(122, 122, 122)
-        overflow-y: scroll
+        z-index: 1
+        margin-right: 0.5rem
+
 
     h1
         text-align: center
@@ -66,9 +104,20 @@
         margin: 0
         padding: 15px 10px
 
-    .info p
+    .info
+        p, div
             margin: 10px 20px
             font-family: "Product Sans", Roboto, sans-serif
 
+
+
+    @media only screen and (max-width: 1000px)
+        .barra
+            position: absolute
+            right: 2rem
+
+        .lateral
+            overflow-y: scroll
+
 //
 </style>

src/components/Inicio/curso.vue

@@ -175,6 +175,7 @@
         display: inline-block
         margin-right: 0.45rem
         font-size: 1rem
+        cursor: pointer
 
 
     .titulo_curso

src/store/index.js

@@ -8,7 +8,15 @@ const store = new Vuex.Store({
         celdas: {},
         horarioUsuario: {},
         anchoPantalla: window.innerWidth,
-        altoPantalla: window.innerHeight
+        altoPantalla: window.innerHeight,
+        año: 2018,
+        periodo: 2,
+        facultad: "fps",
+        escuela: "ingenieriadesistemas",
+        datos: {
+            titulo: "Cargando...",
+            años: {}
+        }
     },
     mutations: {
         registrarCelda(state, idCelda) {
@@ -36,6 +44,9 @@ const store = new Vuex.Store({
                 state.anchoPantalla = window.innerWidth;
                 state.altoPantalla  = window.innerHeight
             });
+        },
+        cambiarDatos(state, datos) {
+            state.datos = datos;
         }
     },
     actions: {

src/views/Inicio.vue

@@ -17,17 +17,9 @@
     export default
         name: 'home'
         components: { anio }
-        data: ->
-            datos:
-                titulo: "Cargando..."
-                años: {}
         computed:
             horarioUsuario: -> @$store.state.horarioUsuario
-        created: ->
+            datos: -> @$store.state.datos
-            vm = this
-            resRaw = await fetch "/horarios/2018_2_fps_epis.yaml"
-            res = YAML.parse await resRaw.text()
-            vm.datos = res
 
 
 #