SysOps: manual — 2026-07-30 09:33 UTC
This commit is contained in:
sysops
@@ -1,13 +1,7 @@
|
||||
/**
|
||||
* Export Intel map — Leaflet + clustering + rich popups
|
||||
* Export Intel map — Leaflet + clustering (multi-instance per tab)
|
||||
*/
|
||||
window.ExportIntelMap = (function () {
|
||||
var map = null;
|
||||
var clusterLayer = null;
|
||||
var onEntityClick = null;
|
||||
var halalMode = false;
|
||||
var markersById = {};
|
||||
|
||||
var HALAL_COLORS = {
|
||||
hot: '#22c55e',
|
||||
warm: '#eab308',
|
||||
@@ -27,6 +21,9 @@ window.ExportIntelMap = (function () {
|
||||
foodservice: { color: '#2dd4bf', icon: '🍴', label: 'Foodservice' },
|
||||
};
|
||||
|
||||
var instances = {};
|
||||
var DEFAULT_ID = 'ei-map';
|
||||
|
||||
function cfg(type) {
|
||||
return TYPE_CFG[type] || { color: '#0ea5e9', icon: '📍', label: String(type || 'entity').replace(/_/g, ' ') };
|
||||
}
|
||||
@@ -52,19 +49,128 @@ window.ExportIntelMap = (function () {
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
function normalizeUrl(u) {
|
||||
if (!u) return null;
|
||||
u = String(u).trim();
|
||||
if (!u) return null;
|
||||
if (/^mailto:/i.test(u) || /^tel:/i.test(u)) return u;
|
||||
if (!/^https?:\/\//i.test(u)) u = 'https://' + u.replace(/^\/+/, '');
|
||||
return u;
|
||||
}
|
||||
|
||||
|
||||
function channelList(items, cls) {
|
||||
if (!items || !items.length) return '';
|
||||
return items.map(function (it) {
|
||||
var val = escapeHtml(it.value || it.display || '');
|
||||
var label = escapeHtml(it.label || '');
|
||||
var href = it.href || it.url;
|
||||
if (href) {
|
||||
return '<a class="ei-popup-link ' + (cls || '') + '" href="' + escapeHtml(href) + '" target="_blank" rel="noopener" title="' + val + '">' +
|
||||
(label ? '<span class="ei-popup-link-label">' + label + '</span>' : '') +
|
||||
'<span class="ei-popup-link-val">' + val + '</span></a>';
|
||||
}
|
||||
return '<div class="ei-popup-plain">' + (label ? '<span class="ei-popup-link-label">' + label + '</span>' : '') +
|
||||
'<span class="ei-popup-link-val">' + val + '</span></div>';
|
||||
}).join('');
|
||||
}
|
||||
|
||||
function contactPeopleBlock(people) {
|
||||
if (!people || !people.length) return '';
|
||||
var cards = people.map(function (c) {
|
||||
var head = escapeHtml(c.name || c.role || 'Contact');
|
||||
var sub = escapeHtml([c.role, c.title, c.department].filter(Boolean).join(' · '));
|
||||
var bits = [];
|
||||
if (c.email) bits.push('<a class="ei-popup-link" href="mailto:' + escapeHtml(c.email) + '">📧 ' + escapeHtml(c.email) + '</a>');
|
||||
if (c.email_alt) bits.push('<a class="ei-popup-link" href="mailto:' + escapeHtml(c.email_alt) + '">📧 ' + escapeHtml(c.email_alt) + ' (alt)</a>');
|
||||
if (c.phone) bits.push('<a class="ei-popup-link" href="tel:' + escapeHtml(c.phone) + '">📞 ' + escapeHtml(c.phone) + '</a>');
|
||||
if (c.mobile) bits.push('<a class="ei-popup-link" href="tel:' + escapeHtml(c.mobile) + '">📱 ' + escapeHtml(c.mobile) + '</a>');
|
||||
if (c.whatsapp) bits.push('<a class="ei-popup-link" href="https://wa.me/' + escapeHtml(String(c.whatsapp).replace(/\D/g, '')) + '" target="_blank" rel="noopener">💬 ' + escapeHtml(c.whatsapp) + '</a>');
|
||||
if (c.website) bits.push('<a class="ei-popup-link" href="' + escapeHtml(c.website) + '" target="_blank" rel="noopener">🌐 Website</a>');
|
||||
if (c.linkedin_url) bits.push('<a class="ei-popup-link" href="' + escapeHtml(c.linkedin_url) + '" target="_blank" rel="noopener">in LinkedIn</a>');
|
||||
return '<div class="ei-popup-person">' +
|
||||
'<div class="ei-popup-person-head">' + head + (c.is_primary ? ' <span class="ei-popup-primary">primair</span>' : '') + '</div>' +
|
||||
(sub ? '<div class="ei-popup-person-sub">' + sub + '</div>' : '') +
|
||||
(bits.length ? '<div class="ei-popup-person-links">' + bits.join('') + '</div>' : '') +
|
||||
'</div>';
|
||||
}).join('');
|
||||
return '<div class="ei-popup-section"><div class="ei-popup-section-title">Contactpersonen</div>' + cards + '</div>';
|
||||
}
|
||||
|
||||
function reachBlock(p) {
|
||||
var r = p.reach || {};
|
||||
if (!r.has_any && !p.email && !p.phone && !(p.websites && p.websites.length)) {
|
||||
return '<div class="ei-popup-empty-contact">Nog geen contact — sync contacten of vul handmatig aan.</div>';
|
||||
}
|
||||
var html = '<div class="ei-popup-reach">';
|
||||
if ((r.emails && r.emails.length) || p.email) {
|
||||
var emails = r.emails && r.emails.length ? r.emails : (p.email ? [{ label: 'E-mail', value: p.email, href: 'mailto:' + p.email }] : []);
|
||||
html += '<div class="ei-popup-section"><div class="ei-popup-section-title">E-mail</div><div class="ei-popup-channel-list">' + channelList(emails) + '</div></div>';
|
||||
}
|
||||
if ((r.phones && r.phones.length) || p.phone) {
|
||||
var phones = r.phones && r.phones.length ? r.phones : (p.phone ? [{ label: 'Telefoon', value: p.phone, href: 'tel:' + p.phone }] : []);
|
||||
html += '<div class="ei-popup-section"><div class="ei-popup-section-title">Telefoon</div><div class="ei-popup-channel-list">' + channelList(phones) + '</div></div>';
|
||||
}
|
||||
var webHtml = websitesBlock(p);
|
||||
if (webHtml) html += webHtml.replace('ei-popup-row ei-popup-websites', 'ei-popup-section ei-popup-websites').replace('ei-popup-k">Websites', 'ei-popup-section-title">Websites').replace('ei-popup-v ei-popup-web-list', 'ei-popup-web-list');
|
||||
if (r.addresses && r.addresses.length) {
|
||||
html += '<div class="ei-popup-section"><div class="ei-popup-section-title">Adres</div><div class="ei-popup-channel-list">' + channelList(r.addresses) + '</div></div>';
|
||||
}
|
||||
if (r.social && r.social.length) {
|
||||
html += '<div class="ei-popup-section"><div class="ei-popup-section-title">Social</div><div class="ei-popup-channel-list">' + channelList(r.social) + '</div></div>';
|
||||
}
|
||||
if (r.maps_url) {
|
||||
html += '<div class="ei-popup-section"><a class="ei-popup-maps" href="' + escapeHtml(r.maps_url) + '" target="_blank" rel="noopener">📍 Open in Google Maps</a></div>';
|
||||
}
|
||||
html += contactPeopleBlock(r.contact_people);
|
||||
html += '</div>';
|
||||
return html;
|
||||
}
|
||||
|
||||
function websitesBlock(p) {
|
||||
var sites = p.websites;
|
||||
if ((!sites || !sites.length) && p.website) {
|
||||
var w = normalizeUrl(p.website);
|
||||
if (w) sites = [{ label: 'Organisatie', url: w, display: p.website }];
|
||||
}
|
||||
if (!sites || !sites.length) return '';
|
||||
var links = sites.map(function (s) {
|
||||
var href = normalizeUrl(s.url || s);
|
||||
if (!href) return '';
|
||||
var label = escapeHtml(s.label || 'Website');
|
||||
var disp = escapeHtml(s.display || s.url || '');
|
||||
return '<a class="ei-popup-web" href="' + escapeHtml(href) + '" target="_blank" rel="noopener" title="' + disp + '">' + label + '</a>';
|
||||
}).filter(Boolean).join('');
|
||||
if (!links) return '';
|
||||
return (
|
||||
'<div class="ei-popup-row ei-popup-websites">' +
|
||||
'<span class="ei-popup-k">Websites</span>' +
|
||||
'<span class="ei-popup-v ei-popup-web-list">' + links + '</span>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
function halalColor(p) {
|
||||
var tier = p.halal_tier || 'low';
|
||||
return HALAL_COLORS[tier] || HALAL_COLORS.low;
|
||||
}
|
||||
|
||||
function popupHtml(p) {
|
||||
function MapInstance(containerId) {
|
||||
this.containerId = containerId;
|
||||
this.map = null;
|
||||
this.clusterLayer = null;
|
||||
this.onEntityClick = null;
|
||||
this.halalMode = false;
|
||||
this.markersById = {};
|
||||
}
|
||||
|
||||
MapInstance.prototype.popupHtml = function (p) {
|
||||
var c = cfg(p.entity_type);
|
||||
var id = p.id;
|
||||
var web = p.website;
|
||||
if (web && !/^https?:\/\//i.test(web)) web = 'https://' + web;
|
||||
var halalRow = '';
|
||||
if (p.halal_score != null) {
|
||||
halalRow = row('Halal kans', p.halal_score + '/100' + (halalMode ? ' · ' + (p.halal_tier || '') : ''));
|
||||
halalRow = row('Halal kans', p.halal_score + '/100' + (this.halalMode ? ' · ' + (p.halal_tier || '') : ''));
|
||||
}
|
||||
var contactBits = [];
|
||||
if (p.email) contactBits.push('📧 ' + escapeHtml(p.email));
|
||||
@@ -75,7 +181,7 @@ window.ExportIntelMap = (function () {
|
||||
return (
|
||||
'<div class="ei-popup-card" data-entity-id="' + escapeHtml(id) + '">' +
|
||||
'<div class="ei-popup-top">' +
|
||||
'<span class="ei-popup-badge" style="--badge-color:' + (halalMode ? halalColor(p) : c.color) + '">' + c.icon + ' ' + escapeHtml(c.label) + '</span>' +
|
||||
'<span class="ei-popup-badge" style="--badge-color:' + (this.halalMode ? halalColor(p) : c.color) + '">' + c.icon + ' ' + escapeHtml(c.label) + '</span>' +
|
||||
'<span class="ei-popup-flag">' + escapeHtml(p.country_iso2 || '') + '</span>' +
|
||||
'</div>' +
|
||||
'<h3 class="ei-popup-name">' + escapeHtml(p.name) + '</h3>' +
|
||||
@@ -86,7 +192,7 @@ window.ExportIntelMap = (function () {
|
||||
row('Adres', p.address_line) +
|
||||
row('E-mail', p.email, p.email ? 'mailto:' + p.email : null) +
|
||||
row('Telefoon', p.phone, p.phone ? 'tel:' + p.phone : null) +
|
||||
row('Website', p.website, web) +
|
||||
websitesBlock(p) +
|
||||
row('Volume', p.volume_band) +
|
||||
row('Contacten', p.contact_count > 0 ? p.contact_count + ' in registry' : null) +
|
||||
row('Confidence', p.confidence != null ? p.confidence + '%' : null) +
|
||||
@@ -97,12 +203,12 @@ window.ExportIntelMap = (function () {
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
function pinIcon(type, p) {
|
||||
MapInstance.prototype.pinIcon = function (type, p) {
|
||||
var c = cfg(type);
|
||||
var color = halalMode && p && p.halal_score != null ? halalColor(p) : c.color;
|
||||
var ring = halalMode && p && p.halal_tier === 'hot' ? ' ei-pin-hot' : '';
|
||||
var color = this.halalMode && p && p.halal_score != null ? halalColor(p) : c.color;
|
||||
var ring = this.halalMode && p && p.halal_tier === 'hot' ? ' ei-pin-hot' : '';
|
||||
return L.divIcon({
|
||||
className: 'ei-pin-wrap',
|
||||
html:
|
||||
@@ -114,22 +220,58 @@ window.ExportIntelMap = (function () {
|
||||
iconAnchor: [15, 15],
|
||||
popupAnchor: [0, -16],
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function openEntityId(rawId) {
|
||||
MapInstance.prototype.openEntityId = function (rawId) {
|
||||
var id = Number(rawId);
|
||||
if (!Number.isFinite(id)) return;
|
||||
if (onEntityClick) {
|
||||
onEntityClick(id);
|
||||
if (this.onEntityClick) {
|
||||
this.onEntityClick(id);
|
||||
return;
|
||||
}
|
||||
try {
|
||||
document.dispatchEvent(new CustomEvent('export-intel:open-entity', { detail: { id: id } }));
|
||||
} catch (e) { /* empty */ }
|
||||
}
|
||||
};
|
||||
|
||||
function wirePopup(container) {
|
||||
|
||||
MapInstance.prototype.enrichPopup = function (entityId, popup) {
|
||||
if (!entityId || !popup) return;
|
||||
var self = this;
|
||||
fetch('/api/export-intel/entities/' + entityId)
|
||||
.then(function (r) { return r.ok ? r.json() : null; })
|
||||
.then(function (ent) {
|
||||
if (!ent || !popup || !popup.isOpen || !popup.isOpen()) return;
|
||||
var merged = {
|
||||
id: ent.id,
|
||||
name: ent.name,
|
||||
entity_type: ent.entity_type,
|
||||
country_iso2: ent.country_iso2,
|
||||
city: ent.city,
|
||||
address_line: ent.address_line,
|
||||
postal_code: ent.postal_code,
|
||||
email: ent.email,
|
||||
phone: ent.phone,
|
||||
website: ent.website,
|
||||
websites: ent.websites || [],
|
||||
reach: ent.reach || null,
|
||||
volume_band: ent.volume_band,
|
||||
confidence: ent.confidence,
|
||||
pipeline_stage: ent.pipeline_stage,
|
||||
contact_count: ent.contact_count,
|
||||
halal_score: ent.halal_score,
|
||||
halal_tier: ent.halal_tier,
|
||||
};
|
||||
popup.setContent(self.popupHtml(merged));
|
||||
var el = popup.getElement();
|
||||
if (el) self.wirePopup(el.querySelector('.leaflet-popup-content') || el);
|
||||
})
|
||||
.catch(function () { /* keep cached popup */ });
|
||||
};
|
||||
|
||||
MapInstance.prototype.wirePopup = function (container) {
|
||||
if (!container) return;
|
||||
var self = this;
|
||||
var popupRoot = container.closest('.leaflet-popup') || container;
|
||||
if (window.L && L.DomEvent) {
|
||||
L.DomEvent.disableClickPropagation(popupRoot);
|
||||
@@ -143,7 +285,7 @@ window.ExportIntelMap = (function () {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}
|
||||
openEntityId(id);
|
||||
self.openEntityId(id);
|
||||
};
|
||||
if (window.L && L.DomEvent) {
|
||||
L.DomEvent.on(btn, 'click', onBtn);
|
||||
@@ -156,38 +298,39 @@ window.ExportIntelMap = (function () {
|
||||
container.addEventListener('click', function (e) {
|
||||
if (e.target.closest('.ei-popup-btn') || e.target.closest('a')) return;
|
||||
var card = e.target.closest('[data-entity-id]');
|
||||
if (card) openEntityId(card.getAttribute('data-entity-id'));
|
||||
if (card) self.openEntityId(card.getAttribute('data-entity-id'));
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
function invalidateMapSize() {
|
||||
if (!map) return;
|
||||
MapInstance.prototype.invalidateSize = function () {
|
||||
if (!this.map) return;
|
||||
var map = this.map;
|
||||
map.invalidateSize(true);
|
||||
setTimeout(function () { if (map) map.invalidateSize(true); }, 120);
|
||||
setTimeout(function () { if (map) map.invalidateSize(true); }, 400);
|
||||
setTimeout(function () { if (map) map.invalidateSize(true); }, 800);
|
||||
}
|
||||
};
|
||||
|
||||
function init(containerId) {
|
||||
var el = document.getElementById(containerId);
|
||||
MapInstance.prototype.init = function () {
|
||||
var el = document.getElementById(this.containerId);
|
||||
if (!el || !window.L) return null;
|
||||
if (map && map.getContainer() === el) {
|
||||
invalidateMapSize();
|
||||
return map;
|
||||
if (this.map && this.map.getContainer() === el) {
|
||||
this.invalidateSize();
|
||||
return this.map;
|
||||
}
|
||||
if (map) {
|
||||
map.remove();
|
||||
map = null;
|
||||
clusterLayer = null;
|
||||
if (this.map) {
|
||||
this.map.remove();
|
||||
this.map = null;
|
||||
this.clusterLayer = null;
|
||||
}
|
||||
map = L.map(containerId, { zoomControl: true, attributionControl: true }).setView([20, 10], 2);
|
||||
var self = this;
|
||||
this.map = L.map(this.containerId, { zoomControl: true, attributionControl: true }).setView([20, 10], 2);
|
||||
L.tileLayer('/api/map/tiles/{z}/{x}/{y}.png', {
|
||||
attribution: '© OSM © CARTO',
|
||||
maxZoom: 19,
|
||||
}).addTo(map);
|
||||
}).addTo(this.map);
|
||||
|
||||
if (window.L.markerClusterGroup) {
|
||||
clusterLayer = L.markerClusterGroup({
|
||||
this.clusterLayer = L.markerClusterGroup({
|
||||
maxClusterRadius: 42,
|
||||
spiderfyOnMaxZoom: true,
|
||||
showCoverageOnHover: false,
|
||||
@@ -202,100 +345,168 @@ window.ExportIntelMap = (function () {
|
||||
});
|
||||
},
|
||||
});
|
||||
map.addLayer(clusterLayer);
|
||||
this.map.addLayer(this.clusterLayer);
|
||||
} else {
|
||||
clusterLayer = L.layerGroup();
|
||||
map.addLayer(clusterLayer);
|
||||
this.clusterLayer = L.layerGroup();
|
||||
this.map.addLayer(this.clusterLayer);
|
||||
}
|
||||
|
||||
map.on('popupopen', function (e) {
|
||||
this.map.on('popupopen', function (e) {
|
||||
var root = e.popup && e.popup.getElement();
|
||||
if (!root) return;
|
||||
if (window.L && L.DomEvent) {
|
||||
L.DomEvent.disableClickPropagation(root);
|
||||
L.DomEvent.disableScrollPropagation(root);
|
||||
}
|
||||
wirePopup(root.querySelector('.leaflet-popup-content') || root);
|
||||
self.wirePopup(root.querySelector('.leaflet-popup-content') || root);
|
||||
var card = root.querySelector('[data-entity-id]');
|
||||
var eid = card && card.getAttribute('data-entity-id');
|
||||
if (eid) self.enrichPopup(Number(eid), e.popup);
|
||||
});
|
||||
|
||||
invalidateMapSize();
|
||||
return map;
|
||||
}
|
||||
this.invalidateSize();
|
||||
return this.map;
|
||||
};
|
||||
|
||||
function setFeatures(geojson, opts) {
|
||||
MapInstance.prototype.setFeatures = function (geojson, opts) {
|
||||
opts = opts || {};
|
||||
if (!map || !clusterLayer) return;
|
||||
clusterLayer.clearLayers();
|
||||
markersById = {};
|
||||
if (!this.map || !this.clusterLayer) return;
|
||||
this.clusterLayer.clearLayers();
|
||||
this.markersById = {};
|
||||
var features = (geojson && geojson.features) || [];
|
||||
var markers = [];
|
||||
var self = this;
|
||||
|
||||
features.forEach(function (f) {
|
||||
var coords = f.geometry && f.geometry.coordinates;
|
||||
if (!coords) return;
|
||||
var p = f.properties || {};
|
||||
var marker = L.marker([coords[1], coords[0]], { icon: pinIcon(p.entity_type, p) });
|
||||
var marker = L.marker([coords[1], coords[0]], { icon: self.pinIcon(p.entity_type, p) });
|
||||
marker._eiId = p.id;
|
||||
if (p.id != null) markersById[p.id] = marker;
|
||||
marker.bindPopup(popupHtml(p), { maxWidth: 320, minWidth: 260, className: 'ei-leaflet-popup' });
|
||||
marker.on('dblclick', function () {
|
||||
if (onEntityClick && p.id) onEntityClick(p.id);
|
||||
if (p.id != null) self.markersById[p.id] = marker;
|
||||
marker.bindPopup(self.popupHtml(p), { maxWidth: 360, minWidth: 280, maxHeight: 420, className: 'ei-leaflet-popup', autoClose: false, closeOnClick: false });
|
||||
marker.on('click', function (e) {
|
||||
if (window.L && L.DomEvent) L.DomEvent.stopPropagation(e);
|
||||
marker.openPopup();
|
||||
if (self.onEntityClick && p.id != null) self.onEntityClick(p.id);
|
||||
});
|
||||
markers.push(marker);
|
||||
});
|
||||
|
||||
if (clusterLayer.addLayers) clusterLayer.addLayers(markers);
|
||||
else markers.forEach(function (m) { clusterLayer.addLayer(m); });
|
||||
if (this.clusterLayer.addLayers) this.clusterLayer.addLayers(markers);
|
||||
else markers.forEach(function (m) { self.clusterLayer.addLayer(m); });
|
||||
|
||||
invalidateMapSize();
|
||||
this.invalidateSize();
|
||||
|
||||
if (opts.autoFit === false) {
|
||||
map.setView([20, 10], 2);
|
||||
this.map.setView([20, 10], 2);
|
||||
} else if (features.length === 1) {
|
||||
var c = features[0].geometry.coordinates;
|
||||
map.setView([c[1], c[0]], 10);
|
||||
} else if (opts.autoFit && markers.length > 1 && clusterLayer.getBounds) {
|
||||
this.map.setView([c[1], c[0]], 10);
|
||||
} else if (opts.autoFit && markers.length > 1 && this.clusterLayer.getBounds) {
|
||||
try {
|
||||
map.fitBounds(clusterLayer.getBounds(), { padding: [40, 40], maxZoom: 12 });
|
||||
this.map.fitBounds(this.clusterLayer.getBounds(), { padding: [40, 40], maxZoom: 12 });
|
||||
} catch (e) { /* empty */ }
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function setHalalMode(on) {
|
||||
halalMode = !!on;
|
||||
}
|
||||
MapInstance.prototype.setHalalMode = function (on) {
|
||||
this.halalMode = !!on;
|
||||
};
|
||||
|
||||
function setOnEntityClick(fn) {
|
||||
onEntityClick = fn;
|
||||
}
|
||||
MapInstance.prototype.setOnEntityClick = function (fn) {
|
||||
this.onEntityClick = typeof fn === 'function' ? fn : null;
|
||||
};
|
||||
|
||||
function flyTo(lat, lon, zoom) {
|
||||
if (map && lat && lon) map.setView([lat, lon], zoom || 10);
|
||||
}
|
||||
MapInstance.prototype.flyTo = function (lat, lon, zoom) {
|
||||
if (this.map && lat && lon) this.map.setView([lat, lon], zoom || 10);
|
||||
};
|
||||
|
||||
function highlightEntity(id) {
|
||||
var marker = markersById[id];
|
||||
if (!marker || !map) return;
|
||||
MapInstance.prototype.highlightEntity = function (id) {
|
||||
var marker = this.markersById[id];
|
||||
if (!marker || !this.map) return;
|
||||
var latlng = marker.getLatLng();
|
||||
map.setView(latlng, Math.max(map.getZoom(), 14));
|
||||
this.map.setView(latlng, Math.max(this.map.getZoom(), 14));
|
||||
marker.openPopup();
|
||||
}
|
||||
};
|
||||
|
||||
function closePopup() {
|
||||
if (map) map.closePopup();
|
||||
}
|
||||
MapInstance.prototype.closePopup = function () {
|
||||
if (this.map) this.map.closePopup();
|
||||
};
|
||||
|
||||
function destroy() {
|
||||
if (map) {
|
||||
map.remove();
|
||||
map = null;
|
||||
clusterLayer = null;
|
||||
MapInstance.prototype.destroy = function () {
|
||||
if (this.map) {
|
||||
this.map.remove();
|
||||
this.map = null;
|
||||
this.clusterLayer = null;
|
||||
}
|
||||
delete instances[this.containerId];
|
||||
};
|
||||
|
||||
function resolveId(containerId) {
|
||||
return containerId || DEFAULT_ID;
|
||||
}
|
||||
|
||||
function getOrCreate(containerId) {
|
||||
var id = resolveId(containerId);
|
||||
if (!instances[id]) instances[id] = new MapInstance(id);
|
||||
return instances[id];
|
||||
}
|
||||
|
||||
function init(containerId) {
|
||||
return getOrCreate(containerId).init();
|
||||
}
|
||||
|
||||
function setFeatures(geojson, opts, containerId) {
|
||||
getOrCreate(containerId).setFeatures(geojson, opts);
|
||||
}
|
||||
|
||||
function setHalalMode(on, containerId) {
|
||||
getOrCreate(containerId).setHalalMode(on);
|
||||
}
|
||||
|
||||
function setOnEntityClick(fn, containerId) {
|
||||
getOrCreate(containerId).setOnEntityClick(fn);
|
||||
}
|
||||
|
||||
function flyTo(lat, lon, zoom, containerId) {
|
||||
getOrCreate(containerId).flyTo(lat, lon, zoom);
|
||||
}
|
||||
|
||||
function highlightEntity(id, containerId) {
|
||||
getOrCreate(containerId).highlightEntity(id);
|
||||
}
|
||||
|
||||
function closePopup(containerId) {
|
||||
getOrCreate(containerId).closePopup();
|
||||
}
|
||||
|
||||
function destroy(containerId) {
|
||||
if (containerId) getOrCreate(containerId).destroy();
|
||||
else {
|
||||
Object.keys(instances).forEach(function (k) { instances[k].destroy(); });
|
||||
}
|
||||
}
|
||||
|
||||
function invalidateAll() {
|
||||
Object.keys(instances).forEach(function (k) { instances[k].invalidateSize(); });
|
||||
}
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
window.addEventListener('resize', function () { invalidateMapSize(); });
|
||||
window.addEventListener('resize', invalidateAll);
|
||||
}
|
||||
|
||||
return { init, setFeatures, setOnEntityClick, setHalalMode, flyTo, closePopup, highlightEntity, destroy, TYPE_CFG: TYPE_CFG, cfg: cfg };
|
||||
return {
|
||||
init: init,
|
||||
setFeatures: setFeatures,
|
||||
setOnEntityClick: setOnEntityClick,
|
||||
setHalalMode: setHalalMode,
|
||||
flyTo: flyTo,
|
||||
closePopup: closePopup,
|
||||
highlightEntity: highlightEntity,
|
||||
destroy: destroy,
|
||||
invalidateAll: invalidateAll,
|
||||
TYPE_CFG: TYPE_CFG,
|
||||
cfg: cfg,
|
||||
};
|
||||
})();
|
||||
|
||||
@@ -0,0 +1,591 @@
|
||||
/**
|
||||
* Export Intel — profiel popup (imperatief, geen Alpine in modal).
|
||||
*/
|
||||
(function (global) {
|
||||
'use strict';
|
||||
|
||||
function normalizeWebUrl(u) {
|
||||
if (!u) return '';
|
||||
u = String(u).trim();
|
||||
if (!u) return '';
|
||||
if (!/^https?:\/\//i.test(u)) u = 'https://' + u.replace(/^\/+/, '');
|
||||
return u;
|
||||
}
|
||||
|
||||
|
||||
function contactGapHint(e) {
|
||||
var r = e.reach || {};
|
||||
var hasDirect = !!(e.phone || e.email || e.website || (r.phones && r.phones.length) || (r.emails && r.emails.length) || (r.websites && r.websites.length));
|
||||
if (hasDirect) return '';
|
||||
var src = e.source || 'osm';
|
||||
return '<p class="ei-drawer-empty ei-drawer-hint">Geen telefoon of e-mail in bron (' + esc(src) + '). Gratis opties: <strong>Bewerken</strong> (handmatig), of <strong>Sync contacten</strong> (scant websites) / <strong>Sync distributeurs</strong> (haalt OSM-tags opnieuw).</p>';
|
||||
}
|
||||
|
||||
function reachSectionHtml(e) {
|
||||
var r = e.reach || {};
|
||||
var html = '';
|
||||
function links(title, items, render) {
|
||||
if (!items || !items.length) return;
|
||||
html += '<div class="ei-reach-block"><h5>' + esc(title) + '</h5>';
|
||||
for (var i = 0; i < items.length; i++) html += render(items[i]);
|
||||
html += '</div>';
|
||||
}
|
||||
links('E-mail', r.emails, function (it) {
|
||||
return '<div class="ei-drawer-kv"><span>' + esc(it.label || 'E-mail') + '</span><a href="' + esc(it.href || ('mailto:' + it.value)) + '">' + esc(it.value) + '</a></div>';
|
||||
});
|
||||
links('Telefoon', r.phones, function (it) {
|
||||
return '<div class="ei-drawer-kv"><span>' + esc(it.label || 'Tel') + '</span><a href="' + esc(it.href || ('tel:' + it.value)) + '">' + esc(it.value) + '</a></div>';
|
||||
});
|
||||
if (!r.emails || !r.emails.length) {
|
||||
if (e.email) html += '<div class="ei-drawer-kv"><span>E-mail</span><a href="mailto:' + esc(e.email) + '">' + esc(e.email) + '</a></div>';
|
||||
}
|
||||
if (!r.phones || !r.phones.length) {
|
||||
if (e.phone) html += '<div class="ei-drawer-kv"><span>Telefoon</span><a href="tel:' + esc(e.phone) + '">' + esc(e.phone) + '</a></div>';
|
||||
}
|
||||
html += websitesHtml(e);
|
||||
links('Adres', r.addresses, function (it) {
|
||||
return '<div class="ei-drawer-kv"><span>' + esc(it.label || 'Adres') + '</span><span>' + esc(it.value) + '</span></div>';
|
||||
});
|
||||
links('Social', r.social, function (it) {
|
||||
return '<div class="ei-drawer-kv"><span>' + esc(it.label || 'Link') + '</span><a href="' + esc(it.href) + '" target="_blank" rel="noopener">' + esc(it.value) + '</a></div>';
|
||||
});
|
||||
if (r.maps_url) {
|
||||
html += '<div class="ei-drawer-kv"><span>Maps</span><a href="' + esc(r.maps_url) + '" target="_blank" rel="noopener">Google Maps →</a></div>';
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
function websitesHtml(e) {
|
||||
var sites = e.websites;
|
||||
if ((!sites || !sites.length) && e.website) {
|
||||
sites = [{ label: 'Organisatie', url: e.website, display: e.website }];
|
||||
}
|
||||
if (!sites || !sites.length) return '';
|
||||
var rows = '';
|
||||
for (var i = 0; i < sites.length; i++) {
|
||||
var s = sites[i];
|
||||
var href = normalizeWebUrl(s.url || s);
|
||||
if (!href) continue;
|
||||
rows += '<div class="ei-drawer-kv"><span>' + esc(s.label || 'Website') + '</span>' +
|
||||
'<a href="' + esc(href) + '" target="_blank" rel="noopener">' + esc(s.display || s.url || href) + '</a></div>';
|
||||
}
|
||||
return rows;
|
||||
}
|
||||
|
||||
function esc(s) {
|
||||
if (s == null) return '';
|
||||
return String(s)
|
||||
.replace(/&/g, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"');
|
||||
}
|
||||
|
||||
function typeLabel(t) {
|
||||
return (t || '').replace(/_/g, ' ');
|
||||
}
|
||||
|
||||
function getApp() {
|
||||
return global.__exportIntelApp || null;
|
||||
}
|
||||
|
||||
function territoryName(iso2) {
|
||||
var app = getApp();
|
||||
if (!iso2) return '';
|
||||
if (app && app.territories) {
|
||||
for (var i = 0; i < app.territories.length; i++) {
|
||||
if (app.territories[i].country_iso2 === iso2) return app.territories[i].name_nl;
|
||||
}
|
||||
}
|
||||
return iso2;
|
||||
}
|
||||
|
||||
function formatCoords(lat, lon) {
|
||||
if (lat == null || lon == null) return '';
|
||||
var a = Number(lat);
|
||||
var b = Number(lon);
|
||||
if (!Number.isFinite(a) || !Number.isFinite(b)) return '';
|
||||
return a.toFixed(5) + ', ' + b.toFixed(5);
|
||||
}
|
||||
|
||||
function mountEl() {
|
||||
return document.getElementById('ei-profile-mount');
|
||||
}
|
||||
|
||||
function activeMapId(app) {
|
||||
if (!app) return 'ei-map';
|
||||
if (app.tab === 'map') return 'ei-map';
|
||||
if (app.tabMapId && typeof app.tabMapId === 'function') {
|
||||
return app.tabMapId() || 'ei-map';
|
||||
}
|
||||
return 'ei-map-' + (app.tab || 'map');
|
||||
}
|
||||
|
||||
var Profile = {
|
||||
_busy: false,
|
||||
|
||||
showShell: function (on) {
|
||||
var el = document.getElementById('ei-profile-modal');
|
||||
if (!el) return;
|
||||
if (on) {
|
||||
el.classList.add('is-open');
|
||||
el.setAttribute('aria-hidden', 'false');
|
||||
document.body.classList.add('ei-profile-open');
|
||||
} else {
|
||||
el.classList.remove('is-open');
|
||||
el.setAttribute('aria-hidden', 'true');
|
||||
document.body.classList.remove('ei-profile-open');
|
||||
}
|
||||
},
|
||||
|
||||
clearMount: function () {
|
||||
var m = mountEl();
|
||||
if (m) m.innerHTML = '';
|
||||
},
|
||||
|
||||
renderLoading: function () {
|
||||
var m = mountEl();
|
||||
if (!m) return;
|
||||
m.innerHTML =
|
||||
'<div class="ei-drawer-loading" style="padding:3rem 1.5rem;text-align:center">' +
|
||||
'<span class="ei-map-spinner"></span>' +
|
||||
'<p style="margin-top:1rem;color:#94a3b8">Profiel laden…</p></div>';
|
||||
},
|
||||
|
||||
renderError: function (msg) {
|
||||
var m = mountEl();
|
||||
if (!m) return;
|
||||
m.innerHTML =
|
||||
'<div class="ei-drawer-loading" style="padding:2rem 1.5rem">' +
|
||||
'<p style="color:#fecdd3;margin-bottom:1rem">' + esc(msg || 'Laden mislukt') + '</p>' +
|
||||
'<button type="button" class="btn btn-sm" data-ei-action="close">Sluiten</button></div>';
|
||||
},
|
||||
|
||||
patchEntityInApp: function (app, entity) {
|
||||
if (!app || !entity || !entity.id) return;
|
||||
var id = entity.id;
|
||||
if (Array.isArray(app.entities)) {
|
||||
for (var i = 0; i < app.entities.length; i++) {
|
||||
if (app.entities[i].id === id) {
|
||||
Object.assign(app.entities[i], entity);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (Array.isArray(app.crmPipeline)) {
|
||||
for (var j = 0; j < app.crmPipeline.length; j++) {
|
||||
if (app.crmPipeline[j].id === id) {
|
||||
Object.assign(app.crmPipeline[j], entity);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (Array.isArray(app.halalTopEntities)) {
|
||||
for (var k = 0; k < app.halalTopEntities.length; k++) {
|
||||
if (app.halalTopEntities[k].id === id) {
|
||||
Object.assign(app.halalTopEntities[k], entity);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
renderFull: function (e, app) {
|
||||
var m = mountEl();
|
||||
if (!m || !e) return;
|
||||
app = app || getApp();
|
||||
|
||||
var contacts = e.contacts || [];
|
||||
var contactRows = '';
|
||||
for (var i = 0; i < contacts.length; i++) {
|
||||
var c = contacts[i];
|
||||
contactRows +=
|
||||
'<div class="ei-contact-row">' +
|
||||
'<strong>' + esc(c.name || c.role || 'Contact') + '</strong>' +
|
||||
(c.role ? '<span class="ei-contact-role">' + esc(c.role) + '</span>' : '') +
|
||||
(c.email ? '<div>📧 <a href="mailto:' + esc(c.email) + '">' + esc(c.email) + '</a></div>' : '') +
|
||||
(c.phone ? '<div>📞 <a href="tel:' + esc(c.phone) + '">' + esc(c.phone) + '</a></div>' : '') +
|
||||
(c.website_contact_url ? '<div>🌐 <a href="' + esc(normalizeWebUrl(c.website_contact_url)) + '" target="_blank" rel="noopener">' + esc(c.website_contact_url) + '</a></div>' : '') +
|
||||
(c.linkedin_url ? '<div>in <a href="' + esc(normalizeWebUrl(c.linkedin_url)) + '" target="_blank" rel="noopener">LinkedIn</a></div>' : '') +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
var halalTags = '';
|
||||
var labels = e.halal_reason_labels || [];
|
||||
for (var j = 0; j < labels.length; j++) {
|
||||
halalTags += '<span class="ei-halal-tag">' + esc(labels[j]) + '</span>';
|
||||
}
|
||||
|
||||
var crmBtn = e.client_id
|
||||
? '<a class="ei-action-tile ei-action-crm-done" href="/clients"><span class="ei-action-icon">✓</span><span class="ei-action-label">Open CRM</span><span class="ei-action-sub">' +
|
||||
esc(e.crm_client_name || ('Klant #' + e.client_id)) + '</span></a>'
|
||||
: '<button type="button" class="ei-action-tile ei-action-crm" data-ei-action="crm" data-ei-id="' + e.id + '"><span class="ei-action-icon">➕</span><span class="ei-action-label">Naar CRM</span><span class="ei-action-sub">Klant + deal</span></button>';
|
||||
|
||||
var mapsBtn = e.maps_url
|
||||
? '<a class="ei-action-tile" href="' + esc(e.maps_url) + '" target="_blank" rel="noopener"><span class="ei-action-icon">📍</span><span class="ei-action-label">Maps</span><span class="ei-action-sub">Locatie</span></a>'
|
||||
: '';
|
||||
|
||||
var dealBtn = e.deal_id
|
||||
? '<a class="ei-action-tile" href="/deals"><span class="ei-action-icon">💼</span><span class="ei-action-label">Deal</span><span class="ei-action-sub">Pipeline</span></a>'
|
||||
: '';
|
||||
|
||||
var favOn = !!e.is_favorite;
|
||||
|
||||
m.innerHTML =
|
||||
'<header class="ei-drawer-head-rich">' +
|
||||
'<div class="ei-drawer-head-top">' +
|
||||
'<div class="ei-drawer-hero">' +
|
||||
'<span class="ei-drawer-badge ei-type-' + esc(e.entity_type) + '">' + esc(typeLabel(e.entity_type)) + '</span>' +
|
||||
'<span class="ei-drawer-flag">' + esc(e.country_iso2) + '</span>' +
|
||||
(e.client_id ? '<span class="ei-crm-badge">In CRM</span>' : '') +
|
||||
(favOn ? '<span class="ei-crm-badge" style="color:#facc15;border-color:rgba(251,191,36,.4)">★ Favoriet</span>' : '') +
|
||||
(e.halal_score != null ? '<span class="ei-halal-pill ei-halal-hot">' + Math.round(Number(e.halal_score)) + '/100</span>' : '') +
|
||||
'</div>' +
|
||||
'<button type="button" class="ei-drawer-close" data-ei-action="close" title="Sluiten">✕</button>' +
|
||||
'</div>' +
|
||||
'<h2 class="ei-drawer-title" id="ei-profile-title">' + esc(e.name) + '</h2>' +
|
||||
'<p class="ei-drawer-meta">' + esc(territoryName(e.country_iso2)) +
|
||||
' · Confidence <strong>' + (e.confidence || 0) + '%</strong>' +
|
||||
' · Pipeline <strong>' + esc(e.pipeline_stage || '—') + '</strong>' +
|
||||
' · Bron <strong>' + esc(e.source || '—') + '</strong></p>' +
|
||||
'</header>' +
|
||||
'<div class="ei-drawer-toolbar">' +
|
||||
crmBtn +
|
||||
'<button type="button" class="ei-action-tile ei-action-edit" data-ei-action="edit"><span class="ei-action-icon">✎</span><span class="ei-action-label">Bewerken</span><span class="ei-action-sub">Velden</span></button>' +
|
||||
'<button type="button" class="ei-action-tile' + (favOn ? ' ei-action-fav-on' : '') + '" data-ei-action="favorite" data-ei-id="' + e.id + '" data-ei-fav="' + (favOn ? '1' : '0') + '"><span class="ei-action-icon">' + (favOn ? '★' : '☆') + '</span><span class="ei-action-label">' + (favOn ? 'Favoriet' : 'Favoriet maken') + '</span></button>' +
|
||||
mapsBtn +
|
||||
'<button type="button" class="ei-action-tile" data-ei-action="sync-contacts"><span class="ei-action-icon">↻</span><span class="ei-action-label">Contacten</span></button>' +
|
||||
dealBtn +
|
||||
'<a class="ei-action-tile" href="/herman?context=export_catalog&entity=' + e.id + '"><span class="ei-action-icon">📋</span><span class="ei-action-label">Herman</span></a>' +
|
||||
'</div>' +
|
||||
'<div class="ei-drawer-body ei-drawer-body-rich">' +
|
||||
(halalTags ? '<div class="ei-halal-tags">' + halalTags + '</div>' : '') +
|
||||
((e.city || e.address_line || (e.lat && e.lon))
|
||||
? '<section class="ei-drawer-section"><h4>Locatie</h4>' +
|
||||
(e.address_line ? '<p>' + esc(e.address_line) + '</p>' : '') +
|
||||
(e.city ? '<p>' + esc(e.city) + (e.postal_code ? ', ' + esc(e.postal_code) : '') + '</p>' : '') +
|
||||
((e.lat && e.lon)
|
||||
? '<p class="ei-drawer-coords">' + esc(formatCoords(e.lat, e.lon)) +
|
||||
(e.maps_url ? ' <a href="' + esc(e.maps_url) + '" target="_blank" rel="noopener">Maps →</a>' : '') + '</p>'
|
||||
: '') +
|
||||
'</section>'
|
||||
: '') +
|
||||
'<section class="ei-drawer-section"><h4>Contact & web</h4>' +
|
||||
reachSectionHtml(e) + contactGapHint(e) +
|
||||
((!e.reach || !e.reach.has_any) && !e.email && !e.phone && !(e.websites && e.websites.length) && !e.website && !contacts.length ? '<p class="ei-drawer-empty">Geen contact — sync contacten om te verrijken.</p>' : '') +
|
||||
'</section>' +
|
||||
(e.client_id
|
||||
? '<section class="ei-drawer-section"><h4>CRM</h4>' +
|
||||
'<div class="ei-drawer-kv"><span>Klant</span><a href="/clients">' + esc(e.crm_client_name || ('#' + e.client_id)) + '</a></div>' +
|
||||
(e.crm_deal_title ? '<div class="ei-drawer-kv"><span>Deal</span><span>' + esc(e.crm_deal_title) + '</span></div>' : '') +
|
||||
'</section>'
|
||||
: '') +
|
||||
'<section class="ei-drawer-section"><h4>Contactpersonen (' + contacts.length + ')</h4>' +
|
||||
(contactRows || '<p class="ei-drawer-empty">Geen contactpersonen.</p>') +
|
||||
'</section></div>';
|
||||
|
||||
if (app) {
|
||||
app.selected = e;
|
||||
app.drawerOpen = true;
|
||||
app.drawerLoading = false;
|
||||
app.listFocusDetail = e;
|
||||
app.listFocusId = e.id;
|
||||
}
|
||||
},
|
||||
|
||||
fetchEntity: function (id) {
|
||||
return fetch('/api/export-intel/entities/' + id).then(function (r) {
|
||||
return r.json().then(function (d) {
|
||||
if (!r.ok) throw new Error(d.error || d.detail || ('HTTP ' + r.status));
|
||||
if (d && d.error) throw new Error(d.error);
|
||||
return d;
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
highlightOnMap: function (entity, app) {
|
||||
if (!entity || !entity.lat || !entity.lon || !global.ExportIntelMap) return;
|
||||
try {
|
||||
var mapId = activeMapId(app);
|
||||
global.ExportIntelMap.flyTo(entity.lat, entity.lon, 14, mapId);
|
||||
global.ExportIntelMap.highlightEntity(entity.id, mapId);
|
||||
} catch (e) { /* ignore */ }
|
||||
},
|
||||
|
||||
open: function (id) {
|
||||
id = Number(id);
|
||||
if (!Number.isFinite(id) || id <= 0) return;
|
||||
if (this._busy) return;
|
||||
this._busy = true;
|
||||
|
||||
this.showShell(true);
|
||||
this.renderLoading();
|
||||
|
||||
var self = this;
|
||||
var app = getApp();
|
||||
|
||||
this.fetchEntity(id)
|
||||
.then(function (entity) {
|
||||
self.renderFull(entity, app);
|
||||
self.highlightOnMap(entity, app);
|
||||
})
|
||||
.catch(function (err) {
|
||||
self.renderError(err.message || 'Profiel laden mislukt');
|
||||
})
|
||||
.finally(function () {
|
||||
self._busy = false;
|
||||
});
|
||||
},
|
||||
|
||||
close: function () {
|
||||
this._busy = false;
|
||||
this.showShell(false);
|
||||
this.clearMount();
|
||||
var app = getApp();
|
||||
if (app) {
|
||||
app.drawerOpen = false;
|
||||
app.drawerLoading = false;
|
||||
app.selected = null;
|
||||
app.editMode = false;
|
||||
}
|
||||
},
|
||||
|
||||
setFavorite: function (id, currentlyFavorite) {
|
||||
var self = this;
|
||||
var app = getApp();
|
||||
id = Number(id);
|
||||
if (!Number.isFinite(id)) return Promise.reject(new Error('Ongeldig id'));
|
||||
|
||||
return fetch('/api/export-intel/entities/favorites', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ entity_ids: [id], favorite: !currentlyFavorite }),
|
||||
})
|
||||
.then(function (r) {
|
||||
return r.json().then(function (d) {
|
||||
if (!r.ok) throw new Error((d && (d.error || d.detail)) || 'Favoriet mislukt');
|
||||
return d;
|
||||
});
|
||||
})
|
||||
.then(function () {
|
||||
return self.fetchEntity(id);
|
||||
})
|
||||
.then(function (entity) {
|
||||
if (app) {
|
||||
app.selected = entity;
|
||||
app.listFocusDetail = entity;
|
||||
app.listFocusId = entity.id;
|
||||
app.syncMsg = entity.is_favorite ? '★ Favoriet opgeslagen' : 'Favoriet verwijderd';
|
||||
if (app.stats && typeof app.stats.favorites === 'number') {
|
||||
app.stats.favorites += entity.is_favorite ? 1 : -1;
|
||||
if (app.stats.favorites < 0) app.stats.favorites = 0;
|
||||
}
|
||||
self.patchEntityInApp(app, entity);
|
||||
}
|
||||
self.renderFull(entity, app);
|
||||
return entity;
|
||||
});
|
||||
},
|
||||
|
||||
doCrm: function (id) {
|
||||
var self = this;
|
||||
var app = getApp();
|
||||
id = Number(id);
|
||||
if (!app || !app.pushEntityToCrm) return;
|
||||
app.pushEntityToCrm(id).then(function () {
|
||||
return self.fetchEntity(id);
|
||||
}).then(function (entity) {
|
||||
if (app) {
|
||||
app.selected = entity;
|
||||
app.listFocusDetail = entity;
|
||||
self.patchEntityInApp(app, entity);
|
||||
}
|
||||
self.renderFull(entity, app);
|
||||
}).catch(function (err) {
|
||||
if (app) app.syncMsg = 'CRM mislukt: ' + (err.message || err);
|
||||
});
|
||||
},
|
||||
|
||||
doEdit: function () {
|
||||
var app = getApp();
|
||||
if (!app || !app.selected) return;
|
||||
app.startEdit();
|
||||
this.renderEdit(app);
|
||||
},
|
||||
|
||||
renderEdit: function (app) {
|
||||
var e = app.selected;
|
||||
var f = app.editForm || {};
|
||||
var m = mountEl();
|
||||
if (!m || !e) return;
|
||||
m.innerHTML =
|
||||
'<header class="ei-drawer-head-rich"><div class="ei-drawer-head-top">' +
|
||||
'<h2 class="ei-drawer-title">Bewerken · ' + esc(e.name) + '</h2>' +
|
||||
'<button type="button" class="ei-drawer-close" data-ei-action="close">✕</button></div></header>' +
|
||||
'<div class="ei-drawer-body ei-drawer-body-rich"><div class="ei-drawer-edit">' +
|
||||
'<div class="ei-edit-grid">' +
|
||||
'<label>Naam<input type="text" id="ei-edit-name" value="' + esc(f.name || '') + '"></label>' +
|
||||
'<label>Stad<input type="text" id="ei-edit-city" value="' + esc(f.city || '') + '"></label>' +
|
||||
'<label>E-mail<input type="email" id="ei-edit-email" value="' + esc(f.email || '') + '"></label>' +
|
||||
'<label>Telefoon<input type="text" id="ei-edit-phone" value="' + esc(f.phone || '') + '"></label>' +
|
||||
'<label>Website<input type="url" id="ei-edit-website" value="' + esc(f.website || '') + '"></label>' +
|
||||
'</div><div class="ei-edit-actions">' +
|
||||
'<button type="button" class="btn btn-sm btn-pulse-green" data-ei-action="save-edit">Opslaan</button>' +
|
||||
'<button type="button" class="btn btn-sm" data-ei-action="cancel-edit">Annuleren</button>' +
|
||||
'</div></div></div>';
|
||||
},
|
||||
|
||||
saveEdit: function () {
|
||||
var app = getApp();
|
||||
if (!app || !app.selected) return;
|
||||
var self = this;
|
||||
app.editForm.name = (document.getElementById('ei-edit-name') || {}).value || '';
|
||||
app.editForm.city = (document.getElementById('ei-edit-city') || {}).value || '';
|
||||
app.editForm.email = (document.getElementById('ei-edit-email') || {}).value || '';
|
||||
app.editForm.phone = (document.getElementById('ei-edit-phone') || {}).value || '';
|
||||
app.editForm.website = (document.getElementById('ei-edit-website') || {}).value || '';
|
||||
var id = app.selected.id;
|
||||
Promise.resolve(app.saveEdit()).then(function () {
|
||||
return self.fetchEntity(id);
|
||||
}).then(function (entity) {
|
||||
if (app) {
|
||||
app.selected = entity;
|
||||
app.listFocusDetail = entity;
|
||||
self.patchEntityInApp(app, entity);
|
||||
}
|
||||
self.renderFull(entity, app);
|
||||
});
|
||||
},
|
||||
|
||||
cancelEdit: function () {
|
||||
var app = getApp();
|
||||
if (!app) return;
|
||||
app.cancelEdit();
|
||||
if (app.selected) this.renderFull(app.selected, app);
|
||||
},
|
||||
|
||||
doFavorite: function (id, isFav) {
|
||||
var self = this;
|
||||
this.setFavorite(id, isFav).catch(function (err) {
|
||||
self.renderError(err.message || 'Favoriet mislukt');
|
||||
});
|
||||
},
|
||||
|
||||
doSyncContacts: function () {
|
||||
var app = getApp();
|
||||
if (app && app.syncKind) app.syncKind('contacts');
|
||||
},
|
||||
|
||||
onModalClick: function (ev) {
|
||||
var t = ev.target;
|
||||
if (!t || !t.closest) return;
|
||||
if (!t.closest('#ei-profile-modal')) return;
|
||||
|
||||
if (t.closest('.ei-profile-backdrop')) {
|
||||
ev.preventDefault();
|
||||
this.close();
|
||||
return;
|
||||
}
|
||||
|
||||
var actionEl = t.closest('[data-ei-action]');
|
||||
if (!actionEl) return;
|
||||
|
||||
var action = actionEl.getAttribute('data-ei-action');
|
||||
if (!action) return;
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
var id = Number(actionEl.getAttribute('data-ei-id') || (getApp() && getApp().selected && getApp().selected.id));
|
||||
|
||||
if (action === 'close') this.close();
|
||||
else if (action === 'crm') this.doCrm(id);
|
||||
else if (action === 'edit') this.doEdit();
|
||||
else if (action === 'favorite') {
|
||||
var isFav = actionEl.getAttribute('data-ei-fav') === '1';
|
||||
this.doFavorite(id, isFav);
|
||||
}
|
||||
else if (action === 'sync-contacts') this.doSyncContacts();
|
||||
else if (action === 'save-edit') this.saveEdit();
|
||||
else if (action === 'cancel-edit') this.cancelEdit();
|
||||
},
|
||||
|
||||
onRowClick: function (ev) {
|
||||
var t = ev.target;
|
||||
if (!t || !t.closest) return;
|
||||
if (t.closest('#ei-profile-modal')) return;
|
||||
if (t.closest('.ei-td-check, input[type=checkbox], .ei-fav-btn, .ei-td-actions')) return;
|
||||
if (t.closest('a[href]') && !t.closest('.ei-row-open-btn, .ei-link-btn')) return;
|
||||
var row = t.closest('[data-entity-id]');
|
||||
if (!row) return;
|
||||
var id = row.getAttribute('data-entity-id');
|
||||
if (!id) return;
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
this.open(id);
|
||||
},
|
||||
|
||||
bindApp: function (app) {
|
||||
if (!app) return;
|
||||
global.__exportIntelApp = app;
|
||||
var self = this;
|
||||
app.openEntity = function (id) { self.open(id); };
|
||||
app.closeDrawer = function () { self.close(); };
|
||||
},
|
||||
|
||||
wireModal: function () {
|
||||
var modal = document.getElementById('ei-profile-modal');
|
||||
if (!modal || modal._eiWired) return;
|
||||
modal._eiWired = true;
|
||||
var self = this;
|
||||
modal.addEventListener('click', function (ev) { self.onModalClick(ev); }, true);
|
||||
},
|
||||
|
||||
boot: function () {
|
||||
var self = this;
|
||||
this.wireModal();
|
||||
document.addEventListener('click', function (ev) { self.onRowClick(ev); }, true);
|
||||
document.addEventListener('keydown', function (ev) {
|
||||
if (ev.key === 'Escape') {
|
||||
var modal = document.getElementById('ei-profile-modal');
|
||||
if (modal && modal.classList.contains('is-open')) self.close();
|
||||
}
|
||||
});
|
||||
|
||||
var params = new URLSearchParams(global.location.search);
|
||||
var openId = params.get('open');
|
||||
|
||||
function tryBind() {
|
||||
var page = document.querySelector('.ei-page');
|
||||
if (page && page._x_dataStack && page._x_dataStack[0]) {
|
||||
self.bindApp(page._x_dataStack[0]);
|
||||
if (openId) self.open(openId);
|
||||
return true;
|
||||
}
|
||||
if (global.__exportIntelApp) {
|
||||
self.bindApp(global.__exportIntelApp);
|
||||
if (openId) self.open(openId);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!tryBind()) {
|
||||
var n = 0;
|
||||
var timer = setInterval(function () {
|
||||
n++;
|
||||
if (tryBind() || n > 120) clearInterval(timer);
|
||||
}, 100);
|
||||
}
|
||||
|
||||
document.addEventListener('alpine:initialized', function () {
|
||||
tryBind();
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
global.ExportIntelProfile = Profile;
|
||||
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', function () { Profile.boot(); });
|
||||
} else {
|
||||
Profile.boot();
|
||||
}
|
||||
})(window);
|
||||
@@ -5,6 +5,12 @@ function exportIntelApp() {
|
||||
tabIndicatorH: 40,
|
||||
busy: false,
|
||||
syncMsg: '',
|
||||
syncMonitor: null,
|
||||
syncMonitorOpen: true,
|
||||
syncMonitorPoll: null,
|
||||
googleMapsKey: '',
|
||||
googleMapsKeySet: false,
|
||||
googleKeySaving: false,
|
||||
stats: {},
|
||||
regions: [],
|
||||
territories: [],
|
||||
@@ -27,6 +33,7 @@ function exportIntelApp() {
|
||||
mapHalalMin: 55,
|
||||
mapError: '',
|
||||
mapLoading: false,
|
||||
tabMapLoading: false,
|
||||
mapTruncated: false,
|
||||
halalTopMarkets: [],
|
||||
halalTopEntities: [],
|
||||
@@ -37,6 +44,11 @@ function exportIntelApp() {
|
||||
filterHasEmail: '',
|
||||
filterFavoritesOnly: false,
|
||||
filterCrmStatus: '',
|
||||
filterConfidenceMin: '',
|
||||
filterCity: '',
|
||||
filterTenderStatus: '',
|
||||
filterGovCategory: '',
|
||||
_cityTimer: null,
|
||||
selectedIds: [],
|
||||
crmPipeline: [],
|
||||
crmModalOpen: false,
|
||||
@@ -58,12 +70,65 @@ function exportIntelApp() {
|
||||
{ id: 'pipeline', icon: '🔗', label: 'Pipeline', color: '#fb923c', key: '8' },
|
||||
],
|
||||
|
||||
|
||||
TYPE_GROUPS: {
|
||||
b2b: ['distributor', 'wholesaler', 'importer', 'logistics', 'cold_storage', 'port_agent'],
|
||||
horeca: ['restaurant', 'doner_shoarma', 'butcher', 'foodservice'],
|
||||
caterer: ['contract_caterer'],
|
||||
},
|
||||
TYPE_CHIP_EXPAND: {
|
||||
distributor: 'b2b',
|
||||
importer: 'b2b',
|
||||
logistics: 'b2b',
|
||||
restaurant: 'horeca',
|
||||
doner_shoarma: 'horeca',
|
||||
butcher: 'horeca',
|
||||
foodservice: 'horeca',
|
||||
},
|
||||
|
||||
expandEntityTypes(typeOrList) {
|
||||
var self = this;
|
||||
var raw = Array.isArray(typeOrList) ? typeOrList : [typeOrList];
|
||||
var out = [];
|
||||
raw.forEach(function (v) {
|
||||
if (!v) return;
|
||||
var key = String(v).trim();
|
||||
var group = self.TYPE_CHIP_EXPAND[key];
|
||||
if (group && self.TYPE_GROUPS[group]) {
|
||||
out = out.concat(self.TYPE_GROUPS[group]);
|
||||
} else {
|
||||
out.push(key);
|
||||
}
|
||||
});
|
||||
return out.filter(function (v, i, a) { return a.indexOf(v) === i; });
|
||||
},
|
||||
|
||||
mapTypesParam() {
|
||||
if (this.entityTypeFilter) {
|
||||
var expanded = this.expandEntityTypes(this.entityTypeFilter);
|
||||
if (expanded.length === 1) return { entity_type: expanded[0] };
|
||||
if (expanded.length) return { entity_types: expanded.join(',') };
|
||||
}
|
||||
if (this.mapTypesSelected.length) {
|
||||
var all = this.expandEntityTypes(this.mapTypesSelected);
|
||||
if (all.length === 1) return { entity_type: all[0] };
|
||||
if (all.length) return { entity_types: all.join(',') };
|
||||
}
|
||||
return {};
|
||||
},
|
||||
|
||||
shouldAutoFitMap(featCount) {
|
||||
return !!(this.country || this.region || this.q || this.entityTypeFilter ||
|
||||
this.mapTypesSelected.length || this.mapHalalMode || this.filterFavoritesOnly ||
|
||||
this.filterCrmStatus || (featCount > 0 && featCount <= 800));
|
||||
},
|
||||
|
||||
mapTypeChips: [
|
||||
{ v: 'distributor', l: 'Distributeur', icon: '📦' },
|
||||
{ v: 'distributor', l: 'B2B / distri', icon: '📦' },
|
||||
{ v: 'wholesaler', l: 'Groothandel', icon: '🏪' },
|
||||
{ v: 'importer', l: 'Importeur', icon: '🚢' },
|
||||
{ v: 'logistics', l: 'Logistiek', icon: '🚚' },
|
||||
{ v: 'restaurant', l: 'Restaurant', icon: '🍽️' },
|
||||
{ v: 'restaurant', l: 'Horeca', icon: '🍽️' },
|
||||
{ v: 'doner_shoarma', l: 'Döner', icon: '🥙' },
|
||||
{ v: 'butcher', l: 'Slager', icon: '🥩' },
|
||||
{ v: 'contract_caterer', l: 'Cateraar', icon: '🏢' },
|
||||
@@ -75,11 +140,13 @@ function exportIntelApp() {
|
||||
var t = params.get('tab');
|
||||
if (t) this.tab = t;
|
||||
var self = this;
|
||||
window.__exportIntelApp = self;
|
||||
document.addEventListener('export-intel:open-entity', function (ev) {
|
||||
if (ev.detail && ev.detail.id) self.openEntity(ev.detail.id);
|
||||
});
|
||||
await this.loadMeta();
|
||||
await this.refresh();
|
||||
this.startSyncMonitor(true);
|
||||
this.$nextTick(() => this.updateTabIndicator());
|
||||
window.addEventListener('keydown', (e) => {
|
||||
if (e.target.matches('input, textarea, select')) return;
|
||||
@@ -94,6 +161,7 @@ function exportIntelApp() {
|
||||
async loadMeta() {
|
||||
try {
|
||||
this.regions = await fetch('/api/export-intel/regions').then((r) => r.json());
|
||||
await this.loadGoogleSettings();
|
||||
this.territories = await fetch('/api/export-intel/territories').then((r) => r.json());
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
@@ -141,6 +209,10 @@ function exportIntelApp() {
|
||||
this.filterHasEmail = '';
|
||||
this.filterFavoritesOnly = false;
|
||||
this.filterCrmStatus = '';
|
||||
this.filterConfidenceMin = '';
|
||||
this.filterCity = '';
|
||||
this.filterTenderStatus = '';
|
||||
this.filterGovCategory = '';
|
||||
this.selectedIds = [];
|
||||
this.applyMapFilters();
|
||||
},
|
||||
@@ -153,6 +225,14 @@ function exportIntelApp() {
|
||||
return this.tab === 'map';
|
||||
},
|
||||
|
||||
mapTypeCount(v) {
|
||||
var geo = (this.stats && this.stats.entity_types_geo) || {};
|
||||
var expanded = this.expandEntityTypes(v);
|
||||
var n = 0;
|
||||
expanded.forEach(function (t) { n += Number(geo[t] || 0); });
|
||||
return n;
|
||||
},
|
||||
|
||||
isMapTypeActive(v) {
|
||||
return this.mapTypesSelected.indexOf(v) >= 0;
|
||||
},
|
||||
@@ -170,14 +250,6 @@ function exportIntelApp() {
|
||||
this.applyMapFilters();
|
||||
},
|
||||
|
||||
mapTypesParam() {
|
||||
if (this.entityTypeFilter) return { entity_type: this.entityTypeFilter };
|
||||
if (this.mapTypesSelected.length) {
|
||||
return { entity_types: this.mapTypesSelected.join(',') };
|
||||
}
|
||||
return {};
|
||||
},
|
||||
|
||||
applyMapFilters() {
|
||||
if (this.tab !== 'map') {
|
||||
this.loadTabData();
|
||||
@@ -187,11 +259,31 @@ function exportIntelApp() {
|
||||
},
|
||||
|
||||
showEmailFilter() {
|
||||
return this.tab === 'contacts';
|
||||
return ['map', 'distributors', 'customers', 'caterers', 'contacts'].indexOf(this.tab) >= 0;
|
||||
},
|
||||
|
||||
showCrmFilter() {
|
||||
return this.tab === 'map' || this.tab === 'contacts';
|
||||
return ['map', 'distributors', 'customers', 'caterers', 'contacts', 'pipeline'].indexOf(this.tab) >= 0;
|
||||
},
|
||||
|
||||
showCollectionFilters() {
|
||||
return this.showCrmFilter() || this.showFavoritesFilter();
|
||||
},
|
||||
|
||||
showFavoritesFilter() {
|
||||
return ['map', 'distributors', 'customers', 'caterers', 'contacts'].indexOf(this.tab) >= 0;
|
||||
},
|
||||
|
||||
showConfidenceFilter() {
|
||||
return this.tab === 'distributors';
|
||||
},
|
||||
|
||||
showCityFilter() {
|
||||
return ['distributors', 'customers', 'caterers', 'contacts'].indexOf(this.tab) >= 0;
|
||||
},
|
||||
|
||||
showContextFilters() {
|
||||
return this.showEntityTypeFilter() || this.showEmailFilter() || this.showConfidenceFilter() || this.showCityFilter() || this.tab === 'tenders' || this.tab === 'gov';
|
||||
},
|
||||
|
||||
showSelectionBar() {
|
||||
@@ -210,6 +302,75 @@ function exportIntelApp() {
|
||||
return 'Bezig…';
|
||||
},
|
||||
|
||||
|
||||
displayEntities() {
|
||||
var list = this.entities || [];
|
||||
if (this.filterHasEmail === "yes") {
|
||||
list = list.filter(function (e) {
|
||||
return e.email || e.primary_email || e.phone || e.primary_phone || e.has_contact;
|
||||
});
|
||||
} else if (this.filterHasEmail === "no") {
|
||||
list = list.filter(function (e) {
|
||||
return !e.email && !e.primary_email && !e.phone && !e.primary_phone && !e.has_contact;
|
||||
});
|
||||
}
|
||||
if (this.filterConfidenceMin) {
|
||||
var min = Number(this.filterConfidenceMin);
|
||||
list = list.filter(function (e) { return (e.confidence || 0) >= min; });
|
||||
}
|
||||
if (this.filterCity && this.filterCity.trim()) {
|
||||
var c = this.filterCity.trim().toLowerCase();
|
||||
list = list.filter(function (e) { return (e.city || "").toLowerCase().includes(c); });
|
||||
}
|
||||
return list;
|
||||
},
|
||||
|
||||
displayCount() {
|
||||
if (this.tab === "contacts") return (this.contacts || []).length;
|
||||
return this.displayEntities().length;
|
||||
},
|
||||
|
||||
displayPipeline() {
|
||||
var list = this.crmPipeline || [];
|
||||
if (this.q && this.q.trim()) {
|
||||
var ql = this.q.trim().toLowerCase();
|
||||
list = list.filter(function (p) { return (p.name || "").toLowerCase().includes(ql); });
|
||||
}
|
||||
return list;
|
||||
},
|
||||
|
||||
hasActiveFilters() {
|
||||
return !!(this.q || this.entityTypeFilter || this.mapTypesSelected.length || this.mapHalalMode ||
|
||||
this.filterHasEmail || this.filterFavoritesOnly || this.filterCrmStatus ||
|
||||
this.filterConfidenceMin || this.filterCity || this.filterTenderStatus || this.filterGovCategory);
|
||||
},
|
||||
|
||||
applyEntityFilters() {
|
||||
if (this.tab === "map") this.applyMapFilters();
|
||||
else {
|
||||
this.loadTabData();
|
||||
}
|
||||
},
|
||||
|
||||
onCityFilterInput() {
|
||||
clearTimeout(this._cityTimer);
|
||||
},
|
||||
|
||||
onPipelineFilter() {
|
||||
clearTimeout(this._searchTimer);
|
||||
},
|
||||
|
||||
applyGovFilters() {
|
||||
this.loadTabData();
|
||||
},
|
||||
|
||||
visibleEntities() {
|
||||
if (this.tab === "map" && this.mapHalalMode && this.halalTopEntities.length) {
|
||||
return this.halalTopEntities;
|
||||
}
|
||||
return this.displayEntities();
|
||||
},
|
||||
|
||||
entityTypeOptions() {
|
||||
if (this.tab === 'distributors') {
|
||||
return [
|
||||
@@ -232,6 +393,15 @@ function exportIntelApp() {
|
||||
if (this.tab === 'caterers') {
|
||||
return [{ v: '', l: 'Alle types' }, { v: 'contract_caterer', l: 'Contract cateraar' }];
|
||||
}
|
||||
if (this.tab === 'pipeline') {
|
||||
return [
|
||||
{ v: '', l: 'Alle types' },
|
||||
{ v: 'distributor', l: 'Distributeur' },
|
||||
{ v: 'wholesaler', l: 'Groothandel' },
|
||||
{ v: 'contract_caterer', l: 'Cateraar' },
|
||||
{ v: 'restaurant', l: 'Restaurant' },
|
||||
];
|
||||
}
|
||||
if (this.tab === 'contacts') {
|
||||
return [
|
||||
{ v: '', l: 'Alle types' },
|
||||
@@ -253,6 +423,91 @@ function exportIntelApp() {
|
||||
];
|
||||
},
|
||||
|
||||
|
||||
tabMapId() {
|
||||
var tabs = ['distributors', 'customers', 'caterers', 'contacts', 'pipeline'];
|
||||
if (tabs.indexOf(this.tab) < 0) return null;
|
||||
return 'ei-map-' + this.tab;
|
||||
},
|
||||
|
||||
entitiesToGeojson(list) {
|
||||
var features = [];
|
||||
(list || []).forEach(function (e) {
|
||||
if (e.lat == null || e.lon == null) return;
|
||||
features.push({
|
||||
type: 'Feature',
|
||||
geometry: { type: 'Point', coordinates: [Number(e.lon), Number(e.lat)] },
|
||||
properties: {
|
||||
id: e.id,
|
||||
name: e.name,
|
||||
entity_type: e.entity_type,
|
||||
country_iso2: e.country_iso2,
|
||||
city: e.city,
|
||||
address_line: e.address_line,
|
||||
email: e.email || e.primary_email,
|
||||
phone: e.phone || e.primary_phone,
|
||||
website: e.website,
|
||||
confidence: e.confidence,
|
||||
halal_score: e.halal_score,
|
||||
halal_tier: e.halal_tier,
|
||||
contact_count: e.contact_count,
|
||||
pipeline_stage: e.pipeline_stage,
|
||||
volume_band: e.volume_band,
|
||||
},
|
||||
});
|
||||
});
|
||||
return { type: 'FeatureCollection', features: features };
|
||||
},
|
||||
|
||||
async fetchTabMapBundle() {
|
||||
var url = '/api/export-intel/map/bundle';
|
||||
var qs = [];
|
||||
if (this.country) qs.push('country=' + encodeURIComponent(this.country));
|
||||
if (this.region) qs.push('region=' + encodeURIComponent(this.region));
|
||||
if (this.q && this.q.trim()) qs.push('q=' + encodeURIComponent(this.q.trim()));
|
||||
if (this.filterFavoritesOnly) qs.push('favorite_only=true');
|
||||
if (this.filterCrmStatus === 'linked') qs.push('crm_linked=true');
|
||||
if (this.filterCrmStatus === 'not_linked') qs.push('crm_linked=false');
|
||||
var tabTypes = null;
|
||||
if (this.tab === 'distributors') tabTypes = this.TYPE_GROUPS.b2b;
|
||||
else if (this.tab === 'customers') tabTypes = this.TYPE_GROUPS.horeca;
|
||||
else if (this.tab === 'caterers') tabTypes = this.TYPE_GROUPS.caterer;
|
||||
if (this.entityTypeFilter) {
|
||||
var ef = this.expandEntityTypes(this.entityTypeFilter);
|
||||
tabTypes = ef;
|
||||
}
|
||||
if (tabTypes) {
|
||||
if (tabTypes.length === 1) qs.push('entity_type=' + encodeURIComponent(tabTypes[0]));
|
||||
else qs.push('entity_types=' + encodeURIComponent(tabTypes.join(',')));
|
||||
}
|
||||
if (this.tab === 'pipeline') qs.push('crm_linked=true');
|
||||
if (qs.length) url += '?' + qs.join('&');
|
||||
var bundle = await fetch(url).then(function (r) { return r.json(); });
|
||||
this._lastMapBundleMeta = bundle.meta || {};
|
||||
return bundle.entities || { type: 'FeatureCollection', features: [] };
|
||||
},
|
||||
|
||||
async loadTabMap() {
|
||||
var cid = this.tabMapId();
|
||||
if (!cid || !document.getElementById(cid)) return;
|
||||
if (!window.L || !window.ExportIntelMap) return;
|
||||
this.tabMapLoading = true;
|
||||
try {
|
||||
var geo = await this.fetchTabMapBundle();
|
||||
var featN = (geo.features || []).length;
|
||||
var self = this;
|
||||
await this.$nextTick();
|
||||
window.ExportIntelMap.init(cid);
|
||||
window.ExportIntelMap.setOnEntityClick(function (id) { self.openEntity(id); }, cid);
|
||||
window.ExportIntelMap.setHalalMode(false, cid);
|
||||
window.ExportIntelMap.setFeatures(geo, { autoFit: this.shouldAutoFitMap(featN) }, cid);
|
||||
if (window.ExportIntelMap.invalidateAll) window.ExportIntelMap.invalidateAll();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
this.tabMapLoading = false;
|
||||
},
|
||||
|
||||
async loadTabData(opts) {
|
||||
opts = opts || {};
|
||||
var base = '/api/export-intel';
|
||||
@@ -260,20 +515,18 @@ function exportIntelApp() {
|
||||
if (this.tab === 'map') {
|
||||
return;
|
||||
} else if (this.tab === 'distributors') {
|
||||
var types = 'distributor,wholesaler,importer,logistics';
|
||||
var et = this.entityTypeFilter ? '&entity_type=' + encodeURIComponent(this.entityTypeFilter) : '';
|
||||
var r = await fetch(base + '/entities?entity_types=' + types + '&limit=500' + fq.replace(/&?entity_type=[^&]*/g, '') + et).then((x) => x.json());
|
||||
var types = this.expandEntityTypes(this.entityTypeFilter || 'b2b').join(',');
|
||||
var r = await fetch(base + '/entities?entity_types=' + encodeURIComponent(types) + '&limit=500' + fq.replace(/&?entity_type=[^&]*/g, '')).then((x) => x.json());
|
||||
this.entities = r.items || [];
|
||||
this.resultCount = r.total != null ? r.total : this.entities.length;
|
||||
} else if (this.tab === 'customers') {
|
||||
var types2 = 'restaurant,doner_shoarma,butcher,foodservice';
|
||||
var et2 = this.entityTypeFilter ? '&entity_type=' + encodeURIComponent(this.entityTypeFilter) : '';
|
||||
var r2 = await fetch(base + '/entities?entity_types=' + types2 + '&limit=500' + fq.replace(/&?entity_type=[^&]*/g, '') + et2).then((x) => x.json());
|
||||
var types2 = this.expandEntityTypes(this.entityTypeFilter || 'horeca').join(',');
|
||||
var r2 = await fetch(base + '/entities?entity_types=' + encodeURIComponent(types2) + '&limit=500' + fq.replace(/&?entity_type=[^&]*/g, '')).then((x) => x.json());
|
||||
this.entities = r2.items || [];
|
||||
this.resultCount = r2.total != null ? r2.total : this.entities.length;
|
||||
} else if (this.tab === 'caterers') {
|
||||
var et3 = this.entityTypeFilter || 'contract_caterer';
|
||||
var r3 = await fetch(base + '/entities?entity_type=' + et3 + '&limit=500' + fq.replace(/&?entity_type=[^&]*/g, '')).then((x) => x.json());
|
||||
var types3 = this.expandEntityTypes(this.entityTypeFilter || 'contract_caterer').join(',');
|
||||
var r3 = await fetch(base + '/entities?entity_types=' + encodeURIComponent(types3) + '&limit=500' + fq.replace(/&?entity_type=[^&]*/g, '')).then((x) => x.json());
|
||||
this.entities = r3.items || [];
|
||||
this.resultCount = r3.total != null ? r3.total : this.entities.length;
|
||||
this.catererPresence = await fetch(base + '/caterers/presence' + (this.country ? '?country=' + this.country : '')).then((x) => x.json());
|
||||
@@ -297,6 +550,9 @@ function exportIntelApp() {
|
||||
var ql = this.q.trim().toLowerCase();
|
||||
items = items.filter((t) => (t.title || '').toLowerCase().includes(ql));
|
||||
}
|
||||
if (this.filterTenderStatus) {
|
||||
items = items.filter((t) => (t.status || '').toLowerCase() === this.filterTenderStatus);
|
||||
}
|
||||
this.tenders = items;
|
||||
this.resultCount = items.length;
|
||||
} else if (this.tab === 'gov') {
|
||||
@@ -313,6 +569,9 @@ function exportIntelApp() {
|
||||
this.crmPipeline = pipe.items || [];
|
||||
this.resultCount = this.crmPipeline.length;
|
||||
}
|
||||
if (['distributors','customers','caterers','contacts','pipeline'].indexOf(this.tab) >= 0) {
|
||||
this.$nextTick(() => this.loadTabMap());
|
||||
}
|
||||
},
|
||||
|
||||
async loadMap() {
|
||||
@@ -355,16 +614,25 @@ function exportIntelApp() {
|
||||
if (!document.getElementById('ei-map')) { this.mapLoading = false; return; }
|
||||
var self = this;
|
||||
window.ExportIntelMap.init('ei-map');
|
||||
window.ExportIntelMap.setOnEntityClick(function (id) { self.openEntity(id); });
|
||||
window.ExportIntelMap.setHalalMode(this.mapHalalMode);
|
||||
var autoFit = !!(this.country || this.region);
|
||||
window.ExportIntelMap.setFeatures(bundle.entities || { features: [] }, { autoFit: autoFit });
|
||||
window.ExportIntelMap.setOnEntityClick(function (id) { self.openEntity(id); }, 'ei-map');
|
||||
window.ExportIntelMap.setHalalMode(this.mapHalalMode, 'ei-map');
|
||||
var feats = (bundle.entities && bundle.entities.features) || [];
|
||||
var autoFit = this.shouldAutoFitMap(feats.length);
|
||||
window.ExportIntelMap.setFeatures(bundle.entities || { features: [] }, { autoFit: autoFit }, 'ei-map');
|
||||
if (this.country) {
|
||||
var t = this.territories.find((x) => x.country_iso2 === this.country);
|
||||
if (t && t.lat && t.lon) window.ExportIntelMap.flyTo(t.lat, t.lon, t.map_zoom || 6);
|
||||
if (t && t.lat && t.lon) window.ExportIntelMap.flyTo(t.lat, t.lon, t.map_zoom || 6, 'ei-map');
|
||||
}
|
||||
}
|
||||
this.mapLoading = false;
|
||||
var self2 = this;
|
||||
this.$nextTick(function () {
|
||||
requestAnimationFrame(function () {
|
||||
if (window.ExportIntelMap && window.ExportIntelMap.invalidateAll) {
|
||||
window.ExportIntelMap.invalidateAll();
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
setTab(id, el) {
|
||||
@@ -378,6 +646,9 @@ function exportIntelApp() {
|
||||
history.replaceState(null, '', u.pathname + u.search);
|
||||
this.loadTabData();
|
||||
if (id === 'map') this.$nextTick(() => this.loadMap());
|
||||
else if (['distributors','customers','caterers','contacts','pipeline'].indexOf(id) >= 0) {
|
||||
this.$nextTick(() => this.loadTabMap());
|
||||
}
|
||||
this.$nextTick(() => this.updateTabIndicator(el));
|
||||
},
|
||||
|
||||
@@ -440,34 +711,20 @@ function exportIntelApp() {
|
||||
this.listFocusDetail = null;
|
||||
},
|
||||
|
||||
async openEntity(id) {
|
||||
openEntity(id) {
|
||||
if (!id) return;
|
||||
this.drawerLoading = true;
|
||||
this.drawerOpen = true;
|
||||
try {
|
||||
if (this.listFocusDetail && this.listFocusDetail.id === id) {
|
||||
this.selected = this.listFocusDetail;
|
||||
} else {
|
||||
this.selected = await this.fetchEntityDetail(id);
|
||||
this.listFocusId = id;
|
||||
this.listFocusDetail = this.selected;
|
||||
}
|
||||
if (window.ExportIntelMap && this.selected.lat && this.selected.lon) {
|
||||
window.ExportIntelMap.flyTo(this.selected.lat, this.selected.lon, 14);
|
||||
window.ExportIntelMap.highlightEntity(this.selected.id);
|
||||
}
|
||||
if (window.ExportIntelMap && window.ExportIntelMap.closePopup) {
|
||||
window.ExportIntelMap.closePopup();
|
||||
}
|
||||
} catch (e) {
|
||||
this.syncMsg = 'Profiel laden mislukt: ' + e.message;
|
||||
this.drawerOpen = false;
|
||||
this.selected = null;
|
||||
if (window.ExportIntelProfile && typeof window.ExportIntelProfile.open === 'function') {
|
||||
window.ExportIntelProfile.open(id);
|
||||
return;
|
||||
}
|
||||
this.drawerLoading = false;
|
||||
this.syncMsg = 'Profiel-module niet geladen — ververs de pagina';
|
||||
},
|
||||
|
||||
closeDrawer() {
|
||||
if (window.ExportIntelProfile && typeof window.ExportIntelProfile.close === 'function') {
|
||||
window.ExportIntelProfile.close();
|
||||
return;
|
||||
}
|
||||
this.drawerOpen = false;
|
||||
this.selected = null;
|
||||
this.drawerLoading = false;
|
||||
@@ -528,7 +785,7 @@ function exportIntelApp() {
|
||||
|
||||
async syncKind(kind) {
|
||||
if (kind === 'world') {
|
||||
if (!confirm('Wereld-sync: Europa, Midden-Oosten, Afrika en Amerika. OSM + contacten — kan lang duren. Doorgaan?')) return;
|
||||
if (!confirm('Wereld-sync: alle regio\'s (Europa, MENA, Afrika, Amerika, Asia, Oceanië). OSM + horeca + contacten — kan uren duren. Doorgaan?')) return;
|
||||
}
|
||||
if (kind === 'region' && !this.region) {
|
||||
this.syncMsg = 'Selecteer eerst een regio in de filterbalk';
|
||||
@@ -542,7 +799,12 @@ function exportIntelApp() {
|
||||
region_code: kind === 'region' ? this.region : (this.region || null),
|
||||
max_priority: 2,
|
||||
};
|
||||
if (kind === 'world') body = { max_priority: 2 };
|
||||
if (kind === 'world') body = { max_priority: 3 };
|
||||
if (kind === 'places' && !this.country && !this.region) {
|
||||
this.syncMsg = 'Selecteer een land of regio voor Google Places';
|
||||
this.busy = false;
|
||||
return;
|
||||
}
|
||||
var endpoint = kind === 'region' ? 'region' : kind;
|
||||
var r = await fetch('/api/export-intel/sync/' + endpoint, {
|
||||
method: 'POST',
|
||||
@@ -604,7 +866,128 @@ function exportIntelApp() {
|
||||
},
|
||||
|
||||
typeLabel(t) {
|
||||
return (t || '').replace(/_/g, ' ');
|
||||
var labels = {
|
||||
distributor: 'Distrib.',
|
||||
wholesaler: 'Grooth.',
|
||||
contract_caterer: 'Cateraar',
|
||||
end_customer: 'Eindkl.',
|
||||
hotel: 'Hotel',
|
||||
restaurant: 'Rest.',
|
||||
retailer: 'Retail',
|
||||
importer: 'Import',
|
||||
};
|
||||
return labels[t] || (t || '').replace(/_/g, ' ');
|
||||
},
|
||||
|
||||
|
||||
filteredTerritories() {
|
||||
var list = (this.territories || []).filter(function (t) {
|
||||
return !this.region || t.region_code === this.region;
|
||||
}, this);
|
||||
var seen = {};
|
||||
var out = [];
|
||||
list.forEach(function (t) {
|
||||
var iso = t.country_iso2;
|
||||
if (!iso || seen[iso]) return;
|
||||
seen[iso] = true;
|
||||
out.push(t);
|
||||
});
|
||||
out.sort(function (a, b) {
|
||||
return (a.name_nl || a.country_iso2 || '').localeCompare(b.name_nl || b.country_iso2 || '', 'nl');
|
||||
});
|
||||
return out;
|
||||
},
|
||||
|
||||
countryEntityCount(iso2) {
|
||||
if (!iso2) return 0;
|
||||
var cc = (this.stats && this.stats.country_entity_counts) || {};
|
||||
return Number(cc[iso2] || 0);
|
||||
},
|
||||
|
||||
countryOptionLabel(t) {
|
||||
if (!t) return '';
|
||||
var n = this.countryEntityCount(t.country_iso2);
|
||||
return n > 0 ? (t.name_nl + ' (' + n + ')') : t.name_nl;
|
||||
},
|
||||
|
||||
|
||||
|
||||
async loadGoogleSettings() {
|
||||
try {
|
||||
var s = await fetch('/api/export-intel/settings').then(function (r) { return r.json(); });
|
||||
this.googleMapsKeySet = !!(s && s.google_maps_api_key_set);
|
||||
this.googleMapsKey = '';
|
||||
} catch (e) { console.error(e); }
|
||||
},
|
||||
|
||||
async saveGoogleMapsKey() {
|
||||
if (!this.googleMapsKey || !this.googleMapsKey.trim()) return;
|
||||
this.googleKeySaving = true;
|
||||
try {
|
||||
await fetch('/api/export-intel/settings', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ google_maps_api_key: this.googleMapsKey.trim() }),
|
||||
});
|
||||
this.googleMapsKey = '';
|
||||
this.googleMapsKeySet = true;
|
||||
this.syncMsg = 'Google Places API-key opgeslagen';
|
||||
} catch (e) {
|
||||
this.syncMsg = 'API-key opslaan mislukt';
|
||||
}
|
||||
this.googleKeySaving = false;
|
||||
},
|
||||
|
||||
startSyncMonitor(silent) {
|
||||
var self = this;
|
||||
if (this.syncMonitorPoll) return;
|
||||
this.pollSyncStatus();
|
||||
this.syncMonitorPoll = setInterval(function () { self.pollSyncStatus(); }, 3000);
|
||||
},
|
||||
|
||||
stopSyncMonitor() {
|
||||
if (this.syncMonitorPoll) {
|
||||
clearInterval(this.syncMonitorPoll);
|
||||
this.syncMonitorPoll = null;
|
||||
}
|
||||
},
|
||||
|
||||
async pollSyncStatus() {
|
||||
try {
|
||||
var s = await fetch('/api/export-intel/sync/status').then(function (r) { return r.json(); });
|
||||
this.syncMonitor = s;
|
||||
if (s.any_running && s.active_jobs && s.active_jobs.length) {
|
||||
var j = s.active_jobs[0];
|
||||
this.syncMsg = (j.message || j.label || 'Sync bezig') + (j.percent ? ' · ' + j.percent + '%' : '');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
},
|
||||
|
||||
toggleSyncMonitor() {
|
||||
this.syncMonitorOpen = !this.syncMonitorOpen;
|
||||
},
|
||||
|
||||
syncMonitorPercent() {
|
||||
var jobs = (this.syncMonitor && this.syncMonitor.active_jobs) || [];
|
||||
if (!jobs.length) return 0;
|
||||
return jobs[0].percent || 0;
|
||||
},
|
||||
|
||||
formatSyncTime(ts) {
|
||||
if (!ts) return '';
|
||||
var d = new Date(ts * 1000);
|
||||
return d.toLocaleTimeString('nl-NL', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||
},
|
||||
|
||||
syncEventLabel(ev) {
|
||||
if (!ev) return '';
|
||||
var parts = [ev.event || ''];
|
||||
if (ev.message) parts.push(ev.message);
|
||||
else if (ev.country) parts.push(ev.country);
|
||||
if (ev.step) parts.push('(' + ev.step + ')');
|
||||
return parts.filter(Boolean).join(' · ');
|
||||
},
|
||||
|
||||
territoryName(iso2) {
|
||||
@@ -644,7 +1027,7 @@ function exportIntelApp() {
|
||||
}
|
||||
return;
|
||||
}
|
||||
var list = this.mapHalalMode && this.halalTopEntities.length ? this.halalTopEntities : this.entities;
|
||||
var list = this.visibleEntities();
|
||||
if (!list.length) return;
|
||||
var allSelected = list.every((e) => this.isSelected(e.id));
|
||||
if (allSelected) {
|
||||
|
||||
Reference in New Issue
Block a user