feat(map): improve co-located properties with smart grouping, layered pin badges, popup navigation, and spread mode
deploy-chabokan / deploy (push) Canceled after 0s
deploy-chabokan / deploy (push) Canceled after 0s
This commit is contained in:
@@ -13,12 +13,14 @@
|
||||
<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">
|
||||
@@ -27,12 +29,40 @@
|
||||
<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>{{ propertiesWithCoords.length }} ملک</span>
|
||||
<span v-if="hasCoLocatedProperties && !isSpreadMode" class="badge-subcount">
|
||||
({{ locationGroups.length }} موقعیت)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- ── Bottom-Left: Coordinate readout ── -->
|
||||
@@ -77,59 +107,60 @@
|
||||
<!-- Scale control -->
|
||||
<l-control-scale position="bottomleft" :imperial="false" :maxWidth="150" />
|
||||
|
||||
<!-- Property Markers with Airbnb Popups -->
|
||||
<!-- ── VIEW A: SPREAD MODE MARKERS (Separated individual pins) ── -->
|
||||
<template v-if="isSpreadMode">
|
||||
<l-marker
|
||||
v-for="prop in propertiesWithCoords"
|
||||
:key="prop._id || prop.id"
|
||||
:lat-lng="prop.resolvedCoords"
|
||||
:icon="getMarkerIcon(prop)"
|
||||
@click="onMarkerClick(prop)"
|
||||
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: 320, minWidth: 270, className: 'airbnb-custom-popup' }">
|
||||
<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(prop)"
|
||||
:alt="prop.name"
|
||||
:src="getPropertyImage(item.prop)"
|
||||
:alt="item.prop.name"
|
||||
class="popup-image"
|
||||
@error="handleImageError"
|
||||
/>
|
||||
<span v-if="getCategoryName(prop)" class="popup-category-badge">
|
||||
{{ getCategoryName(prop) }}
|
||||
<span v-if="getCategoryName(item.prop)" class="popup-category-badge">
|
||||
{{ getCategoryName(item.prop) }}
|
||||
</span>
|
||||
<span v-if="prop.propertyCode" class="popup-code-badge">
|
||||
کد: {{ prop.propertyCode }}
|
||||
<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">{{ prop.name || 'ملک بدون نام' }}</h4>
|
||||
<h4 class="popup-title">{{ item.prop.name || 'ملک بدون نام' }}</h4>
|
||||
|
||||
<div class="popup-info-grid">
|
||||
<div v-if="prop.nationalGeoCode" class="popup-info-item">
|
||||
<div v-if="item.prop.nationalGeoCode" class="popup-info-item">
|
||||
<span class="info-label">شناسه ملی جغرافیایی:</span>
|
||||
<span class="info-value text-mono">{{ prop.nationalGeoCode }}</span>
|
||||
<span class="info-value text-mono">{{ item.prop.nationalGeoCode }}</span>
|
||||
</div>
|
||||
<div v-if="prop.dong" class="popup-info-item">
|
||||
<div v-if="item.prop.dong" class="popup-info-item">
|
||||
<span class="info-label">سهم دانگ:</span>
|
||||
<span class="info-value">{{ prop.dong }} دانگ</span>
|
||||
<span class="info-value text-indigo-600 font-bold">{{ item.prop.dong }} دانگ</span>
|
||||
</div>
|
||||
<div v-if="prop.zoningType" class="popup-info-item">
|
||||
<div v-if="item.prop.zoningType" class="popup-info-item">
|
||||
<span class="info-label">کاربری:</span>
|
||||
<span class="info-value">{{ prop.zoningType }}</span>
|
||||
<span class="info-value">{{ item.prop.zoningType }}</span>
|
||||
</div>
|
||||
<div v-if="prop.address" class="popup-info-item full-width">
|
||||
<div v-if="item.prop.address" class="popup-info-item full-width">
|
||||
<span class="info-label">آدرس:</span>
|
||||
<span class="info-value">{{ prop.address }}</span>
|
||||
<span class="info-value">{{ item.prop.address }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="popup-actions">
|
||||
<a
|
||||
:href="'/property/edit-property/' + (prop._id || prop.id)"
|
||||
:href="'/property/edit-property/' + (item.prop._id || item.prop.id)"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="popup-btn popup-btn-external"
|
||||
@@ -141,7 +172,7 @@
|
||||
<button
|
||||
type="button"
|
||||
class="popup-btn popup-btn-primary"
|
||||
@click="onEditClick(prop)"
|
||||
@click="onEditClick(item.prop)"
|
||||
title="ویرایش ملک"
|
||||
>
|
||||
<i class="pi pi-pencil"></i>
|
||||
@@ -152,6 +183,145 @@
|
||||
</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 -->
|
||||
@@ -209,6 +379,10 @@ 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';
|
||||
@@ -246,7 +420,7 @@ const resolveCoordinates = (prop) => {
|
||||
const c1 = parseFloat(rawCoords[1]);
|
||||
|
||||
if (!isNaN(c0) && !isNaN(c1) && !(c0 === 0 && c1 === 0)) {
|
||||
// Check orientation: Iran latitude is ~25-40, longitude is ~44-68
|
||||
// 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]
|
||||
}
|
||||
@@ -297,8 +471,91 @@ const propertiesWithCoords = computed(() => {
|
||||
.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;
|
||||
};
|
||||
|
||||
@@ -307,6 +564,7 @@ const handleImageError = (e) => {
|
||||
};
|
||||
|
||||
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;
|
||||
@@ -314,12 +572,57 @@ const getCategoryName = (prop) => {
|
||||
};
|
||||
|
||||
/**
|
||||
* Creates custom Airbnb-style Leaflet pin icon
|
||||
* Group active property index helper
|
||||
*/
|
||||
const getMarkerIcon = (prop) => {
|
||||
const propId = prop._id || prop.id;
|
||||
const isSelected = props.selectedPropertyId === propId;
|
||||
const isHovered = props.hoveredPropertyId === propId;
|
||||
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) || 'ملک';
|
||||
|
||||
@@ -336,8 +639,66 @@ const getMarkerIcon = (prop) => {
|
||||
return L.divIcon({
|
||||
className: 'airbnb-marker-wrapper',
|
||||
html: html,
|
||||
iconSize: [64, 38],
|
||||
iconAnchor: [32, 38],
|
||||
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]
|
||||
});
|
||||
};
|
||||
@@ -371,7 +732,15 @@ 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}`);
|
||||
@@ -442,11 +811,19 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
});
|
||||
|
||||
// Watch for selected property changes to zoom to it
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
@@ -515,6 +892,12 @@ defineExpose({
|
||||
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;
|
||||
@@ -571,6 +954,19 @@ defineExpose({
|
||||
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;
|
||||
}
|
||||
@@ -637,11 +1033,12 @@ defineExpose({
|
||||
}
|
||||
|
||||
.airbnb-pin {
|
||||
display: flex;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
.airbnb-pin:hover,
|
||||
@@ -651,17 +1048,18 @@ defineExpose({
|
||||
}
|
||||
|
||||
.airbnb-pin.is-selected {
|
||||
transform: scale(1.2) translateY(-6px);
|
||||
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 10px;
|
||||
padding: 5px 11px;
|
||||
border-radius: 20px;
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
@@ -671,6 +1069,64 @@ defineExpose({
|
||||
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;
|
||||
@@ -689,6 +1145,21 @@ defineExpose({
|
||||
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;
|
||||
@@ -698,12 +1169,16 @@ defineExpose({
|
||||
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 10px 30px rgba(0, 0, 0, 0.22);
|
||||
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
|
||||
direction: rtl;
|
||||
text-align: right;
|
||||
font-family: 'Estedad', sans-serif !important;
|
||||
@@ -728,6 +1203,113 @@ defineExpose({
|
||||
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%;
|
||||
@@ -774,6 +1356,19 @@ defineExpose({
|
||||
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;
|
||||
@@ -884,6 +1479,10 @@ defineExpose({
|
||||
color: #f1f5f9;
|
||||
}
|
||||
|
||||
.app-dark .badge-subcount {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.app-dark .airbnb-custom-popup .leaflet-popup-content-wrapper {
|
||||
background: #1e293b;
|
||||
color: #f1f5f9;
|
||||
@@ -894,6 +1493,43 @@ defineExpose({
|
||||
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;
|
||||
}
|
||||
@@ -923,4 +1559,13 @@ defineExpose({
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user