1572 lines
49 KiB
Vue
1572 lines
49 KiB
Vue
<template>
|
|
<div ref="mapContainer" class="property-map-container" :class="{ 'map-fullscreen': isFullscreen }">
|
|
<!-- ── Top Action Buttons ── -->
|
|
<div class="map-overlay action-buttons">
|
|
<!-- Fullscreen toggle -->
|
|
<button class="map-btn" @click="toggleFullscreen" :title="isFullscreen ? 'خروج از تمامصفحه' : 'تمامصفحه'">
|
|
<svg v-if="isFullscreen" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M8 3v3a2 2 0 0 1-2 2H3"/><path d="M21 8h-3a2 2 0 0 1-2-2V3"/>
|
|
<path d="M3 16h3a2 2 0 0 1 2 2v3"/><path d="M16 21v-3a2 2 0 0 1 2-2h3"/>
|
|
</svg>
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M3 7V3h4"/><path d="M21 7V3h-4"/>
|
|
<path d="M3 17v4h4"/><path d="M21 17v4h-4"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Fit all markers -->
|
|
<button class="map-btn map-btn-fit" @click="fitBounds" title="نمایش همه املاک روی نقشه" :disabled="propertiesWithCoords.length === 0">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Locate me -->
|
|
<button class="map-btn map-btn-locate" @click="locateMe" title="موقعیت من" :class="{ locating: isLocating }">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>
|
|
<circle cx="12" cy="12" r="7" opacity="0.3"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Spread / Group Mode Toggle (when co-located properties exist) -->
|
|
<button
|
|
v-if="hasCoLocatedProperties"
|
|
class="map-btn map-btn-spread"
|
|
:class="{ 'is-active': isSpreadMode }"
|
|
@click="toggleSpreadMode"
|
|
:title="isSpreadMode ? 'نمایش تجمیعی املاک هممکان' : 'تفکیک و نمایش جداگانه املاک هممکان'"
|
|
>
|
|
<svg v-if="isSpreadMode" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<!-- Collapse / Group icon -->
|
|
<rect x="4" y="4" width="7" height="7" rx="1.5"/>
|
|
<rect x="13" y="13" width="7" height="7" rx="1.5"/>
|
|
<path d="M11 4v4h-4M13 20v-4h4"/>
|
|
</svg>
|
|
<svg v-else xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
|
|
<!-- Spread / Fan-out icon -->
|
|
<circle cx="12" cy="12" r="3"/>
|
|
<circle cx="6" cy="6" r="2.5"/>
|
|
<circle cx="18" cy="6" r="2.5"/>
|
|
<circle cx="6" cy="18" r="2.5"/>
|
|
<circle cx="18" cy="18" r="2.5"/>
|
|
<path d="M8 8l2.5 2.5M16 8l-2.5 2.5M8 16l2.5-2.5M16 16l-2.5-2.5" opacity="0.5"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ── Top-Left: Properties count badge ── -->
|
|
<div class="map-overlay count-badge">
|
|
<i class="pi pi-map-marker text-indigo-500"></i>
|
|
<span>{{ propertiesWithCoords.length }} ملک</span>
|
|
<span v-if="hasCoLocatedProperties && !isSpreadMode" class="badge-subcount">
|
|
({{ locationGroups.length }} موقعیت)
|
|
</span>
|
|
</div>
|
|
|
|
<!-- ── Bottom-Left: Coordinate readout ── -->
|
|
<div v-if="hoverCoords" class="map-overlay coords-readout">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" style="opacity:0.7;flex-shrink:0">
|
|
<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/>
|
|
</svg>
|
|
<span>{{ hoverCoords.lat.toFixed(5) }}, {{ hoverCoords.lon.toFixed(5) }}</span>
|
|
</div>
|
|
|
|
<!-- ── Leaflet Map ── -->
|
|
<l-map
|
|
ref="map"
|
|
v-model:zoom="zoom"
|
|
:center="center"
|
|
:use-global-leaflet="false"
|
|
style="height: 100%; width: 100%;"
|
|
@mousemove="handleMouseMove($event)"
|
|
@mouseout="hoverCoords = null"
|
|
@ready="onMapReady"
|
|
>
|
|
<!-- Layer switcher -->
|
|
<l-control-layers position="bottomright" />
|
|
|
|
<!-- OpenStreetMap -->
|
|
<l-tile-layer
|
|
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
|
|
layer-type="base"
|
|
name="نمای نقشهای"
|
|
attribution="© OpenStreetMap contributors"
|
|
/>
|
|
|
|
<!-- Satellite -->
|
|
<l-tile-layer
|
|
:visible="false"
|
|
url="https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
|
|
layer-type="base"
|
|
name="نمای ماهوارهای"
|
|
attribution="Tiles © Esri"
|
|
/>
|
|
|
|
<!-- Scale control -->
|
|
<l-control-scale position="bottomleft" :imperial="false" :maxWidth="150" />
|
|
|
|
<!-- ── VIEW A: SPREAD MODE MARKERS (Separated individual pins) ── -->
|
|
<template v-if="isSpreadMode">
|
|
<l-marker
|
|
v-for="item in spreadMarkersList"
|
|
:key="item.prop._id || item.prop.id"
|
|
:lat-lng="item.coords"
|
|
:icon="getIndividualMarkerIcon(item.prop, item.isOffset)"
|
|
@click="onMarkerClick(item.prop)"
|
|
>
|
|
<l-popup :options="{ maxWidth: 330, minWidth: 280, className: 'airbnb-custom-popup' }">
|
|
<div class="airbnb-popup-card">
|
|
<!-- Image / Header -->
|
|
<div class="popup-image-container">
|
|
<img
|
|
:src="getPropertyImage(item.prop)"
|
|
:alt="item.prop.name"
|
|
class="popup-image"
|
|
@error="handleImageError"
|
|
/>
|
|
<span v-if="getCategoryName(item.prop)" class="popup-category-badge">
|
|
{{ getCategoryName(item.prop) }}
|
|
</span>
|
|
<span v-if="item.prop.propertyCode" class="popup-code-badge">
|
|
کد: {{ item.prop.propertyCode }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Card Body -->
|
|
<div class="popup-content-body">
|
|
<h4 class="popup-title">{{ item.prop.name || 'ملک بدون نام' }}</h4>
|
|
|
|
<div class="popup-info-grid">
|
|
<div v-if="item.prop.nationalGeoCode" class="popup-info-item">
|
|
<span class="info-label">شناسه ملی جغرافیایی:</span>
|
|
<span class="info-value text-mono">{{ item.prop.nationalGeoCode }}</span>
|
|
</div>
|
|
<div v-if="item.prop.dong" class="popup-info-item">
|
|
<span class="info-label">سهم دانگ:</span>
|
|
<span class="info-value text-indigo-600 font-bold">{{ item.prop.dong }} دانگ</span>
|
|
</div>
|
|
<div v-if="item.prop.zoningType" class="popup-info-item">
|
|
<span class="info-label">کاربری:</span>
|
|
<span class="info-value">{{ item.prop.zoningType }}</span>
|
|
</div>
|
|
<div v-if="item.prop.address" class="popup-info-item full-width">
|
|
<span class="info-label">آدرس:</span>
|
|
<span class="info-value">{{ item.prop.address }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="popup-actions">
|
|
<a
|
|
:href="'/property/edit-property/' + (item.prop._id || item.prop.id)"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="popup-btn popup-btn-external"
|
|
title="باز کردن در برگه جدید"
|
|
>
|
|
<i class="pi pi-external-link"></i>
|
|
<span>باز کردن در تب جدید</span>
|
|
</a>
|
|
<button
|
|
type="button"
|
|
class="popup-btn popup-btn-primary"
|
|
@click="onEditClick(item.prop)"
|
|
title="ویرایش ملک"
|
|
>
|
|
<i class="pi pi-pencil"></i>
|
|
<span>ویرایش</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</l-popup>
|
|
</l-marker>
|
|
</template>
|
|
|
|
<!-- ── VIEW B: GROUPED MODE MARKERS (Default Smart Grouping & Multi-Property Card) ── -->
|
|
<template v-else>
|
|
<l-marker
|
|
v-for="group in locationGroups"
|
|
:key="group.id"
|
|
:lat-lng="group.coords"
|
|
:icon="getGroupMarkerIcon(group)"
|
|
@click="onGroupMarkerClick(group)"
|
|
>
|
|
<l-popup :options="{ maxWidth: 340, minWidth: 290, className: 'airbnb-custom-popup' }">
|
|
<div class="airbnb-popup-card">
|
|
<!-- Multi-Property Group Header & Switcher (If multiple properties share this location) -->
|
|
<div v-if="group.isGroup" class="popup-group-header">
|
|
<div class="group-header-top">
|
|
<div class="group-header-title">
|
|
<span class="group-header-icon">🏢</span>
|
|
<span>موقعیت مشترک: {{ group.count }} سهم / ملک</span>
|
|
</div>
|
|
<div class="group-nav-controls">
|
|
<button
|
|
type="button"
|
|
class="group-nav-btn"
|
|
@click.stop="prevGroupProperty(group)"
|
|
title="سهم قبلی"
|
|
>
|
|
<i class="pi pi-chevron-right"></i>
|
|
</button>
|
|
<span class="group-step-indicator">
|
|
{{ getActiveGroupIndex(group) + 1 }} از {{ group.count }}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
class="group-nav-btn"
|
|
@click.stop="nextGroupProperty(group)"
|
|
title="سهم بعدی"
|
|
>
|
|
<i class="pi pi-chevron-left"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Property Tabs Chips -->
|
|
<div class="group-tabs-bar">
|
|
<button
|
|
v-for="(p, idx) in group.properties"
|
|
:key="p._id || p.id"
|
|
type="button"
|
|
class="group-tab-chip"
|
|
:class="{ 'is-active': getActiveGroupIndex(group) === idx }"
|
|
@click.stop="setActiveGroupIndex(group, idx)"
|
|
>
|
|
<span class="tab-chip-code">
|
|
{{ p.propertyCode ? `#${p.propertyCode}` : `سهم ${idx + 1}` }}
|
|
</span>
|
|
<span v-if="p.dong" class="tab-chip-dong">
|
|
{{ p.dong }} دانگ
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Currently Active Property in this Group -->
|
|
<template v-if="getActiveProperty(group)">
|
|
<!-- Image / Header -->
|
|
<div class="popup-image-container">
|
|
<img
|
|
:src="getPropertyImage(getActiveProperty(group))"
|
|
:alt="getActiveProperty(group).name"
|
|
class="popup-image"
|
|
@error="handleImageError"
|
|
/>
|
|
<span v-if="getCategoryName(getActiveProperty(group))" class="popup-category-badge">
|
|
{{ getCategoryName(getActiveProperty(group)) }}
|
|
</span>
|
|
<span v-if="getActiveProperty(group).propertyCode" class="popup-code-badge">
|
|
کد: {{ getActiveProperty(group).propertyCode }}
|
|
</span>
|
|
<span v-if="group.isGroup && getActiveProperty(group).dong" class="popup-dong-badge">
|
|
سهم: {{ getActiveProperty(group).dong }} دانگ
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Card Body -->
|
|
<div class="popup-content-body">
|
|
<h4 class="popup-title">
|
|
{{ getActiveProperty(group).name || 'ملک بدون نام' }}
|
|
</h4>
|
|
|
|
<div class="popup-info-grid">
|
|
<div v-if="getActiveProperty(group).nationalGeoCode" class="popup-info-item">
|
|
<span class="info-label">شناسه ملی جغرافیایی:</span>
|
|
<span class="info-value text-mono">{{ getActiveProperty(group).nationalGeoCode }}</span>
|
|
</div>
|
|
<div v-if="getActiveProperty(group).dong" class="popup-info-item">
|
|
<span class="info-label">میزان مالکیت:</span>
|
|
<span class="info-value text-indigo-600 font-bold">
|
|
{{ getActiveProperty(group).dong }} دانگ ({{ (parseFloat(getActiveProperty(group).dong) / 6 * 100).toFixed(0) }}٪)
|
|
</span>
|
|
</div>
|
|
<div v-if="getActiveProperty(group).zoningType" class="popup-info-item">
|
|
<span class="info-label">کاربری:</span>
|
|
<span class="info-value">{{ getActiveProperty(group).zoningType }}</span>
|
|
</div>
|
|
<div v-if="getActiveProperty(group).address" class="popup-info-item full-width">
|
|
<span class="info-label">آدرس:</span>
|
|
<span class="info-value">{{ getActiveProperty(group).address }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="popup-actions">
|
|
<a
|
|
:href="'/property/edit-property/' + (getActiveProperty(group)._id || getActiveProperty(group).id)"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="popup-btn popup-btn-external"
|
|
title="باز کردن در برگه جدید"
|
|
>
|
|
<i class="pi pi-external-link"></i>
|
|
<span>باز کردن در تب جدید</span>
|
|
</a>
|
|
<button
|
|
type="button"
|
|
class="popup-btn popup-btn-primary"
|
|
@click="onEditClick(getActiveProperty(group))"
|
|
title="ویرایش ملک"
|
|
>
|
|
<i class="pi pi-pencil"></i>
|
|
<span>ویرایش</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</l-popup>
|
|
</l-marker>
|
|
</template>
|
|
</l-map>
|
|
|
|
<!-- Locating overlay -->
|
|
<div v-if="isLocating" class="locating-overlay">
|
|
<div class="locating-spinner"></div>
|
|
<span>در حال تعیین موقعیت...</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed, watch, nextTick, onBeforeUnmount } from 'vue';
|
|
import 'leaflet/dist/leaflet.css';
|
|
import L from 'leaflet';
|
|
import { LMap, LTileLayer, LMarker, LPopup, LControlLayers, LControlScale } from '@vue-leaflet/vue-leaflet';
|
|
import { useRouter } from 'vue-router';
|
|
import { UTMtoLatLon } from '@/utm';
|
|
|
|
// Fix Leaflet's default icon path issue with Vite
|
|
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png';
|
|
import markerIcon from 'leaflet/dist/images/marker-icon.png';
|
|
import markerShadow from 'leaflet/dist/images/marker-shadow.png';
|
|
|
|
delete L.Icon.Default.prototype._getIconUrl;
|
|
L.Icon.Default.mergeOptions({
|
|
iconRetinaUrl: markerIcon2x,
|
|
iconUrl: markerIcon,
|
|
shadowUrl: markerShadow
|
|
});
|
|
|
|
const props = defineProps({
|
|
properties: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
selectedPropertyId: {
|
|
type: [String, Number],
|
|
default: null
|
|
},
|
|
hoveredPropertyId: {
|
|
type: [String, Number],
|
|
default: null
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['select-property', 'edit-property']);
|
|
|
|
const router = useRouter();
|
|
|
|
const map = ref(null);
|
|
const mapContainer = ref(null);
|
|
const zoom = ref(6);
|
|
const center = ref([32.4279, 53.688]); // Iran center
|
|
const hoverCoords = ref(null);
|
|
const isLocating = ref(false);
|
|
const isFullscreen = ref(false);
|
|
const mapReady = ref(false);
|
|
const isSpreadMode = ref(false);
|
|
|
|
// Active property index tracking for multi-property location groups: { [groupId]: activePropertyIndex }
|
|
const activeGroupIndexMap = ref({});
|
|
|
|
// Default fallback image
|
|
const DEFAULT_IMAGE = 'https://cloud.mbmanager.ir/images/item-no-image.png';
|
|
|
|
/**
|
|
* Parses Iran's National Geo Code (JAM UTM code)
|
|
*/
|
|
const parseNationalGeoCode = (code) => {
|
|
if (!code || typeof code !== 'string') return null;
|
|
const digits = code.replace(/\D/g, '');
|
|
if (digits.length === 15) {
|
|
const e = parseInt(digits.slice(0, 6), 10);
|
|
const n = parseInt(digits.slice(6, 13), 10);
|
|
const z = parseInt(digits.slice(13, 15), 10);
|
|
return { easting: e, northing: n, zone: z };
|
|
}
|
|
if (digits.length === 13) {
|
|
const e = parseInt(digits.slice(0, 6), 10);
|
|
const n = parseInt(digits.slice(6, 13), 10);
|
|
return { easting: e, northing: n, zone: 39 };
|
|
}
|
|
return null;
|
|
};
|
|
|
|
/**
|
|
* Resolves [lat, lng] coordinates for a property from any available source
|
|
*/
|
|
const resolveCoordinates = (prop) => {
|
|
if (!prop) return null;
|
|
|
|
// 1. Direct coordinates array: [val1, val2]
|
|
const rawCoords = prop.coordinates || prop.location?.coordinates;
|
|
if (Array.isArray(rawCoords) && rawCoords.length >= 2) {
|
|
const c0 = parseFloat(rawCoords[0]);
|
|
const c1 = parseFloat(rawCoords[1]);
|
|
|
|
if (!isNaN(c0) && !isNaN(c1) && !(c0 === 0 && c1 === 0)) {
|
|
// Check orientation: Iran latitude is ~20-45, longitude is ~40-68
|
|
if (c0 >= 20 && c0 <= 45 && c1 >= 40 && c1 <= 68) {
|
|
return [c0, c1]; // [lat, lng]
|
|
}
|
|
if (c1 >= 20 && c1 <= 45 && c0 >= 40 && c0 <= 68) {
|
|
return [c1, c0]; // [lng, lat] -> [lat, lng]
|
|
}
|
|
// General fallback
|
|
if (Math.abs(c0) <= 90 && Math.abs(c1) <= 180) {
|
|
return [c0, c1];
|
|
}
|
|
}
|
|
}
|
|
|
|
// 2. Direct lat / lon properties
|
|
if (prop.lat && prop.lng) {
|
|
const lat = parseFloat(prop.lat);
|
|
const lng = parseFloat(prop.lng);
|
|
if (!isNaN(lat) && !isNaN(lng) && lat !== 0 && lng !== 0) {
|
|
return [lat, lng];
|
|
}
|
|
}
|
|
|
|
// 3. National Geo Code (JAM UTM code)
|
|
if (prop.nationalGeoCode) {
|
|
const parsed = parseNationalGeoCode(prop.nationalGeoCode);
|
|
if (parsed) {
|
|
try {
|
|
const result = UTMtoLatLon(parsed.easting, parsed.northing, parsed.zone, 'N');
|
|
if (result && !isNaN(result.latitude) && !isNaN(result.longitude)) {
|
|
return [result.latitude, result.longitude];
|
|
}
|
|
} catch (err) {
|
|
console.warn('UTM conversion error for code:', prop.nationalGeoCode, err);
|
|
}
|
|
}
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
// Filter and compute properties with valid coordinates
|
|
const propertiesWithCoords = computed(() => {
|
|
return props.properties
|
|
.map((prop) => {
|
|
const coords = resolveCoordinates(prop);
|
|
return coords ? { ...prop, resolvedCoords: coords } : null;
|
|
})
|
|
.filter(Boolean);
|
|
});
|
|
|
|
/**
|
|
* Group properties by identical / near-identical coordinates (~1m precision)
|
|
*/
|
|
const locationGroups = computed(() => {
|
|
const groupsMap = new Map();
|
|
|
|
propertiesWithCoords.value.forEach((prop) => {
|
|
const [lat, lng] = prop.resolvedCoords;
|
|
// Group key with 5 decimal places (~1.1 meter precision)
|
|
const key = `${lat.toFixed(5)},${lng.toFixed(5)}`;
|
|
|
|
if (!groupsMap.has(key)) {
|
|
groupsMap.set(key, {
|
|
id: key,
|
|
coords: [lat, lng],
|
|
properties: []
|
|
});
|
|
}
|
|
groupsMap.get(key).properties.push(prop);
|
|
});
|
|
|
|
return Array.from(groupsMap.values()).map((group) => {
|
|
const count = group.properties.length;
|
|
const codes = group.properties.map((p) => (p.propertyCode ? `#${p.propertyCode}` : null)).filter(Boolean);
|
|
const totalDong = group.properties.reduce((sum, p) => sum + (parseFloat(p.dong) || 0), 0);
|
|
|
|
return {
|
|
...group,
|
|
count,
|
|
codes,
|
|
totalDong,
|
|
isGroup: count > 1
|
|
};
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Checks if there is at least one location with 2 or more properties
|
|
*/
|
|
const hasCoLocatedProperties = computed(() => {
|
|
return locationGroups.value.some((g) => g.count > 1);
|
|
});
|
|
|
|
/**
|
|
* Spread / Spiderfy offset calculator for Spread Mode
|
|
*/
|
|
const spreadMarkersList = computed(() => {
|
|
const list = [];
|
|
const radius = 0.00018; // ~18 meters offset
|
|
|
|
locationGroups.value.forEach((group) => {
|
|
if (group.count === 1) {
|
|
list.push({
|
|
prop: group.properties[0],
|
|
coords: group.coords,
|
|
isOffset: false
|
|
});
|
|
} else {
|
|
const [baseLat, baseLng] = group.coords;
|
|
const N = group.count;
|
|
|
|
group.properties.forEach((prop, i) => {
|
|
const angle = (2 * Math.PI * i) / N - Math.PI / 2;
|
|
const latOffset = radius * Math.cos(angle);
|
|
const lngOffset = (radius * Math.sin(angle)) / Math.cos((baseLat * Math.PI) / 180);
|
|
|
|
list.push({
|
|
prop,
|
|
coords: [baseLat + latOffset, baseLng + lngOffset],
|
|
isOffset: true
|
|
});
|
|
});
|
|
}
|
|
});
|
|
|
|
return list;
|
|
});
|
|
|
|
const toggleSpreadMode = () => {
|
|
isSpreadMode.value = !isSpreadMode.value;
|
|
};
|
|
|
|
// Helper functions for property fields
|
|
const getPropertyImage = (prop) => {
|
|
if (!prop) return DEFAULT_IMAGE;
|
|
return prop.imageUrl || prop.mainImageUrls?.[0] || prop.signedMainImageUrls?.[0] || DEFAULT_IMAGE;
|
|
};
|
|
|
|
const handleImageError = (e) => {
|
|
e.target.src = DEFAULT_IMAGE;
|
|
};
|
|
|
|
const getCategoryName = (prop) => {
|
|
if (!prop) return '';
|
|
if (prop.nativeCategory) return prop.nativeCategory;
|
|
if (typeof prop.category === 'object' && prop.category?.nativeName) return prop.category.nativeName;
|
|
if (typeof prop.category === 'string') return prop.category;
|
|
return '';
|
|
};
|
|
|
|
/**
|
|
* Group active property index helper
|
|
*/
|
|
const getActiveGroupIndex = (group) => {
|
|
if (!group || !group.id) return 0;
|
|
const idx = activeGroupIndexMap.value[group.id];
|
|
if (typeof idx === 'number' && idx >= 0 && idx < group.properties.length) {
|
|
return idx;
|
|
}
|
|
return 0;
|
|
};
|
|
|
|
const getActiveProperty = (group) => {
|
|
if (!group || !group.properties || group.properties.length === 0) return null;
|
|
const idx = getActiveGroupIndex(group);
|
|
return group.properties[idx] || group.properties[0];
|
|
};
|
|
|
|
const setActiveGroupIndex = (group, index) => {
|
|
if (!group || !group.properties) return;
|
|
const boundedIndex = Math.max(0, Math.min(index, group.properties.length - 1));
|
|
activeGroupIndexMap.value[group.id] = boundedIndex;
|
|
|
|
const prop = group.properties[boundedIndex];
|
|
if (prop) {
|
|
emit('select-property', prop._id || prop.id);
|
|
}
|
|
};
|
|
|
|
const nextGroupProperty = (group) => {
|
|
const currentIdx = getActiveGroupIndex(group);
|
|
const nextIdx = (currentIdx + 1) % group.properties.length;
|
|
setActiveGroupIndex(group, nextIdx);
|
|
};
|
|
|
|
const prevGroupProperty = (group) => {
|
|
const currentIdx = getActiveGroupIndex(group);
|
|
const prevIdx = (currentIdx - 1 + group.properties.length) % group.properties.length;
|
|
setActiveGroupIndex(group, prevIdx);
|
|
};
|
|
|
|
/**
|
|
* Creates custom Leaflet pin icon for Location Groups (Smart Multi-Property Pill)
|
|
*/
|
|
const getGroupMarkerIcon = (group) => {
|
|
const propIds = group.properties.map((p) => p._id || p.id);
|
|
const isSelected = propIds.includes(props.selectedPropertyId);
|
|
const isHovered = propIds.includes(props.hoveredPropertyId);
|
|
|
|
if (!group.isGroup) {
|
|
// Single property pin
|
|
const prop = group.properties[0];
|
|
const code = prop.propertyCode ? `#${prop.propertyCode}` : '';
|
|
const cat = getCategoryName(prop) || 'ملک';
|
|
|
|
const html = `
|
|
<div class="airbnb-pin ${isSelected ? 'is-selected' : ''} ${isHovered ? 'is-hovered' : ''}">
|
|
<div class="pin-content">
|
|
<span class="pin-icon">🏠</span>
|
|
<span class="pin-label">${code || cat}</span>
|
|
</div>
|
|
<div class="pin-pointer"></div>
|
|
</div>
|
|
`;
|
|
|
|
return L.divIcon({
|
|
className: 'airbnb-marker-wrapper',
|
|
html: html,
|
|
iconSize: [68, 38],
|
|
iconAnchor: [34, 38],
|
|
popupAnchor: [0, -38]
|
|
});
|
|
}
|
|
|
|
// Multi-property group pin
|
|
let labelText = '';
|
|
if (group.codes.length > 0 && group.codes.length <= 2) {
|
|
labelText = group.codes.join(' • ');
|
|
} else {
|
|
labelText = `${group.count} سهم`;
|
|
}
|
|
|
|
const html = `
|
|
<div class="airbnb-pin is-multi-pin ${isSelected ? 'is-selected' : ''} ${isHovered ? 'is-hovered' : ''}">
|
|
<div class="pin-content">
|
|
<span class="pin-icon">🏢</span>
|
|
<span class="pin-label">${labelText}</span>
|
|
<span class="group-count-badge" title="${group.count} ملک در این موقعیت">${group.count}</span>
|
|
</div>
|
|
<div class="pin-pointer"></div>
|
|
</div>
|
|
`;
|
|
|
|
return L.divIcon({
|
|
className: 'airbnb-marker-wrapper',
|
|
html: html,
|
|
iconSize: [84, 40],
|
|
iconAnchor: [42, 40],
|
|
popupAnchor: [0, -40]
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Creates custom Leaflet pin icon for Individual (Spread Mode) Markers
|
|
*/
|
|
const getIndividualMarkerIcon = (prop, isOffset = false) => {
|
|
const propId = prop._id || prop.id;
|
|
const isSelected = props.selectedPropertyId === propId;
|
|
const isHovered = props.hoveredPropertyId === propId;
|
|
const code = prop.propertyCode ? `#${prop.propertyCode}` : '';
|
|
const cat = getCategoryName(prop) || 'ملک';
|
|
|
|
const html = `
|
|
<div class="airbnb-pin ${isOffset ? 'is-spread-pin' : ''} ${isSelected ? 'is-selected' : ''} ${isHovered ? 'is-hovered' : ''}">
|
|
<div class="pin-content">
|
|
<span class="pin-icon">🏠</span>
|
|
<span class="pin-label">${code || cat}</span>
|
|
${prop.dong ? `<span class="pin-dong-tag">${prop.dong}د</span>` : ''}
|
|
</div>
|
|
<div class="pin-pointer"></div>
|
|
</div>
|
|
`;
|
|
|
|
return L.divIcon({
|
|
className: 'airbnb-marker-wrapper',
|
|
html: html,
|
|
iconSize: [68, 38],
|
|
iconAnchor: [34, 38],
|
|
popupAnchor: [0, -38]
|
|
});
|
|
};
|
|
|
|
const onMapReady = () => {
|
|
mapReady.value = true;
|
|
nextTick(() => {
|
|
fitBounds();
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Adjusts map bounds to fit all markers
|
|
*/
|
|
const fitBounds = () => {
|
|
if (!map.value?.leafletObject || propertiesWithCoords.value.length === 0) return;
|
|
|
|
try {
|
|
const bounds = L.latLngBounds(propertiesWithCoords.value.map((p) => p.resolvedCoords));
|
|
map.value.leafletObject.fitBounds(bounds, {
|
|
padding: [50, 50],
|
|
maxZoom: 16,
|
|
animate: true
|
|
});
|
|
} catch (e) {
|
|
console.error('Fit bounds error:', e);
|
|
}
|
|
};
|
|
|
|
const onMarkerClick = (prop) => {
|
|
emit('select-property', prop._id || prop.id);
|
|
};
|
|
|
|
const onGroupMarkerClick = (group) => {
|
|
const activeProp = getActiveProperty(group);
|
|
if (activeProp) {
|
|
emit('select-property', activeProp._id || activeProp.id);
|
|
}
|
|
};
|
|
|
|
const onEditClick = (prop) => {
|
|
if (!prop) return;
|
|
const id = prop._id || prop.id;
|
|
emit('edit-property', id);
|
|
router.push(`/property/edit-property/${id}`);
|
|
};
|
|
|
|
/**
|
|
* Center map on a specific property
|
|
*/
|
|
const flyToProperty = (propId) => {
|
|
const prop = propertiesWithCoords.value.find((p) => (p._id || p.id) === propId);
|
|
if (prop && map.value?.leafletObject) {
|
|
map.value.leafletObject.flyTo(prop.resolvedCoords, 16, {
|
|
animate: true,
|
|
duration: 1
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleMouseMove = (event) => {
|
|
if (event?.latlng) {
|
|
hoverCoords.value = { lat: event.latlng.lat, lon: event.latlng.lng };
|
|
}
|
|
};
|
|
|
|
const locateMe = () => {
|
|
if (!navigator.geolocation) return;
|
|
isLocating.value = true;
|
|
navigator.geolocation.getCurrentPosition(
|
|
(pos) => {
|
|
isLocating.value = false;
|
|
const newCenter = [pos.coords.latitude, pos.coords.longitude];
|
|
center.value = newCenter;
|
|
zoom.value = 14;
|
|
map.value?.leafletObject?.flyTo(newCenter, 14, { animate: true });
|
|
},
|
|
() => {
|
|
isLocating.value = false;
|
|
},
|
|
{ timeout: 10000, enableHighAccuracy: true }
|
|
);
|
|
};
|
|
|
|
const toggleFullscreen = () => {
|
|
if (!isFullscreen.value) {
|
|
if (mapContainer.value?.requestFullscreen) {
|
|
mapContainer.value.requestFullscreen();
|
|
} else if (mapContainer.value?.webkitRequestFullscreen) {
|
|
mapContainer.value.webkitRequestFullscreen();
|
|
}
|
|
} else {
|
|
if (document.exitFullscreen) document.exitFullscreen();
|
|
else if (document.webkitExitFullscreen) document.webkitExitFullscreen();
|
|
}
|
|
};
|
|
|
|
const onFullscreenChange = () => {
|
|
isFullscreen.value = !!document.fullscreenElement;
|
|
nextTick(() => map.value?.leafletObject?.invalidateSize());
|
|
};
|
|
|
|
if (typeof document !== 'undefined') {
|
|
document.addEventListener('fullscreenchange', onFullscreenChange);
|
|
}
|
|
|
|
onBeforeUnmount(() => {
|
|
if (typeof document !== 'undefined') {
|
|
document.removeEventListener('fullscreenchange', onFullscreenChange);
|
|
}
|
|
});
|
|
|
|
// Watch for selected property changes to zoom and sync group active index
|
|
watch(
|
|
() => props.selectedPropertyId,
|
|
(newId) => {
|
|
if (newId) {
|
|
// Find which group contains this property
|
|
locationGroups.value.forEach((group) => {
|
|
const idx = group.properties.findIndex((p) => (p._id || p.id) === newId);
|
|
if (idx !== -1) {
|
|
activeGroupIndexMap.value[group.id] = idx;
|
|
}
|
|
});
|
|
|
|
flyToProperty(newId);
|
|
}
|
|
}
|
|
);
|
|
|
|
// Watch for property list changes to auto-fit
|
|
watch(
|
|
() => propertiesWithCoords.value.length,
|
|
() => {
|
|
if (mapReady.value) {
|
|
nextTick(() => fitBounds());
|
|
}
|
|
}
|
|
);
|
|
|
|
defineExpose({
|
|
fitBounds,
|
|
flyToProperty
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.property-map-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 520px;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
font-family: 'Estedad', sans-serif !important;
|
|
}
|
|
|
|
.map-fullscreen {
|
|
border-radius: 0 !important;
|
|
}
|
|
|
|
:deep(.leaflet-container) {
|
|
font-family: 'Estedad', sans-serif !important;
|
|
border-radius: inherit;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Overlays */
|
|
.map-overlay {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.count-badge {
|
|
top: 14px;
|
|
left: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: rgba(255, 255, 255, 0.92);
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
padding: 8px 16px;
|
|
border-radius: 30px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
|
|
border: 1px solid rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.badge-subcount {
|
|
font-size: 11px;
|
|
color: #64748b;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.action-buttons {
|
|
top: 14px;
|
|
right: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.map-btn {
|
|
width: 38px;
|
|
height: 38px;
|
|
border-radius: 12px;
|
|
border: none;
|
|
background: #4f46e5;
|
|
color: #fff;
|
|
box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.map-btn:hover:not(:disabled) {
|
|
background: #4338ca;
|
|
box-shadow: 0 6px 20px rgba(67, 56, 202, 0.45);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.map-btn:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.map-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.map-btn-fit {
|
|
background: #0ea5e9;
|
|
box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
|
|
}
|
|
.map-btn-fit:hover:not(:disabled) {
|
|
background: #0284c7;
|
|
box-shadow: 0 6px 20px rgba(2, 132, 199, 0.45);
|
|
}
|
|
|
|
.map-btn-locate {
|
|
background: #10b981;
|
|
box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
|
|
}
|
|
.map-btn-locate:hover:not(:disabled) {
|
|
background: #059669;
|
|
box-shadow: 0 6px 20px rgba(5, 150, 105, 0.45);
|
|
}
|
|
|
|
.map-btn-spread {
|
|
background: #8b5cf6;
|
|
box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
|
|
}
|
|
.map-btn-spread:hover:not(:disabled) {
|
|
background: #7c3aed;
|
|
box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45);
|
|
}
|
|
.map-btn-spread.is-active {
|
|
background: #ec4899;
|
|
box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4);
|
|
}
|
|
|
|
.map-btn.locating {
|
|
animation: pulse-btn 1s infinite;
|
|
}
|
|
|
|
@keyframes pulse-btn {
|
|
0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
|
|
50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
|
|
}
|
|
|
|
.coords-readout {
|
|
bottom: 62px;
|
|
left: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: rgba(15, 23, 42, 0.82);
|
|
backdrop-filter: blur(8px);
|
|
-webkit-backdrop-filter: blur(8px);
|
|
color: #e2e8f0;
|
|
font-size: 11px;
|
|
font-family: 'Courier New', monospace;
|
|
padding: 6px 12px;
|
|
border-radius: 8px;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Locating overlay */
|
|
.locating-overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1100;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
backdrop-filter: blur(6px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
font-size: 14px;
|
|
color: #4f46e5;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.locating-spinner {
|
|
width: 38px;
|
|
height: 38px;
|
|
border: 3px solid rgba(79, 70, 229, 0.2);
|
|
border-top-color: #4f46e5;
|
|
border-radius: 50%;
|
|
animation: spin 0.8s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
|
|
<!-- Global styles for Leaflet custom HTML markers and popups -->
|
|
<style>
|
|
/* ── Airbnb Style Custom Pin ── */
|
|
.airbnb-marker-wrapper {
|
|
background: transparent !important;
|
|
border: none !important;
|
|
}
|
|
|
|
.airbnb-pin {
|
|
position: relative;
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
.airbnb-pin:hover,
|
|
.airbnb-pin.is-hovered {
|
|
transform: scale(1.15) translateY(-4px);
|
|
z-index: 1000 !important;
|
|
}
|
|
|
|
.airbnb-pin.is-selected {
|
|
transform: scale(1.22) translateY(-6px);
|
|
z-index: 1001 !important;
|
|
}
|
|
|
|
.pin-content {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
background: #ffffff;
|
|
color: #1e293b;
|
|
padding: 5px 11px;
|
|
border-radius: 20px;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
|
|
border: 1.5px solid #4f46e5;
|
|
white-space: nowrap;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
/* ── Multi-Property Pin Layered Styling ── */
|
|
.airbnb-pin.is-multi-pin .pin-content {
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
|
|
border: 2px solid #6366f1;
|
|
box-shadow:
|
|
0 4px 16px rgba(99, 102, 241, 0.3),
|
|
3px -3px 0 0 #4338ca,
|
|
6px -6px 0 0 #312e81;
|
|
padding-right: 8px;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.group-count-badge {
|
|
position: absolute;
|
|
left: -8px;
|
|
top: -8px;
|
|
background: linear-gradient(135deg, #ec4899, #8b5cf6);
|
|
color: #ffffff;
|
|
font-size: 11px;
|
|
font-weight: 800;
|
|
min-width: 20px;
|
|
height: 20px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 4px;
|
|
box-shadow: 0 2px 8px rgba(236, 72, 153, 0.5);
|
|
border: 1.5px solid #ffffff;
|
|
animation: badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
|
|
@keyframes badge-pop {
|
|
0% { transform: scale(0); }
|
|
100% { transform: scale(1); }
|
|
}
|
|
|
|
.airbnb-pin.is-multi-pin:hover .pin-content,
|
|
.airbnb-pin.is-multi-pin.is-hovered .pin-content {
|
|
background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
|
|
color: #ffffff;
|
|
box-shadow:
|
|
0 8px 24px rgba(79, 70, 229, 0.45),
|
|
4px -4px 0 0 #3730a3,
|
|
8px -8px 0 0 #1e1b4b;
|
|
}
|
|
|
|
.airbnb-pin.is-multi-pin.is-selected .pin-content {
|
|
background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
|
|
color: #ffffff;
|
|
border-color: #ffffff;
|
|
box-shadow:
|
|
0 0 0 3px rgba(99, 102, 241, 0.45),
|
|
0 10px 28px rgba(79, 70, 229, 0.55),
|
|
4px -4px 0 0 #3730a3,
|
|
8px -8px 0 0 #1e1b4b;
|
|
}
|
|
|
|
.airbnb-pin:hover .pin-content,
|
|
.airbnb-pin.is-hovered .pin-content {
|
|
background: #4f46e5;
|
|
color: #ffffff;
|
|
box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
|
|
}
|
|
|
|
.airbnb-pin.is-selected .pin-content {
|
|
background: #4f46e5;
|
|
color: #ffffff;
|
|
border-color: #ffffff;
|
|
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.35), 0 8px 24px rgba(79, 70, 229, 0.5);
|
|
}
|
|
|
|
.pin-icon {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.pin-dong-tag {
|
|
background: rgba(79, 70, 229, 0.12);
|
|
color: #4f46e5;
|
|
padding: 1px 5px;
|
|
border-radius: 4px;
|
|
font-size: 10px;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.airbnb-pin:hover .pin-dong-tag,
|
|
.airbnb-pin.is-selected .pin-dong-tag {
|
|
background: rgba(255, 255, 255, 0.25);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.pin-pointer {
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 6px solid transparent;
|
|
border-right: 6px solid transparent;
|
|
border-top: 7px solid #4f46e5;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.airbnb-pin.is-multi-pin .pin-pointer {
|
|
border-top-color: #6366f1;
|
|
}
|
|
|
|
/* ── Airbnb Popup Card ── */
|
|
.airbnb-custom-popup .leaflet-popup-content-wrapper {
|
|
padding: 0;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
|
|
direction: rtl;
|
|
text-align: right;
|
|
font-family: 'Estedad', sans-serif !important;
|
|
}
|
|
|
|
.airbnb-custom-popup .leaflet-popup-content {
|
|
margin: 0;
|
|
line-height: 1.5;
|
|
width: 100% !important;
|
|
}
|
|
|
|
.airbnb-custom-popup .leaflet-popup-tip {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.airbnb-popup-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #ffffff;
|
|
font-family: 'Estedad', sans-serif;
|
|
color: #1e293b;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Multi-Property Group Popup Header & Switcher ── */
|
|
.popup-group-header {
|
|
background: #f8fafc;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
padding: 10px 14px 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.group-header-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.group-header-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #334155;
|
|
}
|
|
|
|
.group-header-icon {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.group-nav-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.group-nav-btn {
|
|
width: 26px;
|
|
height: 26px;
|
|
border-radius: 8px;
|
|
border: 1px solid #cbd5e1;
|
|
background: #ffffff;
|
|
color: #475569;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.group-nav-btn:hover {
|
|
background: #4f46e5;
|
|
color: #ffffff;
|
|
border-color: #4f46e5;
|
|
}
|
|
|
|
.group-step-indicator {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: #64748b;
|
|
min-width: 36px;
|
|
text-align: center;
|
|
}
|
|
|
|
.group-tabs-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
overflow-x: auto;
|
|
padding-bottom: 2px;
|
|
scrollbar-width: thin;
|
|
}
|
|
|
|
.group-tab-chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
border: 1px solid #e2e8f0;
|
|
background: #ffffff;
|
|
color: #475569;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.group-tab-chip:hover {
|
|
background: #f1f5f9;
|
|
border-color: #cbd5e1;
|
|
}
|
|
|
|
.group-tab-chip.is-active {
|
|
background: #4f46e5;
|
|
color: #ffffff;
|
|
border-color: #4f46e5;
|
|
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
|
|
}
|
|
|
|
.tab-chip-dong {
|
|
font-size: 10px;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* ── Popup Image & Badges ── */
|
|
.popup-image-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 140px;
|
|
background: #f1f5f9;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.popup-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
|
|
.popup-image-container:hover .popup-image {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.popup-category-badge {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(79, 70, 229, 0.9);
|
|
backdrop-filter: blur(4px);
|
|
color: #ffffff;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 4px 10px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.popup-code-badge {
|
|
position: absolute;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
backdrop-filter: blur(4px);
|
|
color: #ffffff;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
padding: 3px 8px;
|
|
border-radius: 6px;
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.popup-dong-badge {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
background: rgba(16, 185, 129, 0.9);
|
|
backdrop-filter: blur(4px);
|
|
color: #ffffff;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
padding: 3px 8px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.popup-content-body {
|
|
padding: 14px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.popup-title {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.popup-info-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
color: #64748b;
|
|
}
|
|
|
|
.popup-info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.popup-info-item.full-width {
|
|
white-space: normal;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.info-label {
|
|
color: #94a3b8;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.info-value {
|
|
color: #334155;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.text-mono {
|
|
font-family: 'Courier New', monospace;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.popup-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #f1f5f9;
|
|
}
|
|
|
|
.popup-btn {
|
|
flex: 1;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
padding: 7px 12px;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
transition: all 0.15s ease;
|
|
border: none;
|
|
}
|
|
|
|
.popup-btn-external {
|
|
background: #f8fafc;
|
|
color: #4f46e5;
|
|
border: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.popup-btn-external:hover {
|
|
background: #eff6ff;
|
|
border-color: #bfdbfe;
|
|
color: #2563eb;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.popup-btn-primary {
|
|
background: #4f46e5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.popup-btn-primary:hover {
|
|
background: #4338ca;
|
|
}
|
|
|
|
/* ── Dark Mode Adjustments ── */
|
|
.app-dark .count-badge {
|
|
background: rgba(30, 41, 59, 0.92);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.app-dark .badge-subcount {
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.app-dark .airbnb-custom-popup .leaflet-popup-content-wrapper {
|
|
background: #1e293b;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.app-dark .airbnb-popup-card {
|
|
background: #1e293b;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.app-dark .popup-group-header {
|
|
background: #0f172a;
|
|
border-bottom-color: #334155;
|
|
}
|
|
|
|
.app-dark .group-header-title {
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
.app-dark .group-nav-btn {
|
|
background: #1e293b;
|
|
border-color: #475569;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.app-dark .group-nav-btn:hover {
|
|
background: #6366f1;
|
|
color: #ffffff;
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.app-dark .group-tab-chip {
|
|
background: #1e293b;
|
|
border-color: #334155;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.app-dark .group-tab-chip:hover {
|
|
background: #334155;
|
|
}
|
|
|
|
.app-dark .group-tab-chip.is-active {
|
|
background: #6366f1;
|
|
color: #ffffff;
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.app-dark .popup-title {
|
|
color: #f8fafc;
|
|
}
|
|
|
|
.app-dark .info-value {
|
|
color: #e2e8f0;
|
|
}
|
|
|
|
.app-dark .popup-actions {
|
|
border-top-color: #334155;
|
|
}
|
|
|
|
.app-dark .popup-btn-external {
|
|
background: #0f172a;
|
|
color: #818cf8;
|
|
border-color: #334155;
|
|
}
|
|
|
|
.app-dark .popup-btn-external:hover {
|
|
background: #1e1b4b;
|
|
border-color: #4f46e5;
|
|
color: #a5b4fc;
|
|
}
|
|
|
|
.app-dark .pin-content {
|
|
background: #1e293b;
|
|
color: #f8fafc;
|
|
border-color: #6366f1;
|
|
}
|
|
|
|
.app-dark .airbnb-pin.is-multi-pin .pin-content {
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
|
border-color: #818cf8;
|
|
box-shadow:
|
|
0 4px 16px rgba(0, 0, 0, 0.4),
|
|
3px -3px 0 0 #4f46e5,
|
|
6px -6px 0 0 #3730a3;
|
|
}
|
|
</style>
|