bravioo/mapa
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

datos universidades y sidebar con datos

Browse Source
This commit is contained in:
María
2025-11-05 15:06:06 +01:00
parent 16fe68bfdf
commit 1f4ab87731
3 changed files with 798 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
components/mapComp.vue
View File

@@ -125,8 +125,8 @@
:class="{ 'border-white/30 bg-white/15': selectedUniversity?.id === u.id }"
@click="selectUniversity(u)"
>
<h3 class="text-base font-semibold mb-1">{{ u.name }}</h3>
<p class="text-xs opacity-80 mb-2">{{ u.city }}, {{ u.country }}</p>
<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>
<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"
@@ -244,6 +244,119 @@
</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">
<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>
<!-- Reglamento -->
<div v-if="selectedUniversity.reglamento">
<span class="text-white/70">{{ langcode === 'pt' ? 'Regulamento:' : 'Reglamento:' }}</span>
<a
:href="selectedUniversity.reglamento"
target="_blank"
rel="noopener noreferrer"
class="ml-2 text-cyan-300 hover:text-cyan-200 inline-flex items-center gap-1"
>
{{ langcode === 'pt' ? 'Ver regulamento' : 'Ver reglamento' }}
<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="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
</svg>
</a>
</div>
<!-- Contacto -->
<div v-if="selectedUniversity.contacto">
<span class="text-white/70">{{ langcode === 'pt' ? 'Contato:' : 'Contacto:' }}</span>
<a
:href="`mailto:${selectedUniversity.contacto}`"
class="ml-2 text-cyan-300 hover:text-cyan-200"
>
{{ selectedUniversity.contacto }}
</a>
</div>
<!-- Última actualización -->
<div v-if="selectedUniversity.ultimaActualizacion">
<span class="text-white/70">{{ langcode === 'pt' ? 'Última atualização:' : 'Última actualización:' }}</span>
<span class="ml-2">{{ selectedUniversity.ultimaActualizacion }}</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>
@@ -264,6 +377,7 @@ export default {
selectedLanguage: 'es',
selectedUniversity: null,
showSidebar: true,
showRightSidebar: true,
countries: [
{ value: 'honduras', es: 'Honduras', pt: 'Honduras' },
{ value: 'bolivia', es: 'Bolivia', pt: 'Bolívia' },
@@ -280,13 +394,13 @@ export default {
return this.universities.filter(u => {
const matchSearch =
!this.searchQuery ||
u.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
u.city.toLowerCase().includes(this.searchQuery.toLowerCase())
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.toLowerCase()
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']
@@ -371,6 +485,7 @@ export default {
if (this.map) {
this.map.flyTo({ center: u.coordinates, zoom: 12, duration: 1200 })
}
this.showRightSidebar = true
},
clearFilters() {
@@ -379,6 +494,11 @@ export default {
this.selectedStatus = ''
},
closeRightSidebar() {
this.showRightSidebar = false
this.selectedUniversity = null
},
getStatusLabel(status) {
const labels = {
'activa': this.langcode === 'pt' ? 'Ativa' : 'Activa',
@@ -389,8 +509,8 @@ export default {
},
downloadCSV() {
const headers = ['ID', 'Universidad', 'Ciudad', 'País', 'Estado']
const rows = this.filteredResults.map(u => [u.id, u.name, u.city, u.country, u.status])
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)