${faculty.name}

${faculty.description}

\n \n ${faculty.established ? `\n

\n 📅 Established:\n ${faculty.established}\n

\n ` : ''}\n \n ${faculty.building ? `\n

\n 🏢 Building:\n ${faculty.building}\n

\n ` : ''}\n \n ${faculty.contact?.phone ? `\n

\n 📞 Phone:\n ${faculty.contact.phone}\n

\n ` : ''}\n \n ${faculty.contact?.email ? `\n

\n 📧 Email:\n ${faculty.contact.email}\n

\n ` : ''}\n \n ${faculty.departments && faculty.departments.length > 0 ? `\n

\n 🏛️ Departments:\n

\n ${faculty.departments.map(dept => `\n

${dept}

\n `).join('')}\n

\n ` : ''}\n \n

\n \n

\n `;\n }\n };\n\n const handleShowAll = () => {\n setSelectedFaculty(null);\n setSearchQuery(\"\");\n setShowSearchResults(false);\n \n // Hide info panel\n const infoPanel = document.getElementById('faculty-info');\n if (infoPanel) {\n infoPanel.classList.add('hidden');\n }\n };\n\n const handleMyLocation = () => {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n (position) => {\n const coords: [number, number] = [\n position.coords.latitude,\n position.coords.longitude\n ];\n setUserLocation(coords);\n },\n (error) => {\n console.error('Error getting location:', error);\n alert('Unable to get your location. Please enable location services.');\n }\n );\n } else {\n alert('Geolocation is not supported by this browser.');\n }\n };\n\n // Set up global functions for HTML interactions\n useEffect(() => {\n // Search input handler\n const searchInput = document.getElementById('search') as HTMLInputElement;\n if (searchInput) {\n searchInput.addEventListener('input', (e) => {\n handleSearch((e.target as HTMLInputElement).value);\n });\n \n searchInput.addEventListener('blur', () => {\n // Delay hiding results to allow for clicks\n setTimeout(() => setShowSearchResults(false), 200);\n });\n }\n\n // Button handlers\n const showAllBtn = document.getElementById('show-all-btn');\n if (showAllBtn) {\n showAllBtn.addEventListener('click', handleShowAll);\n }\n\n const myLocationBtn = document.getElementById('my-location-btn');\n if (myLocationBtn) {\n myLocationBtn.addEventListener('click', handleMyLocation);\n }\n\n // Global function for getting directions\n (window as any).getDirections = async (facultyId: string) => {\n const faculty = faculties.find(f => f.id === facultyId);\n if (!faculty) return;\n\n const from = userLocation || window.__INITIAL_DATA__?.campusCenter || [11.9716, 8.4956];\n const to = faculty.coordinates;\n\n try {\n const response = await fetch('/api/directions', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify({ from, to })\n });\n \n const route = await response.json();\n showDirections(route, faculty);\n } catch (error) {\n console.error('Error getting directions:', error);\n }\n };\n\n const showDirections = (route: any, faculty: Faculty) => {\n const directionsPanel = document.getElementById('directions-panel');\n const directionsContent = document.getElementById('directions-content');\n \n if (directionsPanel && directionsContent) {\n directionsPanel.classList.remove('hidden');\n \n directionsContent.innerHTML = `\n

\n To: ${faculty.name}\n

\n Distance: ${route.totalDistance}m\n Time: ~${Math.round(route.totalDuration / 60)} min walk\n

\n ${route.steps.map((step: any, index: number) => `\n

${index + 1}. ${step.instruction}

\n ${step.distance > 0 ? `

${step.distance}m

` : ''}\n

\n `).join('')}\n

\n `;\n }\n };\n\n return () => {\n // Cleanup event listeners\n if (searchInput) {\n searchInput.removeEventListener('input', () => {});\n searchInput.removeEventListener('blur', () => {});\n }\n if (showAllBtn) {\n showAllBtn.removeEventListener('click', handleShowAll);\n }\n if (myLocationBtn) {\n myLocationBtn.removeEventListener('click', handleMyLocation);\n }\n };\n }, [faculties, userLocation]);\n\n return (\n

\n {/* Search Results Dropdown */}\n {showSearchResults && searchResults.length > 0 && (\n

\n {searchResults.map((result) => (\n handleFacultySelect(result.faculty)}\n >\n

{result.faculty.name}

{result.faculty.shortName}

\n ))}\n

\n )}\n\n {/* Map Component */}\n \n\n {/* Faculty List Component */}\n \n \n );\n}","deleted","label",[171,172,154],"frontend","components","permalink","https://www.val.town/x/EFIOM/Creative/code/frontend/components/App.tsx","extension","actionData","errors"]