✨ Agregar definiciones indicadores

aplicaciones/www/src/Aplicacion.vue

@@ -12,6 +12,7 @@ import SobreProyecto from './componentes/SobreProyecto.vue';
 import { ElementoPaisaje } from './tipos';
 import Podcast from './componentes/Podcast.vue';
 import type { Punto } from '@/tipos/compartidos';
+import FichaIndicadores from './componentes/FichaIndicadores.vue';
 
 const puntos: Ref<Punto[]> = ref([]);
 const puntosUbicados: Ref<Punto[]> = ref([]);
@@ -292,7 +293,8 @@ function numeroAleatorio(maximo: number) {
       :podcast="podcastElegido ? podcastElegido : undefined"
       :cerrar="cerrarFicha"
     />
-    <VisualizacionIndices />
+    <VisualizacionIndices :multiplicadorAncho="8.01" />
+    <FichaIndicadores />
   </div>
 </template>
 
@@ -376,6 +378,7 @@ function numeroAleatorio(maximo: number) {
     animation-name: cambioColor;
     animation-duration: 3s;
     animation-iteration-count: infinite;
+    box-shadow: 5px 9px 7px #59593d;
   }
 }
 
@@ -479,10 +482,6 @@ function numeroAleatorio(maximo: number) {
   z-index: 9;
 }
 
-.botonAbrir {
-  cursor: pointer;
-}
-
 #contenedorIconos {
   display: flex;
   flex-direction: column;

aplicaciones/www/src/componentes/FichaIndicadores.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { onMounted, ref, type Ref } from 'vue';
+import type { ElementoPaisaje } from '../tipos';
+import { usarCerebro } from '../utilidades/cerebro';
+import { base } from '@/utilidades/ayudas';
+
+defineProps<{ id: string; cerrar: () => void }>();
+
+const cerebro = usarCerebro();
+
+function cerrar() {
+  cerebro.indicadoresVisible = false;
+}
+
+onMounted(() => {});
+</script>
+
+<template>
+  <div v-if="cerebro.indicadoresVisible" id="fichaIndicadores" class="ficha">
+    <span id="cerrar" @click="cerrar">X</span>
+
+    <div id="etiquetas">
+      <h2>Índices</h2>
+      <p>
+        Esta gráfica muestra siete índices medidos durante la investigación a lo largo de la Carrera Séptima. Los
+        valores van de 0 a 1.
+      </p>
+      <p class="infoIndicador">
+        <span id="etiqAmbiente" class="etiquetaDatos">Ambiente:</span> Son las condiciones del entorno natural que puede
+        ser afectado por las intervenciones urbanas de la ciudad. Para este proyecto, las condiciones de ambiente se
+        miden a partir de la calidad del ruido y el aire, el arbolado urbano y la avifauna.
+      </p>
+      <p class="infoIndicador">
+        <span id="etiqCaminabilidad" class="etiquetaDatos">Caminabilidad:</span> Se refiere a la capacidad que tienen
+        las personas de moverse caminando por la infraestructura pública.
+      </p>
+      <p class="infoIndicador">
+        <span id="etiqHabitabilidad" class="etiquetaDatos">Habitabilidad:</span> La habitabilidad hace referencia a un
+        barrio seguro, con un ambiente sin contaminación, hogar cerca al transporte, donde se puede caminar y andar en
+        bicicleta y está cerca de servicios de salud, educación, cultura y recreación (Badland, 2014). En pocas
+        palabras, ¿qué tan chévere es vivir en esta ciudad?
+      </p>
+      <p class="infoIndicador">
+        <span id="etiqInfraestructura" class="etiquetaDatos">Infraestructura:</span> Se refiere a la provisión de
+        infraestructura pública y social para que las personas accedan a servicios esenciales y tengan espacios de
+        encuentro. Se mide a través de espacio público efectivo que tiene un carácter permanente, como zonas verdes,
+        parques, plazas y plazoletas. También a través de indicadores como la caminabilidad, la proximidad a estos
+        servicios esenciales, la seguridad y la comodidad para desplazarse en las vías.
+      </p>
+      <p class="infoIndicador">
+        <span id="etiqMovilidad" class="etiquetaDatos">Movilidad:</span> La movilidad se refiere a la capacidad de las
+        personas para ocupar, usar y desplazarse en el espacio público para acceder a bienes y servicios de la ciudad,
+        oportunidades de trabajo, educación, recreación y otros espacios de convivencia. La inversión en infraestructura
+        de transporte no solo facilita la movilidad, sino que también promueve la equidad social al proporcionar acceso
+        a oportunidades a todos los estratos poblacionales.
+      </p>
+      <p class="infoIndicador">
+        <span id="etiqProximidad" class="etiquetaDatos">Proximidad:</span> Se refiere a la capacidad que tiene una
+        persona en un determinado lugar a acceder caminando a sus necesidades básicas y a trabajo, salud, educación y
+        parques, cerca a su vivienda y sin tener que moverse en carro o en moto.
+      </p>
+      <p class="infoIndicador">
+        <span id="etiqSeguridad" class="etiquetaDatos">Seguridad:</span>La seguridad se refiere a la capacidad que
+        tienen las personas de usar el espacio público con tranquilidad, a diferentes horas del día y sin importar su
+        edad, género, raza y condición social.
+      </p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.tituloContenido {
+  display: inline-flex;
+  align-items: center;
+  .iconoFicha {
+    margin-right: 1em;
+    background: transparent;
+  }
+}
+
+#etiquetas {
+  display: flex;
+  flex-direction: column;
+}
+
+.etiquetaDatos {
+  margin: 0;
+}
+</style>

aplicaciones/www/src/componentes/FichaLugar.vue

@@ -119,24 +119,6 @@ onMounted(() => {
   <div class="ficha fichaLugar">
     <span id="cerrar" @click="cerrar">X</span>
 
-    <!--   <h2>{{ cerebro.lugarElegido?.replace('-', ' ') }}</h2> -->
-    <!--     <div v-if="hayPodcast" class="contenedorPodcast">
-      <div class="tituloContenido">
-        <img class="iconoFicha iconoPodcast" src="/imagenes/icono_podcast.png" />
-        <h3>{{ nombrePodcast }}</h3>
-      </div>
-      <iframe
-        style="border-radius: 12px"
-        src="https://open.spotify.com/embed/episode/4KLNWodM68BNvhxlmKY7fu?utm_source=generator"
-        width="100%"
-        height="152"
-        frameBorder="0"
-        allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-        loading="lazy"
-      ></iframe>
-      <p v-html="descripcionPodcast"></p>
-    </div> -->
-
     <div v-if="hayPerfil" class="contenedorPersonaje">
       <div class="tituloContenido">
         <img class="iconoFicha iconoPerfil" :src="`${base}/imagenes/icono_perfil.png`" />
@@ -164,6 +146,7 @@ onMounted(() => {
   .iconoFicha {
     margin-right: 1em;
     background: transparent;
+    height: 45px;
   }
 }
 

aplicaciones/www/src/componentes/VisualizacionIndices.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { onMounted, ref, Ref } from 'vue';
+import { onMounted, ref, Ref, defineProps } from 'vue';
 import { convertirEscala, distanciaEntreCoordenadas } from '../utilidades/ayudas';
 import { Punto } from '@/tipos/compartidos';
+import { usarCerebro } from '@/utilidades/cerebro';
 
 /* async function cargarDatos() {
   try {
@@ -15,10 +16,13 @@ import { Punto } from '@/tipos/compartidos';
 
 cargarDatos().catch(console.error); */
 
+const props = defineProps<{ multiplicadorAncho: number }>();
+
+const cerebro = usarCerebro();
 const infoPuntoA: Ref<HTMLElement | null> = ref(null);
 const calles: Ref<HTMLElement | null> = ref(null);
 
-const multiplicadorAncho: number = 8.01; //0.96; // medida en vw
+//const multiplicadorAncho: number = 8.01; //0.96; // medida en vw
 const alturaContenedor: number = 250; // Debe ser la misma que #contenedorTrazos
 
 let puntoElegido: Ref<Punto | null> = ref(null);
@@ -212,7 +216,7 @@ onMounted(async () => {
       distanciaParcial = distanciaEntreCoordenadas(puntoA.lat, puntoA.lon, puntoB.lat, puntoB.lon);
 
       distanciaTotal += distanciaParcial;
-      const x = convertirEscala(distanciaTotal, 0, 25, 20, window.innerWidth * multiplicadorAncho);
+      const x = convertirEscala(distanciaTotal, 0, 25, 20, window.innerWidth * props.multiplicadorAncho);
 
       // Definir posición en y de cada punto por indicador
       const yInfraestructura = alturaContenedor - puntoB.infraestructura * alturaContenedor;
@@ -381,13 +385,13 @@ onMounted(async () => {
         en cada punto, los datos de cada indicador:
       </p>
       <div id="etiquetas">
-        <p class="etiquetaDatos" id="etiqAmbiente">Ambiente</p>
-        <p class="etiquetaDatos" id="etiqCaminabilidad">Caminabilidad</p>
-        <p class="etiquetaDatos" id="etiqHabitabilidad">Habitabilidad</p>
-        <p class="etiquetaDatos" id="etiqInfraestructura">Infraestructura</p>
-        <p class="etiquetaDatos" id="etiqMovilidad">Movilidad</p>
-        <p class="etiquetaDatos" id="etiqProximidad">Proximidad</p>
-        <p class="etiquetaDatos" id="etiqSeguridad">Seguridad</p>
+        <p @click="cerebro.indicadoresVisible = true" class="etiquetaDatos" id="etiqAmbiente">Ambiente</p>
+        <p @click="cerebro.indicadoresVisible = true" class="etiquetaDatos" id="etiqCaminabilidad">Caminabilidad</p>
+        <p @click="cerebro.indicadoresVisible = true" class="etiquetaDatos" id="etiqHabitabilidad">Habitabilidad</p>
+        <p @click="cerebro.indicadoresVisible = true" class="etiquetaDatos" id="etiqInfraestructura">Infraestructura</p>
+        <p @click="cerebro.indicadoresVisible = true" class="etiquetaDatos" id="etiqMovilidad">Movilidad</p>
+        <p @click="cerebro.indicadoresVisible = true" class="etiquetaDatos" id="etiqProximidad">Proximidad</p>
+        <p @click="cerebro.indicadoresVisible = true" class="etiquetaDatos" id="etiqSeguridad">Seguridad</p>
       </div>
     </div>
 
@@ -459,6 +463,7 @@ onMounted(async () => {
   border-bottom: 2px solid;
   width: fit-content;
   margin: 0 2em 0.5em 0em;
+  cursor: pointer;
 }
 
 #etiqHabitabilidad {

aplicaciones/www/src/scss/_general.scss

@@ -32,6 +32,15 @@ body {
   padding: 5em 6em;
 }
 
+.botonAbrir {
+  cursor: pointer;
+  border-radius: 50%;
+  display: block;
+  padding: 0.5em;
+  text-align: center;
+  z-index: 10;
+}
+
 #cerrar {
   position: absolute;
   right: 10px;

aplicaciones/www/src/tipos.ts

@@ -17,4 +17,5 @@ export interface Cerebro {
   fichaVisible: boolean;
   infoVisible: boolean;
   podcastVisible: boolean;
+  indicadoresVisible: boolean;
 }

aplicaciones/www/src/utilidades/cerebro.ts

@@ -9,6 +9,7 @@ export const usarCerebro = defineStore('cerebro', {
       fichaVisible: false,
       infoVisible: true,
       podcastVisible: false,
+      indicadoresVisible: true,
     };
   },