Agregado selector a la barra lateral y ajustados colores

2020-02-12 17:06:55 -05:00 · 2020-02-12 17:06:55 -05:00 · e9df2f897e
commit e9df2f897e
parent ae492f6476
10 changed files with 191 additions and 26 deletions
--- a/package.json
+++ b/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": {
--- a/pnpm-lock.yaml
+++ b/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
--- a/public/horarios/2018_2_fps_ingenieriadesistemas.yaml
+++ b/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:
--- a/public/horarios/2019_2_fps_ingenieriadesistemas.yaml
+++ b/public/horarios/2019_2_fps_ingenieriadesistemas.yaml
--- a/src/App.vue
+++ b/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>
--- a/src/assets/escuelas.yaml
+++ b/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: []
--- a/src/components/App/barra-lateral.vue
+++ b/src/components/App/barra-lateral.vue
@ -7,12 +7,38 @@
            br
            br
            div.info
-                p 2019-2
-                p Facultad de Producción y Servicios
-                p Escuela Profesional de Ingeniería de Sistemas
+                p
+                    i Solo algunos horarios están implementados*
+                // 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,13 +47,28 @@

 <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
-        overflow-y: scroll
+        box-shadow: 2px 0 5px 0 rgb(122, 122, 122)
+        z-index: 1
+        margin-right: 0.5rem
+

    h1
        text-align: center
@ -66,9 +104,20 @@
        margin: 0
        padding: 15px 10px

-    .info p
-        margin: 10px 20px
-        font-family: "Product Sans", Roboto, sans-serif
+    .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>
--- a/src/components/Inicio/curso.vue
+++ b/src/components/Inicio/curso.vue
@ -175,6 +175,7 @@
        display: inline-block
        margin-right: 0.45rem
        font-size: 1rem
+        cursor: pointer


    .titulo_curso
--- a/src/store/index.js
+++ b/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: {
--- a/src/views/Inicio.vue
+++ b/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: ->
-            vm = this
-            resRaw = await fetch "/horarios/2018_2_fps_epis.yaml"
-            res = YAML.parse await resRaw.text()
-            vm.datos = res
+            datos: -> @$store.state.datos


 #