574 lines
23 KiB
Vue
574 lines
23 KiB
Vue
<template>
|
|
<section class="relative">
|
|
<!-- Left Sidebar -->
|
|
<aside
|
|
v-if="showSidebar"
|
|
class="fixed left-0 top-0 w-80 h-screen bg-gradient-to-br from-purple-900 via-purple-950 to-indigo-950 text-white overflow-y-auto z-50 shadow-2xl sidebar-custom"
|
|
>
|
|
<div class="p-5 border-b border-white/10">
|
|
<img src="/LOGOBraviooB.png" alt="logo-bravio" class="h-10 md:h-14 object-cover" />
|
|
</div>
|
|
|
|
<div class="p-5">
|
|
<div class="flex justify-between items-center mb-3">
|
|
<h2 class="text-lg font-semibold">
|
|
{{ langcode === 'pt' ? 'Explorar instituições' : 'Explorar instituciones' }}
|
|
</h2>
|
|
</div>
|
|
|
|
<p class="text-sm opacity-80 mb-5 leading-relaxed">
|
|
{{ langcode === 'pt'
|
|
? 'Busque por universidade, país e estado da Defensoria.'
|
|
: 'Busca por universidad, país y estado de Defensoría.' }}
|
|
</p>
|
|
|
|
<!-- Search -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm mb-2 font-medium">
|
|
{{ langcode === 'pt' ? 'Buscar Universidade' : 'Buscar Universidad' }}
|
|
</label>
|
|
<div class="relative">
|
|
<input
|
|
v-model="searchQuery"
|
|
type="text"
|
|
:placeholder="langcode === 'pt' ? 'Buscar...' : 'Buscar...'"
|
|
class="w-full px-3 py-2.5 pr-10 bg-white/10 border border-white/20 rounded-md text-white text-sm placeholder-white/50 focus:outline-none focus:bg-white/15 focus:border-white/40 transition-all"
|
|
/>
|
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 opacity-60">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-search-icon lucide-search"><path d="m21 21-4.34-4.34"/><circle cx="11" cy="11" r="8"/></svg>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Country -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm mb-2 font-medium">
|
|
{{ langcode === 'pt' ? 'País' : 'País' }}
|
|
</label>
|
|
<select
|
|
v-model="selectedCountry"
|
|
class="w-full px-3 py-2.5 bg-white/10 border border-white/20 rounded-md text-white text-sm appearance-none cursor-pointer focus:outline-none focus:bg-white/15 focus:border-white/40 transition-all"
|
|
>
|
|
<option value="">{{ langcode === 'pt' ? 'Selecionar' : 'Seleccionar' }}</option>
|
|
<option v-for="c in countries" :key="c.value" :value="c.value">
|
|
{{ c[langcode] }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div class="mb-4">
|
|
<label class="block text-sm mb-2 font-medium">
|
|
{{ langcode === 'pt' ? 'Estado da Defensoria' : 'Estado Defensoría' }}
|
|
</label>
|
|
<select
|
|
v-model="selectedStatus"
|
|
class="w-full px-3 py-2.5 bg-white/10 border border-white/20 rounded-md text-white text-sm appearance-none cursor-pointer focus:outline-none focus:bg-white/15 focus:border-white/40 transition-all"
|
|
>
|
|
<option value="">{{ langcode === 'pt' ? 'Selecionar' : 'Seleccionar' }}</option>
|
|
<option value="activa">{{ langcode === 'pt' ? 'Ativa' : 'Activa' }}</option>
|
|
<option value="en-desarrollo">{{ langcode === 'pt' ? 'Em desenvolvimento' : 'En desarrollo' }}</option>
|
|
<option value="en-estudio">{{ langcode === 'pt' ? 'Em estudo' : 'En estudio' }}</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Clear -->
|
|
<div class="w-full flex">
|
|
<button
|
|
class="w-fit p-2.5 ml-auto bg-transparent border border-white/30 text-white/90 rounded-md cursor-pointer text-xs"
|
|
@click="clearFilters"
|
|
>
|
|
{{ langcode === 'pt' ? 'LIMPAR' : 'LIMPIAR' }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Counts -->
|
|
<div class="my-5 py-4 border-t border-b border-white/10">
|
|
<p class="text-sm mb-3">
|
|
{{ langcode === 'pt' ? 'Mostrando' : 'Mostrando' }}
|
|
{{ filteredResults.length }}
|
|
{{ langcode === 'pt' ? 'de' : 'de' }}
|
|
{{ universities.length }}
|
|
{{ langcode === 'pt' ? 'universidades' : 'universidades' }}
|
|
</p>
|
|
<div class="flex gap-2.5 text-surface">
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-white/90">
|
|
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-cyan-400"></span>
|
|
{{ activaCount }}
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-white/90">
|
|
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-orange-400"></span>
|
|
{{ desarrolloCount }}
|
|
</span>
|
|
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs font-semibold bg-white/90">
|
|
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-rose-400"></span>
|
|
{{ estudioCount }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Download -->
|
|
<button
|
|
class="w-full py-2.5 bg-transparent text-white/90 cursor-pointer text-xs mb-3 hover:underline flex items-end justify-end gap-2.5"
|
|
@click="downloadCSV"
|
|
>
|
|
{{ langcode === 'pt' ? 'Baixar CSV' : 'Descargar CSV' }}
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download-icon lucide-download"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg></span>
|
|
</button>
|
|
|
|
<!-- University List -->
|
|
<div class="flex flex-col gap-2.5">
|
|
<div
|
|
v-for="u in filteredResults"
|
|
:key="u.id"
|
|
class="bg-white/90 text-bg p-4 rounded-lg cursor-pointer transition-all border-2 border-transparent hover:bg-white/70 min-h-32 flex flex-col justify-between"
|
|
:class="{ 'border-white/30 bg-white/15': selectedUniversity?.id === u.id }"
|
|
@click="selectUniversity(u)"
|
|
>
|
|
<div class="">
|
|
<h3 class="text-base font-semibold mb-1">{{ u.university[langcode] }}</h3>
|
|
<p class="text-xs opacity-80 mb-2">{{ u.city[langcode] }}, {{ u.country[langcode] }}</p>
|
|
</div>
|
|
<span class="inline-flex items-center gap-1.5 text-xs font-medium">
|
|
<span
|
|
class="w-3.5 h-3.5 rounded-full border-2 border-white inline-block"
|
|
:class="{
|
|
'bg-cyan-400': u.status === 'activa',
|
|
'bg-orange-400': u.status === 'en-desarrollo',
|
|
'bg-rose-400': u.status === 'en-estudio'
|
|
}"
|
|
></span>
|
|
{{ getStatusLabel(u.status) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Botón de colapsar / expandir -->
|
|
<button
|
|
class="aside-colap-btn fixed top-5 z-50 bg-white hover:bg-white/80 hover:cursor-pointer text-surface w-8 h-8 rounded-l-none rounded-r-md flex items-center justify-center shadow-lg transition-all"
|
|
:class="[
|
|
showSidebar
|
|
? 'left-80'
|
|
: 'left-0'
|
|
]"
|
|
@click="showSidebar = !showSidebar"
|
|
>
|
|
<svg
|
|
v-if="showSidebar"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="m15 18-6-6 6-6" />
|
|
</svg>
|
|
|
|
<svg
|
|
v-else
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="m9 18 6-6-6-6" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Contenedor del mapa -->
|
|
<div id="mapContainer" class="map-container relative" style="width:100%;height:100vh;">
|
|
<!-- *** Overlay de marcadores gestionados por Vue (está dentro del mapContainer) *** -->
|
|
<div id="mapMarkers" class="absolute inset-0 pointer-events-none z-40">
|
|
<div
|
|
v-for="u in filteredResults"
|
|
:key="u.id"
|
|
class="marker pointer-events-auto"
|
|
:style="getMarkerStyle(u)"
|
|
@click="selectUniversity(u)"
|
|
>
|
|
<!-- elemento visual del punto — sin transform en hover -->
|
|
<div
|
|
class="marker-dot w-5 h-5 rounded-full border-[3px] border-white shadow-md"
|
|
:style="{ backgroundColor: getMarkerColor(u.status) }"
|
|
title="Click para ir"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<!-- El mapa se inicializa en este div -->
|
|
<!-- Nota: el overlay está dentro, así las coordenadas proyectadas encajan exactamente -->
|
|
</div>
|
|
|
|
<!-- Leyenda de estados + selector de idioma -->
|
|
<div class="fixed bottom-5 right-5 text-sm text-bg z-[1000] min-w-44">
|
|
<div class="flex flex-col justify-between items-start gap-2 w-full">
|
|
<!-- Selector de idioma -->
|
|
<div class="w-full">
|
|
<select
|
|
v-model="selectedLanguage"
|
|
class="px-2 py-1 rounded-md border border-gray-300 bg-white/90 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full"
|
|
@change="changeLanguage(selectedLanguage)"
|
|
>
|
|
<option value="es">Español</option>
|
|
<option value="pt">Português</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Columna de estados -->
|
|
<div class="bg-white/90 p-4 rounded-lg text-xs w-full">
|
|
<h3 class="font-semibold mb-1">
|
|
{{ langcode === 'pt' ? 'Estado' : 'Estado' }}
|
|
</h3>
|
|
<ul class="space-y-1">
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-cyan-400"></span>
|
|
<span>{{ langcode === 'pt' ? 'Ativa' : 'Activa' }}</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-orange-400"></span>
|
|
<span>{{ langcode === 'pt' ? 'Em desenvolvimento' : 'En desarrollo' }}</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-3.5 h-3.5 rounded-full border-2 border-white bg-rose-400"></span>
|
|
<span>{{ langcode === 'pt' ? 'Sem defensoria' : 'Sin defensoría' }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Sidebar - University Details -->
|
|
<aside
|
|
v-if="selectedUniversity && showRightSidebar"
|
|
class="fixed right-0 top-0 w-80 h-screen bg-surface text-white overflow-y-auto z-50 shadow-2xl sidebar-custom"
|
|
>
|
|
<!-- Header -->
|
|
<div class="p-5 border-b border-white/10 flex justify-between items-start bg-bg">
|
|
<div class="flex-1">
|
|
<div v-if="selectedUniversity.logo" class="mb-4">
|
|
<img :src="selectedUniversity.logo" :alt="`Logo ${selectedUniversity.university[langcode]}`" class="h-16 md:h-18 w-fit object-cover" />
|
|
</div>
|
|
<h2 class="text-xl font-bold mb-2">{{ selectedUniversity.university[langcode] }}</h2>
|
|
<p class="text-xs opacity-80">{{ selectedUniversity.city[langcode] }}, {{ selectedUniversity.country[langcode] }}</p>
|
|
<div class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg text-xs bg-white/90 text-surface mt-4">
|
|
<span
|
|
class="w-3.5 h-3.5 rounded-full border-2 border-white inline-block"
|
|
:class="{
|
|
'bg-cyan-400': selectedUniversity.status === 'activa',
|
|
'bg-orange-400': selectedUniversity.status === 'en-desarrollo',
|
|
'bg-rose-400': selectedUniversity.status === 'en-estudio'
|
|
}"
|
|
></span>
|
|
{{ getStatusLabel(selectedUniversity.status) }}
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="bg-white/90 hover:bg-surface-light text-surface transition-colors rounded-sm"
|
|
@click="closeRightSidebar"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 6 6 18"/><path d="m6 6 12 12"/>
|
|
</svg>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
<!-- Information Section -->
|
|
<div class="p-5">
|
|
<h3 class="text-base mb-4">
|
|
{{ langcode === 'pt' ? 'Informação' : 'Información' }}
|
|
</h3>
|
|
|
|
<div class="space-y-3 text-sm">
|
|
<!-- Estado -->
|
|
<div>
|
|
<span class="font-semibold">{{ langcode === 'pt' ? 'Estado:' : 'Estado:' }}</span>
|
|
<span class="ml-2 text-muted">{{ getStatusLabel(selectedUniversity.status) }}</span>
|
|
</div>
|
|
|
|
<!-- Web -->
|
|
<div v-if="selectedUniversity.web">
|
|
<span class="font-semibold">Web:</span>
|
|
<a
|
|
:href="selectedUniversity.web"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="ml-2 text-cyan-300 hover:text-cyan-400 inline-flex items-center gap-1 cursor-pointer"
|
|
>
|
|
{{ selectedUniversity.web }}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Defensor -->
|
|
<div v-if="selectedUniversity.defensor" class="flex flex-col gap-2">
|
|
<span class="font-semibold">{{ langcode === 'pt' ? 'Defensor:' : 'Defensor:' }}</span>
|
|
<span v-for="def in selectedUniversity.defensor" :key="def" class="ml-2 text-muted">{{ def }}</span>
|
|
</div>
|
|
|
|
<!-- Sedes -->
|
|
<div v-if="selectedUniversity.campus" class="flex flex-col gap-2">
|
|
<span class="font-semibold">{{ langcode === 'pt' ? 'Campi:' : 'Sedes:' }}</span>
|
|
<span v-for="camp in selectedUniversity.campus" :key="camp" class="ml-2 text-muted">{{ camp[langcode] }}</span>
|
|
</div>
|
|
|
|
<!-- Contacto -->
|
|
<div v-if="selectedUniversity.contact" class="flex flex-col gap-2">
|
|
<span class="font-semibold">{{ langcode === 'pt' ? 'Contato:' : 'Contacto:' }}</span>
|
|
<a
|
|
v-for="cont in selectedUniversity.contact" :key="cont"
|
|
:href="`mailto:${cont}`"
|
|
class="ml-2 text-cyan-300 hover:text-cyan-200"
|
|
>
|
|
{{ cont }}
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Teléfono -->
|
|
<div v-if="selectedUniversity.telephone">
|
|
<span class="font-semibold">{{ langcode === 'pt' ? 'Telefone:' : 'Teléfono:' }}</span>
|
|
<span class="ml-2 text-muted">{{ selectedUniversity.telephone }}</span>
|
|
</div>
|
|
|
|
<!-- Año de creación -->
|
|
<div v-if="selectedUniversity.yearOfCreation">
|
|
<span class="font-semibold">{{ langcode === 'pt' ? 'Ano de criação:' : 'Año de creación:' }}</span>
|
|
<span class="ml-2 text-muted">{{ selectedUniversity.yearOfCreation }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Share Button -->
|
|
<!-- <div class="px-5 pb-5 border-t border-white/10 pt-5">
|
|
<button
|
|
class="w-full px-4 py-2.5 bg-transparent border border-white/30 rounded-lg text-sm font-medium hover:bg-white/10 transition-colors flex items-center justify-center gap-2"
|
|
@click="shareUniversity"
|
|
>
|
|
{{ langcode === 'pt' ? 'COMPARTILHAR LINK' : 'COMPARTIR ENLACE' }}
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/>
|
|
</svg>
|
|
</button>
|
|
</div> -->
|
|
</aside>
|
|
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import mapboxgl from 'mapbox-gl'
|
|
import { mapGetters, mapActions } from 'vuex'
|
|
import universitiesData from '@/data/universities.json'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
accessToken: 'pk.eyJ1IjoibWFyaWFzYXNvIiwiYSI6ImNsYThnemI4bjAzYzEzdm52cG1jZnptbXQifQ.CK4LGjX7ZFCVr-unLdzUSQ',
|
|
map: null,
|
|
universities: universitiesData,
|
|
searchQuery: '',
|
|
selectedCountry: '',
|
|
selectedStatus: '',
|
|
selectedLanguage: 'es',
|
|
selectedUniversity: null,
|
|
showSidebar: true,
|
|
showRightSidebar: true,
|
|
countries: [
|
|
{ value: 'honduras', es: 'Honduras', pt: 'Honduras' },
|
|
{ value: 'bolivia', es: 'Bolivia', pt: 'Bolívia' },
|
|
{ value: 'argentina', es: 'Argentina', pt: 'Argentina' },
|
|
{ value: 'chile', es: 'Chile', pt: 'Chile' },
|
|
{ value: 'resto', es: 'Resto de países - Latinoamérica', pt: 'Resto de países - Latinoamérica' }
|
|
]
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters(['langcode']),
|
|
filteredResults() {
|
|
return this.universities.filter(u => {
|
|
const matchSearch =
|
|
!this.searchQuery ||
|
|
u.university[this.langcode].toLowerCase().includes(this.searchQuery.toLowerCase()) ||
|
|
u.city[this.langcode].toLowerCase().includes(this.searchQuery.toLowerCase())
|
|
|
|
// País
|
|
let matchCountry = true
|
|
if (this.selectedCountry) {
|
|
const countryLower = u.country[this.langcode].toLowerCase()
|
|
if (this.selectedCountry === 'resto') {
|
|
// Si selecciona "resto", solo mostramos los países que NO son estos cuatro
|
|
const principales = ['honduras', 'bolivia', 'argentina', 'chile']
|
|
matchCountry = !principales.includes(countryLower)
|
|
} else {
|
|
matchCountry = countryLower === this.selectedCountry.toLowerCase()
|
|
}
|
|
}
|
|
|
|
const matchStatus = !this.selectedStatus || u.status === this.selectedStatus
|
|
|
|
return matchSearch && matchCountry && matchStatus
|
|
})
|
|
},
|
|
activaCount() { return this.universities.filter(u => u.status === 'activa').length },
|
|
desarrolloCount() { return this.universities.filter(u => u.status === 'en-desarrollo').length },
|
|
estudioCount() { return this.universities.filter(u => u.status === 'en-estudio').length }
|
|
},
|
|
|
|
watch: {
|
|
// cuando cambian resultados, forzamos re-render para reposicionar overlays
|
|
filteredResults() {
|
|
// forzamos calculo de estilos (re-render)
|
|
this.$nextTick(() => this.$forceUpdate())
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
this.createMap()
|
|
},
|
|
|
|
|
|
methods: {
|
|
...mapActions(['setLangcode']),
|
|
createMap() {
|
|
mapboxgl.accessToken = this.accessToken
|
|
this.map = new mapboxgl.Map({
|
|
container: 'mapContainer',
|
|
style: 'mapbox://styles/mariasaso/cme8hxq2w00cb01sb3jd105ue',
|
|
center: [-60, -15],
|
|
zoom: 2.5
|
|
})
|
|
|
|
// controles Mapbox
|
|
this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')
|
|
this.map.addControl(new mapboxgl.FullscreenControl(), 'top-right')
|
|
|
|
// Recalcula las posiciones de los overlays cuando el mapa se mueve/zoom/resiza
|
|
this.map.on('move', () => this.$forceUpdate())
|
|
this.map.on('zoom', () => this.$forceUpdate())
|
|
this.map.on('resize', () => this.$forceUpdate())
|
|
|
|
// al cargar, forzamos render
|
|
this.map.on('load', () => this.$forceUpdate())
|
|
},
|
|
|
|
getMarkerColor(status) {
|
|
return {
|
|
'activa': '#22c5c2',
|
|
'en-desarrollo': '#ffa500',
|
|
'en-estudio': '#ff4560'
|
|
}[status] || '#999'
|
|
},
|
|
|
|
getMarkerStyle(u) {
|
|
// Devuelve left/top en px relativos al contenedor del mapa (map.project funciona si map existe)
|
|
if (!this.map) return { left: '0px', top: '0px', transform: 'translate(-50%, -50%)' }
|
|
|
|
// u.coordinates está en formato [lng, lat]
|
|
const p = this.map.project(u.coordinates) // { x, y }
|
|
return {
|
|
left: `${Math.round(p.x)}px`,
|
|
top: `${Math.round(p.y)}px`,
|
|
transform: 'translate(-50%, -50%)',
|
|
position: 'absolute'
|
|
}
|
|
},
|
|
|
|
selectUniversity(u) {
|
|
this.selectedUniversity = u
|
|
// Solo flyTo/zoom: sin popups ni cambios visuales de marcador
|
|
if (this.map) {
|
|
this.map.flyTo({ center: u.coordinates, zoom: 12, duration: 1200 })
|
|
}
|
|
this.showRightSidebar = true
|
|
},
|
|
|
|
clearFilters() {
|
|
this.searchQuery = ''
|
|
this.selectedCountry = ''
|
|
this.selectedStatus = ''
|
|
},
|
|
|
|
closeRightSidebar() {
|
|
this.showRightSidebar = false
|
|
this.selectedUniversity = null
|
|
},
|
|
|
|
getStatusLabel(status) {
|
|
const labels = {
|
|
'activa': this.langcode === 'pt' ? 'Ativa' : 'Activa',
|
|
'en-desarrollo': this.langcode === 'pt' ? 'Em desenvolvimento' : 'En desarrollo',
|
|
'en-estudio': this.langcode === 'pt' ? 'Em estudo' : 'En estudio'
|
|
}
|
|
return labels[status] || status
|
|
},
|
|
|
|
downloadCSV() {
|
|
const headers = ['Universidad', 'Web', 'Defensor', 'Contacto', 'Ciudad', 'País', 'Estado']
|
|
const rows = this.filteredResults.map(u => [u.university[this.langcode], u.web, u.defensor[this.langcode], u.contact, u.city[this.langcode], u.country[this.langcode], u.status])
|
|
const csv = headers.join(',') + '\n' + rows.map(r => r.join(',')).join('\n')
|
|
const blob = new Blob([csv], { type: 'text/csv' })
|
|
const url = URL.createObjectURL(blob)
|
|
const a = document.createElement('a')
|
|
a.href = url
|
|
a.download = 'universidades.csv'
|
|
a.click()
|
|
URL.revokeObjectURL(url)
|
|
},
|
|
|
|
changeLanguage(lang) {
|
|
this.setLangcode(lang)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Transición suave para el sidebar al mostrarse/ocultarse */
|
|
.sidebar-custom, .aside-colap-btn {
|
|
transition: transform 0.4s ease-in-out;
|
|
}
|
|
|
|
.sidebar-custom[style*="display: none"] {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
/* Aseguramos que el overlay y el mapa estén alineados exactamente */
|
|
.map-container { position: relative; }
|
|
|
|
/* Contenedor absoluto que centra cada marker por su propio translate(-50%, -50%) */
|
|
.marker {
|
|
position: absolute;
|
|
transform-origin: center center;
|
|
/* translate aplicado desde getMarkerStyle (inline style) */
|
|
/* pointer-events-auto para permitir clicks */
|
|
}
|
|
|
|
/* Punto visual sin transformaciones en hover, para que no cambie su layout */
|
|
.marker-dot {
|
|
width: 20px; height: 20px;
|
|
border-radius: 9999px;
|
|
border: 3px solid white;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.25);
|
|
}
|
|
|
|
/* Opcional: cursor pointer */
|
|
.marker { cursor: pointer; }
|
|
|
|
/* Scrollbar y controles (mantener tus estilos previos) */
|
|
.sidebar-custom::-webkit-scrollbar { width: 6px; }
|
|
.sidebar-custom::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 3px; }
|
|
.mapboxgl-ctrl-group { background: white !important; box-shadow: 0 0 0 2px rgba(0,0,0,.1) !important; }
|
|
</style> |