food-cockpit/foodlinkk-command-center
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SysOps: manual — 2026-07-30 09:33 UTC

Browse Source
This commit is contained in:
sysops
2026-07-30 09:33:03 +00:00
parent f21d58483b
commit 5dd69a1138
25 changed files with 4148 additions and 734 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cockpit/static/js/export-intel-map.js
+302 -91
View File
@@ -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: '&copy; OSM &copy; 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,
};
})();