diff --git a/package-lock.json b/package-lock.json index 07342c6..684eb6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1517,7 +1517,8 @@ }, "ansi-regex": { "version": "4.1.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", "dev": true }, "cliui": { @@ -1741,22 +1742,23 @@ "integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==" }, "@ionic/angular": { - "version": "6.0.8", - "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-6.0.8.tgz", - "integrity": "sha512-sPXQ17SCym0Skx1vbFmhHyPCNH5NoKIyuHee8ROZcTvNizavJYajoU+YTcr6v3w37CecsTz/JgpCXbAUHxxrcQ==", + "version": "6.7.5", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-6.7.5.tgz", + "integrity": "sha512-nV8HP7RedjYkIAT8nVr5ifHNT0D3XzA74RPG3/WCCFJKunERNJ9SBiNkCTWhUpSkqsYYwEB4+SOOHz+R5NLk/w==", "requires": { - "@ionic/core": "^6.0.8", + "@ionic/core": "6.7.5", + "ionicons": "^6.1.3", "jsonc-parser": "^3.0.0", "tslib": "^2.0.0" } }, "@ionic/core": { - "version": "6.0.8", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.0.8.tgz", - "integrity": "sha512-sfkms6Rj8MPuZOo+bdjL75ewTmr8oKsMepFL3MM7Nfu+GfNsAuauf1fRYwoD34f0jVgfUnJvhvT3V3NVVTQwHQ==", + "version": "6.7.5", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-6.7.5.tgz", + "integrity": "sha512-zRkRn+h/Vs3xt/EVgBdShMKDyeGOM4RU31NPF2icfu3CUTH+VrMV569MUnNjYvd1Lu2xK90pYy4TaicSWmC1Pw==", "requires": { - "@stencil/core": "~2.13.0", - "ionicons": "^6.0.0", + "@stencil/core": "^2.18.0", + "ionicons": "^6.1.3", "tslib": "^2.1.0" } }, @@ -2041,9 +2043,9 @@ "dev": true }, "@stencil/core": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.13.0.tgz", - "integrity": "sha512-EEKHOHgYpg3/iFUKMXTZJjUayRul7sXDwNw0OGgkEOe4t7JWiibDkzUHuruvpbqEydX+z1+ez5K2bMMY76c2wA==" + "version": "2.22.3", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.22.3.tgz", + "integrity": "sha512-kmVA0M/HojwsfkeHsifvHVIYe4l5tin7J5+DLgtl8h6WWfiMClND5K3ifCXXI2ETDNKiEk21p6jql3Fx9o2rng==" }, "@tootallnate/once": { "version": "1.1.2", @@ -8311,18 +8313,11 @@ "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" }, "ionicons": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.0.1.tgz", - "integrity": "sha512-xQekOJsxH82O7oB+3F60zeRggCdND9pJ/k0E6IJDVUGGlCj5mlyFqNgxUimytKgstPGv3S+3EmCxjefvtGgWUg==", + "version": "6.1.3", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-6.1.3.tgz", + "integrity": "sha512-ptzz38dd/Yq+PgjhXegh7yhb/SLIk1bvL9vQDtLv1aoSc7alO6mX2DIMgcKYzt9vrNWkRu1f9Jr78zIFFyOXqw==", "requires": { - "@stencil/core": "~2.12.0" - }, - "dependencies": { - "@stencil/core": { - "version": "2.12.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.12.1.tgz", - "integrity": "sha512-u24TZ+FEvjnZt5ZgIkLjLpUNsO6Ml3mUZqwmqk81w6RWWz75hgB5p4RFI5rvuErFeh2xvMIGo+pNdG24XUBz1A==" - } + "@stencil/core": "^2.18.0" } }, "ip": { @@ -13676,7 +13671,8 @@ }, "ansi-regex": { "version": "4.1.0", - "resolved": "", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", "dev": true }, "emoji-regex": { diff --git a/package.json b/package.json index 81827da..db48672 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@angular/platform-browser-dynamic": "^13.2.2", "@angular/router": "^13.2.2", "@apollo/client": "^3.4.8", - "@ionic/angular": "^6.0.8", + "@ionic/angular": "^6.7.5", "@ngx-translate/core": "^14.0.0", "@turf/turf": "^5.1.6", "angular-calendar": "^0.28.26", diff --git a/src/api/tableros/general.queries.ts b/src/api/tableros/general.queries.ts index 26a4b85..f8715de 100644 --- a/src/api/tableros/general.queries.ts +++ b/src/api/tableros/general.queries.ts @@ -126,3 +126,22 @@ export const getCumulus = gql` } } `; + +// ------- ------- +// Queries for 'z1' server +// ------- ------- +/** + * KoboCounters + */ +export const getKoboCounters = gql` + query get_kobo_counters($pagination: paginationInput!) { + kobo_counters(pagination: $pagination) { + id + cumulus + name + value + kobo_asset_uid + kobo_asset_name + } + } +`; diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html index a3a5b1f..fa1ad2f 100644 --- a/src/app/about/about.component.html +++ b/src/app/about/about.component.html @@ -3,340 +3,23 @@ - ¿Quiénes somos? + ¿Quiénes somos? - -
-
- Proyecto SiPeCaM -
-
-
-

- Los Sitios Permanentes de Calibración y Monitoreo de la Biodiversidad (SiPeCaM) es un proyecto nacional que tiene - como objetivo reconocer la importancia en que la biodiversidad está asociada al bienestar de la salud humana en - relación con las enfermedades zoonóticas, mediante la evaluación de la condición de los ecosistemas terrestres en - el país. -

-

- Este proyecto es de carácter nacional y está diseñado para ser instalado y resguardado por las comunidades locales - e indígenas que habitan dichos territorios, en un esquema de monitoreo comunitario y ciencia ciudadana el cual es - auspiciado por la CONABIO a partir del 2019 con asesoría de la Universidad de Stanford y la Universidad Nacional - Autónoma de México. -

-
- -
- -
-

- SiPeCaM permite evaluar el efecto de la defaunación –extinción de individuos y especies animales— producto de la - actividad humana mediante cámaras trampa y grabadoras de sonidos. Parte de los resultados de este proyecto - permitirán además dar recomendaciones pertinentes en la evaluación de la efectividad de proyectos sustentables e - incorporar información clave en el Índice de Integridad Ecosistémica desarrollado por la CONABIO en colaboración - con el INECOL A.C. y que actualmente solo incorpora información de vegetación. -

-
- -
-
- Equipo -
-
- -
- - - - -

Dr. Rodolfo Dirzo

-

Ecología

- - -

- Estudió biología en la Universidad Autónoma de Morelos. Después, llevó a cabo su maestría y doctorado en - la Universidad de Gales, Gran Bretaña, estudiando la ecología evolutiva de la relación entre plantas y - animales. A su regreso a México se incorporó a la UNAM, donde ha sido investigador en el Instituto de - Biología e Instituto de Ecología; Director de la Estación Biológica Los Tuxtlas, e Investigador del - Instituto de Ecología. Su trabajo en Los Tuxtlas contribuyó a la declaración de la Reserva de la - Biosfera de Los Tuxtlas. -

-

- Desde 2005 es profesor en el Departamento de Biología de la Universidad Stanford. Ademas de su - investigación, dicta cursos de Conservación Biológica, Ecología, y Diversidad Biocultural. Sus campos de - trabajo son la ecología y la conservación biológica y las consecuencias de la defaunación sobre los - ecosistemas y la salud humana. -

- - - - - -

Dr. Michael Schmidt

-

Percepción remota

- - -

- Geoecólogo por la Universidad de Maguncia, Alemania. Actualmente Director General de Proyectos - Interinstitucionales de la Comisión Nacional para el Conocimiento y Uso de la Biodiversidad. -

-

- Investigador en percepción remota, inició programa monitoreo de incendios, métodos estudios de - biodiversidad con datos satélites, desarrollo del sistema MRV-AD REDD+ (MAD-Mex) y el sistema nacional - de monitoreo de biodiversidad (SNMB), desarrollo sistemas automáticos de monitoreo. -

- - - - - -
- -
- -
- - - - -

Dr. Mariana Munguía Carrara

-

Biología Ambiental

- - -

- Bióloga, estudió en la Universidad Nacional Autónoma de México. Con interés en el área de la - conservación de la biodiversidad y en conocer las variables determinantes de la distribución geográfica - de las especies. -

-

- Actualmente participa en la implementación del monitoreo multitaxa para detectar procesos de - defaunación, los cambios en la diversidad funcional y composición de las comunidades ecológicas. Así - como los efectos en la salud humana como consecuencia de la pérdida de la biodiversidad por causa de las - actividades antropogénicas. -

- - - - - -

Biól. Pedro Gabriel Díaz Maeda

-

Ecología y Sistemas de Información Geográfica

- - -

- Biólogo. Mi interés se centra en el estudio de las comunidades vegetales, su estructura, composición y - funcionamiento, así como su clasificación, dinámica y distribución en el territorio. Dadas las presiones - ejercidas por nuestra especie sobre los recursos naturales resulta impostergable el establecimiento de - sistemas de monitoreo robustos que nos permitan valorar los impactos sobre los ecosistemas de una forma - geográficamente explícita, así la información generada acerca de la salud e integridad de los mismos - podrá servir de mejor manera a los tomadores de decisiones, tanto regionales como locales, acerca de las - acciones a seguir para su conservación y manejo. Asistir en la instrumentación de un sistema de - monitoreo es una de mis principales actividades. -

- - - - - -
- -
- -
- - - - -

Mtro. Santiago Martínez Balvanera

-

Matemáticas

- - -

- Matemático. Me interesa estudiar las formas en las que la biodiversidad manifiesta, a través del sonido, - información acerca de su composición y dinámica. Junto con mi equipo, trabajamos para generar - herramientas analíticas y computacionales que permitan extraer información ecológica de grabaciones - sonoras de campo. Buscamos impulsar a la acústica como un instrumento eficiente de monitoreo de la - biodiversidad en México. -

- - - - - -

Mtro. Everardo Robredo Esquivelzeta

-

Biología

- - -

- Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the - industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and - scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap - into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the - release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing - software like Aldus PageMaker including versions of Lorem Ipsum. -

- - - - - -
- -
- -
- - - - -

Dr. Oliver López Corona

-

Física Aplicada a la Ecologia

- - -

- Fisico e investigador de Cátedras CONACyT en CONABIO, trabajo principalmente en un marco teórico - (termodinámico-informacional) de la Salud Ecosistémica que incluya el estado actual de salud en términos - de composición, estructura y función (Integridad); la dinámica del sistema (criticalidad); y el tipo de - respuesta a perturbaciones externas (Antifragilidad). En esa misma línea, busco cómo expandir nuestro - marco teórico a la otras escalas para medir la salud planetaria y relacionado con ello, cómo - reinterpretar la crisis planetaria en términos no de un Antropoceno sino Tecnoceno. Página personal: - www.lopezoliver.otrasenda.org -

- - - - - -

Mtro. Erick Palacios Moreno

-

Matemáticas Aplicadas a la Ciencia de Datos

- - -

- Matemático Aplicado. El análisis y la implementación de algoritmos para resolver problemas de - Matemáticas es lo que me apasiona. En los últimos años me he enfocado en el análisis, ajuste y - despliegue de modelos de forma reproducible, portable y escalable en la Ciencia de Datos. Con mi equipo - en CONABIO he desarrollado el software para procesamiento de imágenes satelitales de nombre MAD-Mex - versión antares3. Me encanta construir herramientas para resolver problemas, programar algoritmos en - diferentes lenguajes, tocar guitarra, hacer ejercicio y visitar lugares de naturaleza en compañía de - Alicia, mi familia y amistades. -

- - - - - -
- -
- -
- - - - -

Lic. Omar Miranda Aranda

-

Ciencias de la Computación

- - -

- Computólogo, literato en finanzas y curioso de la biodoversidad. Me interesa participar en proyectos que - apoyen en la conservación del medio ambiente a mediano y largo plazo, me parce escencial aportar - positivamente a todo proyecto en beneficio de nuestro hogar al que llamamos planeta. La escalada en roca - y el aikido son mi fuente de energía. -

- - - - - -

Mtro. Julián Equihua Benítez

-

Ciencia de Datos

- - -

- Matemático aplicado y geomático. Estoy interesado en la aplicación de la Ciencia de Datos a los - problemas ecológicos de gran escala. He trabajado principalmente en desarrollar algoritmos de detección - de cambios con base en imágenes satelitales, en flujos de trabajo para generar cartografía de parámetros - estructurales de vegetación a nivel nacional para México y en el modelado y estimación de Integridad - Ecosistémica de los ecosistémas del país. -

- - - - - -
- -
- -
- - - - -

Lic. Norma Trinidad

-

Ciencias de la Computación

- - -

- Desarrolladora de software. He tenido la oportunidad de colaborar en proyectos de diferentes - disciplinas, y lo que más me gusta, es saber que los productos que construimos ayudan a mejorar la vida - de otros. Particularmente SiPeCaM ha sido un proyecto que me ha traido mucho aprendizaje y me motiva a - seguir poniendo mi granito de arena para la conservación del medio ambiente, haciendo lo que más me - gusta, programar. -

- - - - - -

Fís. Jaime Donlucas Pérez

-

Desarrollo de software

- - -

- Desarrollador de software, alguna vez físico con un interés lejano en la óptica. Me gusta - particularmente el desarrollo web, y participar en proyectos donde pueda aportar herramientas útiles y - con ello facilitar la experiencia del usuario. Principalmente he colaborado con mi equipo de CONABIO - implementando el backend para SiPeCaM, y algunas herramientas para la gestión de datos. Además de la - programación me encantan también los videojuegos, la fotografia y practicar patinaje en línea y - agresivo. -

- - - - - -
- -
- -
- - - - -

Lic. Rodrigo Mejia Velázquez

-

Administración de Proyectos

- - -

- Administrador con especialidad en Administracion de proyectos financieros. En el desarrollo de mi - profesion he tenido mayormente experiencia en la implementacion de proyectos enfocados al medio - ambiente, en los cuales desde la parte administrativa, he tenido la oportunidad de conocer los diferente - temas en los que hemos participado y con los cuales hemos obtenido resultados con un impacto mas alla de - lo administrativo. Me interesa que mi labor administrativa se vea reflejada en proyectos hacia el - cuidado y conservacion del medio ambiente que le de un valor agregado a mi trabajo y a la labor que - realizo. -

- - - - - -
- -
- +
+ +
+ +
+ + +
+ +
+ + +
+ +
+
diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss index 7f2a33c..b774cbf 100644 --- a/src/app/about/about.component.scss +++ b/src/app/about/about.component.scss @@ -1,125 +1,36 @@ -ion-content { +.content { font-size: 20px; + overflow-y: scroll; + font-family: "Poppins", serif; } -.slider { - height: 100%; +.bg-color-transition { + -webkit-transition: background-color 500ms linear; + -moz-transition: background-color 500ms linear; + -o-transition: background-color 500ms linear; + -ms-transition: background-color 500ms linear; + transition: background-color 500ms linear; } -.parallax { - min-height: 480px; - position: relative; - opacity: 0.9; - /* Create the parallax scrolling effect */ - background-attachment: fixed; - background-position: bottom; - background-repeat: no-repeat; - background-size: cover; +.font-family { + font-family: "Poppins", serif; } -.caption { - position: absolute; - left: 0; - top: 50%; - width: 100%; - text-align: center; - color: #000; +.margin-x1 { + margin-left: 13%; + margin-right: 13%; - span.border { - background-color: #111; - color: #fff; - padding: 18px; - font-size: 25px; - letter-spacing: 10px; + @media screen and (max-width: 500px) { + margin-left: 8%; + margin-right: 8%; } -} - -.text-section { - color: #fff; - background-color: #282e34; - text-align: center; - padding: 40px 60px; - text-align: justify; -} - -.bg-1 { - /* Full height */ - min-height: 100%; - background-image: url(../../assets/fototrampas/oso.jpeg); -} - -.bg-2 { - background-image: url(../../assets/fototrampas/coyote_noche.jpeg); -} - -.bg-3 { - background-image: url(../../assets/fototrampas/venado_bura4.jpeg); -} - -.bg-equipo { - /* Full height */ - min-height: 100%; - background-image: url(../../assets/equipo/equipo.jpg); -} - -.team-section { - background-color: #282e34; - padding: 40px 60px; - text-align: center; - - ion-card { - margin: 0 10px; - height: 100%; - display: flex; - flex-direction: column; - - & > h3 { - margin: 0.5rem 0; - } - & > p { - margin: 0 0 0.5em 0; - } + @media screen and (max-width: 400px) { + margin-left: 5%; + margin-right: 5%; } - - ion-card-content { - color: #ddd; - background-color: #282e34; - text-align: justify; - min-height: 170px; - flex: 1; - } - - ion-thumbnail, - img { - height: 100px; - width: 100px; - margin: 10px; - object-fit: cover; - object-position: top; - } -} - -.bg-4 { - background-image: url(../../assets/fototrampas/viejo_de_monte.jpeg); -} - -.bg-5 { - background-image: url(../../assets/fototrampas/venado_bura2.jpeg); -} - -.bg-6 { - background-image: url(../../assets/fototrampas/basariscus_astutus.jpg); -} - -.bg-7 { - background-image: url(../../assets/fototrampas/tapir.png); -} - -.bg-8 { - background-image: url(../../assets/fototrampas/uamericanus.jpeg); } -.bg-9 { - background-image: url(../../assets/fototrampas/venado_bura.jpeg); +.margin-y1 { + margin-bottom: 650px; } diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts index 1f1da57..abd2469 100644 --- a/src/app/about/about.component.ts +++ b/src/app/about/about.component.ts @@ -1,22 +1,21 @@ -import { Component, OnInit } from '@angular/core'; - -import { environment } from '@env/environment'; +import { Component } from '@angular/core'; @Component({ selector: 'app-about', templateUrl: './about.component.html', styleUrls: ['./about.component.scss'], }) -export class AboutComponent implements OnInit { - slideOpts = { - initialSlide: 1, - speed: 400, - autoplay: { - delay: 5000, - }, - }; +export class AboutComponent { + bgColor = '#FFF'; + dark = false; - constructor() {} + onIntroStarted = () => { + this.dark = true; + this.bgColor = '#000'; + }; - ngOnInit() {} + onIntroEnded = () => { + this.dark = false; + this.bgColor = '#FFF'; + }; } diff --git a/src/app/about/about.module.ts b/src/app/about/about.module.ts index cc306a9..6161a9a 100644 --- a/src/app/about/about.module.ts +++ b/src/app/about/about.module.ts @@ -6,8 +6,13 @@ import { IonicModule } from '@ionic/angular'; import { AboutRoutingModule } from './about-routing.module'; import { AboutComponent } from './about.component'; +import { TeamComponent } from './components/team/team.component'; +import { TeamMemberComponent } from './components/team-member/team-member.component'; +import { ProjectComponent } from './components/project/project.component'; +import { IntroComponent } from './components/intro/intro.component'; + @NgModule({ imports: [CommonModule, TranslateModule, IonicModule, AboutRoutingModule], - declarations: [AboutComponent], + declarations: [AboutComponent, TeamComponent, TeamMemberComponent, ProjectComponent, IntroComponent], }) export class AboutModule {} diff --git a/src/app/about/components/intro/intro.component.html b/src/app/about/components/intro/intro.component.html new file mode 100644 index 0000000..595fffc --- /dev/null +++ b/src/app/about/components/intro/intro.component.html @@ -0,0 +1,77 @@ +
+ +
+
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+
diff --git a/src/app/about/components/intro/intro.component.scss b/src/app/about/components/intro/intro.component.scss new file mode 100644 index 0000000..95eeca1 --- /dev/null +++ b/src/app/about/components/intro/intro.component.scss @@ -0,0 +1,251 @@ +.flex-box-a { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding-top: 10px; +} + +.flex-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.lines-container { + min-height: 60px; + padding-top: 10px; +} +.line { + width: 100px; + height: 50px; +} + +// logos +// ------- ------- +.box-intro { + height: 50vh; + position: relative; +} + +.bg-color-transition { + -webkit-transition: background-color 500ms linear; + -moz-transition: background-color 500ms linear; + -o-transition: background-color 500ms linear; + -ms-transition: background-color 500ms linear; + transition: background-color 500ms linear; +} + +.box-bg { + width: 100%; + height: 100%; + position: absolute; +} + +.bg-logo-1 { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: url(../../../../assets/logo-blanco.png); +} + +.bg-logo-100 { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: url(../../../../assets/logo.png); +} + +.bg-logo-2 { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: url(../../../../assets/bg/Fauna_Flora_SiPeCaM-02.png); + + @media screen and (max-width: 500px) { + background-size: 80%; + } +} + +.bg-logo-3 { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: url(../../../../assets/bg/Fauna_Flora_SiPeCaM-03.png); + + @media screen and (max-width: 500px) { + background-size: 80%; + } +} + +.bg-logo-4 { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: url(../../../../assets/bg/Fauna_Flora_SiPeCaM-04.png); + + @media screen and (max-width: 500px) { + background-size: 80%; + } +} + +.bg-logo-5 { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: url(../../../../assets/bg/Fauna_Flora_SiPeCaM-05.png); + + @media screen and (max-width: 500px) { + background-size: 80%; + } +} + +.bg-logo-6 { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: url(../../../../assets/bg/Fauna_Flora_SiPeCaM-06.png); + + @media screen and (max-width: 500px) { + background-size: 80%; + } +} + +.bg-logo-7 { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: url(../../../../assets/bg/Fauna_Flora_SiPeCaM-07.png); + + @media screen and (max-width: 500px) { + background-size: 80%; + } +} + +.bg-logo-8 { + background-position: center; + background-repeat: no-repeat; + background-size: contain; + background-image: url(../../../../assets/bg/Fauna_Flora_SiPeCaM-08.png); + + @media screen and (max-width: 500px) { + background-size: 80%; + } +} +// ------- ------- + +.bg-color-2 { + border-bottom: 4px solid rgb(250, 84, 46); +} +.bg-color-2:hover { + border: 4px solid rgb(250, 84, 46); +} + +.bg-color-3 { + border-bottom: 4px solid rgb(66, 74, 139); +} +.bg-color-3:hover { + border: 4px solid rgb(66, 74, 139); +} + +.bg-color-4 { + border-bottom: 4px solid rgb(76, 163, 215); +} +.bg-color-4:hover { + border: 4px solid rgb(76, 163, 215); +} + +.bg-color-5 { + border-bottom: 4px solid rgb(246, 209, 72); +} +.bg-color-5:hover { + border: 4px solid rgb(246, 209, 72); +} + +.bg-color-6 { + border-bottom: 4px solid rgb(232, 146, 79); +} +.bg-color-6:hover { + border: 4px solid rgb(232, 146, 79); +} + +.bg-color-7 { + border-bottom: 4px solid rgb(221, 88, 82); +} +.bg-color-7:hover { + border: 4px solid rgb(221, 88, 82); +} + +.bg-color-8 { + border-bottom: 4px solid rgb(84, 183, 186); +} +.bg-color-8:hover { + border: 4px solid rgb(84, 183, 186); +} +// ------- ------- + +// ------- ------- +// loading ellipsis +// ------- ------- +.lds-ellipsis-container { + width: 100%; + position: absolute; + bottom: 0; +} + +.lds-ellipsis { + display: inline-block; + position: relative; + width: 80px; + height: 80px; +} +.lds-ellipsis div { + position: absolute; + top: 33px; + width: 13px; + height: 13px; + background: #000; + animation-timing-function: cubic-bezier(0, 1, 1, 0); +} +.lds-ellipsis div:nth-child(1) { + left: 8px; + animation: lds-ellipsis1 0.6s infinite; +} +.lds-ellipsis div:nth-child(2) { + left: 8px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(3) { + left: 32px; + animation: lds-ellipsis2 0.6s infinite; +} +.lds-ellipsis div:nth-child(4) { + left: 56px; + animation: lds-ellipsis3 0.6s infinite; +} +@keyframes lds-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } +} +@keyframes lds-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} +@keyframes lds-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(24px, 0); + } +} +// ------- ------- diff --git a/src/app/about/components/intro/intro.component.ts b/src/app/about/components/intro/intro.component.ts new file mode 100644 index 0000000..8aabbff --- /dev/null +++ b/src/app/about/components/intro/intro.component.ts @@ -0,0 +1,196 @@ +import { Component, OnInit, Output, EventEmitter } from '@angular/core'; +import { trigger, style, animate, transition } from '@angular/animations'; + +@Component({ + selector: 'app-about-intro', + templateUrl: './intro.component.html', + styleUrls: ['./intro.component.scss'], + animations: [ + trigger('logoOut', [transition(':leave', [animate('200ms', style({ opacity: 0 }))])]), + trigger('lineIn', [transition(':enter', [style({ opacity: 0 }), animate('300ms', style({ opacity: 1 }))])]), + ], +}) +export class IntroComponent implements OnInit { + @Output() introStarted = new EventEmitter(); + @Output() introEnded = new EventEmitter(); + + ngOnInit() { + this.startIntro(); + } + + // ------- ------- + // images + // ------- ------- + imagesLoading = true; + imagesError = false; + images = [ + 'assets/logo-blanco.png', + 'assets/logo.png', + 'assets/bg/Fauna_Flora_SiPeCaM-02.png', + 'assets/bg/Fauna_Flora_SiPeCaM-03.png', + 'assets/bg/Fauna_Flora_SiPeCaM-04.png', + 'assets/bg/Fauna_Flora_SiPeCaM-05.png', + 'assets/bg/Fauna_Flora_SiPeCaM-06.png', + 'assets/bg/Fauna_Flora_SiPeCaM-07.png', + 'assets/bg/Fauna_Flora_SiPeCaM-08.png', + ]; + + loadImages = async () => { + this.imagesLoading = true; + + // -- + await new Promise((resolve) => { + setTimeout(() => { + resolve(true); + }, this.timeout1s); + }); + + // -- + for (let i = 0; i < this.images.length && !this.imagesError; i++) { + // load + await new Promise((resolve) => { + let img = new Image(); + img.onload = () => { + resolve(true); + }; + img.src = this.images[i]; + }).catch(() => { + // error + this.imagesError = true; + }); + } + // -- + this.imagesLoading = false; + }; + + // ------- ------- + // Intro + // ------- ------- + timeout = 500; + timeout1s = 1000; + introState = 0; + bgColor = '#FFF'; + + startIntro = async () => { + await this.loadImages(); + if (this.imagesError) { + this.introState = 100; + return; + } + + await new Promise((resolve) => { + setTimeout(() => { + this.introState = 1; + this.bgColor = '#000'; + this.introStarted.emit(); + resolve(true); + }, 0); + }); + + await new Promise((resolve) => { + setTimeout(() => { + this.introState = 1.1; + this.state2(); + resolve(true); + }, this.timeout1s); + }); + }; + + state2 = async () => { + setTimeout(() => { + this.introState = 2; + this.state3(); + }, this.timeout1s); + }; + + state3 = async () => { + setTimeout(() => { + this.introState = 3; + this.state4(); + }, this.timeout); + }; + + state4 = async () => { + setTimeout(() => { + this.introState = 4; + this.state5(); + }, this.timeout); + }; + + state5 = async () => { + setTimeout(() => { + this.introState = 5; + this.state6(); + }, this.timeout); + }; + + state6 = async () => { + setTimeout(() => { + this.introState = 6; + this.state7(); + }, this.timeout); + }; + + state7 = async () => { + setTimeout(() => { + this.introState = 7; + this.state8(); + }, this.timeout); + }; + + state8 = async () => { + await new Promise((resolve) => { + setTimeout(() => { + this.introState = 8; + resolve(true); + }, this.timeout); + }); + + await new Promise((resolve) => { + setTimeout(() => { + this.introState = 8.1; + this.state9(); + resolve(true); + }, this.timeout); + }); + }; + + state9 = async () => { + await new Promise((resolve) => { + setTimeout(() => { + this.introState = 9; + resolve(true); + }, this.timeout); + }); + + await new Promise((resolve) => { + setTimeout(() => { + this.bgColor = '#FFF'; + this.introEnded.emit(); + this.state100(); + resolve(true); + }, this.timeout1s); + }); + }; + + state100 = async () => { + await new Promise((resolve) => { + setTimeout(() => { + this.introState = 100; + resolve(true); + }, this.timeout1s); + }); + }; + + // ------- ------- + hoverItemId = ''; + hoverLineId = 0; + + onLineEnter(itemId: number) { + this.hoverLineId = itemId; + } + + onLineLeave() { + this.hoverLineId = 0; + } +} diff --git a/src/app/about/components/project/project.component.html b/src/app/about/components/project/project.component.html new file mode 100644 index 0000000..03780eb --- /dev/null +++ b/src/app/about/components/project/project.component.html @@ -0,0 +1,40 @@ +
+
+
+ Proyecto +
+
+ +
+
+

+ Los Sitios Permanentes de Calibración y Monitoreo de la Biodiversidad (SiPeCaM) es un proyecto nacional que + tiene como objetivo reconocer la importancia en que la biodiversidad está asociada al bienestar de la salud + humana en relación con las enfermedades zoonóticas, mediante la evaluación de la condición de los ecosistemas + terrestres en el país. +

+

+ Este proyecto es de carácter nacional y está diseñado para ser instalado y resguardado por las comunidades + locales e indígenas que habitan dichos territorios, en un esquema de monitoreo comunitario y ciencia ciudadana + el cual es auspiciado por la CONABIO a partir del 2019 con asesoría de la Universidad de Stanford y la + Universidad Nacional Autónoma de México. +

+
+ +
+
La biodiversidad se asocia al bienestar de la salud humana.
+
+
+ +
+
+

+ SiPeCaM permite evaluar el efecto de la defaunación —extinción de individuos y especies animales— producto de la + actividad humana mediante cámaras trampa y grabadoras de sonidos. Parte de los resultados de este proyecto + permitirán además dar recomendaciones pertinentes en la evaluación de la efectividad de proyectos sustentables e + incorporar información clave en el Índice de Integridad Ecosistémica desarrollado por la CONABIO en colaboración + con el INECOL A.C. y que actualmente solo incorpora información de vegetación. +

+
+
+
diff --git a/src/app/about/components/project/project.component.scss b/src/app/about/components/project/project.component.scss new file mode 100644 index 0000000..962e5a0 --- /dev/null +++ b/src/app/about/components/project/project.component.scss @@ -0,0 +1,113 @@ +.box-title { + height: auto; + padding-top: 60px; + width: 100%; + text-align: left; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + span { + padding: 18px; + font-size: 70px; + letter-spacing: 5px; + font-weight: 700; + } + + @media screen and (max-width: 600px) { + span { + font-size: 50px; + } + } + + @media screen and (max-width: 500px) { + span { + font-size: 45px; + } + } + + @media screen and (max-width: 400px) { + span { + font-size: 40px; + } + } +} + +.box-bullet { + height: auto; + padding: 0px; + width: 100%; + text-align: center; + font-size: 43px; + font-weight: 700; + + @media screen and (max-width: 600px) { + font-size: 33px; + } + + @media screen and (max-width: 500px) { + font-size: 28px; + } + + @media screen and (max-width: 400px) { + font-size: 25px; + } +} + +.flex-box-a { + display: flex; + flex-direction: row; + flex-wrap: wrap; + align-items: flex-start; +} + +.flex-box-item-a-1 { + width: 100%; + flex-basis: 60%; + flex-grow: 1; + flex-shrink: 1; +} + +.flex-box-item-a-2 { + width: 100%; + flex-basis: 40%; + flex-grow: 1; + flex-shrink: 1; +} + +.flex-box-b { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.flex-box-item-b-1 { + width: 100%; + flex-basis: 100%; + flex-grow: 0; + flex-shrink: 1; +} + +.flex-box-c { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: center; +} + +.flex-box-item-c-1 { + flex-basis: 100%; + flex-grow: 1; + flex-shrink: 1; + height: fit-content; +} + +.text-section { + padding: 20px 20px; + text-align: justify; + font-size: 15px; +} + +.text-white { + color: #fff; +} diff --git a/src/app/about/components/project/project.component.ts b/src/app/about/components/project/project.component.ts new file mode 100644 index 0000000..bea1e69 --- /dev/null +++ b/src/app/about/components/project/project.component.ts @@ -0,0 +1,10 @@ +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'app-about-project', + templateUrl: './project.component.html', + styleUrls: ['./project.component.scss'], +}) +export class ProjectComponent { + @Input('dark') dark: boolean; +} diff --git a/src/app/about/components/team-member/team-member.component.html b/src/app/about/components/team-member/team-member.component.html new file mode 100644 index 0000000..6470761 --- /dev/null +++ b/src/app/about/components/team-member/team-member.component.html @@ -0,0 +1,36 @@ +
+ +
+
+ +
+
+ + +
+ {{ data.name }} +
+
+ {{ data.area }} +
+ + + +
+

+ {{ data.description[i] }} +

+
+ +
diff --git a/src/app/about/components/team-member/team-member.component.scss b/src/app/about/components/team-member/team-member.component.scss new file mode 100644 index 0000000..45f9541 --- /dev/null +++ b/src/app/about/components/team-member/team-member.component.scss @@ -0,0 +1,104 @@ +.shadow { + transition: box-shadow 0.1s ease-in-out; +} +.shadow:hover { + box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 20px; +} + +.bg-color-transition { + -webkit-transition: background-color 500ms linear; + -moz-transition: background-color 500ms linear; + -o-transition: background-color 500ms linear; + -ms-transition: background-color 500ms linear; + transition: background-color 500ms linear; +} + +.box-photo-0 { + min-width: 260px; + min-height: 260px; + max-width: 360px; + height: 360px; + border: 1px solid rgb(187, 189, 189); +} + +.box-photo-1 { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: center; + align-items: center; + + width: 100%; + height: 100%; + text-align: center; + padding: 25px; + padding-bottom: 0px; + + @media screen and (max-width: 500px) { + padding: 15px; + } + + @media screen and (max-width: 400px) { + padding: 10px; + } + + img { + width: 80%; + height: 80%; + object-fit: contain; + background-size: cover; + box-shadow: 0 0 8px 8px white inset; + } +} + +.text-1 { + padding-top: 10px; + font-size: 14px; + text-align: center; +} + +.text-2 { + font-size: 12px; + font-weight: lighter; + color: rgb(125, 129, 131); + text-align: center; +} + +.text-white { + color: #fff; +} + +.text-grey { + color: rgb(40, 47, 51); +} + +.box-popup { + position: absolute; + z-index: 100; + background: #fff; +} + +.bg-black { + background: #000; +} + +.text-popup-1 { + text-align: justify; + padding-top: 15px; + padding-bottom: 100px; + padding-left: 15px; + padding-right: 15px; + font-size: 12px; + font-weight: lighter; + + @media screen and (max-width: 500px) { + padding-left: 8px; + padding-right: 8px; + } + + @media screen and (max-width: 400px) { + padding-left: 5px; + padding-right: 5px; + } +} +// ------- ------- diff --git a/src/app/about/components/team-member/team-member.component.ts b/src/app/about/components/team-member/team-member.component.ts new file mode 100644 index 0000000..74baab2 --- /dev/null +++ b/src/app/about/components/team-member/team-member.component.ts @@ -0,0 +1,34 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { TeamMember } from './team-member'; + +@Component({ + selector: 'app-about-team-member', + templateUrl: './team-member.component.html', + styleUrls: ['./team-member.component.scss'], +}) +export class TeamMemberComponent implements OnInit { + @Input() data: TeamMember; + @Input('dark') dark: boolean; + + hovered: boolean = false; + photoDivStyle = undefined; + photoImgStyle = undefined; + + ngOnInit() { + this.photoImgStyle = this.data?.styles?.photo?.img; + } + + onMouseEnter() { + this.hovered = true; + this.photoDivStyle = this.data?.styles?.photo?.divHover; + this.photoImgStyle = this.data?.styles?.photo?.imgHover; + } + + onMouseLeave() { + this.hovered = false; + this.photoDivStyle = undefined; + this.photoImgStyle = this.data?.styles?.photo?.img; + } + + getDescriptionItemId = (index) => index; +} diff --git a/src/app/about/components/team-member/team-member.ts b/src/app/about/components/team-member/team-member.ts new file mode 100644 index 0000000..ce8a1fa --- /dev/null +++ b/src/app/about/components/team-member/team-member.ts @@ -0,0 +1,14 @@ +export interface TeamMember { + id: string; + name: string; + area: string; + description: string[]; + imgSrc: string; + styles?: { + photo?: { + divHover?: any; + img?: any; + imgHover?: any; + }; + }; +} diff --git a/src/app/about/components/team/team.component.html b/src/app/about/components/team/team.component.html new file mode 100644 index 0000000..2864ef2 --- /dev/null +++ b/src/app/about/components/team/team.component.html @@ -0,0 +1,29 @@ +
+ +
+
+ Equipo +
+
+ + +
+
+ +
+
+ + +
+
+ Colaboradores externos +
+
+ + +
+
+ +
+
+
diff --git a/src/app/about/components/team/team.component.scss b/src/app/about/components/team/team.component.scss new file mode 100644 index 0000000..aeb9d46 --- /dev/null +++ b/src/app/about/components/team/team.component.scss @@ -0,0 +1,74 @@ +.text-white { + color: #fff; +} + +.box-title { + height: auto; + padding-top: 60px; + width: 100%; + text-align: left; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + + span { + padding: 18px; + font-size: 70px; + letter-spacing: 5px; + font-weight: 700; + } + + @media screen and (max-width: 600px) { + span { + font-size: 50px; + } + } + + @media screen and (max-width: 500px) { + span { + font-size: 45px; + } + } + + @media screen and (max-width: 400px) { + span { + font-size: 40px; + } + } +} + +.box-members-1 { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-evenly; + align-items: flex-start; + padding-left: 15px; + padding-right: 15px; + padding-top: 20px; + padding-bottom: 20px; + + @media screen and (max-width: 600px) { + padding-left: 5px; + padding-right: 5px; + } + + @media screen and (max-width: 500px) { + padding-left: 0px; + padding-right: 0px; + } +} + +.box-members-2 { + flex-basis: 24%; + flex-grow: 0; + flex-shrink: 1; + + min-width: 260px; + min-height: 260px; + max-width: 360px; + height: auto; + padding-bottom: 20px; + + position: relative; +} diff --git a/src/app/about/components/team/team.component.ts b/src/app/about/components/team/team.component.ts new file mode 100644 index 0000000..d72edbb --- /dev/null +++ b/src/app/about/components/team/team.component.ts @@ -0,0 +1,353 @@ +import { Component, Input } from '@angular/core'; +import { TeamMember } from '../team-member/team-member'; + +@Component({ + selector: 'app-about-team', + templateUrl: './team.component.html', + styleUrls: ['./team.component.scss'], +}) +export class TeamComponent { + /** + * Base path for the background images. + */ + static baseBackgroundImagePath = './assets/bg'; + @Input('dark') dark: boolean; + + // ------- ------- + // Team members + // ------- ------- + team: TeamMember[] = [ + { + id: 'rodolfo', + name: 'Dr. Rodolfo Dirzo', + area: 'Biología', + description: [ + `Estudió biología en la Universidad Autónoma de Morelos. Después, llevó a cabo su maestría y doctorado en + la Universidad de Gales, Gran Bretaña, estudiando la ecología evolutiva de la relación entre plantas y + animales. A su regreso a México se incorporó a la UNAM, donde ha sido investigador en el Instituto de + Biología e Instituto de Ecología; Director de la Estación Biológica Los Tuxtlas, e Investigador del + Instituto de Ecología. Su trabajo en Los Tuxtlas contribuyó a la declaración de la Reserva de la Biosfera + de Los Tuxtlas.`, + `Desde 2005 es profesor en el Departamento de Biología de la Universidad Stanford. Ademas de su + investigación, dicta cursos de Conservación Biológica, Ecología, y Diversidad Biocultural. Sus campos de + trabajo son la ecología y la conservación biológica y las consecuencias de la defaunación sobre los + ecosistemas y la salud humana.`, + ], + imgSrc: 'assets/equipo/RDirzo.jpg', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-13.jpg)`, + }, + img: { + filter: 'grayscale(1) brightness(1.3)', + }, + imgHover: { + filter: 'grayscale(0) brightness(1.1) sepia(0.7)', + }, + }, + }, + }, + { + id: 'mariana', + name: 'Dr. Mariana Munguía Carrara', + area: 'Biología Ambiental', + description: [ + `Bióloga, estudió en la Universidad Nacional Autónoma de México. Con interés en el área de la conservación + de la biodiversidad y en conocer las variables determinantes de la distribución geográfica de las + especies.`, + `Actualmente participa en la implementación del monitoreo multitaxa para detectar procesos de defaunación, + los cambios en la diversidad funcional y composición de las comunidades ecológicas. Así como los efectos + en la salud humana como consecuencia de la pérdida de la biodiversidad por causa de las actividades + antropogénicas.`, + ], + imgSrc: 'assets/equipo/Mariana.jpg', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-07.jpg)`, + }, + img: { + filter: 'grayscale(1) brightness(1)', + }, + imgHover: { + filter: 'grayscale(0) brightness(1)', + }, + }, + }, + }, + { + id: 'pedro', + name: 'Biól. Pedro Gabriel Díaz Maeda', + area: 'Ecología y Sistemas de Información Geográfica', + description: [ + `Biólogo. Mi interés se centra en el estudio de las comunidades vegetales, su estructura, composición y + funcionamiento, así como su clasificación, dinámica y distribución en el territorio.`, + `Dadas las presiones ejercidas por nuestra especie sobre los recursos naturales resulta impostergable el + establecimiento de sistemas de monitoreo robustos que nos permitan valorar los impactos sobre los + ecosistemas de una forma geográficamente explícita, así la información generada acerca de la salud e + integridad de los mismos podrá servir de mejor manera a los tomadores de decisiones, tanto regionales como + locales, acerca de las acciones a seguir para su conservación y manejo. Asistir en la instrumentación de + un sistema de monitoreo es una de mis principales actividades.`, + ], + imgSrc: 'assets/equipo/Pedro.png', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-21.jpg)`, + }, + img: { + filter: 'grayscale(1) brightness(1)', + }, + imgHover: { + filter: 'grayscale(0) brightness(1) sepia(0.7)', + }, + }, + }, + }, + { + id: 'everardo', + name: 'Mtro. Everardo Robredo Esquivelzeta', + area: 'Biología', + description: [ + `Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the + industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and + scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into + electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release + of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software + like Aldus PageMaker including versions of Lorem Ipsum.`, + ], + imgSrc: 'assets/equipo/Everardo.png', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-14.jpg)`, + 'background-position-x': '-210px', + }, + img: { + filter: 'grayscale(1) brightness(2)', + }, + imgHover: { + filter: 'grayscale(0) brightness(1)', + }, + }, + }, + }, + { + id: 'alex', + name: 'Dr. Alejandro Ponce Mendoza', + area: 'Ecología Numérica', + description: [ + `¡Hola! Soy Alex. Estoy interesado en la ecología numérica y funcional y como visualizar esta información + para la toma de decisiones. Realicé estudios de Tecnología de Alimentos (UIA) y después de trabajar + brevemente en ordenamientos ecológicos me enamoré de la ecología. En mis estudios de maestría y doctorado + estuve en el laboratorio de Ecología de Suelos del Departamento de Biotecnología del CINVESTAV. Después + realicé post-doctorado en ECOSUR-Villahermosa y la UAM-Xochimilco trabajando tanto en selvas, pastizales, + acahuales, lagunas y lagos con distintos grupos taxonómicos: insectos, peces, aves. Desde el 2015 me + integré a CONABIO en proyectos relacionados con Agrobiodiversidad.`, + `Durante estos años en CONABIO me he enfocado en mostrar la gran cantidad de información a través de + visualizaciones interactivas. Desde el 2023 me incorporé al proyecto COSMOS. Mis hobbies son andar en + bici, leer y jugar ajedrez.`, + ], + imgSrc: 'assets/equipo/Alex.jpg', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-16.jpg)`, + 'background-size': '100% 100%', + 'background-position-x': '-110px', + }, + img: { + filter: 'grayscale(1) brightness(1.5)', + }, + imgHover: { + filter: 'grayscale(0) brightness(1)', + }, + }, + }, + }, + { + id: 'pedro_romero', + name: 'M. C. Pedro Romero Martínez', + area: 'Matemáticas', + description: [ + `Soy matemático de formación con enfoque en análisis numérico y moderación matemática. + Tengo experiencia en desarrollo, gestión y despliegue de APIs REST y aplicaciones web para distintos + propósitos tanto en el sector privado como en gobierno.`, + `En los últimos años he trabajado en el laboratorio Chilam del C3 de la UNAM, + realizando actividades relacionadas con ciencia e ingeniería de datos aplicadas a la modelación de sistemas + complejos adaptativos como parte de mi doctorado. + Me apasiona la aplicación de matemáticas y computación a problemas reales.`, + ], + imgSrc: 'assets/equipo/Pedro_Romero.jpg', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-02.jpg)`, + 'background-position': '-100px 0px', + }, + img: { + filter: 'grayscale(1) brightness(1.5)', + }, + imgHover: { + filter: 'grayscale(0) brightness(1)', + }, + }, + }, + }, + { + id: 'francisco', + name: 'Ing. Francisco Javier Ramírez Paredes', + area: 'Ciencias e Ingeniería de la Computación', + description: [ + `Ingeniero de Software. Experimentado en los procesos de construcción y despliegue de sistemas de software, + con todo lo que ello implica.`, + `Estoy conciente de que es urgente toda acción enfocada en el cuidado y preservación de nuestro planeta, y + siento que es grande la deuda que tenemos en ese aspecto. ¿Cuál es tu definición favorita de la + naturaleza? Me gusta esa definición que la define como una expresión sublime del amor, ciencia y trabajo + de Quien la creó, pues menciona los aspectos clave para su cuidado y preservación.`, + ], + imgSrc: 'assets/equipo/Francisco.jpg', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-20.jpg)`, + 'background-position': '-100px 0px', + }, + img: { + filter: 'grayscale(1) brightness(1.5)', + }, + imgHover: { + filter: 'grayscale(0) brightness(1)', + }, + }, + }, + }, + ]; + // ------- ------- + + // ------- ------- + // Team members + // ------- ------- + teamExternals: TeamMember[] = [ + { + id: 'oliver', + name: 'Dr. Oliver López Corona', + area: 'Física Aplicada a la Ecologia', + description: [ + `Fisico e investigador de Cátedras CONACyT en CONABIO, trabajo principalmente en un marco teórico + (termodinámico-informacional) de la Salud Ecosistémica que incluya el estado actual de salud en términos + de composición, estructura y función (Integridad); la dinámica del sistema (criticalidad); y el tipo de + respuesta a perturbaciones externas (Antifragilidad). En esa misma línea, busco cómo expandir nuestro + marco teórico a la otras escalas para medir la salud planetaria y relacionado con ello, cómo reinterpretar + la crisis planetaria en términos no de un Antropoceno sino Tecnoceno. Página personal: + www.lopezoliver.otrasenda.org`, + ], + imgSrc: 'assets/equipo/Oliver.png', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-15.jpg)`, + 'background-size': '100% 100%', + 'background-position-x': '-110px', + }, + img: { + filter: 'grayscale(1) brightness(1.3)', + }, + imgHover: { + filter: 'grayscale(0) brightness(1)', + }, + }, + }, + }, + { + id: 'romeo', + name: 'Dr. Romeo Alberto Saldaña Vázquez', + area: 'Ecología/Biología', + description: [ + `Romeo es académico de tiempo del Instituto de Investigaciones en Medio Ambiente Xabier + Gorostiaga SJ de la Universidad Iberoamericana Puebla. Es Doctor y Maestro en Ecología por + el Instituto de Ecología A.C. y Biólogo por la Universidad Nacional Autónoma de México.`, + `Sus áreas de investigación son la síntesis en ecología, la ecología urbana y comparada. Es + coordinador de la red de investigación “Biología, Manejo y Conservación de Fauna Nativa en + Ambientes Antropizados” (REFAMA). Pertenece al sistema nacional de investigadores e + investigadoras de CONAHCyT, nivel 2 (2020-24) en el área de Biología y Química. Cuenta con + más de 50 publicaciones científicas arbitradas. Sus investigaciones han aportado nuevo + conocimiento sobre la ecología de vertebrados y de los problemas ambientales de México las + cual han sido reportadas por agencias periodísticas como la BBC, La Jornada, Milenio y + Urbano Puebla. Colabora desde el año 2020 como profesor titular de las asignaturas de + Ecología, Biogeografía y Ecología urbana en la licenciatura en ciencias ambientales y + desarrollo sustentable, así como en la maestría en hábitat y equidad socio territorial de la + IBERO Puebla.`, + ], + imgSrc: 'assets/equipo/Romeo.jpg', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-03.jpg)`, + }, + img: { + filter: 'grayscale(1) brightness(1.2)', + }, + imgHover: { + filter: 'grayscale(0) brightness(1)', + }, + }, + }, + }, + { + id: 'santiago', + name: 'Mtro. Santiago Martínez Balvanera', + area: 'Matemáticas', + description: [ + `Matemático. Me interesa estudiar las formas en las que la biodiversidad manifiesta, a través del sonido, + información acerca de su composición y dinámica. Junto con mi equipo, trabajamos para generar herramientas + analíticas y computacionales que permitan extraer información ecológica de grabaciones sonoras de campo. + Buscamos impulsar a la acústica como un instrumento eficiente de monitoreo de la biodiversidad en México.`, + ], + imgSrc: 'assets/equipo/Santiago.jpg', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-10.jpg)`, + }, + img: { + filter: 'grayscale(1) brightness(5)', + }, + imgHover: { + filter: 'grayscale(0) brightness(3.5)', + }, + }, + }, + }, + { + id: 'julian', + name: 'Mtro. Julián Equihua Benítez', + area: 'Ciencia de Datos', + description: [ + `Matemático aplicado y geomático. Estoy interesado en la aplicación de la Ciencia de Datos a los problemas + ecológicos de gran escala. He trabajado principalmente en desarrollar algoritmos de detección de cambios + con base en imágenes satelitales, en flujos de trabajo para generar cartografía de parámetros + estructurales de vegetación a nivel nacional para México y en el modelado y estimación de Integridad + Ecosistémica de los ecosistemas del país.`, + ], + imgSrc: 'assets/equipo/Julian.png', + styles: { + photo: { + divHover: { + 'background-image': `url(${TeamComponent.baseBackgroundImagePath}/bg-12.jpg)`, + }, + img: { + filter: 'grayscale(1) brightness(1.5)', + }, + imgHover: { + filter: 'grayscale(0) brightness(1)', + }, + }, + }, + }, + ]; + // ------- ------- + + getTeamItemId = (index, item) => item.id; +} diff --git a/src/app/estadisticas/tablero-general/tablero-general.component.html b/src/app/estadisticas/tablero-general/tablero-general.component.html index c4a72c2..f68b8de 100644 --- a/src/app/estadisticas/tablero-general/tablero-general.component.html +++ b/src/app/estadisticas/tablero-general/tablero-general.component.html @@ -32,7 +32,7 @@
- + Visitas Registradas @@ -69,9 +69,9 @@ - + - Dispositivos adquiridos + Dispositivos adquiridos - Dispositivos en campo + Dispositivos en campo - Estado de los dispositivos + Estado de los dispositivos - + Archivos entregados @@ -131,9 +131,9 @@ > - + - Datos entregados + Datos entregados (Terabytes) + + + + + Archivos de imágenes y videos entregados (Acumulación trimestral) + + + + + + + + + Archivos de audio entregados (Acumulación trimestral) + + + + + + + + + + Datos entregados (Acumulación trimestral - Terabytes) + + + + + +
diff --git a/src/app/estadisticas/tablero-general/tablero-general.component.ts b/src/app/estadisticas/tablero-general/tablero-general.component.ts index ff47b3f..9452420 100644 --- a/src/app/estadisticas/tablero-general/tablero-general.component.ts +++ b/src/app/estadisticas/tablero-general/tablero-general.component.ts @@ -27,9 +27,11 @@ import { getAllFiles, getFiles, getCumulus, + getKoboCounters, } from '@api/tableros'; import { getEcosystems } from '@api/mapa'; import { AlertController } from '@ionic/angular'; +import { ApolloQueryResult } from '@apollo/client/core'; export interface Visit { date_sipecam_second_season: string; @@ -54,6 +56,21 @@ export type ChartOptions = { legend: ApexLegend; }; +const updateTimeout = 300; + +const inArray = (array) => (input) => _.includes(array, input); + +const monthToThreeMountPeriod = (month) => { + const f = _.cond([ + [inArray([0, 1, 2]), _.constant(1)], + [inArray([3, 4, 5]), _.constant(2)], + [inArray([6, 7, 8]), _.constant(3)], + [inArray([9, 10, 11]), _.constant(4)], + [_.stubTrue, _.constant(-1)], + ]); + return f(month); +}; + @Component({ selector: 'app-tablero-general', templateUrl: './tablero-general.component.html', @@ -92,7 +109,7 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { ], chart: { type: 'bar', - height: 350, + height: 400, toolbar: { show: false }, }, plotOptions: { @@ -144,7 +161,7 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { }, ], chart: { - height: 350, + height: 400, type: 'bar', toolbar: { show: false }, }, @@ -193,12 +210,12 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { devicesStatusChart: ApexOptions = { series: [], chart: { - height: 250, + height: 300, type: 'donut', }, labels: [], legend: { - position: 'left', + position: 'bottom', }, plotOptions: { pie: { @@ -217,12 +234,12 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { devicesTypeChart: ApexOptions = { series: [], chart: { - height: 250, + height: 300, type: 'donut', }, labels: [], legend: { - position: 'left', + position: 'bottom', }, plotOptions: { pie: { @@ -241,12 +258,12 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { activeDevicesChart: ApexOptions = { series: [], chart: { - height: 250, + height: 300, type: 'donut', }, labels: [], legend: { - position: 'left', + position: 'bottom', }, plotOptions: { pie: { @@ -295,7 +312,7 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { }, yaxis: { title: { - text: 'Archivos entregados', + text: '', }, min: 0, forceNiceScale: true, @@ -308,7 +325,126 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { filesSizeChart: ApexOptions = { series: [ { - name: 'GB', + name: 'TB', + data: [], + }, + ], + chart: { + type: 'area', + height: 350, + stacked: false, + }, + colors: this.colors, + dataLabels: { + enabled: false, + }, + legend: { + position: 'top', + horizontalAlign: 'left', + }, + xaxis: { + categories: [], + }, + yaxis: { + title: { + text: '', + }, + min: 0, + forceNiceScale: true, + labels: { + formatter: this.shortNumber, + }, + }, + }; + + filesAudioChart: ApexOptions = { + series: [ + { + name: 'Audio', + data: [], + }, + ], + chart: { + type: 'area', + height: 350, + stacked: false, + }, + colors: this.colors, + dataLabels: { + enabled: false, + }, + legend: { + position: 'top', + horizontalAlign: 'left', + }, + xaxis: { + title: { + text: 'Trimestre', + }, + categories: [], + }, + yaxis: { + title: { + text: '', + }, + min: 0, + forceNiceScale: true, + labels: { + formatter: this.shortNumber, + }, + }, + }; + + filesAccChart: ApexOptions = { + series: [ + { + name: 'Audio', + data: [], + }, + { + name: 'Video', + data: [], + }, + { + name: 'Imágenes', + data: [], + }, + ], + chart: { + type: 'area', + height: 350, + stacked: false, + }, + colors: this.colors, + dataLabels: { + enabled: false, + }, + legend: { + position: 'top', + horizontalAlign: 'left', + }, + xaxis: { + title: { + text: 'Trimestre', + }, + categories: [], + }, + yaxis: { + title: { + text: '', + }, + min: 0, + forceNiceScale: true, + labels: { + formatter: this.shortNumber, + }, + }, + }; + + filesSizeAccChart: ApexOptions = { + series: [ + { + name: 'TB', data: [], }, ], @@ -326,11 +462,14 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { horizontalAlign: 'left', }, xaxis: { + title: { + text: 'Trimestre', + }, categories: [], }, yaxis: { title: { - text: 'Datos entregados (GB)', + text: '', }, min: 0, forceNiceScale: true, @@ -354,7 +493,7 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { sufix = 'M'; } - if (value >= 100000) { + if (value >= 1000) { value = value / 1000; sufix = 'K'; } @@ -391,6 +530,110 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { } } + async partition_files() { + try { + const { data }: any = await this.apollo + .query({ + query: getAllFiles, + variables: { + pagination: { + limit: 1000, + offset: 0, + }, + }, + }) + .toPromise(); + + let files: any = _.sortBy(data.file_counts, ['delivery_date']); + + files = _.groupBy(files, (f) => new Date(f.delivery_date).getFullYear()); + Object.keys(files).forEach((key) => { + files[key] = _.groupBy(files[key], (f) => monthToThreeMountPeriod(new Date(f.delivery_date).getMonth())); + Object.keys(files[key]).forEach((key2) => { + files[key][key2] = _.reduce( + files[key][key2], + (result, obj) => { + return { + audio_files: result.audio_files + obj.audio_files, + image_files: result.image_files + obj.image_files, + video_files: result.video_files + obj.video_files, + size: result.size + obj.size / 1024, + }; + }, + { + audio_files: 0, + image_files: 0, + video_files: 0, + size: 0, + } + ); + }); + }); + + const categories = []; + const audio = []; + const video = []; + const images = []; + const size = []; + let audiot = 0; + let videot = 0; + let imagest = 0; + let sizet = 0; + + Object.keys(files).forEach((year) => { + Object.keys(files[year]).forEach((fourMonthPeriod) => { + categories.push(`${year}-0${fourMonthPeriod}`); + audiot += files[year][fourMonthPeriod].audio_files; + videot += files[year][fourMonthPeriod].video_files; + imagest += files[year][fourMonthPeriod].image_files; + sizet += files[year][fourMonthPeriod].size; + audio.push(audiot); + video.push(videot); + images.push(imagest); + size.push((sizet / 1000000).toFixed(2)); + }); + }); + + this.filesAudioChart.series = [ + { + name: 'Audio', + data: audio, + }, + ]; + this.filesAudioChart.xaxis = { + categories, + }; + + this.filesAccChart.series = [ + { + name: 'Video', + data: video, + }, + { + name: 'Imágenes', + data: images, + }, + ]; + + this.filesAccChart.xaxis = { + categories, + }; + + this.filesSizeAccChart.series = [ + { + name: 'TB', + data: size, + }, + ]; + + this.filesSizeAccChart.xaxis = { + categories, + }; + } catch (error) { + console.error('Error al obtener los archivos', error); + } + } + async getFiles() { let files: any = null; if (this.currentEcosystem !== 'todos') { @@ -428,19 +671,45 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { } } - files = files.sort((a, b) => a.delivery_date.localeCompare(b.delivery_date)); + files = _.sortBy(files, ['delivery_date']); + files = _.groupBy(files, (f) => new Date(f.delivery_date).getFullYear()); + Object.keys(files).forEach((key) => { + files[key] = _.groupBy(files[key], (f) => monthToThreeMountPeriod(new Date(f.delivery_date).getMonth())); + Object.keys(files[key]).forEach((key2) => { + files[key][key2] = _.reduce( + files[key][key2], + (result, obj) => { + return { + audio_files: result.audio_files + obj.audio_files, + image_files: result.image_files + obj.image_files, + video_files: result.video_files + obj.video_files, + size: result.size + obj.size / 1024, + }; + }, + { + audio_files: 0, + image_files: 0, + video_files: 0, + size: 0, + } + ); + }); + }); + const categories = []; const audio = []; const video = []; const images = []; const size = []; - files.forEach((delivery) => { - categories.push(delivery.delivery_date); - audio.push(delivery.audio_files ?? 0); - video.push(delivery.video_files ?? 0); - images.push(delivery.image_files ?? 0); - const sizeMB = delivery.size ?? 0; - size.push((sizeMB / 1024).toFixed(2)); + + Object.keys(files).forEach((year) => { + Object.keys(files[year]).forEach((threeMonthPeriod) => { + categories.push(`${year}-0${threeMonthPeriod}`); + audio.push(files[year][threeMonthPeriod].audio_files); + video.push(files[year][threeMonthPeriod].video_files); + images.push(files[year][threeMonthPeriod].image_files); + size.push((files[year][threeMonthPeriod].size / 1000000).toFixed(2)); + }); }); this.filesChart.series = [ @@ -463,7 +732,7 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { this.filesSizeChart.series = [ { - name: 'MB', + name: 'TB', data: size, }, ]; @@ -492,7 +761,13 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { }, }) .toPromise(); - let conSocio = visits.filter((v) => v.cumulus_visit.con_socio === 2); + + // Excluded Cumulus + // ---------------- + const excludedCumulus = ['22']; + const filteredVisits = visits.filter((v) => !excludedCumulus.includes(v?.cumulus_visit?.name)); + + let conSocio = filteredVisits.filter((v) => v.cumulus_visit.con_socio === 2); if (this.currentEcosystem !== 'todos') { conSocio = conSocio.filter((v) => v.cumulus_visit.ecosystem_id == this.currentEcosystem); @@ -523,6 +798,14 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { .reduce((previous, current) => previous + current, 0); dataReports.push(numReports); }); + + // We need this timeout to get the categories updated correctly on load. + await new Promise((resolve) => { + setTimeout(() => { + resolve(true); + }, updateTimeout); + }); + this.visitasChart.xaxis = { labels: { rotate: -90, @@ -605,157 +888,68 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { } } + /** + * Query for 'z1' Zendro server. + */ async getFormularios() { - const LIMIT = 500; - // pequeños mamiferos try { - let indOffset = 0; - let filteredIndividuals = []; - let indLastResults = 0; - - do { - const { - data: { individuals }, - }: any = await this.apollo - .query({ - query: getIndividuals, - variables: { - pagination: { - limit: LIMIT, - offset: indOffset, - }, - }, - }) - .toPromise(); - indOffset += LIMIT; - indLastResults = individuals?.length ?? 0; - filteredIndividuals = [...filteredIndividuals, ...individuals]; - } while (indLastResults >= LIMIT); - - if (this.currentEcosystem !== 'todos') { - filteredIndividuals = filteredIndividuals.filter( - (i) => - this.cumulusByEcosystem[this.currentEcosystem].findIndex((cum) => cum.id == i.associated_cumulus.id) > -1 - ); - } - - const individualsGroup = _.groupBy(filteredIndividuals, (i) => i.associated_cumulus.name); - - // dispositivos - - let depOffset = 0; - let filteredDeployments = []; - let depLastResults = 0; - - do { - const { - data: { deployments }, - }: any = await this.apollo - .query({ - query: getDeployments, - variables: { - pagination: { - limit: LIMIT, - offset: depOffset, - }, - }, - }) - .toPromise(); - - indOffset += LIMIT; - indLastResults = deployments?.length ?? 0; - filteredDeployments = [...filteredDeployments, ...deployments]; - } while (depLastResults >= LIMIT); - - if (this.currentEcosystem !== 'todos') { - filteredDeployments = filteredDeployments.filter( - (d) => this.cumulusByEcosystem[this.currentEcosystem].findIndex((cum) => cum.id == d.cumulus.id) > -1 - ); - } - const deploymentsGroup = _.groupBy(filteredDeployments, (d) => d.cumulus.name); - - // Transectos - let tranOffset = 0; - let filteredTransects = []; - let tranLastResults = 0; - - do { - const { - data: { transects }, - }: any = await this.apollo - .query({ - query: getTransects, - variables: { - pagination: { - limit: LIMIT, - offset: tranOffset, - }, + const { data } = (await this.apollo + .use('kzCounters') + .query({ + query: getKoboCounters, + variables: { + pagination: { + limit: 5000, + offset: 0, }, - }) - .toPromise(); - - tranOffset += LIMIT; - tranLastResults = transects?.length ?? 0; - filteredTransects = [...filteredTransects, ...transects]; - } while (tranLastResults >= LIMIT); - - if (this.currentEcosystem !== 'todos') { - filteredTransects = filteredTransects.filter( - (t) => - this.cumulusByEcosystem[this.currentEcosystem].findIndex((cum) => { - const cumulo = t.associated_node ? t.associated_node.nomenclatura.split('_')[1] : -1; - return cum.name == cumulo; - }) > -1 - ); - } - - const transectsGroup = _.groupBy(filteredTransects, (t) => { - const cumulo = t.associated_node ? t.associated_node.nomenclatura.split('_')[1] : -1; - if (cumulo === -1) { - console.log('//////', t); - } - return cumulo; - }); - - // join all - let byCumulo = {}; - - Object.keys(individualsGroup).forEach((i) => { - if (!!!byCumulo[i]) { - byCumulo[i] = {}; - } - byCumulo[i].mamiferos = individualsGroup[i].length; - }); - Object.keys(deploymentsGroup).forEach((d) => { - if (!!!byCumulo[d]) { - byCumulo[d] = {}; - } - byCumulo[d].camaras = deploymentsGroup[d].filter( - (deployment) => deployment.device.device.type.toLowerCase() === 'camara' - ).length; - byCumulo[d].grabadoras = deploymentsGroup[d].filter( - (deployment) => deployment.device.device.type.toLowerCase() === 'grabadora' - ).length; - }); - Object.keys(transectsGroup).forEach((i) => { - if (!!!byCumulo[i]) { - byCumulo[i] = {}; - } - byCumulo[i].transectos = transectsGroup[i].length; - }); + }, + }) + .toPromise()) as ApolloQueryResult<{ + kobo_counters: { + id: string; + cumulus: string; + name: string; + value: number; + kobo_asset_uid: string; + kobo_asset_name: string; + }[]; + }>; const categories = []; const camaras = []; const grabadoras = []; const mamiferos = []; - const transectos = []; + const eries = []; + + const camaras_name = 'Cámara Trampa'; + const grabadoras_name = 'Grabadora AudioMoth'; + const mamiferos_name = 'PM'; + const eries_name = 'ERIE'; + + const byCumulo = data.kobo_counters.reduce((acc, cur) => { + //case 1: new cumulus + if (!acc?.[cur.cumulus]) { + acc[cur.cumulus] = { [cur.name]: cur.value }; + } else { + //case 2: cumulus already exist + acc[cur.cumulus][cur.name] = cur.value + (acc[cur.cumulus][cur.name] ?? 0); + } + return acc; + }, {}); Object.keys(byCumulo).forEach((cumulo) => { categories.push(`Cúm ${cumulo}`); - camaras.push(byCumulo[cumulo].camaras ?? 0); - grabadoras.push(byCumulo[cumulo].grabadoras ?? 0); - mamiferos.push(byCumulo[cumulo].mamiferos ?? 0); - transectos.push(byCumulo[cumulo].transectos ?? 0); + camaras.push(byCumulo[cumulo][camaras_name] ?? 0); + grabadoras.push(byCumulo[cumulo][grabadoras_name] ?? 0); + mamiferos.push(byCumulo[cumulo][mamiferos_name] ?? 0); + eries.push(byCumulo[cumulo][eries_name] ?? 0); + }); + + // We need this timeout to get the categories updated correctly on load. + await new Promise((resolve) => { + setTimeout(() => { + resolve(true); + }, updateTimeout); }); this.formulariosChart.xaxis = { @@ -764,10 +958,11 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { }, categories: categories, }; + this.formulariosChart.series[0].data = camaras; this.formulariosChart.series[1].data = grabadoras; this.formulariosChart.series[2].data = mamiferos; - this.formulariosChart.series[3].data = transectos; + this.formulariosChart.series[3].data = eries; } catch (error) { console.log(error); } @@ -829,6 +1024,7 @@ export class TableroGeneralComponent implements OnInit, AfterViewInit { await this.getFormularios(); await this.getDevices(); await this.getFiles(); + await this.partition_files(); // this.getTransects(); } } diff --git a/src/app/graphql.module.ts b/src/app/graphql.module.ts index b870830..057f460 100644 --- a/src/app/graphql.module.ts +++ b/src/app/graphql.module.ts @@ -1,6 +1,6 @@ import { HttpHeaders } from '@angular/common/http'; import { NgModule } from '@angular/core'; -import { APOLLO_OPTIONS } from 'apollo-angular'; +import { APOLLO_OPTIONS, APOLLO_NAMED_OPTIONS, NamedOptions } from 'apollo-angular'; import { ApolloClientOptions, ApolloLink, @@ -11,10 +11,12 @@ import { } from '@apollo/client/core'; import { onError } from '@apollo/client/link/error'; import { HttpLink } from 'apollo-angular/http'; +import { HttpClientModule } from '@angular/common/http'; import { environment } from '@env/environment'; const uri = `${environment.serverUrl}/graphql`; // <-- add the URL of the GraphQL server here +const kzCountersUri = `${environment.kzCountersUrl}/graphql`; export function createApollo(httpLink: HttpLink): ApolloClientOptions { const http = httpLink.create({ uri }); @@ -103,13 +105,42 @@ const getNewToken = async (): Promise => { } }; +export function createNamedApollo(httpLink: HttpLink): NamedOptions { + const defaultOptions: DefaultOptions = { + watchQuery: { + fetchPolicy: 'network-only', //'cache-and-network' + }, + query: { + fetchPolicy: 'no-cache', + }, + }; + + return { + kzCounters: { + name: 'kzCounters', + link: httpLink.create({ + uri: kzCountersUri, + }), + cache: new InMemoryCache({ + addTypename: false, + }), + }, + }; +} + @NgModule({ + exports: [HttpClientModule], providers: [ { provide: APOLLO_OPTIONS, useFactory: createApollo, deps: [HttpLink], }, + { + provide: APOLLO_NAMED_OPTIONS, + useFactory: createNamedApollo, + deps: [HttpLink], + }, ], }) export class GraphQLModule {} diff --git a/src/app/mapa/mapa.component.ts b/src/app/mapa/mapa.component.ts index 2bc3a94..494f13b 100644 --- a/src/app/mapa/mapa.component.ts +++ b/src/app/mapa/mapa.component.ts @@ -43,7 +43,7 @@ export class MapaComponent implements OnInit { layers = { integridad_ecosistemica: - 'https://monitoreo.conabio.gob.mx/geoserver/geoportal/wms?service=WMS&version=1.1.0&request=GetMap&layers=geoportal:mex_ie_2014_250m&styles=&bbox={bbox-epsg-3857}&width=768&height=436&srs=EPSG:3857&format=image%2Fpng&transparent=true', + 'https://biodiversidad.gob.mx/geoserver/cnb/wms?service=WMS&version=1.1.0&request=GetMap&layers=cnb:ie2014_1kmgw&styles=&bbox={bbox-epsg-3857}&width=768&height=436&srs=EPSG:3857&format=image%2Fpng&transparent=true', vegetacion: 'https://monitoreo.conabio.gob.mx/geoserver/geoportal/wms?service=WMS&version=1.1.0&request=GetMap&layers=geoportal:mex_RE_2015_8_clases&styles=&bbox={bbox-epsg-3857}&width=768&height=456&srs=EPSG:3857&format=image%2Fpng&transparent=true', perdida_vegetacion: diff --git a/src/assets/bg/Fauna_Flora_SiPeCaM-02.png b/src/assets/bg/Fauna_Flora_SiPeCaM-02.png new file mode 100644 index 0000000..89d482b Binary files /dev/null and b/src/assets/bg/Fauna_Flora_SiPeCaM-02.png differ diff --git a/src/assets/bg/Fauna_Flora_SiPeCaM-03.png b/src/assets/bg/Fauna_Flora_SiPeCaM-03.png new file mode 100644 index 0000000..a5c8db1 Binary files /dev/null and b/src/assets/bg/Fauna_Flora_SiPeCaM-03.png differ diff --git a/src/assets/bg/Fauna_Flora_SiPeCaM-04.png b/src/assets/bg/Fauna_Flora_SiPeCaM-04.png new file mode 100644 index 0000000..23a35ad Binary files /dev/null and b/src/assets/bg/Fauna_Flora_SiPeCaM-04.png differ diff --git a/src/assets/bg/Fauna_Flora_SiPeCaM-05.png b/src/assets/bg/Fauna_Flora_SiPeCaM-05.png new file mode 100644 index 0000000..1b91842 Binary files /dev/null and b/src/assets/bg/Fauna_Flora_SiPeCaM-05.png differ diff --git a/src/assets/bg/Fauna_Flora_SiPeCaM-06.png b/src/assets/bg/Fauna_Flora_SiPeCaM-06.png new file mode 100644 index 0000000..cd1b2c4 Binary files /dev/null and b/src/assets/bg/Fauna_Flora_SiPeCaM-06.png differ diff --git a/src/assets/bg/Fauna_Flora_SiPeCaM-07.png b/src/assets/bg/Fauna_Flora_SiPeCaM-07.png new file mode 100644 index 0000000..2ee38c5 Binary files /dev/null and b/src/assets/bg/Fauna_Flora_SiPeCaM-07.png differ diff --git a/src/assets/bg/Fauna_Flora_SiPeCaM-08.png b/src/assets/bg/Fauna_Flora_SiPeCaM-08.png new file mode 100644 index 0000000..765ea70 Binary files /dev/null and b/src/assets/bg/Fauna_Flora_SiPeCaM-08.png differ diff --git a/src/assets/bg/bg-02.jpg b/src/assets/bg/bg-02.jpg new file mode 100644 index 0000000..e73728c Binary files /dev/null and b/src/assets/bg/bg-02.jpg differ diff --git a/src/assets/bg/bg-03.jpg b/src/assets/bg/bg-03.jpg new file mode 100644 index 0000000..1360796 Binary files /dev/null and b/src/assets/bg/bg-03.jpg differ diff --git a/src/assets/bg/bg-07.jpg b/src/assets/bg/bg-07.jpg new file mode 100644 index 0000000..4d42bf3 Binary files /dev/null and b/src/assets/bg/bg-07.jpg differ diff --git a/src/assets/bg/bg-10.jpg b/src/assets/bg/bg-10.jpg new file mode 100644 index 0000000..eb50137 Binary files /dev/null and b/src/assets/bg/bg-10.jpg differ diff --git a/src/assets/bg/bg-12.jpg b/src/assets/bg/bg-12.jpg new file mode 100644 index 0000000..1523aac Binary files /dev/null and b/src/assets/bg/bg-12.jpg differ diff --git a/src/assets/bg/bg-13.jpg b/src/assets/bg/bg-13.jpg new file mode 100644 index 0000000..4b12d3f Binary files /dev/null and b/src/assets/bg/bg-13.jpg differ diff --git a/src/assets/bg/bg-14.jpg b/src/assets/bg/bg-14.jpg new file mode 100644 index 0000000..eefc72d Binary files /dev/null and b/src/assets/bg/bg-14.jpg differ diff --git a/src/assets/bg/bg-15.jpg b/src/assets/bg/bg-15.jpg new file mode 100644 index 0000000..2f77e2f Binary files /dev/null and b/src/assets/bg/bg-15.jpg differ diff --git a/src/assets/bg/bg-16.jpg b/src/assets/bg/bg-16.jpg new file mode 100644 index 0000000..d28eecf Binary files /dev/null and b/src/assets/bg/bg-16.jpg differ diff --git a/src/assets/bg/bg-18.jpg b/src/assets/bg/bg-18.jpg new file mode 100644 index 0000000..1d20e3d Binary files /dev/null and b/src/assets/bg/bg-18.jpg differ diff --git a/src/assets/bg/bg-20.jpg b/src/assets/bg/bg-20.jpg new file mode 100644 index 0000000..9480cd8 Binary files /dev/null and b/src/assets/bg/bg-20.jpg differ diff --git a/src/assets/bg/bg-21.jpg b/src/assets/bg/bg-21.jpg new file mode 100644 index 0000000..33b68b5 Binary files /dev/null and b/src/assets/bg/bg-21.jpg differ diff --git a/src/assets/equipo/Alex.jpg b/src/assets/equipo/Alex.jpg new file mode 100644 index 0000000..7ffdb75 Binary files /dev/null and b/src/assets/equipo/Alex.jpg differ diff --git a/src/assets/equipo/Francisco.jpg b/src/assets/equipo/Francisco.jpg new file mode 100644 index 0000000..8da240d Binary files /dev/null and b/src/assets/equipo/Francisco.jpg differ diff --git a/src/assets/equipo/Miguel.jpg b/src/assets/equipo/Miguel.jpg new file mode 100644 index 0000000..d877da6 Binary files /dev/null and b/src/assets/equipo/Miguel.jpg differ diff --git a/src/assets/equipo/Pedro_Romero.jpg b/src/assets/equipo/Pedro_Romero.jpg new file mode 100644 index 0000000..0bab912 Binary files /dev/null and b/src/assets/equipo/Pedro_Romero.jpg differ diff --git a/src/assets/equipo/Romeo.jpg b/src/assets/equipo/Romeo.jpg new file mode 100644 index 0000000..2353af5 Binary files /dev/null and b/src/assets/equipo/Romeo.jpg differ diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index 4af5a2b..f04d787 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -11,6 +11,7 @@ export const environment = { hmr: false, version: env.npm_package_version, serverUrl: 'https://gql.sipecamdata.conabio.gob.mx', + kzCountersUrl: 'https://gql.sipecamdata.conabio.gob.mx/z1', defaultLanguage: 'en-US', supportedLanguages: ['en-US'], mapbox: { diff --git a/src/environments/environment.ts b/src/environments/environment.ts index a043930..e85f219 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -15,6 +15,7 @@ export const environment = { hmr: true, version: env.npm_package_version + '-dev', serverUrl: 'https://gql.sipecamdata.conabio.gob.mx', + kzCountersUrl: 'https://gql.sipecamdata.conabio.gob.mx/z1', defaultLanguage: 'en-US', supportedLanguages: ['en-US'], mapbox: { diff --git a/src/index.html b/src/index.html index 154578d..645320b 100644 --- a/src/index.html +++ b/src/index.html @@ -12,6 +12,8 @@ + +