Feature/vitorlas kupa map

backend/src/main/kotlin/hu/bme/sch/cmsch/component/location/LocationService.kt

@@ -37,7 +37,7 @@ class LocationService(
                 if (userEntity.role.value >= RoleType.STAFF.value) {
                     tokenToLocationMapping[locationDto.token] =
                         LocationEntity(
-                            id = 0,
+                            id = userEntity.id,
                             userId = userEntity.id,
                             userName = userEntity.fullName,
                             alias = userEntity.alias,
@@ -113,16 +113,31 @@ class LocationService(
                 .forEach { token ->
                     tokenToLocationMapping[token]?.let {
                         val user = userRepository.findByCmschId(startupPropertyConfig.profileQrPrefix + token)
-                        it.userId = user.get().id
-                        it.userName = user.get().fullName
-                        it.alias = user.get().alias
-                        it.groupName = user.get().groupName
+                        if (user.isPresent) {
+                            val u = user.get()
+                            it.id = u.id
+                            it.userId = u.id
+                            it.userName = u.fullName
+                            it.alias = u.alias
+                            it.groupName = u.groupName
+                        }
                     }
                 }
     }
 
     fun findLocationsOfGroup(groupId: Int): List<LocationEntity> {
-        return tokenToLocationMapping.values.filter { it.id == groupId }
+        val locations = tokenToLocationMapping.values.toList()
+        if (locations.isEmpty()) return emptyList()
+
+        val userIds = locations.map { it.userId }
+        val userIdsInGroup = transactionManager.transaction(readOnly = true) {
+            userRepository.findAllById(userIds)
+                .filter { it.group?.id == groupId }
+                .map { it.id }
+                .toSet()
+        }
+
+        return locations.filter { it.userId in userIdsInGroup }
     }
 
     fun findLocationsOfGroupName(group: String): List<MapMarker> {

frontend/src/common-components/map/MapContent.tsx

@@ -2,16 +2,18 @@
 import { l } from '@/util/language'
 import { type MapDataItemView, MapMarkerShape } from '@/util/views/map.view'
 import { Map, Marker, ZoomControl } from 'pigeon-maps'
-import { useEffect } from 'react'
+import { useEffect, useMemo } from 'react'
 import { useGeolocated } from 'react-geolocated'
 import { MapMarker } from './MapMarker'
 
 interface MapContentProps {
   showUserLocation: boolean
   mapData: MapDataItemView[]
+  className?: string
+  height?: number
 }
 
-export function MapContent({ showUserLocation, mapData }: MapContentProps) {
+export function MapContent({ showUserLocation, mapData, className, height = 400 }: MapContentProps) {
   const { toast } = useToast()
 
   const { coords, getPosition, isGeolocationAvailable, isGeolocationEnabled } = useGeolocated({
@@ -22,7 +24,16 @@
     suppressLocationOnMount: true,
     watchPosition: showUserLocation
   })
-  const center: [number, number] = coords ? [coords.latitude, coords.longitude] : [47.47303, 19.0531]
+
+  const markersCenter = useMemo(() => {
+    if (!mapData || mapData.length === 0) return null
+    const latSum = mapData.reduce((acc, curr) => acc + curr.latitude, 0)
+    const lonSum = mapData.reduce((acc, curr) => acc + curr.longitude, 0)
+    return [latSum / mapData.length, lonSum / mapData.length] as [number, number]
+  }, [mapData])
+
+  const fallbackCenter: [number, number] = markersCenter ?? [47.47303, 19.0531]
+  const center: [number, number] = showUserLocation && coords ? [coords.latitude, coords.longitude] : fallbackCenter
 
   useEffect(() => {
     if (showUserLocation) getPosition()
@@ -35,19 +46,27 @@
   }, [showUserLocation, isGeolocationAvailable, isGeolocationEnabled, toast])
 
   return (
-    <Map center={center} provider={OsmProvider} height={400} dprs={[1, 2]}>
-      <ZoomControl />
-      {mapData.map((mapDataItem) => (
-        <Marker hover key={mapDataItem.displayName} width={200} height={3} anchor={[mapDataItem.latitude, mapDataItem.longitude]}>
-          <MapMarker color={mapDataItem.markerColor} text={mapDataItem.displayName} markerShape={mapDataItem.markerShape} />
-        </Marker>
-      ))}
-      {coords && (
-        <Marker hover width={200} height={3} anchor={[coords.latitude, coords.longitude]}>
-          <MapMarker color="lightblue" text="Te" markerShape={MapMarkerShape.PERSON} />
-        </Marker>
-      )}
-    </Map>
+    <div className={className}>
+      <Map center={center} provider={OsmProvider} height={height} dprs={[1, 2]}>
+        <ZoomControl />
+        {mapData.map((mapDataItem) => (
+          <Marker
+            hover
+            key={`${mapDataItem.latitude}-${mapDataItem.longitude}-${mapDataItem.displayName}`}
+            width={200}
+            height={3}
+            anchor={[mapDataItem.latitude, mapDataItem.longitude]}
+          >
+            <MapMarker color={mapDataItem.markerColor} text={mapDataItem.displayName} markerShape={mapDataItem.markerShape} />
+          </Marker>
+        ))}
+        {showUserLocation && coords && (
+          <Marker hover width={200} height={3} anchor={[coords.latitude, coords.longitude]}>
+            <MapMarker color="lightblue" text="Te" markerShape={MapMarkerShape.PERSON} />
+          </Marker>
+        )}
+      </Map>
+    </div>
   )
 }
 

frontend/src/pages/map/map.page.tsx

@@ -1,17 +1,33 @@
 import { useConfigContext } from '@/api/contexts/config/ConfigContext'
 import { useLocationQuery } from '@/api/hooks/location/useLocationQuery'
+import { KirDevLogo } from '@/assets/kir-dev-logo'
 import { CmschPage } from '@/common-components/layout/CmschPage'
 import { MapContent } from '@/common-components/map/MapContent'
 import Markdown from '@/common-components/Markdown'
 import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
+import { cn } from '@/lib/utils'
 import { l } from '@/util/language'
-import { useState } from 'react'
+import { X } from 'lucide-react'
+import { useEffect, useState } from 'react'
 
 export default function MapPage() {
   const [showUserLocation, setShowUserLocation] = useState(false)
+  const [fullScreen, setFullScreen] = useState(false)
+  const [fullscreenHeight, setFullscreenHeight] = useState(() => (typeof window !== 'undefined' ? window.innerHeight : 800))
   const locationQuery = useLocationQuery()
-  const component = useConfigContext()?.components?.location
+  const config = useConfigContext()
+  const component = config?.components?.location
+  const devWebsiteUrl = config?.components?.footer?.devWebsiteUrl || 'https://kir-dev.hu/project/cmsch'
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    const handleResize = () => {
+      setFullscreenHeight(window.innerHeight)
+    }
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
 
   return (
     <CmschPage title={component?.title || 'Térkép'}>
@@ -21,13 +37,49 @@
           <Markdown text={component.topMessage} />
         </div>
       )}
-      <div className="flex items-center space-x-2 my-3">
-        <Checkbox id="show-user-location" checked={showUserLocation} onCheckedChange={(checked) => setShowUserLocation(!!checked)} />
-        <Label htmlFor="show-user-location" className="cursor-pointer">
-          {l('location-show-own')}
-        </Label>
+      <div className="flex flex-wrap items-center gap-4 my-3">
+        <div className="flex items-center space-x-2">
+          <Checkbox id="show-user-location" checked={showUserLocation} onCheckedChange={(checked) => setShowUserLocation(!!checked)} />
+          <Label htmlFor="show-user-location" className="cursor-pointer">
+            {l('location-show-own')}
+          </Label>
+        </div>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="full-screen" checked={fullScreen} onCheckedChange={(checked) => setFullScreen(!!checked)} />
+          <Label htmlFor="full-screen" className="cursor-pointer">
+            {'Teljes képernyő'}
+          </Label>
+        </div>
+      </div>
+      <div className={fullScreen ? 'fixed inset-0 z-50 bg-white' : ''}>
+        {fullScreen && (
+          <>
+            <button
+              onClick={() => setFullScreen(false)}
+              className="absolute top-4 right-4 z-50 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full shadow-lg transition-colors"
+              aria-label="Bezárás"
+            >
+              <X size={24} />
+            </button>
+            <div
+              className={cn(
+                'absolute bottom-4 left-4 z-50 bg-white/80 dark:bg-zinc-950/80',
+                'backdrop-blur-xs p-2 rounded-lg shadow-md transition-colors flex items-center justify-center'
+              )}
+            >
+              <a href={devWebsiteUrl} target="_blank" rel="noreferrer" className="block hover:opacity-80 transition-opacity">
+                <KirDevLogo className="w-16 h-auto" />
+              </a>
+            </div>
+          </>
+        )}
+        <MapContent
+          mapData={locationQuery.data ?? []}
+          showUserLocation={showUserLocation}
+          className={fullScreen ? 'h-screen w-screen' : ''}
+          height={fullScreen ? fullscreenHeight : 400}
+        />
       </div>
-      <MapContent mapData={locationQuery.data ?? []} showUserLocation={showUserLocation} />
       <p className="mt-4">{l('location-description')}</p>
       <p>{l('location-privacy')}</p>
       {component?.bottomMessage && (